@solid-design-system/tokens 4.2.0 → 5.0.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 (4) hide show
  1. package/README.md +1 -1
  2. package/dist/tokens.scss +10 -13
  3. package/dist/tokens.tailwind.json +44 -53
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  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.
8
8
 
9
- Check out the [full documentation](https://solid-design-system.fe.union-investment.de/x.x.x/storybook/) for detailed information.
9
+ Check out the [full documentation](https://solid-design-system.fe.union-investment.de/docs/) for detailed information.
10
10
 
11
11
  ### Handling tokens (for Figma maintainers ONLY)
12
12
 
package/dist/tokens.scss CHANGED
@@ -5,25 +5,23 @@ $sd-backgroundColor-primary-300: (rgb(var(--sd-color-primary-300, 200 213 231))
5
5
  $sd-backgroundColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /* Used for hover interaction */);
6
6
  $sd-backgroundColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
7
7
  $sd-backgroundColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Inverted background color (light mode)
8
- Used for primary-button background */);
9
- $sd-backgroundColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Default background color (light mode) 
Used */);
8
+ Used for button */);
9
+ $sd-backgroundColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Default background color (light mode) 
Used for inverted button */);
10
10
  $sd-backgroundColor-accent-300: (rgb(var(--sd-color-accent-300, 108 194 84)) /* Used for inverted hover interaction */);
11
11
  $sd-backgroundColor-accent-500: (rgb(var(--sd-color-accent-500, 37 136 14)) /* Used for cta background */);
12
12
  $sd-backgroundColor-accent-550: (rgb(var(--sd-color-accent-550, 54 123 40)) /* Used for hover interaction */);
13
13
  $sd-backgroundColor-accent-700: (rgb(var(--sd-color-accent-700, 33 87 37)) /* Used for pressed interaction */);
14
14
  $sd-backgroundColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 45 157 0)) /* Used for checkbox, switch */);
15
15
  $sd-backgroundColor-neutral-100: (rgb(var(--sd-color-neutral-100, 246 246 246)) /* Additional background color (light mode) */);
16
- $sd-backgroundColor-neutral-200: (rgb(var(--sd-color-neutral-200, 233 233 233)) /* Additional background color (light mode) on neutral-100
17
- Used for hover interaction */);
18
- $sd-backgroundColor-neutral-300: (rgb(var(--sd-color-neutral-300, 218 218 218)) /* Used for flag background */);
19
- $sd-backgroundColor-neutral-400: (rgb(var(--sd-color-neutral-400, 195 195 195)) /* Used for */);
16
+ $sd-backgroundColor-neutral-200: (rgb(var(--sd-color-neutral-200, 233 233 233)) /* Used for hover interaction */);
17
+ $sd-backgroundColor-neutral-300: (rgb(var(--sd-color-neutral-300, 218 218 218)) /* Used for flag */);
20
18
  $sd-backgroundColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
21
19
  $sd-backgroundColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
22
20
  $sd-backgroundColor-neutral-800: (rgb(var(--sd-color-neutral-800, 81 81 81)) /* Used for badge */);
23
21
  $sd-backgroundColor-success: (rgb(var(--sd-color-success, 37 136 14)) /* Used for success messages */);
24
22
  $sd-backgroundColor-error-400: (rgb(var(--sd-color-error-400, 172 25 56)) /* Used for hover interaction invalid form elements */);
25
- $sd-backgroundColor-error-DEFAULT: (rgb(var(--sd-color-error, 204 25 55)) /* Used for notifications, badges, toolbar timer */);
26
- $sd-backgroundColor-info: (rgb(var(--sd-color-info, 21 130 213)) /* Used for notifications */);
23
+ $sd-backgroundColor-error-DEFAULT: (rgb(var(--sd-color-error, 204 25 55)) /* Used for notification, status-badge */);
24
+ $sd-backgroundColor-info: (rgb(var(--sd-color-info, 21 130 213)) /* Used for notification, status-badge */);
27
25
  $sd-backgroundColor-warning: (rgb(var(--sd-color-warning, 187 141 32)) /* Used for notifications */);
28
26
  $sd-backgroundColor-risk-low: (rgb(var(--sd-color-risk-low, 1 125 195)) /* Exclusively for marking fonds */);
29
27
  $sd-backgroundColor-risk-moderate: (rgb(var(--sd-color-risk-moderate, 0 165 147)) /* Exclusively for marking fonds */);
@@ -40,11 +38,10 @@ $sd-borderColor-primary-400: (rgb(var(--sd-color-primary-400, 153 171 208)) /* U
40
38
  $sd-borderColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /* Used for hover interaction */);
41
39
  $sd-borderColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
42
40
  $sd-borderColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Used for buttons, select field, focus state */);
43
- $sd-borderColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Used for buttons */);
41
+ $sd-borderColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Used for buttons, inverted focus state */);
44
42
  $sd-borderColor-accent-550: (rgb(var(--sd-color-accent-550, 54 123 40)) /* Used for hover interaction */);
45
- $sd-borderColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 45 157 0)) /* Used for brand-shape
43
+ $sd-borderColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 45 157 0)) /* Used to highlight active/selected elements
46
44
  */);
47
- $sd-borderColor-neutral-200: (rgb(var(--sd-color-neutral-200, 233 233 233)) /* Used for spinner */);
48
45
  $sd-borderColor-neutral-400: (rgb(var(--sd-color-neutral-400, 195 195 195)) /* Default border color.
49
46
  Used for divider, teaser, container, ... */);
50
47
  $sd-borderColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
@@ -130,12 +127,12 @@ $sd-textColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /* Used
130
127
  $sd-textColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
131
128
  $sd-textColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Primary brand color for text */);
132
129
  $sd-textColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Inverted text color */);
133
- $sd-textColor-accent: (rgb(var(--sd-color-accent, 45 157 0)) /* Accent brand color for highlighted text */);
130
+ $sd-textColor-accent: (rgb(var(--sd-color-accent, 45 157 0)) /* Used for inverted hover interaction button label */);
134
131
  $sd-textColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
135
132
  $sd-textColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
136
133
  $sd-textColor-neutral-700: (rgb(var(--sd-color-neutral-700, 104 104 104)) /* Additional text color */);
137
134
  $sd-textColor-success: (rgb(var(--sd-color-success, 37 136 14)) /* Used for success messages */);
138
- $sd-textColor-error: (rgb(var(--sd-color-error, 204 25 55)) /* Used for error messages */);
135
+ $sd-textColor-error: (rgb(var(--sd-color-error, 204 25 55)) /* Used to display negative performance values */);
139
136
  $sd-textColor-warning: (rgb(var(--sd-color-warning, 187 141 32)) /* Used for notifications */);
140
137
  $sd-textColor-risk-low: (rgb(var(--sd-color-risk-low, 1 125 195)) /* Exclusively for marking fonds */);
141
138
  $sd-textColor-risk-moderate: (rgb(var(--sd-color-risk-moderate, 0 165 147)) /* Exclusively for marking fonds */);
package/dist/tokens.tailwind.json CHANGED
@@ -10,14 +10,14 @@
10
10
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
11
11
  },
12
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>) /* Accent brand color for highlighted text */",
13
+ "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for inverted hover interaction button label */",
14
14
  "neutral": {
15
15
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
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
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 for error messages */",
20
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used to display negative performance values */",
21
21
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
22
22
  "risk": {
23
23
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -37,9 +37,9 @@
37
37
  "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
38
38
  "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
39
39
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
40
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for primary-button background */"
40
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
41
41
  },
42
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used */",
42
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
43
43
  "accent": {
44
44
  "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
45
45
  "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
@@ -49,9 +49,8 @@
49
49
  },
50
50
  "neutral": {
51
51
  "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
52
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Additional background color (light mode) on neutral-100\nUsed for hover interaction */",
53
- "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag background */",
54
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for */",
52
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for hover interaction */",
53
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag */",
55
54
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
56
55
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
57
56
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
@@ -59,9 +58,9 @@
59
58
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
60
59
  "error": {
61
60
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
62
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
61
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notification, status-badge */"
63
62
  },
64
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
63
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification, status-badge */",
65
64
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
66
65
  "risk": {
67
66
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -83,13 +82,12 @@
83
82
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
84
83
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
85
84
  },
86
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
85
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
87
86
  "accent": {
88
87
  "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
89
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for brand-shape\n */"
88
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
90
89
  },
91
90
  "neutral": {
92
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
93
91
  "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
94
92
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
95
93
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
@@ -127,9 +125,9 @@
127
125
  "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
128
126
  "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
129
127
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
130
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for primary-button background */"
128
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
131
129
  },
132
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used */",
130
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
133
131
  "accent": {
134
132
  "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
135
133
  "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
@@ -139,9 +137,8 @@
139
137
  },
140
138
  "neutral": {
141
139
  "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
142
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Additional background color (light mode) on neutral-100\nUsed for hover interaction */",
143
- "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag background */",
144
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for */",
140
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for hover interaction */",
141
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag */",
145
142
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
146
143
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
147
144
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
@@ -149,9 +146,9 @@
149
146
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
150
147
  "error": {
151
148
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
152
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
149
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notification, status-badge */"
153
150
  },
154
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
151
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification, status-badge */",
155
152
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
156
153
  "risk": {
157
154
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -175,14 +172,14 @@
175
172
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
176
173
  },
177
174
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
178
- "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Accent brand color for highlighted text */",
175
+ "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for inverted hover interaction button label */",
179
176
  "neutral": {
180
177
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
181
178
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
182
179
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
183
180
  },
184
181
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
185
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
182
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used to display negative performance values */",
186
183
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
187
184
  "risk": {
188
185
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -265,15 +262,14 @@
265
262
  "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for active / selected elements */"
266
263
  },
267
264
  "neutral": {
268
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* used for progress step (in inactive state) */",
269
265
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
270
266
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
271
- "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for switch */"
267
+ "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for switch, clearable */"
272
268
  },
273
269
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
274
270
  "error": {
275
271
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements\n */",
276
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages\n */"
272
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages, invalid states */"
277
273
  },
278
274
  "risk": {
279
275
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -309,9 +305,9 @@
309
305
  "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
310
306
  "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
311
307
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
312
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for primary-button background */"
308
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
313
309
  },
314
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used */",
310
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
315
311
  "accent": {
316
312
  "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
317
313
  "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
@@ -321,9 +317,8 @@
321
317
  },
322
318
  "neutral": {
323
319
  "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
324
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Additional background color (light mode) on neutral-100\nUsed for hover interaction */",
325
- "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag background */",
326
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for */",
320
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for hover interaction */",
321
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag */",
327
322
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
328
323
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
329
324
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
@@ -331,9 +326,9 @@
331
326
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
332
327
  "error": {
333
328
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
334
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
329
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notification, status-badge */"
335
330
  },
336
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
331
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification, status-badge */",
337
332
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
338
333
  "risk": {
339
334
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -376,13 +371,12 @@
376
371
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
377
372
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
378
373
  },
379
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
374
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
380
375
  "accent": {
381
376
  "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
382
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for brand-shape\n */"
377
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
383
378
  },
384
379
  "neutral": {
385
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
386
380
  "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
387
381
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
388
382
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
@@ -416,14 +410,14 @@
416
410
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
417
411
  },
418
412
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
419
- "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Accent brand color for highlighted text */",
413
+ "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for inverted hover interaction button label */",
420
414
  "neutral": {
421
415
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
422
416
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
423
417
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
424
418
  },
425
419
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
426
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
420
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used to display negative performance values */",
427
421
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
428
422
  "risk": {
429
423
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -445,13 +439,12 @@
445
439
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
446
440
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
447
441
  },
448
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
442
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
449
443
  "accent": {
450
444
  "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
451
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for brand-shape\n */"
445
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
452
446
  },
453
447
  "neutral": {
454
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
455
448
  "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
456
449
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
457
450
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
@@ -481,9 +474,9 @@
481
474
  "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
482
475
  "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
483
476
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
484
- "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for primary-button background */"
477
+ "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
485
478
  },
486
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used */",
479
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
487
480
  "accent": {
488
481
  "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
489
482
  "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
@@ -493,9 +486,8 @@
493
486
  },
494
487
  "neutral": {
495
488
  "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
496
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Additional background color (light mode) on neutral-100\nUsed for hover interaction */",
497
- "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag background */",
498
- "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Used for */",
489
+ "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for hover interaction */",
490
+ "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag */",
499
491
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
500
492
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
501
493
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
@@ -503,9 +495,9 @@
503
495
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
504
496
  "error": {
505
497
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
506
- "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
498
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notification, status-badge */"
507
499
  },
508
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
500
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification, status-badge */",
509
501
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
510
502
  "risk": {
511
503
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -571,13 +563,12 @@
571
563
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
572
564
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
573
565
  },
574
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
566
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
575
567
  "accent": {
576
568
  "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
577
- "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for brand-shape\n */"
569
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
578
570
  },
579
571
  "neutral": {
580
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
581
572
  "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
582
573
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
583
574
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
@@ -612,14 +603,14 @@
612
603
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
613
604
  },
614
605
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
615
- "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Accent brand color for highlighted text */",
606
+ "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for inverted hover interaction button label */",
616
607
  "neutral": {
617
608
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
618
609
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
619
610
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
620
611
  },
621
612
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
622
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
613
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used to display negative performance values */",
623
614
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
624
615
  "risk": {
625
616
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -643,14 +634,14 @@
643
634
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
644
635
  },
645
636
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
646
- "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Accent brand color for highlighted text */",
637
+ "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for inverted hover interaction button label */",
647
638
  "neutral": {
648
639
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
649
640
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
650
641
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
651
642
  },
652
643
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
653
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
644
+ "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used to display negative performance values */",
654
645
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
655
646
  "risk": {
656
647
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solid-design-system/tokens",
3
- "version": "4.2.0",
3
+ "version": "5.0.0",
4
4
  "description": "Solid Design System: Tokens",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -18,7 +18,7 @@
18
18
  "./tailwind": "./dist/tokens.tailwind.json"
19
19
  },
20
20
  "keywords": [],
21
- "homepage": "https://solid-design-system.fe.union-investment.de/x.x.x/storybook/",
21
+ "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
22
22
  "author": {
23
23
  "name": "Union Investment"
24
24
  },