@czi-sds/components 21.6.3 → 21.7.1

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.
@@ -9,7 +9,9 @@
9
9
  --sds-border-base-default: 1px solid #969696;
10
10
  --sds-border-base-disabled: 1px solid #c3c3c3;
11
11
  --sds-border-base-divider: 1px solid #dfdfdf;
12
+ --sds-border-base-divider-inverse: 1px solid #6c6c6c;
12
13
  --sds-border-base-hover: 1px dashed #000000;
14
+ --sds-border-base-inverse: 1px dashed #ffffff;
13
15
  --sds-border-base-pressed: 1px dashed #000000;
14
16
  --sds-border-base-table: 1px solid #c3c3c3;
15
17
  --sds-border-beta-default: 1px solid #6526b5;
@@ -20,19 +22,22 @@
20
22
  --sds-border-info-thick: 2px solid #0041b9;
21
23
  --sds-border-link-dashed: 1px dashed;
22
24
  --sds-border-link-solid: 1px solid;
23
- --sds-border-negative-default: 1px solid #980013;
24
- --sds-border-negative-extra-thick: 4px solid #980013;
25
- --sds-border-negative-thick: 2px solid #980013;
25
+ --sds-border-negative-default: 1px solid #980017;
26
+ --sds-border-negative-extra-thick: 4px solid #980017;
27
+ --sds-border-negative-thick: 2px solid #980017;
26
28
  --sds-border-neutral-default: 1px solid #969696;
27
29
  --sds-border-neutral-extra-thick: 4px solid #969696;
28
30
  --sds-border-neutral-thick: 2px solid #969696;
29
31
  --sds-border-none: none;
30
- --sds-border-notice-default: 1px solid #b77800;
31
- --sds-border-notice-extra-thick: 4px solid #b77800;
32
- --sds-border-notice-thick: 2px solid #b77800;
32
+ --sds-border-notice-default: 1px solid #b07300;
33
+ --sds-border-notice-extra-thick: 4px solid #b07300;
34
+ --sds-border-notice-thick: 2px solid #b07300;
33
35
  --sds-border-positive-default: 1px solid #105b2b;
34
36
  --sds-border-positive-extra-thick: 4px solid #105b2b;
35
37
  --sds-border-positive-thick: 2px solid #105b2b;
38
+ --sds-breakpoint-sm: 0px;
39
+ --sds-breakpoint-md: 512px;
40
+ --sds-breakpoint-lg: 1024px;
36
41
  --sds-color-primitive-blue-100: #e2eeff;
37
42
  --sds-color-primitive-blue-200: #cce1ff;
38
43
  --sds-color-primitive-blue-300: #9dc6ff;
@@ -67,50 +72,53 @@
67
72
  --sds-color-primitive-purple-500: #8b54e2;
68
73
  --sds-color-primitive-purple-600: #6526b5;
69
74
  --sds-color-primitive-purple-700: #490092;
70
- --sds-color-primitive-purple-800: #1a004c;
75
+ --sds-color-primitive-purple-800: #26004c;
71
76
  --sds-color-primitive-red-100: #ffe8e6;
72
77
  --sds-color-primitive-red-200: #ffd6d2;
73
78
  --sds-color-primitive-red-300: #ffafa8;
74
79
  --sds-color-primitive-red-400: #ff7e78;
75
80
  --sds-color-primitive-red-500: #db2131;
76
- --sds-color-primitive-red-600: #980013;
81
+ --sds-color-primitive-red-600: #980017;
77
82
  --sds-color-primitive-red-700: #6f0008;
78
83
  --sds-color-primitive-red-800: #340000;
79
- --sds-color-primitive-yellow-100: #ffefcf;
84
+ --sds-color-primitive-yellow-100: #fff3db;
80
85
  --sds-color-primitive-yellow-200: #ffdb97;
81
86
  --sds-color-primitive-yellow-300: #ffca5c;
82
87
  --sds-color-primitive-yellow-400: #fab700;
83
88
  --sds-color-primitive-yellow-500: #da9900;
84
- --sds-color-primitive-yellow-600: #b77800;
89
+ --sds-color-primitive-yellow-600: #b07300;
85
90
  --sds-color-primitive-yellow-700: #7c3e00;
86
91
  --sds-color-primitive-yellow-800: #541700;
87
92
  --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
88
93
  --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
89
- --sds-color-semantic-base-border: #969696;
94
+ --sds-color-semantic-base-background-primary: #ffffff;
95
+ --sds-color-semantic-base-background-primary-inverse: #000000;
96
+ --sds-color-semantic-base-background-secondary: #f3f3f3;
97
+ --sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
98
+ --sds-color-semantic-base-background-tertiary: #dfdfdf;
99
+ --sds-color-semantic-base-border: #6c6c6c;
90
100
  --sds-color-semantic-base-border-disabled: #c3c3c3;
91
101
  --sds-color-semantic-base-border-hover: #000000;
102
+ --sds-color-semantic-base-border-inverse: #ffffff;
92
103
  --sds-color-semantic-base-border-pressed: #000000;
93
104
  --sds-color-semantic-base-border-table: #c3c3c3;
94
105
  --sds-color-semantic-base-divider: #dfdfdf;
106
+ --sds-color-semantic-base-divider-inverse: #6c6c6c;
95
107
  --sds-color-semantic-base-fill-disabled: #dfdfdf;
96
108
  --sds-color-semantic-base-fill-hover: #c3c3c347;
97
109
  --sds-color-semantic-base-fill-open: #c3c3c347;
98
110
  --sds-color-semantic-base-fill-pressed: #c3c3c347;
99
111
  --sds-color-semantic-base-fill-primary: #ffffff;
100
112
  --sds-color-semantic-base-fill-selected: #000000;
101
- --sds-color-semantic-base-icon-disabled: #c3c3c3;
102
- --sds-color-semantic-base-icon-primary: #969696;
103
- --sds-color-semantic-base-icon-primary-hover: #000000;
104
- --sds-color-semantic-base-icon-primary-inverse: #ffffff;
105
- --sds-color-semantic-base-icon-primary-inverse-hover: #a5a5a5;
106
- --sds-color-semantic-base-icon-primary-inverse-pressed: #a5a5a5;
107
- --sds-color-semantic-base-icon-primary-pressed: #000000;
108
- --sds-color-semantic-base-icon-secondary: #000000;
109
- --sds-color-semantic-base-surface-background: #ffffff;
110
- --sds-color-semantic-base-surface-primary: #ffffff;
111
- --sds-color-semantic-base-surface-primary-inverse: #000000;
112
- --sds-color-semantic-base-surface-secondary: #f3f3f3;
113
- --sds-color-semantic-base-surface-tertiary: #dfdfdf;
113
+ --sds-color-semantic-base-ornament-disabled: #c3c3c3;
114
+ --sds-color-semantic-base-ornament-on-fill: #ffffff;
115
+ --sds-color-semantic-base-ornament-primary: #000000;
116
+ --sds-color-semantic-base-ornament-primary-inverse: #ffffff;
117
+ --sds-color-semantic-base-ornament-secondary: #6c6c6c;
118
+ --sds-color-semantic-base-ornament-secondary-hover: #000000;
119
+ --sds-color-semantic-base-ornament-secondary-pressed: #000000;
120
+ --sds-color-semantic-base-surface: #ffffff;
121
+ --sds-color-semantic-base-surface-inverse: #000000;
114
122
  --sds-color-semantic-base-text-disabled: #c3c3c3;
115
123
  --sds-color-semantic-base-text-primary: #000000;
116
124
  --sds-color-semantic-base-text-primary-inverse: #ffffff;
@@ -125,70 +133,70 @@
125
133
  --sds-color-semantic-accent-fill-hover: #0041b9;
126
134
  --sds-color-semantic-accent-fill-pressed: #002d90;
127
135
  --sds-color-semantic-accent-fill-primary: #1a6cef;
128
- --sds-color-semantic-accent-icon: #1a6cef;
129
- --sds-color-semantic-accent-icon-focus: #1a6cef;
130
- --sds-color-semantic-accent-icon-hover: #0041b9;
131
- --sds-color-semantic-accent-icon-open: #1a6cef;
132
- --sds-color-semantic-accent-icon-pressed: #002d90;
133
- --sds-color-semantic-accent-icon-selected: #1a6cef;
134
- --sds-color-semantic-accent-surface-primary: #e2eeff;
135
- --sds-color-semantic-accent-surface-secondary: #1a6cef;
136
+ --sds-color-semantic-accent-ornament: #1a6cef;
137
+ --sds-color-semantic-accent-ornament-focus: #1a6cef;
138
+ --sds-color-semantic-accent-ornament-hover: #0041b9;
139
+ --sds-color-semantic-accent-ornament-open: #1a6cef;
140
+ --sds-color-semantic-accent-ornament-pressed: #002d90;
141
+ --sds-color-semantic-accent-ornament-selected: #1a6cef;
142
+ --sds-color-semantic-accent-surface-primary: #1a6cef;
143
+ --sds-color-semantic-accent-surface-secondary: #e2eeff;
136
144
  --sds-color-semantic-accent-text-action: #1a6cef;
137
145
  --sds-color-semantic-accent-text-action-hover: #0041b9;
138
146
  --sds-color-semantic-accent-text-action-pressed: #002d90;
139
- --sds-color-semantic-beta-border: #8b54e2;
147
+ --sds-color-semantic-beta-border: #6526b5;
140
148
  --sds-color-semantic-beta-fill-hover: #6526b5;
141
149
  --sds-color-semantic-beta-fill-pressed: #490092;
142
150
  --sds-color-semantic-beta-fill-primary: #8b54e2;
143
151
  --sds-color-semantic-beta-fill-secondary: #efeafe;
144
152
  --sds-color-semantic-beta-ornament: #6526b5;
145
- --sds-color-semantic-beta-surface-primary: #efeafe;
146
- --sds-color-semantic-beta-surface-secondary: #8b54e2;
153
+ --sds-color-semantic-beta-surface-primary: #8b54e2;
154
+ --sds-color-semantic-beta-surface-secondary: #efeafe;
147
155
  --sds-color-semantic-beta-text: #6526b5;
148
- --sds-color-semantic-info-border: #1a6cef;
156
+ --sds-color-semantic-info-border: #0041b9;
149
157
  --sds-color-semantic-info-fill-hover: #0041b9;
150
158
  --sds-color-semantic-info-fill-pressed: #002d90;
151
159
  --sds-color-semantic-info-fill-primary: #1a6cef;
152
160
  --sds-color-semantic-info-fill-secondary: #e2eeff;
153
161
  --sds-color-semantic-info-ornament: #0041b9;
154
- --sds-color-semantic-info-surface-primary: #e2eeff;
155
- --sds-color-semantic-info-surface-secondary: #1a6cef;
162
+ --sds-color-semantic-info-surface-primary: #1a6cef;
163
+ --sds-color-semantic-info-surface-secondary: #e2eeff;
156
164
  --sds-color-semantic-info-text: #0041b9;
157
- --sds-color-semantic-negative-border: #db2131;
158
- --sds-color-semantic-negative-fill-hover: #980013;
165
+ --sds-color-semantic-negative-border: #980017;
166
+ --sds-color-semantic-negative-fill-hover: #980017;
159
167
  --sds-color-semantic-negative-fill-pressed: #6f0008;
160
168
  --sds-color-semantic-negative-fill-primary: #db2131;
161
169
  --sds-color-semantic-negative-fill-secondary: #ffe8e6;
162
- --sds-color-semantic-negative-ornament: #980013;
163
- --sds-color-semantic-negative-surface-primary: #ffe8e6;
164
- --sds-color-semantic-negative-surface-secondary: #db2131;
165
- --sds-color-semantic-negative-text: #980013;
170
+ --sds-color-semantic-negative-ornament: #980017;
171
+ --sds-color-semantic-negative-surface-primary: #db2131;
172
+ --sds-color-semantic-negative-surface-secondary: #ffe8e6;
173
+ --sds-color-semantic-negative-text: #980017;
166
174
  --sds-color-semantic-neutral-border: #969696;
167
175
  --sds-color-semantic-neutral-fill-hover: #6c6c6c;
168
176
  --sds-color-semantic-neutral-fill-pressed: #3b3b3b;
169
177
  --sds-color-semantic-neutral-fill-primary: #969696;
170
178
  --sds-color-semantic-neutral-fill-secondary: #f3f3f3;
171
179
  --sds-color-semantic-neutral-ornament: #3b3b3b;
172
- --sds-color-semantic-neutral-surface-primary: #dfdfdf;
173
- --sds-color-semantic-neutral-surface-secondary: #969696;
180
+ --sds-color-semantic-neutral-surface-primary: #969696;
181
+ --sds-color-semantic-neutral-surface-secondary: #dfdfdf;
174
182
  --sds-color-semantic-neutral-text: #3b3b3b;
175
- --sds-color-semantic-notice-border: #da9900;
176
- --sds-color-semantic-notice-fill-hover: #b77800;
183
+ --sds-color-semantic-notice-border: #b07300;
184
+ --sds-color-semantic-notice-fill-hover: #b07300;
177
185
  --sds-color-semantic-notice-fill-pressed: #7c3e00;
178
186
  --sds-color-semantic-notice-fill-primary: #da9900;
179
- --sds-color-semantic-notice-fill-secondary: #ffefcf;
180
- --sds-color-semantic-notice-ornament: #b77800;
181
- --sds-color-semantic-notice-surface-primary: #ffefcf;
182
- --sds-color-semantic-notice-surface-secondary: #da9900;
183
- --sds-color-semantic-notice-text: #b77800;
184
- --sds-color-semantic-positive-border: #238444;
187
+ --sds-color-semantic-notice-fill-secondary: #fff3db;
188
+ --sds-color-semantic-notice-ornament: #b07300;
189
+ --sds-color-semantic-notice-surface-primary: #da9900;
190
+ --sds-color-semantic-notice-surface-secondary: #fff3db;
191
+ --sds-color-semantic-notice-text: #b07300;
192
+ --sds-color-semantic-positive-border: #105b2b;
185
193
  --sds-color-semantic-positive-fill-hover: #105b2b;
186
194
  --sds-color-semantic-positive-fill-pressed: #07431d;
187
195
  --sds-color-semantic-positive-fill-primary: #238444;
188
196
  --sds-color-semantic-positive-fill-secondary: #daf4de;
189
197
  --sds-color-semantic-positive-ornament: #105b2b;
190
- --sds-color-semantic-positive-surface-primary: #daf4de;
191
- --sds-color-semantic-positive-surface-secondary: #238444;
198
+ --sds-color-semantic-positive-surface-primary: #238444;
199
+ --sds-color-semantic-positive-surface-secondary: #daf4de;
192
200
  --sds-color-semantic-positive-text: #105b2b;
193
201
  --sds-corner-l: 20px;
194
202
  --sds-corner-m: 4px;
@@ -198,81 +206,154 @@
198
206
  --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
199
207
  --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
200
208
  --sds-drop-shadow-none: none;
201
- --sds-font-color: black;
202
209
  --sds-font-font-family-body: "Inter", sans-serif;
210
+ --sds-font-font-family-body-narrow: "Inter", sans-serif;
203
211
  --sds-font-font-family-caps: "Inter", sans-serif;
212
+ --sds-font-font-family-caps-narrow: "Inter", sans-serif;
204
213
  --sds-font-font-family-code: "IBM Plex Mono", monospace;
214
+ --sds-font-font-family-code-narrow: "IBM Plex Mono", monospace;
205
215
  --sds-font-font-family-header: "Inter", sans-serif;
216
+ --sds-font-font-family-header-narrow: "Inter", sans-serif;
206
217
  --sds-font-font-family-tabular: "Inter", sans-serif;
218
+ --sds-font-font-family-tabular-narrow: "Inter", sans-serif;
207
219
  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
220
+ --sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
208
221
  --sds-font-body-xxxs-400-letter-spacing: 0.1px;
222
+ --sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px;
209
223
  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
224
+ --sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
210
225
  --sds-font-body-xxxs-600-letter-spacing: 0.1px;
226
+ --sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px;
211
227
  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
228
+ --sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
212
229
  --sds-font-body-xxs-400-letter-spacing: 0.1px;
230
+ --sds-font-body-xxs-400-letter-spacing-narrow: 0.1px;
213
231
  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
232
+ --sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
214
233
  --sds-font-body-xxs-600-letter-spacing: 0.1px;
234
+ --sds-font-body-xxs-600-letter-spacing-narrow: 0.1px;
215
235
  --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
236
+ --sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
216
237
  --sds-font-body-xs-400-letter-spacing: 0.08px;
238
+ --sds-font-body-xs-400-letter-spacing-narrow: 0.08px;
217
239
  --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
240
+ --sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
218
241
  --sds-font-body-xs-600-letter-spacing: 0.08px;
242
+ --sds-font-body-xs-600-letter-spacing-narrow: 0.08px;
219
243
  --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
244
+ --sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
220
245
  --sds-font-body-s-400-letter-spacing: 0.08px;
246
+ --sds-font-body-s-400-letter-spacing-narrow: 0.08px;
221
247
  --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
248
+ --sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
222
249
  --sds-font-body-s-600-letter-spacing: 0.08px;
250
+ --sds-font-body-s-600-letter-spacing-narrow: 0.08px;
223
251
  --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
252
+ --sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", sans-serif;
224
253
  --sds-font-body-m-400-letter-spacing: 0px;
254
+ --sds-font-body-m-400-letter-spacing-narrow: 0px;
225
255
  --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
256
+ --sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", sans-serif;
226
257
  --sds-font-body-m-600-letter-spacing: 0px;
258
+ --sds-font-body-m-600-letter-spacing-narrow: 0px;
227
259
  --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
260
+ --sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", sans-serif;
228
261
  --sds-font-body-l-400-letter-spacing: 0px;
262
+ --sds-font-body-l-400-letter-spacing-narrow: 0px;
229
263
  --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
264
+ --sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", sans-serif;
230
265
  --sds-font-body-l-600-letter-spacing: 0px;
266
+ --sds-font-body-l-600-letter-spacing-narrow: 0px;
231
267
  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
268
+ --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
232
269
  --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
233
- --sds-font-caps-xxxxs-600-text-transform: uppercase;
270
+ --sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px;
271
+ --sds-font-caps-xxxxs-600-text-transform: uppercase;
272
+ --sds-font-caps-xxxxs-600-text-transform-narrow: uppercase;
234
273
  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
274
+ --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
235
275
  --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
236
- --sds-font-caps-xxxs-600-text-transform: uppercase;
276
+ --sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px;
277
+ --sds-font-caps-xxxs-600-text-transform: uppercase;
278
+ --sds-font-caps-xxxs-600-text-transform-narrow: uppercase;
237
279
  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
280
+ --sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
238
281
  --sds-font-caps-xxs-600-letter-spacing: 0.5px;
239
- --sds-font-caps-xxs-600-text-transform: uppercase;
282
+ --sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px;
283
+ --sds-font-caps-xxs-600-text-transform: uppercase;
284
+ --sds-font-caps-xxs-600-text-transform-narrow: uppercase;
240
285
  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
286
+ --sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
241
287
  --sds-font-header-xxxs-600-letter-spacing: 0.1px;
288
+ --sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px;
242
289
  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
290
+ --sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
243
291
  --sds-font-header-xxs-600-letter-spacing: 0.1px;
292
+ --sds-font-header-xxs-600-letter-spacing-narrow: 0.1px;
244
293
  --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
294
+ --sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", sans-serif;
245
295
  --sds-font-header-xs-600-letter-spacing: 0.08px;
296
+ --sds-font-header-xs-600-letter-spacing-narrow: 0.08px;
246
297
  --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
298
+ --sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", sans-serif;
247
299
  --sds-font-header-s-600-letter-spacing: 0.08px;
300
+ --sds-font-header-s-600-letter-spacing-narrow: 0.08px;
248
301
  --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
302
+ --sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", sans-serif;
249
303
  --sds-font-header-m-600-letter-spacing: 0px;
304
+ --sds-font-header-m-600-letter-spacing-narrow: 0.08px;
250
305
  --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
306
+ --sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", sans-serif;
251
307
  --sds-font-header-l-600-letter-spacing: 0px;
308
+ --sds-font-header-l-600-letter-spacing-narrow: 0px;
252
309
  --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
310
+ --sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", sans-serif;
253
311
  --sds-font-header-xl-600-letter-spacing: 0px;
312
+ --sds-font-header-xl-600-letter-spacing-narrow: 0px;
254
313
  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
314
+ --sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", sans-serif;
255
315
  --sds-font-header-xxl-600-letter-spacing: 0px;
316
+ --sds-font-header-xxl-600-letter-spacing-narrow: 0px;
256
317
  --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
318
+ --sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
257
319
  --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
320
+ --sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums;
258
321
  --sds-font-tabular-xs-400-letter-spacing: 0px;
322
+ --sds-font-tabular-xs-400-letter-spacing-narrow: 0px;
259
323
  --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
324
+ --sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
260
325
  --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
326
+ --sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums;
261
327
  --sds-font-tabular-xs-600-letter-spacing: 0px;
328
+ --sds-font-tabular-xs-600-letter-spacing-narrow: 0px;
262
329
  --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
330
+ --sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
263
331
  --sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
332
+ --sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums;
264
333
  --sds-font-tabular-s-400-letter-spacing: 0px;
334
+ --sds-font-tabular-s-400-letter-spacing-narrow: 0px;
265
335
  --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
336
+ --sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
266
337
  --sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
338
+ --sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums;
267
339
  --sds-font-tabular-s-600-letter-spacing: 0px;
340
+ --sds-font-tabular-s-600-letter-spacing-narrow: 0px;
268
341
  --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
342
+ --sds-font-code-xs-400-font-narrow: 400 13px/20px "IBM Plex Mono", monospace;
269
343
  --sds-font-code-xs-400-letter-spacing: 0px;
344
+ --sds-font-code-xs-400-letter-spacing-narrow: 0px;
270
345
  --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
346
+ --sds-font-code-xs-600-font-narrow: 600 13px/20px "IBM Plex Mono", monospace;
271
347
  --sds-font-code-xs-600-letter-spacing: 0px;
348
+ --sds-font-code-xs-600-letter-spacing-narrow: 0px;
272
349
  --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
350
+ --sds-font-code-s-400-font-narrow: 400 14px/24px "IBM Plex Mono", monospace;
273
351
  --sds-font-code-s-400-letter-spacing: 0px;
352
+ --sds-font-code-s-400-letter-spacing-narrow: 0px;
274
353
  --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
354
+ --sds-font-code-s-600-font-narrow: 600 14px/24px "IBM Plex Mono", monospace;
275
355
  --sds-font-code-s-600-letter-spacing: 0px;
356
+ --sds-font-code-s-600-letter-spacing-narrow: 0px;
276
357
  --sds-icon-size-input-height: 16px;
277
358
  --sds-icon-size-input-width: 16px;
278
359
  --sds-icon-size-xs-height: 12px;
@@ -306,38 +387,43 @@
306
387
  --sds-border-base-default: 1px solid #aaaaaa;
307
388
  --sds-border-base-disabled: 1px solid #696969;
308
389
  --sds-border-base-divider: 1px solid #494949;
390
+ --sds-border-base-divider-inverse: 1px solid #cdcdcd;
309
391
  --sds-border-base-hover: 1px dashed #ffffff;
392
+ --sds-border-base-inverse: 1px dashed #000000;
310
393
  --sds-border-base-pressed: 1px dashed #ffffff;
311
394
  --sds-border-base-table: 1px solid #696969;
312
- --sds-border-beta-default: 1px solid #e4dcfc;
313
- --sds-border-beta-extra-thick: 4px solid #e4dcfc;
314
- --sds-border-beta-thick: 2px solid #e4dcfc;
315
- --sds-border-info-default: 1px solid #cde3ff;
316
- --sds-border-info-extra-thick: 4px solid #cde3ff;
317
- --sds-border-info-thick: 2px solid #cde3ff;
395
+ --sds-border-beta-default: 1px solid #cebef8;
396
+ --sds-border-beta-extra-thick: 4px solid #cebef8;
397
+ --sds-border-beta-thick: 2px solid #cebef8;
398
+ --sds-border-info-default: 1px solid #a2c9ff;
399
+ --sds-border-info-extra-thick: 4px solid #a2c9ff;
400
+ --sds-border-info-thick: 2px solid #a2c9ff;
318
401
  --sds-border-link-dashed: 1px dashed;
319
402
  --sds-border-link-solid: 1px solid;
320
- --sds-border-negative-default: 1px solid #FFBDB3;
321
- --sds-border-negative-extra-thick: 4px solid #FFBDB3;
322
- --sds-border-negative-thick: 2px solid #FFBDB3;
403
+ --sds-border-negative-default: 1px solid #ff988a;
404
+ --sds-border-negative-extra-thick: 4px solid #ff988a;
405
+ --sds-border-negative-thick: 2px solid #ff988a;
323
406
  --sds-border-neutral-default: 1px solid #aaaaaa;
324
407
  --sds-border-neutral-extra-thick: 4px solid #aaaaaa;
325
408
  --sds-border-neutral-thick: 2px solid #aaaaaa;
326
409
  --sds-border-none: none;
327
- --sds-border-notice-default: 1px solid #efad00;
328
- --sds-border-notice-extra-thick: 4px solid #efad00;
329
- --sds-border-notice-thick: 2px solid #efad00;
330
- --sds-border-positive-default: 1px solid #bcecc5;
331
- --sds-border-positive-extra-thick: 4px solid #bcecc5;
332
- --sds-border-positive-thick: 2px solid #bcecc5;
333
- --sds-color-primitive-blue-100: #002573;
334
- --sds-color-primitive-blue-200: #0048c5;
335
- --sds-color-primitive-blue-300: #2573f4;
336
- --sds-color-primitive-blue-400: #5b9aff;
337
- --sds-color-primitive-blue-500: #a2c9ff;
338
- --sds-color-primitive-blue-600: #cde3ff;
339
- --sds-color-primitive-blue-700: #e2eeff;
340
- --sds-color-primitive-blue-800: #f7faff;
410
+ --sds-border-notice-default: 1px solid #e5bc63;
411
+ --sds-border-notice-extra-thick: 4px solid #e5bc63;
412
+ --sds-border-notice-thick: 2px solid #e5bc63;
413
+ --sds-border-positive-default: 1px solid #85d898;
414
+ --sds-border-positive-extra-thick: 4px solid #85d898;
415
+ --sds-border-positive-thick: 2px solid #85d898;
416
+ --sds-breakpoint-sm: 0px;
417
+ --sds-breakpoint-md: 512px;
418
+ --sds-breakpoint-lg: 1024px;
419
+ --sds-color-primitive-blue-100: #0f1d4a;
420
+ --sds-color-primitive-blue-200: #0a216e;
421
+ --sds-color-primitive-blue-300: #0647b8;
422
+ --sds-color-primitive-blue-400: #2573f4;
423
+ --sds-color-primitive-blue-500: #5b9aff;
424
+ --sds-color-primitive-blue-600: #a2c9ff;
425
+ --sds-color-primitive-blue-700: #cde3ff;
426
+ --sds-color-primitive-blue-800: #e2eeff;
341
427
  --sds-color-primitive-gray-50: #000000;
342
428
  --sds-color-primitive-gray-75: #101010;
343
429
  --sds-color-primitive-gray-100: #333333;
@@ -349,144 +435,147 @@
349
435
  --sds-color-primitive-gray-700: #ededed;
350
436
  --sds-color-primitive-gray-800: #fafafa;
351
437
  --sds-color-primitive-gray-900: #ffffff;
352
- --sds-color-primitive-green-100: #053918;
353
- --sds-color-primitive-green-200: #12612e;
354
- --sds-color-primitive-green-300: #288b49;
355
- --sds-color-primitive-green-400: #43ae63;
356
- --sds-color-primitive-green-500: #85d898;
357
- --sds-color-primitive-green-600: #bcecc5;
358
- --sds-color-primitive-green-700: #daf4de;
359
- --sds-color-primitive-green-800: #f7fbf6;
360
- --sds-color-primitive-purple-100: #4b0190;
361
- --sds-color-primitive-purple-200: #6b2ebc;
362
- --sds-color-primitive-purple-300: #905de6;
363
- --sds-color-primitive-purple-400: #aa89ef;
364
- --sds-color-primitive-purple-500: #cebef8;
365
- --sds-color-primitive-purple-600: #e4dcfc;
366
- --sds-color-primitive-purple-700: #f0ebfe;
367
- --sds-color-primitive-purple-800: #fbf9ff;
368
- --sds-color-primitive-red-100: #630008;
369
- --sds-color-primitive-red-200: #A30000;
370
- --sds-color-primitive-red-300: #E52722;
371
- --sds-color-primitive-red-400: #FF695B;
372
- --sds-color-primitive-red-500: #FF9385;
373
- --sds-color-primitive-red-600: #FFBDB3;
374
- --sds-color-primitive-red-700: #FFD8D1;
375
- --sds-color-primitive-red-800: #FFF1EE;
376
- --sds-color-primitive-yellow-100: #552300;
377
- --sds-color-primitive-yellow-200: #834500;
378
- --sds-color-primitive-yellow-300: #985a00;
379
- --sds-color-primitive-yellow-400: #ac6c00;
380
- --sds-color-primitive-yellow-500: #cf8e00;
381
- --sds-color-primitive-yellow-600: #efad00;
382
- --sds-color-primitive-yellow-700: #ffdc9a;
383
- --sds-color-primitive-yellow-800: #fcf2e3;
438
+ --sds-color-primitive-green-100: #082608;
439
+ --sds-color-primitive-green-200: #063617;
440
+ --sds-color-primitive-green-300: #10632e;
441
+ --sds-color-primitive-green-400: #278b48;
442
+ --sds-color-primitive-green-500: #4bae68;
443
+ --sds-color-primitive-green-600: #85d898;
444
+ --sds-color-primitive-green-700: #bcecc5;
445
+ --sds-color-primitive-green-800: #daf4de;
446
+ --sds-color-primitive-purple-100: #331252;
447
+ --sds-color-primitive-purple-200: #410f70;
448
+ --sds-color-primitive-purple-300: #6429b2;
449
+ --sds-color-primitive-purple-400: #905de6;
450
+ --sds-color-primitive-purple-500: #aa89ef;
451
+ --sds-color-primitive-purple-600: #cebef8;
452
+ --sds-color-primitive-purple-700: #e4dcfc;
453
+ --sds-color-primitive-purple-800: #f0ebfe;
454
+ --sds-color-primitive-red-100: #330603;
455
+ --sds-color-primitive-red-200: #660a12;
456
+ --sds-color-primitive-red-300: #9e1c1c;
457
+ --sds-color-primitive-red-400: #c73028;
458
+ --sds-color-primitive-red-500: #e05043;
459
+ --sds-color-primitive-red-600: #ff988a;
460
+ --sds-color-primitive-red-700: #ffbdb3;
461
+ --sds-color-primitive-red-800: #ffd8d1;
462
+ --sds-color-primitive-yellow-100: #361b07;
463
+ --sds-color-primitive-yellow-200: #52270a;
464
+ --sds-color-primitive-yellow-300: #965a0b;
465
+ --sds-color-primitive-yellow-400: #bd8804;
466
+ --sds-color-primitive-yellow-500: #d9a943;
467
+ --sds-color-primitive-yellow-600: #e5bc63;
468
+ --sds-color-primitive-yellow-700: #f5d789;
469
+ --sds-color-primitive-yellow-800: #ffe6a8;
384
470
  --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
385
471
  --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
386
- --sds-color-semantic-base-border: #aaaaaa;
472
+ --sds-color-semantic-base-background-primary: #000000;
473
+ --sds-color-semantic-base-background-primary-inverse: #ffffff;
474
+ --sds-color-semantic-base-background-secondary: #333333;
475
+ --sds-color-semantic-base-background-secondary-inverse: #ededed;
476
+ --sds-color-semantic-base-background-tertiary: #494949;
477
+ --sds-color-semantic-base-border: #cdcdcd;
387
478
  --sds-color-semantic-base-border-disabled: #696969;
388
479
  --sds-color-semantic-base-border-hover: #ffffff;
480
+ --sds-color-semantic-base-border-inverse: #000000;
389
481
  --sds-color-semantic-base-border-pressed: #ffffff;
390
482
  --sds-color-semantic-base-border-table: #696969;
391
483
  --sds-color-semantic-base-divider: #494949;
484
+ --sds-color-semantic-base-divider-inverse: #cdcdcd;
392
485
  --sds-color-semantic-base-fill-disabled: #494949;
393
486
  --sds-color-semantic-base-fill-hover: #69696947;
394
487
  --sds-color-semantic-base-fill-open: #69696947;
395
488
  --sds-color-semantic-base-fill-pressed: #69696947;
396
489
  --sds-color-semantic-base-fill-primary: #000000;
397
490
  --sds-color-semantic-base-fill-selected: #ffffff;
398
- --sds-color-semantic-base-icon-disabled: #696969;
399
- --sds-color-semantic-base-icon-primary: #aaaaaa;
400
- --sds-color-semantic-base-icon-primary-hover: #ffffff;
401
- --sds-color-semantic-base-icon-primary-inverse: #000000;
402
- --sds-color-semantic-base-icon-primary-inverse-hover: #9b9b9b;
403
- --sds-color-semantic-base-icon-primary-inverse-pressed: #9b9b9b;
404
- --sds-color-semantic-base-icon-primary-pressed: #ffffff;
405
- --sds-color-semantic-base-icon-secondary: #ffffff;
406
- --sds-color-semantic-base-surface-background: #000000;
407
- --sds-color-semantic-base-surface-primary: #000000;
408
- --sds-color-semantic-base-surface-primary-inverse: #ffffff;
409
- --sds-color-semantic-base-surface-secondary: #333333;
410
- --sds-color-semantic-base-surface-tertiary: #494949;
491
+ --sds-color-semantic-base-ornament-disabled: #696969;
492
+ --sds-color-semantic-base-ornament-on-fill: #000000;
493
+ --sds-color-semantic-base-ornament-primary: #ffffff;
494
+ --sds-color-semantic-base-ornament-primary-inverse: #000000;
495
+ --sds-color-semantic-base-ornament-secondary: #cdcdcd;
496
+ --sds-color-semantic-base-ornament-secondary-hover: #ffffff;
497
+ --sds-color-semantic-base-ornament-secondary-pressed: #ffffff;
498
+ --sds-color-semantic-base-surface: #000000;
499
+ --sds-color-semantic-base-surface-inverse: #ffffff;
411
500
  --sds-color-semantic-base-text-disabled: #696969;
412
501
  --sds-color-semantic-base-text-primary: #ffffff;
413
502
  --sds-color-semantic-base-text-primary-inverse: #000000;
414
503
  --sds-color-semantic-base-text-secondary: #cdcdcd;
415
504
  --sds-color-semantic-base-text-secondary-inverse: #696969;
416
- --sds-color-semantic-accent-border: #a2c9ff;
417
- --sds-color-semantic-accent-border-focus: #a2c9ff;
418
- --sds-color-semantic-accent-border-hover: #cde3ff;
419
- --sds-color-semantic-accent-border-open: #a2c9ff;
420
- --sds-color-semantic-accent-border-pressed: #e2eeff;
421
- --sds-color-semantic-accent-border-selected: #a2c9ff;
422
- --sds-color-semantic-accent-fill-hover: #cde3ff;
423
- --sds-color-semantic-accent-fill-pressed: #e2eeff;
424
- --sds-color-semantic-accent-fill-primary: #a2c9ff;
425
- --sds-color-semantic-accent-icon: #a2c9ff;
426
- --sds-color-semantic-accent-icon-focus: #a2c9ff;
427
- --sds-color-semantic-accent-icon-hover: #cde3ff;
428
- --sds-color-semantic-accent-icon-open: #a2c9ff;
429
- --sds-color-semantic-accent-icon-pressed: #e2eeff;
430
- --sds-color-semantic-accent-icon-selected: #a2c9ff;
431
- --sds-color-semantic-accent-surface-primary: #002573;
432
- --sds-color-semantic-accent-surface-secondary: #a2c9ff;
433
- --sds-color-semantic-accent-text-action: #a2c9ff;
434
- --sds-color-semantic-accent-text-action-hover: #cde3ff;
435
- --sds-color-semantic-accent-text-action-pressed: #e2eeff;
505
+ --sds-color-semantic-accent-border: #5b9aff;
506
+ --sds-color-semantic-accent-border-focus: #5b9aff;
507
+ --sds-color-semantic-accent-border-hover: #a2c9ff;
508
+ --sds-color-semantic-accent-border-open: #5b9aff;
509
+ --sds-color-semantic-accent-border-pressed: #cde3ff;
510
+ --sds-color-semantic-accent-border-selected: #5b9aff;
511
+ --sds-color-semantic-accent-fill-hover: #a2c9ff;
512
+ --sds-color-semantic-accent-fill-pressed: #cde3ff;
513
+ --sds-color-semantic-accent-fill-primary: #5b9aff;
514
+ --sds-color-semantic-accent-ornament: #5b9aff;
515
+ --sds-color-semantic-accent-ornament-focus: #5b9aff;
516
+ --sds-color-semantic-accent-ornament-hover: #a2c9ff;
517
+ --sds-color-semantic-accent-ornament-open: #5b9aff;
518
+ --sds-color-semantic-accent-ornament-pressed: #cde3ff;
519
+ --sds-color-semantic-accent-ornament-selected: #5b9aff;
520
+ --sds-color-semantic-accent-surface-primary: #5b9aff;
521
+ --sds-color-semantic-accent-surface-secondary: #0f1d4a;
522
+ --sds-color-semantic-accent-text-action: #5b9aff;
523
+ --sds-color-semantic-accent-text-action-hover: #a2c9ff;
524
+ --sds-color-semantic-accent-text-action-pressed: #cde3ff;
436
525
  --sds-color-semantic-beta-border: #cebef8;
437
- --sds-color-semantic-beta-fill-hover: #e4dcfc;
438
- --sds-color-semantic-beta-fill-pressed: #f0ebfe;
439
- --sds-color-semantic-beta-fill-primary: #cebef8;
440
- --sds-color-semantic-beta-fill-secondary: #4b0190;
441
- --sds-color-semantic-beta-ornament: #e4dcfc;
442
- --sds-color-semantic-beta-surface-primary: #4b0190;
443
- --sds-color-semantic-beta-surface-secondary: #cebef8;
444
- --sds-color-semantic-beta-text: #e4dcfc;
526
+ --sds-color-semantic-beta-fill-hover: #cebef8;
527
+ --sds-color-semantic-beta-fill-pressed: #e4dcfc;
528
+ --sds-color-semantic-beta-fill-primary: #aa89ef;
529
+ --sds-color-semantic-beta-fill-secondary: #331252;
530
+ --sds-color-semantic-beta-ornament: #cebef8;
531
+ --sds-color-semantic-beta-surface-primary: #aa89ef;
532
+ --sds-color-semantic-beta-surface-secondary: #331252;
533
+ --sds-color-semantic-beta-text: #cebef8;
445
534
  --sds-color-semantic-info-border: #a2c9ff;
446
- --sds-color-semantic-info-fill-hover: #cde3ff;
447
- --sds-color-semantic-info-fill-pressed: #e2eeff;
448
- --sds-color-semantic-info-fill-primary: #a2c9ff;
449
- --sds-color-semantic-info-fill-secondary: #002573;
450
- --sds-color-semantic-info-ornament: #cde3ff;
451
- --sds-color-semantic-info-surface-primary: #002573;
452
- --sds-color-semantic-info-surface-secondary: #a2c9ff;
453
- --sds-color-semantic-info-text: #cde3ff;
454
- --sds-color-semantic-negative-border: #FF9385;
455
- --sds-color-semantic-negative-fill-hover: #FFBDB3;
456
- --sds-color-semantic-negative-fill-pressed: #FFD8D1;
457
- --sds-color-semantic-negative-fill-primary: #FF9385;
458
- --sds-color-semantic-negative-fill-secondary: #630008;
459
- --sds-color-semantic-negative-ornament: #FFBDB3;
460
- --sds-color-semantic-negative-surface-primary: #630008;
461
- --sds-color-semantic-negative-surface-secondary: #FF9385;
462
- --sds-color-semantic-negative-text: #FFBDB3;
535
+ --sds-color-semantic-info-fill-hover: #a2c9ff;
536
+ --sds-color-semantic-info-fill-pressed: #cde3ff;
537
+ --sds-color-semantic-info-fill-primary: #5b9aff;
538
+ --sds-color-semantic-info-fill-secondary: #0f1d4a;
539
+ --sds-color-semantic-info-ornament: #a2c9ff;
540
+ --sds-color-semantic-info-surface-primary: #5b9aff;
541
+ --sds-color-semantic-info-surface-secondary: #0f1d4a;
542
+ --sds-color-semantic-info-text: #a2c9ff;
543
+ --sds-color-semantic-negative-border: #ff988a;
544
+ --sds-color-semantic-negative-fill-hover: #ff988a;
545
+ --sds-color-semantic-negative-fill-pressed: #ffbdb3;
546
+ --sds-color-semantic-negative-fill-primary: #e05043;
547
+ --sds-color-semantic-negative-fill-secondary: #330603;
548
+ --sds-color-semantic-negative-ornament: #ff988a;
549
+ --sds-color-semantic-negative-surface-primary: #e05043;
550
+ --sds-color-semantic-negative-surface-secondary: #330603;
551
+ --sds-color-semantic-negative-text: #ff988a;
463
552
  --sds-color-semantic-neutral-border: #aaaaaa;
464
553
  --sds-color-semantic-neutral-fill-hover: #cdcdcd;
465
554
  --sds-color-semantic-neutral-fill-pressed: #ededed;
466
555
  --sds-color-semantic-neutral-fill-primary: #aaaaaa;
467
556
  --sds-color-semantic-neutral-fill-secondary: #333333;
468
557
  --sds-color-semantic-neutral-ornament: #ededed;
469
- --sds-color-semantic-neutral-surface-primary: #494949;
470
- --sds-color-semantic-neutral-surface-secondary: #aaaaaa;
558
+ --sds-color-semantic-neutral-surface-primary: #aaaaaa;
559
+ --sds-color-semantic-neutral-surface-secondary: #494949;
471
560
  --sds-color-semantic-neutral-text: #ededed;
472
- --sds-color-semantic-notice-border: #cf8e00;
473
- --sds-color-semantic-notice-fill-hover: #efad00;
474
- --sds-color-semantic-notice-fill-pressed: #ffdc9a;
475
- --sds-color-semantic-notice-fill-primary: #cf8e00;
476
- --sds-color-semantic-notice-fill-secondary: #552300;
477
- --sds-color-semantic-notice-ornament: #efad00;
478
- --sds-color-semantic-notice-surface-primary: #552300;
479
- --sds-color-semantic-notice-surface-secondary: #cf8e00;
480
- --sds-color-semantic-notice-text: #efad00;
561
+ --sds-color-semantic-notice-border: #e5bc63;
562
+ --sds-color-semantic-notice-fill-hover: #e5bc63;
563
+ --sds-color-semantic-notice-fill-pressed: #f5d789;
564
+ --sds-color-semantic-notice-fill-primary: #d9a943;
565
+ --sds-color-semantic-notice-fill-secondary: #361b07;
566
+ --sds-color-semantic-notice-ornament: #e5bc63;
567
+ --sds-color-semantic-notice-surface-primary: #d9a943;
568
+ --sds-color-semantic-notice-surface-secondary: #361b07;
569
+ --sds-color-semantic-notice-text: #e5bc63;
481
570
  --sds-color-semantic-positive-border: #85d898;
482
- --sds-color-semantic-positive-fill-hover: #bcecc5;
483
- --sds-color-semantic-positive-fill-pressed: #daf4de;
484
- --sds-color-semantic-positive-fill-primary: #85d898;
485
- --sds-color-semantic-positive-fill-secondary: #053918;
486
- --sds-color-semantic-positive-ornament: #bcecc5;
487
- --sds-color-semantic-positive-surface-primary: #053918;
488
- --sds-color-semantic-positive-surface-secondary: #85d898;
489
- --sds-color-semantic-positive-text: #bcecc5;
571
+ --sds-color-semantic-positive-fill-hover: #85d898;
572
+ --sds-color-semantic-positive-fill-pressed: #bcecc5;
573
+ --sds-color-semantic-positive-fill-primary: #4bae68;
574
+ --sds-color-semantic-positive-fill-secondary: #082608;
575
+ --sds-color-semantic-positive-ornament: #85d898;
576
+ --sds-color-semantic-positive-surface-primary: #4bae68;
577
+ --sds-color-semantic-positive-surface-secondary: #082608;
578
+ --sds-color-semantic-positive-text: #85d898;
490
579
  --sds-corner-l: 20px;
491
580
  --sds-corner-m: 4px;
492
581
  --sds-corner-s: 2px;
@@ -495,81 +584,154 @@
495
584
  --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
496
585
  --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
497
586
  --sds-drop-shadow-none: none;
498
- --sds-font-color: black;
499
587
  --sds-font-font-family-body: "Inter", sans-serif;
588
+ --sds-font-font-family-body-narrow: "Inter", sans-serif;
500
589
  --sds-font-font-family-caps: "Inter", sans-serif;
590
+ --sds-font-font-family-caps-narrow: "Inter", sans-serif;
501
591
  --sds-font-font-family-code: "IBM Plex Mono", monospace;
592
+ --sds-font-font-family-code-narrow: "IBM Plex Mono", monospace;
502
593
  --sds-font-font-family-header: "Inter", sans-serif;
594
+ --sds-font-font-family-header-narrow: "Inter", sans-serif;
503
595
  --sds-font-font-family-tabular: "Inter", sans-serif;
596
+ --sds-font-font-family-tabular-narrow: "Inter", sans-serif;
504
597
  --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
598
+ --sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
505
599
  --sds-font-body-xxxs-400-letter-spacing: 0.1px;
600
+ --sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px;
506
601
  --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
602
+ --sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
507
603
  --sds-font-body-xxxs-600-letter-spacing: 0.1px;
604
+ --sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px;
508
605
  --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
606
+ --sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
509
607
  --sds-font-body-xxs-400-letter-spacing: 0.1px;
608
+ --sds-font-body-xxs-400-letter-spacing-narrow: 0.1px;
510
609
  --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
610
+ --sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
511
611
  --sds-font-body-xxs-600-letter-spacing: 0.1px;
612
+ --sds-font-body-xxs-600-letter-spacing-narrow: 0.1px;
512
613
  --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
614
+ --sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
513
615
  --sds-font-body-xs-400-letter-spacing: 0.08px;
616
+ --sds-font-body-xs-400-letter-spacing-narrow: 0.08px;
514
617
  --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
618
+ --sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
515
619
  --sds-font-body-xs-600-letter-spacing: 0.08px;
620
+ --sds-font-body-xs-600-letter-spacing-narrow: 0.08px;
516
621
  --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
622
+ --sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
517
623
  --sds-font-body-s-400-letter-spacing: 0.08px;
624
+ --sds-font-body-s-400-letter-spacing-narrow: 0.08px;
518
625
  --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
626
+ --sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
519
627
  --sds-font-body-s-600-letter-spacing: 0.08px;
628
+ --sds-font-body-s-600-letter-spacing-narrow: 0.08px;
520
629
  --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
630
+ --sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", sans-serif;
521
631
  --sds-font-body-m-400-letter-spacing: 0px;
632
+ --sds-font-body-m-400-letter-spacing-narrow: 0px;
522
633
  --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
634
+ --sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", sans-serif;
523
635
  --sds-font-body-m-600-letter-spacing: 0px;
636
+ --sds-font-body-m-600-letter-spacing-narrow: 0px;
524
637
  --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
638
+ --sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", sans-serif;
525
639
  --sds-font-body-l-400-letter-spacing: 0px;
640
+ --sds-font-body-l-400-letter-spacing-narrow: 0px;
526
641
  --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
642
+ --sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", sans-serif;
527
643
  --sds-font-body-l-600-letter-spacing: 0px;
644
+ --sds-font-body-l-600-letter-spacing-narrow: 0px;
528
645
  --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
646
+ --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
529
647
  --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
530
- --sds-font-caps-xxxxs-600-text-transform: uppercase;
648
+ --sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px;
649
+ --sds-font-caps-xxxxs-600-text-transform: uppercase;
650
+ --sds-font-caps-xxxxs-600-text-transform-narrow: uppercase;
531
651
  --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
652
+ --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
532
653
  --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
533
- --sds-font-caps-xxxs-600-text-transform: uppercase;
654
+ --sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px;
655
+ --sds-font-caps-xxxs-600-text-transform: uppercase;
656
+ --sds-font-caps-xxxs-600-text-transform-narrow: uppercase;
534
657
  --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
658
+ --sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
535
659
  --sds-font-caps-xxs-600-letter-spacing: 0.5px;
536
- --sds-font-caps-xxs-600-text-transform: uppercase;
660
+ --sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px;
661
+ --sds-font-caps-xxs-600-text-transform: uppercase;
662
+ --sds-font-caps-xxs-600-text-transform-narrow: uppercase;
537
663
  --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
664
+ --sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
538
665
  --sds-font-header-xxxs-600-letter-spacing: 0.1px;
666
+ --sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px;
539
667
  --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
668
+ --sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
540
669
  --sds-font-header-xxs-600-letter-spacing: 0.1px;
670
+ --sds-font-header-xxs-600-letter-spacing-narrow: 0.1px;
541
671
  --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
672
+ --sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", sans-serif;
542
673
  --sds-font-header-xs-600-letter-spacing: 0.08px;
674
+ --sds-font-header-xs-600-letter-spacing-narrow: 0.08px;
543
675
  --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
676
+ --sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", sans-serif;
544
677
  --sds-font-header-s-600-letter-spacing: 0.08px;
678
+ --sds-font-header-s-600-letter-spacing-narrow: 0.08px;
545
679
  --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
680
+ --sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", sans-serif;
546
681
  --sds-font-header-m-600-letter-spacing: 0px;
682
+ --sds-font-header-m-600-letter-spacing-narrow: 0.08px;
547
683
  --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
684
+ --sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", sans-serif;
548
685
  --sds-font-header-l-600-letter-spacing: 0px;
686
+ --sds-font-header-l-600-letter-spacing-narrow: 0px;
549
687
  --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
688
+ --sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", sans-serif;
550
689
  --sds-font-header-xl-600-letter-spacing: 0px;
690
+ --sds-font-header-xl-600-letter-spacing-narrow: 0px;
551
691
  --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
692
+ --sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", sans-serif;
552
693
  --sds-font-header-xxl-600-letter-spacing: 0px;
694
+ --sds-font-header-xxl-600-letter-spacing-narrow: 0px;
553
695
  --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
696
+ --sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
554
697
  --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
698
+ --sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums;
555
699
  --sds-font-tabular-xs-400-letter-spacing: 0px;
700
+ --sds-font-tabular-xs-400-letter-spacing-narrow: 0px;
556
701
  --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
702
+ --sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
557
703
  --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
704
+ --sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums;
558
705
  --sds-font-tabular-xs-600-letter-spacing: 0px;
706
+ --sds-font-tabular-xs-600-letter-spacing-narrow: 0px;
559
707
  --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
708
+ --sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
560
709
  --sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
710
+ --sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums;
561
711
  --sds-font-tabular-s-400-letter-spacing: 0px;
712
+ --sds-font-tabular-s-400-letter-spacing-narrow: 0px;
562
713
  --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
714
+ --sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
563
715
  --sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
716
+ --sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums;
564
717
  --sds-font-tabular-s-600-letter-spacing: 0px;
718
+ --sds-font-tabular-s-600-letter-spacing-narrow: 0px;
565
719
  --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
720
+ --sds-font-code-xs-400-font-narrow: 400 13px/20px "IBM Plex Mono", monospace;
566
721
  --sds-font-code-xs-400-letter-spacing: 0px;
722
+ --sds-font-code-xs-400-letter-spacing-narrow: 0px;
567
723
  --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
724
+ --sds-font-code-xs-600-font-narrow: 600 13px/20px "IBM Plex Mono", monospace;
568
725
  --sds-font-code-xs-600-letter-spacing: 0px;
726
+ --sds-font-code-xs-600-letter-spacing-narrow: 0px;
569
727
  --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
728
+ --sds-font-code-s-400-font-narrow: 400 14px/24px "IBM Plex Mono", monospace;
570
729
  --sds-font-code-s-400-letter-spacing: 0px;
730
+ --sds-font-code-s-400-letter-spacing-narrow: 0px;
571
731
  --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
732
+ --sds-font-code-s-600-font-narrow: 600 14px/24px "IBM Plex Mono", monospace;
572
733
  --sds-font-code-s-600-letter-spacing: 0px;
734
+ --sds-font-code-s-600-letter-spacing-narrow: 0px;
573
735
  --sds-icon-size-input-height: 16px;
574
736
  --sds-icon-size-input-width: 16px;
575
737
  --sds-icon-size-xs-height: 12px;
@@ -591,3 +753,4 @@
591
753
  --sds-space-xxl: 40px;
592
754
  }
593
755
  }
756
+