@nova-design-system/nova-base 3.0.0-beta.24 → 3.0.0-beta.27

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 (21) hide show
  1. package/dist/css/ocean.css +825 -841
  2. package/dist/css/spark.css +833 -849
  3. package/dist/js/ocean_dark.d.ts +278 -283
  4. package/dist/js/ocean_dark.js +278 -283
  5. package/dist/js/ocean_light.d.ts +278 -283
  6. package/dist/js/ocean_light.js +278 -283
  7. package/dist/js/primitives.d.ts +184 -190
  8. package/dist/js/primitives.js +186 -192
  9. package/dist/js/spacings.d.ts +193 -193
  10. package/dist/js/spacings.js +234 -234
  11. package/dist/js/spark_dark.d.ts +279 -284
  12. package/dist/js/spark_dark.js +279 -284
  13. package/dist/js/spark_light.d.ts +279 -284
  14. package/dist/js/spark_light.js +279 -284
  15. package/dist/tokens/ocean_dark.json +1526 -1516
  16. package/dist/tokens/ocean_light.json +1526 -1516
  17. package/dist/tokens/primitives.json +916 -756
  18. package/dist/tokens/spacings.json +849 -849
  19. package/dist/tokens/spark_dark.json +1530 -1519
  20. package/dist/tokens/spark_light.json +1529 -1519
  21. package/package.json +3 -2
package/dist/css/spark.css CHANGED
@@ -3,25 +3,46 @@
3
3
  */
4
4
 
5
5
  .dark:root {
6
- --components-tooltip-shadow-1: rgba(255, 255, 255, 0.15);
7
- --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
8
- --components-button-destructive-low-border: rgba(255, 255, 255, 0);
9
- --components-button-destructive-low-background: rgba(255, 255, 255, 0);
10
- --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
11
- --components-loader-white-background: rgba(255, 255, 255, 0.2);
6
+ --shadow-color-opacity-3: rgba(14, 14, 14, 0.32);
7
+ --shadow-color-opacity-2: rgba(14, 14, 14, 0.14);
8
+ --shadow-color-opacity-1: rgba(14, 14, 14, 0.09);
9
+ --shadow-color-opacity-0: rgba(255, 255, 255, 0.09);
10
+ --shadow-spread-2xl: -6px;
11
+ --shadow-spread-xl: -2px;
12
+ --shadow-spread-lg-2: 0px;
13
+ --shadow-spread-lg-1: 0px;
14
+ --shadow-y-axis-none: 0px;
15
+ --shadow-y-axis-2xl: 25px;
16
+ --shadow-y-axis-xl-2: 20px;
17
+ --shadow-y-axis-xl-1: 10px;
18
+ --shadow-y-axis-lg-2: 10px;
19
+ --shadow-y-axis-lg-1: 4px;
20
+ --shadow-y-axis-md-2: 4px;
21
+ --shadow-y-axis-md-1: 2px;
22
+ --shadow-y-axis-base: 1px;
23
+ --shadow-blur-2xl: 50px;
24
+ --shadow-blur-xl-2: 25px;
25
+ --shadow-blur-xl-1: 10px;
26
+ --shadow-blur-lg-2: 15px;
27
+ --shadow-blur-lg-1: 6px;
28
+ --shadow-blur-md-2: 6px;
29
+ --shadow-blur-md-1: 4px;
30
+ --shadow-blur-base-2: 2px;
31
+ --shadow-blur-base-1: 3px;
32
+ --components-list-native-border: #767578;
33
+ --components-list-native-separator: #838086;
34
+ --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
35
+ --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
12
36
  --components-list-native-item-background-title: rgba(255, 255, 255, 0);
13
37
  --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
14
38
  --components-list-native-item-background-hover: #4e7fdf;
15
39
  --components-list-native-item-background-default: rgba(255, 255, 255, 0);
16
- --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
17
- --components-list-native-border: #767578;
18
- --components-list-native-separator: #838086;
19
- --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
20
40
  --components-list-native-background: #565558;
41
+ --components-loader-white-background: rgba(255, 255, 255, 0.2);
21
42
  --components-form-opacity-disabled: 50px;
22
43
  --components-form-opacity-default: 100px;
23
- --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
24
- --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
44
+ --components-button-gras-complementary-border-hover: rgba(255, 255, 255, 0);
45
+ --components-button-gras-complementary-border: rgba(255, 255, 255, 0);
25
46
  --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
26
47
  --components-button-lower-border-2: rgba(255, 255, 255, 0);
27
48
  --components-button-lower-border-hover: rgba(255, 255, 255, 0);
@@ -33,50 +54,39 @@
33
54
  --components-button-low-background: rgba(255, 255, 255, 0);
34
55
  --components-button-high-border-hover: rgba(255, 255, 255, 0);
35
56
  --components-button-high-border: rgba(255, 255, 255, 0);
36
- --components-wpf-components-2: #ffffff;
37
- --shadow-y-axis-2xl: 25px;
38
- --shadow-y-axis-xl-2: 20px;
39
- --shadow-y-axis-xl-1: 10px;
40
- --shadow-y-axis-lg-2: 10px;
41
- --shadow-y-axis-lg-1: 4px;
42
- --shadow-y-axis-md-2: 4px;
43
- --shadow-y-axis-md-1: 2px;
44
- --shadow-y-axis-base: 1px;
45
- --shadow-y-axis-none: 0px;
46
- --shadow-spread-2xl: -6px;
47
- --shadow-spread-xl: -2px;
48
- --shadow-spread-lg-2: 0px;
49
- --shadow-spread-lg-1: 0px;
50
- --shadow-blur-2xl: 50px;
51
- --shadow-blur-xl-2: 25px;
52
- --shadow-blur-xl-1: 10px;
53
- --shadow-blur-lg-2: 15px;
54
- --shadow-blur-lg-1: 6px;
55
- --shadow-blur-md-2: 6px;
56
- --shadow-blur-md-1: 4px;
57
- --shadow-blur-base-2: 2px;
58
- --shadow-blur-base-1: 3px;
59
- --shadow-color-opacity-3: rgba(14, 14, 14, 0.32);
60
- --shadow-color-opacity-2: rgba(14, 14, 14, 0.14);
61
- --shadow-color-opacity-1: rgba(14, 14, 14, 0.09);
62
- --shadow-color-opacity-0: rgba(255, 255, 255, 0.09);
63
- --color-black: #000000;
64
- --color-white: #ffffff;
57
+ --components-button-destructive-low-border: rgba(255, 255, 255, 0);
58
+ --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
59
+ --components-button-destructive-low-background: rgba(255, 255, 255, 0);
60
+ --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
61
+ --color-color: #ffffff;
65
62
  --color-interaction-neutral-background-hover: rgba(255, 255, 255, 0.1);
66
63
  --color-interaction-neutral-background: rgba(255, 255, 255, 0);
67
64
  --color-interaction-brand-low-background: rgba(255, 255, 255, 0);
68
65
  --components-menu-contextual-item-background-hover: var(--color-interaction-neutral-background-hover);
69
66
  --components-menu-contextual-item-background: var(--color-interaction-neutral-background);
70
67
  --components-popover-background: var(--color-gray-spark-900);
71
- --components-avatar-color-background-1: var(--color-green-800);
72
68
  --components-tooltip-border: var(--color-gray-spark-50);
73
69
  --components-tooltip-background: var(--color-gray-spark-50);
74
- --components-button-destructive-high-icon-hover: var(--color-base-black);
75
- --components-button-destructive-high-icon: var(--color-base-black);
76
- --components-button-destructive-high-text-hover: var(--color-base-black);
77
- --components-button-destructive-high-text: var(--color-base-black);
78
- --components-button-destructive-high-background-hover: var(--color-status-red-400);
79
- --components-button-destructive-high-background: var(--color-status-red-500);
70
+ --components-list-custom-item-background-title: var(--color-interaction-neutral-background);
71
+ --components-list-custom-item-background-disabled: var(--color-interaction-neutral-background);
72
+ --components-list-custom-item-background-hover: var(--color-interaction-neutral-background-hover);
73
+ --components-list-custom-item-background-default: var(--color-interaction-neutral-background);
74
+ --components-list-native-item-content-hover: var(--color-base-white);
75
+ --components-list-native-item-content-default: var(--color-base-white);
76
+ --components-loader-white-foreground: var(--color-base-white);
77
+ --components-loader-brand-foreground: var(--color-orange-500);
78
+ --components-loader-brand-background: var(--color-orange-900);
79
+ --components-form-shape-background-hover: var(--color-gray-spark-350);
80
+ --components-form-shape-background-default: var(--color-gray-spark-400);
81
+ --components-form-shape-background-disabled: var(--color-gray-spark-700);
82
+ --components-form-shape-foreground-default: var(--color-base-white);
83
+ --components-button-gras-complementary-icon-hover: var(--color-base-white);
84
+ --components-button-gras-complementary-icon: var(--color-base-white);
85
+ --components-button-gras-complementary-text-hover: var(--color-base-white);
86
+ --components-button-gras-complementary-text: var(--color-base-white);
87
+ --components-button-gras-complementary-background-hover: var(--color-gray-spark-400);
88
+ --components-button-gras-complementary-background: var(--color-gray-spark-450);
89
+ --components-button-medium-background: var(--color-interaction-brand-low-background);
80
90
  --components-button-destructive-low-icon-hover: var(--color-status-red-400);
81
91
  --components-button-destructive-low-icon: var(--color-status-red-500);
82
92
  --components-button-destructive-low-text-hover: var(--color-status-red-400);
@@ -89,143 +99,128 @@
89
99
  --components-button-destructive-medium-text-hover: var(--color-status-red-400);
90
100
  --components-button-destructive-medium-text: var(--color-status-red-500);
91
101
  --components-button-destructive-medium-background-hover: var(--color-status-red-900);
92
- --components-loader-brand-foreground: var(--color-orange-500);
93
- --components-loader-brand-background: var(--color-orange-900);
94
- --components-loader-white-foreground: var(--color-base-white);
95
- --components-list-custom-item-background-title: var(--color-interaction-neutral-background);
96
- --components-list-custom-item-background-disabled: var(--color-interaction-neutral-background);
97
- --components-list-custom-item-background-hover: var(--color-interaction-neutral-background-hover);
98
- --components-list-custom-item-background-default: var(--color-interaction-neutral-background);
99
- --components-list-native-item-content-hover: var(--color-base-white);
100
- --components-list-native-item-content-default: var(--color-base-white);
101
- --components-form-shape-foreground-default: var(--color-base-white);
102
- --components-form-shape-background-disabled: var(--color-gray-spark-700);
103
- --components-form-shape-background-hover: var(--color-gray-spark-350);
104
- --components-form-shape-background-default: var(--color-gray-spark-400);
105
- --components-button-medium-background: var(--color-interaction-brand-low-background);
106
- --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
107
- --components-button-gr-as-complementary-icon: var(--color-base-white);
108
- --components-button-gr-as-complementary-text-hover: var(--color-base-white);
109
- --components-button-gr-as-complementary-text: var(--color-base-white);
110
- --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-400);
111
- --components-button-gr-as-complementary-background: var(--color-gray-spark-450);
102
+ --components-button-destructive-high-icon-hover: var(--color-base-black);
103
+ --components-button-destructive-high-icon: var(--color-base-black);
104
+ --components-button-destructive-high-text-hover: var(--color-base-black);
105
+ --components-button-destructive-high-text: var(--color-base-black);
106
+ --components-button-destructive-high-background-hover: var(--color-status-red-400);
107
+ --components-button-destructive-high-background: var(--color-status-red-500);
108
+ --color-chart-10: var(--color-crimson-500);
109
+ --color-chart-9: var(--color-dark-blue-500);
110
+ --color-chart-8: var(--color-orange-500);
111
+ --color-chart-7: var(--color-yellow-500);
112
+ --color-chart-6: var(--color-lime-500);
113
+ --color-chart-5: var(--color-light-blue-500);
114
+ --color-chart-4: var(--color-turquoise-500);
115
+ --color-chart-3: var(--color-petrol-500);
116
+ --color-chart-2: var(--color-dark-gray-500);
117
+ --color-chart-1: var(--color-amber-500);
118
+ --color-interaction-brand-low-background-hover: var(--color-orange-900);
119
+ --color-interaction-brand-high-icon-hover: var(--color-base-black);
120
+ --color-interaction-brand-high-icon: var(--color-base-black);
121
+ --color-interaction-brand-high-text-hover: var(--color-base-black);
122
+ --color-interaction-brand-high-text: var(--color-base-black);
123
+ --color-brand-accent-900: var(--color-petrol-900);
124
+ --color-brand-accent-800: var(--color-petrol-800);
125
+ --color-brand-accent-700: var(--color-petrol-700);
126
+ --color-brand-accent-600: var(--color-petrol-600);
127
+ --color-brand-accent-500: var(--color-petrol-500);
128
+ --color-brand-accent-400: var(--color-petrol-400);
129
+ --color-brand-accent-300: var(--color-petrol-300);
130
+ --color-brand-accent-200: var(--color-petrol-200);
131
+ --color-brand-accent-100: var(--color-petrol-100);
132
+ --color-brand-accent-50: var(--color-petrol-50);
133
+ --color-brand-action-lowest: var(--color-orange-600);
134
+ --color-brand-action-lower: var(--color-orange-600);
135
+ --color-brand-action-highest: var(--color-orange-300);
136
+ --color-brand-action-higher: var(--color-orange-300);
137
+ --color-brand-action-high: var(--color-orange-400);
138
+ --color-brand-action-medium: var(--color-orange-500);
139
+ --color-brand-action-low: var(--color-orange-600);
140
+ --color-brand-900: var(--color-orange-900);
141
+ --color-brand-800: var(--color-orange-800);
142
+ --color-brand-700: var(--color-orange-700);
143
+ --color-brand-600: var(--color-orange-600);
144
+ --color-brand-500: var(--color-orange-500);
145
+ --color-brand-400: var(--color-orange-400);
146
+ --color-brand-300: var(--color-orange-300);
147
+ --color-brand-200: var(--color-orange-200);
148
+ --color-brand-100: var(--color-orange-100);
149
+ --color-brand-50: var(--color-orange-50);
112
150
  --color-dont-use-background: var(--color-gray-spark-900);
113
- --color-dont-use-content: var(--color-gray-spark-750);
114
151
  --color-dont-use-border: var(--color-gray-spark-750);
115
- --color-rainbow-10-content: var(--color-gray-spark-250);
152
+ --color-dont-use-content: var(--color-gray-spark-750);
116
153
  --color-rainbow-10-border: var(--color-gray-spark-250);
154
+ --color-rainbow-10-content: var(--color-gray-spark-250);
117
155
  --color-rainbow-10-background: var(--color-gray-spark-650);
118
- --color-rainbow-9-content: var(--color-lime-500);
119
156
  --color-rainbow-9-border: var(--color-lime-500);
157
+ --color-rainbow-9-content: var(--color-lime-500);
120
158
  --color-rainbow-9-background: var(--color-lime-900);
121
- --color-rainbow-8-content: var(--color-petrol-300);
122
159
  --color-rainbow-8-border: var(--color-petrol-300);
160
+ --color-rainbow-8-content: var(--color-petrol-300);
123
161
  --color-rainbow-8-background: var(--color-petrol-800);
124
- --color-rainbow-7-content: var(--color-green-300);
125
162
  --color-rainbow-7-border: var(--color-green-300);
163
+ --color-rainbow-7-content: var(--color-green-300);
126
164
  --color-rainbow-7-background: var(--color-green-800);
127
- --color-rainbow-6-content: var(--color-crimson-200);
128
165
  --color-rainbow-6-border: var(--color-crimson-200);
166
+ --color-rainbow-6-content: var(--color-crimson-200);
129
167
  --color-rainbow-6-background: var(--color-crimson-700);
130
- --color-rainbow-5-content: var(--color-turquoise-500);
131
168
  --color-rainbow-5-border: var(--color-turquoise-500);
169
+ --color-rainbow-5-content: var(--color-turquoise-500);
132
170
  --color-rainbow-5-background: var(--color-turquoise-900);
133
- --color-rainbow-4-content: var(--color-red-200);
134
171
  --color-rainbow-4-border: var(--color-red-200);
172
+ --color-rainbow-4-content: var(--color-red-200);
135
173
  --color-rainbow-4-background: var(--color-red-800);
136
- --color-rainbow-3-content: var(--color-yellow-600);
137
174
  --color-rainbow-3-border: var(--color-yellow-600);
175
+ --color-rainbow-3-content: var(--color-yellow-600);
138
176
  --color-rainbow-3-background: var(--color-yellow-900);
139
- --color-rainbow-2-content: var(--color-orange-400);
140
177
  --color-rainbow-2-border: var(--color-orange-400);
178
+ --color-rainbow-2-content: var(--color-orange-400);
141
179
  --color-rainbow-2-background: var(--color-orange-900);
142
- --color-rainbow-1-content: var(--color-amber-500);
143
180
  --color-rainbow-1-border: var(--color-amber-500);
181
+ --color-rainbow-1-content: var(--color-amber-500);
144
182
  --color-rainbow-1-background: var(--color-amber-900);
145
- --color-feedback-success-low-content: var(--color-status-green-300);
146
- --color-feedback-success-low-border: var(--color-status-green-300);
147
- --color-feedback-success-low-background: var(--color-status-green-900);
148
- --color-feedback-success-high-content: var(--color-base-black);
149
- --color-feedback-success-high-border: var(--color-status-green-300);
150
- --color-feedback-success-high-background: var(--color-status-green-300);
151
- --color-feedback-warning-low-content: var(--color-status-yellow-300);
152
- --color-feedback-warning-low-border: var(--color-status-yellow-300);
153
- --color-feedback-warning-low-background: var(--color-status-yellow-900);
154
- --color-feedback-warning-high-content: var(--color-base-black);
155
- --color-feedback-warning-high-border: var(--color-status-yellow-300);
156
- --color-feedback-warning-high-background: var(--color-status-yellow-300);
157
- --color-feedback-neutral-low-content: var(--color-gray-spark-300);
158
- --color-feedback-neutral-low-border: var(--color-gray-spark-300);
159
- --color-feedback-neutral-low-background: var(--color-gray-spark-650);
160
183
  --color-feedback-neutral-high-content: var(--color-base-black);
161
184
  --color-feedback-neutral-high-border: var(--color-gray-spark-300);
162
185
  --color-feedback-neutral-high-background: var(--color-gray-spark-300);
163
- --color-feedback-error-low-content: var(--color-status-red-400);
164
- --color-feedback-error-low-border: var(--color-status-red-400);
165
- --color-feedback-error-low-background: var(--color-status-red-900);
186
+ --color-feedback-neutral-low-content: var(--color-gray-spark-300);
187
+ --color-feedback-neutral-low-border: var(--color-gray-spark-300);
188
+ --color-feedback-neutral-low-background: var(--color-gray-spark-650);
189
+ --color-feedback-warning-high-content: var(--color-base-black);
190
+ --color-feedback-warning-high-border: var(--color-status-yellow-300);
191
+ --color-feedback-warning-high-background: var(--color-status-yellow-300);
192
+ --color-feedback-warning-low-content: var(--color-status-yellow-300);
193
+ --color-feedback-warning-low-border: var(--color-status-yellow-300);
194
+ --color-feedback-warning-low-background: var(--color-status-yellow-900);
195
+ --color-feedback-success-high-content: var(--color-base-black);
196
+ --color-feedback-success-high-border: var(--color-status-green-300);
197
+ --color-feedback-success-high-background: var(--color-status-green-300);
198
+ --color-feedback-success-low-content: var(--color-status-green-300);
199
+ --color-feedback-success-low-border: var(--color-status-green-300);
200
+ --color-feedback-success-low-background: var(--color-status-green-900);
166
201
  --color-feedback-error-high-content: var(--color-base-black);
167
202
  --color-feedback-error-high-border: var(--color-status-red-400);
168
203
  --color-feedback-error-high-background: var(--color-status-red-400);
169
- --color-feedback-information-low-content: var(--color-status-blue-300);
170
- --color-feedback-information-low-border: var(--color-status-blue-300);
171
- --color-feedback-information-low-background: var(--color-status-blue-900);
204
+ --color-feedback-error-low-content: var(--color-status-red-400);
205
+ --color-feedback-error-low-border: var(--color-status-red-400);
206
+ --color-feedback-error-low-background: var(--color-status-red-900);
172
207
  --color-feedback-information-high-content: var(--color-base-black);
173
208
  --color-feedback-information-high-border: var(--color-status-blue-300);
174
209
  --color-feedback-information-high-background: var(--color-status-blue-300);
175
- --color-chart-10: var(--color-crimson-500);
176
- --color-chart-9: var(--color-dark-blue-500);
177
- --color-chart-8: var(--color-orange-500);
178
- --color-chart-7: var(--color-yellow-500);
179
- --color-chart-6: var(--color-lime-500);
180
- --color-chart-5: var(--color-light-blue-500);
181
- --color-chart-4: var(--color-turquoise-500);
182
- --color-chart-3: var(--color-petrol-500);
183
- --color-chart-2: var(--color-dark-gray-500);
184
- --color-chart-1: var(--color-amber-500);
185
- --color-brand-action-lowest: var(--color-orange-600);
186
- --color-brand-action-lower: var(--color-orange-600);
187
- --color-brand-action-low: var(--color-orange-600);
188
- --color-brand-action-medium: var(--color-orange-500);
189
- --color-brand-action-high: var(--color-orange-400);
190
- --color-brand-action-higher: var(--color-orange-300);
191
- --color-brand-action-highest: var(--color-orange-300);
192
- --color-brand-accent-900: var(--color-petrol-900);
193
- --color-brand-accent-800: var(--color-petrol-800);
194
- --color-brand-accent-700: var(--color-petrol-700);
195
- --color-brand-accent-600: var(--color-petrol-600);
196
- --color-brand-accent-500: var(--color-petrol-500);
197
- --color-brand-accent-400: var(--color-petrol-400);
198
- --color-brand-accent-300: var(--color-petrol-300);
199
- --color-brand-accent-200: var(--color-petrol-200);
200
- --color-brand-accent-100: var(--color-petrol-100);
201
- --color-brand-accent-50: var(--color-petrol-50);
202
- --color-brand-brand-2: var(--color-petrol-500);
203
- --color-brand-900: var(--color-orange-900);
204
- --color-brand-800: var(--color-orange-800);
205
- --color-brand-700: var(--color-orange-700);
206
- --color-brand-600: var(--color-orange-600);
207
- --color-brand-500: var(--color-orange-500);
208
- --color-brand-400: var(--color-orange-400);
209
- --color-brand-300: var(--color-orange-300);
210
- --color-brand-200: var(--color-orange-200);
211
- --color-brand-100: var(--color-orange-100);
212
- --color-brand-50: var(--color-orange-50);
213
- --color-interaction-brand-high-icon-hover: var(--color-base-black);
214
- --color-interaction-brand-high-icon: var(--color-base-black);
215
- --color-interaction-brand-high-text-hover: var(--color-base-black);
216
- --color-interaction-brand-high-text: var(--color-base-black);
217
- --color-interaction-brand-low-background-hover: var(--color-orange-900);
218
- --color-base-border-focus: var(--color-orange-700);
210
+ --color-feedback-information-low-border: var(--color-status-blue-300);
211
+ --color-feedback-information-low-content: var(--color-status-blue-300);
212
+ --color-feedback-information-low-background: var(--color-status-blue-900);
213
+ --color-base-border-focus: var(--color-orange-700);
219
214
  --color-base-border-low-emphasis: var(--color-gray-spark-500);
220
215
  --color-base-border-medium-emphasis: var(--color-gray-spark-400);
221
216
  --color-base-border-high-emphasis: var(--color-gray-spark-300);
217
+ --color-base-content-lower-emphasis: var(--color-gray-spark-500);
222
218
  --color-base-content-inverted-low-emphasis: var(--color-gray-spark-400);
223
219
  --color-base-content-inverted-medium-emphasis: var(--color-gray-spark-550);
224
220
  --color-base-content-inverted-high-emphasis: var(--color-gray-spark-800);
225
- --color-base-content-lower-emphasis: var(--color-gray-spark-500);
226
- --color-base-content-low-emphasis: var(--color-gray-spark-350);
227
- --color-base-content-medium-emphasis: var(--color-gray-spark-200);
228
221
  --color-base-content-high-emphasis: var(--color-gray-spark-50);
222
+ --color-base-content-medium-emphasis: var(--color-gray-spark-200);
223
+ --color-base-content-low-emphasis: var(--color-gray-spark-350);
229
224
  --color-base-level-40-hover: var(--color-gray-spark-450);
230
225
  --color-base-level-30-hover: var(--color-gray-spark-550);
231
226
  --color-base-level-20-hover: var(--color-gray-spark-650);
@@ -236,13 +231,20 @@
236
231
  --color-base-level-30: var(--color-gray-spark-600);
237
232
  --color-base-level-20: var(--color-gray-spark-700);
238
233
  --color-base-level-10: var(--color-gray-spark-800);
234
+ --components-menu-contextual-background: var(--color-base-level-00);
235
+ --components-menu-contextual-border: var(--color-base-border-low-emphasis);
239
236
  --components-menu-contextual-item-content-disabled: var(--color-base-content-lower-emphasis);
240
237
  --components-menu-contextual-item-shortcut: var(--color-base-content-lower-emphasis);
241
- --components-menu-contextual-border: var(--color-base-border-low-emphasis);
242
- --components-menu-contextual-background: var(--color-base-level-00);
243
238
  --components-popover-supporting-text: var(--color-base-content-low-emphasis);
244
239
  --components-popover-text: var(--color-base-content-medium-emphasis);
245
240
  --components-popover-border: var(--color-base-border-low-emphasis);
241
+ --components-tooltip-supporting-text: var(--color-base-content-inverted-medium-emphasis);
242
+ --components-tooltip-text: var(--color-base-content-inverted-high-emphasis);
243
+ --components-list-custom-item-title-content: var(--color-base-content-low-emphasis);
244
+ --components-list-custom-border: var(--color-base-border-low-emphasis);
245
+ --components-list-custom-separator: var(--color-base-border-low-emphasis);
246
+ --components-list-custom-item-content-disabled: var(--color-base-content-low-emphasis);
247
+ --components-list-custom-background: var(--color-base-level-00);
246
248
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-content);
247
249
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
248
250
  --components-notification-neutral-background: var(--color-base-level-20);
@@ -260,36 +262,8 @@
260
262
  --components-notification-information-border: var(--color-feedback-information-low-border);
261
263
  --components-notification-information-icon: var(--color-feedback-information-low-content);
262
264
  --components-notification-information-background: var(--color-base-level-20);
263
- --components-avatar-content-10: var(--color-rainbow-10-content);
264
- --components-avatar-content-9: var(--color-rainbow-9-content);
265
- --components-avatar-content-8: var(--color-rainbow-8-content);
266
- --components-avatar-content-7: var(--color-rainbow-7-content);
267
- --components-avatar-content-6: var(--color-rainbow-6-content);
268
- --components-avatar-content-5: var(--color-rainbow-5-content);
269
- --components-avatar-content-4: var(--color-rainbow-4-content);
270
- --components-avatar-content-3: var(--color-rainbow-3-content);
271
- --components-avatar-content-2: var(--color-rainbow-2-content);
272
- --components-avatar-content-1: var(--color-rainbow-1-content);
273
- --components-avatar-border-10: var(--color-rainbow-10-border);
274
- --components-avatar-border-9: var(--color-rainbow-9-border);
275
- --components-avatar-border-8: var(--color-rainbow-8-border);
276
- --components-avatar-border-7: var(--color-rainbow-7-border);
277
- --components-avatar-border-6: var(--color-rainbow-6-border);
278
- --components-avatar-border-5: var(--color-rainbow-5-border);
279
- --components-avatar-border-4: var(--color-rainbow-4-border);
280
- --components-avatar-border-3: var(--color-rainbow-3-border);
281
- --components-avatar-border-2: var(--color-rainbow-2-border);
282
- --components-avatar-border-1: var(--color-rainbow-1-border);
283
- --components-avatar-background-10: var(--color-rainbow-10-background);
284
- --components-avatar-background-9: var(--color-rainbow-9-background);
285
- --components-avatar-background-8: var(--color-rainbow-8-background);
286
- --components-avatar-background-7: var(--color-rainbow-7-background);
287
- --components-avatar-background-6: var(--color-rainbow-6-background);
288
- --components-avatar-background-5: var(--color-rainbow-5-background);
289
- --components-avatar-background-4: var(--color-rainbow-4-background);
290
- --components-avatar-background-3: var(--color-rainbow-3-background);
291
- --components-avatar-background-2: var(--color-rainbow-2-background);
292
- --components-avatar-background-1: var(--color-rainbow-1-background);
265
+ --components-alert-content-title: var(--color-base-content-high-emphasis);
266
+ --components-alert-content-description: var(--color-base-content-medium-emphasis);
293
267
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-content);
294
268
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
295
269
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -299,75 +273,93 @@
299
273
  --components-alert-error-icon: var(--color-feedback-error-low-content);
300
274
  --components-alert-error-border: var(--color-feedback-error-low-border);
301
275
  --components-alert-error-background: var(--color-feedback-error-low-background);
302
- --components-alert-warning-icon: var(--color-feedback-warning-low-border);
303
276
  --components-alert-warning-border: var(--color-feedback-warning-low-border);
277
+ --components-alert-warning-icon: var(--color-feedback-warning-low-border);
304
278
  --components-alert-warning-background: var(--color-feedback-warning-low-background);
305
- --components-alert-content-title: var(--color-base-content-high-emphasis);
306
- --components-alert-content-description: var(--color-base-content-medium-emphasis);
307
279
  --components-alert-information-border: var(--color-feedback-information-low-border);
308
280
  --components-alert-information-icon: var(--color-feedback-information-low-content);
309
281
  --components-alert-information-background: var(--color-feedback-information-low-background);
310
- --components-tooltip-supporting-text: var(--color-base-content-inverted-medium-emphasis);
311
- --components-tooltip-text: var(--color-base-content-inverted-high-emphasis);
312
- --components-button-destructive-lower-border-hover: var(--color-dont-use-border);
313
- --components-button-destructive-lower-border: var(--color-dont-use-border);
314
- --components-button-destructive-lower-icon-hover: var(--color-dont-use-content);
315
- --components-button-destructive-lower-icon: var(--color-dont-use-content);
316
- --components-button-destructive-lower-text-hover: var(--color-dont-use-content);
317
- --components-button-destructive-lower-text: var(--color-dont-use-content);
318
- --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
319
- --components-button-destructive-lower-background: var(--color-dont-use-background);
320
- --components-list-custom-border: var(--color-base-border-low-emphasis);
321
- --components-list-custom-separator: var(--color-base-border-low-emphasis);
322
- --components-list-custom-item-title-content: var(--color-base-content-low-emphasis);
323
- --components-list-custom-item-content-disabled: var(--color-base-content-low-emphasis);
324
- --components-list-custom-background: var(--color-base-level-00);
325
- --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
326
- --components-form-shape-foreground-switch-dot: var(--color-base-border-medium-emphasis);
327
282
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
328
283
  --components-form-shape-border-error: var(--color-feedback-error-low-border);
329
284
  --components-form-shape-border-hover: var(--color-base-border-high-emphasis);
330
285
  --components-form-shape-border-default: var(--color-base-border-medium-emphasis);
331
286
  --components-form-shape-background-error: var(--color-feedback-error-high-background);
332
287
  --components-form-shape-background-selected: var(--color-brand-action-medium);
288
+ --components-form-shape-foreground-switch-dot: var(--color-base-border-medium-emphasis);
289
+ --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
290
+ --components-form-text-required: var(--color-feedback-error-low-content);
291
+ --components-form-text-description-error: var(--color-feedback-error-low-content);
292
+ --components-form-text-description-default: var(--color-base-content-low-emphasis);
293
+ --components-form-text-label-disabled: var(--color-base-content-medium-emphasis);
294
+ --components-form-text-label-default: var(--color-base-content-high-emphasis);
295
+ --components-form-text-info-icon: var(--color-base-content-low-emphasis);
333
296
  --components-form-field-icon-success: var(--color-feedback-success-low-content);
334
297
  --components-form-field-icon-error: var(--color-feedback-error-low-content);
335
298
  --components-form-field-icon-disabled: var(--color-base-border-medium-emphasis);
336
299
  --components-form-field-icon-default: var(--color-base-content-low-emphasis);
337
300
  --components-form-field-content-text: var(--color-base-content-high-emphasis);
338
301
  --components-form-field-content-placeholder: var(--color-base-content-low-emphasis);
302
+ --components-form-field-border-disabled: var(--color-base-border-medium-emphasis);
339
303
  --components-form-field-border-readonly: var(--color-base-border-low-emphasis);
340
- --components-form-field-border-success: var(--color-feedback-success-low-border);
341
- --components-form-field-border-error: var(--color-feedback-error-low-border);
342
304
  --components-form-field-border-hover: var(--color-base-border-high-emphasis);
343
- --components-form-field-border-disabled: var(--color-base-border-medium-emphasis);
305
+ --components-form-field-border-error: var(--color-feedback-error-low-border);
306
+ --components-form-field-border-success: var(--color-feedback-success-low-border);
344
307
  --components-form-field-border-default: var(--color-base-border-medium-emphasis);
345
- --components-form-field-background-readonly: var(--color-base-level-00-hover);
308
+ --components-form-field-background-focus: var(--color-base-level-00);
309
+ --components-form-field-background-hover: var(--color-base-level-00-hover);
346
310
  --components-form-field-background-error: var(--color-feedback-error-high-background);
347
311
  --components-form-field-background-checked: var(--color-brand-action-medium);
312
+ --components-form-field-background-readonly: var(--color-base-level-00-hover);
348
313
  --components-form-field-background-disabled: var(--color-base-level-10);
349
- --components-form-field-background-hover: var(--color-base-level-00-hover);
350
- --components-form-field-background-focus: var(--color-base-level-00);
351
314
  --components-form-field-background-default: var(--color-base-level-00);
352
- --components-form-text-description-error: var(--color-feedback-error-low-content);
353
- --components-form-text-description-default: var(--color-base-content-low-emphasis);
354
- --components-form-text-label-disabled: var(--color-base-content-medium-emphasis);
355
- --components-form-text-label-default: var(--color-base-content-high-emphasis);
356
- --components-form-text-info-icon: var(--color-base-content-low-emphasis);
357
- --components-form-text-required: var(--color-feedback-error-low-content);
358
- --components-button-medium-background-hover: var(--color-interaction-brand-low-background-hover);
359
315
  --components-button-lower-icon-hover: var(--color-base-content-high-emphasis);
360
316
  --components-button-lower-icon: var(--color-base-content-medium-emphasis);
361
317
  --components-button-lower-text-hover: var(--color-base-content-high-emphasis);
362
318
  --components-button-lower-text: var(--color-base-content-medium-emphasis);
363
319
  --components-button-low-background-hover: var(--color-interaction-brand-low-background-hover);
364
- --components-button-high-icon-hover: var(--color-interaction-brand-high-icon-hover);
365
- --components-button-high-icon: var(--color-interaction-brand-high-icon);
320
+ --components-button-medium-background-hover: var(--color-interaction-brand-low-background-hover);
366
321
  --components-button-high-text-hover: var(--color-interaction-brand-high-text-hover);
322
+ --components-button-high-icon-hover: var(--color-interaction-brand-high-icon-hover);
367
323
  --components-button-high-text: var(--color-interaction-brand-high-text);
368
- --color-focus-success: var(--color-feedback-success-low-border);
369
- --color-focus-destructive: var(--color-feedback-error-high-border);
370
- --color-focus-brand: var(--color-brand-action-medium);
324
+ --components-button-high-icon: var(--color-interaction-brand-high-icon);
325
+ --components-avatar-border-10: var(--color-rainbow-10-border);
326
+ --components-avatar-border-9: var(--color-rainbow-9-border);
327
+ --components-avatar-border-8: var(--color-rainbow-8-border);
328
+ --components-avatar-border-7: var(--color-rainbow-7-border);
329
+ --components-avatar-border-6: var(--color-rainbow-6-border);
330
+ --components-avatar-border-5: var(--color-rainbow-5-border);
331
+ --components-avatar-border-4: var(--color-rainbow-4-border);
332
+ --components-avatar-border-3: var(--color-rainbow-3-border);
333
+ --components-avatar-border-2: var(--color-rainbow-2-border);
334
+ --components-avatar-border-1: var(--color-rainbow-1-border);
335
+ --components-avatar-content-10: var(--color-rainbow-10-content);
336
+ --components-avatar-content-9: var(--color-rainbow-9-content);
337
+ --components-avatar-content-8: var(--color-rainbow-8-content);
338
+ --components-avatar-content-7: var(--color-rainbow-7-content);
339
+ --components-avatar-content-6: var(--color-rainbow-6-content);
340
+ --components-avatar-content-5: var(--color-rainbow-5-content);
341
+ --components-avatar-content-4: var(--color-rainbow-4-content);
342
+ --components-avatar-content-3: var(--color-rainbow-3-content);
343
+ --components-avatar-content-2: var(--color-rainbow-2-content);
344
+ --components-avatar-content-1: var(--color-rainbow-1-content);
345
+ --components-avatar-background-10: var(--color-rainbow-10-background);
346
+ --components-avatar-background-9: var(--color-rainbow-9-background);
347
+ --components-avatar-background-8: var(--color-rainbow-8-background);
348
+ --components-avatar-background-7: var(--color-rainbow-7-background);
349
+ --components-avatar-background-6: var(--color-rainbow-6-background);
350
+ --components-avatar-background-5: var(--color-rainbow-5-background);
351
+ --components-avatar-background-4: var(--color-rainbow-4-background);
352
+ --components-avatar-background-3: var(--color-rainbow-3-background);
353
+ --components-avatar-background-2: var(--color-rainbow-2-background);
354
+ --components-avatar-background-1: var(--color-rainbow-1-background);
355
+ --components-button-destructive-lower-border-hover: var(--color-dont-use-border);
356
+ --components-button-destructive-lower-border: var(--color-dont-use-border);
357
+ --components-button-destructive-lower-icon-hover: var(--color-dont-use-content);
358
+ --components-button-destructive-lower-icon: var(--color-dont-use-content);
359
+ --components-button-destructive-lower-text-hover: var(--color-dont-use-content);
360
+ --components-button-destructive-lower-text: var(--color-dont-use-content);
361
+ --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
362
+ --components-button-destructive-lower-background: var(--color-dont-use-background);
371
363
  --color-interaction-link-table-icon-hover: var(--color-brand-action-medium);
372
364
  --color-interaction-link-table-icon: var(--color-base-content-high-emphasis);
373
365
  --color-interaction-link-table-text-hover: var(--color-brand-action-medium);
@@ -376,44 +368,47 @@
376
368
  --color-interaction-link-standalone-icon: var(--color-brand-action-medium);
377
369
  --color-interaction-link-standalone-text-hover: var(--color-brand-action-high);
378
370
  --color-interaction-link-standalone-text: var(--color-brand-action-medium);
379
- --color-interaction-link-inline-icon-hover: var(--color-brand-action-medium);
380
- --color-interaction-link-inline-icon: var(--color-base-content-high-emphasis);
381
- --color-interaction-link-inline-text-hover: var(--color-brand-action-medium);
382
- --color-interaction-link-inline-text: var(--color-base-content-high-emphasis);
383
371
  --color-interaction-neutral-border-hover: var(--color-base-content-medium-emphasis);
384
372
  --color-interaction-neutral-border: var(--color-base-content-low-emphasis);
385
373
  --color-interaction-neutral-icon-hover: var(--color-base-content-medium-emphasis);
386
374
  --color-interaction-neutral-icon: var(--color-base-content-low-emphasis);
387
375
  --color-interaction-neutral-text-hover: var(--color-base-content-medium-emphasis);
388
376
  --color-interaction-neutral-text: var(--color-base-content-low-emphasis);
389
- --color-interaction-brand-high-border-hover: var(--color-brand-action-high);
390
- --color-interaction-brand-high-border: var(--color-brand-action-medium);
391
- --color-interaction-brand-high-background-hover: var(--color-brand-action-high);
392
- --color-interaction-brand-high-background: var(--color-brand-action-medium);
377
+ --color-interaction-link-inline-icon-hover: var(--color-brand-action-medium);
378
+ --color-interaction-link-inline-icon: var(--color-base-content-high-emphasis);
379
+ --color-interaction-link-inline-text-hover: var(--color-brand-action-medium);
380
+ --color-interaction-link-inline-text: var(--color-base-content-high-emphasis);
393
381
  --color-interaction-brand-low-border-hover: var(--color-brand-action-high);
394
382
  --color-interaction-brand-low-border: var(--color-brand-action-medium);
395
383
  --color-interaction-brand-low-icon-hover: var(--color-brand-action-high);
396
384
  --color-interaction-brand-low-icon: var(--color-brand-action-medium);
397
385
  --color-interaction-brand-low-text-hover: var(--color-brand-action-high);
398
386
  --color-interaction-brand-low-text: var(--color-brand-action-medium);
387
+ --color-interaction-brand-high-border-hover: var(--color-brand-action-high);
388
+ --color-interaction-brand-high-border: var(--color-brand-action-medium);
389
+ --color-interaction-brand-high-background-hover: var(--color-brand-action-high);
390
+ --color-interaction-brand-high-background: var(--color-brand-action-medium);
391
+ --color-focus-success: var(--color-feedback-success-low-border);
392
+ --color-focus-destructive: var(--color-feedback-error-high-border);
393
+ --color-focus-brand: var(--color-brand-action-medium);
399
394
  --color-base-border-focus-high: var(--color-brand-action-medium);
400
395
  --components-menu-contextual-item-content-hover: var(--color-interaction-neutral-text-hover);
401
396
  --components-menu-contextual-item-content: var(--color-interaction-neutral-text);
402
397
  --components-list-custom-item-content-hover: var(--color-interaction-neutral-text-hover);
403
398
  --components-list-custom-item-content-default: var(--color-interaction-neutral-text);
404
- --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
405
399
  --components-form-shape-border-focus: var(--color-focus-brand);
400
+ --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
406
401
  --components-form-field-border-focus: var(--color-focus-brand);
402
+ --components-button-low-text-hover: var(--color-interaction-brand-low-text-hover);
403
+ --components-button-low-text: var(--color-interaction-brand-low-text);
404
+ --components-button-low-icon-hover: var(--color-interaction-brand-low-icon-hover);
405
+ --components-button-low-icon: var(--color-interaction-brand-low-icon);
406
+ --components-button-medium-text-hover: var(--color-interaction-brand-low-text-hover);
407
+ --components-button-medium-icon-hover: var(--color-interaction-brand-low-icon-hover);
407
408
  --components-button-medium-border-hover: var(--color-interaction-brand-low-border-hover);
408
409
  --components-button-medium-border: var(--color-interaction-brand-low-border);
409
- --components-button-medium-icon-hover: var(--color-interaction-brand-low-icon-hover);
410
- --components-button-medium-icon: var(--color-interaction-brand-low-icon);
411
- --components-button-medium-text-hover: var(--color-interaction-brand-low-text-hover);
412
410
  --components-button-medium-text: var(--color-interaction-brand-low-text);
413
- --components-button-low-icon-hover: var(--color-interaction-brand-low-icon-hover);
414
- --components-button-low-icon: var(--color-interaction-brand-low-icon);
415
- --components-button-low-text-hover: var(--color-interaction-brand-low-text-hover);
416
- --components-button-low-text: var(--color-interaction-brand-low-text);
411
+ --components-button-medium-icon: var(--color-interaction-brand-low-icon);
417
412
  --components-button-high-background-hover: var(--color-interaction-brand-high-background-hover);
418
413
  --components-button-high-background: var(--color-interaction-brand-high-background);
419
414
  }
@@ -446,36 +441,15 @@
446
441
  */
447
442
 
448
443
  :root {
449
- --components-tooltip-shadow-1: rgba(0, 0, 0, 0.15);
450
- --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
451
- --components-button-destructive-low-border: rgba(255, 255, 255, 0);
452
- --components-button-destructive-low-background: rgba(255, 255, 255, 0);
453
- --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
454
- --components-loader-white-background: rgba(255, 255, 255, 0.2);
455
- --components-list-native-item-background-title: rgba(255, 255, 255, 0);
456
- --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
457
- --components-list-native-item-background-hover: #4e7fdf;
458
- --components-list-native-item-background-default: rgba(255, 255, 255, 0);
459
- --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
460
- --components-list-native-border: #767578;
461
- --components-list-native-separator: #838086;
462
- --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
463
- --components-list-native-background: #565558;
464
- --components-form-opacity-disabled: 50px;
465
- --components-form-opacity-default: 100px;
466
- --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
467
- --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
468
- --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
469
- --components-button-lower-border-2: rgba(255, 255, 255, 0);
470
- --components-button-lower-border-hover: rgba(255, 255, 255, 0);
471
- --components-button-lower-border: rgba(255, 255, 255, 0);
472
- --components-button-lower-background: rgba(255, 255, 255, 0);
473
- --components-button-low-border-hover: rgba(255, 255, 255, 0);
474
- --components-button-low-border: rgba(255, 255, 255, 0);
475
- --components-button-low-background: rgba(255, 255, 255, 0);
476
- --components-button-high-border-hover: rgba(255, 255, 255, 0);
477
- --components-button-high-border: rgba(255, 255, 255, 0);
478
- --components-wpf-components-2: #ffffff;
444
+ --shadow-color-opacity-3: rgba(14, 14, 14, 0.25);
445
+ --shadow-color-opacity-2: rgba(14, 14, 14, 0.1);
446
+ --shadow-color-opacity-1: rgba(14, 14, 14, 0.06);
447
+ --shadow-color-opacity-0: rgba(0, 0, 0, 0.06);
448
+ --shadow-spread-2xl: -12px;
449
+ --shadow-spread-xl: -5px;
450
+ --shadow-spread-lg-2: -3px;
451
+ --shadow-spread-lg-1: -2px;
452
+ --shadow-y-axis-none: 0px;
479
453
  --shadow-y-axis-2xl: 25px;
480
454
  --shadow-y-axis-xl-2: 20px;
481
455
  --shadow-y-axis-xl-1: 10px;
@@ -484,11 +458,6 @@
484
458
  --shadow-y-axis-md-2: 4px;
485
459
  --shadow-y-axis-md-1: 2px;
486
460
  --shadow-y-axis-base: 1px;
487
- --shadow-y-axis-none: 0px;
488
- --shadow-spread-2xl: -12px;
489
- --shadow-spread-xl: -5px;
490
- --shadow-spread-lg-2: -3px;
491
- --shadow-spread-lg-1: -2px;
492
461
  --shadow-blur-2xl: 50px;
493
462
  --shadow-blur-xl-2: 25px;
494
463
  --shadow-blur-xl-1: 10px;
@@ -498,27 +467,64 @@
498
467
  --shadow-blur-md-1: 4px;
499
468
  --shadow-blur-base-2: 2px;
500
469
  --shadow-blur-base-1: 3px;
501
- --shadow-color-opacity-3: rgba(14, 14, 14, 0.25);
502
- --shadow-color-opacity-2: rgba(14, 14, 14, 0.1);
503
- --shadow-color-opacity-1: rgba(14, 14, 14, 0.06);
504
- --shadow-color-opacity-0: rgba(0, 0, 0, 0.06);
505
- --color-black: #000000;
506
- --color-white: #ffffff;
470
+ --components-list-native-border: #767578;
471
+ --components-list-native-separator: #838086;
472
+ --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
473
+ --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
474
+ --components-list-native-item-background-title: rgba(255, 255, 255, 0);
475
+ --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
476
+ --components-list-native-item-background-hover: #4e7fdf;
477
+ --components-list-native-item-background-default: rgba(255, 255, 255, 0);
478
+ --components-list-native-background: #565558;
479
+ --components-loader-white-background: rgba(255, 255, 255, 0.2);
480
+ --components-form-opacity-disabled: 50px;
481
+ --components-form-opacity-default: 100px;
482
+ --components-button-gras-complementary-border-hover: rgba(255, 255, 255, 0);
483
+ --components-button-gras-complementary-border: rgba(255, 255, 255, 0);
484
+ --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
485
+ --components-button-lower-border-2: rgba(255, 255, 255, 0);
486
+ --components-button-lower-border-hover: rgba(255, 255, 255, 0);
487
+ --components-button-lower-border: rgba(255, 255, 255, 0);
488
+ --components-button-lower-background: rgba(255, 255, 255, 0);
489
+ --components-button-low-border-hover: rgba(255, 255, 255, 0);
490
+ --components-button-low-border: rgba(255, 255, 255, 0);
491
+ --components-button-low-background: rgba(255, 255, 255, 0);
492
+ --components-button-high-border-hover: rgba(255, 255, 255, 0);
493
+ --components-button-high-border: rgba(255, 255, 255, 0);
494
+ --components-button-destructive-low-border: rgba(255, 255, 255, 0);
495
+ --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
496
+ --components-button-destructive-low-background: rgba(255, 255, 255, 0);
497
+ --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
498
+ --color-color: #ffffff;
507
499
  --color-interaction-neutral-background-hover: rgba(165, 165, 165, 0.12);
508
500
  --color-interaction-neutral-background: rgba(255, 255, 255, 0);
509
501
  --color-interaction-brand-low-background: rgba(255, 255, 255, 0);
510
502
  --components-menu-contextual-item-background-hover: var(--color-interaction-neutral-background-hover);
511
503
  --components-menu-contextual-item-background: var(--color-interaction-neutral-background);
512
504
  --components-popover-background: var(--color-gray-spark-50);
513
- --components-avatar-color-background-1: var(--color-green-50);
514
505
  --components-tooltip-border: var(--color-gray-spark-900);
515
506
  --components-tooltip-background: var(--color-gray-spark-900);
516
- --components-button-destructive-high-icon-hover: var(--color-base-white);
517
- --components-button-destructive-high-icon: var(--color-base-white);
518
- --components-button-destructive-high-text-hover: var(--color-base-white);
519
- --components-button-destructive-high-text: var(--color-base-white);
520
- --components-button-destructive-high-background-hover: var(--color-status-red-600);
521
- --components-button-destructive-high-background: var(--color-status-red-500);
507
+ --components-list-custom-item-background-title: var(--color-interaction-neutral-background);
508
+ --components-list-custom-item-background-disabled: var(--color-interaction-neutral-background);
509
+ --components-list-custom-item-background-hover: var(--color-interaction-neutral-background-hover);
510
+ --components-list-custom-item-background-default: var(--color-interaction-neutral-background);
511
+ --components-list-native-item-content-hover: var(--color-base-white);
512
+ --components-list-native-item-content-default: var(--color-base-white);
513
+ --components-loader-white-foreground: var(--color-base-white);
514
+ --components-loader-brand-foreground: var(--color-orange-500);
515
+ --components-loader-brand-background: var(--color-orange-50);
516
+ --components-form-shape-background-hover: var(--color-gray-spark-100);
517
+ --components-form-shape-background-default: var(--color-gray-spark-75);
518
+ --components-form-shape-background-disabled: var(--color-gray-spark-75);
519
+ --components-form-shape-foreground-default: var(--color-base-white);
520
+ --components-button-gras-complementary-icon-hover: var(--color-base-black);
521
+ --components-button-gras-complementary-icon: var(--color-base-black);
522
+ --components-button-gras-complementary-text-hover: var(--color-base-black);
523
+ --components-button-gras-complementary-text: var(--color-base-black);
524
+ --components-button-gras-complementary-background-hover: var(--color-gray-spark-300);
525
+ --components-button-gras-complementary-background: var(--color-gray-spark-200);
526
+ --components-button-lower-background-hover: var(--color-interaction-neutral-background-hover);
527
+ --components-button-medium-background: var(--color-interaction-brand-low-background);
522
528
  --components-button-destructive-low-icon-hover: var(--color-status-red-600);
523
529
  --components-button-destructive-low-icon: var(--color-status-red-500);
524
530
  --components-button-destructive-low-text-hover: var(--color-status-red-600);
@@ -531,144 +537,128 @@
531
537
  --components-button-destructive-medium-text-hover: var(--color-status-red-600);
532
538
  --components-button-destructive-medium-text: var(--color-status-red-500);
533
539
  --components-button-destructive-medium-background-hover: var(--color-status-red-50);
534
- --components-loader-brand-foreground: var(--color-orange-500);
535
- --components-loader-brand-background: var(--color-orange-50);
536
- --components-loader-white-foreground: var(--color-base-white);
537
- --components-list-custom-item-background-title: var(--color-interaction-neutral-background);
538
- --components-list-custom-item-background-disabled: var(--color-interaction-neutral-background);
539
- --components-list-custom-item-background-hover: var(--color-interaction-neutral-background-hover);
540
- --components-list-custom-item-background-default: var(--color-interaction-neutral-background);
541
- --components-list-native-item-content-hover: var(--color-base-white);
542
- --components-list-native-item-content-default: var(--color-base-white);
543
- --components-form-shape-foreground-default: var(--color-base-white);
544
- --components-form-shape-background-disabled: var(--color-gray-spark-75);
545
- --components-form-shape-background-hover: var(--color-gray-spark-100);
546
- --components-form-shape-background-default: var(--color-gray-spark-75);
547
- --components-button-medium-background: var(--color-interaction-brand-low-background);
548
- --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
549
- --components-button-gr-as-complementary-icon: var(--color-base-black);
550
- --components-button-gr-as-complementary-text-hover: var(--color-base-black);
551
- --components-button-gr-as-complementary-text: var(--color-base-black);
552
- --components-button-gr-as-complementary-background-hover: var(--color-gray-spark-300);
553
- --components-button-gr-as-complementary-background: var(--color-gray-spark-200);
554
- --components-button-lower-background-hover: var(--color-interaction-neutral-background-hover);
540
+ --components-button-destructive-high-icon-hover: var(--color-base-white);
541
+ --components-button-destructive-high-icon: var(--color-base-white);
542
+ --components-button-destructive-high-text-hover: var(--color-base-white);
543
+ --components-button-destructive-high-text: var(--color-base-white);
544
+ --components-button-destructive-high-background-hover: var(--color-status-red-600);
545
+ --components-button-destructive-high-background: var(--color-status-red-500);
546
+ --color-chart-10: var(--color-crimson-500);
547
+ --color-chart-9: var(--color-dark-blue-500);
548
+ --color-chart-8: var(--color-orange-500);
549
+ --color-chart-7: var(--color-yellow-500);
550
+ --color-chart-6: var(--color-lime-500);
551
+ --color-chart-5: var(--color-light-blue-500);
552
+ --color-chart-4: var(--color-turquoise-500);
553
+ --color-chart-3: var(--color-petrol-500);
554
+ --color-chart-2: var(--color-dark-gray-500);
555
+ --color-chart-1: var(--color-amber-500);
556
+ --color-interaction-brand-low-background-hover: var(--color-orange-50);
557
+ --color-interaction-brand-high-icon-hover: var(--color-base-white);
558
+ --color-interaction-brand-high-icon: var(--color-base-white);
559
+ --color-interaction-brand-high-text-hover: var(--color-base-white);
560
+ --color-interaction-brand-high-text: var(--color-base-white);
561
+ --color-brand-accent-900: var(--color-petrol-900);
562
+ --color-brand-accent-800: var(--color-petrol-800);
563
+ --color-brand-accent-700: var(--color-petrol-700);
564
+ --color-brand-accent-600: var(--color-petrol-600);
565
+ --color-brand-accent-500: var(--color-petrol-500);
566
+ --color-brand-accent-400: var(--color-petrol-400);
567
+ --color-brand-accent-300: var(--color-petrol-300);
568
+ --color-brand-accent-200: var(--color-petrol-200);
569
+ --color-brand-accent-100: var(--color-petrol-100);
570
+ --color-brand-accent-50: var(--color-petrol-50);
571
+ --color-brand-action-lowest: var(--color-orange-400);
572
+ --color-brand-action-lower: var(--color-orange-400);
573
+ --color-brand-action-highest: var(--color-orange-700);
574
+ --color-brand-action-higher: var(--color-orange-700);
575
+ --color-brand-action-high: var(--color-orange-600);
576
+ --color-brand-action-medium: var(--color-orange-500);
577
+ --color-brand-action-low: var(--color-orange-400);
578
+ --color-brand-900: var(--color-orange-900);
579
+ --color-brand-800: var(--color-orange-800);
580
+ --color-brand-700: var(--color-orange-700);
581
+ --color-brand-600: var(--color-orange-600);
582
+ --color-brand-500: var(--color-orange-500);
583
+ --color-brand-400: var(--color-orange-400);
584
+ --color-brand-300: var(--color-orange-300);
585
+ --color-brand-200: var(--color-orange-200);
586
+ --color-brand-100: var(--color-orange-100);
587
+ --color-brand-50: var(--color-orange-50);
555
588
  --color-dont-use-background: var(--color-gray-spark-50);
556
- --color-dont-use-content: var(--color-gray-spark-100);
557
589
  --color-dont-use-border: var(--color-gray-spark-100);
558
- --color-rainbow-10-content: var(--color-gray-spark-500);
590
+ --color-dont-use-content: var(--color-gray-spark-100);
559
591
  --color-rainbow-10-border: var(--color-gray-spark-500);
592
+ --color-rainbow-10-content: var(--color-gray-spark-500);
560
593
  --color-rainbow-10-background: var(--color-gray-spark-75);
561
- --color-rainbow-9-content: var(--color-lime-700);
562
594
  --color-rainbow-9-border: var(--color-lime-700);
595
+ --color-rainbow-9-content: var(--color-lime-700);
563
596
  --color-rainbow-9-background: var(--color-lime-50);
564
- --color-rainbow-8-content: var(--color-petrol-600);
565
597
  --color-rainbow-8-border: var(--color-petrol-600);
598
+ --color-rainbow-8-content: var(--color-petrol-600);
566
599
  --color-rainbow-8-background: var(--color-petrol-50);
567
- --color-rainbow-7-content: var(--color-green-600);
568
600
  --color-rainbow-7-border: var(--color-green-600);
601
+ --color-rainbow-7-content: var(--color-green-600);
569
602
  --color-rainbow-7-background: var(--color-green-50);
570
- --color-rainbow-6-content: var(--color-crimson-400);
571
603
  --color-rainbow-6-border: var(--color-crimson-400);
604
+ --color-rainbow-6-content: var(--color-crimson-400);
572
605
  --color-rainbow-6-background: var(--color-crimson-50);
573
- --color-rainbow-5-content: var(--color-turquoise-800);
574
606
  --color-rainbow-5-border: var(--color-turquoise-800);
607
+ --color-rainbow-5-content: var(--color-turquoise-800);
575
608
  --color-rainbow-5-background: var(--color-turquoise-100);
576
- --color-rainbow-4-content: var(--color-red-500);
577
609
  --color-rainbow-4-border: var(--color-red-500);
610
+ --color-rainbow-4-content: var(--color-red-500);
578
611
  --color-rainbow-4-background: var(--color-red-50);
579
- --color-rainbow-3-content: var(--color-yellow-800);
580
612
  --color-rainbow-3-border: var(--color-yellow-800);
613
+ --color-rainbow-3-content: var(--color-yellow-800);
581
614
  --color-rainbow-3-background: var(--color-yellow-100);
582
- --color-rainbow-2-content: var(--color-orange-700);
583
615
  --color-rainbow-2-border: var(--color-orange-700);
616
+ --color-rainbow-2-content: var(--color-orange-700);
584
617
  --color-rainbow-2-background: var(--color-orange-50);
585
- --color-rainbow-1-content: var(--color-amber-600);
586
618
  --color-rainbow-1-border: var(--color-amber-600);
619
+ --color-rainbow-1-content: var(--color-amber-600);
587
620
  --color-rainbow-1-background: var(--color-amber-50);
588
- --color-feedback-success-low-content: var(--color-status-green-500);
589
- --color-feedback-success-low-border: var(--color-status-green-500);
590
- --color-feedback-success-low-background: var(--color-status-green-50);
591
- --color-feedback-success-high-content: var(--color-base-white);
592
- --color-feedback-success-high-border: var(--color-status-green-400);
593
- --color-feedback-success-high-background: var(--color-status-green-400);
594
- --color-feedback-warning-low-content: var(--color-status-yellow-500);
595
- --color-feedback-warning-low-border: var(--color-status-yellow-500);
596
- --color-feedback-warning-low-background: var(--color-status-yellow-50);
597
- --color-feedback-warning-high-content: var(--color-base-white);
598
- --color-feedback-warning-high-border: var(--color-status-yellow-400);
599
- --color-feedback-warning-high-background: var(--color-status-yellow-400);
600
- --color-feedback-neutral-low-content: var(--color-gray-spark-400);
601
- --color-feedback-neutral-low-border: var(--color-gray-spark-400);
602
- --color-feedback-neutral-low-background: var(--color-gray-spark-75);
603
621
  --color-feedback-neutral-high-content: var(--color-base-white);
604
622
  --color-feedback-neutral-high-border: var(--color-gray-spark-400);
605
623
  --color-feedback-neutral-high-background: var(--color-gray-spark-400);
606
- --color-feedback-error-low-content: var(--color-status-red-500);
607
- --color-feedback-error-low-border: var(--color-status-red-500);
608
- --color-feedback-error-low-background: var(--color-status-red-50);
624
+ --color-feedback-neutral-low-content: var(--color-gray-spark-400);
625
+ --color-feedback-neutral-low-border: var(--color-gray-spark-400);
626
+ --color-feedback-neutral-low-background: var(--color-gray-spark-75);
627
+ --color-feedback-warning-high-content: var(--color-base-white);
628
+ --color-feedback-warning-high-border: var(--color-status-yellow-400);
629
+ --color-feedback-warning-high-background: var(--color-status-yellow-400);
630
+ --color-feedback-warning-low-content: var(--color-status-yellow-500);
631
+ --color-feedback-warning-low-border: var(--color-status-yellow-500);
632
+ --color-feedback-warning-low-background: var(--color-status-yellow-50);
633
+ --color-feedback-success-high-content: var(--color-base-white);
634
+ --color-feedback-success-high-border: var(--color-status-green-400);
635
+ --color-feedback-success-high-background: var(--color-status-green-400);
636
+ --color-feedback-success-low-content: var(--color-status-green-500);
637
+ --color-feedback-success-low-border: var(--color-status-green-500);
638
+ --color-feedback-success-low-background: var(--color-status-green-50);
609
639
  --color-feedback-error-high-content: var(--color-base-white);
610
640
  --color-feedback-error-high-border: var(--color-status-red-500);
611
641
  --color-feedback-error-high-background: var(--color-status-red-500);
612
- --color-feedback-information-low-content: var(--color-status-blue-500);
613
- --color-feedback-information-low-border: var(--color-status-blue-500);
614
- --color-feedback-information-low-background: var(--color-status-blue-50);
642
+ --color-feedback-error-low-content: var(--color-status-red-500);
643
+ --color-feedback-error-low-border: var(--color-status-red-500);
644
+ --color-feedback-error-low-background: var(--color-status-red-50);
615
645
  --color-feedback-information-high-content: var(--color-base-white);
616
646
  --color-feedback-information-high-border: var(--color-status-blue-400);
617
647
  --color-feedback-information-high-background: var(--color-status-blue-400);
618
- --color-chart-10: var(--color-crimson-500);
619
- --color-chart-9: var(--color-dark-blue-500);
620
- --color-chart-8: var(--color-orange-500);
621
- --color-chart-7: var(--color-yellow-500);
622
- --color-chart-6: var(--color-lime-500);
623
- --color-chart-5: var(--color-light-blue-500);
624
- --color-chart-4: var(--color-turquoise-500);
625
- --color-chart-3: var(--color-petrol-500);
626
- --color-chart-2: var(--color-dark-gray-500);
627
- --color-chart-1: var(--color-amber-500);
628
- --color-brand-action-lowest: var(--color-orange-400);
629
- --color-brand-action-lower: var(--color-orange-400);
630
- --color-brand-action-low: var(--color-orange-400);
631
- --color-brand-action-medium: var(--color-orange-500);
632
- --color-brand-action-high: var(--color-orange-600);
633
- --color-brand-action-higher: var(--color-orange-700);
634
- --color-brand-action-highest: var(--color-orange-700);
635
- --color-brand-accent-900: var(--color-petrol-900);
636
- --color-brand-accent-800: var(--color-petrol-800);
637
- --color-brand-accent-700: var(--color-petrol-700);
638
- --color-brand-accent-600: var(--color-petrol-600);
639
- --color-brand-accent-500: var(--color-petrol-500);
640
- --color-brand-accent-400: var(--color-petrol-400);
641
- --color-brand-accent-300: var(--color-petrol-300);
642
- --color-brand-accent-200: var(--color-petrol-200);
643
- --color-brand-accent-100: var(--color-petrol-100);
644
- --color-brand-accent-50: var(--color-petrol-50);
645
- --color-brand-brand-2: var(--color-petrol-500);
646
- --color-brand-900: var(--color-orange-900);
647
- --color-brand-800: var(--color-orange-800);
648
- --color-brand-700: var(--color-orange-700);
649
- --color-brand-600: var(--color-orange-600);
650
- --color-brand-500: var(--color-orange-500);
651
- --color-brand-400: var(--color-orange-400);
652
- --color-brand-300: var(--color-orange-300);
653
- --color-brand-200: var(--color-orange-200);
654
- --color-brand-100: var(--color-orange-100);
655
- --color-brand-50: var(--color-orange-50);
656
- --color-interaction-brand-high-icon-hover: var(--color-base-white);
657
- --color-interaction-brand-high-icon: var(--color-base-white);
658
- --color-interaction-brand-high-text-hover: var(--color-base-white);
659
- --color-interaction-brand-high-text: var(--color-base-white);
660
- --color-interaction-brand-low-background-hover: var(--color-orange-50);
648
+ --color-feedback-information-low-border: var(--color-status-blue-500);
649
+ --color-feedback-information-low-content: var(--color-status-blue-500);
650
+ --color-feedback-information-low-background: var(--color-status-blue-50);
661
651
  --color-base-border-focus: var(--color-orange-300);
662
652
  --color-base-border-low-emphasis: var(--color-gray-spark-100);
663
653
  --color-base-border-medium-emphasis: var(--color-gray-spark-200);
664
654
  --color-base-border-high-emphasis: var(--color-gray-spark-300);
655
+ --color-base-content-lower-emphasis: var(--color-gray-spark-250);
665
656
  --color-base-content-inverted-low-emphasis: var(--color-gray-spark-400);
666
657
  --color-base-content-inverted-medium-emphasis: var(--color-gray-spark-300);
667
658
  --color-base-content-inverted-high-emphasis: var(--color-gray-spark-50);
668
- --color-base-content-lower-emphasis: var(--color-gray-spark-250);
669
- --color-base-content-low-emphasis: var(--color-gray-spark-400);
670
- --color-base-content-medium-emphasis: var(--color-gray-spark-550);
671
659
  --color-base-content-high-emphasis: var(--color-gray-spark-800);
660
+ --color-base-content-medium-emphasis: var(--color-gray-spark-550);
661
+ --color-base-content-low-emphasis: var(--color-gray-spark-400);
672
662
  --color-base-level-40-hover: var(--color-gray-spark-25);
673
663
  --color-base-level-30-hover: var(--color-gray-spark-75);
674
664
  --color-base-level-20-hover: var(--color-gray-spark-25);
@@ -679,13 +669,20 @@
679
669
  --color-base-level-30: var(--color-gray-spark-50);
680
670
  --color-base-level-20: var(--color-gray-spark-00);
681
671
  --color-base-level-10: var(--color-gray-spark-50);
672
+ --components-menu-contextual-background: var(--color-base-level-00);
673
+ --components-menu-contextual-border: var(--color-base-border-low-emphasis);
682
674
  --components-menu-contextual-item-content-disabled: var(--color-base-content-lower-emphasis);
683
675
  --components-menu-contextual-item-shortcut: var(--color-base-content-lower-emphasis);
684
- --components-menu-contextual-border: var(--color-base-border-low-emphasis);
685
- --components-menu-contextual-background: var(--color-base-level-00);
686
676
  --components-popover-supporting-text: var(--color-base-content-low-emphasis);
687
677
  --components-popover-text: var(--color-base-content-medium-emphasis);
688
678
  --components-popover-border: var(--color-base-border-low-emphasis);
679
+ --components-tooltip-supporting-text: var(--color-base-content-inverted-medium-emphasis);
680
+ --components-tooltip-text: var(--color-base-content-inverted-high-emphasis);
681
+ --components-list-custom-item-title-content: var(--color-base-content-low-emphasis);
682
+ --components-list-custom-border: var(--color-base-border-low-emphasis);
683
+ --components-list-custom-separator: var(--color-base-border-low-emphasis);
684
+ --components-list-custom-item-content-disabled: var(--color-base-content-low-emphasis);
685
+ --components-list-custom-background: var(--color-base-level-00);
689
686
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-content);
690
687
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
691
688
  --components-notification-neutral-background: var(--color-base-level-00);
@@ -703,36 +700,8 @@
703
700
  --components-notification-information-border: var(--color-feedback-information-low-border);
704
701
  --components-notification-information-icon: var(--color-feedback-information-low-content);
705
702
  --components-notification-information-background: var(--color-base-level-00);
706
- --components-avatar-content-10: var(--color-rainbow-10-content);
707
- --components-avatar-content-9: var(--color-rainbow-9-content);
708
- --components-avatar-content-8: var(--color-rainbow-8-content);
709
- --components-avatar-content-7: var(--color-rainbow-7-content);
710
- --components-avatar-content-6: var(--color-rainbow-6-content);
711
- --components-avatar-content-5: var(--color-rainbow-5-content);
712
- --components-avatar-content-4: var(--color-rainbow-4-content);
713
- --components-avatar-content-3: var(--color-rainbow-3-content);
714
- --components-avatar-content-2: var(--color-rainbow-2-content);
715
- --components-avatar-content-1: var(--color-rainbow-1-content);
716
- --components-avatar-border-10: var(--color-rainbow-10-border);
717
- --components-avatar-border-9: var(--color-rainbow-9-border);
718
- --components-avatar-border-8: var(--color-rainbow-8-border);
719
- --components-avatar-border-7: var(--color-rainbow-7-border);
720
- --components-avatar-border-6: var(--color-rainbow-6-border);
721
- --components-avatar-border-5: var(--color-rainbow-5-border);
722
- --components-avatar-border-4: var(--color-rainbow-4-border);
723
- --components-avatar-border-3: var(--color-rainbow-3-border);
724
- --components-avatar-border-2: var(--color-rainbow-2-border);
725
- --components-avatar-border-1: var(--color-rainbow-1-border);
726
- --components-avatar-background-10: var(--color-rainbow-10-background);
727
- --components-avatar-background-9: var(--color-rainbow-9-background);
728
- --components-avatar-background-8: var(--color-rainbow-8-background);
729
- --components-avatar-background-7: var(--color-rainbow-7-background);
730
- --components-avatar-background-6: var(--color-rainbow-6-background);
731
- --components-avatar-background-5: var(--color-rainbow-5-background);
732
- --components-avatar-background-4: var(--color-rainbow-4-background);
733
- --components-avatar-background-3: var(--color-rainbow-3-background);
734
- --components-avatar-background-2: var(--color-rainbow-2-background);
735
- --components-avatar-background-1: var(--color-rainbow-1-background);
703
+ --components-alert-content-title: var(--color-base-content-high-emphasis);
704
+ --components-alert-content-description: var(--color-base-content-medium-emphasis);
736
705
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-content);
737
706
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
738
707
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -742,75 +711,93 @@
742
711
  --components-alert-error-icon: var(--color-feedback-error-low-content);
743
712
  --components-alert-error-border: var(--color-feedback-error-low-border);
744
713
  --components-alert-error-background: var(--color-feedback-error-low-background);
745
- --components-alert-warning-icon: var(--color-feedback-warning-low-content);
746
714
  --components-alert-warning-border: var(--color-feedback-warning-low-border);
715
+ --components-alert-warning-icon: var(--color-feedback-warning-low-content);
747
716
  --components-alert-warning-background: var(--color-feedback-warning-low-background);
748
- --components-alert-content-title: var(--color-base-content-high-emphasis);
749
- --components-alert-content-description: var(--color-base-content-medium-emphasis);
750
717
  --components-alert-information-border: var(--color-feedback-information-low-border);
751
718
  --components-alert-information-icon: var(--color-feedback-information-low-content);
752
719
  --components-alert-information-background: var(--color-feedback-information-low-background);
753
- --components-tooltip-supporting-text: var(--color-base-content-inverted-medium-emphasis);
754
- --components-tooltip-text: var(--color-base-content-inverted-high-emphasis);
755
- --components-button-destructive-lower-border-hover: var(--color-dont-use-border);
756
- --components-button-destructive-lower-border: var(--color-dont-use-border);
757
- --components-button-destructive-lower-icon-hover: var(--color-dont-use-content);
758
- --components-button-destructive-lower-icon: var(--color-dont-use-content);
759
- --components-button-destructive-lower-text-hover: var(--color-dont-use-content);
760
- --components-button-destructive-lower-text: var(--color-dont-use-content);
761
- --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
762
- --components-button-destructive-lower-background: var(--color-dont-use-background);
763
- --components-list-custom-border: var(--color-base-border-low-emphasis);
764
- --components-list-custom-separator: var(--color-base-border-low-emphasis);
765
- --components-list-custom-item-title-content: var(--color-base-content-low-emphasis);
766
- --components-list-custom-item-content-disabled: var(--color-base-content-low-emphasis);
767
- --components-list-custom-background: var(--color-base-level-00);
768
- --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
769
- --components-form-shape-foreground-switch-dot: var(--color-base-border-medium-emphasis);
770
720
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
771
721
  --components-form-shape-border-error: var(--color-feedback-error-low-border);
772
722
  --components-form-shape-border-hover: var(--color-base-border-high-emphasis);
773
723
  --components-form-shape-border-default: var(--color-base-border-medium-emphasis);
774
724
  --components-form-shape-background-error: var(--color-feedback-error-high-background);
775
725
  --components-form-shape-background-selected: var(--color-brand-action-medium);
726
+ --components-form-shape-foreground-switch-dot: var(--color-base-border-medium-emphasis);
727
+ --components-form-shape-foreground-disabled-error: var(--color-feedback-error-high-background);
728
+ --components-form-text-required: var(--color-feedback-error-low-content);
729
+ --components-form-text-description-error: var(--color-feedback-error-low-content);
730
+ --components-form-text-description-default: var(--color-base-content-low-emphasis);
731
+ --components-form-text-label-disabled: var(--color-base-content-medium-emphasis);
732
+ --components-form-text-label-default: var(--color-base-content-high-emphasis);
733
+ --components-form-text-info-icon: var(--color-base-content-low-emphasis);
776
734
  --components-form-field-icon-success: var(--color-feedback-success-low-content);
777
735
  --components-form-field-icon-error: var(--color-feedback-error-low-content);
778
736
  --components-form-field-icon-disabled: var(--color-base-border-medium-emphasis);
779
737
  --components-form-field-icon-default: var(--color-base-content-low-emphasis);
780
738
  --components-form-field-content-text: var(--color-base-content-high-emphasis);
781
739
  --components-form-field-content-placeholder: var(--color-base-content-low-emphasis);
740
+ --components-form-field-border-disabled: var(--color-base-border-medium-emphasis);
782
741
  --components-form-field-border-readonly: var(--color-base-border-low-emphasis);
783
- --components-form-field-border-success: var(--color-feedback-success-low-border);
784
- --components-form-field-border-error: var(--color-feedback-error-low-border);
785
742
  --components-form-field-border-hover: var(--color-base-border-high-emphasis);
786
- --components-form-field-border-disabled: var(--color-base-border-medium-emphasis);
743
+ --components-form-field-border-error: var(--color-feedback-error-low-border);
744
+ --components-form-field-border-success: var(--color-feedback-success-low-border);
787
745
  --components-form-field-border-default: var(--color-base-border-medium-emphasis);
788
- --components-form-field-background-readonly: var(--color-base-level-00-hover);
746
+ --components-form-field-background-focus: var(--color-base-level-00);
747
+ --components-form-field-background-hover: var(--color-base-level-00-hover);
789
748
  --components-form-field-background-error: var(--color-feedback-error-high-background);
790
749
  --components-form-field-background-checked: var(--color-brand-action-medium);
750
+ --components-form-field-background-readonly: var(--color-base-level-00-hover);
791
751
  --components-form-field-background-disabled: var(--color-base-level-10);
792
- --components-form-field-background-hover: var(--color-base-level-00-hover);
793
- --components-form-field-background-focus: var(--color-base-level-00);
794
752
  --components-form-field-background-default: var(--color-base-level-00);
795
- --components-form-text-description-error: var(--color-feedback-error-low-content);
796
- --components-form-text-description-default: var(--color-base-content-low-emphasis);
797
- --components-form-text-label-disabled: var(--color-base-content-medium-emphasis);
798
- --components-form-text-label-default: var(--color-base-content-high-emphasis);
799
- --components-form-text-info-icon: var(--color-base-content-low-emphasis);
800
- --components-form-text-required: var(--color-feedback-error-low-content);
801
- --components-button-medium-background-hover: var(--color-interaction-brand-low-background-hover);
802
753
  --components-button-lower-icon-hover: var(--color-base-content-high-emphasis);
803
754
  --components-button-lower-icon: var(--color-base-content-medium-emphasis);
804
755
  --components-button-lower-text-hover: var(--color-base-content-high-emphasis);
805
756
  --components-button-lower-text: var(--color-base-content-medium-emphasis);
806
757
  --components-button-low-background-hover: var(--color-interaction-brand-low-background-hover);
807
- --components-button-high-icon-hover: var(--color-interaction-brand-high-icon-hover);
808
- --components-button-high-icon: var(--color-interaction-brand-high-icon);
758
+ --components-button-medium-background-hover: var(--color-interaction-brand-low-background-hover);
809
759
  --components-button-high-text-hover: var(--color-interaction-brand-high-text-hover);
760
+ --components-button-high-icon-hover: var(--color-interaction-brand-high-icon-hover);
810
761
  --components-button-high-text: var(--color-interaction-brand-high-text);
811
- --color-focus-success: var(--color-feedback-success-low-border);
812
- --color-focus-destructive: var(--color-feedback-error-high-border);
813
- --color-focus-brand: var(--color-brand-action-medium);
762
+ --components-button-high-icon: var(--color-interaction-brand-high-icon);
763
+ --components-avatar-border-10: var(--color-rainbow-10-border);
764
+ --components-avatar-border-9: var(--color-rainbow-9-border);
765
+ --components-avatar-border-8: var(--color-rainbow-8-border);
766
+ --components-avatar-border-7: var(--color-rainbow-7-border);
767
+ --components-avatar-border-6: var(--color-rainbow-6-border);
768
+ --components-avatar-border-5: var(--color-rainbow-5-border);
769
+ --components-avatar-border-4: var(--color-rainbow-4-border);
770
+ --components-avatar-border-3: var(--color-rainbow-3-border);
771
+ --components-avatar-border-2: var(--color-rainbow-2-border);
772
+ --components-avatar-border-1: var(--color-rainbow-1-border);
773
+ --components-avatar-content-10: var(--color-rainbow-10-content);
774
+ --components-avatar-content-9: var(--color-rainbow-9-content);
775
+ --components-avatar-content-8: var(--color-rainbow-8-content);
776
+ --components-avatar-content-7: var(--color-rainbow-7-content);
777
+ --components-avatar-content-6: var(--color-rainbow-6-content);
778
+ --components-avatar-content-5: var(--color-rainbow-5-content);
779
+ --components-avatar-content-4: var(--color-rainbow-4-content);
780
+ --components-avatar-content-3: var(--color-rainbow-3-content);
781
+ --components-avatar-content-2: var(--color-rainbow-2-content);
782
+ --components-avatar-content-1: var(--color-rainbow-1-content);
783
+ --components-avatar-background-10: var(--color-rainbow-10-background);
784
+ --components-avatar-background-9: var(--color-rainbow-9-background);
785
+ --components-avatar-background-8: var(--color-rainbow-8-background);
786
+ --components-avatar-background-7: var(--color-rainbow-7-background);
787
+ --components-avatar-background-6: var(--color-rainbow-6-background);
788
+ --components-avatar-background-5: var(--color-rainbow-5-background);
789
+ --components-avatar-background-4: var(--color-rainbow-4-background);
790
+ --components-avatar-background-3: var(--color-rainbow-3-background);
791
+ --components-avatar-background-2: var(--color-rainbow-2-background);
792
+ --components-avatar-background-1: var(--color-rainbow-1-background);
793
+ --components-button-destructive-lower-border-hover: var(--color-dont-use-border);
794
+ --components-button-destructive-lower-border: var(--color-dont-use-border);
795
+ --components-button-destructive-lower-icon-hover: var(--color-dont-use-content);
796
+ --components-button-destructive-lower-icon: var(--color-dont-use-content);
797
+ --components-button-destructive-lower-text-hover: var(--color-dont-use-content);
798
+ --components-button-destructive-lower-text: var(--color-dont-use-content);
799
+ --components-button-destructive-lower-background-hover: var(--color-dont-use-background);
800
+ --components-button-destructive-lower-background: var(--color-dont-use-background);
814
801
  --color-interaction-link-table-icon-hover: var(--color-brand-action-medium);
815
802
  --color-interaction-link-table-icon: var(--color-base-content-high-emphasis);
816
803
  --color-interaction-link-table-text-hover: var(--color-brand-action-medium);
@@ -819,44 +806,47 @@
819
806
  --color-interaction-link-standalone-icon: var(--color-brand-action-medium);
820
807
  --color-interaction-link-standalone-text-hover: var(--color-brand-action-high);
821
808
  --color-interaction-link-standalone-text: var(--color-brand-action-medium);
822
- --color-interaction-link-inline-icon-hover: var(--color-brand-action-medium);
823
- --color-interaction-link-inline-icon: var(--color-base-content-high-emphasis);
824
- --color-interaction-link-inline-text-hover: var(--color-brand-action-medium);
825
- --color-interaction-link-inline-text: var(--color-base-content-high-emphasis);
826
809
  --color-interaction-neutral-border-hover: var(--color-base-content-medium-emphasis);
827
810
  --color-interaction-neutral-border: var(--color-base-content-low-emphasis);
828
811
  --color-interaction-neutral-icon-hover: var(--color-base-content-medium-emphasis);
829
812
  --color-interaction-neutral-icon: var(--color-base-content-low-emphasis);
830
813
  --color-interaction-neutral-text-hover: var(--color-base-content-medium-emphasis);
831
814
  --color-interaction-neutral-text: var(--color-base-content-low-emphasis);
832
- --color-interaction-brand-high-border-hover: var(--color-brand-action-high);
833
- --color-interaction-brand-high-border: var(--color-brand-action-medium);
834
- --color-interaction-brand-high-background-hover: var(--color-brand-action-high);
835
- --color-interaction-brand-high-background: var(--color-brand-action-medium);
815
+ --color-interaction-link-inline-icon-hover: var(--color-brand-action-medium);
816
+ --color-interaction-link-inline-icon: var(--color-base-content-high-emphasis);
817
+ --color-interaction-link-inline-text-hover: var(--color-brand-action-medium);
818
+ --color-interaction-link-inline-text: var(--color-base-content-high-emphasis);
836
819
  --color-interaction-brand-low-border-hover: var(--color-brand-action-high);
837
820
  --color-interaction-brand-low-border: var(--color-brand-action-medium);
838
821
  --color-interaction-brand-low-icon-hover: var(--color-brand-action-high);
839
822
  --color-interaction-brand-low-icon: var(--color-brand-action-medium);
840
823
  --color-interaction-brand-low-text-hover: var(--color-brand-action-high);
841
824
  --color-interaction-brand-low-text: var(--color-brand-action-medium);
825
+ --color-interaction-brand-high-border-hover: var(--color-brand-action-high);
826
+ --color-interaction-brand-high-border: var(--color-brand-action-medium);
827
+ --color-interaction-brand-high-background-hover: var(--color-brand-action-high);
828
+ --color-interaction-brand-high-background: var(--color-brand-action-medium);
829
+ --color-focus-success: var(--color-feedback-success-low-border);
830
+ --color-focus-destructive: var(--color-feedback-error-high-border);
831
+ --color-focus-brand: var(--color-brand-action-medium);
842
832
  --color-base-border-focus-high: var(--color-brand-action-medium);
843
833
  --components-menu-contextual-item-content-hover: var(--color-interaction-neutral-text-hover);
844
834
  --components-menu-contextual-item-content: var(--color-interaction-neutral-text);
845
835
  --components-list-custom-item-content-hover: var(--color-interaction-neutral-text-hover);
846
836
  --components-list-custom-item-content-default: var(--color-interaction-neutral-text);
847
- --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
848
837
  --components-form-shape-border-focus: var(--color-focus-brand);
838
+ --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
849
839
  --components-form-field-border-focus: var(--color-focus-brand);
840
+ --components-button-low-text-hover: var(--color-interaction-brand-low-text-hover);
841
+ --components-button-low-text: var(--color-interaction-brand-low-text);
842
+ --components-button-low-icon-hover: var(--color-interaction-brand-low-icon-hover);
843
+ --components-button-low-icon: var(--color-interaction-brand-low-icon);
844
+ --components-button-medium-text-hover: var(--color-interaction-brand-low-text-hover);
845
+ --components-button-medium-icon-hover: var(--color-interaction-brand-low-icon-hover);
850
846
  --components-button-medium-border-hover: var(--color-interaction-brand-low-border-hover);
851
847
  --components-button-medium-border: var(--color-interaction-brand-low-border);
852
- --components-button-medium-icon-hover: var(--color-interaction-brand-low-icon-hover);
853
- --components-button-medium-icon: var(--color-interaction-brand-low-icon);
854
- --components-button-medium-text-hover: var(--color-interaction-brand-low-text-hover);
855
848
  --components-button-medium-text: var(--color-interaction-brand-low-text);
856
- --components-button-low-icon-hover: var(--color-interaction-brand-low-icon-hover);
857
- --components-button-low-icon: var(--color-interaction-brand-low-icon);
858
- --components-button-low-text-hover: var(--color-interaction-brand-low-text-hover);
859
- --components-button-low-text: var(--color-interaction-brand-low-text);
849
+ --components-button-medium-icon: var(--color-interaction-brand-low-icon);
860
850
  --components-button-high-background-hover: var(--color-interaction-brand-high-background-hover);
861
851
  --components-button-high-background: var(--color-interaction-brand-high-background);
862
852
  }
@@ -871,75 +861,10 @@
871
861
  --letter-spacing-heading-md: -0.5px;
872
862
  --letter-spacing-heading-sm: -0.25px;
873
863
  --letter-spacing-heading-xs: 0px;
874
- --spacing-09: 36px;
875
- --spacing-08: 32px;
876
- --spacing-07: 28px;
877
- --spacing-06: 24px;
878
- --spacing-02: 8px;
879
- --spacing-01: 4px;
880
- --spacing-3-5: 14px;
881
- --spacing-2-5: 10px;
882
- --spacing-1-5: 6px;
883
- --spacing-0-5: 2px;
884
- --spacing-px: 1px;
885
- --spacing-96: 384px;
886
- --spacing-80: 320px;
887
- --spacing-72: 288px;
888
- --spacing-64: 256px;
889
- --spacing-60: 240px;
890
- --spacing-56: 224px;
891
- --spacing-52: 208px;
892
- --spacing-48: 192px;
893
- --spacing-44: 176px;
894
- --spacing-40: 160px;
895
- --spacing-36: 144px;
896
- --spacing-32: 128px;
897
- --spacing-28: 112px;
898
- --spacing-24: 96px;
899
- --spacing-20: 80px;
900
- --spacing-16: 64px;
901
- --spacing-14: 56px;
902
- --spacing-12: 48px;
903
- --spacing-11: 44px;
904
- --spacing-10: 40px;
905
- --spacing-9: 36px;
906
- --spacing-8: 32px;
907
- --spacing-7: 28px;
908
- --spacing-6: 24px;
909
- --spacing-5: 20px;
910
- --spacing-4: 16px;
911
- --spacing-3: 12px;
912
- --spacing-2: 8px;
913
- --spacing-1: 4px;
914
- --spacing-0: 0px;
915
- --radius-md: 8px;
916
- --radius-sm: 6px;
917
- --radius-rounded-full: 9999px;
918
- --radius-rounded-3xl: 24px;
919
- --radius-rounded-2xl: 16px;
920
- --radius-rounded-xl: 12px;
921
- --radius-rounded-lg: 8px;
922
- --radius-rounded-md: 6px;
923
- --radius-rounded: 4px;
924
- --radius-rounded-sm: 2px;
925
- --radius-rounded-none: 0px;
926
- --line-height-9xl: 128px;
927
- --line-height-8xl: 96px;
928
- --line-height-7xl: 72px;
929
- --line-height-6xl: 60px;
930
- --line-height-5xl: 48px;
931
- --line-height-4xl: 40px;
932
- --line-height-3xl: 36px;
933
- --line-height-2xl: 32px;
934
- --line-height-xl: 30px;
935
- --line-height-lg: 28px;
936
- --line-height-base: 24px;
937
- --line-height-sm: 20px;
938
- --line-height-xs: 16px;
939
864
  --leading-loose: 2px;
940
- --leading-relaxed: 1.625px;
865
+ --leading-relaxed: 1.63px;
941
866
  --leading-normal: 1.5px;
942
- --leading-snug: 1.375px;
867
+ --leading-snug: 1.38px;
943
868
  --leading-tight: 1.25px;
944
869
  --leading-none: 1px;
945
870
  --leading-px-10: 40px;
@@ -953,9 +878,15 @@
953
878
  --font-weight-low-emphasis: 400;
954
879
  --font-weight-medium-emphasis: 500;
955
880
  --font-weight-high-emphasis: 700;
956
- --font-size-9xl: 128px;
957
- --font-size-8xl: 96px;
958
- --font-size-7xl: 72px;
881
+ --radius-rounded-full: 9999px;
882
+ --radius-rounded-3xl: 24px;
883
+ --radius-rounded-2xl: 16px;
884
+ --radius-rounded-xl: 12px;
885
+ --radius-rounded-lg: 8px;
886
+ --radius-rounded-md: 6px;
887
+ --radius-rounded: 4px;
888
+ --radius-rounded-sm: 2px;
889
+ --radius-rounded-none: 0px;
959
890
  --font-size-6xl: 60px;
960
891
  --font-size-5xl: 48px;
961
892
  --font-size-4xl: 36px;
@@ -964,95 +895,24 @@
964
895
  --font-size-xl: 20px;
965
896
  --font-size-lg: 18px;
966
897
  --font-size-md: 16px;
898
+ --font-size-9xl: 128px;
899
+ --font-size-8xl: 96px;
900
+ --font-size-7xl: 72px;
967
901
  --font-size-sm: 14px;
968
902
  --font-size-xs: 12px;
969
- --color-yellow-900: #4d3a00;
970
- --color-yellow-800: #795c00;
971
- --color-yellow-700: #a67d00;
972
- --color-yellow-600: #d29f00;
973
- --color-yellow-500: #ffc100;
974
- --color-yellow-400: #ffcc2d;
975
- --color-yellow-300: #ffd759;
976
- --color-yellow-200: #ffe286;
977
- --color-yellow-100: #ffecb3;
978
- --color-yellow-50: #fff7df;
979
- --color-turquoise-900: #203330;
980
- --color-turquoise-800: #32504c;
981
- --color-turquoise-700: #456e68;
982
- --color-turquoise-600: #578b84;
983
- --color-turquoise-500: #6aa9a0;
984
- --color-turquoise-400: #84b8b1;
985
- --color-turquoise-300: #9ec7c1;
986
- --color-turquoise-200: #b8d6d2;
987
- --color-turquoise-100: #d2e5e3;
988
- --color-turquoise-50: #ecf4f3;
989
- --color-red-mccs-00: #ff6161;
990
- --color-red-mccs-500: #450000;
991
- --color-red-mccs-400: #7d0000;
992
- --color-red-mccs-300: #ae0303;
993
- --color-red-mccs-200: #d00202;
994
- --color-red-mccs-100: #ff3838;
995
- --color-red-900: #3d0909;
996
- --color-red-800: #610e0e;
997
- --color-red-700: #851313;
998
- --color-red-600: #a81818;
999
- --color-red-500: #cc1d1d;
1000
- --color-red-400: #d54545;
1001
- --color-red-300: #de6c6c;
1002
- --color-red-200: #e79494;
1003
- --color-red-100: #f0bbbb;
1004
- --color-red-50: #f9e3e3;
1005
- --color-petrol-900: #0b292e;
1006
- --color-petrol-800: #124148;
1007
- --color-petrol-700: #185963;
1008
- --color-petrol-600: #1f717d;
1009
- --color-petrol-500: #258998;
1010
- --color-petrol-400: #4b9eaa;
1011
- --color-petrol-300: #71b2bc;
1012
- --color-petrol-200: #97c7ce;
1013
- --color-petrol-100: #bedce0;
1014
- --color-petrol-50: #e4f0f2;
1015
- --color-orange-950: #371408;
1016
- --color-orange-900: #45190a;
1017
- --color-orange-800: #6e280f;
1018
- --color-orange-700: #963715;
1019
- --color-orange-600: #bf451a;
1020
- --color-orange-500: #e75420;
1021
- --color-orange-400: #eb7247;
1022
- --color-orange-300: #ef906e;
1023
- --color-orange-200: #f4ae95;
1024
- --color-orange-100: #f8ccbc;
1025
- --color-orange-50: #fceae3;
1026
- --color-status-yellow-900: #302300;
1027
- --color-status-yellow-800: #4d3701;
1028
- --color-status-yellow-700: #805c00;
1029
- --color-status-yellow-600: #b58200;
1030
- --color-status-yellow-500: #e0a917;
1031
- --color-status-yellow-400: #fac50d;
1032
- --color-status-yellow-300: #f7d14c;
1033
- --color-status-yellow-200: #ffe286;
1034
- --color-status-yellow-100: #fae49d;
1035
- --color-status-yellow-50: #fff7df;
1036
- --color-status-red-900: #380101;
1037
- --color-status-red-800: #530101;
1038
- --color-status-red-700: #911515;
1039
- --color-status-red-600: #bb1919;
1040
- --color-status-red-500: #da2424;
1041
- --color-status-red-400: #ff3d3d;
1042
- --color-status-red-300: #ff6161;
1043
- --color-status-red-200: #ff8f8f;
1044
- --color-status-red-100: #f5c4c4;
1045
- --color-status-red-50: #ffeded;
1046
- --color-status-green-900: #002302;
1047
- --color-status-green-800: #003603;
1048
- --color-status-green-700: #035707;
1049
- --color-status-green-600: #008207;
1050
- --color-status-green-500: #34ae3b;
1051
- --color-status-green-400: #45d24d;
1052
- --color-status-green-300: #6bde71;
1053
- --color-status-green-200: #9ef4a3;
1054
- --color-status-green-100: #c8facb;
1055
- --color-status-green-50: #eafeeb;
903
+ --line-height-9xl: 128px;
904
+ --line-height-8xl: 96px;
905
+ --line-height-7xl: 72px;
906
+ --line-height-6xl: 60px;
907
+ --line-height-5xl: 48px;
908
+ --line-height-4xl: 40px;
909
+ --line-height-3xl: 36px;
910
+ --line-height-2xl: 32px;
911
+ --line-height-xl: 30px;
912
+ --line-height-lg: 28px;
913
+ --line-height-base: 24px;
914
+ --line-height-sm: 20px;
915
+ --line-height-xs: 16px;
1056
916
  --color-status-blue-900: #001c37;
1057
917
  --color-status-blue-800: #09285c;
1058
918
  --color-status-blue-700: #113a80;
@@ -1063,48 +923,39 @@
1063
923
  --color-status-blue-200: #a8c9ff;
1064
924
  --color-status-blue-100: #c7dcff;
1065
925
  --color-status-blue-50: #f0f6ff;
926
+ --color-status-yellow-900: #302300;
927
+ --color-status-yellow-800: #4d3701;
928
+ --color-status-yellow-700: #805c00;
929
+ --color-status-yellow-600: #b58200;
930
+ --color-status-yellow-500: #e0a917;
931
+ --color-status-yellow-400: #fac50d;
932
+ --color-status-yellow-300: #f7d14c;
933
+ --color-status-yellow-200: #ffe286;
934
+ --color-status-yellow-100: #fae49d;
935
+ --color-status-yellow-50: #fff7df;
936
+ --color-status-green-900: #002302;
937
+ --color-status-green-800: #003603;
938
+ --color-status-green-700: #035707;
939
+ --color-status-green-600: #008207;
940
+ --color-status-green-500: #34ae3b;
941
+ --color-status-green-400: #45d24d;
942
+ --color-status-green-300: #6bde71;
943
+ --color-status-green-200: #9ef4a3;
944
+ --color-status-green-100: #c8facb;
945
+ --color-status-green-50: #eafeeb;
946
+ --color-status-red-900: #380101;
947
+ --color-status-red-800: #530101;
948
+ --color-status-red-700: #911515;
949
+ --color-status-red-600: #bb1919;
950
+ --color-status-red-500: #da2424;
951
+ --color-status-red-400: #ff3d3d;
952
+ --color-status-red-300: #ff6161;
953
+ --color-status-red-200: #ff8f8f;
954
+ --color-status-red-100: #f5c4c4;
955
+ --color-status-red-50: #ffeded;
956
+ --color-dark-blue-500: #447583;
957
+ --color-dark-gray-500: #394d55;
1066
958
  --color-light-blue-500: #9ac3ce;
1067
- --color-lime-900: #2a330e;
1068
- --color-lime-800: #435017;
1069
- --color-lime-700: #5c6e1f;
1070
- --color-lime-600: #748b28;
1071
- --color-lime-500: #8da930;
1072
- --color-lime-400: #a1b854;
1073
- --color-lime-300: #b5c778;
1074
- --color-lime-200: #c9d69d;
1075
- --color-lime-100: #dde5c1;
1076
- --color-lime-50: #f1f4e5;
1077
- --color-green-900: #062908;
1078
- --color-green-800: #09400c;
1079
- --color-green-700: #0c5810;
1080
- --color-green-600: #106f15;
1081
- --color-green-500: #138719;
1082
- --color-green-400: #3c9c41;
1083
- --color-green-300: #66b16a;
1084
- --color-green-200: #8fc692;
1085
- --color-green-100: #b8dbba;
1086
- --color-green-50: #e2f0e2;
1087
- --color-gray-spark-00: #ffffff;
1088
- --color-gray-spark-900: #0e0e0e;
1089
- --color-gray-spark-850: #161616;
1090
- --color-gray-spark-800: #1d1d1d;
1091
- --color-gray-spark-750: #252525;
1092
- --color-gray-spark-700: #2b2b2b;
1093
- --color-gray-spark-650: #313131;
1094
- --color-gray-spark-600: #3a3a3a;
1095
- --color-gray-spark-550: #414141;
1096
- --color-gray-spark-500: #484848;
1097
- --color-gray-spark-450: #4f4f4f;
1098
- --color-gray-spark-400: #6d6d6d;
1099
- --color-gray-spark-350: #808080;
1100
- --color-gray-spark-300: #919191;
1101
- --color-gray-spark-250: #a9a9a9;
1102
- --color-gray-spark-200: #bfbfbf;
1103
- --color-gray-spark-150: #cccccc;
1104
- --color-gray-spark-100: #e3e3e3;
1105
- --color-gray-spark-75: #ededed;
1106
- --color-gray-spark-50: #f6f6f6;
1107
- --color-gray-spark-25: #fbfbfb;
1108
959
  --color-gray-ocean-00: #ffffff;
1109
960
  --color-gray-ocean-900: #0b0f11;
1110
961
  --color-gray-ocean-850: #11171a;
@@ -1126,8 +977,48 @@
1126
977
  --color-gray-ocean-75: #eaeef0;
1127
978
  --color-gray-ocean-50: #f5f6f7;
1128
979
  --color-gray-ocean-25: #fafbfb;
1129
- --color-dark-gray-500: #394d55;
1130
- --color-dark-blue-500: #447583;
980
+ --color-green-900: #062908;
981
+ --color-green-800: #09400c;
982
+ --color-green-700: #0c5810;
983
+ --color-green-600: #106f15;
984
+ --color-green-500: #138719;
985
+ --color-green-400: #3c9c41;
986
+ --color-green-300: #66b16a;
987
+ --color-green-200: #8fc692;
988
+ --color-green-100: #b8dbba;
989
+ --color-green-50: #e2f0e2;
990
+ --color-base-black: #000000;
991
+ --color-base-white: #ffffff;
992
+ --color-turquoise-900: #203330;
993
+ --color-turquoise-800: #32504c;
994
+ --color-turquoise-700: #456e68;
995
+ --color-turquoise-600: #578b84;
996
+ --color-turquoise-500: #6aa9a0;
997
+ --color-turquoise-400: #84b8b1;
998
+ --color-turquoise-300: #9ec7c1;
999
+ --color-turquoise-200: #b8d6d2;
1000
+ --color-turquoise-100: #d2e5e3;
1001
+ --color-turquoise-50: #ecf4f3;
1002
+ --color-petrol-900: #0b292e;
1003
+ --color-petrol-800: #124148;
1004
+ --color-petrol-700: #185963;
1005
+ --color-petrol-600: #1f717d;
1006
+ --color-petrol-500: #258998;
1007
+ --color-petrol-400: #4b9eaa;
1008
+ --color-petrol-300: #71b2bc;
1009
+ --color-petrol-200: #97c7ce;
1010
+ --color-petrol-100: #bedce0;
1011
+ --color-petrol-50: #e4f0f2;
1012
+ --color-lime-900: #2a330e;
1013
+ --color-lime-800: #435017;
1014
+ --color-lime-700: #5c6e1f;
1015
+ --color-lime-600: #748b28;
1016
+ --color-lime-500: #8da930;
1017
+ --color-lime-400: #a1b854;
1018
+ --color-lime-300: #b5c778;
1019
+ --color-lime-200: #c9d69d;
1020
+ --color-lime-100: #dde5c1;
1021
+ --color-lime-50: #f1f4e5;
1131
1022
  --color-crimson-900: #2e0010;
1132
1023
  --color-crimson-800: #490019;
1133
1024
  --color-crimson-700: #630022;
@@ -1138,6 +1029,26 @@
1138
1029
  --color-crimson-200: #cf869f;
1139
1030
  --color-crimson-100: #e0b3c2;
1140
1031
  --color-crimson-50: #f2dfe6;
1032
+ --color-red-900: #3d0909;
1033
+ --color-red-800: #610e0e;
1034
+ --color-red-700: #851313;
1035
+ --color-red-600: #a81818;
1036
+ --color-red-500: #cc1d1d;
1037
+ --color-red-400: #d54545;
1038
+ --color-red-300: #de6c6c;
1039
+ --color-red-200: #e79494;
1040
+ --color-red-100: #f0bbbb;
1041
+ --color-red-50: #f9e3e3;
1042
+ --color-yellow-900: #4d3a00;
1043
+ --color-yellow-800: #795c00;
1044
+ --color-yellow-700: #a67d00;
1045
+ --color-yellow-600: #d29f00;
1046
+ --color-yellow-500: #ffc100;
1047
+ --color-yellow-400: #ffcc2d;
1048
+ --color-yellow-300: #ffd759;
1049
+ --color-yellow-200: #ffe286;
1050
+ --color-yellow-100: #ffecb3;
1051
+ --color-yellow-50: #fff7df;
1141
1052
  --color-amber-900: #482608;
1142
1053
  --color-amber-800: #723d0c;
1143
1054
  --color-amber-700: #9c5311;
@@ -1148,8 +1059,81 @@
1148
1059
  --color-amber-200: #f8c392;
1149
1060
  --color-amber-100: #fbd9ba;
1150
1061
  --color-amber-50: #fdefe2;
1151
- --color-base-black: #000000;
1152
- --color-base-white: #ffffff;
1062
+ --color-gray-spark-00: #ffffff;
1063
+ --color-gray-spark-900: #0e0e0e;
1064
+ --color-gray-spark-850: #161616;
1065
+ --color-gray-spark-800: #1d1d1d;
1066
+ --color-gray-spark-750: #252525;
1067
+ --color-gray-spark-700: #2b2b2b;
1068
+ --color-gray-spark-650: #313131;
1069
+ --color-gray-spark-600: #3a3a3a;
1070
+ --color-gray-spark-550: #414141;
1071
+ --color-gray-spark-500: #484848;
1072
+ --color-gray-spark-450: #4f4f4f;
1073
+ --color-gray-spark-400: #6d6d6d;
1074
+ --color-gray-spark-350: #808080;
1075
+ --color-gray-spark-300: #919191;
1076
+ --color-gray-spark-250: #a9a9a9;
1077
+ --color-gray-spark-200: #bfbfbf;
1078
+ --color-gray-spark-150: #cccccc;
1079
+ --color-gray-spark-100: #e3e3e3;
1080
+ --color-gray-spark-75: #ededed;
1081
+ --color-gray-spark-50: #f6f6f6;
1082
+ --color-gray-spark-25: #fbfbfb;
1083
+ --color-red-mccs-00: #ff6161;
1084
+ --color-red-mccs-500: #450000;
1085
+ --color-red-mccs-400: #7d0000;
1086
+ --color-red-mccs-300: #ae0303;
1087
+ --color-red-mccs-200: #d00202;
1088
+ --color-red-mccs-100: #ff3838;
1089
+ --color-orange-950: #371408;
1090
+ --color-orange-900: #45190a;
1091
+ --color-orange-800: #6e280f;
1092
+ --color-orange-700: #963715;
1093
+ --color-orange-600: #bf451a;
1094
+ --color-orange-500: #e75420;
1095
+ --color-orange-400: #eb7247;
1096
+ --color-orange-300: #ef906e;
1097
+ --color-orange-200: #f4ae95;
1098
+ --color-orange-100: #f8ccbc;
1099
+ --color-orange-50: #fceae3;
1100
+ --spacing-2-5: 10px;
1101
+ --spacing-3-5: 14px;
1102
+ --spacing-1-5: 6px;
1103
+ --spacing-0-5: 2px;
1104
+ --spacing-px: 1px;
1105
+ --spacing-07: 28px;
1106
+ --spacing-09: 36px;
1107
+ --spacing-96: 384px;
1108
+ --spacing-80: 320px;
1109
+ --spacing-72: 288px;
1110
+ --spacing-64: 256px;
1111
+ --spacing-60: 240px;
1112
+ --spacing-56: 224px;
1113
+ --spacing-52: 208px;
1114
+ --spacing-48: 192px;
1115
+ --spacing-44: 176px;
1116
+ --spacing-40: 160px;
1117
+ --spacing-36: 144px;
1118
+ --spacing-32: 128px;
1119
+ --spacing-28: 112px;
1120
+ --spacing-24: 96px;
1121
+ --spacing-20: 80px;
1122
+ --spacing-16: 64px;
1123
+ --spacing-14: 56px;
1124
+ --spacing-12: 48px;
1125
+ --spacing-11: 44px;
1126
+ --spacing-10: 40px;
1127
+ --spacing-9: 36px;
1128
+ --spacing-8: 32px;
1129
+ --spacing-7: 28px;
1130
+ --spacing-6: 24px;
1131
+ --spacing-5: 20px;
1132
+ --spacing-4: 16px;
1133
+ --spacing-3: 12px;
1134
+ --spacing-2: 8px;
1135
+ --spacing-1: 4px;
1136
+ --spacing-0: 0px;
1153
1137
  }
1154
1138
 
1155
1139
  /**
@@ -1157,138 +1141,64 @@
1157
1141
  */
1158
1142
 
1159
1143
  :root {
1144
+ --menu-contextual-divider-padding-bottom: 3px;
1145
+ --menu-contextual-item-font-weight: 500;
1146
+ --popover-font-weight: 500;
1147
+ --popover-shadow-2-x: 0px;
1148
+ --popover-shadow-1-blur: 1px;
1149
+ --popover-shadow-1-x: 0px;
1150
+ --tooltip-font-weight: 500;
1151
+ --global-typography-h6-font-style: normal;
1152
+ --global-typography-h5-font-style: normal;
1160
1153
  --global-typography-legend-font-style: uppercase;
1161
1154
  --global-typography-label-font-style: normal;
1162
1155
  --global-typography-small-font-style: normal;
1163
1156
  --global-typography-p-font-style: normal;
1164
- --global-typography-h5-font-style: normal;
1165
- --global-typography-h6-font-style: normal;
1166
1157
  --global-typography-h4-font-style: normal;
1167
1158
  --global-typography-h3-font-style: normal;
1168
1159
  --global-typography-h2-font-style: normal;
1169
1160
  --global-typography-h1-font-style: normal;
1170
- --tooltip-font-weight: 500;
1171
- --popover-shadow-2-x: 0px;
1172
- --popover-shadow-1-blur: 1px;
1173
- --popover-shadow-1-x: 0px;
1174
- --popover-font-weight: 500;
1175
- --menu-contextual-item-font-weight: 500;
1176
- --menu-contextual-divider-padding-bottom: 3px;
1177
- --list-native-separator-padding-y: 3px;
1178
1161
  --list-native-separator-padding-x: 9px;
1162
+ --list-native-separator-padding-y: 3px;
1179
1163
  --button-lg-ring-radius: 9px;
1180
- --button-md-ring-radius: 7px;
1181
1164
  --button-sm-ring-radius: 5px;
1182
1165
  --button-xs-ring-radius: 3px;
1183
- --notification-title-line-height: var(--line-height-sm);
1184
- --notification-title-font-weight: var(--font-weight-medium-emphasis);
1185
- --notification-title-font-size: var(--font-size-sm);
1186
- --notification-timestamp-line-height: var(--line-height-sm);
1187
- --notification-timestamp-font-weight: var(--font-weight-low-emphasis);
1188
- --notification-timestamp-font-size: var(--font-size-sm);
1189
- --notification-description-line-height: var(--line-height-sm);
1190
- --notification-description-font-weight: var(--font-weight-medium-emphasis);
1191
- --notification-description-font-size: var(--font-size-sm);
1192
- --notification-border-width-low-emphasis: var(--spacing-px);
1193
- --notification-border-width-high-emphasis: var(--spacing-2);
1194
- --notification-radius: var(--radius-rounded-lg);
1195
- --notification-padding: var(--spacing-4);
1196
- --notification-gap-y: var(--spacing-1);
1197
- --notification-gap-x-title: var(--spacing-2);
1198
- --notification-gap-x: var(--spacing-3);
1199
- --notification-icon-size: var(--spacing-5);
1200
- --icon-xl: var(--spacing-7);
1201
- --icon-lg: var(--spacing-6);
1202
- --icon-md: var(--spacing-5);
1203
- --icon-sm: var(--spacing-4);
1204
- --icon-xs: var(--spacing-3);
1205
- --loader-size-xl: var(--spacing-8);
1206
- --loader-size-lg: var(--spacing-7);
1207
- --loader-size-md: var(--spacing-6);
1208
- --loader-size-sm: var(--spacing-5);
1209
- --loader-size-xs: var(--spacing-4);
1210
- --form-toggle-width: var(--spacing-9);
1211
- --form-toggle-switch-dot-selected: var(--spacing-3-5);
1212
- --form-toggle-switch-dot-default: var(--spacing-3);
1213
- --form-toggle-padding-selected: var(--spacing-0-5);
1214
- --form-toggle-padding-default: var(--spacing-1);
1215
- --form-toggle-radius: var(--radius-rounded-full);
1216
- --form-toggle-padding-top: var(--spacing-0);
1217
- --form-toggle-height: var(--spacing-5);
1218
- --form-toggle-border-width: var(--spacing-0-5);
1219
- --form-radio-ring-radius: var(--radius-rounded-full);
1220
- --form-radio-size: var(--spacing-5);
1221
- --form-radio-padding-top: var(--spacing-0);
1222
- --form-radio-inner-circle-size: var(--spacing-2);
1223
- --form-radio-inner-circle-padding: var(--spacing-1-5);
1224
- --form-radio-border-width: var(--spacing-0-5);
1225
- --form-checkbox-icon-stroke: var(--spacing-0-5);
1226
- --form-checkbox-ring-radius: var(--radius-rounded-lg);
1227
- --form-checkbox-size: var(--spacing-5);
1228
- --form-checkbox-radius: var(--radius-rounded-md);
1229
- --form-checkbox-padding-top: var(--spacing-0);
1230
- --form-checkbox-icon-size: var(--spacing-3-5);
1231
- --form-checkbox-border-width: var(--spacing-0-5);
1232
- --form-field-inner-button-padding-y: var(--spacing-2-5);
1233
- --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1234
- --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1235
- --form-field-leading-trailing-line-height: var(--line-height-base);
1236
- --form-field-leading-trailing-icon-size: var(--spacing-5);
1237
- --form-field-leading-trailing-font-size: var(--font-size-sm);
1238
- --form-field-radius: var(--radius-rounded-md);
1239
- --form-field-padding-y: var(--spacing-2);
1240
- --form-field-padding-x-icon-button: var(--spacing-10);
1241
- --form-field-padding-x: var(--spacing-2);
1242
- --form-field-line-height: var(--line-height-base);
1243
- --form-field-gap-inner: var(--spacing-2);
1244
- --form-field-gap: var(--spacing-2);
1245
- --form-field-icon-size: var(--spacing-5);
1246
- --form-field-font-weight: var(--font-weight-medium-emphasis);
1247
- --form-field-font-size: var(--font-size-md);
1248
- --form-label-font-weight: var(--font-weight-medium-emphasis);
1249
- --form-label-line-height: var(--line-height-sm);
1250
- --form-label-gap: var(--spacing-1);
1251
- --form-label-font-size: var(--font-size-sm);
1252
- --form-description-font-weight: var(--font-weight-low-emphasis);
1253
- --form-description-line-height: var(--line-height-sm);
1254
- --form-description-font-size: var(--font-size-sm);
1255
- --form-gap-y: var(--spacing-1);
1256
- --form-gap-x: var(--spacing-3);
1257
- --focus-outline-stroke: var(--spacing-0-5);
1258
- --focus-outline-offset: var(--spacing-0-5);
1259
- --focus-field-stroke: var(--spacing-px);
1260
- --badge-radius: var(--radius-rounded-full);
1261
- --badge-padding-y: var(--spacing-1);
1262
- --badge-padding-x: var(--spacing-2);
1263
- --badge-gap-x: var(--spacing-1);
1264
- --avatar-xl-size: var(--spacing-16);
1265
- --avatar-xl-icon-size: var(--spacing-11);
1266
- --avatar-xl-font-size: var(--spacing-8);
1267
- --avatar-lg-size: var(--spacing-12);
1268
- --avatar-lg-icon-size: var(--spacing-8);
1269
- --avatar-lg-font-size: var(--spacing-6);
1270
- --avatar-md-size: var(--spacing-10);
1271
- --avatar-md-icon-size: var(--spacing-7);
1272
- --avatar-md-font-size: var(--spacing-5);
1273
- --avatar-sm-size: var(--spacing-8);
1274
- --avatar-sm-icon-size: var(--spacing-5);
1275
- --avatar-sm-font-size: var(--spacing-4);
1276
- --avatar-xs-size: var(--spacing-6);
1277
- --avatar-xs-icon-size: var(--spacing-4);
1278
- --avatar-xs-font-size: var(--spacing-3);
1279
- --alert-message-line-height: var(--line-height-sm);
1280
- --alert-message-font-weight: var(--font-weight-low-emphasis);
1281
- --alert-message-font-size: var(--font-size-sm);
1282
- --alert-heading-line-height: var(--line-height-sm);
1283
- --alert-heading-font-weight: var(--font-weight-medium-emphasis);
1284
- --alert-heading-font-size: var(--font-size-sm);
1285
- --alert-radius: var(--radius-rounded-lg);
1286
- --alert-padding: var(--spacing-4);
1287
- --alert-gap-y: var(--spacing-1);
1288
- --alert-icon-position-y: var(--spacing-4);
1289
- --alert-icon-position-x: var(--spacing-4);
1290
- --alert-gap-x: var(--spacing-3);
1291
- --alert-icon-size: var(--spacing-5);
1166
+ --button-md-ring-radius: 7px;
1167
+ --menu-contextual-divider-padding-x: var(--spacing-2-5);
1168
+ --menu-contextual-divider-padding-top: var(--spacing-1);
1169
+ --menu-contextual-radius: var(--radius-rounded-md);
1170
+ --menu-contextual-gap-y: var(--spacing-0-5);
1171
+ --menu-contextual-padding-y: var(--spacing-1);
1172
+ --menu-contextual-padding-x: var(--spacing-1);
1173
+ --menu-contextual-item-padding-y: var(--spacing-2);
1174
+ --menu-contextual-item-gap-x: var(--spacing-3);
1175
+ --menu-contextual-item-padding-x: var(--spacing-2-5);
1176
+ --menu-contextual-item-radius: var(--radius-rounded);
1177
+ --menu-contextual-item-font-size: var(--font-size-sm);
1178
+ --popover-gap-y: var(--spacing-1);
1179
+ --popover-font-size: var(--font-size-sm);
1180
+ --popover-shadow-2-opacity: var(--shadow-color-opacity-2);
1181
+ --popover-shadow-2-spread: var(--shadow-spread-lg-2);
1182
+ --popover-shadow-2-blur: var(--shadow-blur-lg-2);
1183
+ --popover-shadow-2-y: var(--shadow-y-axis-lg-2);
1184
+ --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1185
+ --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1186
+ --popover-shadow-1-y: var(--shadow-y-axis-none);
1187
+ --popover-radius: var(--radius-rounded-md);
1188
+ --popover-padding-y: var(--spacing-3);
1189
+ --popover-padding-x: var(--spacing-3);
1190
+ --tooltip-font-size: var(--font-size-sm);
1191
+ --tooltip-complex-padding-y: var(--spacing-3);
1192
+ --tooltip-radius: var(--radius-rounded-md);
1193
+ --tooltip-gap-y: var(--spacing-1);
1194
+ --tooltip-padding-y: var(--spacing-3);
1195
+ --tooltip-padding-x: var(--spacing-3);
1196
+ --global-typography-h6-font-weight: var(--font-weight-medium-emphasis);
1197
+ --global-typography-h6-line-height: var(--line-height-lg);
1198
+ --global-typography-h6-font-size: var(--font-size-lg);
1199
+ --global-typography-h5-font-weight: var(--font-weight-high-emphasis);
1200
+ --global-typography-h5-line-height: var(--line-height-lg);
1201
+ --global-typography-h5-font-size: var(--font-size-lg);
1292
1202
  --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
1293
1203
  --global-typography-legend-line-height: var(--line-height-xs);
1294
1204
  --global-typography-legend-font-size: var(--font-size-xs);
@@ -1300,12 +1210,6 @@
1300
1210
  --global-typography-p-font-weight: var(--font-weight-low-emphasis);
1301
1211
  --global-typography-p-line-height: var(--line-height-base);
1302
1212
  --global-typography-p-font-size: var(--font-size-md);
1303
- --global-typography-h5-font-weight: var(--font-weight-high-emphasis);
1304
- --global-typography-h5-line-height: var(--line-height-lg);
1305
- --global-typography-h5-font-size: var(--font-size-lg);
1306
- --global-typography-h6-font-weight: var(--font-weight-medium-emphasis);
1307
- --global-typography-h6-line-height: var(--line-height-lg);
1308
- --global-typography-h6-font-size: var(--font-size-lg);
1309
1213
  --global-typography-h4-font-weight: var(--font-weight-high-emphasis);
1310
1214
  --global-typography-h4-line-height: var(--line-height-xl);
1311
1215
  --global-typography-h4-font-size: var(--font-size-xl);
@@ -1318,35 +1222,6 @@
1318
1222
  --global-typography-h1-font-weight: var(--font-weight-high-emphasis);
1319
1223
  --global-typography-h1-line-height: var(--line-height-4xl);
1320
1224
  --global-typography-h1-font-size: var(--font-size-5xl);
1321
- --tooltip-radius: var(--radius-rounded-md);
1322
- --tooltip-gap-y: var(--spacing-1);
1323
- --tooltip-complex-padding-y: var(--spacing-3);
1324
- --tooltip-padding-y: var(--spacing-3);
1325
- --tooltip-padding-x: var(--spacing-3);
1326
- --tooltip-font-size: var(--font-size-sm);
1327
- --popover-radius: var(--radius-rounded-md);
1328
- --popover-padding-y: var(--spacing-3);
1329
- --popover-padding-x: var(--spacing-3);
1330
- --popover-gap-y: var(--spacing-1);
1331
- --popover-font-size: var(--font-size-sm);
1332
- --popover-shadow-2-opacity: var(--shadow-color-opacity-2);
1333
- --popover-shadow-2-spread: var(--shadow-spread-lg-2);
1334
- --popover-shadow-2-blur: var(--shadow-blur-lg-2);
1335
- --popover-shadow-2-y: var(--shadow-y-axis-lg-2);
1336
- --popover-shadow-1-opacity: var(--shadow-color-opacity-3);
1337
- --popover-shadow-1-spread: var(--shadow-spread-lg-1);
1338
- --popover-shadow-1-y: var(--shadow-y-axis-none);
1339
- --menu-contextual-radius: var(--radius-rounded-md);
1340
- --menu-contextual-padding-y: var(--spacing-1);
1341
- --menu-contextual-padding-x: var(--spacing-1);
1342
- --menu-contextual-gap-y: var(--spacing-0-5);
1343
- --menu-contextual-item-radius: var(--radius-rounded);
1344
- --menu-contextual-item-gap-x: var(--spacing-3);
1345
- --menu-contextual-item-padding-y: var(--spacing-2);
1346
- --menu-contextual-item-padding-x: var(--spacing-2-5);
1347
- --menu-contextual-item-font-size: var(--font-size-sm);
1348
- --menu-contextual-divider-padding-x: var(--spacing-2-5);
1349
- --menu-contextual-divider-padding-top: var(--spacing-1);
1350
1225
  --list-custom-sub-item-padding-left: var(--spacing-10);
1351
1226
  --list-custom-separator-padding-y: var(--spacing-0-5);
1352
1227
  --list-custom-separator-padding-x: var(--spacing-0);
@@ -1360,48 +1235,157 @@
1360
1235
  --list-custom-line-height: var(--line-height-base);
1361
1236
  --list-custom-font-size: var(--font-size-md);
1362
1237
  --list-custom-icon-size: var(--spacing-5);
1363
- --list-native-sub-item-padding-left: var(--spacing-8);
1364
1238
  --list-native-padding: var(--spacing-2);
1365
- --list-native-radius: var(--radius-rounded-md);
1366
1239
  --list-native-gap-y: var(--spacing-0-5);
1240
+ --list-native-sub-item-padding-left: var(--spacing-8);
1241
+ --list-native-radius: var(--radius-rounded-md);
1367
1242
  --list-native-item-radius: var(--radius-rounded-md);
1368
- --list-native-item-padding-y: var(--spacing-0);
1369
1243
  --list-native-item-padding-right: var(--spacing-2);
1244
+ --list-native-item-padding-y: var(--spacing-0);
1370
1245
  --list-native-item-padding-left: var(--spacing-5);
1371
1246
  --list-native-line-height: var(--line-height-base);
1372
1247
  --list-native-font-size: var(--font-size-md);
1373
1248
  --list-native-icon-size: var(--spacing-5);
1374
- --button-lg-padding-y: var(--spacing-2-5);
1375
- --button-lg-padding-x: var(--spacing-4);
1376
- --button-lg-line-height: var(--line-height-lg);
1377
- --button-lg-icon-size: var(--spacing-6);
1249
+ --badge-radius: var(--radius-rounded-full);
1250
+ --badge-padding-y: var(--spacing-1);
1251
+ --badge-padding-x: var(--spacing-2);
1252
+ --badge-gap-x: var(--spacing-1);
1253
+ --notification-border-width-low-emphasis: var(--spacing-px);
1254
+ --notification-border-width-high-emphasis: var(--spacing-2);
1255
+ --notification-gap-x-title: var(--spacing-2);
1256
+ --notification-timestamp-font-weight: var(--font-weight-low-emphasis);
1257
+ --notification-timestamp-line-height: var(--line-height-sm);
1258
+ --notification-timestamp-font-size: var(--font-size-sm);
1259
+ --notification-description-font-weight: var(--font-weight-medium-emphasis);
1260
+ --notification-description-line-height: var(--line-height-sm);
1261
+ --notification-description-font-size: var(--font-size-sm);
1262
+ --notification-title-font-weight: var(--font-weight-medium-emphasis);
1263
+ --notification-title-line-height: var(--line-height-sm);
1264
+ --notification-title-font-size: var(--font-size-sm);
1265
+ --notification-radius: var(--radius-rounded-lg);
1266
+ --notification-padding: var(--spacing-4);
1267
+ --notification-gap-y: var(--spacing-1);
1268
+ --notification-gap-x: var(--spacing-3);
1269
+ --notification-icon-size: var(--spacing-5);
1270
+ --alert-icon-position-y: var(--spacing-4);
1271
+ --alert-icon-position-x: var(--spacing-4);
1272
+ --alert-message-font-weight: var(--font-weight-low-emphasis);
1273
+ --alert-message-line-height: var(--line-height-sm);
1274
+ --alert-message-font-size: var(--font-size-sm);
1275
+ --alert-heading-font-weight: var(--font-weight-medium-emphasis);
1276
+ --alert-heading-line-height: var(--line-height-sm);
1277
+ --alert-heading-font-size: var(--font-size-sm);
1278
+ --alert-gap-y: var(--spacing-1);
1279
+ --alert-radius: var(--radius-rounded-lg);
1280
+ --alert-padding: var(--spacing-4);
1281
+ --alert-gap-x: var(--spacing-3);
1282
+ --alert-icon-size: var(--spacing-5);
1283
+ --focus-outline-offset: var(--spacing-0-5);
1284
+ --focus-field-stroke: var(--spacing-px);
1285
+ --focus-outline-stroke: var(--spacing-0-5);
1286
+ --icon-xl: var(--spacing-7);
1287
+ --icon-lg: var(--spacing-6);
1288
+ --icon-md: var(--spacing-5);
1289
+ --icon-sm: var(--spacing-4);
1290
+ --icon-xs: var(--spacing-3);
1291
+ --avatar-xl-font-size: var(--spacing-8);
1292
+ --avatar-xl-icon-size: var(--spacing-11);
1293
+ --avatar-xl-size: var(--spacing-16);
1294
+ --avatar-lg-font-size: var(--spacing-6);
1295
+ --avatar-lg-icon-size: var(--spacing-8);
1296
+ --avatar-lg-size: var(--spacing-12);
1297
+ --avatar-sm-font-size: var(--spacing-4);
1298
+ --avatar-sm-icon-size: var(--spacing-5);
1299
+ --avatar-sm-size: var(--spacing-8);
1300
+ --avatar-md-font-size: var(--spacing-5);
1301
+ --avatar-md-icon-size: var(--spacing-7);
1302
+ --avatar-md-size: var(--spacing-10);
1303
+ --avatar-xs-font-size: var(--spacing-3);
1304
+ --avatar-xs-icon-size: var(--spacing-4);
1305
+ --avatar-xs-size: var(--spacing-6);
1306
+ --loader-size-xl: var(--spacing-8);
1307
+ --loader-size-lg: var(--spacing-7);
1308
+ --loader-size-md: var(--spacing-6);
1309
+ --loader-size-sm: var(--spacing-5);
1310
+ --loader-size-xs: var(--spacing-4);
1311
+ --form-gap-y: var(--spacing-1);
1312
+ --form-gap-x: var(--spacing-3);
1313
+ --form-radio-ring-radius: var(--radius-rounded-full);
1314
+ --form-radio-border-width: var(--spacing-0-5);
1315
+ --form-radio-padding-top: var(--spacing-0);
1316
+ --form-radio-size: var(--spacing-5);
1317
+ --form-radio-inner-circle-padding: var(--spacing-1-5);
1318
+ --form-radio-inner-circle-size: var(--spacing-2);
1319
+ --form-toggle-padding-top: var(--spacing-0);
1320
+ --form-toggle-border-width: var(--spacing-0-5);
1321
+ --form-toggle-height: var(--spacing-5);
1322
+ --form-toggle-width: var(--spacing-9);
1323
+ --form-toggle-switch-dot-selected: var(--spacing-3-5);
1324
+ --form-toggle-switch-dot-default: var(--spacing-3);
1325
+ --form-toggle-radius: var(--radius-rounded-full);
1326
+ --form-toggle-padding-selected: var(--spacing-0-5);
1327
+ --form-toggle-padding-default: var(--spacing-1);
1328
+ --form-checkbox-icon-stroke: var(--spacing-0-5);
1329
+ --form-checkbox-ring-radius: var(--radius-rounded-lg);
1330
+ --form-checkbox-border-width: var(--spacing-0-5);
1331
+ --form-checkbox-padding-top: var(--spacing-0);
1332
+ --form-checkbox-icon-size: var(--spacing-3-5);
1333
+ --form-checkbox-radius: var(--radius-rounded-md);
1334
+ --form-checkbox-size: var(--spacing-5);
1335
+ --form-description-font-weight: var(--font-weight-low-emphasis);
1336
+ --form-description-line-height: var(--line-height-sm);
1337
+ --form-description-font-size: var(--font-size-sm);
1338
+ --form-label-font-weight: var(--font-weight-medium-emphasis);
1339
+ --form-label-gap: var(--spacing-1);
1340
+ --form-label-line-height: var(--line-height-sm);
1341
+ --form-label-font-size: var(--font-size-sm);
1342
+ --form-field-font-weight: var(--font-weight-medium-emphasis);
1343
+ --form-field-padding-x-icon-button: var(--spacing-10);
1344
+ --form-field-inner-button-padding-x-int: var(--spacing-1-5);
1345
+ --form-field-inner-button-padding-y: var(--spacing-2-5);
1346
+ --form-field-inner-button-padding-x-ext: var(--spacing-2-5);
1347
+ --form-field-icon-size: var(--spacing-5);
1348
+ --form-field-leading-trailing-icon-size: var(--spacing-5);
1349
+ --form-field-leading-trailing-line-height: var(--line-height-base);
1350
+ --form-field-leading-trailing-font-size: var(--font-size-sm);
1351
+ --form-field-gap-inner: var(--spacing-2);
1352
+ --form-field-radius: var(--radius-rounded-md);
1353
+ --form-field-line-height: var(--line-height-base);
1354
+ --form-field-font-size: var(--font-size-md);
1355
+ --form-field-padding-y: var(--spacing-2);
1356
+ --form-field-padding-x: var(--spacing-2);
1357
+ --form-field-gap: var(--spacing-2);
1378
1358
  --button-lg-icon-button-padding: var(--spacing-3);
1379
- --button-lg-gap: var(--spacing-2);
1359
+ --button-lg-line-height: var(--line-height-lg);
1380
1360
  --button-lg-font-size: var(--font-size-lg);
1361
+ --button-lg-icon-size: var(--spacing-6);
1381
1362
  --button-lg-border-radius: var(--radius-rounded-lg);
1382
- --button-md-padding-y: var(--spacing-2);
1383
- --button-md-padding-x: var(--spacing-3-5);
1384
- --button-md-line-height: var(--line-height-base);
1385
- --button-md-icon-size: var(--spacing-5);
1386
- --button-md-icon-button-padding: var(--spacing-2-5);
1387
- --button-md-gap: var(--spacing-2);
1388
- --button-md-font-size: var(--font-size-md);
1389
- --button-md-border-radius: var(--radius-rounded-md);
1390
- --button-sm-padding-y: var(--spacing-1-5);
1391
- --button-sm-padding-x: var(--spacing-3);
1392
- --button-sm-line-height: var(--line-height-sm);
1393
- --button-sm-icon-size: var(--spacing-4);
1363
+ --button-lg-padding-y: var(--spacing-2-5);
1364
+ --button-lg-padding-x: var(--spacing-4);
1365
+ --button-lg-gap: var(--spacing-2);
1394
1366
  --button-sm-icon-button-padding: var(--spacing-2);
1395
- --button-sm-gap: var(--spacing-1-5);
1367
+ --button-sm-line-height: var(--line-height-sm);
1396
1368
  --button-sm-font-size: var(--font-size-sm);
1369
+ --button-sm-icon-size: var(--spacing-4);
1397
1370
  --button-sm-border-radius: var(--radius-rounded);
1398
- --button-xs-padding-y: var(--spacing-1);
1399
- --button-xs-padding-x: var(--spacing-2-5);
1400
- --button-xs-line-height: var(--line-height-xs);
1401
- --button-xs-icon-size: var(--spacing-3);
1371
+ --button-sm-padding-y: var(--spacing-1-5);
1372
+ --button-sm-padding-x: var(--spacing-3);
1373
+ --button-sm-gap: var(--spacing-1-5);
1402
1374
  --button-xs-icon-button-padding: var(--spacing-1-5);
1403
- --button-xs-gap: var(--spacing-1);
1404
1375
  --button-xs-font-size: var(--font-size-xs);
1376
+ --button-xs-line-height: var(--line-height-xs);
1377
+ --button-xs-icon-size: var(--spacing-3);
1405
1378
  --button-xs-border-radius: var(--radius-rounded-sm);
1379
+ --button-xs-padding-y: var(--spacing-1);
1380
+ --button-xs-padding-x: var(--spacing-2-5);
1381
+ --button-xs-gap: var(--spacing-1);
1382
+ --button-md-icon-button-padding: var(--spacing-2-5);
1383
+ --button-md-line-height: var(--line-height-base);
1384
+ --button-md-font-size: var(--font-size-md);
1385
+ --button-md-icon-size: var(--spacing-5);
1386
+ --button-md-border-radius: var(--radius-rounded-md);
1387
+ --button-md-padding-x: var(--spacing-3-5);
1388
+ --button-md-padding-y: var(--spacing-2);
1389
+ --button-md-gap: var(--spacing-2);
1406
1390
  }
1407
1391