@solid-design-system/tokens 2.1.0 → 2.2.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 CHANGED
@@ -9,7 +9,15 @@ Check out the [full documentation](https://solid-design-system.fe.union-investme
9
9
 
10
10
  ### Handling tokens (for Figma maintainers ONLY)
11
11
 
12
- Any changes in the token set in Token Studio plugin must be in a new branch branched from `main`.
12
+ Any changes in the token set in Token Studio plugin must be in a new branch branched from `main`with these information:
13
+
14
+ Branch Name:
15
+
16
+ feat/title
17
+
18
+ fix/title
19
+
20
+ Description: closes #123 (Write ticket number if it exists, automatically closes linked ticket when merged)
13
21
 
14
22
  ![Screen Shot 2024-01-19 at 11 22 24](https://github.com/solid-design-system/solid/assets/118520877/4b7ce66c-a5c7-44f3-86d4-2ae0ab4a902b)
15
23
 
package/dist/tokens.scss CHANGED
@@ -20,11 +20,16 @@ $sd-backgroundColor-neutral-400: (rgb(var(--sd-color-neutral-400, 195 195 195))
20
20
  $sd-backgroundColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
21
21
  $sd-backgroundColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
22
22
  $sd-backgroundColor-neutral-800: (rgb(var(--sd-color-neutral-800, 81 81 81)) /* Used for badge */);
23
- $sd-backgroundColor-success: (rgb(var(--sd-color-success, 54 123 40)) /* Used for notifications */);
23
+ $sd-backgroundColor-success: (rgb(var(--sd-color-success, 37 136 14)) /* Used for success messages */);
24
24
  $sd-backgroundColor-error-400: (rgb(var(--sd-color-error-400, 172 25 56)) /* Used for hover interaction invalid form elements */);
25
25
  $sd-backgroundColor-error-DEFAULT: (rgb(var(--sd-color-error, 204 25 55)) /* Used for notifications, badges, toolbar timer */);
26
26
  $sd-backgroundColor-info: (rgb(var(--sd-color-info, 21 130 213)) /* Used for notifications */);
27
27
  $sd-backgroundColor-warning: (rgb(var(--sd-color-warning, 187 141 32)) /* Used for notifications */);
28
+ $sd-backgroundColor-risk-low: (rgb(var(--sd-color-risk-low, 1 125 195)) /* Exclusively for marking fonds */);
29
+ $sd-backgroundColor-risk-moderate: (rgb(var(--sd-color-risk-moderate, 0 165 147)) /* Exclusively for marking fonds */);
30
+ $sd-backgroundColor-risk-increased: (rgb(var(--sd-color-risk-increased, 255 240 0)) /* Exclusively for marking fonds */);
31
+ $sd-backgroundColor-risk-high: (rgb(var(--sd-color-risk-high, 250 155 30)) /* Exclusively for marking fonds */);
32
+ $sd-backgroundColor-risk-veryhigh: (rgb(var(--sd-color-risk-veryhigh, 255 0 0)) /* Exclusively for marking fonds */);
28
33
  $sd-backgroundColor-transparent: transparent;
29
34
  $sd-backgroundColor-inherit: inherit;
30
35
  $sd-backgroundColor-current: currentColor;
@@ -45,10 +50,15 @@ Used for divider, teaser, container, ... */);
45
50
  $sd-borderColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
46
51
  $sd-borderColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
47
52
  $sd-borderColor-neutral-800: (rgb(var(--sd-color-neutral-800, 81 81 81)) /* Used for form fields, switch, radio, checkbox */);
48
- $sd-borderColor-success: (rgb(var(--sd-color-success, 54 123 40)) /* Used for valid form fields
49
- */);
53
+ $sd-borderColor-success: (rgb(var(--sd-color-success, 37 136 14)) /* Used for success messages */);
50
54
  $sd-borderColor-error-400: (rgb(var(--sd-color-error-400, 172 25 56)) /* Used for hover interaction invalid form elements */);
51
55
  $sd-borderColor-error-DEFAULT: (rgb(var(--sd-color-error, 204 25 55)) /* Used for invalid form fields */);
56
+ $sd-borderColor-warning: (rgb(var(--sd-color-warning, 187 141 32)) /* Used for notifications */);
57
+ $sd-borderColor-risk-low: (rgb(var(--sd-color-risk-low, 1 125 195)) /* Exclusively for marking fonds */);
58
+ $sd-borderColor-risk-moderate: (rgb(var(--sd-color-risk-moderate, 0 165 147)) /* Exclusively for marking fonds */);
59
+ $sd-borderColor-risk-increased: (rgb(var(--sd-color-risk-increased, 255 240 0)) /* Exclusively for marking fonds */);
60
+ $sd-borderColor-risk-high: (rgb(var(--sd-color-risk-high, 250 155 30)) /* Exclusively for marking fonds */);
61
+ $sd-borderColor-risk-veryhigh: (rgb(var(--sd-color-risk-veryhigh, 255 0 0)) /* Exclusively for marking fonds */);
52
62
  $sd-borderColor-transparent: transparent;
53
63
  $sd-borderColor-inherit: inherit;
54
64
  $sd-borderColor-current: currentColor;
@@ -122,8 +132,14 @@ $sd-textColor-accent: (rgb(var(--sd-color-accent, 45 157 0)) /* Accent brand col
122
132
  $sd-textColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
123
133
  $sd-textColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
124
134
  $sd-textColor-neutral-700: (rgb(var(--sd-color-neutral-700, 104 104 104)) /* Additional text color */);
125
- $sd-textColor-success: (rgb(var(--sd-color-success, 54 123 40)) /* Used for success messages */);
135
+ $sd-textColor-success: (rgb(var(--sd-color-success, 37 136 14)) /* Used for success messages */);
126
136
  $sd-textColor-error: (rgb(var(--sd-color-error, 204 25 55)) /* Used for error messages */);
137
+ $sd-textColor-warning: (rgb(var(--sd-color-warning, 187 141 32)) /* Used for notifications */);
138
+ $sd-textColor-risk-low: (rgb(var(--sd-color-risk-low, 1 125 195)) /* Exclusively for marking fonds */);
139
+ $sd-textColor-risk-moderate: (rgb(var(--sd-color-risk-moderate, 0 165 147)) /* Exclusively for marking fonds */);
140
+ $sd-textColor-risk-increased: (rgb(var(--sd-color-risk-increased, 255 240 0)) /* Exclusively for marking fonds */);
141
+ $sd-textColor-risk-high: (rgb(var(--sd-color-risk-high, 250 155 30)) /* Exclusively for marking fonds */);
142
+ $sd-textColor-risk-veryhigh: (rgb(var(--sd-color-risk-veryhigh, 255 0 0)) /* Exclusively for marking fonds */);
127
143
  $sd-textColor-transparent: transparent;
128
144
  $sd-textColor-inherit: inherit;
129
145
  $sd-textColor-current: currentColor;
@@ -16,8 +16,16 @@
16
16
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
17
17
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
18
18
  },
19
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
19
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
20
20
  "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
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
+ },
21
29
  "transparent": "transparent",
22
30
  "inherit": "inherit",
23
31
  "current": "currentColor"
@@ -48,13 +56,20 @@
48
56
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
49
57
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
50
58
  },
51
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for notifications */",
59
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
52
60
  "error": {
53
61
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
54
62
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
55
63
  },
56
64
  "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
57
65
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
66
+ "risk": {
67
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
68
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
69
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
70
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
71
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
72
+ },
58
73
  "transparent": "transparent",
59
74
  "inherit": "inherit",
60
75
  "current": "currentColor"
@@ -80,11 +95,19 @@
80
95
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
81
96
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
82
97
  },
83
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for valid form fields\n */",
98
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
84
99
  "error": {
85
100
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
86
101
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
87
102
  },
103
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
104
+ "risk": {
105
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
106
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
107
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
108
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
109
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
110
+ },
88
111
  "transparent": "transparent",
89
112
  "inherit": "inherit",
90
113
  "current": "currentColor"
@@ -123,13 +146,20 @@
123
146
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
124
147
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
125
148
  },
126
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for notifications */",
149
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
127
150
  "error": {
128
151
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
129
152
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
130
153
  },
131
154
  "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
132
155
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
156
+ "risk": {
157
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
158
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
159
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
160
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
161
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
162
+ },
133
163
  "transparent": "transparent",
134
164
  "inherit": "inherit",
135
165
  "current": "currentColor"
@@ -151,8 +181,16 @@
151
181
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
152
182
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
153
183
  },
154
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
184
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
155
185
  "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
186
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
187
+ "risk": {
188
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
189
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
190
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
191
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
192
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
193
+ },
156
194
  "transparent": "transparent",
157
195
  "inherit": "inherit",
158
196
  "current": "currentColor"
@@ -191,8 +229,22 @@
191
229
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>)",
192
230
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>)"
193
231
  },
232
+ "error": {
233
+ "300": "rgb(var(--sd-color-error-300, 204 25 55) / <alpha-value>)",
234
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>)",
235
+ "500": "rgb(var(--sd-color-error-500, 125 20 45) / <alpha-value>)"
236
+ },
194
237
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>)",
195
238
  "black": "rgb(var(--sd-color-black, 24 24 24) / <alpha-value>)",
239
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
240
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
241
+ "risk": {
242
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
243
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
244
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
245
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
246
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
247
+ },
196
248
  "transparent": "transparent",
197
249
  "inherit": "inherit",
198
250
  "current": "currentColor"
@@ -217,7 +269,7 @@
217
269
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
218
270
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for switch */"
219
271
  },
220
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
272
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
221
273
  "error": {
222
274
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements\n */",
223
275
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages\n */"
@@ -229,6 +281,7 @@
229
281
  "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
230
282
  "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
231
283
  },
284
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
232
285
  "transparent": "transparent",
233
286
  "inherit": "inherit",
234
287
  "current": "currentColor"
@@ -274,13 +327,20 @@
274
327
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
275
328
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
276
329
  },
277
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for notifications */",
330
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
278
331
  "error": {
279
332
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
280
333
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
281
334
  },
282
335
  "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
283
336
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
337
+ "risk": {
338
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
339
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
340
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
341
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
342
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
343
+ },
284
344
  "transparent": "transparent",
285
345
  "inherit": "inherit",
286
346
  "current": "currentColor"
@@ -326,11 +386,19 @@
326
386
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
327
387
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
328
388
  },
329
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for valid form fields\n */",
389
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
330
390
  "error": {
331
391
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
332
392
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
333
393
  },
394
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
395
+ "risk": {
396
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
397
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
398
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
399
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
400
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
401
+ },
334
402
  "transparent": "transparent",
335
403
  "inherit": "inherit",
336
404
  "current": "currentColor"
@@ -352,8 +420,16 @@
352
420
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
353
421
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
354
422
  },
355
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
423
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
356
424
  "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
425
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
426
+ "risk": {
427
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
428
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
429
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
430
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
431
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
432
+ },
357
433
  "transparent": "transparent",
358
434
  "inherit": "inherit",
359
435
  "current": "currentColor"
@@ -379,11 +455,19 @@
379
455
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
380
456
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
381
457
  },
382
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for valid form fields\n */",
458
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
383
459
  "error": {
384
460
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
385
461
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
386
462
  },
463
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
464
+ "risk": {
465
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
466
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
467
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
468
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
469
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
470
+ },
387
471
  "transparent": "transparent",
388
472
  "inherit": "inherit",
389
473
  "current": "currentColor"
@@ -414,13 +498,20 @@
414
498
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
415
499
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
416
500
  },
417
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for notifications */",
501
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
418
502
  "error": {
419
503
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
420
504
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
421
505
  },
422
506
  "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
423
507
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
508
+ "risk": {
509
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
510
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
511
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
512
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
513
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
514
+ },
424
515
  "transparent": "transparent",
425
516
  "inherit": "inherit",
426
517
  "current": "currentColor"
@@ -488,11 +579,19 @@
488
579
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
489
580
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
490
581
  },
491
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for valid form fields\n */",
582
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
492
583
  "error": {
493
584
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
494
585
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
495
586
  },
587
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
588
+ "risk": {
589
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
590
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
591
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
592
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
593
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
594
+ },
496
595
  "transparent": "transparent",
497
596
  "inherit": "inherit",
498
597
  "current": "currentColor"
@@ -515,8 +614,16 @@
515
614
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
516
615
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
517
616
  },
518
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
617
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
519
618
  "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
619
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
620
+ "risk": {
621
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
622
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
623
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
624
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
625
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
626
+ },
520
627
  "transparent": "transparent",
521
628
  "inherit": "inherit",
522
629
  "current": "currentColor"
@@ -538,8 +645,16 @@
538
645
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
539
646
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
540
647
  },
541
- "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
648
+ "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
542
649
  "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
650
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
651
+ "risk": {
652
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
653
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
654
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
655
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
656
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
657
+ },
543
658
  "transparent": "transparent",
544
659
  "inherit": "inherit",
545
660
  "current": "currentColor"
@@ -560,5 +675,26 @@
560
675
  "dropdown": "var(--sd-z-index-dropdown, 900)",
561
676
  "alert-group": "var(--sd-z-index-alert-group, 950)",
562
677
  "tooltip": "var(--sd-z-index-tooltip, 1000)"
678
+ },
679
+ "risk": {
680
+ "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
681
+ "moderate": "rgb(var(--sd-color-risk-moderate, 0 165 147) / <alpha-value>) /* Exclusively for marking fonds */",
682
+ "increased": "rgb(var(--sd-color-risk-increased, 255 240 0) / <alpha-value>) /* Exclusively for marking fonds */",
683
+ "high": "rgb(var(--sd-color-risk-high, 250 155 30) / <alpha-value>) /* Exclusively for marking fonds */",
684
+ "veryhigh": "rgb(var(--sd-color-risk-veryhigh, 255 0 0) / <alpha-value>) /* Exclusively for marking fonds */"
685
+ },
686
+ "aspectRatio": {
687
+ "video": "16 / 9",
688
+ "square": "1 / 1",
689
+ "6/5": "6 / 5",
690
+ "5/4": "5 / 4",
691
+ "4/3": "4 / 3",
692
+ "3/2": "3 / 2",
693
+ "16/10": "16 / 10",
694
+ "golden-ratio": "1.6180339887498948482 / 1",
695
+ "2/1": "2 / 1",
696
+ "21/9": "21 / 9",
697
+ "3/4": "3 / 4",
698
+ "4/5": "4 / 5"
563
699
  }
564
700
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solid-design-system/tokens",
3
- "version": "2.1.0",
3
+ "version": "2.2.0",
4
4
  "description": "Solid Design System: Tokens",
5
5
  "main": "index.js",
6
6
  "scripts": {