From c8ad03de8d569a60e576ca87c362cf252509f53b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20H=C3=BCbner?= <magnuh@users.noreply.github.com>
Date: Fri, 15 Mar 2024 10:11:15 +0100
Subject: [PATCH] feat: New surface concept (#208)

---
 src/_rules/semantic.js              |  8 ++++++++
 test/__snapshots__/semantic.js.snap | 14 ++++++++++++++
 test/semantic.js                    | 12 ++++++++++++
 3 files changed, 34 insertions(+)

diff --git a/src/_rules/semantic.js b/src/_rules/semantic.js
index 42c285e..fc4d2fc 100644
--- 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
index 08b3e30..9fa6595 100644
--- 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
index ddad903..4b52568 100644
--- 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);
+});