@solid-design-system/tokens 7.0.0-next.1 → 7.0.0-next.11

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 (18) hide show
  1. package/cdn/themes/bb/bb.css +1 -1
  2. package/cdn/themes/kid/kid.css +1 -1
  3. package/cdn/themes/sp/sp.css +1 -1
  4. package/cdn/themes/tailwind.css +4 -0
  5. package/cdn/themes/ui-dark/ui-dark.css +1 -1
  6. package/cdn/themes/ui-light/ui-light.css +1 -1
  7. package/cdn/themes/vb/vb.css +1 -1
  8. package/dist/theme.js +1 -1
  9. package/dist/themes/bb/bb.css +74 -71
  10. package/dist/themes/kid/kid.css +100 -97
  11. package/dist/themes/sp/sp.css +96 -93
  12. package/dist/themes/tailwind.css +4 -0
  13. package/dist/themes/ui-dark/ui-dark.css +69 -32
  14. package/dist/themes/ui-light/ui-light.css +69 -33
  15. package/dist/themes/vb/vb.css +109 -106
  16. package/dist/tokens.scss +38 -18
  17. package/dist/tokens.tailwind.json +36 -12
  18. package/package.json +8 -8
package/dist/tokens.scss CHANGED
@@ -121,16 +121,42 @@ $sd-carousel__pager-dot-background: var(--sd-carousel__pager-dot-background);
121
121
  $sd-carousel__pager-dot-border-width: var(--sd-carousel__pager-dot-border-width);
122
122
  $sd-checkbox--invalid-color-background: var(--sd-checkbox--invalid-color-background);
123
123
  $sd-checkbox-border-width: var(--sd-checkbox-border-width);
124
- $sd-chip--primary-200-color-background: var(--sd-chip--primary-200-color-background);
125
- $sd-chip--primary-200-color-border: var(--sd-chip--primary-200-color-border);
126
- $sd-chip--primary-300-color-background: var(--sd-chip--primary-300-color-background);
127
- $sd-chip--primary-300-color-border: var(--sd-chip--primary-300-color-border);
128
- $sd-chip--primary-500-color-background: var(--sd-chip--primary-500-color-background);
129
- $sd-chip--primary-500-color-border: var(--sd-chip--primary-500-color-border);
130
- $sd-chip--primary-500-color-text: var(--sd-chip--primary-500-color-text);
124
+ $sd-chip--neutral-high-color-background: var(--sd-chip--neutral-high-color-background);
125
+ $sd-chip--neutral-high-color-border: var(--sd-chip--neutral-high-color-border);
126
+ $sd-chip--neutral-high-color-filled-border: var(--sd-chip--neutral-high-color-filled-border);
127
+ $sd-chip--neutral-high-color-outline-fill: var(--sd-chip--neutral-high-color-outline-fill);
128
+ $sd-chip--neutral-low-color-background: var(--sd-chip--neutral-low-color-background);
129
+ $sd-chip--neutral-low-color-border: var(--sd-chip--neutral-low-color-border);
130
+ $sd-chip--neutral-low-color-filled-border: var(--sd-chip--neutral-low-color-filled-border);
131
+ $sd-chip--neutral-low-color-outline-fill: var(--sd-chip--neutral-low-color-outline-fill);
132
+ $sd-chip--neutral-medium-color-background: var(--sd-chip--neutral-medium-color-background);
133
+ $sd-chip--neutral-medium-color-border: var(--sd-chip--neutral-medium-color-border);
134
+ $sd-chip--neutral-medium-color-filled-border: var(--sd-chip--neutral-medium-color-filled-border);
135
+ $sd-chip--neutral-medium-color-outline-fill: var(--sd-chip--neutral-medium-color-outline-fill);
136
+ $sd-chip--neutral-strong-color-border: var(--sd-chip--neutral-strong-color-border);
137
+ $sd-chip--neutral-strong-color-outline-fill: var(--sd-chip--neutral-strong-color-outline-fill);
138
+ $sd-chip--neutral-subtle-color-background: var(--sd-chip--neutral-subtle-color-background);
139
+ $sd-chip--neutral-subtle-color-filled-border: var(--sd-chip--neutral-subtle-color-filled-border);
140
+ $sd-chip--primary-high-color-background: var(--sd-chip--primary-high-color-background);
141
+ $sd-chip--primary-high-color-border: var(--sd-chip--primary-high-color-border);
142
+ $sd-chip--primary-high-color-filled-border: var(--sd-chip--primary-high-color-filled-border);
143
+ $sd-chip--primary-high-color-outline-fill: var(--sd-chip--primary-high-color-outline-fill);
144
+ $sd-chip--primary-low-color-background: var(--sd-chip--primary-low-color-background);
145
+ $sd-chip--primary-low-color-border: var(--sd-chip--primary-low-color-border);
146
+ $sd-chip--primary-low-color-filled-border: var(--sd-chip--primary-low-color-filled-border);
147
+ $sd-chip--primary-low-color-outline-fill: var(--sd-chip--primary-low-color-outline-fill);
148
+ $sd-chip--primary-medium-color-background: var(--sd-chip--primary-medium-color-background);
149
+ $sd-chip--primary-medium-color-border: var(--sd-chip--primary-medium-color-border);
150
+ $sd-chip--primary-medium-color-filled-border: var(--sd-chip--primary-medium-color-filled-border);
151
+ $sd-chip--primary-medium-color-outline-fill: var(--sd-chip--primary-medium-color-outline-fill);
152
+ $sd-chip--primary-strong-color-border: var(--sd-chip--primary-strong-color-border);
153
+ $sd-chip--primary-strong-color-outline-fill: var(--sd-chip--primary-strong-color-outline-fill);
154
+ $sd-chip--primary-subtle-color-background: var(--sd-chip--primary-subtle-color-background);
155
+ $sd-chip--primary-subtle-color-filled-border: var(--sd-chip--primary-subtle-color-filled-border);
131
156
  $sd-chip--white-color-background: var(--sd-chip--white-color-background);
132
- $sd-chip--white-color-border: var(--sd-chip--white-color-border);
157
+ $sd-chip--white-color-filled-border: var(--sd-chip--white-color-filled-border);
133
158
  $sd-chip-border-radius: var(--sd-chip-border-radius);
159
+ $sd-chip-border-width: var(--sd-chip-border-width);
134
160
  $sd-choice-control-font-weight: var(--sd-choice-control-font-weight);
135
161
  $sd-color-accent-100: var(--sd-color-accent-100);
136
162
  $sd-color-accent-200: var(--sd-color-accent-200);
@@ -157,6 +183,8 @@ $sd-color-background-neutral-400: var(--sd-color-background-neutral-400);
157
183
  $sd-color-background-neutral-500: var(--sd-color-background-neutral-500);
158
184
  $sd-color-background-neutral-600: var(--sd-color-background-neutral-600);
159
185
  $sd-color-background-neutral-800: var(--sd-color-background-neutral-800);
186
+ $sd-color-background-neutral-blue: var(--sd-color-background-neutral-blue);
187
+ $sd-color-background-neutral-grey: var(--sd-color-background-neutral-grey);
160
188
  $sd-color-background-primary-100: var(--sd-color-background-primary-100);
161
189
  $sd-color-background-primary-200: var(--sd-color-background-primary-200);
162
190
  $sd-color-background-primary-300: var(--sd-color-background-primary-300);
@@ -165,6 +193,7 @@ $sd-color-background-primary-800: var(--sd-color-background-primary-800);
165
193
  $sd-color-background-primary: var(--sd-color-background-primary);
166
194
  $sd-color-background-success: var(--sd-color-background-success);
167
195
  $sd-color-background-warning: var(--sd-color-background-warning);
196
+ $sd-color-background-white-translucent: var(--sd-color-background-white-translucent);
168
197
  $sd-color-background-white: var(--sd-color-background-white);
169
198
  $sd-color-black: var(--sd-color-black);
170
199
  $sd-color-border-accent-550: var(--sd-color-border-accent-550);
@@ -175,6 +204,7 @@ $sd-color-border-neutral-400: var(--sd-color-border-neutral-400);
175
204
  $sd-color-border-neutral-500: var(--sd-color-border-neutral-500);
176
205
  $sd-color-border-neutral-600: var(--sd-color-border-neutral-600);
177
206
  $sd-color-border-neutral-800: var(--sd-color-border-neutral-800);
207
+ $sd-color-border-neutral-blue: var(--sd-color-border-neutral-blue);
178
208
  $sd-color-border-primary-100: var(--sd-color-border-primary-100);
179
209
  $sd-color-border-primary-200: var(--sd-color-border-primary-200);
180
210
  $sd-color-border-primary-400: var(--sd-color-border-primary-400);
@@ -277,15 +307,6 @@ $sd-duration-fast: var(--sd-duration-fast);
277
307
  $sd-duration-medium: var(--sd-duration-medium);
278
308
  $sd-duration-slow: var(--sd-duration-slow);
279
309
  $sd-duration-x-slow: var(--sd-duration-x-slow);
280
- $sd-flag--neutral-200-color-background: var(--sd-flag--neutral-200-color-background);
281
- $sd-flag--neutral-200-color-border: var(--sd-flag--neutral-200-color-border);
282
- $sd-flag--neutral-300-color-background: var(--sd-flag--neutral-300-color-background);
283
- $sd-flag--neutral-300-color-border: var(--sd-flag--neutral-300-color-border);
284
- $sd-flag--neutral-500-color-background: var(--sd-flag--neutral-500-color-background);
285
- $sd-flag--neutral-500-color-border: var(--sd-flag--neutral-500-color-border);
286
- $sd-flag--white-color-background: var(--sd-flag--white-color-background);
287
- $sd-flag--white-color-border: var(--sd-flag--white-color-border);
288
- $sd-flag-border-radius: var(--sd-flag-border-radius);
289
310
  $sd-font-primary: var(--sd-font-primary);
290
311
  $sd-font-weight-bold: var(--sd-font-weight-bold);
291
312
  $sd-font-weight-normal: var(--sd-font-weight-normal);
@@ -320,7 +341,6 @@ $sd-map-marker--main-color-background: var(--sd-map-marker--main-color-backgroun
320
341
  $sd-map-marker--pin--default-color-background: var(--sd-map-marker--pin--default-color-background);
321
342
  $sd-map-marker--pin--hover-color-background: var(--sd-map-marker--pin--hover-color-background);
322
343
  $sd-map-marker--pin-color-text: var(--sd-map-marker--pin-color-text);
323
- $sd-marker-border-width: var(--sd-marker-border-width);
324
344
  $sd-marker-font-size: var(--sd-marker-font-size);
325
345
  $sd-marker-font-weight: var(--sd-marker-font-weight);
326
346
  $sd-menu-item--disabled-color-icon-fill: var(--sd-menu-item--disabled-color-icon-fill);
package/dist/tokens.tailwind.json CHANGED
@@ -50,7 +50,9 @@
50
50
  "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
51
51
  "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
52
52
  "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
53
- "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
53
+ "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
54
+ "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
55
+ "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
54
56
  },
55
57
  "primary": {
56
58
  "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -62,7 +64,10 @@
62
64
  },
63
65
  "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
64
66
  "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
65
- "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
67
+ "white": {
68
+ "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
69
+ "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
70
+ },
66
71
  "risk": {
67
72
  "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
68
73
  "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -87,7 +92,8 @@
87
92
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
88
93
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
89
94
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
90
- "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
95
+ "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
96
+ "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
91
97
  },
92
98
  "primary": {
93
99
  "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",
@@ -151,7 +157,9 @@
151
157
  "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
152
158
  "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
153
159
  "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
154
- "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
160
+ "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
161
+ "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
162
+ "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
155
163
  },
156
164
  "primary": {
157
165
  "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -163,7 +171,10 @@
163
171
  },
164
172
  "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
165
173
  "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
166
- "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
174
+ "white": {
175
+ "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
176
+ "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
177
+ },
167
178
  "risk": {
168
179
  "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
169
180
  "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -349,7 +360,9 @@
349
360
  "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
350
361
  "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
351
362
  "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
352
- "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
363
+ "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
364
+ "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
365
+ "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
353
366
  },
354
367
  "primary": {
355
368
  "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -361,7 +374,10 @@
361
374
  },
362
375
  "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
363
376
  "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
364
- "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
377
+ "white": {
378
+ "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
379
+ "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
380
+ },
365
381
  "risk": {
366
382
  "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
367
383
  "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -407,7 +423,8 @@
407
423
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
408
424
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
409
425
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
410
- "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
426
+ "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
427
+ "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
411
428
  },
412
429
  "primary": {
413
430
  "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",
@@ -475,7 +492,8 @@
475
492
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
476
493
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
477
494
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
478
- "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
495
+ "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
496
+ "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
479
497
  },
480
498
  "primary": {
481
499
  "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",
@@ -519,7 +537,9 @@
519
537
  "400": "rgb(var(--sd-color-background-neutral-400) / <alpha-value>)",
520
538
  "500": "rgb(var(--sd-color-background-neutral-500) / <alpha-value>)",
521
539
  "600": "rgb(var(--sd-color-background-neutral-600) / <alpha-value>)",
522
- "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)"
540
+ "800": "rgb(var(--sd-color-background-neutral-800) / <alpha-value>)",
541
+ "blue": "rgb(var(--sd-color-background-neutral-blue) / <alpha-value>)",
542
+ "grey": "rgb(var(--sd-color-background-neutral-grey) / <alpha-value>)"
523
543
  },
524
544
  "primary": {
525
545
  "100": "rgb(var(--sd-color-background-primary-100) / <alpha-value>)",
@@ -531,7 +551,10 @@
531
551
  },
532
552
  "success": "rgb(var(--sd-color-background-success) / <alpha-value>)",
533
553
  "warning": "rgb(var(--sd-color-background-warning) / <alpha-value>)",
534
- "white": "rgb(var(--sd-color-background-white) / <alpha-value>)",
554
+ "white": {
555
+ "translucent": "rgb(var(--sd-color-background-white-translucent) / <alpha-value>)",
556
+ "DEFAULT": "rgb(var(--sd-color-background-white) / <alpha-value>)"
557
+ },
535
558
  "risk": {
536
559
  "high": "rgb(var(--sd-color-risk-high) / <alpha-value>)",
537
560
  "increased": "rgb(var(--sd-color-risk-increased) / <alpha-value>)",
@@ -630,7 +653,8 @@
630
653
  "400": "rgb(var(--sd-color-border-neutral-400) / <alpha-value>)",
631
654
  "500": "rgb(var(--sd-color-border-neutral-500) / <alpha-value>)",
632
655
  "600": "rgb(var(--sd-color-border-neutral-600) / <alpha-value>)",
633
- "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)"
656
+ "800": "rgb(var(--sd-color-border-neutral-800) / <alpha-value>)",
657
+ "blue": "rgb(var(--sd-color-border-neutral-blue) / <alpha-value>)"
634
658
  },
635
659
  "primary": {
636
660
  "100": "rgb(var(--sd-color-border-primary-100) / <alpha-value>)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solid-design-system/tokens",
3
- "version": "7.0.0-next.1",
3
+ "version": "7.0.0-next.11",
4
4
  "description": "Solid Design System: Tokens",
5
5
  "publishConfig": {
6
6
  "access": "public",
@@ -34,17 +34,17 @@
34
34
  "license": "MIT",
35
35
  "devDependencies": {
36
36
  "@figma-export/types": "^6.4.0",
37
- "@figma/rest-api-spec": "^0.38.0",
37
+ "@figma/rest-api-spec": "^0.41.0",
38
38
  "@tamtamchik/json-deep-sort": "^1.5.0",
39
39
  "@tokens-studio/sd-transforms": "^2.0.3",
40
40
  "dotenv": "^17.4.2",
41
- "ora": "^9.4.0",
41
+ "figma-export-assets": "^2.1.0",
42
+ "ora": "^9.4.1",
42
43
  "picocolors": "^1.1.1",
43
- "style-dictionary": "^5.4.0",
44
- "svgo": "^4.0.1",
45
- "tailwindcss": "^4.3.0",
46
- "tailwindcss-export-config": "^4.1.0",
47
- "figma-export-assets": "^2.1.0"
44
+ "style-dictionary": "^5.5.0",
45
+ "svgo": "^4.0.2",
46
+ "tailwindcss": "^4.3.2",
47
+ "tailwindcss-export-config": "^4.1.0"
48
48
  },
49
49
  "readme": "README.md",
50
50
  "scripts": {