@solid-design-system/tokens 5.6.0 → 6.0.0-next.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 (9) hide show
  1. package/dist/theme.js +1 -0
  2. package/dist/tokens.scss +135 -147
  3. package/package.json +16 -6
  4. package/themes/tailwind.css +297 -0
  5. package/themes/ui-dark/ui-dark.css +197 -0
  6. package/themes/ui-light/ui-light.css +139 -0
  7. package/themes/vb/icons.css +26 -0
  8. package/themes/vb/vb.css +196 -0
  9. package/dist/tokens.tailwind.json +0 -712
package/dist/tokens.tailwind.json DELETED
@@ -1,712 +0,0 @@
1
- {
2
- "accentColor": {
3
- "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>) /* Default text color */",
4
- "primary": {
5
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction button label */",
6
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted hover interaction text link and inverted pressed interaction button label */",
7
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Additional text inverted color\nUsed for inverted pressed interaction text link */",
8
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
9
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
10
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
11
- },
12
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
13
- "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for inverted hover interaction button label */",
14
- "neutral": {
15
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
16
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
17
- "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
18
- },
19
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
20
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used to display negative performance values */",
21
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
22
- "risk": {
23
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
24
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
25
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
26
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
27
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
28
- },
29
- "transparent": "transparent",
30
- "inherit": "inherit",
31
- "current": "currentColor"
32
- },
33
- "backgroundColor": {
34
- "primary": {
35
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
36
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
37
- "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
38
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for audio bar inverted */",
39
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
40
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
41
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
42
- },
43
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
44
- "accent": {
45
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
46
- "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
47
- "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
48
- "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for pressed interaction */",
49
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for checkbox, switch */"
50
- },
51
- "neutral": {
52
- "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
53
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for hover interaction */",
54
- "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag */",
55
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for breadcrumbs separator */",
56
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
57
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
58
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
59
- },
60
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
61
- "error": {
62
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
63
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notification, status-badge */"
64
- },
65
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification, status-badge */",
66
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
67
- "risk": {
68
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
69
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
70
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
71
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
72
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
73
- },
74
- "transparent": "transparent",
75
- "inherit": "inherit",
76
- "current": "currentColor"
77
- },
78
- "borderColor": {
79
- "primary": {
80
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
81
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted pressed interaction */",
82
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for inverted dividers */",
83
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
84
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
85
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
86
- },
87
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
88
- "accent": {
89
- "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
90
- "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for motion design only */",
91
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
92
- },
93
- "neutral": {
94
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
95
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
96
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
97
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
98
- },
99
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
100
- "error": {
101
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
102
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
103
- },
104
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
105
- "risk": {
106
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
107
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
108
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
109
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
110
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
111
- },
112
- "transparent": "transparent",
113
- "inherit": "inherit",
114
- "current": "currentColor"
115
- },
116
- "borderRadius": {
117
- "default": "var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */",
118
- "sm": "var(--sd-border-radius-sm, 0.125rem) /* 2px */",
119
- "md": "var(--sd-border-radius-md, 0.375rem) /* 6px Inner focus outline */",
120
- "lg": "var(--sd-border-radius-lg, 0.5rem) /* 8px Outer focus outline */",
121
- "full": "var(--sd-border-radius-full, 9999px) /* Radius for pill shape buttons */",
122
- "none": "var(--sd-border-radius-none, 0px)"
123
- },
124
- "boxShadowColor": {
125
- "primary": {
126
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
127
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
128
- "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
129
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for audio bar inverted */",
130
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
131
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
132
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
133
- },
134
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
135
- "accent": {
136
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
137
- "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
138
- "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
139
- "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for pressed interaction */",
140
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for checkbox, switch */"
141
- },
142
- "neutral": {
143
- "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
144
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for hover interaction */",
145
- "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag */",
146
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for breadcrumbs separator */",
147
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
148
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
149
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
150
- },
151
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
152
- "error": {
153
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
154
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notification, status-badge */"
155
- },
156
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification, status-badge */",
157
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
158
- "risk": {
159
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
160
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
161
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
162
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
163
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
164
- },
165
- "transparent": "transparent",
166
- "inherit": "inherit",
167
- "current": "currentColor"
168
- },
169
- "caretColor": {
170
- "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>) /* Default text color */",
171
- "primary": {
172
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction button label */",
173
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted hover interaction text link and inverted pressed interaction button label */",
174
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Additional text inverted color\nUsed for inverted pressed interaction text link */",
175
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
176
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
177
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
178
- },
179
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
180
- "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for inverted hover interaction button label */",
181
- "neutral": {
182
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
183
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
184
- "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
185
- },
186
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
187
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used to display negative performance values */",
188
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
189
- "risk": {
190
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
191
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
192
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
193
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
194
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
195
- },
196
- "transparent": "transparent",
197
- "inherit": "inherit",
198
- "current": "currentColor"
199
- },
200
- "color": {
201
- "primary": {
202
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>)",
203
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>)",
204
- "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>)",
205
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>)",
206
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>)",
207
- "600": "rgb(var(--sd-color-primary-600, 0 53 142) / <alpha-value>)",
208
- "700": "rgb(var(--sd-color-primary-700, 19 44 100) / <alpha-value>)",
209
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>)",
210
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* blue-default */"
211
- },
212
- "accent": {
213
- "100": "rgb(var(--sd-color-accent-100, 182 223 170) / <alpha-value>)",
214
- "200": "rgb(var(--sd-color-accent-200, 142 208 130) / <alpha-value>)",
215
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>)",
216
- "400": "rgb(var(--sd-color-accent-400, 45 157 0) / <alpha-value>)",
217
- "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>)",
218
- "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>)",
219
- "600": "rgb(var(--sd-color-accent-600, 49 111 36) / <alpha-value>)",
220
- "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>)",
221
- "800": "rgb(var(--sd-color-accent-800, 25 65 27) / <alpha-value>)",
222
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* green-default */"
223
- },
224
- "neutral": {
225
- "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>)",
226
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>)",
227
- "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>)",
228
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* grey-400 */",
229
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>)",
230
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* grey-600 */",
231
- "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>)",
232
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>)"
233
- },
234
- "error": {
235
- "300": "rgb(var(--sd-color-error-300, 204 25 55) / <alpha-value>)",
236
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>)",
237
- "500": "rgb(var(--sd-color-error-500, 125 20 45) / <alpha-value>)"
238
- },
239
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>)",
240
- "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>)",
241
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
242
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
243
- "risk": {
244
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
245
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
246
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
247
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
248
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
249
- },
250
- "transparent": "transparent",
251
- "inherit": "inherit",
252
- "current": "currentColor"
253
- },
254
- "fill": {
255
- "primary": {
256
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
257
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted pressed interaction */",
258
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for inverted pressed interaction in text link */",
259
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
260
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
261
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Default icon color */"
262
- },
263
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted icon color */",
264
- "accent": {
265
- "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
266
- "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for pressed interaction */",
267
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for active / selected elements */"
268
- },
269
- "neutral": {
270
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
271
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
272
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for switch, clearable */"
273
- },
274
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
275
- "error": {
276
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements\n */",
277
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages, invalid states */"
278
- },
279
- "risk": {
280
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
281
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
282
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
283
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
284
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
285
- },
286
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
287
- "transparent": "transparent",
288
- "inherit": "inherit",
289
- "current": "currentColor"
290
- },
291
- "fontFamily": {},
292
- "fontSize": {
293
- "sm": "var(--sd-font-size-sm, 0.875rem) /* 14px */",
294
- "base": "var(--sd-font-size-base, 1rem) /* 16px */",
295
- "lg": "var(--sd-font-size-lg, 1.25rem) /* 20px */",
296
- "xl": "var(--sd-font-size-xl, 1.5rem) /* 24px */",
297
- "2xl": "var(--sd-font-size-2xl, 1.75rem) /* 28px */",
298
- "3xl": "var(--sd-font-size-3xl, 2rem) /* 32px */",
299
- "4xl": "var(--sd-font-size-4xl, 2.5rem) /* 40px */"
300
- },
301
- "fontStyle": {},
302
- "fontWeight": {
303
- "normal": "400",
304
- "bold": "700"
305
- },
306
- "gradientColorStops": {
307
- "primary": {
308
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
309
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
310
- "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
311
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for audio bar inverted */",
312
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
313
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
314
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
315
- },
316
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
317
- "accent": {
318
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
319
- "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
320
- "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
321
- "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for pressed interaction */",
322
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for checkbox, switch */"
323
- },
324
- "neutral": {
325
- "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
326
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for hover interaction */",
327
- "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag */",
328
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for breadcrumbs separator */",
329
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
330
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
331
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
332
- },
333
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
334
- "error": {
335
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
336
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notification, status-badge */"
337
- },
338
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification, status-badge */",
339
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
340
- "risk": {
341
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
342
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
343
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
344
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
345
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
346
- },
347
- "transparent": "transparent",
348
- "inherit": "inherit",
349
- "current": "currentColor"
350
- },
351
- "lineHeight": {
352
- "none": "var(--sd-line-height-none, 100%) /* Used for buttons, input fields etc. */",
353
- "tight": "var(--sd-line-height-tight, 120%) /* Used for display and large titles */",
354
- "normal": "var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */"
355
- },
356
- "opacity": {
357
- "0": "var(--sd-opacity-0, 0)",
358
- "5": "var(--sd-opacity-5, 0.05)",
359
- "10": "var(--sd-opacity-10, 0.1)",
360
- "20": "var(--sd-opacity-20, 0.2)",
361
- "30": "var(--sd-opacity-30, 0.3)",
362
- "50": "var(--sd-opacity-50, 0.5)",
363
- "55": "var(--sd-opacity-55, 0.55)",
364
- "60": "var(--sd-opacity-60, 0.6)",
365
- "70": "var(--sd-opacity-70, 0.7)",
366
- "75": "var(--sd-opacity-75, 0.75)",
367
- "80": "var(--sd-opacity-80, 0.8)",
368
- "85": "var(--sd-opacity-85, 0.85)",
369
- "90": "var(--sd-opacity-90, 0.9)",
370
- "100": "var(--sd-opacity-100, 1)"
371
- },
372
- "outlineColor": {
373
- "primary": {
374
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
375
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted pressed interaction */",
376
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for inverted dividers */",
377
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
378
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
379
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
380
- },
381
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
382
- "accent": {
383
- "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
384
- "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for motion design only */",
385
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
386
- },
387
- "neutral": {
388
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
389
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
390
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
391
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
392
- },
393
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
394
- "error": {
395
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
396
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
397
- },
398
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
399
- "risk": {
400
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
401
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
402
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
403
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
404
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
405
- },
406
- "transparent": "transparent",
407
- "inherit": "inherit",
408
- "current": "currentColor"
409
- },
410
- "placeholderColor": {
411
- "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>) /* Default text color */",
412
- "primary": {
413
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction button label */",
414
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted hover interaction text link and inverted pressed interaction button label */",
415
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Additional text inverted color\nUsed for inverted pressed interaction text link */",
416
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
417
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
418
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
419
- },
420
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
421
- "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for inverted hover interaction button label */",
422
- "neutral": {
423
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
424
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
425
- "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
426
- },
427
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
428
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used to display negative performance values */",
429
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
430
- "risk": {
431
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
432
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
433
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
434
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
435
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
436
- },
437
- "transparent": "transparent",
438
- "inherit": "inherit",
439
- "current": "currentColor"
440
- },
441
- "ringColor": {
442
- "primary": {
443
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
444
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted pressed interaction */",
445
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for inverted dividers */",
446
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
447
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
448
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
449
- },
450
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
451
- "accent": {
452
- "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
453
- "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for motion design only */",
454
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
455
- },
456
- "neutral": {
457
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
458
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
459
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
460
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
461
- },
462
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
463
- "error": {
464
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
465
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
466
- },
467
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
468
- "risk": {
469
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
470
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
471
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
472
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
473
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
474
- },
475
- "transparent": "transparent",
476
- "inherit": "inherit",
477
- "current": "currentColor"
478
- },
479
- "ringOffsetColor": {
480
- "primary": {
481
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
482
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
483
- "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
484
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for audio bar inverted */",
485
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
486
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
487
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
488
- },
489
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
490
- "accent": {
491
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
492
- "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
493
- "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
494
- "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for pressed interaction */",
495
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for checkbox, switch */"
496
- },
497
- "neutral": {
498
- "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
499
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for hover interaction */",
500
- "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag */",
501
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for breadcrumbs separator */",
502
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
503
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
504
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
505
- },
506
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
507
- "error": {
508
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
509
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notification, status-badge */"
510
- },
511
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification, status-badge */",
512
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
513
- "risk": {
514
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
515
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
516
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
517
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
518
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
519
- },
520
- "transparent": "transparent",
521
- "inherit": "inherit",
522
- "current": "currentColor"
523
- },
524
- "space": {
525
- "0": "var(--sd-spacing-0, 0px) /* No spacing (manually added) */",
526
- "1": "var(--sd-spacing-1, 0.25rem) /* 4px */",
527
- "2": "var(--sd-spacing-2, 0.5rem) /* 8px */",
528
- "3": "var(--sd-spacing-3, 0.75rem) /* 12px */",
529
- "4": "var(--sd-spacing-4, 1rem) /* 16px */",
530
- "5": "var(--sd-spacing-5, 1.25rem) /* 20px */",
531
- "6": "var(--sd-spacing-6, 1.5rem) /* 24px */",
532
- "8": "var(--sd-spacing-8, 2rem) /* 32px */",
533
- "10": "var(--sd-spacing-10, 2.5rem) /* 40px */",
534
- "12": "var(--sd-spacing-12, 3rem) /* 48px */",
535
- "16": "var(--sd-spacing-16, 4rem) /* 64px */",
536
- "20": "var(--sd-spacing-20, 5rem) /* 80px */",
537
- "24": "var(--sd-spacing-24, 6rem) /* 96px */",
538
- "32": "var(--sd-spacing-32, 8rem) /* 128px */",
539
- "40": "var(--sd-spacing-40, 10rem) /* 160px */",
540
- "0.5": "var(--sd-spacing-0-5, 0.125rem) /* 2px */",
541
- "0.25": "var(--sd-spacing-0-25, 1px) /* 1px */",
542
- "1.5": "var(--sd-spacing-1-5, 0.375rem)",
543
- "auto": "var(--sd-spacing-auto, auto) /* Automatic spacing (manually added) */",
544
- "2.5": "var(--sd-spacing-2-5, 0.625rem) /* 10px */"
545
- },
546
- "spacing": {
547
- "0": "var(--sd-spacing-0, 0px) /* No spacing (manually added) */",
548
- "1": "var(--sd-spacing-1, 0.25rem) /* 4px */",
549
- "2": "var(--sd-spacing-2, 0.5rem) /* 8px */",
550
- "3": "var(--sd-spacing-3, 0.75rem) /* 12px */",
551
- "4": "var(--sd-spacing-4, 1rem) /* 16px */",
552
- "5": "var(--sd-spacing-5, 1.25rem) /* 20px */",
553
- "6": "var(--sd-spacing-6, 1.5rem) /* 24px */",
554
- "8": "var(--sd-spacing-8, 2rem) /* 32px */",
555
- "10": "var(--sd-spacing-10, 2.5rem) /* 40px */",
556
- "12": "var(--sd-spacing-12, 3rem) /* 48px */",
557
- "16": "var(--sd-spacing-16, 4rem) /* 64px */",
558
- "20": "var(--sd-spacing-20, 5rem) /* 80px */",
559
- "24": "var(--sd-spacing-24, 6rem) /* 96px */",
560
- "32": "var(--sd-spacing-32, 8rem) /* 128px */",
561
- "40": "var(--sd-spacing-40, 10rem) /* 160px */",
562
- "0.5": "var(--sd-spacing-0-5, 0.125rem) /* 2px */",
563
- "0.25": "var(--sd-spacing-0-25, 1px) /* 1px */",
564
- "1.5": "var(--sd-spacing-1-5, 0.375rem)",
565
- "auto": "var(--sd-spacing-auto, auto) /* Automatic spacing (manually added) */",
566
- "2.5": "var(--sd-spacing-2-5, 0.625rem) /* 10px */"
567
- },
568
- "stroke": {
569
- "primary": {
570
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction */",
571
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted pressed interaction */",
572
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for inverted dividers */",
573
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
574
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
575
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
576
- },
577
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
578
- "accent": {
579
- "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
580
- "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for motion design only */",
581
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
582
- },
583
- "neutral": {
584
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
585
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
586
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
587
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
588
- },
589
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
590
- "error": {
591
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
592
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
593
- },
594
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
595
- "risk": {
596
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
597
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
598
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
599
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
600
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
601
- },
602
- "transparent": "transparent",
603
- "inherit": "inherit",
604
- "current": "currentColor"
605
- },
606
- "tracking": {},
607
- "textColor": {
608
- "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>) /* Default text color */",
609
- "primary": {
610
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction button label */",
611
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted hover interaction text link and inverted pressed interaction button label */",
612
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Additional text inverted color\nUsed for inverted pressed interaction text link */",
613
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
614
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
615
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
616
- },
617
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
618
- "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for inverted hover interaction button label */",
619
- "neutral": {
620
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
621
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
622
- "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
623
- },
624
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
625
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used to display negative performance values */",
626
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
627
- "risk": {
628
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
629
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
630
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
631
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
632
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
633
- },
634
- "transparent": "transparent",
635
- "inherit": "inherit",
636
- "current": "currentColor"
637
- },
638
- "textDecorationColor": {
639
- "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>) /* Default text color */",
640
- "primary": {
641
- "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Used for inverted hover interaction button label */",
642
- "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Used for inverted hover interaction text link and inverted pressed interaction button label */",
643
- "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Additional text inverted color\nUsed for inverted pressed interaction text link */",
644
- "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
645
- "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
646
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
647
- },
648
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
649
- "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for inverted hover interaction button label */",
650
- "neutral": {
651
- "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
652
- "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
653
- "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
654
- },
655
- "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
656
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used to display negative performance values */",
657
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
658
- "risk": {
659
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
660
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
661
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
662
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
663
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
664
- },
665
- "transparent": "transparent",
666
- "inherit": "inherit",
667
- "current": "currentColor"
668
- },
669
- "boxShadow": {
670
- "DEFAULT": "var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%))",
671
- "sm": "var(--sd-shadow-sm, 0.5px 0.5px 1.5px 0px rgb(81 81 81 / 100%))"
672
- },
673
- "dropShadow": {
674
- "DEFAULT": "var(--sd-shadow, 0px 1px 3px rgb(81 81 81))",
675
- "sm": "var(--sd-shadow-sm, 0.5px 0.5px 1.5px rgb(81 81 81))"
676
- },
677
- "zIndex": {
678
- "10": "10",
679
- "20": "20",
680
- "30": "30",
681
- "40": "40",
682
- "50": "50",
683
- "auto": "auto",
684
- "header": "var(--sd-z-index-header, 600)",
685
- "drawer": "var(--sd-z-index-drawer, 700)",
686
- "dialog": "var(--sd-z-index-dialog, 800)",
687
- "dropdown": "var(--sd-z-index-dropdown, 900)",
688
- "alert-group": "var(--sd-z-index-alert-group, 950)",
689
- "tooltip": "var(--sd-z-index-tooltip, 1000)"
690
- },
691
- "risk": {
692
- "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
693
- "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
694
- "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
695
- "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
696
- "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
697
- },
698
- "aspectRatio": {
699
- "video": "16 / 9",
700
- "square": "1 / 1",
701
- "6/5": "6 / 5",
702
- "5/4": "5 / 4",
703
- "4/3": "4 / 3",
704
- "3/2": "3 / 2",
705
- "16/10": "16 / 10",
706
- "golden-ratio": "1.6180339887498948482 / 1",
707
- "2/1": "2 / 1",
708
- "21/9": "21 / 9",
709
- "3/4": "3 / 4",
710
- "4/5": "4 / 5"
711
- }
712
- }