@solid-design-system/tokens 1.1.0 → 1.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.
Files changed (3) hide show
  1. package/dist/tokens.scss +17 -13
  2. package/dist/tokens.tailwind.json +80 -58
  3. package/package.json +2 -1
package/dist/tokens.scss CHANGED
@@ -7,9 +7,11 @@ $sd-backgroundColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* U
7
7
  $sd-backgroundColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Inverted background color (light mode)
8
8
  Used for primary-button background */);
9
9
  $sd-backgroundColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Default background color (light mode) */);
10
- $sd-backgroundColor-accent-300: (rgb(var(--sd-color-accent-300, 108 194 84)) /* Used for hover interaction */);
11
- $sd-backgroundColor-accent-500: (rgb(var(--sd-color-accent-500, 66 147 50)) /* Used for pressed interaction */);
12
- $sd-backgroundColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 67 176 42)) /* Used for cta-button background */);
10
+ $sd-backgroundColor-accent-300: (rgb(var(--sd-color-accent-300, 108 194 84)) /* Used for inverted hover interaction */);
11
+ $sd-backgroundColor-accent-500: (rgb(var(--sd-color-accent-500, 37 136 14)) /* Used for cta background */);
12
+ $sd-backgroundColor-accent-550: (rgb(var(--sd-color-accent-550, 54 123 40)) /* Used for hover interaction */);
13
+ $sd-backgroundColor-accent-700: (rgb(var(--sd-color-accent-700, 33 87 37)) /* Used for pressed interaction */);
14
+ $sd-backgroundColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 45 157 0)) /* Used for checkbox, switch */);
13
15
  $sd-backgroundColor-neutral-100: (rgb(var(--sd-color-neutral-100, 246 246 246)) /* Additional background color (light mode) */);
14
16
  $sd-backgroundColor-neutral-200: (rgb(var(--sd-color-neutral-200, 233 233 233)) /* Additional background color (light mode) on neutral-100
15
17
  Used for hover interaction */);
@@ -18,10 +20,11 @@ $sd-backgroundColor-neutral-400: (rgb(var(--sd-color-neutral-400, 195 195 195))
18
20
  $sd-backgroundColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
19
21
  $sd-backgroundColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
20
22
  $sd-backgroundColor-neutral-800: (rgb(var(--sd-color-neutral-800, 81 81 81)) /* Used for badge */);
21
- $sd-backgroundColor-success: (rgb(var(--sd-color-success, 67 176 42)) /* Used for notifications */);
22
- $sd-backgroundColor-error: (rgb(var(--sd-color-error, 204 25 55)) /* Used for notifications, badges, toolbar timer */);
23
- $sd-backgroundColor-info: (rgb(var(--sd-color-info, 21 130 213)) /* Used for notification */);
24
- $sd-backgroundColor-warning: (rgb(var(--sd-color-warning, 187 141 32)) /* Used for notification */);
23
+ $sd-backgroundColor-success: (rgb(var(--sd-color-success, 54 123 40)) /* Used for notifications */);
24
+ $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 */);
27
+ $sd-backgroundColor-warning: (rgb(var(--sd-color-warning, 187 141 32)) /* Used for notifications */);
25
28
  $sd-backgroundColor-transparent: transparent;
26
29
  $sd-backgroundColor-inherit: inherit;
27
30
  $sd-backgroundColor-current: currentColor;
@@ -33,8 +36,8 @@ $sd-borderColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /* Us
33
36
  $sd-borderColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
34
37
  $sd-borderColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Used for buttons, select field, focus state */);
35
38
  $sd-borderColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Used for buttons */);
36
- $sd-borderColor-accent-300: (rgb(var(--sd-color-accent-300, 108 194 84)) /* Used for radio hover states */);
37
- $sd-borderColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 67 176 42)) /* Used for brand-shape
39
+ $sd-borderColor-accent-550: (rgb(var(--sd-color-accent-550, 54 123 40)) /* Used for hover interaction */);
40
+ $sd-borderColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 45 157 0)) /* Used for brand-shape
38
41
  */);
39
42
  $sd-borderColor-neutral-200: (rgb(var(--sd-color-neutral-200, 233 233 233)) /* Used for spinner */);
40
43
  $sd-borderColor-neutral-300: (rgb(var(--sd-color-neutral-300, 218 218 218)));
@@ -43,9 +46,9 @@ Used for divider, teaser, container, ... */);
43
46
  $sd-borderColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
44
47
  $sd-borderColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
45
48
  $sd-borderColor-neutral-800: (rgb(var(--sd-color-neutral-800, 81 81 81)) /* Used for form fields, switch, radio, checkbox */);
46
- $sd-borderColor-success: (rgb(var(--sd-color-success, 67 176 42)) /* Used for valid form fields
49
+ $sd-borderColor-success: (rgb(var(--sd-color-success, 54 123 40)) /* Used for valid form fields
47
50
  */);
48
- $sd-borderColor-error-400: (rgb(var(--sd-color-error-400, 172 25 56)) /* Used for hover states of invalid form elements */);
51
+ $sd-borderColor-error-400: (rgb(var(--sd-color-error-400, 172 25 56)) /* Used for hover interaction invalid form elements */);
49
52
  $sd-borderColor-error-DEFAULT: (rgb(var(--sd-color-error, 204 25 55)) /* Used for invalid form fields */);
50
53
  $sd-borderColor-transparent: transparent;
51
54
  $sd-borderColor-inherit: inherit;
@@ -100,6 +103,7 @@ $sd-spacing-24: (var(--sd-spacing-24, 6rem) /* 96px */);
100
103
  $sd-spacing-32: (var(--sd-spacing-32, 8rem) /* 128px */);
101
104
  $sd-spacing-40: (var(--sd-spacing-40, 10rem) /* 160px */);
102
105
  $sd-spacing-0\.5: (var(--sd-spacing-0-5, 0.125rem) /* 2px */);
106
+ $sd-spacing-1\.5: (var(--sd-spacing-1-5, 0.375rem));
103
107
  $sd-spacing-auto: (var(--sd-spacing-auto, auto) /* Automatic spacing (manually added) */);
104
108
  $sd-spacing-2\.5: (var(--sd-spacing-2-5, 0.625rem) /* 10px */);
105
109
 
@@ -112,11 +116,11 @@ $sd-textColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /* Used
112
116
  $sd-textColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
113
117
  $sd-textColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Primary brand color for text */);
114
118
  $sd-textColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Inverted text color */);
115
- $sd-textColor-accent: (rgb(var(--sd-color-accent, 67 176 42)) /* Accent brand color for highlighted text */);
119
+ $sd-textColor-accent: (rgb(var(--sd-color-accent, 45 157 0)) /* Accent brand color for highlighted text */);
116
120
  $sd-textColor-neutral-500: (rgb(var(--sd-color-neutral-500, 174 174 174)) /* Used for disabled state */);
117
121
  $sd-textColor-neutral-600: (rgb(var(--sd-color-neutral-600, 136 136 136)) /* Used for inverted disabled state */);
118
122
  $sd-textColor-neutral-700: (rgb(var(--sd-color-neutral-700, 104 104 104)) /* Additional text color */);
119
- $sd-textColor-success: (rgb(var(--sd-color-success, 67 176 42)) /* Used for success messages */);
123
+ $sd-textColor-success: (rgb(var(--sd-color-success, 54 123 40)) /* Used for success messages */);
120
124
  $sd-textColor-error: (rgb(var(--sd-color-error, 204 25 55)) /* Used for error messages */);
121
125
  $sd-textColor-transparent: transparent;
122
126
  $sd-textColor-inherit: inherit;
package/dist/tokens.tailwind.json CHANGED
@@ -10,13 +10,13 @@
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, 67 176 42) / <alpha-value>) /* Accent brand color for highlighted text */",
13
+ "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Accent brand color for highlighted text */",
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
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
19
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
20
20
  "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
21
21
  "transparent": "transparent",
22
22
  "inherit": "inherit",
@@ -33,9 +33,11 @@
33
33
  },
34
34
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) */",
35
35
  "accent": {
36
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for hover interaction */",
37
- "500": "rgb(var(--sd-color-accent-500, 66 147 50) / <alpha-value>) /* Used for pressed interaction */",
38
- "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for cta-button background */"
36
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
37
+ "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
38
+ "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
39
+ "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for pressed interaction */",
40
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for checkbox, switch */"
39
41
  },
40
42
  "neutral": {
41
43
  "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
@@ -46,10 +48,13 @@
46
48
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
47
49
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
48
50
  },
49
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for notifications */",
50
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */",
51
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification */",
52
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notification */",
51
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for notifications */",
52
+ "error": {
53
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
54
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
55
+ },
56
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
57
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
53
58
  "transparent": "transparent",
54
59
  "inherit": "inherit",
55
60
  "current": "currentColor"
@@ -65,8 +70,8 @@
65
70
  },
66
71
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
67
72
  "accent": {
68
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for radio hover states */",
69
- "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for brand-shape\n */"
73
+ "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
74
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for brand-shape\n */"
70
75
  },
71
76
  "neutral": {
72
77
  "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
@@ -76,9 +81,9 @@
76
81
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
77
82
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
78
83
  },
79
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for valid form fields\n */",
84
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for valid form fields\n */",
80
85
  "error": {
81
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover states of invalid form elements */",
86
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
82
87
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
83
88
  },
84
89
  "transparent": "transparent",
@@ -104,9 +109,11 @@
104
109
  },
105
110
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) */",
106
111
  "accent": {
107
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for hover interaction */",
108
- "500": "rgb(var(--sd-color-accent-500, 66 147 50) / <alpha-value>) /* Used for pressed interaction */",
109
- "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for cta-button background */"
112
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
113
+ "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
114
+ "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
115
+ "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for pressed interaction */",
116
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for checkbox, switch */"
110
117
  },
111
118
  "neutral": {
112
119
  "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
@@ -117,10 +124,13 @@
117
124
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
118
125
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
119
126
  },
120
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for notifications */",
121
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */",
122
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification */",
123
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notification */",
127
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for notifications */",
128
+ "error": {
129
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
130
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
131
+ },
132
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
133
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
124
134
  "transparent": "transparent",
125
135
  "inherit": "inherit",
126
136
  "current": "currentColor"
@@ -136,13 +146,13 @@
136
146
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
137
147
  },
138
148
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
139
- "accent": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Accent brand color for highlighted text */",
149
+ "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Accent brand color for highlighted text */",
140
150
  "neutral": {
141
151
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
142
152
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
143
153
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
144
154
  },
145
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
155
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
146
156
  "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
147
157
  "transparent": "transparent",
148
158
  "inherit": "inherit",
@@ -159,8 +169,8 @@
159
169
  },
160
170
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted icon color */",
161
171
  "accent": {
162
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for hover states */",
163
- "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for active / selected elements */"
172
+ "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
173
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for active / selected elements */"
164
174
  },
165
175
  "neutral": {
166
176
  "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for */",
@@ -169,9 +179,9 @@
169
179
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
170
180
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for switch */"
171
181
  },
172
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
182
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
173
183
  "error": {
174
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover states of invalid form elements\n */",
184
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements\n */",
175
185
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages\n */"
176
186
  },
177
187
  "risk": {
@@ -211,9 +221,11 @@
211
221
  },
212
222
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) */",
213
223
  "accent": {
214
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for hover interaction */",
215
- "500": "rgb(var(--sd-color-accent-500, 66 147 50) / <alpha-value>) /* Used for pressed interaction */",
216
- "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for cta-button background */"
224
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
225
+ "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
226
+ "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
227
+ "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for pressed interaction */",
228
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for checkbox, switch */"
217
229
  },
218
230
  "neutral": {
219
231
  "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
@@ -224,10 +236,13 @@
224
236
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
225
237
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
226
238
  },
227
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for notifications */",
228
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */",
229
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification */",
230
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notification */",
239
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for notifications */",
240
+ "error": {
241
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
242
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
243
+ },
244
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
245
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
231
246
  "transparent": "transparent",
232
247
  "inherit": "inherit",
233
248
  "current": "currentColor"
@@ -260,8 +275,8 @@
260
275
  },
261
276
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
262
277
  "accent": {
263
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for radio hover states */",
264
- "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for brand-shape\n */"
278
+ "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
279
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for brand-shape\n */"
265
280
  },
266
281
  "neutral": {
267
282
  "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
@@ -271,9 +286,9 @@
271
286
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
272
287
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
273
288
  },
274
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for valid form fields\n */",
289
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for valid form fields\n */",
275
290
  "error": {
276
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover states of invalid form elements */",
291
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
277
292
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
278
293
  },
279
294
  "transparent": "transparent",
@@ -291,13 +306,13 @@
291
306
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
292
307
  },
293
308
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
294
- "accent": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Accent brand color for highlighted text */",
309
+ "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Accent brand color for highlighted text */",
295
310
  "neutral": {
296
311
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
297
312
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
298
313
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
299
314
  },
300
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
315
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
301
316
  "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
302
317
  "transparent": "transparent",
303
318
  "inherit": "inherit",
@@ -314,8 +329,8 @@
314
329
  },
315
330
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
316
331
  "accent": {
317
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for radio hover states */",
318
- "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for brand-shape\n */"
332
+ "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
333
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for brand-shape\n */"
319
334
  },
320
335
  "neutral": {
321
336
  "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
@@ -325,9 +340,9 @@
325
340
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
326
341
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
327
342
  },
328
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for valid form fields\n */",
343
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for valid form fields\n */",
329
344
  "error": {
330
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover states of invalid form elements */",
345
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
331
346
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
332
347
  },
333
348
  "transparent": "transparent",
@@ -345,9 +360,11 @@
345
360
  },
346
361
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) */",
347
362
  "accent": {
348
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for hover interaction */",
349
- "500": "rgb(var(--sd-color-accent-500, 66 147 50) / <alpha-value>) /* Used for pressed interaction */",
350
- "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for cta-button background */"
363
+ "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
364
+ "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
365
+ "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
366
+ "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for pressed interaction */",
367
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for checkbox, switch */"
351
368
  },
352
369
  "neutral": {
353
370
  "100": "rgb(var(--sd-color-neutral-100, 246 246 246) / <alpha-value>) /* Additional background color (light mode) */",
@@ -358,10 +375,13 @@
358
375
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
359
376
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for badge */"
360
377
  },
361
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for notifications */",
362
- "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */",
363
- "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notification */",
364
- "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notification */",
378
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for notifications */",
379
+ "error": {
380
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
381
+ "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for notifications, badges, toolbar timer */"
382
+ },
383
+ "info": "rgb(var(--sd-color-info, 21 130 213) / <alpha-value>) /* Used for notifications */",
384
+ "warning": "rgb(var(--sd-color-warning, 187 141 32) / <alpha-value>) /* Used for notifications */",
365
385
  "transparent": "transparent",
366
386
  "inherit": "inherit",
367
387
  "current": "currentColor"
@@ -383,6 +403,7 @@
383
403
  "32": "var(--sd-spacing-32, 8rem) /* 128px */",
384
404
  "40": "var(--sd-spacing-40, 10rem) /* 160px */",
385
405
  "0.5": "var(--sd-spacing-0-5, 0.125rem) /* 2px */",
406
+ "1.5": "var(--sd-spacing-1-5, 0.375rem)",
386
407
  "auto": "var(--sd-spacing-auto, auto) /* Automatic spacing (manually added) */",
387
408
  "2.5": "var(--sd-spacing-2-5, 0.625rem) /* 10px */"
388
409
  },
@@ -403,6 +424,7 @@
403
424
  "32": "var(--sd-spacing-32, 8rem) /* 128px */",
404
425
  "40": "var(--sd-spacing-40, 10rem) /* 160px */",
405
426
  "0.5": "var(--sd-spacing-0-5, 0.125rem) /* 2px */",
427
+ "1.5": "var(--sd-spacing-1-5, 0.375rem)",
406
428
  "auto": "var(--sd-spacing-auto, auto) /* Automatic spacing (manually added) */",
407
429
  "2.5": "var(--sd-spacing-2-5, 0.625rem) /* 10px */"
408
430
  },
@@ -417,8 +439,8 @@
417
439
  },
418
440
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons */",
419
441
  "accent": {
420
- "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for radio hover states */",
421
- "DEFAULT": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Used for brand-shape\n */"
442
+ "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
443
+ "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used for brand-shape\n */"
422
444
  },
423
445
  "neutral": {
424
446
  "200": "rgb(var(--sd-color-neutral-200, 233 233 233) / <alpha-value>) /* Used for spinner */",
@@ -428,9 +450,9 @@
428
450
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
429
451
  "800": "rgb(var(--sd-color-neutral-800, 81 81 81) / <alpha-value>) /* Used for form fields, switch, radio, checkbox */"
430
452
  },
431
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for valid form fields\n */",
453
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for valid form fields\n */",
432
454
  "error": {
433
- "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover states of invalid form elements */",
455
+ "400": "rgb(var(--sd-color-error-400, 172 25 56) / <alpha-value>) /* Used for hover interaction invalid form elements */",
434
456
  "DEFAULT": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for invalid form fields */"
435
457
  },
436
458
  "transparent": "transparent",
@@ -449,13 +471,13 @@
449
471
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
450
472
  },
451
473
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
452
- "accent": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Accent brand color for highlighted text */",
474
+ "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Accent brand color for highlighted text */",
453
475
  "neutral": {
454
476
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
455
477
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
456
478
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
457
479
  },
458
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
480
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
459
481
  "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
460
482
  "transparent": "transparent",
461
483
  "inherit": "inherit",
@@ -472,13 +494,13 @@
472
494
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Primary brand color for text */"
473
495
  },
474
496
  "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Inverted text color */",
475
- "accent": "rgb(var(--sd-color-accent, 67 176 42) / <alpha-value>) /* Accent brand color for highlighted text */",
497
+ "accent": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Accent brand color for highlighted text */",
476
498
  "neutral": {
477
499
  "500": "rgb(var(--sd-color-neutral-500, 174 174 174) / <alpha-value>) /* Used for disabled state */",
478
500
  "600": "rgb(var(--sd-color-neutral-600, 136 136 136) / <alpha-value>) /* Used for inverted disabled state */",
479
501
  "700": "rgb(var(--sd-color-neutral-700, 104 104 104) / <alpha-value>) /* Additional text color */"
480
502
  },
481
- "success": "rgb(var(--sd-color-success, 67 176 42) / <alpha-value>) /* Used for success messages */",
503
+ "success": "rgb(var(--sd-color-success, 54 123 40) / <alpha-value>) /* Used for success messages */",
482
504
  "error": "rgb(var(--sd-color-error, 204 25 55) / <alpha-value>) /* Used for error messages */",
483
505
  "transparent": "transparent",
484
506
  "inherit": "inherit",
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@solid-design-system/tokens",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "Solid Design System: Tokens",
5
5
  "main": "index.js",
6
6
  "scripts": {
7
7
  "build": "node scripts/build.mjs",
8
+ "verify": "pnpm build",
8
9
  "postversion": "pnpm build",
9
10
  "release": "semantic-release --tagFormat 'tokens/${version}' -e semantic-release-monorepo",
10
11
  "release.dry": "semantic-release -d --tagFormat 'tokens/${version}' -e semantic-release-monorepo"