@uncinq/design-tokens 1.3.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 (3) hide show
  1. package/dist/css/semantic/color.css +13 -14
  2. package/package.json +1 -1
  3. package/tokens/semantic/color.json +24 -28
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/design-tokens",
3
- "version": "1.3.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
  },