Merge pull request #196 from warp-ds/next

Release 1.7.0

CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.7.0-next.1](https://github.com/warp-ds/drive/compare/v1.6.1-next.1...v1.7.0-next.1) (2024-01-24)
+
+
+### Features
+
+* Add support for arbitrary box-shadow ([#194](https://github.com/warp-ds/drive/issues/194)) ([984e3d3](https://github.com/warp-ds/drive/commit/984e3d31e2653ed64340f0bc924c558109084586))
+
+## [1.6.1-next.1](https://github.com/warp-ds/drive/compare/v1.6.0...v1.6.1-next.1) (2024-01-24)
+
+
+### Bug Fixes
+
+* Use semantic token for spinner color ([#195](https://github.com/warp-ds/drive/issues/195)) ([f8ec1a3](https://github.com/warp-ds/drive/commit/f8ec1a318295f977702aaf37a46a92b395c11b1e))
+
 # [1.6.0](https://github.com/warp-ds/drive/compare/v1.5.0...v1.6.0) (2024-01-16)
 
 

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@warp-ds/uno",
  "repository": "[email protected]:warp-ds/drive.git",
- "version": "1.6.0",
+ "version": "1.7.0-next.1",
  "type": "module",
  "exports": {
  ".": "./src/plugin.js",

src/_rules/animations.js

@@ -6,7 +6,7 @@ const inProgress = 'background-image:linear-gradient(135deg,rgba(0, 0, 0, 0.05)
 const keyFrames = '@keyframes animate-inprogress {0% {background-position: 0 0;}to {background-position: 60px 0;}}';
 
 /*----SPINNER----*/
-const spinner = '--spinner-size: 24px;height: var(--spinner-size);width: var(--spinner-size);border-radius: 50%;border: calc(var(--spinner-size) / 8) solid var(--w-color-spinner-border);border-top-color: var(--w-color-spinner-border-top);position: relative;animation: animate-spinner 0.75s infinite linear;';
+const spinner = '--spinner-size: 24px;height: var(--spinner-size);width: var(--spinner-size);border-radius: 50%;border: calc(var(--spinner-size) / 8) solid var(--w-color-spinner-border);border-top-color: var(--w-s-color-border-primary);position: relative;animation: animate-spinner 0.75s infinite linear;';
 const spinnerPseudo = `content: ' ';height: calc(var(--spinner-size) / 8);width: calc(var(--spinner-size) / 8);border-radius: 50%;position: absolute;top: calc(var(--spinner-size) / 180);`;
 const spinnerBefore = 'left:0;';
 const spinnerAfter = 'right:0;';

src/_rules/shadow.js

@@ -1,4 +1,9 @@
-export const shadows = [[/^shadow-(s|m|l|xl)$/, ([, size]) => ({ 'box-shadow': `var(--w-shadow-${size})` })]];
+import { resolveArbitraryValues } from '#utils';
+
+export const shadows = [
+ [/^shadow-(s|m|l|xl)$/, ([, size]) => ({ 'box-shadow': `var(--w-shadow-${size})` })],
+ [/^shadow-\[(.+)]$/, ([, val]) => ({ 'box-shadow': val.startsWith('--') ? `var(${val})` : resolveArbitraryValues(val) })],
+];
 
 const dropShadowDefaultColor = '64, 64, 64';
 

src/_rules/slider.js

@@ -1,5 +1,5 @@
-// Hardcoded styling for slider border shadow, will be modified and handled with correct color variables at a later stage
-// TODO: Make the colors for the slider shadow themeable
+// Deprecated - DO NOT USE! - Replace with arbitrary box-shadow (shadow-[--token]) to handle theming
+
 const defaultColor = 'rgba(0, 0, 0, .08)';
 const sliderStates = {
  active: '0 0 0 8px',

test/__snapshots__/shadow.js.snap

@@ -1,5 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`arbitrary box-shadows work 1`] = `
+"/* layer: default */
+.shadow-\\[--w-shadow-m\\]{box-shadow:var(--w-shadow-m);}
+.shadow-\\[0_6px_12px_rgba\\(0\\,0\\,0\\,\\.2\\)\\,0_10px_20px_rgba\\(0\\,0\\,0\\,\\.1\\)\\]{box-shadow:0rem 6px 12px rgba(0,0,0,.2),0 10px 20px rgba(0,0,0,.1);}
+.shadow-\\[var\\(--arbitrary-shadow-var\\)\\]{box-shadow:var(--arbitrary-shadow-var);}"
+`;
+
 exports[`drop shadows 1`] = `
 "/* layer: default */
 .drop-shadow-l{filter:drop-shadow(rgba(64, 64, 64, .23) 0 6px 8px) drop-shadow(rgba(64, 64, 64, .19) 0 10px 20px);}

test/animations.js

@@ -18,6 +18,6 @@ test('animate spinner', async ({ uno }) => {
  const { css } = await uno.generate(classes);
  expect(css).toMatchInlineSnapshot(`
  "/* layer: default */
- .animate-spinner{--spinner-size: 24px;height: var(--spinner-size);width: var(--spinner-size);border-radius: 50%;border: calc(var(--spinner-size) / 8) solid var(--w-color-spinner-border);border-top-color: var(--w-color-spinner-border-top);position: relative;animation: animate-spinner 0.75s infinite linear;}.animate-spinner::before,.animate-spinner::after{content: ' ';height: calc(var(--spinner-size) / 8);width: calc(var(--spinner-size) / 8);border-radius: 50%;position: absolute;top: calc(var(--spinner-size) / 180);}.animate-spinner::after{right:0;}.animate-spinner::before{left:0;}@keyframes animate-spinner {to{transform:rotate(359deg);}}"
+ .animate-spinner{--spinner-size: 24px;height: var(--spinner-size);width: var(--spinner-size);border-radius: 50%;border: calc(var(--spinner-size) / 8) solid var(--w-color-spinner-border);border-top-color: var(--w-s-color-border-primary);position: relative;animation: animate-spinner 0.75s infinite linear;}.animate-spinner::before,.animate-spinner::after{content: ' ';height: calc(var(--spinner-size) / 8);width: calc(var(--spinner-size) / 8);border-radius: 50%;position: absolute;top: calc(var(--spinner-size) / 180);}.animate-spinner::after{right:0;}.animate-spinner::before{left:0;}@keyframes animate-spinner {to{transform:rotate(359deg);}}"
  `);
 });

test/shadow.js

@@ -9,6 +9,12 @@ test('shadows work', async ({ uno }) => {
  expect(css).toMatchSnapshot();
 });
 
+test('arbitrary box-shadows work', async ({ uno }) => {
+ const classes = ['shadow-[var(--arbitrary-shadow-var)]', 'shadow-[--w-shadow-m]', 'shadow-[0_6px_12px_rgba(0,0,0,.2),0_10px_20px_rgba(0,0,0,.1)]'];
+ const { css } = await uno.generate(classes);
+ expect(css).toMatchSnapshot();
+});
+
 test('drop shadows', async ({ uno }) => {
  const classes = ['drop-shadow-s', 'drop-shadow-m', 'drop-shadow-l', 'drop-shadow-xl'];
  const { css } = await uno.generate(classes);