@nova-design-system/nova-base 3.0.0-beta.25 → 3.0.0-beta.28

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 (22) hide show
  1. package/LICENSE.MD +61 -108
  2. package/dist/css/ocean.css +851 -835
  3. package/dist/css/spark.css +866 -850
  4. package/dist/js/ocean_dark.d.ts +283 -278
  5. package/dist/js/ocean_dark.js +283 -278
  6. package/dist/js/ocean_light.d.ts +283 -278
  7. package/dist/js/ocean_light.js +283 -278
  8. package/dist/js/primitives.d.ts +190 -184
  9. package/dist/js/primitives.js +192 -186
  10. package/dist/js/spacings.d.ts +193 -193
  11. package/dist/js/spacings.js +234 -234
  12. package/dist/js/spark_dark.d.ts +284 -279
  13. package/dist/js/spark_dark.js +284 -279
  14. package/dist/js/spark_light.d.ts +284 -279
  15. package/dist/js/spark_light.js +284 -279
  16. package/dist/tokens/ocean_dark.json +1505 -1515
  17. package/dist/tokens/ocean_light.json +1505 -1515
  18. package/dist/tokens/primitives.json +758 -918
  19. package/dist/tokens/spacings.json +850 -850
  20. package/dist/tokens/spark_dark.json +1504 -1515
  21. package/dist/tokens/spark_light.json +1504 -1514
  22. package/package.json +3 -2
package/dist/css/ocean.css CHANGED
@@ -3,15 +3,35 @@
3
3
  */
4
4
 
5
5
  .dark:root {
6
- --shadow-color-opacity-3: rgba(11, 15, 17, 0.32);
7
- --shadow-color-opacity-2: rgba(11, 15, 17, 0.14);
8
- --shadow-color-opacity-1: rgba(11, 15, 17, 0.09);
9
- --shadow-color-opacity-0: rgba(11, 15, 17, 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;
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-hover: rgba(255, 255, 255, 0.12);
10
+ --components-button-destructive-low-background: rgba(255, 255, 255, 0);
11
+ --components-button-destructive-medium-background-hover: rgba(255, 255, 255, 0.12);
12
+ --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
13
+ --components-loader-white-background: rgba(255, 255, 255, 0.2);
14
+ --components-list-native-item-background-title: rgba(255, 255, 255, 0);
15
+ --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
16
+ --components-list-native-item-background-hover: #4e7fdf;
17
+ --components-list-native-item-background-default: rgba(255, 255, 255, 0);
18
+ --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
19
+ --components-list-native-border: #767578;
20
+ --components-list-native-separator: #838086;
21
+ --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
22
+ --components-list-native-background: #565558;
23
+ --components-form-opacity-disabled: 50px;
24
+ --components-form-opacity-default: 100px;
25
+ --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
26
+ --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
27
+ --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
28
+ --components-button-lower-border-2: rgba(255, 255, 255, 0);
29
+ --components-button-lower-border-hover: rgba(255, 255, 255, 0);
30
+ --components-button-lower-border: rgba(255, 255, 255, 0);
31
+ --components-button-low-background: rgba(255, 255, 255, 0);
32
+ --components-button-high-border-hover: rgba(255, 255, 255, 0);
33
+ --components-button-high-border: rgba(255, 255, 255, 0);
34
+ --components-wpf-components-2: #ffffff;
15
35
  --shadow-y-axis-2xl: 25px;
16
36
  --shadow-y-axis-xl-2: 20px;
17
37
  --shadow-y-axis-xl-1: 10px;
@@ -20,6 +40,11 @@
20
40
  --shadow-y-axis-md-2: 4px;
21
41
  --shadow-y-axis-md-1: 2px;
22
42
  --shadow-y-axis-base: 1px;
43
+ --shadow-y-axis-none: 0px;
44
+ --shadow-spread-2xl: -6px;
45
+ --shadow-spread-xl: -2px;
46
+ --shadow-spread-lg-2: 0px;
47
+ --shadow-spread-lg-1: 0px;
23
48
  --shadow-blur-2xl: 50px;
24
49
  --shadow-blur-xl-2: 0px;
25
50
  --shadow-blur-xl-1: 10px;
@@ -29,34 +54,12 @@
29
54
  --shadow-blur-md-1: 4px;
30
55
  --shadow-blur-base-2: 2px;
31
56
  --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);
36
- --components-list-native-item-background-title: rgba(255, 255, 255, 0);
37
- --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
38
- --components-list-native-item-background-hover: #4e7fdf;
39
- --components-list-native-item-background-default: rgba(255, 255, 255, 0);
40
- --components-list-native-background: #565558;
41
- --components-loader-white-background: rgba(255, 255, 255, 0.2);
42
- --components-form-opacity-disabled: 50px;
43
- --components-form-opacity-default: 100px;
44
- --components-button-gras-complementary-border-hover: rgba(255, 255, 255, 0);
45
- --components-button-gras-complementary-border: rgba(255, 255, 255, 0);
46
- --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
47
- --components-button-lower-border-2: rgba(255, 255, 255, 0);
48
- --components-button-lower-border-hover: rgba(255, 255, 255, 0);
49
- --components-button-lower-border: rgba(255, 255, 255, 0);
50
- --components-button-low-background: rgba(255, 255, 255, 0);
51
- --components-button-high-border-hover: rgba(255, 255, 255, 0);
52
- --components-button-high-border: rgba(255, 255, 255, 0);
53
- --components-button-destructive-low-border: rgba(255, 255, 255, 0);
54
- --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
55
- --components-button-destructive-low-background-hover: rgba(255, 255, 255, 0.12);
56
- --components-button-destructive-low-background: rgba(255, 255, 255, 0);
57
- --components-button-destructive-medium-background-hover: rgba(255, 255, 255, 0.12);
58
- --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
59
- --color-color: #ffffff;
57
+ --shadow-color-opacity-3: rgba(11, 15, 17, 0.32);
58
+ --shadow-color-opacity-2: rgba(11, 15, 17, 0.14);
59
+ --shadow-color-opacity-1: rgba(11, 15, 17, 0.09);
60
+ --shadow-color-opacity-0: rgba(11, 15, 17, 0.09);
61
+ --color-black: #000000;
62
+ --color-white: #ffffff;
60
63
  --color-interaction-neutral-background-hover: rgba(255, 255, 255, 0.1);
61
64
  --color-interaction-neutral-background: rgba(255, 255, 255, 0);
62
65
  --color-interaction-brand-low-background-hover: rgba(255, 255, 255, 0.12);
@@ -64,163 +67,165 @@
64
67
  --components-menu-contextual-item-background-hover: var(--color-interaction-neutral-background-hover);
65
68
  --components-menu-contextual-item-background: var(--color-interaction-neutral-background);
66
69
  --components-popover-background: var(--color-gray-ocean-900);
70
+ --components-avatar-color-background-1: var(--color-green-800);
67
71
  --components-tooltip-border: var(--color-gray-ocean-50);
68
72
  --components-tooltip-background: var(--color-gray-ocean-50);
73
+ --components-button-destructive-high-icon-hover: var(--color-base-black);
74
+ --components-button-destructive-high-icon: var(--color-base-black);
75
+ --components-button-destructive-high-text-hover: var(--color-base-black);
76
+ --components-button-destructive-high-text: var(--color-base-black);
77
+ --components-button-destructive-high-background-hover: var(--color-status-red-400);
78
+ --components-button-destructive-high-background: var(--color-status-red-300);
79
+ --components-button-destructive-low-icon-hover: var(--color-status-red-400);
80
+ --components-button-destructive-low-icon: var(--color-status-red-300);
81
+ --components-button-destructive-low-text-hover: var(--color-status-red-400);
82
+ --components-button-destructive-low-text: var(--color-status-red-300);
83
+ --components-button-destructive-medium-border-hover: var(--color-status-red-400);
84
+ --components-button-destructive-medium-border: var(--color-status-red-300);
85
+ --components-button-destructive-medium-icon-hover: var(--color-status-red-400);
86
+ --components-button-destructive-medium-icon: var(--color-status-red-300);
87
+ --components-button-destructive-medium-text-hover: var(--color-status-red-400);
88
+ --components-button-destructive-medium-text: var(--color-status-red-300);
89
+ --components-loader-brand-foreground: var(--color-petrol-500);
90
+ --components-loader-brand-background: var(--color-petrol-900);
91
+ --components-loader-white-foreground: var(--color-base-white);
69
92
  --components-list-custom-item-background-title: var(--color-interaction-neutral-background);
70
93
  --components-list-custom-item-background-disabled: var(--color-interaction-neutral-background);
71
94
  --components-list-custom-item-background-hover: var(--color-interaction-neutral-background-hover);
72
95
  --components-list-custom-item-background-default: var(--color-interaction-neutral-background);
73
96
  --components-list-native-item-content-hover: var(--color-base-white);
74
97
  --components-list-native-item-content-default: var(--color-base-white);
75
- --components-loader-white-foreground: var(--color-base-white);
76
- --components-loader-brand-foreground: var(--color-petrol-500);
77
- --components-loader-brand-background: var(--color-petrol-900);
98
+ --components-form-shape-foreground-default: var(--color-base-black);
99
+ --components-form-shape-background-disabled: var(--color-gray-ocean-700);
78
100
  --components-form-shape-background-hover: var(--color-gray-ocean-350);
79
101
  --components-form-shape-background-default: var(--color-gray-ocean-400);
80
- --components-form-shape-background-disabled: var(--color-gray-ocean-700);
81
- --components-form-shape-foreground-default: var(--color-base-black);
82
- --components-button-gras-complementary-icon-hover: var(--color-base-white);
83
- --components-button-gras-complementary-icon: var(--color-base-white);
84
- --components-button-gras-complementary-text-hover: var(--color-base-white);
85
- --components-button-gras-complementary-text: var(--color-base-white);
86
- --components-button-gras-complementary-background-hover: var(--color-gray-ocean-350);
87
- --components-button-gras-complementary-background: var(--color-gray-ocean-450);
102
+ --components-button-medium-border-hover: var(--components-button-gr-as-complementary-border-hover);
103
+ --components-button-medium-border: var(--components-button-gr-as-complementary-border);
104
+ --components-button-gr-as-complementary-icon-hover: var(--color-base-white);
105
+ --components-button-gr-as-complementary-icon: var(--color-base-white);
106
+ --components-button-gr-as-complementary-text-hover: var(--color-base-white);
107
+ --components-button-gr-as-complementary-text: var(--color-base-white);
108
+ --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-350);
109
+ --components-button-gr-as-complementary-background: var(--color-gray-ocean-450);
88
110
  --components-button-lower-background-hover: var(--color-interaction-brand-low-background-hover);
89
111
  --components-button-lower-background: var(--color-interaction-brand-low-background);
90
112
  --components-button-low-background-hover: var(--color-interaction-brand-low-background-hover);
91
- --components-button-medium-border-hover: var(--components-button-gras-complementary-border-hover);
92
- --components-button-medium-border: var(--components-button-gras-complementary-border);
93
- --components-button-destructive-low-icon-hover: var(--color-status-red-400);
94
- --components-button-destructive-low-icon: var(--color-status-red-300);
95
- --components-button-destructive-low-text-hover: var(--color-status-red-400);
96
- --components-button-destructive-low-text: var(--color-status-red-300);
97
- --components-button-destructive-medium-border-hover: var(--color-status-red-400);
98
- --components-button-destructive-medium-border: var(--color-status-red-300);
99
- --components-button-destructive-medium-icon-hover: var(--color-status-red-400);
100
- --components-button-destructive-medium-icon: var(--color-status-red-300);
101
- --components-button-destructive-medium-text-hover: var(--color-status-red-400);
102
- --components-button-destructive-medium-text: var(--color-status-red-300);
103
- --components-button-destructive-high-icon-hover: var(--color-base-black);
104
- --components-button-destructive-high-icon: var(--color-base-black);
105
- --components-button-destructive-high-text-hover: var(--color-base-black);
106
- --components-button-destructive-high-text: var(--color-base-black);
107
- --components-button-destructive-high-background-hover: var(--color-status-red-400);
108
- --components-button-destructive-high-background: var(--color-status-red-300);
109
- --color-chart-10: var(--color-crimson-500);
110
- --color-chart-9: var(--color-dark-blue-500);
111
- --color-chart-8: var(--color-orange-500);
112
- --color-chart-7: var(--color-yellow-500);
113
- --color-chart-6: var(--color-lime-500);
114
- --color-chart-5: var(--color-light-blue-500);
115
- --color-chart-4: var(--color-turquoise-500);
116
- --color-chart-3: var(--color-petrol-500);
117
- --color-chart-2: var(--color-dark-gray-500);
118
- --color-chart-1: var(--color-amber-500);
119
- --color-interaction-brand-high-icon-hover: var(--color-base-white);
120
- --color-interaction-brand-high-icon: var(--color-base-white);
121
- --color-interaction-brand-high-text-hover: var(--color-base-white);
122
- --color-interaction-brand-high-text: var(--color-base-white);
123
- --color-brand-accent-900: var(--color-orange-900);
124
- --color-brand-accent-800: var(--color-orange-800);
125
- --color-brand-accent-700: var(--color-orange-700);
126
- --color-brand-accent-600: var(--color-orange-600);
127
- --color-brand-accent-500: var(--color-orange-500);
128
- --color-brand-accent-400: var(--color-orange-400);
129
- --color-brand-accent-300: var(--color-orange-300);
130
- --color-brand-accent-200: var(--color-orange-200);
131
- --color-brand-accent-100: var(--color-orange-100);
132
- --color-brand-accent-50: var(--color-orange-50);
133
- --color-brand-action-lowest: var(--color-petrol-900);
134
- --color-brand-action-lower: var(--color-petrol-800);
135
- --color-brand-action-highest: var(--color-petrol-300);
136
- --color-brand-action-higher: var(--color-petrol-400);
137
- --color-brand-action-high: var(--color-petrol-500);
138
- --color-brand-action-medium: var(--color-petrol-600);
139
- --color-brand-action-low: var(--color-petrol-700);
140
- --color-brand-900: var(--color-petrol-900);
141
- --color-brand-800: var(--color-petrol-800);
142
- --color-brand-700: var(--color-petrol-700);
143
- --color-brand-600: var(--color-petrol-600);
144
- --color-brand-500: var(--color-petrol-500);
145
- --color-brand-400: var(--color-petrol-400);
146
- --color-brand-300: var(--color-petrol-300);
147
- --color-brand-200: var(--color-petrol-200);
148
- --color-brand-100: var(--color-petrol-100);
149
- --color-brand-50: var(--color-petrol-50);
150
113
  --color-dont-use-background: var(--color-gray-ocean-900);
151
- --color-dont-use-border: var(--color-gray-ocean-750);
152
114
  --color-dont-use-content: var(--color-gray-ocean-750);
153
- --color-rainbow-10-border: var(--color-gray-ocean-250);
115
+ --color-dont-use-border: var(--color-gray-ocean-750);
154
116
  --color-rainbow-10-content: var(--color-gray-ocean-250);
117
+ --color-rainbow-10-border: var(--color-gray-ocean-250);
155
118
  --color-rainbow-10-background: var(--color-gray-ocean-650);
156
- --color-rainbow-9-border: var(--color-lime-500);
157
119
  --color-rainbow-9-content: var(--color-lime-500);
120
+ --color-rainbow-9-border: var(--color-lime-500);
158
121
  --color-rainbow-9-background: var(--color-lime-900);
159
- --color-rainbow-8-border: var(--color-petrol-300);
160
122
  --color-rainbow-8-content: var(--color-petrol-300);
123
+ --color-rainbow-8-border: var(--color-petrol-300);
161
124
  --color-rainbow-8-background: var(--color-petrol-800);
162
- --color-rainbow-7-border: var(--color-green-300);
163
125
  --color-rainbow-7-content: var(--color-green-300);
126
+ --color-rainbow-7-border: var(--color-green-300);
164
127
  --color-rainbow-7-background: var(--color-green-800);
165
- --color-rainbow-6-border: var(--color-crimson-200);
166
128
  --color-rainbow-6-content: var(--color-crimson-200);
129
+ --color-rainbow-6-border: var(--color-crimson-200);
167
130
  --color-rainbow-6-background: var(--color-crimson-700);
168
- --color-rainbow-5-border: var(--color-turquoise-500);
169
131
  --color-rainbow-5-content: var(--color-turquoise-500);
132
+ --color-rainbow-5-border: var(--color-turquoise-500);
170
133
  --color-rainbow-5-background: var(--color-turquoise-900);
171
- --color-rainbow-4-border: var(--color-red-200);
172
134
  --color-rainbow-4-content: var(--color-red-200);
135
+ --color-rainbow-4-border: var(--color-red-200);
173
136
  --color-rainbow-4-background: var(--color-red-800);
174
- --color-rainbow-3-border: var(--color-yellow-600);
175
137
  --color-rainbow-3-content: var(--color-yellow-600);
138
+ --color-rainbow-3-border: var(--color-yellow-600);
176
139
  --color-rainbow-3-background: var(--color-yellow-900);
177
- --color-rainbow-2-border: var(--color-orange-400);
178
140
  --color-rainbow-2-content: var(--color-orange-400);
141
+ --color-rainbow-2-border: var(--color-orange-400);
179
142
  --color-rainbow-2-background: var(--color-orange-900);
180
- --color-rainbow-1-border: var(--color-amber-500);
181
143
  --color-rainbow-1-content: var(--color-amber-500);
144
+ --color-rainbow-1-border: var(--color-amber-500);
182
145
  --color-rainbow-1-background: var(--color-amber-900);
183
- --color-feedback-neutral-high-content: var(--color-base-black);
184
- --color-feedback-neutral-high-border: var(--color-gray-ocean-300);
185
- --color-feedback-neutral-high-background: var(--color-gray-ocean-300);
186
- --color-feedback-neutral-low-content: var(--color-gray-ocean-300);
187
- --color-feedback-neutral-low-border: var(--color-gray-ocean-300);
188
- --color-feedback-neutral-low-background: var(--color-gray-ocean-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
146
  --color-feedback-success-low-content: var(--color-status-green-300);
199
147
  --color-feedback-success-low-border: var(--color-status-green-300);
200
148
  --color-feedback-success-low-background: var(--color-status-green-900);
201
- --color-feedback-error-high-content: var(--color-base-black);
202
- --color-feedback-error-high-border: var(--color-status-red-400);
203
- --color-feedback-error-high-background: var(--color-status-red-400);
149
+ --color-feedback-success-high-content: var(--color-base-black);
150
+ --color-feedback-success-high-border: var(--color-status-green-300);
151
+ --color-feedback-success-high-background: var(--color-status-green-300);
152
+ --color-feedback-warning-low-content: var(--color-status-yellow-300);
153
+ --color-feedback-warning-low-border: var(--color-status-yellow-300);
154
+ --color-feedback-warning-low-background: var(--color-status-yellow-900);
155
+ --color-feedback-warning-high-content: var(--color-base-black);
156
+ --color-feedback-warning-high-border: var(--color-status-yellow-300);
157
+ --color-feedback-warning-high-background: var(--color-status-yellow-300);
158
+ --color-feedback-neutral-low-content: var(--color-gray-ocean-300);
159
+ --color-feedback-neutral-low-border: var(--color-gray-ocean-300);
160
+ --color-feedback-neutral-low-background: var(--color-gray-ocean-650);
161
+ --color-feedback-neutral-high-content: var(--color-base-black);
162
+ --color-feedback-neutral-high-border: var(--color-gray-ocean-300);
163
+ --color-feedback-neutral-high-background: var(--color-gray-ocean-300);
204
164
  --color-feedback-error-low-content: var(--color-status-red-400);
205
165
  --color-feedback-error-low-border: var(--color-status-red-400);
206
166
  --color-feedback-error-low-background: var(--color-status-red-900);
167
+ --color-feedback-error-high-content: var(--color-base-black);
168
+ --color-feedback-error-high-border: var(--color-status-red-400);
169
+ --color-feedback-error-high-background: var(--color-status-red-400);
170
+ --color-feedback-information-low-content: var(--color-status-blue-300);
171
+ --color-feedback-information-low-border: var(--color-status-blue-300);
172
+ --color-feedback-information-low-background: var(--color-status-blue-900);
207
173
  --color-feedback-information-high-content: var(--color-base-black);
208
174
  --color-feedback-information-high-border: var(--color-status-blue-300);
209
175
  --color-feedback-information-high-background: var(--color-status-blue-300);
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);
176
+ --color-chart-10: var(--color-crimson-500);
177
+ --color-chart-9: var(--color-dark-blue-500);
178
+ --color-chart-8: var(--color-orange-500);
179
+ --color-chart-7: var(--color-yellow-500);
180
+ --color-chart-6: var(--color-lime-500);
181
+ --color-chart-5: var(--color-light-blue-500);
182
+ --color-chart-4: var(--color-turquoise-500);
183
+ --color-chart-3: var(--color-petrol-500);
184
+ --color-chart-2: var(--color-dark-gray-500);
185
+ --color-chart-1: var(--color-amber-500);
186
+ --color-brand-action-lowest: var(--color-petrol-900);
187
+ --color-brand-action-lower: var(--color-petrol-800);
188
+ --color-brand-action-low: var(--color-petrol-700);
189
+ --color-brand-action-medium: var(--color-petrol-600);
190
+ --color-brand-action-high: var(--color-petrol-500);
191
+ --color-brand-action-higher: var(--color-petrol-400);
192
+ --color-brand-action-highest: var(--color-petrol-300);
193
+ --color-brand-accent-900: var(--color-orange-900);
194
+ --color-brand-accent-800: var(--color-orange-800);
195
+ --color-brand-accent-700: var(--color-orange-700);
196
+ --color-brand-accent-600: var(--color-orange-600);
197
+ --color-brand-accent-500: var(--color-orange-500);
198
+ --color-brand-accent-400: var(--color-orange-400);
199
+ --color-brand-accent-300: var(--color-orange-300);
200
+ --color-brand-accent-200: var(--color-orange-200);
201
+ --color-brand-accent-100: var(--color-orange-100);
202
+ --color-brand-accent-50: var(--color-orange-50);
203
+ --color-brand-brand-2: var(--color-orange-500);
204
+ --color-brand-900: var(--color-petrol-900);
205
+ --color-brand-800: var(--color-petrol-800);
206
+ --color-brand-700: var(--color-petrol-700);
207
+ --color-brand-600: var(--color-petrol-600);
208
+ --color-brand-500: var(--color-petrol-500);
209
+ --color-brand-400: var(--color-petrol-400);
210
+ --color-brand-300: var(--color-petrol-300);
211
+ --color-brand-200: var(--color-petrol-200);
212
+ --color-brand-100: var(--color-petrol-100);
213
+ --color-brand-50: var(--color-petrol-50);
214
+ --color-interaction-brand-high-icon-hover: var(--color-base-white);
215
+ --color-interaction-brand-high-icon: var(--color-base-white);
216
+ --color-interaction-brand-high-text-hover: var(--color-base-white);
217
+ --color-interaction-brand-high-text: var(--color-base-white);
213
218
  --color-base-border-focus: var(--color-petrol-700);
214
219
  --color-base-border-low-emphasis: var(--color-gray-ocean-500);
215
220
  --color-base-border-medium-emphasis: var(--color-gray-ocean-400);
216
221
  --color-base-border-high-emphasis: var(--color-gray-ocean-300);
217
- --color-base-content-lower-emphasis: var(--color-gray-ocean-450);
218
222
  --color-base-content-inverted-low-emphasis: var(--color-gray-ocean-450);
219
223
  --color-base-content-inverted-medium-emphasis: var(--color-gray-ocean-650);
220
224
  --color-base-content-inverted-high-emphasis: var(--color-gray-ocean-900);
221
- --color-base-content-high-emphasis: var(--color-gray-ocean-50);
222
- --color-base-content-medium-emphasis: var(--color-gray-ocean-200);
225
+ --color-base-content-lower-emphasis: var(--color-gray-ocean-450);
223
226
  --color-base-content-low-emphasis: var(--color-gray-ocean-300);
227
+ --color-base-content-medium-emphasis: var(--color-gray-ocean-200);
228
+ --color-base-content-high-emphasis: var(--color-gray-ocean-50);
224
229
  --color-base-level-40-hover: var(--color-gray-ocean-450);
225
230
  --color-base-level-30-hover: var(--color-gray-ocean-550);
226
231
  --color-base-level-20-hover: var(--color-gray-ocean-650);
@@ -231,20 +236,13 @@
231
236
  --color-base-level-30: var(--color-gray-ocean-600);
232
237
  --color-base-level-20: var(--color-gray-ocean-700);
233
238
  --color-base-level-10: var(--color-gray-ocean-800);
234
- --components-menu-contextual-background: var(--color-base-level-00);
235
- --components-menu-contextual-border: var(--color-base-border-low-emphasis);
236
239
  --components-menu-contextual-item-content-disabled: var(--color-base-content-lower-emphasis);
237
240
  --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);
238
243
  --components-popover-supporting-text: var(--color-base-content-low-emphasis);
239
244
  --components-popover-text: var(--color-base-content-inverted-medium-emphasis);
240
245
  --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);
248
246
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-content);
249
247
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
250
248
  --components-notification-neutral-background: var(--color-base-level-20);
@@ -262,8 +260,36 @@
262
260
  --components-notification-information-border: var(--color-feedback-information-low-border);
263
261
  --components-notification-information-icon: var(--color-feedback-information-low-content);
264
262
  --components-notification-information-background: var(--color-base-level-20);
265
- --components-alert-content-title: var(--color-base-content-high-emphasis);
266
- --components-alert-content-description: var(--color-base-content-medium-emphasis);
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);
267
293
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-content);
268
294
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
269
295
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -273,93 +299,75 @@
273
299
  --components-alert-error-icon: var(--color-feedback-error-low-content);
274
300
  --components-alert-error-border: var(--color-feedback-error-low-border);
275
301
  --components-alert-error-background: var(--color-feedback-error-low-background);
276
- --components-alert-warning-border: var(--color-feedback-warning-low-border);
277
302
  --components-alert-warning-icon: var(--color-feedback-warning-low-content);
303
+ --components-alert-warning-border: var(--color-feedback-warning-low-border);
278
304
  --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);
279
307
  --components-alert-information-border: var(--color-feedback-information-low-border);
280
308
  --components-alert-information-icon: var(--color-feedback-information-low-content);
281
309
  --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);
282
327
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
283
328
  --components-form-shape-border-error: var(--color-feedback-error-low-border);
284
329
  --components-form-shape-border-hover: var(--color-base-border-high-emphasis);
285
330
  --components-form-shape-border-default: var(--color-base-border-medium-emphasis);
286
331
  --components-form-shape-background-error: var(--color-feedback-error-high-background);
287
332
  --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-medium-emphasis);
296
333
  --components-form-field-icon-success: var(--color-feedback-success-low-content);
297
334
  --components-form-field-icon-error: var(--color-feedback-error-low-content);
298
335
  --components-form-field-icon-disabled: var(--color-base-border-medium-emphasis);
299
336
  --components-form-field-icon-default: var(--color-base-content-low-emphasis);
300
337
  --components-form-field-content-text: var(--color-base-content-high-emphasis);
301
338
  --components-form-field-content-placeholder: var(--color-base-content-low-emphasis);
302
- --components-form-field-border-disabled: var(--color-base-border-medium-emphasis);
303
339
  --components-form-field-border-readonly: var(--color-base-border-low-emphasis);
304
- --components-form-field-border-hover: var(--color-base-border-high-emphasis);
305
- --components-form-field-border-error: var(--color-feedback-error-low-border);
306
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
+ --components-form-field-border-hover: var(--color-base-border-high-emphasis);
343
+ --components-form-field-border-disabled: var(--color-base-border-medium-emphasis);
307
344
  --components-form-field-border-default: var(--color-base-border-medium-emphasis);
308
- --components-form-field-background-focus: var(--color-base-level-00);
309
- --components-form-field-background-hover: var(--color-base-level-00-hover);
345
+ --components-form-field-background-readonly: var(--color-base-level-00-hover);
310
346
  --components-form-field-background-error: var(--color-feedback-error-high-background);
311
347
  --components-form-field-background-checked: var(--color-brand-action-medium);
312
- --components-form-field-background-readonly: var(--color-base-level-00-hover);
313
348
  --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);
314
351
  --components-form-field-background-default: var(--color-base-level-00);
315
- --components-button-medium-text-hover: var(--components-button-gras-complementary-text-hover);
316
- --components-button-medium-icon-hover: var(--components-button-gras-complementary-icon-hover);
317
- --components-button-medium-text: var(--components-button-gras-complementary-text);
318
- --components-button-medium-background-hover: var(--components-button-gras-complementary-background-hover);
319
- --components-button-medium-background: var(--components-button-gras-complementary-background);
320
- --components-button-medium-icon: var(--components-button-gras-complementary-icon);
321
- --components-button-high-text-hover: var(--color-interaction-brand-high-text-hover);
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-medium-emphasis);
357
+ --components-form-text-required: var(--color-feedback-error-low-content);
358
+ --components-button-medium-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
359
+ --components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
360
+ --components-button-medium-text-hover: var(--components-button-gr-as-complementary-text-hover);
361
+ --components-button-medium-text: var(--components-button-gr-as-complementary-text);
362
+ --components-button-medium-background-hover: var(--components-button-gr-as-complementary-background-hover);
363
+ --components-button-medium-background: var(--components-button-gr-as-complementary-background);
322
364
  --components-button-high-icon-hover: var(--color-interaction-brand-high-icon-hover);
323
- --components-button-high-text: var(--color-interaction-brand-high-text);
324
365
  --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);
366
+ --components-button-high-text-hover: var(--color-interaction-brand-high-text-hover);
367
+ --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);
363
371
  --color-interaction-link-table-icon-hover: var(--color-brand-action-medium);
364
372
  --color-interaction-link-table-icon: var(--color-base-content-high-emphasis);
365
373
  --color-interaction-link-table-text-hover: var(--color-brand-action-medium);
@@ -368,36 +376,33 @@
368
376
  --color-interaction-link-standalone-icon: var(--color-brand-action-medium);
369
377
  --color-interaction-link-standalone-text-hover: var(--color-brand-action-high);
370
378
  --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);
371
383
  --color-interaction-neutral-border-hover: var(--color-base-content-medium-emphasis);
372
384
  --color-interaction-neutral-border: var(--color-base-content-low-emphasis);
373
385
  --color-interaction-neutral-icon-hover: var(--color-base-content-medium-emphasis);
374
386
  --color-interaction-neutral-icon: var(--color-base-content-low-emphasis);
375
387
  --color-interaction-neutral-text-hover: var(--color-base-content-medium-emphasis);
376
388
  --color-interaction-neutral-text: var(--color-base-content-low-emphasis);
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);
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);
381
393
  --color-interaction-brand-low-border-hover: var(--color-brand-action-highest);
382
394
  --color-interaction-brand-low-border: var(--color-brand-action-higher);
383
395
  --color-interaction-brand-low-icon-hover: var(--color-brand-action-highest);
384
396
  --color-interaction-brand-low-icon: var(--color-brand-action-higher);
385
397
  --color-interaction-brand-low-text-hover: var(--color-brand-action-highest);
386
398
  --color-interaction-brand-low-text: var(--color-brand-action-higher);
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);
394
399
  --color-base-border-focus-high: var(--color-brand-action-medium);
395
400
  --components-menu-contextual-item-content-hover: var(--color-interaction-neutral-text-hover);
396
401
  --components-menu-contextual-item-content: var(--color-interaction-neutral-text);
397
402
  --components-list-custom-item-content-hover: var(--color-interaction-neutral-text-hover);
398
403
  --components-list-custom-item-content-default: var(--color-interaction-neutral-text);
399
- --components-form-shape-border-focus: var(--color-focus-brand);
400
404
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
405
+ --components-form-shape-border-focus: var(--color-focus-brand);
401
406
  --components-form-field-border-focus: var(--color-focus-brand);
402
407
  --components-button-lower-icon-hover: var(--color-interaction-brand-low-icon-hover);
403
408
  --components-button-lower-icon: var(--color-interaction-brand-low-icon);
@@ -405,10 +410,10 @@
405
410
  --components-button-lower-text: var(--color-interaction-brand-low-text);
406
411
  --components-button-low-border-hover: var(--color-interaction-brand-low-border-hover);
407
412
  --components-button-low-border: var(--color-interaction-brand-low-border);
408
- --components-button-low-text-hover: var(--color-interaction-brand-low-text-hover);
409
- --components-button-low-text: var(--color-interaction-brand-low-text);
410
413
  --components-button-low-icon-hover: var(--color-interaction-brand-low-icon-hover);
411
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);
412
417
  --components-button-high-background-hover: var(--color-interaction-brand-high-background-hover);
413
418
  --components-button-high-background: var(--color-interaction-brand-high-background);
414
419
  }
@@ -441,15 +446,35 @@
441
446
  */
442
447
 
443
448
  :root {
444
- --shadow-color-opacity-3: rgba(11, 15, 17, 0.25);
445
- --shadow-color-opacity-2: rgba(11, 15, 17, 0.1);
446
- --shadow-color-opacity-1: rgba(11, 15, 17, 0.06);
447
- --shadow-color-opacity-0: rgba(255, 255, 255, 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;
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-hover: rgba(11, 15, 17, 0.08);
453
+ --components-button-destructive-low-background: rgba(255, 255, 255, 0);
454
+ --components-button-destructive-medium-background-hover: rgba(11, 15, 17, 0.08);
455
+ --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
456
+ --components-loader-white-background: rgba(255, 255, 255, 0.2);
457
+ --components-list-native-item-background-title: rgba(255, 255, 255, 0);
458
+ --components-list-native-item-background-disabled: rgba(255, 255, 255, 0);
459
+ --components-list-native-item-background-hover: #4e7fdf;
460
+ --components-list-native-item-background-default: rgba(255, 255, 255, 0);
461
+ --components-list-native-item-content-disabled: rgba(255, 255, 255, 0.5);
462
+ --components-list-native-border: #767578;
463
+ --components-list-native-separator: #838086;
464
+ --components-list-native-item-title-content: rgba(255, 255, 255, 0.5);
465
+ --components-list-native-background: #565558;
466
+ --components-form-opacity-disabled: 50px;
467
+ --components-form-opacity-default: 100px;
468
+ --components-button-gr-as-complementary-border-hover: rgba(255, 255, 255, 0);
469
+ --components-button-gr-as-complementary-border: rgba(255, 255, 255, 0);
470
+ --components-button-lower-border-hover-2: rgba(255, 255, 255, 0);
471
+ --components-button-lower-border-2: rgba(255, 255, 255, 0);
472
+ --components-button-lower-border-hover: rgba(255, 255, 255, 0);
473
+ --components-button-lower-border: rgba(255, 255, 255, 0);
474
+ --components-button-low-background: rgba(255, 255, 255, 0);
475
+ --components-button-high-border-hover: rgba(255, 255, 255, 0);
476
+ --components-button-high-border: rgba(255, 255, 255, 0);
477
+ --components-wpf-components-2: #ffffff;
453
478
  --shadow-y-axis-2xl: 25px;
454
479
  --shadow-y-axis-xl-2: 20px;
455
480
  --shadow-y-axis-xl-1: 10px;
@@ -458,6 +483,11 @@
458
483
  --shadow-y-axis-md-2: 4px;
459
484
  --shadow-y-axis-md-1: 2px;
460
485
  --shadow-y-axis-base: 1px;
486
+ --shadow-y-axis-none: 0px;
487
+ --shadow-spread-2xl: -12px;
488
+ --shadow-spread-xl: -5px;
489
+ --shadow-spread-lg-2: -3px;
490
+ --shadow-spread-lg-1: -2px;
461
491
  --shadow-blur-2xl: 50px;
462
492
  --shadow-blur-xl-2: 25px;
463
493
  --shadow-blur-xl-1: 10px;
@@ -467,34 +497,12 @@
467
497
  --shadow-blur-md-1: 4px;
468
498
  --shadow-blur-base-2: 2px;
469
499
  --shadow-blur-base-1: 3px;
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-low-background: rgba(255, 255, 255, 0);
489
- --components-button-high-border-hover: rgba(255, 255, 255, 0);
490
- --components-button-high-border: rgba(255, 255, 255, 0);
491
- --components-button-destructive-low-border: rgba(255, 255, 255, 0);
492
- --components-button-destructive-low-border-hover: rgba(255, 255, 255, 0);
493
- --components-button-destructive-low-background-hover: rgba(11, 15, 17, 0.08);
494
- --components-button-destructive-low-background: rgba(255, 255, 255, 0);
495
- --components-button-destructive-medium-background-hover: rgba(11, 15, 17, 0.08);
496
- --components-button-destructive-medium-background: rgba(255, 255, 255, 0);
497
- --color-color: #ffffff;
500
+ --shadow-color-opacity-3: rgba(11, 15, 17, 0.25);
501
+ --shadow-color-opacity-2: rgba(11, 15, 17, 0.1);
502
+ --shadow-color-opacity-1: rgba(11, 15, 17, 0.06);
503
+ --shadow-color-opacity-0: rgba(255, 255, 255, 0.06);
504
+ --color-black: #000000;
505
+ --color-white: #ffffff;
498
506
  --color-interaction-neutral-background-hover: rgba(165, 166, 167, 0.12);
499
507
  --color-interaction-neutral-background: rgba(255, 255, 255, 0);
500
508
  --color-interaction-brand-low-background-hover: rgba(11, 15, 17, 0.08);
@@ -502,32 +510,15 @@
502
510
  --components-menu-contextual-item-background-hover: var(--color-interaction-neutral-background-hover);
503
511
  --components-menu-contextual-item-background: var(--color-interaction-neutral-background);
504
512
  --components-popover-background: var(--color-gray-ocean-50);
513
+ --components-avatar-color-background-1: var(--color-green-50);
505
514
  --components-tooltip-border: var(--color-gray-ocean-900);
506
515
  --components-tooltip-background: var(--color-gray-ocean-900);
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-petrol-500);
515
- --components-loader-brand-background: var(--color-petrol-50);
516
- --components-form-shape-background-hover: var(--color-gray-ocean-100);
517
- --components-form-shape-background-default: var(--color-gray-ocean-75);
518
- --components-form-shape-background-disabled: var(--color-gray-ocean-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-ocean-300);
525
- --components-button-gras-complementary-background: var(--color-gray-ocean-200);
526
- --components-button-lower-background-hover: var(--color-interaction-brand-low-background-hover);
527
- --components-button-lower-background: var(--color-interaction-brand-low-background);
528
- --components-button-low-background-hover: var(--color-interaction-brand-low-background-hover);
529
- --components-button-medium-border-hover: var(--components-button-gras-complementary-border-hover);
530
- --components-button-medium-border: var(--components-button-gras-complementary-border);
516
+ --components-button-destructive-high-icon-hover: var(--color-base-black);
517
+ --components-button-destructive-high-icon: var(--color-base-black);
518
+ --components-button-destructive-high-text-hover: var(--color-base-black);
519
+ --components-button-destructive-high-text: var(--color-base-black);
520
+ --components-button-destructive-high-background-hover: var(--color-status-red-400);
521
+ --components-button-destructive-high-background: var(--color-status-red-300);
531
522
  --components-button-destructive-low-icon-hover: var(--color-status-red-600);
532
523
  --components-button-destructive-low-icon: var(--color-status-red-500);
533
524
  --components-button-destructive-low-text-hover: var(--color-status-red-600);
@@ -538,127 +529,146 @@
538
529
  --components-button-destructive-medium-icon: var(--color-status-red-500);
539
530
  --components-button-destructive-medium-text-hover: var(--color-status-red-600);
540
531
  --components-button-destructive-medium-text: var(--color-status-red-500);
541
- --components-button-destructive-high-icon-hover: var(--color-base-black);
542
- --components-button-destructive-high-icon: var(--color-base-black);
543
- --components-button-destructive-high-text-hover: var(--color-base-black);
544
- --components-button-destructive-high-text: var(--color-base-black);
545
- --components-button-destructive-high-background-hover: var(--color-status-red-400);
546
- --components-button-destructive-high-background: var(--color-status-red-300);
547
- --color-chart-10: var(--color-crimson-500);
548
- --color-chart-9: var(--color-dark-blue-500);
549
- --color-chart-8: var(--color-orange-500);
550
- --color-chart-7: var(--color-yellow-500);
551
- --color-chart-6: var(--color-lime-500);
552
- --color-chart-5: var(--color-light-blue-500);
553
- --color-chart-4: var(--color-turquoise-500);
554
- --color-chart-3: var(--color-petrol-500);
555
- --color-chart-2: var(--color-dark-gray-500);
556
- --color-chart-1: var(--color-amber-500);
557
- --color-interaction-brand-high-icon-hover: var(--color-base-black);
558
- --color-interaction-brand-high-icon: var(--color-base-black);
559
- --color-interaction-brand-high-text-hover: var(--color-base-black);
560
- --color-interaction-brand-high-text: var(--color-base-black);
561
- --color-brand-accent-900: var(--color-orange-900);
562
- --color-brand-accent-800: var(--color-orange-800);
563
- --color-brand-accent-700: var(--color-orange-700);
564
- --color-brand-accent-600: var(--color-orange-600);
565
- --color-brand-accent-500: var(--color-orange-500);
566
- --color-brand-accent-400: var(--color-orange-400);
567
- --color-brand-accent-300: var(--color-orange-300);
568
- --color-brand-accent-200: var(--color-orange-200);
569
- --color-brand-accent-100: var(--color-orange-100);
570
- --color-brand-accent-50: var(--color-orange-50);
571
- --color-brand-action-lowest: var(--color-petrol-100);
572
- --color-brand-action-lower: var(--color-petrol-200);
573
- --color-brand-action-highest: var(--color-petrol-700);
574
- --color-brand-action-higher: var(--color-petrol-600);
575
- --color-brand-action-high: var(--color-petrol-500);
576
- --color-brand-action-medium: var(--color-petrol-400);
577
- --color-brand-action-low: var(--color-petrol-300);
578
- --color-brand-900: var(--color-petrol-900);
579
- --color-brand-800: var(--color-petrol-800);
580
- --color-brand-700: var(--color-petrol-700);
581
- --color-brand-600: var(--color-petrol-600);
582
- --color-brand-500: var(--color-petrol-500);
583
- --color-brand-400: var(--color-petrol-400);
584
- --color-brand-300: var(--color-petrol-300);
585
- --color-brand-200: var(--color-petrol-200);
586
- --color-brand-100: var(--color-petrol-100);
587
- --color-brand-50: var(--color-petrol-50);
532
+ --components-loader-brand-foreground: var(--color-petrol-500);
533
+ --components-loader-brand-background: var(--color-petrol-50);
534
+ --components-loader-white-foreground: var(--color-base-white);
535
+ --components-list-custom-item-background-title: var(--color-interaction-neutral-background);
536
+ --components-list-custom-item-background-disabled: var(--color-interaction-neutral-background);
537
+ --components-list-custom-item-background-hover: var(--color-interaction-neutral-background-hover);
538
+ --components-list-custom-item-background-default: var(--color-interaction-neutral-background);
539
+ --components-list-native-item-content-hover: var(--color-base-white);
540
+ --components-list-native-item-content-default: var(--color-base-white);
541
+ --components-form-shape-foreground-default: var(--color-base-white);
542
+ --components-form-shape-background-disabled: var(--color-gray-ocean-75);
543
+ --components-form-shape-background-hover: var(--color-gray-ocean-100);
544
+ --components-form-shape-background-default: var(--color-gray-ocean-75);
545
+ --components-button-medium-border-hover: var(--components-button-gr-as-complementary-border-hover);
546
+ --components-button-medium-border: var(--components-button-gr-as-complementary-border);
547
+ --components-button-gr-as-complementary-icon-hover: var(--color-base-black);
548
+ --components-button-gr-as-complementary-icon: var(--color-base-black);
549
+ --components-button-gr-as-complementary-text-hover: var(--color-base-black);
550
+ --components-button-gr-as-complementary-text: var(--color-base-black);
551
+ --components-button-gr-as-complementary-background-hover: var(--color-gray-ocean-300);
552
+ --components-button-gr-as-complementary-background: var(--color-gray-ocean-200);
553
+ --components-button-lower-background-hover: var(--color-interaction-brand-low-background-hover);
554
+ --components-button-lower-background: var(--color-interaction-brand-low-background);
555
+ --components-button-low-background-hover: var(--color-interaction-brand-low-background-hover);
588
556
  --color-dont-use-background: var(--color-gray-ocean-50);
589
- --color-dont-use-border: var(--color-gray-ocean-150);
590
557
  --color-dont-use-content: var(--color-gray-ocean-150);
591
- --color-rainbow-10-border: var(--color-gray-ocean-500);
558
+ --color-dont-use-border: var(--color-gray-ocean-150);
592
559
  --color-rainbow-10-content: var(--color-gray-ocean-500);
560
+ --color-rainbow-10-border: var(--color-gray-ocean-500);
593
561
  --color-rainbow-10-background: var(--color-gray-ocean-75);
594
- --color-rainbow-9-border: var(--color-lime-700);
595
562
  --color-rainbow-9-content: var(--color-lime-700);
563
+ --color-rainbow-9-border: var(--color-lime-700);
596
564
  --color-rainbow-9-background: var(--color-lime-50);
597
- --color-rainbow-8-border: var(--color-petrol-600);
598
565
  --color-rainbow-8-content: var(--color-petrol-600);
566
+ --color-rainbow-8-border: var(--color-petrol-600);
599
567
  --color-rainbow-8-background: var(--color-petrol-50);
600
- --color-rainbow-7-border: var(--color-green-600);
601
568
  --color-rainbow-7-content: var(--color-green-600);
569
+ --color-rainbow-7-border: var(--color-green-600);
602
570
  --color-rainbow-7-background: var(--color-green-50);
603
- --color-rainbow-6-border: var(--color-crimson-400);
604
571
  --color-rainbow-6-content: var(--color-crimson-400);
572
+ --color-rainbow-6-border: var(--color-crimson-400);
605
573
  --color-rainbow-6-background: var(--color-crimson-50);
606
- --color-rainbow-5-border: var(--color-turquoise-800);
607
574
  --color-rainbow-5-content: var(--color-turquoise-800);
575
+ --color-rainbow-5-border: var(--color-turquoise-800);
608
576
  --color-rainbow-5-background: var(--color-turquoise-100);
609
- --color-rainbow-4-border: var(--color-red-500);
610
577
  --color-rainbow-4-content: var(--color-red-500);
578
+ --color-rainbow-4-border: var(--color-red-500);
611
579
  --color-rainbow-4-background: var(--color-red-50);
612
- --color-rainbow-3-border: var(--color-yellow-800);
613
580
  --color-rainbow-3-content: var(--color-yellow-800);
581
+ --color-rainbow-3-border: var(--color-yellow-800);
614
582
  --color-rainbow-3-background: var(--color-yellow-100);
615
- --color-rainbow-2-border: var(--color-orange-700);
616
583
  --color-rainbow-2-content: var(--color-orange-700);
584
+ --color-rainbow-2-border: var(--color-orange-700);
617
585
  --color-rainbow-2-background: var(--color-orange-50);
618
- --color-rainbow-1-border: var(--color-amber-600);
619
586
  --color-rainbow-1-content: var(--color-amber-600);
587
+ --color-rainbow-1-border: var(--color-amber-600);
620
588
  --color-rainbow-1-background: var(--color-amber-50);
621
- --color-feedback-neutral-high-content: var(--color-base-white);
622
- --color-feedback-neutral-high-border: var(--color-gray-ocean-400);
623
- --color-feedback-neutral-high-background: var(--color-gray-ocean-400);
624
- --color-feedback-neutral-low-content: var(--color-gray-ocean-400);
625
- --color-feedback-neutral-low-border: var(--color-gray-ocean-400);
626
- --color-feedback-neutral-low-background: var(--color-gray-ocean-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
589
  --color-feedback-success-low-content: var(--color-status-green-500);
637
590
  --color-feedback-success-low-border: var(--color-status-green-500);
638
591
  --color-feedback-success-low-background: var(--color-status-green-50);
639
- --color-feedback-error-high-content: var(--color-base-white);
640
- --color-feedback-error-high-border: var(--color-status-red-500);
641
- --color-feedback-error-high-background: var(--color-status-red-500);
592
+ --color-feedback-success-high-content: var(--color-base-white);
593
+ --color-feedback-success-high-border: var(--color-status-green-400);
594
+ --color-feedback-success-high-background: var(--color-status-green-400);
595
+ --color-feedback-warning-low-content: var(--color-status-yellow-500);
596
+ --color-feedback-warning-low-border: var(--color-status-yellow-500);
597
+ --color-feedback-warning-low-background: var(--color-status-yellow-50);
598
+ --color-feedback-warning-high-content: var(--color-base-white);
599
+ --color-feedback-warning-high-border: var(--color-status-yellow-400);
600
+ --color-feedback-warning-high-background: var(--color-status-yellow-400);
601
+ --color-feedback-neutral-low-content: var(--color-gray-ocean-400);
602
+ --color-feedback-neutral-low-border: var(--color-gray-ocean-400);
603
+ --color-feedback-neutral-low-background: var(--color-gray-ocean-75);
604
+ --color-feedback-neutral-high-content: var(--color-base-white);
605
+ --color-feedback-neutral-high-border: var(--color-gray-ocean-400);
606
+ --color-feedback-neutral-high-background: var(--color-gray-ocean-400);
642
607
  --color-feedback-error-low-content: var(--color-status-red-500);
643
608
  --color-feedback-error-low-border: var(--color-status-red-500);
644
609
  --color-feedback-error-low-background: var(--color-status-red-50);
610
+ --color-feedback-error-high-content: var(--color-base-white);
611
+ --color-feedback-error-high-border: var(--color-status-red-500);
612
+ --color-feedback-error-high-background: var(--color-status-red-500);
613
+ --color-feedback-information-low-content: var(--color-status-blue-500);
614
+ --color-feedback-information-low-border: var(--color-status-blue-500);
615
+ --color-feedback-information-low-background: var(--color-status-blue-50);
645
616
  --color-feedback-information-high-content: var(--color-base-white);
646
617
  --color-feedback-information-high-border: var(--color-status-blue-400);
647
618
  --color-feedback-information-high-background: var(--color-status-blue-400);
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);
619
+ --color-chart-10: var(--color-crimson-500);
620
+ --color-chart-9: var(--color-dark-blue-500);
621
+ --color-chart-8: var(--color-orange-500);
622
+ --color-chart-7: var(--color-yellow-500);
623
+ --color-chart-6: var(--color-lime-500);
624
+ --color-chart-5: var(--color-light-blue-500);
625
+ --color-chart-4: var(--color-turquoise-500);
626
+ --color-chart-3: var(--color-petrol-500);
627
+ --color-chart-2: var(--color-dark-gray-500);
628
+ --color-chart-1: var(--color-amber-500);
629
+ --color-brand-action-lowest: var(--color-petrol-100);
630
+ --color-brand-action-lower: var(--color-petrol-200);
631
+ --color-brand-action-low: var(--color-petrol-300);
632
+ --color-brand-action-medium: var(--color-petrol-400);
633
+ --color-brand-action-high: var(--color-petrol-500);
634
+ --color-brand-action-higher: var(--color-petrol-600);
635
+ --color-brand-action-highest: var(--color-petrol-700);
636
+ --color-brand-accent-900: var(--color-orange-900);
637
+ --color-brand-accent-800: var(--color-orange-800);
638
+ --color-brand-accent-700: var(--color-orange-700);
639
+ --color-brand-accent-600: var(--color-orange-600);
640
+ --color-brand-accent-500: var(--color-orange-500);
641
+ --color-brand-accent-400: var(--color-orange-400);
642
+ --color-brand-accent-300: var(--color-orange-300);
643
+ --color-brand-accent-200: var(--color-orange-200);
644
+ --color-brand-accent-100: var(--color-orange-100);
645
+ --color-brand-accent-50: var(--color-orange-50);
646
+ --color-brand-brand-2: var(--color-orange-500);
647
+ --color-brand-900: var(--color-petrol-900);
648
+ --color-brand-800: var(--color-petrol-800);
649
+ --color-brand-700: var(--color-petrol-700);
650
+ --color-brand-600: var(--color-petrol-600);
651
+ --color-brand-500: var(--color-petrol-500);
652
+ --color-brand-400: var(--color-petrol-400);
653
+ --color-brand-300: var(--color-petrol-300);
654
+ --color-brand-200: var(--color-petrol-200);
655
+ --color-brand-100: var(--color-petrol-100);
656
+ --color-brand-50: var(--color-petrol-50);
657
+ --color-interaction-brand-high-icon-hover: var(--color-base-black);
658
+ --color-interaction-brand-high-icon: var(--color-base-black);
659
+ --color-interaction-brand-high-text-hover: var(--color-base-black);
660
+ --color-interaction-brand-high-text: var(--color-base-black);
651
661
  --color-base-border-focus: var(--color-petrol-300);
652
662
  --color-base-border-low-emphasis: var(--color-gray-ocean-100);
653
663
  --color-base-border-medium-emphasis: var(--color-gray-ocean-200);
654
664
  --color-base-border-high-emphasis: var(--color-gray-ocean-300);
655
- --color-base-content-lower-emphasis: var(--color-gray-ocean-250);
656
665
  --color-base-content-inverted-low-emphasis: var(--color-gray-ocean-400);
657
666
  --color-base-content-inverted-medium-emphasis: var(--color-gray-ocean-300);
658
667
  --color-base-content-inverted-high-emphasis: var(--color-gray-ocean-50);
659
- --color-base-content-high-emphasis: var(--color-gray-ocean-800);
660
- --color-base-content-medium-emphasis: var(--color-gray-ocean-550);
668
+ --color-base-content-lower-emphasis: var(--color-gray-ocean-250);
661
669
  --color-base-content-low-emphasis: var(--color-gray-ocean-400);
670
+ --color-base-content-medium-emphasis: var(--color-gray-ocean-550);
671
+ --color-base-content-high-emphasis: var(--color-gray-ocean-800);
662
672
  --color-base-level-40-hover: var(--color-gray-ocean-25);
663
673
  --color-base-level-30-hover: var(--color-gray-ocean-75);
664
674
  --color-base-level-20-hover: var(--color-gray-ocean-25);
@@ -669,20 +679,13 @@
669
679
  --color-base-level-30: var(--color-gray-ocean-50);
670
680
  --color-base-level-20: var(--color-gray-ocean-00);
671
681
  --color-base-level-10: var(--color-gray-ocean-50);
672
- --components-menu-contextual-background: var(--color-base-level-00);
673
- --components-menu-contextual-border: var(--color-base-border-low-emphasis);
674
682
  --components-menu-contextual-item-content-disabled: var(--color-base-content-lower-emphasis);
675
683
  --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);
676
686
  --components-popover-supporting-text: var(--color-base-content-low-emphasis);
677
687
  --components-popover-text: var(--color-base-content-medium-emphasis);
678
688
  --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);
686
689
  --components-notification-neutral-icon: var(--color-feedback-neutral-low-content);
687
690
  --components-notification-neutral-border: var(--color-feedback-neutral-low-border);
688
691
  --components-notification-neutral-background: var(--color-base-level-00);
@@ -700,8 +703,36 @@
700
703
  --components-notification-information-border: var(--color-feedback-information-low-border);
701
704
  --components-notification-information-icon: var(--color-feedback-information-low-content);
702
705
  --components-notification-information-background: var(--color-base-level-00);
703
- --components-alert-content-title: var(--color-base-content-high-emphasis);
704
- --components-alert-content-description: var(--color-base-content-medium-emphasis);
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);
705
736
  --components-alert-neutral-icon: var(--color-feedback-neutral-low-content);
706
737
  --components-alert-neutral-border: var(--color-feedback-neutral-low-border);
707
738
  --components-alert-neutral-background: var(--color-feedback-neutral-low-background);
@@ -711,93 +742,75 @@
711
742
  --components-alert-error-icon: var(--color-feedback-error-low-content);
712
743
  --components-alert-error-border: var(--color-feedback-error-low-border);
713
744
  --components-alert-error-background: var(--color-feedback-error-low-background);
714
- --components-alert-warning-border: var(--color-feedback-warning-low-border);
715
745
  --components-alert-warning-icon: var(--color-feedback-warning-low-content);
746
+ --components-alert-warning-border: var(--color-feedback-warning-low-border);
716
747
  --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);
717
750
  --components-alert-information-border: var(--color-feedback-information-low-border);
718
751
  --components-alert-information-icon: var(--color-feedback-information-low-content);
719
752
  --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);
720
770
  --components-form-shape-border-success: var(--color-feedback-success-low-border);
721
771
  --components-form-shape-border-error: var(--color-feedback-error-low-border);
722
772
  --components-form-shape-border-hover: var(--color-base-border-high-emphasis);
723
773
  --components-form-shape-border-default: var(--color-base-border-medium-emphasis);
724
774
  --components-form-shape-background-error: var(--color-feedback-error-high-background);
725
775
  --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);
734
776
  --components-form-field-icon-success: var(--color-feedback-success-low-content);
735
777
  --components-form-field-icon-error: var(--color-feedback-error-low-content);
736
778
  --components-form-field-icon-disabled: var(--color-base-border-medium-emphasis);
737
779
  --components-form-field-icon-default: var(--color-base-content-low-emphasis);
738
780
  --components-form-field-content-text: var(--color-base-content-high-emphasis);
739
781
  --components-form-field-content-placeholder: var(--color-base-content-low-emphasis);
740
- --components-form-field-border-disabled: var(--color-base-border-medium-emphasis);
741
782
  --components-form-field-border-readonly: var(--color-base-border-low-emphasis);
742
- --components-form-field-border-hover: var(--color-base-border-high-emphasis);
743
- --components-form-field-border-error: var(--color-feedback-error-low-border);
744
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
+ --components-form-field-border-hover: var(--color-base-border-high-emphasis);
786
+ --components-form-field-border-disabled: var(--color-base-border-medium-emphasis);
745
787
  --components-form-field-border-default: var(--color-base-border-medium-emphasis);
746
- --components-form-field-background-focus: var(--color-base-level-00);
747
- --components-form-field-background-hover: var(--color-base-level-00-hover);
788
+ --components-form-field-background-readonly: var(--color-base-level-00-hover);
748
789
  --components-form-field-background-error: var(--color-feedback-error-high-background);
749
790
  --components-form-field-background-checked: var(--color-brand-action-medium);
750
- --components-form-field-background-readonly: var(--color-base-level-00-hover);
751
791
  --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);
752
794
  --components-form-field-background-default: var(--color-base-level-00);
753
- --components-button-medium-text-hover: var(--components-button-gras-complementary-text-hover);
754
- --components-button-medium-icon-hover: var(--components-button-gras-complementary-icon-hover);
755
- --components-button-medium-text: var(--components-button-gras-complementary-text);
756
- --components-button-medium-background-hover: var(--components-button-gras-complementary-background-hover);
757
- --components-button-medium-background: var(--components-button-gras-complementary-background);
758
- --components-button-medium-icon: var(--components-button-gras-complementary-icon);
759
- --components-button-high-text-hover: var(--color-interaction-brand-high-text-hover);
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-icon-hover: var(--components-button-gr-as-complementary-icon-hover);
802
+ --components-button-medium-icon: var(--components-button-gr-as-complementary-icon);
803
+ --components-button-medium-text-hover: var(--components-button-gr-as-complementary-text-hover);
804
+ --components-button-medium-text: var(--components-button-gr-as-complementary-text);
805
+ --components-button-medium-background-hover: var(--components-button-gr-as-complementary-background-hover);
806
+ --components-button-medium-background: var(--components-button-gr-as-complementary-background);
760
807
  --components-button-high-icon-hover: var(--color-interaction-brand-high-icon-hover);
761
- --components-button-high-text: var(--color-interaction-brand-high-text);
762
808
  --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);
809
+ --components-button-high-text-hover: var(--color-interaction-brand-high-text-hover);
810
+ --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);
801
814
  --color-interaction-link-table-icon-hover: var(--color-brand-action-medium);
802
815
  --color-interaction-link-table-icon: var(--color-base-content-high-emphasis);
803
816
  --color-interaction-link-table-text-hover: var(--color-brand-action-medium);
@@ -806,36 +819,33 @@
806
819
  --color-interaction-link-standalone-icon: var(--color-brand-action-medium);
807
820
  --color-interaction-link-standalone-text-hover: var(--color-brand-action-high);
808
821
  --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);
809
826
  --color-interaction-neutral-border-hover: var(--color-base-content-medium-emphasis);
810
827
  --color-interaction-neutral-border: var(--color-base-content-inverted-low-emphasis);
811
828
  --color-interaction-neutral-icon-hover: var(--color-base-content-medium-emphasis);
812
829
  --color-interaction-neutral-icon: var(--color-base-content-low-emphasis);
813
830
  --color-interaction-neutral-text-hover: var(--color-base-content-medium-emphasis);
814
831
  --color-interaction-neutral-text: var(--color-base-content-low-emphasis);
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);
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);
819
836
  --color-interaction-brand-low-border-hover: var(--color-brand-action-highest);
820
837
  --color-interaction-brand-low-border: var(--color-brand-action-high);
821
838
  --color-interaction-brand-low-icon-hover: var(--color-brand-action-highest);
822
839
  --color-interaction-brand-low-icon: var(--color-brand-action-higher);
823
840
  --color-interaction-brand-low-text-hover: var(--color-brand-action-highest);
824
841
  --color-interaction-brand-low-text: var(--color-brand-action-higher);
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);
832
842
  --color-base-border-focus-high: var(--color-brand-action-medium);
833
843
  --components-menu-contextual-item-content-hover: var(--color-interaction-neutral-text-hover);
834
844
  --components-menu-contextual-item-content: var(--color-interaction-neutral-text);
835
845
  --components-list-custom-item-content-hover: var(--color-interaction-neutral-text-hover);
836
846
  --components-list-custom-item-content-default: var(--color-interaction-neutral-text);
837
- --components-form-shape-border-focus: var(--color-focus-brand);
838
847
  --components-form-shape-foreground-disabled: var(--components-form-shape-border-default);
848
+ --components-form-shape-border-focus: var(--color-focus-brand);
839
849
  --components-form-field-border-focus: var(--color-focus-brand);
840
850
  --components-button-lower-icon-hover: var(--color-interaction-brand-low-icon-hover);
841
851
  --components-button-lower-icon: var(--color-interaction-brand-low-icon);
@@ -843,10 +853,10 @@
843
853
  --components-button-lower-text: var(--color-interaction-brand-low-text);
844
854
  --components-button-low-border-hover: var(--color-interaction-brand-low-border-hover);
845
855
  --components-button-low-border: var(--color-interaction-brand-low-border);
846
- --components-button-low-text-hover: var(--color-interaction-brand-low-text-hover);
847
- --components-button-low-text: var(--color-interaction-brand-low-text);
848
856
  --components-button-low-icon-hover: var(--color-interaction-brand-low-icon-hover);
849
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);
850
860
  --components-button-high-background-hover: var(--color-interaction-brand-high-background-hover);
851
861
  --components-button-high-background: var(--color-interaction-brand-high-background);
852
862
  }
@@ -861,10 +871,75 @@
861
871
  --letter-spacing-heading-md: -0.5px;
862
872
  --letter-spacing-heading-sm: -0.25px;
863
873
  --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;
864
939
  --leading-loose: 2px;
865
- --leading-relaxed: 1.63px;
940
+ --leading-relaxed: 1.625px;
866
941
  --leading-normal: 1.5px;
867
- --leading-snug: 1.38px;
942
+ --leading-snug: 1.375px;
868
943
  --leading-tight: 1.25px;
869
944
  --leading-none: 1px;
870
945
  --leading-px-10: 40px;
@@ -878,15 +953,9 @@
878
953
  --font-weight-low-emphasis: 400;
879
954
  --font-weight-medium-emphasis: 500;
880
955
  --font-weight-high-emphasis: 700;
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;
956
+ --font-size-9xl: 128px;
957
+ --font-size-8xl: 96px;
958
+ --font-size-7xl: 72px;
890
959
  --font-size-6xl: 60px;
891
960
  --font-size-5xl: 48px;
892
961
  --font-size-4xl: 36px;
@@ -895,34 +964,65 @@
895
964
  --font-size-xl: 20px;
896
965
  --font-size-lg: 18px;
897
966
  --font-size-md: 16px;
898
- --font-size-9xl: 128px;
899
- --font-size-8xl: 96px;
900
- --font-size-7xl: 72px;
901
967
  --font-size-sm: 14px;
902
968
  --font-size-xs: 12px;
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;
916
- --color-status-blue-900: #001c37;
917
- --color-status-blue-800: #09285c;
918
- --color-status-blue-700: #113a80;
919
- --color-status-blue-600: #1c4d9e;
920
- --color-status-blue-500: #2660c2;
921
- --color-status-blue-400: #3883ff;
922
- --color-status-blue-300: #659fff;
923
- --color-status-blue-200: #a8c9ff;
924
- --color-status-blue-100: #c7dcff;
925
- --color-status-blue-50: #f0f6ff;
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;
926
1026
  --color-status-yellow-900: #302300;
927
1027
  --color-status-yellow-800: #4d3701;
928
1028
  --color-status-yellow-700: #805c00;
@@ -933,16 +1033,6 @@
933
1033
  --color-status-yellow-200: #ffe286;
934
1034
  --color-status-yellow-100: #fae49d;
935
1035
  --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
1036
  --color-status-red-900: #380101;
947
1037
  --color-status-red-800: #530101;
948
1038
  --color-status-red-700: #911515;
@@ -953,62 +1043,27 @@
953
1043
  --color-status-red-200: #ff8f8f;
954
1044
  --color-status-red-100: #f5c4c4;
955
1045
  --color-status-red-50: #ffeded;
956
- --color-dark-blue-500: #447583;
957
- --color-dark-gray-500: #394d55;
958
- --color-light-blue-500: #9ac3ce;
959
- --color-gray-ocean-00: #ffffff;
960
- --color-gray-ocean-900: #0b0f11;
961
- --color-gray-ocean-850: #11171a;
962
- --color-gray-ocean-800: #171f22;
963
- --color-gray-ocean-750: #1e272b;
964
- --color-gray-ocean-700: #222e33;
965
- --color-gray-ocean-650: #27353b;
966
- --color-gray-ocean-600: #2e3e44;
967
- --color-gray-ocean-550: #34464d;
968
- --color-gray-ocean-500: #394d55;
969
- --color-gray-ocean-450: #3f555e;
970
- --color-gray-ocean-400: #617177;
971
- --color-gray-ocean-350: #72858c;
972
- --color-gray-ocean-300: #889499;
973
- --color-gray-ocean-250: #9fadb2;
974
- --color-gray-ocean-200: #bac1c4;
975
- --color-gray-ocean-150: #c6ced1;
976
- --color-gray-ocean-100: #e1e4e6;
977
- --color-gray-ocean-75: #eaeef0;
978
- --color-gray-ocean-50: #f5f6f7;
979
- --color-gray-ocean-25: #fafbfb;
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;
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;
1056
+ --color-status-blue-900: #001c37;
1057
+ --color-status-blue-800: #09285c;
1058
+ --color-status-blue-700: #113a80;
1059
+ --color-status-blue-600: #1c4d9e;
1060
+ --color-status-blue-500: #2660c2;
1061
+ --color-status-blue-400: #3883ff;
1062
+ --color-status-blue-300: #659fff;
1063
+ --color-status-blue-200: #a8c9ff;
1064
+ --color-status-blue-100: #c7dcff;
1065
+ --color-status-blue-50: #f0f6ff;
1066
+ --color-light-blue-500: #9ac3ce;
1012
1067
  --color-lime-900: #2a330e;
1013
1068
  --color-lime-800: #435017;
1014
1069
  --color-lime-700: #5c6e1f;
@@ -1019,46 +1074,16 @@
1019
1074
  --color-lime-200: #c9d69d;
1020
1075
  --color-lime-100: #dde5c1;
1021
1076
  --color-lime-50: #f1f4e5;
1022
- --color-crimson-900: #2e0010;
1023
- --color-crimson-800: #490019;
1024
- --color-crimson-700: #630022;
1025
- --color-crimson-600: #7e002c;
1026
- --color-crimson-500: #990035;
1027
- --color-crimson-400: #ab2d58;
1028
- --color-crimson-300: #bd597c;
1029
- --color-crimson-200: #cf869f;
1030
- --color-crimson-100: #e0b3c2;
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;
1052
- --color-amber-900: #482608;
1053
- --color-amber-800: #723d0c;
1054
- --color-amber-700: #9c5311;
1055
- --color-amber-600: #c66a15;
1056
- --color-amber-500: #f0801a;
1057
- --color-amber-400: #f39642;
1058
- --color-amber-300: #f5ac6a;
1059
- --color-amber-200: #f8c392;
1060
- --color-amber-100: #fbd9ba;
1061
- --color-amber-50: #fdefe2;
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;
1062
1087
  --color-gray-spark-00: #ffffff;
1063
1088
  --color-gray-spark-900: #0e0e0e;
1064
1089
  --color-gray-spark-850: #161616;
@@ -1080,60 +1105,51 @@
1080
1105
  --color-gray-spark-75: #ededed;
1081
1106
  --color-gray-spark-50: #f6f6f6;
1082
1107
  --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;
1108
+ --color-gray-ocean-00: #ffffff;
1109
+ --color-gray-ocean-900: #0b0f11;
1110
+ --color-gray-ocean-850: #11171a;
1111
+ --color-gray-ocean-800: #171f22;
1112
+ --color-gray-ocean-750: #1e272b;
1113
+ --color-gray-ocean-700: #222e33;
1114
+ --color-gray-ocean-650: #27353b;
1115
+ --color-gray-ocean-600: #2e3e44;
1116
+ --color-gray-ocean-550: #34464d;
1117
+ --color-gray-ocean-500: #394d55;
1118
+ --color-gray-ocean-450: #3f555e;
1119
+ --color-gray-ocean-400: #617177;
1120
+ --color-gray-ocean-350: #72858c;
1121
+ --color-gray-ocean-300: #889499;
1122
+ --color-gray-ocean-250: #9fadb2;
1123
+ --color-gray-ocean-200: #bac1c4;
1124
+ --color-gray-ocean-150: #c6ced1;
1125
+ --color-gray-ocean-100: #e1e4e6;
1126
+ --color-gray-ocean-75: #eaeef0;
1127
+ --color-gray-ocean-50: #f5f6f7;
1128
+ --color-gray-ocean-25: #fafbfb;
1129
+ --color-dark-gray-500: #394d55;
1130
+ --color-dark-blue-500: #447583;
1131
+ --color-crimson-900: #2e0010;
1132
+ --color-crimson-800: #490019;
1133
+ --color-crimson-700: #630022;
1134
+ --color-crimson-600: #7e002c;
1135
+ --color-crimson-500: #990035;
1136
+ --color-crimson-400: #ab2d58;
1137
+ --color-crimson-300: #bd597c;
1138
+ --color-crimson-200: #cf869f;
1139
+ --color-crimson-100: #e0b3c2;
1140
+ --color-crimson-50: #f2dfe6;
1141
+ --color-amber-900: #482608;
1142
+ --color-amber-800: #723d0c;
1143
+ --color-amber-700: #9c5311;
1144
+ --color-amber-600: #c66a15;
1145
+ --color-amber-500: #f0801a;
1146
+ --color-amber-400: #f39642;
1147
+ --color-amber-300: #f5ac6a;
1148
+ --color-amber-200: #f8c392;
1149
+ --color-amber-100: #fbd9ba;
1150
+ --color-amber-50: #fdefe2;
1151
+ --color-base-black: #000000;
1152
+ --color-base-white: #ffffff;
1137
1153
  }
1138
1154
 
1139
1155
  /**
@@ -1141,64 +1157,138 @@
1141
1157
  */
1142
1158
 
1143
1159
  :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;
1153
1160
  --global-typography-legend-font-style: uppercase;
1154
1161
  --global-typography-label-font-style: normal;
1155
1162
  --global-typography-small-font-style: normal;
1156
1163
  --global-typography-p-font-style: normal;
1164
+ --global-typography-h5-font-style: normal;
1165
+ --global-typography-h6-font-style: normal;
1157
1166
  --global-typography-h4-font-style: normal;
1158
1167
  --global-typography-h3-font-style: normal;
1159
1168
  --global-typography-h2-font-style: normal;
1160
1169
  --global-typography-h1-font-style: normal;
1161
- --list-native-separator-padding-x: 9px;
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;
1162
1177
  --list-native-separator-padding-y: 3px;
1178
+ --list-native-separator-padding-x: 9px;
1163
1179
  --button-lg-ring-radius: 9px;
1180
+ --button-md-ring-radius: 7px;
1164
1181
  --button-sm-ring-radius: 5px;
1165
1182
  --button-xs-ring-radius: 3px;
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);
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);
1202
1292
  --global-typography-legend-font-weight: var(--font-weight-medium-emphasis);
1203
1293
  --global-typography-legend-line-height: var(--line-height-xs);
1204
1294
  --global-typography-legend-font-size: var(--font-size-xs);
@@ -1210,6 +1300,12 @@
1210
1300
  --global-typography-p-font-weight: var(--font-weight-low-emphasis);
1211
1301
  --global-typography-p-line-height: var(--line-height-base);
1212
1302
  --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);
1213
1309
  --global-typography-h4-font-weight: var(--font-weight-high-emphasis);
1214
1310
  --global-typography-h4-line-height: var(--line-height-xl);
1215
1311
  --global-typography-h4-font-size: var(--font-size-xl);
@@ -1222,6 +1318,35 @@
1222
1318
  --global-typography-h1-font-weight: var(--font-weight-high-emphasis);
1223
1319
  --global-typography-h1-line-height: var(--line-height-4xl);
1224
1320
  --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);
1225
1350
  --list-custom-sub-item-padding-left: var(--spacing-10);
1226
1351
  --list-custom-separator-padding-y: var(--spacing-0-5);
1227
1352
  --list-custom-separator-padding-x: var(--spacing-0);
@@ -1235,157 +1360,48 @@
1235
1360
  --list-custom-line-height: var(--line-height-base);
1236
1361
  --list-custom-font-size: var(--font-size-md);
1237
1362
  --list-custom-icon-size: var(--spacing-5);
1238
- --list-native-padding: var(--spacing-2);
1239
- --list-native-gap-y: var(--spacing-0-5);
1240
1363
  --list-native-sub-item-padding-left: var(--spacing-8);
1364
+ --list-native-padding: var(--spacing-2);
1241
1365
  --list-native-radius: var(--radius-rounded-md);
1366
+ --list-native-gap-y: var(--spacing-0-5);
1242
1367
  --list-native-item-radius: var(--radius-rounded-md);
1243
- --list-native-item-padding-right: var(--spacing-2);
1244
1368
  --list-native-item-padding-y: var(--spacing-0);
1369
+ --list-native-item-padding-right: var(--spacing-2);
1245
1370
  --list-native-item-padding-left: var(--spacing-5);
1246
1371
  --list-native-line-height: var(--line-height-base);
1247
1372
  --list-native-font-size: var(--font-size-md);
1248
1373
  --list-native-icon-size: var(--spacing-5);
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);
1358
- --button-lg-icon-button-padding: var(--spacing-3);
1359
- --button-lg-line-height: var(--line-height-lg);
1360
- --button-lg-font-size: var(--font-size-lg);
1361
- --button-lg-icon-size: var(--spacing-6);
1362
- --button-lg-border-radius: var(--radius-rounded-lg);
1363
1374
  --button-lg-padding-y: var(--spacing-2-5);
1364
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);
1378
+ --button-lg-icon-button-padding: var(--spacing-3);
1365
1379
  --button-lg-gap: var(--spacing-2);
1366
- --button-sm-icon-button-padding: var(--spacing-2);
1367
- --button-sm-line-height: var(--line-height-sm);
1368
- --button-sm-font-size: var(--font-size-sm);
1369
- --button-sm-icon-size: var(--spacing-4);
1370
- --button-sm-border-radius: var(--radius-rounded);
1380
+ --button-lg-font-size: var(--font-size-lg);
1381
+ --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);
1371
1390
  --button-sm-padding-y: var(--spacing-1-5);
1372
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);
1394
+ --button-sm-icon-button-padding: var(--spacing-2);
1373
1395
  --button-sm-gap: var(--spacing-1-5);
1374
- --button-xs-icon-button-padding: var(--spacing-1-5);
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);
1378
- --button-xs-border-radius: var(--radius-rounded-sm);
1396
+ --button-sm-font-size: var(--font-size-sm);
1397
+ --button-sm-border-radius: var(--radius-rounded);
1379
1398
  --button-xs-padding-y: var(--spacing-1);
1380
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);
1402
+ --button-xs-icon-button-padding: var(--spacing-1-5);
1381
1403
  --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);
1404
+ --button-xs-font-size: var(--font-size-xs);
1405
+ --button-xs-border-radius: var(--radius-rounded-sm);
1390
1406
  }
1391
1407