suus-design-tokens 1.0.13 → 1.0.16

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 +241 -151
  2. package/dist/tokens.js +419 -133
  3. package/dist/tokens.json +572 -164
  4. package/package.json +3 -4
package/dist/tokens.css CHANGED
@@ -3,169 +3,259 @@
3
3
  */
4
4
 
5
5
  :root {
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-gray-brand-white: #ffffff;
12
- --colors-gray-brand-bright-gray: #eeeeee;
13
- --colors-gray-brand-light-gray: #dfdfdf;
14
- --colors-gray-brand-gray: #c2bfbf;
15
- --colors-gray-brand-dark-gray: #5b5a5a;
16
- --colors-gray-brand-black: #272727;
17
- --colors-gray-brand-white-transparent-40: rgba(255, 255, 255, 0.4);
18
- --colors-gray-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;
29
- --spacing-tiny: 8px;
30
- --spacing-small: 16px;
31
- --spacing-default: 24px;
32
- --spacing-large: 40px;
33
- --spacing-huge: 60px;
6
+ --color-green-bright: #e5fc5a;
7
+ --color-green-light: #d0e646;
8
+ --color-green-default: #afc33b;
9
+ --color-green-dark: #8fa02a;
10
+ --color-green-midnight: #5c6814;
11
+ --color-gold-bright: #f9db86;
12
+ --color-gold-light: #eec348;
13
+ --color-gold-default: #d9ab29;
14
+ --color-gold-dark: #b58f24;
15
+ --color-gold-midnight: #97771d;
16
+ --color-gray-white: #ffffff;
17
+ --color-gray-bright: #eeeeee;
18
+ --color-gray-light: #dfdfdf;
19
+ --color-gray-default: #c2bfbf;
20
+ --color-gray-midnight: #5b5a5a;
21
+ --color-gray-dark: #272727;
22
+ --color-gray-white-transparent-40: rgba(255, 255, 255, 0.4);
23
+ --color-gray-white-transparent-70: rgba(255, 255, 255, 0.7);
24
+ --color-states-error: #de6565;
25
+ --color-juice-sugarcane: #9bad30;
26
+ --color-juice-tamarind: #da8e33;
27
+ --color-juice-guava: #7b4e80;
28
+ --color-juice-icetea: #d83a4f;
29
+ --padding-8: 8px;
30
+ --padding-16: 16px;
31
+ --padding-24: 24px;
32
+ --padding-32: 32px;
33
+ --padding-40: 40px;
34
+ --padding-48: 48px;
35
+ --padding-56: 56px;
36
+ --padding-64: 64px;
34
37
  --radius-small: 8px;
35
38
  --radius-default: 16px;
36
39
  --radius-large: 24px;
37
40
  --radius-huge: 50px;
38
- --borders-thin: 0.5px;
39
- --borders-default: 1px;
40
- --borders-thick: 2px;
41
- --typeface-font-family-sans-serif: sora;
42
- --typeface-font-family-header: sora;
43
- --typeface-font-family-body: sora;
44
- --typeface-font-family-statement: sora;
45
- --typeface-font-family-form: sora;
41
+ --radius-round: 50px;
42
+ --border-thin: 0.5px;
43
+ --border-default: 1px;
44
+ --border-thick: 2px;
45
+ --shadow-elevation-default: [object Object];
46
+ --shadow-elevation-large: [object Object];
47
+ --typeface-font-family-sans-serif: Sora;
46
48
  --typeface-font-weight-regular-400: 400;
47
- --typeface-font-weight-regular-500: 500;
49
+ --typeface-font-weight-medium-500: 500;
48
50
  --typeface-font-weight-bold-700: 700;
49
51
  --typeface-font-size-small-16: 0.889rem;
50
52
  --typeface-font-size-default-20: 1.111rem;
51
53
  --typeface-font-size-large-24: 1.333rem;
54
+ --typeface-font-size-extra-large-36: 2rem;
52
55
  --typeface-font-size-huge-48: 2.667rem;
53
56
  --typeface-font-size-extra-huge-72: 4rem;
54
- --typeface-font-size-extra-large-36: 2rem;
55
57
  --typeface-letter-spacing-default: 0.006rem;
56
58
  --typeface-letter-spacing-large: 0.011rem;
57
- --typeface-line-height-default-120: 6.667rem;
58
- --typeface-line-height-large-150: 8.333rem;
59
- --colors-status-success: var(--colors-green-brand-primary);
60
- --colors-status-warning: var(--colors-gold-brand-secondary);
61
- --colors-status-info: var(--colors-green-brand-primary);
62
- --panel-background-transparent: var(--colors-gray-brand-white-transparent-70);
63
- --panel-background-white: var(--colors-gray-brand-white);
64
- --panel-background-gray: var(--colors-gray-brand-gray);
65
- --panel-background-gradient-top-left-green: var(--colors-green-brand-primary-light);
66
- --panel-background-gradient-bottom-right-green: var(--colors-green-brand-primary-midnight);
67
- --panel-background-gradient-top-left-white: var(--colors-gray-brand-white-transparent-70);
68
- --panel-background-gradient-bottom-right-white: var(--colors-gray-brand-white-transparent-40);
69
- --panel-text-title: var(--colors-green-brand-primary-dark);
70
- --panel-text-title-glassy: var(--colors-gray-brand-white);
71
- --panel-border-color: var(--colors-gray-brand-light-gray);
72
- --panel-border-width: var(--borders-default);
73
- --panel-radius-desktop: var(--radius-large);
74
- --panel-radius-mobile: var(--radius-small);
75
- --panel-padding-top-bottom-desktop: var(--spacing-large);
76
- --panel-padding-right-left-desktop: var(--spacing-large);
77
- --panel-padding-top-bottom-mobile: var(--spacing-default);
78
- --panel-padding-right-left-mobile: var(--spacing-default);
79
- --tile-background-default: var(--colors-gray-brand-white);
80
- --tile-text-title: var(--colors-gray-brand-dark-gray);
81
- --tile-text-content: var(--colors-gray-brand-dark-gray);
82
- --tile-border-color: var(--colors-gray-brand-gray);
83
- --tile-border-width-default: var(--borders-default);
84
- --tile-border-width-thick: var(--borders-thick);
85
- --tile-radius-default: var(--radius-default);
86
- --button-background-disabled: var(--colors-gray-brand-light-gray);
87
- --button-background-enabled: var(--colors-green-brand-primary);
88
- --button-background-enabled-gradient-from: var(--colors-green-brand-primary-light);
89
- --button-background-enabled-gradient-middle: var(--colors-green-brand-primary-dark);
90
- --button-background-enabled-gradient-to: var(--colors-green-brand-primary-midnight);
91
- --button-background-inverse: var(--colors-gray-brand-white);
92
- --button-background-hover: var(--colors-green-brand-primary-dark);
93
- --button-text-primary: var(--colors-gray-brand-white);
94
- --button-text-primary-disabled: var(--colors-gray-brand-gray);
95
- --button-text-secondary: var(--colors-green-brand-primary-dark);
96
- --button-text-secondary-disabled: var(--colors-green-brand-primary);
97
- --button-border-color-default: var(--colors-green-brand-primary);
98
- --button-border-color-disabled: var(--colors-gray-brand-gray);
99
- --button-border-color-selected: var(--colors-green-brand-primary-dark);
100
- --button-border-color-hover: var(--colors-green-brand-primary-dark);
101
- --button-border-width-default: var(--borders-default);
59
+ --typeface-line-height-default-120: 120%;
60
+ --typeface-line-height-large-150: 150%;
61
+ --color-states-success: var(--color-green-default);
62
+ --color-states-warning: var(--color-gold-default);
63
+ --color-states-info: var(--color-green-default);
64
+ --color-brand-bright: var(--color-green-bright);
65
+ --color-brand-light: var(--color-green-light);
66
+ --color-brand-default: var(--color-green-default);
67
+ --color-brand-dark: var(--color-green-dark);
68
+ --color-brand-midnight: var(--color-green-midnight);
69
+ --color-surface-light: var(--color-gray-white);
70
+ --color-surface-muted: var(--color-gray-bright);
71
+ --color-surface-glassy: var(--color-gray-white-transparent-70);
72
+ --color-surface-gradient-from: var(--color-green-light);
73
+ --color-surface-gradient-to: var(--color-green-midnight);
74
+ --color-text-dark: var(--color-gray-dark);
75
+ --color-text-light: var(--color-gray-white);
76
+ --color-text-muted: var(--color-gray-midnight);
77
+ --color-text-disabled: var(--color-gray-default);
78
+ --color-text-placeholder: var(--color-gray-default);
79
+ --color-border-default: var(--color-gray-light);
80
+ --color-border-strong: var(--color-gray-default);
81
+ --color-border-focus: var(--color-green-default);
82
+ --color-status-error: var(--color-states-error);
83
+ --typeface-font-family-header: var(--typeface-font-family-sans-serif);
84
+ --typeface-font-family-body: var(--typeface-font-family-sans-serif);
85
+ --typeface-font-family-statement: var(--typeface-font-family-sans-serif);
86
+ --typeface-font-family-form: var(--typeface-font-family-sans-serif);
87
+ --mode-panel-radius: var(--radius-large);
88
+ --mode-panel-padding: var(--padding-64);
89
+ --mode-tile-radius: var(--radius-small);
90
+ --mode-tile-padding: var(--padding-56);
91
+ --panel-background-gradient-top-left-green: var(--color-green-light);
92
+ --panel-background-gradient-bottom-right-green: var(--color-green-midnight);
93
+ --panel-background-gradient-top-left-white: var(--color-gray-white-transparent-70);
94
+ --panel-background-gradient-bottom-right-white: var(--color-gray-white-transparent-40);
95
+ --panel-text-title: var(--color-green-dark);
96
+ --panel-border-width: var(--border-default);
97
+ --tile-default-shadow-default: var(--shadow-elevation-default);
98
+ --tile-default-shadow-hover: var(--shadow-elevation-large);
99
+ --tile-glassy-background-hover: var(--color-gray-white-transparent-40);
100
+ --tile-glassy-text-muted: var(--color-gray-light);
101
+ --tile-glassy-border-color-default: var(--color-gray-white-transparent-70);
102
+ --tile-glassy-border-color-hover: var(--color-gray-white);
103
+ --tile-glassy-shadow-default: var(--shadow-elevation-default);
104
+ --tile-glassy-shadow-hover: var(--shadow-elevation-large);
105
+ --tile-border-width-default: var(--border-default);
106
+ --tile-border-width-thick: var(--border-thick);
107
+ --button-primary-background-enabled: var(--color-green-default);
108
+ --button-primary-background-enabled-gradient-from: var(--color-green-light);
109
+ --button-primary-background-enabled-gradient-to: var(--color-green-midnight);
110
+ --button-primary-background-hover: var(--color-green-dark);
111
+ --button-primary-background-disabled: var(--color-gray-light);
112
+ --button-primary-border-color-default: var(--color-green-default);
113
+ --button-primary-border-color-disabled: var(--color-gray-default);
114
+ --button-primary-border-color-selected: var(--color-green-dark);
115
+ --button-primary-border-color-hover: var(--color-green-dark);
116
+ --button-primary-shadow-default: var(--shadow-elevation-default);
117
+ --button-primary-shadow-hover: var(--shadow-elevation-large);
118
+ --button-secondary-background-enabled: var(--color-gray-white);
119
+ --button-secondary-background-disabled: var(--color-gray-bright);
120
+ --button-secondary-background-hover: var(--color-gray-bright);
121
+ --button-secondary-text-default: var(--color-green-dark);
122
+ --button-secondary-icon-default: var(--color-green-dark);
123
+ --button-secondary-border-color-default: var(--color-green-default);
124
+ --button-secondary-border-color-disabled: var(--color-gray-default);
125
+ --button-secondary-border-color-selected: var(--color-green-dark);
126
+ --button-secondary-border-color-hover: var(--color-green-dark);
127
+ --button-secondary-shadow-default: var(--shadow-elevation-default);
128
+ --button-secondary-shadow-hover: var(--shadow-elevation-large);
102
129
  --button-radius: var(--radius-huge);
103
- --form-background-white: var(--colors-gray-brand-white);
104
- --form-background-glassy: var(--colors-gray-brand-white-transparent-40);
105
- --form-background-disabled: var(--colors-gray-brand-bright-gray);
106
- --form-background-gray: var(--colors-gray-brand-light-gray);
107
- --form-border-color-disabled: var(--colors-gray-brand-light-gray);
108
- --form-border-color-selected-dark: var(--colors-green-brand-primary-dark);
109
- --form-border-color-error: var(--colors-status-error);
110
- --form-border-color-default: var(--colors-green-brand-primary-dark);
111
- --form-border-color-selected-glassy: var(--colors-gray-brand-white);
112
- --form-border-color-selected-light: var(--colors-green-brand-primary);
113
- --form-border-width-default: var(--borders-default);
114
- --form-border-width-selected: var(--borders-default);
115
- --form-radius-default: var(--radius-default);
116
- --form-text-label: var(--colors-gray-brand-dark-gray);
117
- --form-text-placeholder: var(--colors-gray-brand-gray);
118
- --form-text-content: var(--colors-gray-brand-dark-gray);
119
- --form-text-disabled: var(--colors-gray-brand-light-gray);
120
- --form-text-error: var(--colors-status-error);
121
- --form-text-label-glassy: var(--colors-gray-brand-white);
122
- --form-text-placeholder-glassy: var(--colors-gray-brand-light-gray);
123
- --form-text-content-glassy: var(--colors-gray-brand-white);
124
- --snackbar-background-error: var(--colors-status-error);
125
- --snackbar-border-color-error: var(--colors-status-error);
126
- --snackbar-border-width-default: var(--borders-thick);
127
- --snackbar-text-default: var(--colors-gray-brand-white);
128
- --icon-inverse-selected: var(--colors-green-brand-primary-dark);
129
- --icon-default: var(--colors-green-brand-primary-dark);
130
- --icon-inverse: var(--colors-gray-brand-white);
131
- --icon-default-selected: var(--colors-gray-brand-white);
132
- --icon-text-default: var(--colors-green-brand-primary-dark);
133
- --icon-text-glassy: var(--colors-gray-brand-white);
134
- --text-title-default: var(--colors-gray-brand-dark-gray);
135
- --text-title-glassy: var(--colors-gray-brand-white);
136
- --text-content-text: var(--colors-gray-brand-dark-gray);
137
- --text-content-text-light: var(--colors-gray-brand-light-gray);
138
- --text-content-text-white: var(--colors-gray-brand-white);
139
- --text-messages-error: var(--colors-status-error);
140
- --menu-hover: var(--colors-green-brand-primary-light);
141
- --menu-text-selected: var(--colors-green-brand-primary-light);
142
- --menu-flyout-gradient-to: var(--colors-green-brand-primary-midnight);
143
- --menu-flyout-gradient-from: var(--colors-green-brand-primary-light);
144
- --menu-background: var(--colors-gray-brand-white);
145
- --menu-dark: var(--colors-green-brand-primary-midnight);
146
- --illustrations-default: var(--colors-green-brand-primary);
147
- --illustrations-light: var(--colors-green-brand-primary-bright);
148
- --stepper-dot: var(--colors-green-brand-primary);
149
- --stepper-border-dot: var(--colors-gray-brand-light-gray);
150
- --stepper-border-dot-selected: var(--colors-green-brand-primary-dark);
151
- --stepper-line: var(--colors-green-brand-primary);
152
- --stepper-line-disabled: var(--colors-gray-brand-light-gray);
153
- --form-border-color-success: var(--colors-status-success);
154
- --form-border-color-warning: var(--colors-status-warning);
155
- --form-text-success: var(--colors-status-success);
156
- --form-text-warning: var(--colors-status-warning);
157
- --form-text-info: var(--colors-status-info);
158
- --snackbar-background-warning: var(--colors-status-warning);
159
- --snackbar-background-info: var(--colors-status-info);
160
- --snackbar-background-success: var(--colors-status-success);
161
- --snackbar-border-color-success: var(--colors-status-success);
162
- --snackbar-border-color-warning: var(--colors-status-warning);
163
- --snackbar-border-color-info: var(--colors-status-info);
164
- --icon-disabled: var(--form-text-disabled);
165
- --text-messages-info: var(--colors-status-info);
166
- --text-messages-warning: var(--colors-status-warning);
167
- --text-messages-success: var(--colors-status-success);
168
- --menu-white: var(--form-text-label-glassy);
169
- --stepper-label: var(--form-text-label);
170
- --stepper-dot-number: var(--text-content-text-white);
130
+ --button-border-width: var(--border-default);
131
+ --button-gap-default: var(--padding-8);
132
+ --button-padding-top: var(--padding-8);
133
+ --button-padding-bottom: var(--padding-8);
134
+ --button-padding-left: var(--padding-32);
135
+ --button-padding-right: var(--padding-40);
136
+ --form-default-background-enabled: var(--color-gray-white);
137
+ --form-default-background-disabled: var(--color-gray-bright);
138
+ --form-default-border-color-disabled: var(--color-gray-light);
139
+ --form-glassy-background-enabled: var(--color-gray-white-transparent-40);
140
+ --form-glassy-background-disabled: var(--color-gray-bright);
141
+ --form-glassy-text-placeholder: var(--color-gray-light);
142
+ --form-glassy-border-color-enabled: var(--color-gray-white-transparent-70);
143
+ --form-glassy-border-color-selected: var(--color-gray-white);
144
+ --form-glassy-border-color-disabled: var(--color-gray-light);
145
+ --form-radius: var(--radius-default);
146
+ --form-border-width-default: var(--border-default);
147
+ --form-border-width-selected: var(--border-thick);
148
+ --snackbar-border-width: var(--border-thick);
149
+ --icon-color-selected: var(--color-green-dark);
150
+ --menu-text-hover: var(--color-green-light);
151
+ --menu-text-selected: var(--color-green-light);
152
+ --menu-background-flyout-gradient-from: var(--color-green-light);
153
+ --menu-background-flyout-gradient-to: var(--color-green-midnight);
154
+ --illustrations-default: var(--color-green-default);
155
+ --illustrations-light: var(--color-green-bright);
156
+ --stepper-dot: var(--color-green-default);
157
+ --stepper-border-dot: var(--color-gray-light);
158
+ --stepper-border-dot-selected: var(--color-green-dark);
159
+ --stepper-line: var(--color-green-default);
160
+ --stepper-line-disabled: var(--color-gray-light);
161
+ --chip-background-enabled: var(--color-gray-white);
162
+ --chip-background-disabled: var(--color-gray-bright);
163
+ --chip-background-hover: var(--color-gray-bright);
164
+ --chip-radius: var(--radius-round);
165
+ --chip-glassy-background-enabled: var(--color-gray-white);
166
+ --chip-glassy-background-disabled: var(--color-gray-bright);
167
+ --chip-glassy-background-hover: var(--color-gray-bright);
168
+ --color-status-success: var(--color-states-success);
169
+ --color-status-warning: var(--color-states-warning);
170
+ --color-status-info: var(--color-states-info);
171
+ --panel-background-transparent: var(--color-surface-glassy);
172
+ --panel-background-white: var(--color-surface-light);
173
+ --panel-background-gray: var(--color-surface-muted);
174
+ --panel-text-title-glassy: var(--color-text-light);
175
+ --panel-border-color: var(--color-border-default);
176
+ --panel-radius: var(--mode-panel-radius);
177
+ --panel-padding: var(--mode-panel-padding);
178
+ --tile-default-background-default: var(--color-surface-light);
179
+ --tile-default-background-hover: var(--color-surface-muted);
180
+ --tile-default-text-title: var(--color-text-dark);
181
+ --tile-default-text-content: var(--color-text-dark);
182
+ --tile-default-text-muted: var(--color-text-muted);
183
+ --tile-default-border-color-default: var(--color-border-strong);
184
+ --tile-default-border-color-hover: var(--color-border-focus);
185
+ --tile-glassy-background-default: var(--color-surface-glassy);
186
+ --tile-glassy-text-title: var(--color-text-light);
187
+ --tile-glassy-text-content: var(--color-text-light);
188
+ --tile-radius: var(--mode-tile-radius);
189
+ --tile-padding-default: var(--mode-tile-padding);
190
+ --button-primary-text-default: var(--color-text-light);
191
+ --button-primary-text-disabled: var(--color-text-disabled);
192
+ --button-primary-icon-default: var(--color-text-light);
193
+ --button-primary-icon-disabled: var(--color-text-disabled);
194
+ --button-secondary-text-disabled: var(--color-text-disabled);
195
+ --button-secondary-icon-disabled: var(--color-text-disabled);
196
+ --form-default-text-label: var(--color-text-dark);
197
+ --form-default-text-placeholder: var(--color-text-placeholder);
198
+ --form-default-text-content: var(--color-text-dark);
199
+ --form-default-border-color-enabled: var(--color-border-default);
200
+ --form-default-border-color-selected: var(--color-border-focus);
201
+ --form-glassy-text-label: var(--color-text-light);
202
+ --form-glassy-text-content: var(--color-text-light);
203
+ --form-message-error: var(--color-status-error);
204
+ --snackbar-info-text: var(--color-text-light);
205
+ --snackbar-warning-text: var(--color-text-light);
206
+ --snackbar-success-text: var(--color-text-light);
207
+ --snackbar-error-background: var(--color-status-error);
208
+ --snackbar-error-border: var(--color-status-error);
209
+ --snackbar-error-text: var(--color-text-light);
210
+ --icon-color-default: var(--color-text-dark);
211
+ --icon-color-inverse: var(--color-text-light);
212
+ --icon-color-selected-inverse: var(--color-text-light);
213
+ --icon-color-disabled: var(--color-text-disabled);
214
+ --text-title-default: var(--color-text-dark);
215
+ --text-title-glassy: var(--color-text-light);
216
+ --text-content-default: var(--color-text-dark);
217
+ --text-content-muted: var(--color-text-muted);
218
+ --text-content-light: var(--color-text-light);
219
+ --text-messages-error: var(--color-status-error);
220
+ --menu-text-white: var(--color-text-light);
221
+ --stepper-label: var(--color-text-dark);
222
+ --link-default-text-label: var(--color-brand-default);
223
+ --link-default-text-hover: var(--color-brand-dark);
224
+ --link-glassy-text-label: var(--color-text-light);
225
+ --link-glassy-text-hover: var(--color-text-dark);
226
+ --chip-text-color-default: var(--color-brand-default);
227
+ --chip-text-color-hover: var(--color-brand-dark);
228
+ --chip-border-color-default: var(--color-brand-default);
229
+ --chip-border-color-hover: var(--color-brand-dark);
230
+ --chip-glassy-text-color-default: var(--color-text-light);
231
+ --chip-glassy-text-color-hover: var(--color-text-dark);
232
+ --chip-glassy-border-color-default: var(--color-brand-default);
233
+ --chip-glassy-border-color-hover: var(--color-brand-dark);
234
+ --typography-heading-hero: var(--typeface-font-weight-bold-700) var(--typeface-font-size-extra-huge-72)/var(--typeface-line-height-default-120) var(--typeface-font-family-header);
235
+ --typography-heading-h1: var(--typeface-font-weight-bold-700) var(--typeface-font-size-huge-48)/var(--typeface-line-height-default-120) var(--typeface-font-family-header);
236
+ --typography-heading-h2: var(--typeface-font-weight-bold-700) var(--typeface-font-size-extra-large-36)/var(--typeface-line-height-default-120) var(--typeface-font-family-header);
237
+ --typography-heading-h3: var(--typeface-font-weight-bold-700) var(--typeface-font-size-large-24)/var(--typeface-line-height-default-120) var(--typeface-font-family-header);
238
+ --typography-body-default: var(--typeface-font-weight-regular-400) var(--typeface-font-size-default-20)/var(--typeface-line-height-large-150) var(--typeface-font-family-body);
239
+ --typography-body-small: var(--typeface-font-weight-regular-400) var(--typeface-font-size-small-16)/var(--typeface-line-height-large-150) var(--typeface-font-family-body);
240
+ --typography-body-strong: var(--typeface-font-weight-medium-500) var(--typeface-font-size-default-20)/var(--typeface-line-height-large-150) var(--typeface-font-family-body);
241
+ --typography-form-label: var(--typeface-font-weight-medium-500) var(--typeface-font-size-small-16)/var(--typeface-line-height-large-150) var(--typeface-font-family-form);
242
+ --typography-form-text: var(--typeface-font-weight-regular-400) var(--typeface-font-size-default-20)/var(--typeface-line-height-large-150) var(--typeface-font-family-form);
243
+ --typography-form-message: var(--typeface-font-weight-regular-400) var(--typeface-font-size-small-16)/var(--typeface-line-height-large-150) var(--typeface-font-family-form);
244
+ --typography-button-label: var(--typeface-font-weight-bold-700) var(--typeface-font-size-default-20)/var(--typeface-line-height-default-120) var(--typeface-font-family-body);
245
+ --typography-link-label: var(--typeface-font-weight-medium-500) var(--typeface-font-size-default-20)/var(--typeface-line-height-large-150) var(--typeface-font-family-body);
246
+ --typography-menu-default: var(--typeface-font-weight-medium-500) var(--typeface-font-size-default-20)/var(--typeface-line-height-large-150) var(--typeface-font-family-body);
247
+ --typography-menu-large: var(--typeface-font-weight-bold-700) var(--typeface-font-size-large-24)/var(--typeface-line-height-default-120) var(--typeface-font-family-body);
248
+ --form-message-success: var(--color-status-success);
249
+ --form-message-warning: var(--color-status-warning);
250
+ --form-message-info: var(--color-status-info);
251
+ --snackbar-info-background: var(--color-status-info);
252
+ --snackbar-info-border: var(--color-status-info);
253
+ --snackbar-warning-background: var(--color-status-warning);
254
+ --snackbar-warning-border: var(--color-status-warning);
255
+ --snackbar-success-background: var(--color-status-success);
256
+ --snackbar-success-border: var(--color-status-success);
257
+ --text-messages-info: var(--color-status-info);
258
+ --text-messages-warning: var(--color-status-warning);
259
+ --text-messages-success: var(--color-status-success);
260
+ --stepper-dot-number: var(--text-content-light);
171
261
  }