feat: New surface concept (#208)

warp-ds · Mar 15, 2024 · c8ad03d · c8ad03d
1 parent 9e0834d
commit c8ad03d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/src/_rules/semantic.js b/src/_rules/semantic.js
@@ -14,4 +14,12 @@ export const semanticRules = [
  [getSemanticRegEx('outline'), ([, semanticVal = '']) => ({ 'outline-color': h.semanticToken(`border${semanticVal}`) })],
  [getSemanticRegEx('border', 'lrtbxy'), handleBorder],
  [getSemanticRegEx('divide', 'xy'), handleDivide],
+ [/^s-surface-sunken$/, () => ({ 'background-color': 'var(--w-s-color-surface-sunken)' })],
+ [
+ /^s-(surface-elevated-.*)$/,
+ ([, semanticVal]) => ({
+ 'background-color': `var(--w-s-color-${semanticVal}`,
+ 'box-shadow': `var(--w-s-shadow-${semanticVal})`,
+ }),
+ ],
 ];
diff --git a/test/__snapshots__/semantic.js.snap b/test/__snapshots__/semantic.js.snap
@@ -1,5 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`it generates css based on semantic surface tokens 1`] = `
+"/* layer: default */
+.s-surface-sunken{background-color:var(--w-s-color-surface-sunken);}
+.s-surface-elevated-100{background-color:var(--w-s-color-surface-elevated-100;box-shadow:var(--w-s-shadow-surface-elevated-100);}
+.s-surface-elevated-100-active{background-color:var(--w-s-color-surface-elevated-100-active;box-shadow:var(--w-s-shadow-surface-elevated-100-active);}
+.s-surface-elevated-100-hover{background-color:var(--w-s-color-surface-elevated-100-hover;box-shadow:var(--w-s-shadow-surface-elevated-100-hover);}
+.s-surface-elevated-200{background-color:var(--w-s-color-surface-elevated-200;box-shadow:var(--w-s-shadow-surface-elevated-200);}
+.s-surface-elevated-200-active{background-color:var(--w-s-color-surface-elevated-200-active;box-shadow:var(--w-s-shadow-surface-elevated-200-active);}
+.s-surface-elevated-200-hover{background-color:var(--w-s-color-surface-elevated-200-hover;box-shadow:var(--w-s-shadow-surface-elevated-200-hover);}
+.s-surface-elevated-300{background-color:var(--w-s-color-surface-elevated-300;box-shadow:var(--w-s-shadow-surface-elevated-300);}
+.s-surface-elevated-300-active{background-color:var(--w-s-color-surface-elevated-300-active;box-shadow:var(--w-s-shadow-surface-elevated-300-active);}
+.s-surface-elevated-300-hover{background-color:var(--w-s-color-surface-elevated-300-hover;box-shadow:var(--w-s-shadow-surface-elevated-300-hover);}"
+`;
+
 exports[`it generates css based on semantic warp tokens 1`] = `
 "/* layer: default */
 .s-bg{background-color:var(--w-s-color-background);}

diff --git a/test/semantic.js b/test/semantic.js
@@ -21,3 +21,15 @@ test('it should not generate css with incorrect alpha channel values', async ({
  const { css } = await uno.generate(antiClasses);
  expect(css).toHaveLength(0);
 });
+
+test('it generates css based on semantic surface tokens', async ({ uno }) => {
+ const classes = ['s-surface-sunken', 's-surface-elevated-100', 's-surface-elevated-100-hover', 's-surface-elevated-100-active', 's-surface-elevated-200', 's-surface-elevated-200-hover', 's-surface-elevated-200-active', 's-surface-elevated-300', 's-surface-elevated-300-hover', 's-surface-elevated-300-active'];
+ const { css } = await uno.generate(classes);
+ expect(css).toMatchSnapshot();
+});
+
+test('it should not generate css for incorrect surface classes', async ({ uno }) => {
+ const antiClasses = ['s-surface', 's-surface-sunken-100', 's-surface-elevated', 'surface-elevated-100', 'surface-sunken'];
+ const { css } = await uno.generate(antiClasses);
+ expect(css).toHaveLength(0);
+});