@solid-design-system/tokens 4.1.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 +11 -13
  3. package/dist/tokens.tailwind.json +48 -55
  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 */);
@@ -98,6 +95,7 @@ $sd-opacity-75: (var(--sd-opacity-75, 0.75));
98
95
  $sd-opacity-80: (var(--sd-opacity-80, 0.8));
99
96
  $sd-opacity-85: (var(--sd-opacity-85, 0.85));
100
97
  $sd-opacity-90: (var(--sd-opacity-90, 0.9));
98
+ $sd-opacity-100: (var(--sd-opacity-100, 1));
101
99
 
102
100
  $sd-spacing-0: (var(--sd-spacing-0, 0px) /* No spacing (manually added) */);
103
101
  $sd-spacing-1: (var(--sd-spacing-1, 0.25rem) /* 4px */);
@@ -129,12 +127,12 @@ $sd-textColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /* Used
129
127
  $sd-textColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
130
128
  $sd-textColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Primary brand color for text */);
131
129
  $sd-textColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Inverted text color */);
132
- $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 */);
133
131
  $sd-textColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
134
132
  $sd-textColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
135
133
  $sd-textColor-neutral-700: (rgb(var(--sd-color-neutral-700, 104 104 104)) /* Additional text color */);
136
134
  $sd-textColor-success: (rgb(var(--sd-color-success, 37 136 14)) /* Used for success messages */);
137
- $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 */);
138
136
  $sd-textColor-warning: (rgb(var(--sd-color-warning, 187 141 32)) /* Used for notifications */);
139
137
  $sd-textColor-risk-low: (rgb(var(--sd-color-risk-low, 1 125 195)) /* Exclusively for marking fonds */);
140
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 */",
@@ -364,7 +359,8 @@
364
359
  "75": "var(--sd-opacity-75, 0.75)",
365
360
  "80": "var(--sd-opacity-80, 0.8)",
366
361
  "85": "var(--sd-opacity-85, 0.85)",
367
- "90": "var(--sd-opacity-90, 0.9)"
362
+ "90": "var(--sd-opacity-90, 0.9)",
363
+ "100": "var(--sd-opacity-100, 1)"
368
364
  },
369
365
  "outlineColor": {
370
366
  "primary": {
@@ -375,13 +371,12 @@
375
371
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
376
372
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
377
373
  },
378
- "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 */",
379
375
  "accent": {
380
376
  "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
381
- "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 */"
382
378
  },
383
379
  "neutral": {
384
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
385
380
  "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
386
381
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
387
382
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
@@ -415,14 +410,14 @@
415
410
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
416
411
  },
417
412
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
418
- "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 */",
419
414
  "neutral": {
420
415
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
421
416
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
422
417
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
423
418
  },
424
419
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
425
- "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 */",
426
421
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
427
422
  "risk": {
428
423
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -444,13 +439,12 @@
444
439
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
445
440
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
446
441
  },
447
- "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 */",
448
443
  "accent": {
449
444
  "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
450
- "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 */"
451
446
  },
452
447
  "neutral": {
453
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
454
448
  "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
455
449
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
456
450
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
@@ -480,9 +474,9 @@
480
474
  "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
481
475
  "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
482
476
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
483
- "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 */"
484
478
  },
485
- "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 */",
486
480
  "accent": {
487
481
  "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
488
482
  "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
@@ -492,9 +486,8 @@
492
486
  },
493
487
  "neutral": {
494
488
  "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
495
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Additional background color (light mode) on neutral-100\nUsed for hover interaction */",
496
- "300": "rgb(var(--sd-color-neutral-300, 218 218 218) / <alpha-value>) /* Used for flag background */",
497
- "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 */",
498
491
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
499
492
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
500
493
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
@@ -502,9 +495,9 @@
502
495
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
503
496
  "error": {
504
497
  "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
505
- "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 */"
506
499
  },
507
- "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 */",
508
501
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
509
502
  "risk": {
510
503
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -570,13 +563,12 @@
570
563
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
571
564
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Used for buttons, select field, focus state */"
572
565
  },
573
- "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 */",
574
567
  "accent": {
575
568
  "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
576
- "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 */"
577
570
  },
578
571
  "neutral": {
579
- "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
580
572
  "400": "rgb(var(--sd-color-neutral-400, 195 195 195) / <alpha-value>) /* Default border color. \nUsed for divider, teaser, container, ... */",
581
573
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
582
574
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
@@ -611,14 +603,14 @@
611
603
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
612
604
  },
613
605
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
614
- "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 */",
615
607
  "neutral": {
616
608
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
617
609
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
618
610
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
619
611
  },
620
612
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
621
- "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 */",
622
614
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
623
615
  "risk": {
624
616
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -642,14 +634,14 @@
642
634
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
643
635
  },
644
636
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
645
- "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 */",
646
638
  "neutral": {
647
639
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
648
640
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
649
641
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
650
642
  },
651
643
  "success": "rgb(var(--sd-color-success, 37 136 14) / <alpha-value>) /* Used for success messages */",
652
- "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 */",
653
645
  "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
654
646
  "risk": {
655
647
  "low": "rgb(var(--sd-color-risk-low, 1 125 195) / <alpha-value>) /* Exclusively for marking fonds */",
@@ -663,7 +655,8 @@
663
655
  "current": "currentColor"
664
656
  },
665
657
  "boxShadow": {
666
- "DEFAULT": "var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%))"
658
+ "DEFAULT": "var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%))",
659
+ "sm": "var(--sd-shadow-sm, 0.5px 0.5px 1.5px 0px rgb(81 81 81 / 100%))"
667
660
  },
668
661
  "zIndex": {
669
662
  "10": "10",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solid-design-system/tokens",
3
- "version": "4.1.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
  },