suus-design-tokens 1.0.2 → 1.0.5

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/dist/tokens.css +353 -91
  2. package/dist/tokens.js +353 -92
  3. package/dist/tokens.json +581 -127
  4. package/package.json +4 -3
package/dist/tokens.css CHANGED
@@ -3,98 +3,360 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --button-padding: 12px;
7
- --icon-size-small: 16px;
8
- --icon-size-medium: 24px;
9
- --icon-size-large: 32px;
10
- --tile-border-radius-small: 12px;
11
- --tile-border-radius-large: 24px;
12
- --tile-border-radius-huge: 100vw;
13
- --tile-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
14
- --border-width-thin: 0.5px;
15
- --border-width-default: 1px;
16
- --border-width-thick: 2px;
17
- --color-brand-primary-midnight: #5c6814;
18
- --color-brand-primary-dark: #8fa02a;
19
- --color-brand-primary-default: #afc33b;
20
- --color-brand-primary-light: #d1da96;
21
- --color-brand-primary-bright: #e7f880;
22
- --color-brand-secondary-midnight: #97771d;
23
- --color-brand-secondary-dark: #b58f24;
24
- --color-brand-secondary-default: #d9ab29;
25
- --color-brand-secondary-light: #eec348;
26
- --color-brand-secondary-bright: #f9db86;
27
- --color-brand-black: #272727;
28
- --color-brand-dark-gray: #5b5a5a;
29
- --color-brand-gray: #c2bfbf;
30
- --color-brand-light-gray: #e1e0df;
31
- --color-brand-white: #ffffff;
32
- --color-brand-light: #d6e66c;
33
- --color-product-sugarcane: #a7b325;
34
- --color-product-tamarind: #f8a702;
35
- --color-product-guava: #7441aa;
36
- --color-product-icetea: #e14a4a;
37
- --color-status-success: #99af17;
38
- --color-status-info: #6a7a0a;
39
- --color-status-warning: #f9db86;
40
- --color-status-error: #ea720e;
41
- --color-disabled: #cecece;
42
- --color-border-default: #cecece;
43
- --color-border-left-top: #cecece;
44
- --color-border-right-bottom: #b5b5b5;
45
- --color-hover-default: #bcca63;
46
- --color-hover-inverse: #f3f4f0;
47
- --radius-small: 8px;
48
- --radius-default: 16px;
49
- --radius-large: 24px;
50
- --radius-round: 100vw;
51
- --shadow-card: 0 18px 45px rgba(15, 23, 42, 0.12);
6
+ --colors-gold-brand-secondary-bright: #f9db86;
7
+ --colors-gold-brand-secondary-light: #eec348;
8
+ --colors-gold-brand-secondary: #d9ab29;
9
+ --colors-gold-brand-secondary-midnight: #97771d;
10
+ --colors-gold-brand-secondary-dark: #b58f24;
11
+ --colors-grey-brand-white: #ffffff;
12
+ --colors-grey-brand-bright-gray: #eeeeee;
13
+ --colors-grey-brand-light-gray: #dfdfdf;
14
+ --colors-grey-brand-gray: #c2bfbf;
15
+ --colors-grey-brand-dark-gray: #5b5a5a;
16
+ --colors-grey-brand-black: #272727;
17
+ --colors-grey-brand-white-transparent-40: rgba(255, 255, 255, 0.4);
18
+ --colors-grey-brand-white-transparent-70: rgba(255, 255, 255, 0.7);
19
+ --colors-status-error: #de6565;
20
+ --colors-green-brand-primary-bright: #e5fc5a;
21
+ --colors-green-brand-primary-light: #d0e646;
22
+ --colors-green-brand-primary: #afc33b;
23
+ --colors-green-brand-primary-dark: #8fa02a;
24
+ --colors-green-brand-primary-midnight: #5c6814;
25
+ --colors-juice-sugarcane: #9bad30;
26
+ --colors-juice-tamarind: #da8e33;
27
+ --colors-juice-guava: #7b4e80;
28
+ --colors-juice-icetea: #d83a4f;
52
29
  --spacing-tiny: 8px;
53
30
  --spacing-small: 16px;
54
31
  --spacing-default: 24px;
55
- --spacing-large: 32px;
56
- --spacing-huge: 40px;
57
- --spacing-very-huge: 60px;
58
- --breakpoint-smartphone: 480px;
59
- --breakpoint-tablet: 768px;
60
- --breakpoint-desktop: 1200px;
61
- --breakpoint-desktop-wide: 1600px;
62
- --font-family-sans-serif: OpenSans;
63
- --font-family-serif: Baskerville;
64
- --font-size-tiny: 14px;
65
- --font-size-small: 16px;
66
- --font-size-standard: 20px;
67
- --font-size-large: 24px;
68
- --font-size-title: 2rem;
69
- --font-size-subtitle: 1.3rem;
70
- --font-style-normal: normal;
71
- --font-style-italic: italic;
72
- --font-weight-light: 300;
73
- --font-weight-normal: 400;
74
- --font-weight-bold: 700;
75
- --font-letter-spacing-default: 0.016rem;
76
- --button-border-width: var(--border-width-default);
77
- --button-radius: var(--radius-round);
78
- --input-border-width: var(--border-width-default);
79
- --input-padding: var(--spacing-small);
80
- --input-radius: var(--radius-small);
81
- --input-background-color: var(--color-brand-white);
82
- --input-font-size: var(--font-size-small);
83
- --panel-background-color: var(--color-brand-light-gray);
84
- --panel-padding-desktop: var(--spacing-large);
85
- --panel-padding-mobile: var(--spacing-small);
86
- --tile-background-color-left-top: var(--color-brand-white);
87
- --tile-background-color-right-bottom: var(--color-brand-white);
88
- --tile-border-color-left-top: var(--color-border-default);
89
- --tile-border-color-right-bottom: var(--color-border-default);
90
- --tile-padding: var(--spacing-small);
91
- --color-text-dark: var(--color-brand-black);
92
- --color-text-light: var(--color-brand-white);
93
- --color-text-colored: var(--color-status-info);
94
- --color-link: var(--color-status-success);
95
- --icon-color-default: var(--color-text-dark);
96
- --icon-color-glassy: var(--color-text-light);
97
- --icon-color-text: var(--color-text-dark);
98
- --icon-color-text-glassy: var(--color-text-light);
99
- --input-text-color: var(--color-text-dark);
32
+ --spacing-large: 40px;
33
+ --spacing-huge: 60px;
34
+ --radius-small: 8px;
35
+ --radius-default: 16px;
36
+ --radius-large: 24px;
37
+ --radius-huge: 50px;
38
+ --borders-thin: 0.5px;
39
+ --borders-default: 1px;
40
+ --borders-thick: 2px;
41
+ --desktop-typeface-font-family-header: sora;
42
+ --desktop-typeface-font-family-body: sora;
43
+ --desktop-typeface-font-family-statement: sora;
44
+ --desktop-typeface-font-family-form: sora;
45
+ --desktop-typeface-font-weight-regular-400: regular;
46
+ --desktop-typeface-font-weight-bold-700: bold;
47
+ --desktop-typeface-font-weight-regular-500: semi bold;
48
+ --desktop-typeface-font-size-small-16: 0.889rem;
49
+ --desktop-typeface-font-size-default-20: 1.111rem;
50
+ --desktop-typeface-font-size-large-24: 1.333rem;
51
+ --desktop-typeface-font-size-huge-48: 2.667rem;
52
+ --desktop-typeface-font-size-extra-huge-72: 4rem;
53
+ --desktop-typeface-font-size-extra-large-36: 2rem;
54
+ --desktop-typeface-letter-spacing-default: 0.006rem;
55
+ --desktop-typeface-letter-spacing-large: 0.011rem;
56
+ --desktop-typeface-line-height-default-120: 6.667rem;
57
+ --desktop-typeface-line-height-large-150: 8.333rem;
58
+ --mobile-typeface-font-family-header: sora;
59
+ --mobile-typeface-font-family-body: sora;
60
+ --mobile-typeface-font-family-statement: sora;
61
+ --mobile-typeface-font-family-form: sora;
62
+ --mobile-typeface-font-weight-regular-400: regular;
63
+ --mobile-typeface-font-weight-bold-700: bold;
64
+ --mobile-typeface-font-weight-regular-500: semi bold;
65
+ --mobile-typeface-font-size-small-16: 0.778rem;
66
+ --mobile-typeface-font-size-default-20: 0.889rem;
67
+ --mobile-typeface-font-size-large-24: 1.111rem;
68
+ --mobile-typeface-font-size-huge-48: 1.778rem;
69
+ --mobile-typeface-font-size-extra-huge-72: 2.667rem;
70
+ --mobile-typeface-font-size-extra-large-36: 1.333rem;
71
+ --mobile-typeface-letter-spacing-default: 0.006rem;
72
+ --mobile-typeface-letter-spacing-large: 0.011rem;
73
+ --mobile-typeface-line-height-default-120: 6.667rem;
74
+ --mobile-typeface-line-height-large-150: 8.333rem;
75
+ --primitive-value-colors-gold-brand-secondary-bright: #f9db86;
76
+ --primitive-value-colors-gold-brand-secondary-light: #eec348;
77
+ --primitive-value-colors-gold-brand-secondary: #d9ab29;
78
+ --primitive-value-colors-gold-brand-secondary-midnight: #97771d;
79
+ --primitive-value-colors-gold-brand-secondary-dark: #b58f24;
80
+ --primitive-value-colors-grey-brand-white: #ffffff;
81
+ --primitive-value-colors-grey-brand-bright-gray: #eeeeee;
82
+ --primitive-value-colors-grey-brand-light-gray: #dfdfdf;
83
+ --primitive-value-colors-grey-brand-gray: #c2bfbf;
84
+ --primitive-value-colors-grey-brand-dark-gray: #5b5a5a;
85
+ --primitive-value-colors-grey-brand-black: #272727;
86
+ --primitive-value-colors-grey-brand-white-transparent-40: rgba(255, 255, 255, 0.4);
87
+ --primitive-value-colors-grey-brand-white-transparent-70: rgba(255, 255, 255, 0.7);
88
+ --primitive-value-colors-status-error: #de6565;
89
+ --primitive-value-colors-green-brand-primary-bright: #e5fc5a;
90
+ --primitive-value-colors-green-brand-primary-light: #d0e646;
91
+ --primitive-value-colors-green-brand-primary: #afc33b;
92
+ --primitive-value-colors-green-brand-primary-dark: #8fa02a;
93
+ --primitive-value-colors-green-brand-primary-midnight: #5c6814;
94
+ --primitive-value-colors-juice-sugarcane: #9bad30;
95
+ --primitive-value-colors-juice-tamarind: #da8e33;
96
+ --primitive-value-colors-juice-guava: #7b4e80;
97
+ --primitive-value-colors-juice-icetea: #d83a4f;
98
+ --primitive-value-spacing-tiny: 8px;
99
+ --primitive-value-spacing-small: 16px;
100
+ --primitive-value-spacing-default: 24px;
101
+ --primitive-value-spacing-large: 40px;
102
+ --primitive-value-spacing-huge: 60px;
103
+ --primitive-value-radius-small: 8px;
104
+ --primitive-value-radius-default: 16px;
105
+ --primitive-value-radius-large: 24px;
106
+ --primitive-value-radius-huge: 50px;
107
+ --primitive-value-borders-thin: 0.5px;
108
+ --primitive-value-borders-default: 1px;
109
+ --primitive-value-borders-thick: 2px;
110
+ --typography-desktop-typeface-font-family-header: sora;
111
+ --typography-desktop-typeface-font-family-body: sora;
112
+ --typography-desktop-typeface-font-family-statement: sora;
113
+ --typography-desktop-typeface-font-family-form: sora;
114
+ --typography-desktop-typeface-font-weight-regular-400: regular;
115
+ --typography-desktop-typeface-font-weight-bold-700: bold;
116
+ --typography-desktop-typeface-font-weight-regular-500: semi bold;
117
+ --typography-desktop-typeface-font-size-small-16: 0.889rem;
118
+ --typography-desktop-typeface-font-size-default-20: 1.111rem;
119
+ --typography-desktop-typeface-font-size-large-24: 1.333rem;
120
+ --typography-desktop-typeface-font-size-huge-48: 2.667rem;
121
+ --typography-desktop-typeface-font-size-extra-huge-72: 4rem;
122
+ --typography-desktop-typeface-font-size-extra-large-36: 2rem;
123
+ --typography-desktop-typeface-letter-spacing-default: 0.006rem;
124
+ --typography-desktop-typeface-letter-spacing-large: 0.011rem;
125
+ --typography-desktop-typeface-line-height-default-120: 6.667rem;
126
+ --typography-desktop-typeface-line-height-large-150: 8.333rem;
127
+ --typography-mobile-typeface-font-family-header: sora;
128
+ --typography-mobile-typeface-font-family-body: sora;
129
+ --typography-mobile-typeface-font-family-statement: sora;
130
+ --typography-mobile-typeface-font-family-form: sora;
131
+ --typography-mobile-typeface-font-weight-regular-400: regular;
132
+ --typography-mobile-typeface-font-weight-bold-700: bold;
133
+ --typography-mobile-typeface-font-weight-regular-500: semi bold;
134
+ --typography-mobile-typeface-font-size-small-16: 0.778rem;
135
+ --typography-mobile-typeface-font-size-default-20: 0.889rem;
136
+ --typography-mobile-typeface-font-size-large-24: 1.111rem;
137
+ --typography-mobile-typeface-font-size-huge-48: 1.778rem;
138
+ --typography-mobile-typeface-font-size-extra-huge-72: 2.667rem;
139
+ --typography-mobile-typeface-font-size-extra-large-36: 1.333rem;
140
+ --typography-mobile-typeface-letter-spacing-default: 0.006rem;
141
+ --typography-mobile-typeface-letter-spacing-large: 0.011rem;
142
+ --typography-mobile-typeface-line-height-default-120: 6.667rem;
143
+ --typography-mobile-typeface-line-height-large-150: 8.333rem;
144
+ --colors-status-success: var(--colors-green-brand-primary);
145
+ --colors-status-warning: var(--colors-gold-brand-secondary);
146
+ --colors-status-info: var(--colors-green-brand-primary);
147
+ --panel-background-transparent: var(--colors-grey-brand-white-transparent-70);
148
+ --panel-background-default: var(--colors-grey-brand-white);
149
+ --panel-background-gradient-bottom-right-green: var(--colors-green-brand-primary-midnight);
150
+ --panel-background-gradient-top-left-green: var(--colors-green-brand-primary-light);
151
+ --panel-background-gradient-top-left-white: var(--colors-grey-brand-white-transparent-70);
152
+ --panel-background-gradient-bottom-right-white: var(--colors-grey-brand-white-transparent-40);
153
+ --panel-background-gradient-middle-green: var(--colors-green-brand-primary-dark);
154
+ --panel-text-title: var(--colors-green-brand-primary-dark);
155
+ --panel-text-title-glassy: var(--colors-grey-brand-white);
156
+ --panel-border-color: var(--colors-grey-brand-light-gray);
157
+ --panel-border-width: var(--borders-default);
158
+ --panel-radius-default: var(--radius-large);
159
+ --panel-spacing-top-bottom: var(--spacing-huge);
160
+ --panel-spacing-title-content: var(--spacing-large);
161
+ --panel-spacing-right-left: var(--spacing-huge);
162
+ --tile-background-default: var(--colors-grey-brand-white);
163
+ --tile-text-title: var(--colors-grey-brand-dark-gray);
164
+ --tile-text-content: var(--colors-grey-brand-dark-gray);
165
+ --tile-border-color: var(--colors-grey-brand-gray);
166
+ --tile-border-width-default: var(--borders-default);
167
+ --tile-border-width-thick: var(--borders-thick);
168
+ --tile-radius-default: var(--radius-default);
169
+ --button-background-disabled: var(--colors-grey-brand-light-gray);
170
+ --button-background-enabled: var(--colors-green-brand-primary);
171
+ --button-background-enabled-gradient-from: var(--colors-green-brand-primary-light);
172
+ --button-background-enabled-gradient-middle: var(--colors-green-brand-primary-dark);
173
+ --button-background-enabled-gradient-to: var(--colors-green-brand-primary-midnight);
174
+ --button-background-inverse: var(--colors-grey-brand-white);
175
+ --button-background-hover: var(--colors-green-brand-primary-dark);
176
+ --button-text-label: var(--colors-grey-brand-white);
177
+ --button-text-label-inverse: var(--colors-green-brand-primary-dark);
178
+ --button-text-disabled: var(--colors-grey-brand-gray);
179
+ --button-border-color-default: var(--colors-green-brand-primary);
180
+ --button-border-color-disabled: var(--colors-grey-brand-gray);
181
+ --button-border-color-selected: var(--colors-green-brand-primary-dark);
182
+ --button-border-color-hover: var(--colors-green-brand-primary-dark);
183
+ --button-border-width-default: var(--borders-default);
184
+ --button-radius: var(--radius-huge);
185
+ --form-background-white: var(--colors-grey-brand-white);
186
+ --form-background-glassy: var(--colors-grey-brand-white-transparent-40);
187
+ --form-background-disabled: var(--colors-grey-brand-bright-gray);
188
+ --form-background-gray: var(--colors-grey-brand-light-gray);
189
+ --form-border-color-disabled: var(--colors-grey-brand-light-gray);
190
+ --form-border-color-selected-dark: var(--colors-green-brand-primary-dark);
191
+ --form-border-color-error: var(--colors-status-error);
192
+ --form-border-color-default: var(--colors-green-brand-primary-dark);
193
+ --form-border-color-selected-glassy: var(--colors-grey-brand-white);
194
+ --form-border-color-selected-light: var(--colors-green-brand-primary);
195
+ --form-border-width-default: var(--borders-default);
196
+ --form-border-width-selected: var(--borders-default);
197
+ --form-radius-default: var(--radius-default);
198
+ --form-text-label: var(--colors-grey-brand-dark-gray);
199
+ --form-text-placeholder: var(--colors-grey-brand-gray);
200
+ --form-text-content: var(--colors-grey-brand-dark-gray);
201
+ --form-text-disabled: var(--colors-grey-brand-light-gray);
202
+ --form-text-error: var(--colors-status-error);
203
+ --form-text-label-glassy: var(--colors-grey-brand-white);
204
+ --form-text-placeholder-glassy: var(--colors-grey-brand-light-gray);
205
+ --form-text-content-glassy: var(--colors-grey-brand-white);
206
+ --snackbar-background-error: var(--colors-status-error);
207
+ --snackbar-border-color-error: var(--colors-status-error);
208
+ --snackbar-border-width-default: var(--borders-thick);
209
+ --snackbar-text-default: var(--colors-grey-brand-white);
210
+ --icon-inverse-selected: var(--colors-green-brand-primary-dark);
211
+ --icon-default: var(--colors-green-brand-primary-dark);
212
+ --icon-inverse: var(--colors-grey-brand-white);
213
+ --icon-default-selected: var(--colors-grey-brand-white);
214
+ --icon-text-default: var(--colors-green-brand-primary-dark);
215
+ --icon-text-glassy: var(--colors-grey-brand-white);
216
+ --text-title-default: var(--colors-grey-brand-dark-gray);
217
+ --text-title-glassy: var(--colors-grey-brand-white);
218
+ --text-content-text: var(--colors-grey-brand-dark-gray);
219
+ --text-content-text-light: var(--colors-grey-brand-light-gray);
220
+ --text-content-text-white: var(--colors-grey-brand-white);
221
+ --text-messages-error: var(--colors-status-error);
222
+ --menu-hover: var(--colors-green-brand-primary-light);
223
+ --menu-text-selected: var(--colors-green-brand-primary-light);
224
+ --menu-flyout-gradient-to: var(--colors-green-brand-primary-midnight);
225
+ --menu-flyout-gradient-from: var(--colors-green-brand-primary-light);
226
+ --menu-background: var(--colors-grey-brand-white);
227
+ --menu-dark: var(--colors-green-brand-primary-midnight);
228
+ --illustrations-default: var(--colors-green-brand-primary);
229
+ --illustrations-light: var(--colors-green-brand-primary-bright);
230
+ --stepper-dot: var(--colors-green-brand-primary);
231
+ --stepper-border-dot: var(--colors-grey-brand-light-gray);
232
+ --stepper-border-dot-selected: var(--colors-green-brand-primary-dark);
233
+ --stepper-line: var(--colors-green-brand-primary);
234
+ --stepper-line-disabled: var(--colors-grey-brand-light-gray);
235
+ --primitive-value-colors-status-success: var(--colors-green-brand-primary);
236
+ --primitive-value-colors-status-warning: var(--colors-gold-brand-secondary);
237
+ --primitive-value-colors-status-info: var(--colors-green-brand-primary);
238
+ --semantic-value-panel-background-transparent: var(--colors-grey-brand-white-transparent-70);
239
+ --semantic-value-panel-background-default: var(--colors-grey-brand-white);
240
+ --semantic-value-panel-background-gradient-bottom-right-green: var(--colors-green-brand-primary-midnight);
241
+ --semantic-value-panel-background-gradient-top-left-green: var(--colors-green-brand-primary-light);
242
+ --semantic-value-panel-background-gradient-top-left-white: var(--colors-grey-brand-white-transparent-70);
243
+ --semantic-value-panel-background-gradient-bottom-right-white: var(--colors-grey-brand-white-transparent-40);
244
+ --semantic-value-panel-background-gradient-middle-green: var(--colors-green-brand-primary-dark);
245
+ --semantic-value-panel-text-title: var(--colors-green-brand-primary-dark);
246
+ --semantic-value-panel-text-title-glassy: var(--colors-grey-brand-white);
247
+ --semantic-value-panel-border-color: var(--colors-grey-brand-light-gray);
248
+ --semantic-value-panel-border-width: var(--borders-default);
249
+ --semantic-value-panel-radius-default: var(--radius-large);
250
+ --semantic-value-panel-spacing-top-bottom: var(--spacing-huge);
251
+ --semantic-value-panel-spacing-title-content: var(--spacing-large);
252
+ --semantic-value-panel-spacing-right-left: var(--spacing-huge);
253
+ --semantic-value-tile-background-default: var(--colors-grey-brand-white);
254
+ --semantic-value-tile-text-title: var(--colors-grey-brand-dark-gray);
255
+ --semantic-value-tile-text-content: var(--colors-grey-brand-dark-gray);
256
+ --semantic-value-tile-border-color: var(--colors-grey-brand-gray);
257
+ --semantic-value-tile-border-width-default: var(--borders-default);
258
+ --semantic-value-tile-border-width-thick: var(--borders-thick);
259
+ --semantic-value-tile-radius-default: var(--radius-default);
260
+ --semantic-value-button-background-disabled: var(--colors-grey-brand-light-gray);
261
+ --semantic-value-button-background-enabled: var(--colors-green-brand-primary);
262
+ --semantic-value-button-background-enabled-gradient-from: var(--colors-green-brand-primary-light);
263
+ --semantic-value-button-background-enabled-gradient-middle: var(--colors-green-brand-primary-dark);
264
+ --semantic-value-button-background-enabled-gradient-to: var(--colors-green-brand-primary-midnight);
265
+ --semantic-value-button-background-inverse: var(--colors-grey-brand-white);
266
+ --semantic-value-button-background-hover: var(--colors-green-brand-primary-dark);
267
+ --semantic-value-button-text-label: var(--colors-grey-brand-white);
268
+ --semantic-value-button-text-label-inverse: var(--colors-green-brand-primary-dark);
269
+ --semantic-value-button-text-disabled: var(--colors-grey-brand-gray);
270
+ --semantic-value-button-border-color-default: var(--colors-green-brand-primary);
271
+ --semantic-value-button-border-color-disabled: var(--colors-grey-brand-gray);
272
+ --semantic-value-button-border-color-selected: var(--colors-green-brand-primary-dark);
273
+ --semantic-value-button-border-color-hover: var(--colors-green-brand-primary-dark);
274
+ --semantic-value-button-border-width-default: var(--borders-default);
275
+ --semantic-value-button-radius: var(--radius-huge);
276
+ --semantic-value-form-background-white: var(--colors-grey-brand-white);
277
+ --semantic-value-form-background-glassy: var(--colors-grey-brand-white-transparent-40);
278
+ --semantic-value-form-background-disabled: var(--colors-grey-brand-bright-gray);
279
+ --semantic-value-form-background-gray: var(--colors-grey-brand-light-gray);
280
+ --semantic-value-form-border-color-disabled: var(--colors-grey-brand-light-gray);
281
+ --semantic-value-form-border-color-selected-dark: var(--colors-green-brand-primary-dark);
282
+ --semantic-value-form-border-color-error: var(--colors-status-error);
283
+ --semantic-value-form-border-color-default: var(--colors-green-brand-primary-dark);
284
+ --semantic-value-form-border-color-selected-glassy: var(--colors-grey-brand-white);
285
+ --semantic-value-form-border-color-selected-light: var(--colors-green-brand-primary);
286
+ --semantic-value-form-border-width-default: var(--borders-default);
287
+ --semantic-value-form-border-width-selected: var(--borders-default);
288
+ --semantic-value-form-radius-default: var(--radius-default);
289
+ --semantic-value-form-text-label: var(--colors-grey-brand-dark-gray);
290
+ --semantic-value-form-text-placeholder: var(--colors-grey-brand-gray);
291
+ --semantic-value-form-text-content: var(--colors-grey-brand-dark-gray);
292
+ --semantic-value-form-text-disabled: var(--colors-grey-brand-light-gray);
293
+ --semantic-value-form-text-error: var(--colors-status-error);
294
+ --semantic-value-form-text-label-glassy: var(--colors-grey-brand-white);
295
+ --semantic-value-form-text-placeholder-glassy: var(--colors-grey-brand-light-gray);
296
+ --semantic-value-form-text-content-glassy: var(--colors-grey-brand-white);
297
+ --semantic-value-snackbar-background-error: var(--colors-status-error);
298
+ --semantic-value-snackbar-border-color-error: var(--colors-status-error);
299
+ --semantic-value-snackbar-border-width-default: var(--borders-thick);
300
+ --semantic-value-snackbar-text-default: var(--colors-grey-brand-white);
301
+ --semantic-value-icon-inverse-selected: var(--colors-green-brand-primary-dark);
302
+ --semantic-value-icon-default: var(--colors-green-brand-primary-dark);
303
+ --semantic-value-icon-inverse: var(--colors-grey-brand-white);
304
+ --semantic-value-icon-default-selected: var(--colors-grey-brand-white);
305
+ --semantic-value-icon-text-default: var(--colors-green-brand-primary-dark);
306
+ --semantic-value-icon-text-glassy: var(--colors-grey-brand-white);
307
+ --semantic-value-text-title-default: var(--colors-grey-brand-dark-gray);
308
+ --semantic-value-text-title-glassy: var(--colors-grey-brand-white);
309
+ --semantic-value-text-content-text: var(--colors-grey-brand-dark-gray);
310
+ --semantic-value-text-content-text-light: var(--colors-grey-brand-light-gray);
311
+ --semantic-value-text-content-text-white: var(--colors-grey-brand-white);
312
+ --semantic-value-text-messages-error: var(--colors-status-error);
313
+ --semantic-value-menu-hover: var(--colors-green-brand-primary-light);
314
+ --semantic-value-menu-text-selected: var(--colors-green-brand-primary-light);
315
+ --semantic-value-menu-flyout-gradient-to: var(--colors-green-brand-primary-midnight);
316
+ --semantic-value-menu-flyout-gradient-from: var(--colors-green-brand-primary-light);
317
+ --semantic-value-menu-background: var(--colors-grey-brand-white);
318
+ --semantic-value-menu-dark: var(--colors-green-brand-primary-midnight);
319
+ --semantic-value-illustrations-default: var(--colors-green-brand-primary);
320
+ --semantic-value-illustrations-light: var(--colors-green-brand-primary-bright);
321
+ --semantic-value-stepper-dot: var(--colors-green-brand-primary);
322
+ --semantic-value-stepper-border-dot: var(--colors-grey-brand-light-gray);
323
+ --semantic-value-stepper-border-dot-selected: var(--colors-green-brand-primary-dark);
324
+ --semantic-value-stepper-line: var(--colors-green-brand-primary);
325
+ --semantic-value-stepper-line-disabled: var(--colors-grey-brand-light-gray);
326
+ --form-border-color-success: var(--colors-status-success);
327
+ --form-border-color-warning: var(--colors-status-warning);
328
+ --form-text-success: var(--colors-status-success);
329
+ --form-text-warning: var(--colors-status-warning);
330
+ --form-text-info: var(--colors-status-info);
331
+ --snackbar-background-warning: var(--colors-status-warning);
332
+ --snackbar-background-info: var(--colors-status-info);
333
+ --snackbar-background-success: var(--colors-status-success);
334
+ --snackbar-border-color-success: var(--colors-status-success);
335
+ --snackbar-border-color-warning: var(--colors-status-warning);
336
+ --snackbar-border-color-info: var(--colors-status-info);
337
+ --icon-disabled: var(--form-text-disabled);
338
+ --text-messages-info: var(--colors-status-info);
339
+ --text-messages-warning: var(--colors-status-warning);
340
+ --text-messages-success: var(--colors-status-success);
341
+ --menu-white: var(--form-text-label-glassy);
342
+ --stepper-label: var(--form-text-label);
343
+ --stepper-dot-number: var(--text-content-text-white);
344
+ --semantic-value-form-border-color-success: var(--colors-status-success);
345
+ --semantic-value-form-border-color-warning: var(--colors-status-warning);
346
+ --semantic-value-form-text-success: var(--colors-status-success);
347
+ --semantic-value-form-text-warning: var(--colors-status-warning);
348
+ --semantic-value-form-text-info: var(--colors-status-info);
349
+ --semantic-value-snackbar-background-warning: var(--colors-status-warning);
350
+ --semantic-value-snackbar-background-info: var(--colors-status-info);
351
+ --semantic-value-snackbar-background-success: var(--colors-status-success);
352
+ --semantic-value-snackbar-border-color-success: var(--colors-status-success);
353
+ --semantic-value-snackbar-border-color-warning: var(--colors-status-warning);
354
+ --semantic-value-snackbar-border-color-info: var(--colors-status-info);
355
+ --semantic-value-icon-disabled: var(--form-text-disabled);
356
+ --semantic-value-text-messages-info: var(--colors-status-info);
357
+ --semantic-value-text-messages-warning: var(--colors-status-warning);
358
+ --semantic-value-text-messages-success: var(--colors-status-success);
359
+ --semantic-value-menu-white: var(--form-text-label-glassy);
360
+ --semantic-value-stepper-label: var(--form-text-label);
361
+ --semantic-value-stepper-dot-number: var(--text-content-text-white);
100
362
  }