@uncinq/design-tokens 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +2 -2
  2. package/package.json +1 -1
  3. package/tokens/primitive/color.css +26 -0
  4. package/tokens/primitive/shadow.css +6 -9
  5. package/tokens/semantic/color.css +13 -2
  6. package/tokens/semantic/dark.css +48 -0
  7. package/tokens/semantic/focus.css +2 -1
  8. package/tokens/semantic/form.css +5 -3
  9. package/tokens/semantic/grid.css +0 -14
  10. package/tokens/semantic/icon.css +11 -7
  11. package/tokens/semantic/mediaqueries.css +17 -0
  12. package/tokens/semantic/motion.css +1 -1
  13. package/tokens/semantic/opacity.css +3 -2
  14. package/tokens/semantic/shadow.css +14 -0
  15. package/tokens/semantic/spacing.css +2 -1
  16. package/tokens/semantic.css +4 -0
package/README.md CHANGED
@@ -49,7 +49,8 @@ Scoped to a specific component. Generic component tokens are provided by [@uncin
49
49
 
50
50
  ```css
51
51
  --alert-border-radius: var(--radius-none);
52
- --btn-padding: var(--spacing-control);
52
+ --btn-padding-x: var(--spacing-control);
53
+ --btn-padding-y: var(--spacing-control);
53
54
  ```
54
55
 
55
56
  ---
@@ -114,7 +115,6 @@ All tokens follow the pattern: `--{category}-{subcategory?}-{variant}-{state?}`
114
115
  | `easing` | Timing functions | `--easing-bounce` |
115
116
  | `transition` | Shorthand transitions | `--transition-normal`, `--transition-color` |
116
117
  | `ratio` | Aspect ratios | `--ratio-16-9` |
117
- | `flex` | Flex-basis fractions | `--flex-half`, `--flex-third` |
118
118
  | `fluid-text` | Responsive fluid type scale (Utopia) | `--fluid-text-sm`, `--fluid-text-xl` |
119
119
  | `fluid-spacing` | Responsive fluid spacing scale (Utopia) | `--fluid-spacing-sm`, `--fluid-spacing-lg` |
120
120
  | `focus` | Focus ring tokens | `--focus-color`, `--focus-outline-width` |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/design-tokens",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Framework-agnostic CSS design tokens — primitive and semantic layers.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/primitive/color.css CHANGED
@@ -65,6 +65,19 @@
65
65
  --color-gray-900: oklch(0.208 0.006 264.542);
66
66
  --color-gray-950: oklch(0.145 0.005 264.542);
67
67
 
68
+ /* ── Emerald — H ≈ 148° ─────────────────────────────────────────────── */
69
+ --color-emerald-50: oklch(0.979 0.021 166.113);
70
+ --color-emerald-100: oklch(0.950 0.052 163.051);
71
+ --color-emerald-200: oklch(0.905 0.093 164.150);
72
+ --color-emerald-300: oklch(0.845 0.143 164.978);
73
+ --color-emerald-400: oklch(0.765 0.177 163.223);
74
+ --color-emerald-500: oklch(0.696 0.170 162.480);
75
+ --color-emerald-600: oklch(0.596 0.145 163.225);
76
+ --color-emerald-700: oklch(0.508 0.118 165.612);
77
+ --color-emerald-800: oklch(0.432 0.095 166.913);
78
+ --color-emerald-900: oklch(0.378 0.077 168.940);
79
+ --color-emerald-950: oklch(0.262 0.051 172.552);
80
+
68
81
  /* ── Green — H ≈ 150° ─────────────────────────────────────────────── */
69
82
  --color-green-50: oklch(0.982 0.018 155.826);
70
83
  --color-green-100: oklch(0.962 0.044 156.743);
@@ -130,6 +143,19 @@
130
143
  --color-pink-900: oklch(0.408 0.153 2.432);
131
144
  --color-pink-950: oklch(0.284 0.109 3.907);
132
145
 
146
+ /* ── Fuchsia — H ≈ 316° ─────────────────────────────────────────────── */
147
+ --color-fuchsia-50: oklch(0.977 0.017 320.058);
148
+ --color-fuchsia-100: oklch(0.952 0.037 318.852);
149
+ --color-fuchsia-200: oklch(0.903 0.076 319.062);
150
+ --color-fuchsia-300: oklch(0.833 0.145 321.434);
151
+ --color-fuchsia-400: oklch(0.740 0.238 322.160);
152
+ --color-fuchsia-500: oklch(0.667 0.295 322.150);
153
+ --color-fuchsia-600: oklch(0.591 0.293 322.896);
154
+ --color-fuchsia-700: oklch(0.518 0.253 323.949);
155
+ --color-fuchsia-800: oklch(0.452 0.211 324.591);
156
+ --color-fuchsia-900: oklch(0.401 0.170 325.612);
157
+ --color-fuchsia-950: oklch(0.293 0.136 325.661);
158
+
133
159
  /* ── Purple — H ≈ 304° ────────────────────────────────────────────── */
134
160
  --color-purple-50: oklch(0.977 0.014 308.299);
135
161
  --color-purple-100: oklch(0.946 0.033 307.174);
package/tokens/primitive/shadow.css CHANGED
@@ -4,16 +4,13 @@
4
4
  --shadow-none: none;
5
5
 
6
6
  /* Directional (top-left light source) */
7
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
8
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
9
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
7
+ --shadow-sm: 0 1px 2px 0 var(--color-shadow-light);
8
+ --shadow-md: 0 4px 6px -1px var(--color-shadow-normal), 0 2px 4px -2px var(--color-shadow-normal);
9
+ --shadow-lg: 0 10px 15px -3px var(--color-shadow-normal), 0 4px 6px -4px var(--color-shadow-normal);
10
10
 
11
11
  /* Centered (ambient glow) */
12
- --shadow-center-sm: 0 0 2px 2px rgb(0 0 0 / 0.05);
13
- --shadow-center-md: 0 0 5px 5px rgb(0 0 0 / 0.05);
14
- --shadow-center-lg: 0 0 10px 10px rgb(0 0 0 / 0.05);
15
-
16
- /* Surface */
17
- --shadow-surface: var(--shadow-sm);
12
+ --shadow-center-sm: 0 0 2px 2px var(--color-shadow-light);
13
+ --shadow-center-md: 0 0 5px 5px var(--color-shadow-light);
14
+ --shadow-center-lg: 0 0 10px 10px var(--color-shadow-light);
18
15
  }
19
16
  }
package/tokens/semantic/color.css CHANGED
@@ -13,6 +13,8 @@
13
13
  */
14
14
  @layer config {
15
15
  :root {
16
+ color-scheme: light;
17
+
16
18
  /* ── Accent ─────────────────────────────────────────────────────────── */
17
19
  --color-accent: var(--color-sienna-600);
18
20
  --color-accent-muted: var(--color-sienna-100);
@@ -33,11 +35,20 @@
33
35
  --color-bg-accent: var(--color-accent);
34
36
  --color-bg-media: var(--color-gray-200);
35
37
  --color-bg-muted: var(--color-gray-100);
38
+ --color-bg-muted-hover: var(--color-gray-200);
36
39
  --color-bg-surface: var(--color-bg);
37
40
 
38
41
  /* ── Borders & focus ───────────────────────────────────────────────── */
39
42
  --color-border: var(--color-gray-200);
40
- --color-focus: var(--color-accent);
43
+ --color-border-hover: var(--color-gray-500);
44
+ --color-focus: var(--color-text);
45
+
46
+ /* ── Shadows ───────────────────────────────────────────────────────── */
47
+ /* --color-shadow holds raw RGB channels so rgb(var(--color-shadow) / α) works. */
48
+ /* In dark mode, flip to 255 255 255 → all shadows become a white glow. */
49
+ --color-shadow: var(--color-black-rgb);
50
+ --color-shadow-light: rgb(var(--color-shadow) / var(--opacity-shadow)); /* sm, center-* */
51
+ --color-shadow-normal: rgb(var(--color-shadow) / var(--opacity-shadow)); /* md, lg */
41
52
 
42
53
  /* ── Text ──────────────────────────────────────────────────────────── */
43
54
  --color-active: var(--color-accent);
@@ -71,7 +82,7 @@
71
82
  --color-primary-strong: var(--color-brand-strong);
72
83
 
73
84
  /* Secondary */
74
- --color-secondary: var(--color-gray-500);
85
+ --color-secondary: var(--color-gray-600);
75
86
  --color-secondary-muted: var(--color-gray-100);
76
87
  --color-secondary-strong: var(--color-gray-800);
77
88
 
package/tokens/semantic/dark.css ADDED
@@ -0,0 +1,48 @@
1
+ /* semantic/dark.css */
2
+ /*
3
+ * Dark mode token overrides — activated by OS preference.
4
+ * Projects without dark mode: add `color-scheme: only light` in @layer config.
5
+ * Manual toggle ([data-theme]): handled at project level.
6
+ *
7
+ * Tokens that adapt automatically (reference semantic tokens that change here):
8
+ * --color-bg-surface → var(--color-bg)
9
+ * --color-link → var(--color-text)
10
+ * --form-color-border → var(--color-border)
11
+ * --form-color-text → var(--color-text)
12
+ * --input-color-bg → var(--form-color-bg)
13
+ *
14
+ * Not changed: brand, status (danger/success/info/warning), secondary, dark,
15
+ * light — functional colors that stay consistent in dark mode.
16
+ * Override at project level if needed.
17
+ */
18
+ @layer config {
19
+ @media (prefers-color-scheme: dark) {
20
+ :root:not([data-color-scheme="light"]) {
21
+ color-scheme: dark;
22
+
23
+ /* ── Backgrounds ─────────────────────────────────────────────────── */
24
+ --color-bg: var(--color-gray-950);
25
+ --color-bg-muted: var(--color-gray-900);
26
+ --color-bg-muted-hover: var(--color-gray-800);
27
+ --color-bg-media: var(--color-gray-800);
28
+
29
+ /* ── Borders ─────────────────────────────────────────────────────── */
30
+ --color-border: var(--color-gray-800);
31
+
32
+ /* ── Text ────────────────────────────────────────────────────────── */
33
+ --color-heading: var(--color-white);
34
+ --color-text: var(--color-gray-200);
35
+ --color-text-muted: var(--color-gray-400);
36
+ --color-text-disabled: var(--color-gray-600);
37
+ --color-text-hover: var(--color-gray-300);
38
+
39
+ /* ── Forms ───────────────────────────────────────────────────────── */
40
+ /* --form-color-bg references --color-white directly — must be explicit */
41
+ --form-color-bg: var(--color-gray-900);
42
+
43
+ /* ── Shadows ─────────────────────────────────────────────────────── */
44
+ /* Flip to white → all shadows become a subtle white glow */
45
+ --color-shadow: var(--color-white-rgb);
46
+ }
47
+ }
48
+ }
package/tokens/semantic/focus.css CHANGED
@@ -1,9 +1,10 @@
1
1
  /* semantic/focus.css */
2
2
  @layer config {
3
3
  :root {
4
+ --focus: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color);
4
5
  --focus-color: var(--color-focus);
5
6
  --focus-outline-style: solid;
6
- --focus-outline-width: 2px;
7
+ --focus-outline-width: 1px;
7
8
  --focus-outline-offset: 2px;
8
9
  }
9
10
  }
package/tokens/semantic/form.css CHANGED
@@ -7,9 +7,11 @@
7
7
  --form-color-accent: var(--color-black);
8
8
  --form-color-bg: var(--color-white);
9
9
  --form-color-border: var(--color-border);
10
- --form-color-border-hover: var(--form-color-accent);
10
+ --form-color-border-hover: var(--color-border-hover);
11
11
  --form-color-text: var(--color-text);
12
12
  --form-padding: var(--spacing-control);
13
+ --form-shadow: var(--shadow-control);
14
+ --form-shadow-hover: var(--shadow-control-hover);
13
15
  --form-transition: var(--transition-normal);
14
16
 
15
17
  /* ── Input ─────────────────────────────────────────────────────────── */
@@ -95,11 +97,11 @@
95
97
  --radio-scale-checked: 0.5;
96
98
 
97
99
  /* ── Range ─────────────────────────────────────────────────────────── */
98
- --range-color-accent: var(--form-color-accent);
99
- --range-color-track: var(--form-color-border);
100
+ --range-thumb-color: var(--form-color-accent);
100
101
  --range-thumb-color-border: var(--color-white);
101
102
  --range-thumb-border-width: var(--size-4);
102
103
  --range-thumb-size: var(--size-24);
104
+ --range-track-color: var(--form-color-border);
103
105
  --range-track-height: calc(var(--border-width-normal) + 2px);
104
106
  }
105
107
  }
package/tokens/semantic/grid.css CHANGED
@@ -5,20 +5,6 @@
5
5
  --columns: 12;
6
6
  --gap: var(--spacing-md);
7
7
 
8
- /* ── Flex fractions ─────────────────────────────────────────────────── */
9
- --flex-full: 100%;
10
- --flex-eleven-twelfths: 91.6666666667%;
11
- --flex-five-sixths: 83.3333333333%;
12
- --flex-four-fifths: 80%;
13
- --flex-three-quarters: 75%;
14
- --flex-two-thirds: 66.6666666667%;
15
- --flex-half: 50%;
16
- --flex-third: 33.3333333333%;
17
- --flex-quarter: 25%;
18
- --flex-fifth: 20%;
19
- --flex-sixth: 16.6666666667%;
20
- --flex-twelfth: 8.3333333333%;
21
-
22
8
  /* ── Grid column spans ──────────────────────────────────────────────── */
23
9
  /* Integer spans — grid-agnostic. Comments show col-12 / col-24 fractions. */
24
10
  --span-full: span var(--columns);
package/tokens/semantic/icon.css CHANGED
@@ -1,15 +1,19 @@
1
1
  /* semantic/icon.css */
2
2
  @layer config {
3
3
  :root {
4
- --icon-size: var(--size-16);
4
+ --icon-size: var(--size-16);
5
5
 
6
- --icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="8" x2="12" y2="8"/><polyline points="8 4 12 8 8 12"/></svg>');
6
+ /* Icons */
7
+ --icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="8" x2="12" y2="8"/><polyline points="8 4 12 8 8 12"/></svg>');
7
8
  --icon-arrow-skip: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="8" x2="10" y2="8"/><polyline points="6 4 10 8 6 12"/><line x1="14" y1="3" x2="14" y2="13"/></svg>');
8
9
  --icon-chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 5 8 11 14 5"/></svg>');
9
- --icon-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="2" y1="4" x2="14" y2="4"/><line x1="2" y1="8" x2="14" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></svg>');
10
- --icon-close: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>');
11
- --icon-dash: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>');
12
- --icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="8" y1="3" x2="8" y2="13"/><line x1="3" y1="8" x2="13" y2="8"/></svg>');
13
- --icon-tick: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
10
+ --icon-close: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>');
11
+ --icon-dash: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>');
12
+ --icon-filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M1.3 3.3h13.4"/><path d="M4 8h8"/><path d="M6 12.7h4"/></svg>');
13
+ --icon-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="2" y1="4" x2="14" y2="4"/><line x1="2" y1="8" x2="14" y2="8"/><line x1="2" y1="12" x2="14" y2="12"/></svg>');
14
+ --icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round"><line x1="8" y1="3" x2="8" y2="13"/><line x1="3" y1="8" x2="13" y2="8"/></svg>');
15
+ --icon-share: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M8 1.3v8.7"/><path d="m10.7 4-2.7-2.7-2.7 2.7"/><path d="M2.7 8v5.3a1.3 1.3 0 0 0 1.3 1.3h8a1.3 1.3 0 0 0 1.3-1.3v-5.3"/></svg>');
16
+ --icon-tick: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
17
+ --icon-toc: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M10.7 3.3H2"/><path d="M10.7 8H2"/><path d="M10.7 12.7H2"/><path d="M14 3.3h.01"/><path d="M14 8h.01"/><path d="M14 12.7h.01"/></svg>');
14
18
  }
15
19
  }
package/tokens/semantic/mediaqueries.css ADDED
@@ -0,0 +1,17 @@
1
+ /* semantic/mediaqueries.css */
2
+ /* https://www.npmjs.com/package/postcss-custom-media */
3
+ @layer config {
4
+ /* ── UP ──────────────────────────────────────────────── */
5
+
6
+ /* 768px */
7
+ @custom-media --tablet (width >= 48rem);
8
+
9
+ /* 1024px */
10
+ @custom-media --tablet-wide (width >= 64rem);
11
+
12
+ /* 1440px */
13
+ @custom-media --laptop (width >= 90rem);
14
+
15
+ /* 1600px */
16
+ @custom-media --desktop (width >= 100rem);
17
+ }
package/tokens/semantic/motion.css CHANGED
@@ -40,7 +40,7 @@
40
40
  --transition-opacity: opacity var(--duration-normal) var(--easing-default);
41
41
  --transition-transform: transform var(--duration-normal) var(--easing-default);
42
42
  /* Targeted color transitions */
43
- --transition-property-color: color, background-color, border-color, outline-color, fill, stroke;
43
+ --transition-property-color: color, background-color, border-color, outline-color, fill, stroke, text-decoration;
44
44
  --transition-color: var(--transition-property-color) var(--duration-normal) var(--easing-default);
45
45
  }
46
46
  }
package/tokens/semantic/opacity.css CHANGED
@@ -2,8 +2,9 @@
2
2
  @layer config {
3
3
  :root {
4
4
  --opacity-backdrop: var(--opacity-50);
5
- --opacity-disabled: var(--opacity-25);
5
+ --opacity-disabled: var(--opacity-50);
6
6
  --opacity-overlay: var(--opacity-75);
7
- --opacity-subtle: var(--opacity-10);
7
+ --opacity-shadow: var(--opacity-10);
8
+ --opacity-subtle: var(--opacity-25);
8
9
  }
9
10
  }
package/tokens/semantic/shadow.css ADDED
@@ -0,0 +1,14 @@
1
+ /* semantic/shadow.css */
2
+ /*
3
+ * Semantic shadow aliases — map primitive shadows to purposeful roles.
4
+ * Override in @layer config to restyle elevation system-wide.
5
+ * In dark mode (semantic/dark.css), --shadow-sm/md/lg are overridden with
6
+ * higher opacity — these aliases adapt automatically.
7
+ */
8
+ @layer config {
9
+ :root {
10
+ --shadow-control: none;
11
+ --shadow-control-hover: none;
12
+ --shadow-surface: var(--shadow-sm);
13
+ }
14
+ }
package/tokens/semantic/spacing.css CHANGED
@@ -32,10 +32,11 @@
32
32
  --spacing-fluid-2xl: clamp(3.75rem, 2.5rem + 5.5556vw, 7.5rem); /* 60 → 120px */
33
33
 
34
34
  /* ── Purposeful aliases ─────────────────────────────────────────────── */
35
+ --spacing-card: var(--spacing-sm); /* padding inside surfaces (card) */
35
36
  --spacing-control: var(--spacing-xs); /* padding inside interactive controls */
36
37
  --spacing-heading: var(--spacing-fluid-sm); /* gap below headings */
37
38
  --spacing-section: var(--spacing-fluid-2xl); /* vertical rhythm between sections */
38
- --spacing-surface: var(--spacing-fluid-sm); /* padding inside surfaces (card, panel) */
39
+ --spacing-surface: var(--spacing-fluid-sm); /* padding inside surfaces (panel) */
39
40
  --spacing-typography: var(--spacing-fluid-xs); /* gap between typographic elements */
40
41
  }
41
42
  }
package/tokens/semantic.css CHANGED
@@ -8,11 +8,15 @@
8
8
  @import 'semantic/form.css';
9
9
  @import 'semantic/grid.css';
10
10
  @import 'semantic/icon.css';
11
+ @import 'semantic/mediaqueries.css';
11
12
  @import 'semantic/motion.css';
12
13
  @import 'semantic/opacity.css';
13
14
  @import 'semantic/radius.css';
14
15
  @import 'semantic/ratio.css';
16
+ @import 'semantic/shadow.css';
15
17
  @import 'semantic/size.css';
16
18
  @import 'semantic/spacing.css';
17
19
  @import 'semantic/typography.css';
18
20
  @import 'semantic/z-index.css';
21
+
22
+ @import 'semantic/dark.css';