@uncinq/design-tokens 1.2.0 → 1.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 (7) hide show
  1. package/dist/css/semantic/color.css +13 -14
  2. package/dist/css/semantic/spacing.css +7 -7
  3. package/dist/css/semantic/typography.css +8 -8
  4. package/package.json +1 -1
  5. package/tokens/semantic/color.json +24 -28
  6. package/tokens/semantic/spacing.json +7 -7
  7. package/tokens/semantic/typography.json +8 -8
package/dist/css/semantic/color.css CHANGED
@@ -5,10 +5,10 @@
5
5
  /* semantic/color.css */
6
6
  @layer tokens {
7
7
  :root {
8
- --color-accent: var(--color-sienna-600);
9
- --color-accent-hover: var(--color-sienna-700);
10
- --color-accent-muted: var(--color-sienna-100);
11
- --color-accent-strong: var(--color-sienna-900);
8
+ --color-accent: var(--color-brand);
9
+ --color-accent-hover: var(--color-brand-hover);
10
+ --color-accent-muted: var(--color-brand-muted);
11
+ --color-accent-strong: var(--color-brand-strong);
12
12
  --color-active: var(--color-accent);
13
13
  --color-backdrop: oklch(from var(--color-black) l c h / var(--opacity-backdrop));
14
14
  --color-background: var(--color-white);
@@ -37,6 +37,9 @@
37
37
  --color-dark-strong: var(--color-black);
38
38
  --color-focus: var(--color-text);
39
39
  --color-heading: var(--color-black);
40
+ --color-highlight: var(--color-yellow-100);
41
+ --color-highlight-hover: var(--color-yellow-200);
42
+ --color-highlight-strong: var(--color-yellow-900);
40
43
  --color-info: var(--color-blue-600);
41
44
  --color-info-hover: var(--color-blue-700);
42
45
  --color-info-muted: var(--color-blue-100);
@@ -48,14 +51,10 @@
48
51
  --color-link: var(--color-text);
49
52
  --color-link-active: var(--color-active);
50
53
  --color-link-hover: var(--color-accent);
51
- --color-primary: var(--color-brand);
52
- --color-primary-hover: var(--color-brand-hover);
53
- --color-primary-muted: var(--color-brand-muted);
54
- --color-primary-strong: var(--color-brand-strong);
55
- --color-secondary: var(--color-gray-600);
56
- --color-secondary-hover: var(--color-gray-700);
57
- --color-secondary-muted: var(--color-gray-100);
58
- --color-secondary-strong: var(--color-gray-800);
54
+ --color-neutral: var(--color-gray-600);
55
+ --color-neutral-hover: var(--color-gray-700);
56
+ --color-neutral-muted: var(--color-gray-100);
57
+ --color-neutral-strong: var(--color-gray-800);
59
58
  --color-shadow: var(--color-black);
60
59
  --color-shadow-light: oklch(from var(--color-shadow) l c h / var(--opacity-shadow));
61
60
  --color-shadow-medium: oklch(from var(--color-shadow) l c h / var(--opacity-backdrop));
@@ -72,11 +71,11 @@
72
71
  --color-text-on-brand: var(--color-white);
73
72
  --color-text-on-danger: var(--color-white);
74
73
  --color-text-on-dark: var(--color-white);
74
+ --color-text-on-highlight: var(--color-text);
75
75
  --color-text-on-info: var(--color-white);
76
76
  --color-text-on-light: var(--color-gray-900);
77
77
  --color-text-on-muted: var(--color-gray-900);
78
- --color-text-on-primary: var(--color-white);
79
- --color-text-on-secondary: var(--color-white);
78
+ --color-text-on-neutral: var(--color-white);
80
79
  --color-text-on-success: var(--color-white);
81
80
  --color-text-on-surface: var(--color-text);
82
81
  --color-text-on-warning: var(--color-gray-900);
package/dist/css/semantic/spacing.css CHANGED
@@ -13,13 +13,13 @@
13
13
  --spacing-xl: var(--size-60);
14
14
  --spacing-2xl: var(--size-100);
15
15
  --spacing-3xl: var(--size-150);
16
- --spacing-fluid-2xs: clamp(0.3125rem, 0.2232rem + 0.4464vw, 0.625rem);
17
- --spacing-fluid-xs: clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem);
18
- --spacing-fluid-sm: clamp(1.25rem, 0.8929rem + 1.7857vw, 2.5rem);
19
- --spacing-fluid-md: clamp(1.875rem, 1.3393rem + 2.6786vw, 3.75rem);
20
- --spacing-fluid-lg: clamp(2.5rem, 1.7857rem + 3.5714vw, 5rem);
21
- --spacing-fluid-xl: clamp(3.125rem, 2.2321rem + 4.4643vw, 6.25rem);
22
- --spacing-fluid-2xl: clamp(3.75rem, 2.6786rem + 5.3571vw, 7.5rem);
16
+ --spacing-fluid-2xs: clamp(0.3125rem, 0.2025rem + 0.4695vw, 0.625rem);
17
+ --spacing-fluid-xs: clamp(0.625rem, 0.4049rem + 0.9390vw, 1.25rem);
18
+ --spacing-fluid-sm: clamp(1.25rem, 0.8099rem + 1.8779vw, 2.5rem);
19
+ --spacing-fluid-md: clamp(1.875rem, 1.2148rem + 2.8169vw, 3.75rem);
20
+ --spacing-fluid-lg: clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);
21
+ --spacing-fluid-xl: clamp(3.125rem, 2.0246rem + 4.6948vw, 6.25rem);
22
+ --spacing-fluid-2xl: clamp(3.75rem, 2.4296rem + 5.6338vw, 7.5rem);
23
23
  --spacing-card: var(--spacing-sm);
24
24
  --spacing-control: var(--spacing-xs);
25
25
  --spacing-heading: var(--spacing-fluid-sm);
package/dist/css/semantic/typography.css CHANGED
@@ -21,14 +21,14 @@
21
21
  --font-size-xl: var(--size-48);
22
22
  --font-size-2xl: var(--size-64);
23
23
  --font-size-display: var(--size-96);
24
- --font-size-fluid-2xs: clamp(0.625rem, 0.5893rem + 0.1786vw, 0.75rem);
25
- --font-size-fluid-xs: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem);
26
- --font-size-fluid-sm: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
27
- --font-size-fluid-md: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
28
- --font-size-fluid-lg: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
29
- --font-size-fluid-xl: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem);
30
- --font-size-fluid-2xl: clamp(3rem, 2.7143rem + 1.4286vw, 4rem);
31
- --font-size-fluid-display: clamp(4rem, 3.4286rem + 2.8571vw, 6rem);
24
+ --font-size-fluid-2xs: clamp(0.625rem, 0.5810rem + 0.1878vw, 0.75rem);
25
+ --font-size-fluid-xs: clamp(0.75rem, 0.7060rem + 0.1878vw, 0.875rem);
26
+ --font-size-fluid-sm: clamp(0.875rem, 0.8310rem + 0.1878vw, 1rem);
27
+ --font-size-fluid-md: clamp(1rem, 0.9560rem + 0.1878vw, 1.125rem);
28
+ --font-size-fluid-lg: clamp(1.125rem, 0.9930rem + 0.5634vw, 1.5rem);
29
+ --font-size-fluid-xl: clamp(1.5rem, 0.9718rem + 2.2535vw, 3rem);
30
+ --font-size-fluid-2xl: clamp(3rem, 2.6479rem + 1.5023vw, 4rem);
31
+ --font-size-fluid-display: clamp(4rem, 3.2958rem + 3.0047vw, 6rem);
32
32
  --font-size-heading-01: var(--font-size-fluid-xl);
33
33
  --font-size-heading-02: var(--font-size-fluid-lg);
34
34
  --font-size-heading-03: var(--font-size-fluid-md);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/design-tokens",
3
- "version": "1.2.0",
3
+ "version": "1.4.0",
4
4
  "description": "Framework-agnostic design tokens — JSON DTCG primitive and semantic — CSS custom properties.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/semantic/color.json CHANGED
@@ -2,19 +2,19 @@
2
2
  "color": {
3
3
  "accent": {
4
4
  "default": {
5
- "$value": "{color.sienna.600}",
5
+ "$value": "{color.brand.default}",
6
6
  "$type": "color"
7
7
  },
8
8
  "hover": {
9
- "$value": "{color.sienna.700}",
9
+ "$value": "{color.brand.hover}",
10
10
  "$type": "color"
11
11
  },
12
12
  "muted": {
13
- "$value": "{color.sienna.100}",
13
+ "$value": "{color.brand.muted}",
14
14
  "$type": "color"
15
15
  },
16
16
  "strong": {
17
- "$value": "{color.sienna.900}",
17
+ "$value": "{color.brand.strong}",
18
18
  "$type": "color"
19
19
  }
20
20
  },
@@ -144,6 +144,20 @@
144
144
  "$value": "{color.black}",
145
145
  "$type": "color"
146
146
  },
147
+ "highlight": {
148
+ "default": {
149
+ "$value": "{color.yellow.100}",
150
+ "$type": "color"
151
+ },
152
+ "hover": {
153
+ "$value": "{color.yellow.200}",
154
+ "$type": "color"
155
+ },
156
+ "strong": {
157
+ "$value": "{color.yellow.900}",
158
+ "$type": "color"
159
+ }
160
+ },
147
161
  "info": {
148
162
  "default": {
149
163
  "$value": "{color.blue.600}",
@@ -194,25 +208,7 @@
194
208
  "$type": "color"
195
209
  }
196
210
  },
197
- "primary": {
198
- "default": {
199
- "$value": "{color.brand.default}",
200
- "$type": "color"
201
- },
202
- "hover": {
203
- "$value": "{color.brand.hover}",
204
- "$type": "color"
205
- },
206
- "muted": {
207
- "$value": "{color.brand.muted}",
208
- "$type": "color"
209
- },
210
- "strong": {
211
- "$value": "{color.brand.strong}",
212
- "$type": "color"
213
- }
214
- },
215
- "secondary": {
211
+ "neutral": {
216
212
  "default": {
217
213
  "$value": "{color.gray.600}",
218
214
  "$type": "color"
@@ -299,6 +295,10 @@
299
295
  "$value": "{color.white}",
300
296
  "$type": "color"
301
297
  },
298
+ "onHighlight": {
299
+ "$value": "{color.text.default}",
300
+ "$type": "color"
301
+ },
302
302
  "onInfo": {
303
303
  "$value": "{color.white}",
304
304
  "$type": "color"
@@ -311,11 +311,7 @@
311
311
  "$value": "{color.gray.900}",
312
312
  "$type": "color"
313
313
  },
314
- "onPrimary": {
315
- "$value": "{color.white}",
316
- "$type": "color"
317
- },
318
- "onSecondary": {
314
+ "onNeutral": {
319
315
  "$value": "{color.white}",
320
316
  "$type": "color"
321
317
  },
package/tokens/semantic/spacing.json CHANGED
@@ -34,31 +34,31 @@
34
34
  },
35
35
  "fluid": {
36
36
  "2xs": {
37
- "$value": "clamp(0.3125rem, 0.2232rem + 0.4464vw, 0.625rem)",
37
+ "$value": "clamp(0.3125rem, 0.2025rem + 0.4695vw, 0.625rem)",
38
38
  "$type": "dimension"
39
39
  },
40
40
  "xs": {
41
- "$value": "clamp(0.625rem, 0.4464rem + 0.8929vw, 1.25rem)",
41
+ "$value": "clamp(0.625rem, 0.4049rem + 0.9390vw, 1.25rem)",
42
42
  "$type": "dimension"
43
43
  },
44
44
  "sm": {
45
- "$value": "clamp(1.25rem, 0.8929rem + 1.7857vw, 2.5rem)",
45
+ "$value": "clamp(1.25rem, 0.8099rem + 1.8779vw, 2.5rem)",
46
46
  "$type": "dimension"
47
47
  },
48
48
  "md": {
49
- "$value": "clamp(1.875rem, 1.3393rem + 2.6786vw, 3.75rem)",
49
+ "$value": "clamp(1.875rem, 1.2148rem + 2.8169vw, 3.75rem)",
50
50
  "$type": "dimension"
51
51
  },
52
52
  "lg": {
53
- "$value": "clamp(2.5rem, 1.7857rem + 3.5714vw, 5rem)",
53
+ "$value": "clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem)",
54
54
  "$type": "dimension"
55
55
  },
56
56
  "xl": {
57
- "$value": "clamp(3.125rem, 2.2321rem + 4.4643vw, 6.25rem)",
57
+ "$value": "clamp(3.125rem, 2.0246rem + 4.6948vw, 6.25rem)",
58
58
  "$type": "dimension"
59
59
  },
60
60
  "2xl": {
61
- "$value": "clamp(3.75rem, 2.6786rem + 5.3571vw, 7.5rem)",
61
+ "$value": "clamp(3.75rem, 2.4296rem + 5.6338vw, 7.5rem)",
62
62
  "$type": "dimension"
63
63
  }
64
64
  },
package/tokens/semantic/typography.json CHANGED
@@ -49,35 +49,35 @@
49
49
  "fluid": {
50
50
  "2xs": {
51
51
  "$type": "dimension",
52
- "$value": "clamp(0.625rem, 0.5893rem + 0.1786vw, 0.75rem)"
52
+ "$value": "clamp(0.625rem, 0.5810rem + 0.1878vw, 0.75rem)"
53
53
  },
54
54
  "xs": {
55
55
  "$type": "dimension",
56
- "$value": "clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem)"
56
+ "$value": "clamp(0.75rem, 0.7060rem + 0.1878vw, 0.875rem)"
57
57
  },
58
58
  "sm": {
59
59
  "$type": "dimension",
60
- "$value": "clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem)"
60
+ "$value": "clamp(0.875rem, 0.8310rem + 0.1878vw, 1rem)"
61
61
  },
62
62
  "md": {
63
63
  "$type": "dimension",
64
- "$value": "clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem)"
64
+ "$value": "clamp(1rem, 0.9560rem + 0.1878vw, 1.125rem)"
65
65
  },
66
66
  "lg": {
67
67
  "$type": "dimension",
68
- "$value": "clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem)"
68
+ "$value": "clamp(1.125rem, 0.9930rem + 0.5634vw, 1.5rem)"
69
69
  },
70
70
  "xl": {
71
71
  "$type": "dimension",
72
- "$value": "clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem)"
72
+ "$value": "clamp(1.5rem, 0.9718rem + 2.2535vw, 3rem)"
73
73
  },
74
74
  "2xl": {
75
75
  "$type": "dimension",
76
- "$value": "clamp(3rem, 2.7143rem + 1.4286vw, 4rem)"
76
+ "$value": "clamp(3rem, 2.6479rem + 1.5023vw, 4rem)"
77
77
  },
78
78
  "display": {
79
79
  "$type": "dimension",
80
- "$value": "clamp(4rem, 3.4286rem + 2.8571vw, 6rem)"
80
+ "$value": "clamp(4rem, 3.2958rem + 3.0047vw, 6rem)"
81
81
  }
82
82
  },
83
83
  "heading": {