@solid-design-system/tokens 1.2.0 → 1.2.2
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.tailwind.json +57 -0
- 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.
|
|
@@ -158,6 +158,46 @@
|
|
|
158
158
|
"inherit": "inherit",
|
|
159
159
|
"current": "currentColor"
|
|
160
160
|
},
|
|
161
|
+
"color": {
|
|
162
|
+
"primary": {
|
|
163
|
+
"100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>)",
|
|
164
|
+
"200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>)",
|
|
165
|
+
"300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>)",
|
|
166
|
+
"400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>)",
|
|
167
|
+
"500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>)",
|
|
168
|
+
"600": "rgb(var(--sd-color-primary-600, 0 53 142) / <alpha-value>)",
|
|
169
|
+
"700": "rgb(var(--sd-color-primary-700, 19 44 100) / <alpha-value>)",
|
|
170
|
+
"800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>)",
|
|
171
|
+
"DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* blue-default */"
|
|
172
|
+
},
|
|
173
|
+
"accent": {
|
|
174
|
+
"100": "rgb(var(--sd-color-accent-100, 182 223 170) / <alpha-value>)",
|
|
175
|
+
"200": "rgb(var(--sd-color-accent-200, 142 208 130) / <alpha-value>)",
|
|
176
|
+
"300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>)",
|
|
177
|
+
"400": "rgb(var(--sd-color-accent-400, 45 157 0) / <alpha-value>)",
|
|
178
|
+
"500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>)",
|
|
179
|
+
"550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>)",
|
|
180
|
+
"600": "rgb(var(--sd-color-accent-600, 49 111 36) / <alpha-value>)",
|
|
181
|
+
"700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>)",
|
|
182
|
+
"800": "rgb(var(--sd-color-accent-800, 25 65 27) / <alpha-value>)",
|
|
183
|
+
"DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* green-default */"
|
|
184
|
+
},
|
|
185
|
+
"neutral": {
|
|
186
|
+
"100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>)",
|
|
187
|
+
"200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>)",
|
|
188
|
+
"300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
|
|
189
|
+
"400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* grey-400 */",
|
|
190
|
+
"500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>)",
|
|
191
|
+
"600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* grey-600 */",
|
|
192
|
+
"700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>)",
|
|
193
|
+
"800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>)"
|
|
194
|
+
},
|
|
195
|
+
"white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>)",
|
|
196
|
+
"black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>)",
|
|
197
|
+
"transparent": "transparent",
|
|
198
|
+
"inherit": "inherit",
|
|
199
|
+
"current": "currentColor"
|
|
200
|
+
},
|
|
161
201
|
"fill": {
|
|
162
202
|
"primary": {
|
|
163
203
|
"100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
|
|
@@ -505,5 +545,22 @@
|
|
|
505
545
|
"transparent": "transparent",
|
|
506
546
|
"inherit": "inherit",
|
|
507
547
|
"current": "currentColor"
|
|
548
|
+
},
|
|
549
|
+
"boxShadow": {
|
|
550
|
+
"DEFAULT": "var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%))",
|
|
551
|
+
"md": "var(--sd-shadow-md, 0px 3px 1px 0px rgb(81 81 81 / 30%))"
|
|
552
|
+
},
|
|
553
|
+
"zIndex": {
|
|
554
|
+
"10": "10",
|
|
555
|
+
"20": "20",
|
|
556
|
+
"30": "30",
|
|
557
|
+
"40": "40",
|
|
558
|
+
"50": "50",
|
|
559
|
+
"auto": "auto",
|
|
560
|
+
"drawer": "var(--sd-z-index-drawer, 700)",
|
|
561
|
+
"dialog": "var(--sd-z-index-dialog, 800)",
|
|
562
|
+
"dropdown": "var(--sd-z-index-dropdown, 900)",
|
|
563
|
+
"alert-group": "var(--sd-z-index-alert-group, 950)",
|
|
564
|
+
"tooltip": "var(--sd-z-index-tooltip, 1000)"
|
|
508
565
|
}
|
|
509
566
|
}
|