@solid-design-system/tokens 1.2.1 → 1.3.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.
- package/README.md +5 -0
- package/dist/tokens.scss +1 -2
- package/dist/tokens.tailwind.json +56 -8
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
# Tokens
|
|
2
|
+
|
|
3
|
+
The Solid Design System Tokens package provides a collection of design tokens for colors, typography and spacing. It ensures design consistency and collaboration between our designers and developers when building components for the Solid Design System.
|
|
4
|
+
|
|
5
|
+
Check out the [full documentation](https://solid-design-system.fe.union-investment.de/x.x.x/storybook/) for detailed information.
|
package/dist/tokens.scss
CHANGED
|
@@ -40,7 +40,6 @@ $sd-borderColor-accent-550: (rgb(var(--sd-color-accent-550, 54 123 40)) /* Used
|
|
|
40
40
|
$sd-borderColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 45 157 0)) /* Used for brand-shape
|
|
41
41
|
*/);
|
|
42
42
|
$sd-borderColor-neutral-200: (rgb(var(--sd-color-neutral-200, 233 233 233)) /* Used for spinner */);
|
|
43
|
-
$sd-borderColor-neutral-300: (rgb(var(--sd-color-neutral-300, 218 218 218)));
|
|
44
43
|
$sd-borderColor-neutral-400: (rgb(var(--sd-color-neutral-400, 195 195 195)) /* Default border color.
|
|
45
44
|
Used for divider, teaser, container, ... */);
|
|
46
45
|
$sd-borderColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
|
|
@@ -98,7 +97,7 @@ $sd-spacing-8: (var(--sd-spacing-8, 2rem) /* 32px */);
|
|
|
98
97
|
$sd-spacing-10: (var(--sd-spacing-10, 2.5rem) /* 40px */);
|
|
99
98
|
$sd-spacing-12: (var(--sd-spacing-12, 3rem) /* 48px */);
|
|
100
99
|
$sd-spacing-16: (var(--sd-spacing-16, 4rem) /* 64px */);
|
|
101
|
-
$sd-spacing-
|
|
100
|
+
$sd-spacing-20: (var(--sd-spacing-20, 5rem) /* 80px */);
|
|
102
101
|
$sd-spacing-24: (var(--sd-spacing-24, 6rem) /* 96px */);
|
|
103
102
|
$sd-spacing-32: (var(--sd-spacing-32, 8rem) /* 128px */);
|
|
104
103
|
$sd-spacing-40: (var(--sd-spacing-40, 10rem) /* 160px */);
|
|
@@ -75,7 +75,6 @@
|
|
|
75
75
|
},
|
|
76
76
|
"neutral": {
|
|
77
77
|
"200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
|
|
78
|
-
"300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
|
|
79
78
|
"400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
|
|
80
79
|
"500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
|
|
81
80
|
"600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
|
|
@@ -158,6 +157,46 @@
|
|
|
158
157
|
"inherit": "inherit",
|
|
159
158
|
"current": "currentColor"
|
|
160
159
|
},
|
|
160
|
+
"color": {
|
|
161
|
+
"primary": {
|
|
162
|
+
"100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>)",
|
|
163
|
+
"200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>)",
|
|
164
|
+
"300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>)",
|
|
165
|
+
"400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>)",
|
|
166
|
+
"500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>)",
|
|
167
|
+
"600": "rgb(var(--sd-color-primary-600, 0 53 142) / <alpha-value>)",
|
|
168
|
+
"700": "rgb(var(--sd-color-primary-700, 19 44 100) / <alpha-value>)",
|
|
169
|
+
"800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>)",
|
|
170
|
+
"DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* blue-default */"
|
|
171
|
+
},
|
|
172
|
+
"accent": {
|
|
173
|
+
"100": "rgb(var(--sd-color-accent-100, 182 223 170) / <alpha-value>)",
|
|
174
|
+
"200": "rgb(var(--sd-color-accent-200, 142 208 130) / <alpha-value>)",
|
|
175
|
+
"300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>)",
|
|
176
|
+
"400": "rgb(var(--sd-color-accent-400, 45 157 0) / <alpha-value>)",
|
|
177
|
+
"500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>)",
|
|
178
|
+
"550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>)",
|
|
179
|
+
"600": "rgb(var(--sd-color-accent-600, 49 111 36) / <alpha-value>)",
|
|
180
|
+
"700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>)",
|
|
181
|
+
"800": "rgb(var(--sd-color-accent-800, 25 65 27) / <alpha-value>)",
|
|
182
|
+
"DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* green-default */"
|
|
183
|
+
},
|
|
184
|
+
"neutral": {
|
|
185
|
+
"100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>)",
|
|
186
|
+
"200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>)",
|
|
187
|
+
"300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
|
|
188
|
+
"400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* grey-400 */",
|
|
189
|
+
"500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>)",
|
|
190
|
+
"600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* grey-600 */",
|
|
191
|
+
"700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>)",
|
|
192
|
+
"800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>)"
|
|
193
|
+
},
|
|
194
|
+
"white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>)",
|
|
195
|
+
"black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>)",
|
|
196
|
+
"transparent": "transparent",
|
|
197
|
+
"inherit": "inherit",
|
|
198
|
+
"current": "currentColor"
|
|
199
|
+
},
|
|
161
200
|
"fill": {
|
|
162
201
|
"primary": {
|
|
163
202
|
"100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
|
|
@@ -173,8 +212,7 @@
|
|
|
173
212
|
"DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for active / selected elements */"
|
|
174
213
|
},
|
|
175
214
|
"neutral": {
|
|
176
|
-
"
|
|
177
|
-
"400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for */",
|
|
215
|
+
"400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* used for progress step (in inactive state) */",
|
|
178
216
|
"500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
|
|
179
217
|
"600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
|
|
180
218
|
"800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for switch */"
|
|
@@ -280,7 +318,6 @@
|
|
|
280
318
|
},
|
|
281
319
|
"neutral": {
|
|
282
320
|
"200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
|
|
283
|
-
"300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
|
|
284
321
|
"400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
|
|
285
322
|
"500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
|
|
286
323
|
"600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
|
|
@@ -334,7 +371,6 @@
|
|
|
334
371
|
},
|
|
335
372
|
"neutral": {
|
|
336
373
|
"200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
|
|
337
|
-
"300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
|
|
338
374
|
"400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
|
|
339
375
|
"500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
|
|
340
376
|
"600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
|
|
@@ -398,7 +434,7 @@
|
|
|
398
434
|
"10": "var(--sd-spacing-10, 2.5rem) /* 40px */",
|
|
399
435
|
"12": "var(--sd-spacing-12, 3rem) /* 48px */",
|
|
400
436
|
"16": "var(--sd-spacing-16, 4rem) /* 64px */",
|
|
401
|
-
"
|
|
437
|
+
"20": "var(--sd-spacing-20, 5rem) /* 80px */",
|
|
402
438
|
"24": "var(--sd-spacing-24, 6rem) /* 96px */",
|
|
403
439
|
"32": "var(--sd-spacing-32, 8rem) /* 128px */",
|
|
404
440
|
"40": "var(--sd-spacing-40, 10rem) /* 160px */",
|
|
@@ -419,7 +455,7 @@
|
|
|
419
455
|
"10": "var(--sd-spacing-10, 2.5rem) /* 40px */",
|
|
420
456
|
"12": "var(--sd-spacing-12, 3rem) /* 48px */",
|
|
421
457
|
"16": "var(--sd-spacing-16, 4rem) /* 64px */",
|
|
422
|
-
"
|
|
458
|
+
"20": "var(--sd-spacing-20, 5rem) /* 80px */",
|
|
423
459
|
"24": "var(--sd-spacing-24, 6rem) /* 96px */",
|
|
424
460
|
"32": "var(--sd-spacing-32, 8rem) /* 128px */",
|
|
425
461
|
"40": "var(--sd-spacing-40, 10rem) /* 160px */",
|
|
@@ -444,7 +480,6 @@
|
|
|
444
480
|
},
|
|
445
481
|
"neutral": {
|
|
446
482
|
"200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
|
|
447
|
-
"300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
|
|
448
483
|
"400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
|
|
449
484
|
"500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
|
|
450
485
|
"600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
|
|
@@ -509,5 +544,18 @@
|
|
|
509
544
|
"boxShadow": {
|
|
510
545
|
"DEFAULT": "var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%))",
|
|
511
546
|
"md": "var(--sd-shadow-md, 0px 3px 1px 0px rgb(81 81 81 / 30%))"
|
|
547
|
+
},
|
|
548
|
+
"zIndex": {
|
|
549
|
+
"10": "10",
|
|
550
|
+
"20": "20",
|
|
551
|
+
"30": "30",
|
|
552
|
+
"40": "40",
|
|
553
|
+
"50": "50",
|
|
554
|
+
"auto": "auto",
|
|
555
|
+
"drawer": "var(--sd-z-index-drawer, 700)",
|
|
556
|
+
"dialog": "var(--sd-z-index-dialog, 800)",
|
|
557
|
+
"dropdown": "var(--sd-z-index-dropdown, 900)",
|
|
558
|
+
"alert-group": "var(--sd-z-index-alert-group, 950)",
|
|
559
|
+
"tooltip": "var(--sd-z-index-tooltip, 1000)"
|
|
512
560
|
}
|
|
513
561
|
}
|