@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.
Files changed (9) hide show
  1. package/dist/index.cjs.d.ts +132 -104
  2. package/dist/index.cjs.js +998 -631
  3. package/dist/index.esm.d.ts +132 -104
  4. package/dist/index.esm.js +997 -633
  5. package/dist/tailwind.json +409 -273
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +360 -197
  8. package/dist/variables.scss +280 -296
  9. package/package.json +2 -2
package/dist/variables.scss CHANGED
@@ -16,34 +16,38 @@ $sds-border-base-disabled: 1px solid #c3c3c3;
16
16
  $sds-border-base-disabled-dark: 1px solid #696969;
17
17
  $sds-border-base-divider: 1px solid #dfdfdf;
18
18
  $sds-border-base-divider-dark: 1px solid #494949;
19
+ $sds-border-base-divider-inverse: 1px solid #6c6c6c;
20
+ $sds-border-base-divider-inverse-dark: 1px solid #cdcdcd;
19
21
  $sds-border-base-hover: 1px dashed #000000;
20
22
  $sds-border-base-hover-dark: 1px dashed #ffffff;
23
+ $sds-border-base-inverse: 1px dashed #ffffff;
24
+ $sds-border-base-inverse-dark: 1px dashed #000000;
21
25
  $sds-border-base-pressed: 1px dashed #000000;
22
26
  $sds-border-base-pressed-dark: 1px dashed #ffffff;
23
27
  $sds-border-base-table: 1px solid #c3c3c3;
24
28
  $sds-border-base-table-dark: 1px solid #696969;
25
29
  $sds-border-beta-default: 1px solid #6526b5;
26
- $sds-border-beta-default-dark: 1px solid #e4dcfc;
30
+ $sds-border-beta-default-dark: 1px solid #cebef8;
27
31
  $sds-border-beta-extra-thick: 4px solid #6526b5;
28
- $sds-border-beta-extra-thick-dark: 4px solid #e4dcfc;
32
+ $sds-border-beta-extra-thick-dark: 4px solid #cebef8;
29
33
  $sds-border-beta-thick: 2px solid #6526b5;
30
- $sds-border-beta-thick-dark: 2px solid #e4dcfc;
34
+ $sds-border-beta-thick-dark: 2px solid #cebef8;
31
35
  $sds-border-info-default: 1px solid #0041b9;
32
- $sds-border-info-default-dark: 1px solid #cde3ff;
36
+ $sds-border-info-default-dark: 1px solid #a2c9ff;
33
37
  $sds-border-info-extra-thick: 4px solid #0041b9;
34
- $sds-border-info-extra-thick-dark: 4px solid #cde3ff;
38
+ $sds-border-info-extra-thick-dark: 4px solid #a2c9ff;
35
39
  $sds-border-info-thick: 2px solid #0041b9;
36
- $sds-border-info-thick-dark: 2px solid #cde3ff;
40
+ $sds-border-info-thick-dark: 2px solid #a2c9ff;
37
41
  $sds-border-link-dashed: 1px dashed;
38
42
  $sds-border-link-dashed-dark: 1px dashed;
39
43
  $sds-border-link-solid: 1px solid;
40
44
  $sds-border-link-solid-dark: 1px solid;
41
- $sds-border-negative-default: 1px solid #980013;
42
- $sds-border-negative-default-dark: 1px solid #FFBDB3;
43
- $sds-border-negative-extra-thick: 4px solid #980013;
44
- $sds-border-negative-extra-thick-dark: 4px solid #FFBDB3;
45
- $sds-border-negative-thick: 2px solid #980013;
46
- $sds-border-negative-thick-dark: 2px solid #FFBDB3;
45
+ $sds-border-negative-default: 1px solid #980017;
46
+ $sds-border-negative-default-dark: 1px solid #ff988a;
47
+ $sds-border-negative-extra-thick: 4px solid #980017;
48
+ $sds-border-negative-extra-thick-dark: 4px solid #ff988a;
49
+ $sds-border-negative-thick: 2px solid #980017;
50
+ $sds-border-negative-thick-dark: 2px solid #ff988a;
47
51
  $sds-border-neutral-default: 1px solid #969696;
48
52
  $sds-border-neutral-default-dark: 1px solid #aaaaaa;
49
53
  $sds-border-neutral-extra-thick: 4px solid #969696;
@@ -52,34 +56,37 @@ $sds-border-neutral-thick: 2px solid #969696;
52
56
  $sds-border-neutral-thick-dark: 2px solid #aaaaaa;
53
57
  $sds-border-none: none;
54
58
  $sds-border-none-dark: none;
55
- $sds-border-notice-default: 1px solid #b77800;
56
- $sds-border-notice-default-dark: 1px solid #efad00;
57
- $sds-border-notice-extra-thick: 4px solid #b77800;
58
- $sds-border-notice-extra-thick-dark: 4px solid #efad00;
59
- $sds-border-notice-thick: 2px solid #b77800;
60
- $sds-border-notice-thick-dark: 2px solid #efad00;
59
+ $sds-border-notice-default: 1px solid #b07300;
60
+ $sds-border-notice-default-dark: 1px solid #e5bc63;
61
+ $sds-border-notice-extra-thick: 4px solid #b07300;
62
+ $sds-border-notice-extra-thick-dark: 4px solid #e5bc63;
63
+ $sds-border-notice-thick: 2px solid #b07300;
64
+ $sds-border-notice-thick-dark: 2px solid #e5bc63;
61
65
  $sds-border-positive-default: 1px solid #105b2b;
62
- $sds-border-positive-default-dark: 1px solid #bcecc5;
66
+ $sds-border-positive-default-dark: 1px solid #85d898;
63
67
  $sds-border-positive-extra-thick: 4px solid #105b2b;
64
- $sds-border-positive-extra-thick-dark: 4px solid #bcecc5;
68
+ $sds-border-positive-extra-thick-dark: 4px solid #85d898;
65
69
  $sds-border-positive-thick: 2px solid #105b2b;
66
- $sds-border-positive-thick-dark: 2px solid #bcecc5;
70
+ $sds-border-positive-thick-dark: 2px solid #85d898;
71
+ $sds-breakpoint-sm: 0px;
72
+ $sds-breakpoint-md: 512px;
73
+ $sds-breakpoint-lg: 1024px;
67
74
  $sds-color-primitive-blue-100: #e2eeff;
68
- $sds-color-primitive-blue-100-dark: #002573;
75
+ $sds-color-primitive-blue-100-dark: #0f1d4a;
69
76
  $sds-color-primitive-blue-200: #cce1ff;
70
- $sds-color-primitive-blue-200-dark: #0048c5;
77
+ $sds-color-primitive-blue-200-dark: #0a216e;
71
78
  $sds-color-primitive-blue-300: #9dc6ff;
72
- $sds-color-primitive-blue-300-dark: #2573f4;
79
+ $sds-color-primitive-blue-300-dark: #0647b8;
73
80
  $sds-color-primitive-blue-400: #6ca6ff;
74
- $sds-color-primitive-blue-400-dark: #5b9aff;
81
+ $sds-color-primitive-blue-400-dark: #2573f4;
75
82
  $sds-color-primitive-blue-500: #1a6cef;
76
- $sds-color-primitive-blue-500-dark: #a2c9ff;
83
+ $sds-color-primitive-blue-500-dark: #5b9aff;
77
84
  $sds-color-primitive-blue-600: #0041b9;
78
- $sds-color-primitive-blue-600-dark: #cde3ff;
85
+ $sds-color-primitive-blue-600-dark: #a2c9ff;
79
86
  $sds-color-primitive-blue-700: #002d90;
80
- $sds-color-primitive-blue-700-dark: #e2eeff;
87
+ $sds-color-primitive-blue-700-dark: #cde3ff;
81
88
  $sds-color-primitive-blue-800: #00114a;
82
- $sds-color-primitive-blue-800-dark: #f7faff;
89
+ $sds-color-primitive-blue-800-dark: #e2eeff;
83
90
  $sds-color-primitive-gray-50: #ffffff;
84
91
  $sds-color-primitive-gray-50-dark: #000000;
85
92
  $sds-color-primitive-gray-75: #fafafa;
@@ -103,85 +110,99 @@ $sds-color-primitive-gray-800-dark: #fafafa;
103
110
  $sds-color-primitive-gray-900: #000000;
104
111
  $sds-color-primitive-gray-900-dark: #ffffff;
105
112
  $sds-color-primitive-green-100: #daf4de;
106
- $sds-color-primitive-green-100-dark: #053918;
113
+ $sds-color-primitive-green-100-dark: #082608;
107
114
  $sds-color-primitive-green-200: #b9ecc3;
108
- $sds-color-primitive-green-200-dark: #12612e;
115
+ $sds-color-primitive-green-200-dark: #063617;
109
116
  $sds-color-primitive-green-300: #7fd693;
110
- $sds-color-primitive-green-300-dark: #288b49;
117
+ $sds-color-primitive-green-300-dark: #10632e;
111
118
  $sds-color-primitive-green-400: #50b96d;
112
- $sds-color-primitive-green-400-dark: #43ae63;
119
+ $sds-color-primitive-green-400-dark: #278b48;
113
120
  $sds-color-primitive-green-500: #238444;
114
- $sds-color-primitive-green-500-dark: #85d898;
121
+ $sds-color-primitive-green-500-dark: #4bae68;
115
122
  $sds-color-primitive-green-600: #105b2b;
116
- $sds-color-primitive-green-600-dark: #bcecc5;
123
+ $sds-color-primitive-green-600-dark: #85d898;
117
124
  $sds-color-primitive-green-700: #07431d;
118
- $sds-color-primitive-green-700-dark: #daf4de;
125
+ $sds-color-primitive-green-700-dark: #bcecc5;
119
126
  $sds-color-primitive-green-800: #001f00;
120
- $sds-color-primitive-green-800-dark: #f7fbf6;
127
+ $sds-color-primitive-green-800-dark: #daf4de;
121
128
  $sds-color-primitive-purple-100: #efeafe;
122
- $sds-color-primitive-purple-100-dark: #4b0190;
129
+ $sds-color-primitive-purple-100-dark: #331252;
123
130
  $sds-color-primitive-purple-200: #e4dbfc;
124
- $sds-color-primitive-purple-200-dark: #6b2ebc;
131
+ $sds-color-primitive-purple-200-dark: #410f70;
125
132
  $sds-color-primitive-purple-300: #cbbaf8;
126
- $sds-color-primitive-purple-300-dark: #905de6;
133
+ $sds-color-primitive-purple-300-dark: #6429b2;
127
134
  $sds-color-primitive-purple-400: #b296f2;
128
- $sds-color-primitive-purple-400-dark: #aa89ef;
135
+ $sds-color-primitive-purple-400-dark: #905de6;
129
136
  $sds-color-primitive-purple-500: #8b54e2;
130
- $sds-color-primitive-purple-500-dark: #cebef8;
137
+ $sds-color-primitive-purple-500-dark: #aa89ef;
131
138
  $sds-color-primitive-purple-600: #6526b5;
132
- $sds-color-primitive-purple-600-dark: #e4dcfc;
139
+ $sds-color-primitive-purple-600-dark: #cebef8;
133
140
  $sds-color-primitive-purple-700: #490092;
134
- $sds-color-primitive-purple-700-dark: #f0ebfe;
135
- $sds-color-primitive-purple-800: #1a004c;
136
- $sds-color-primitive-purple-800-dark: #fbf9ff;
141
+ $sds-color-primitive-purple-700-dark: #e4dcfc;
142
+ $sds-color-primitive-purple-800: #26004c;
143
+ $sds-color-primitive-purple-800-dark: #f0ebfe;
137
144
  $sds-color-primitive-red-100: #ffe8e6;
138
- $sds-color-primitive-red-100-dark: #630008;
145
+ $sds-color-primitive-red-100-dark: #330603;
139
146
  $sds-color-primitive-red-200: #ffd6d2;
140
- $sds-color-primitive-red-200-dark: #A30000;
147
+ $sds-color-primitive-red-200-dark: #660a12;
141
148
  $sds-color-primitive-red-300: #ffafa8;
142
- $sds-color-primitive-red-300-dark: #E52722;
149
+ $sds-color-primitive-red-300-dark: #9e1c1c;
143
150
  $sds-color-primitive-red-400: #ff7e78;
144
- $sds-color-primitive-red-400-dark: #FF695B;
151
+ $sds-color-primitive-red-400-dark: #c73028;
145
152
  $sds-color-primitive-red-500: #db2131;
146
- $sds-color-primitive-red-500-dark: #FF9385;
147
- $sds-color-primitive-red-600: #980013;
148
- $sds-color-primitive-red-600-dark: #FFBDB3;
153
+ $sds-color-primitive-red-500-dark: #e05043;
154
+ $sds-color-primitive-red-600: #980017;
155
+ $sds-color-primitive-red-600-dark: #ff988a;
149
156
  $sds-color-primitive-red-700: #6f0008;
150
- $sds-color-primitive-red-700-dark: #FFD8D1;
157
+ $sds-color-primitive-red-700-dark: #ffbdb3;
151
158
  $sds-color-primitive-red-800: #340000;
152
- $sds-color-primitive-red-800-dark: #FFF1EE;
153
- $sds-color-primitive-yellow-100: #ffefcf;
154
- $sds-color-primitive-yellow-100-dark: #552300;
159
+ $sds-color-primitive-red-800-dark: #ffd8d1;
160
+ $sds-color-primitive-yellow-100: #fff3db;
161
+ $sds-color-primitive-yellow-100-dark: #361b07;
155
162
  $sds-color-primitive-yellow-200: #ffdb97;
156
- $sds-color-primitive-yellow-200-dark: #834500;
163
+ $sds-color-primitive-yellow-200-dark: #52270a;
157
164
  $sds-color-primitive-yellow-300: #ffca5c;
158
- $sds-color-primitive-yellow-300-dark: #985a00;
165
+ $sds-color-primitive-yellow-300-dark: #965a0b;
159
166
  $sds-color-primitive-yellow-400: #fab700;
160
- $sds-color-primitive-yellow-400-dark: #ac6c00;
167
+ $sds-color-primitive-yellow-400-dark: #bd8804;
161
168
  $sds-color-primitive-yellow-500: #da9900;
162
- $sds-color-primitive-yellow-500-dark: #cf8e00;
163
- $sds-color-primitive-yellow-600: #b77800;
164
- $sds-color-primitive-yellow-600-dark: #efad00;
169
+ $sds-color-primitive-yellow-500-dark: #d9a943;
170
+ $sds-color-primitive-yellow-600: #b07300;
171
+ $sds-color-primitive-yellow-600-dark: #e5bc63;
165
172
  $sds-color-primitive-yellow-700: #7c3e00;
166
- $sds-color-primitive-yellow-700-dark: #ffdc9a;
173
+ $sds-color-primitive-yellow-700-dark: #f5d789;
167
174
  $sds-color-primitive-yellow-800: #541700;
168
- $sds-color-primitive-yellow-800-dark: #fcf2e3;
175
+ $sds-color-primitive-yellow-800-dark: #ffe6a8;
169
176
  $sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
170
177
  $sds-color-primitive-overlay-100-dark: rgba(0, 0, 0, 0.08);
171
178
  $sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
172
179
  $sds-color-primitive-overlay-200-dark: rgba(0, 0, 0, 0.03);
173
- $sds-color-semantic-base-border: #969696;
174
- $sds-color-semantic-base-border-dark: #aaaaaa;
180
+ $sds-color-semantic-base-background-primary: #ffffff;
181
+ $sds-color-semantic-base-background-primary-dark: #000000;
182
+ $sds-color-semantic-base-background-primary-inverse: #000000;
183
+ $sds-color-semantic-base-background-primary-inverse-dark: #ffffff;
184
+ $sds-color-semantic-base-background-secondary: #f3f3f3;
185
+ $sds-color-semantic-base-background-secondary-dark: #333333;
186
+ $sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
187
+ $sds-color-semantic-base-background-secondary-inverse-dark: #ededed;
188
+ $sds-color-semantic-base-background-tertiary: #dfdfdf;
189
+ $sds-color-semantic-base-background-tertiary-dark: #494949;
190
+ $sds-color-semantic-base-border: #6c6c6c;
191
+ $sds-color-semantic-base-border-dark: #cdcdcd;
175
192
  $sds-color-semantic-base-border-disabled: #c3c3c3;
176
193
  $sds-color-semantic-base-border-disabled-dark: #696969;
177
194
  $sds-color-semantic-base-border-hover: #000000;
178
195
  $sds-color-semantic-base-border-hover-dark: #ffffff;
196
+ $sds-color-semantic-base-border-inverse: #ffffff;
197
+ $sds-color-semantic-base-border-inverse-dark: #000000;
179
198
  $sds-color-semantic-base-border-pressed: #000000;
180
199
  $sds-color-semantic-base-border-pressed-dark: #ffffff;
181
200
  $sds-color-semantic-base-border-table: #c3c3c3;
182
201
  $sds-color-semantic-base-border-table-dark: #696969;
183
202
  $sds-color-semantic-base-divider: #dfdfdf;
184
203
  $sds-color-semantic-base-divider-dark: #494949;
204
+ $sds-color-semantic-base-divider-inverse: #6c6c6c;
205
+ $sds-color-semantic-base-divider-inverse-dark: #cdcdcd;
185
206
  $sds-color-semantic-base-fill-disabled: #dfdfdf;
186
207
  $sds-color-semantic-base-fill-disabled-dark: #494949;
187
208
  $sds-color-semantic-base-fill-hover: #c3c3c347;
@@ -194,32 +215,24 @@ $sds-color-semantic-base-fill-primary: #ffffff;
194
215
  $sds-color-semantic-base-fill-primary-dark: #000000;
195
216
  $sds-color-semantic-base-fill-selected: #000000;
196
217
  $sds-color-semantic-base-fill-selected-dark: #ffffff;
197
- $sds-color-semantic-base-icon-disabled: #c3c3c3;
198
- $sds-color-semantic-base-icon-disabled-dark: #696969;
199
- $sds-color-semantic-base-icon-primary: #969696;
200
- $sds-color-semantic-base-icon-primary-dark: #aaaaaa;
201
- $sds-color-semantic-base-icon-primary-hover: #000000;
202
- $sds-color-semantic-base-icon-primary-hover-dark: #ffffff;
203
- $sds-color-semantic-base-icon-primary-inverse: #ffffff;
204
- $sds-color-semantic-base-icon-primary-inverse-dark: #000000;
205
- $sds-color-semantic-base-icon-primary-inverse-hover: #a5a5a5;
206
- $sds-color-semantic-base-icon-primary-inverse-hover-dark: #9b9b9b;
207
- $sds-color-semantic-base-icon-primary-inverse-pressed: #a5a5a5;
208
- $sds-color-semantic-base-icon-primary-inverse-pressed-dark: #9b9b9b;
209
- $sds-color-semantic-base-icon-primary-pressed: #000000;
210
- $sds-color-semantic-base-icon-primary-pressed-dark: #ffffff;
211
- $sds-color-semantic-base-icon-secondary: #000000;
212
- $sds-color-semantic-base-icon-secondary-dark: #ffffff;
213
- $sds-color-semantic-base-surface-background: #ffffff;
214
- $sds-color-semantic-base-surface-background-dark: #000000;
215
- $sds-color-semantic-base-surface-primary: #ffffff;
216
- $sds-color-semantic-base-surface-primary-dark: #000000;
217
- $sds-color-semantic-base-surface-primary-inverse: #000000;
218
- $sds-color-semantic-base-surface-primary-inverse-dark: #ffffff;
219
- $sds-color-semantic-base-surface-secondary: #f3f3f3;
220
- $sds-color-semantic-base-surface-secondary-dark: #333333;
221
- $sds-color-semantic-base-surface-tertiary: #dfdfdf;
222
- $sds-color-semantic-base-surface-tertiary-dark: #494949;
218
+ $sds-color-semantic-base-ornament-disabled: #c3c3c3;
219
+ $sds-color-semantic-base-ornament-disabled-dark: #696969;
220
+ $sds-color-semantic-base-ornament-on-fill: #ffffff;
221
+ $sds-color-semantic-base-ornament-on-fill-dark: #000000;
222
+ $sds-color-semantic-base-ornament-primary: #000000;
223
+ $sds-color-semantic-base-ornament-primary-dark: #ffffff;
224
+ $sds-color-semantic-base-ornament-primary-inverse: #ffffff;
225
+ $sds-color-semantic-base-ornament-primary-inverse-dark: #000000;
226
+ $sds-color-semantic-base-ornament-secondary: #6c6c6c;
227
+ $sds-color-semantic-base-ornament-secondary-dark: #cdcdcd;
228
+ $sds-color-semantic-base-ornament-secondary-hover: #000000;
229
+ $sds-color-semantic-base-ornament-secondary-hover-dark: #ffffff;
230
+ $sds-color-semantic-base-ornament-secondary-pressed: #000000;
231
+ $sds-color-semantic-base-ornament-secondary-pressed-dark: #ffffff;
232
+ $sds-color-semantic-base-surface: #ffffff;
233
+ $sds-color-semantic-base-surface-dark: #000000;
234
+ $sds-color-semantic-base-surface-inverse: #000000;
235
+ $sds-color-semantic-base-surface-inverse-dark: #ffffff;
223
236
  $sds-color-semantic-base-text-disabled: #c3c3c3;
224
237
  $sds-color-semantic-base-text-disabled-dark: #696969;
225
238
  $sds-color-semantic-base-text-primary: #000000;
@@ -231,99 +244,99 @@ $sds-color-semantic-base-text-secondary-dark: #cdcdcd;
231
244
  $sds-color-semantic-base-text-secondary-inverse: #c3c3c3;
232
245
  $sds-color-semantic-base-text-secondary-inverse-dark: #696969;
233
246
  $sds-color-semantic-accent-border: #1a6cef;
234
- $sds-color-semantic-accent-border-dark: #a2c9ff;
247
+ $sds-color-semantic-accent-border-dark: #5b9aff;
235
248
  $sds-color-semantic-accent-border-focus: #1a6cef;
236
- $sds-color-semantic-accent-border-focus-dark: #a2c9ff;
249
+ $sds-color-semantic-accent-border-focus-dark: #5b9aff;
237
250
  $sds-color-semantic-accent-border-hover: #0041b9;
238
- $sds-color-semantic-accent-border-hover-dark: #cde3ff;
251
+ $sds-color-semantic-accent-border-hover-dark: #a2c9ff;
239
252
  $sds-color-semantic-accent-border-open: #1a6cef;
240
- $sds-color-semantic-accent-border-open-dark: #a2c9ff;
253
+ $sds-color-semantic-accent-border-open-dark: #5b9aff;
241
254
  $sds-color-semantic-accent-border-pressed: #002d90;
242
- $sds-color-semantic-accent-border-pressed-dark: #e2eeff;
255
+ $sds-color-semantic-accent-border-pressed-dark: #cde3ff;
243
256
  $sds-color-semantic-accent-border-selected: #1a6cef;
244
- $sds-color-semantic-accent-border-selected-dark: #a2c9ff;
257
+ $sds-color-semantic-accent-border-selected-dark: #5b9aff;
245
258
  $sds-color-semantic-accent-fill-hover: #0041b9;
246
- $sds-color-semantic-accent-fill-hover-dark: #cde3ff;
259
+ $sds-color-semantic-accent-fill-hover-dark: #a2c9ff;
247
260
  $sds-color-semantic-accent-fill-pressed: #002d90;
248
- $sds-color-semantic-accent-fill-pressed-dark: #e2eeff;
261
+ $sds-color-semantic-accent-fill-pressed-dark: #cde3ff;
249
262
  $sds-color-semantic-accent-fill-primary: #1a6cef;
250
- $sds-color-semantic-accent-fill-primary-dark: #a2c9ff;
251
- $sds-color-semantic-accent-icon: #1a6cef;
252
- $sds-color-semantic-accent-icon-dark: #a2c9ff;
253
- $sds-color-semantic-accent-icon-focus: #1a6cef;
254
- $sds-color-semantic-accent-icon-focus-dark: #a2c9ff;
255
- $sds-color-semantic-accent-icon-hover: #0041b9;
256
- $sds-color-semantic-accent-icon-hover-dark: #cde3ff;
257
- $sds-color-semantic-accent-icon-open: #1a6cef;
258
- $sds-color-semantic-accent-icon-open-dark: #a2c9ff;
259
- $sds-color-semantic-accent-icon-pressed: #002d90;
260
- $sds-color-semantic-accent-icon-pressed-dark: #e2eeff;
261
- $sds-color-semantic-accent-icon-selected: #1a6cef;
262
- $sds-color-semantic-accent-icon-selected-dark: #a2c9ff;
263
- $sds-color-semantic-accent-surface-primary: #e2eeff;
264
- $sds-color-semantic-accent-surface-primary-dark: #002573;
265
- $sds-color-semantic-accent-surface-secondary: #1a6cef;
266
- $sds-color-semantic-accent-surface-secondary-dark: #a2c9ff;
263
+ $sds-color-semantic-accent-fill-primary-dark: #5b9aff;
264
+ $sds-color-semantic-accent-ornament: #1a6cef;
265
+ $sds-color-semantic-accent-ornament-dark: #5b9aff;
266
+ $sds-color-semantic-accent-ornament-focus: #1a6cef;
267
+ $sds-color-semantic-accent-ornament-focus-dark: #5b9aff;
268
+ $sds-color-semantic-accent-ornament-hover: #0041b9;
269
+ $sds-color-semantic-accent-ornament-hover-dark: #a2c9ff;
270
+ $sds-color-semantic-accent-ornament-open: #1a6cef;
271
+ $sds-color-semantic-accent-ornament-open-dark: #5b9aff;
272
+ $sds-color-semantic-accent-ornament-pressed: #002d90;
273
+ $sds-color-semantic-accent-ornament-pressed-dark: #cde3ff;
274
+ $sds-color-semantic-accent-ornament-selected: #1a6cef;
275
+ $sds-color-semantic-accent-ornament-selected-dark: #5b9aff;
276
+ $sds-color-semantic-accent-surface-primary: #1a6cef;
277
+ $sds-color-semantic-accent-surface-primary-dark: #5b9aff;
278
+ $sds-color-semantic-accent-surface-secondary: #e2eeff;
279
+ $sds-color-semantic-accent-surface-secondary-dark: #0f1d4a;
267
280
  $sds-color-semantic-accent-text-action: #1a6cef;
268
- $sds-color-semantic-accent-text-action-dark: #a2c9ff;
281
+ $sds-color-semantic-accent-text-action-dark: #5b9aff;
269
282
  $sds-color-semantic-accent-text-action-hover: #0041b9;
270
- $sds-color-semantic-accent-text-action-hover-dark: #cde3ff;
283
+ $sds-color-semantic-accent-text-action-hover-dark: #a2c9ff;
271
284
  $sds-color-semantic-accent-text-action-pressed: #002d90;
272
- $sds-color-semantic-accent-text-action-pressed-dark: #e2eeff;
273
- $sds-color-semantic-beta-border: #8b54e2;
285
+ $sds-color-semantic-accent-text-action-pressed-dark: #cde3ff;
286
+ $sds-color-semantic-beta-border: #6526b5;
274
287
  $sds-color-semantic-beta-border-dark: #cebef8;
275
288
  $sds-color-semantic-beta-fill-hover: #6526b5;
276
- $sds-color-semantic-beta-fill-hover-dark: #e4dcfc;
289
+ $sds-color-semantic-beta-fill-hover-dark: #cebef8;
277
290
  $sds-color-semantic-beta-fill-pressed: #490092;
278
- $sds-color-semantic-beta-fill-pressed-dark: #f0ebfe;
291
+ $sds-color-semantic-beta-fill-pressed-dark: #e4dcfc;
279
292
  $sds-color-semantic-beta-fill-primary: #8b54e2;
280
- $sds-color-semantic-beta-fill-primary-dark: #cebef8;
293
+ $sds-color-semantic-beta-fill-primary-dark: #aa89ef;
281
294
  $sds-color-semantic-beta-fill-secondary: #efeafe;
282
- $sds-color-semantic-beta-fill-secondary-dark: #4b0190;
295
+ $sds-color-semantic-beta-fill-secondary-dark: #331252;
283
296
  $sds-color-semantic-beta-ornament: #6526b5;
284
- $sds-color-semantic-beta-ornament-dark: #e4dcfc;
285
- $sds-color-semantic-beta-surface-primary: #efeafe;
286
- $sds-color-semantic-beta-surface-primary-dark: #4b0190;
287
- $sds-color-semantic-beta-surface-secondary: #8b54e2;
288
- $sds-color-semantic-beta-surface-secondary-dark: #cebef8;
297
+ $sds-color-semantic-beta-ornament-dark: #cebef8;
298
+ $sds-color-semantic-beta-surface-primary: #8b54e2;
299
+ $sds-color-semantic-beta-surface-primary-dark: #aa89ef;
300
+ $sds-color-semantic-beta-surface-secondary: #efeafe;
301
+ $sds-color-semantic-beta-surface-secondary-dark: #331252;
289
302
  $sds-color-semantic-beta-text: #6526b5;
290
- $sds-color-semantic-beta-text-dark: #e4dcfc;
291
- $sds-color-semantic-info-border: #1a6cef;
303
+ $sds-color-semantic-beta-text-dark: #cebef8;
304
+ $sds-color-semantic-info-border: #0041b9;
292
305
  $sds-color-semantic-info-border-dark: #a2c9ff;
293
306
  $sds-color-semantic-info-fill-hover: #0041b9;
294
- $sds-color-semantic-info-fill-hover-dark: #cde3ff;
307
+ $sds-color-semantic-info-fill-hover-dark: #a2c9ff;
295
308
  $sds-color-semantic-info-fill-pressed: #002d90;
296
- $sds-color-semantic-info-fill-pressed-dark: #e2eeff;
309
+ $sds-color-semantic-info-fill-pressed-dark: #cde3ff;
297
310
  $sds-color-semantic-info-fill-primary: #1a6cef;
298
- $sds-color-semantic-info-fill-primary-dark: #a2c9ff;
311
+ $sds-color-semantic-info-fill-primary-dark: #5b9aff;
299
312
  $sds-color-semantic-info-fill-secondary: #e2eeff;
300
- $sds-color-semantic-info-fill-secondary-dark: #002573;
313
+ $sds-color-semantic-info-fill-secondary-dark: #0f1d4a;
301
314
  $sds-color-semantic-info-ornament: #0041b9;
302
- $sds-color-semantic-info-ornament-dark: #cde3ff;
303
- $sds-color-semantic-info-surface-primary: #e2eeff;
304
- $sds-color-semantic-info-surface-primary-dark: #002573;
305
- $sds-color-semantic-info-surface-secondary: #1a6cef;
306
- $sds-color-semantic-info-surface-secondary-dark: #a2c9ff;
315
+ $sds-color-semantic-info-ornament-dark: #a2c9ff;
316
+ $sds-color-semantic-info-surface-primary: #1a6cef;
317
+ $sds-color-semantic-info-surface-primary-dark: #5b9aff;
318
+ $sds-color-semantic-info-surface-secondary: #e2eeff;
319
+ $sds-color-semantic-info-surface-secondary-dark: #0f1d4a;
307
320
  $sds-color-semantic-info-text: #0041b9;
308
- $sds-color-semantic-info-text-dark: #cde3ff;
309
- $sds-color-semantic-negative-border: #db2131;
310
- $sds-color-semantic-negative-border-dark: #FF9385;
311
- $sds-color-semantic-negative-fill-hover: #980013;
312
- $sds-color-semantic-negative-fill-hover-dark: #FFBDB3;
321
+ $sds-color-semantic-info-text-dark: #a2c9ff;
322
+ $sds-color-semantic-negative-border: #980017;
323
+ $sds-color-semantic-negative-border-dark: #ff988a;
324
+ $sds-color-semantic-negative-fill-hover: #980017;
325
+ $sds-color-semantic-negative-fill-hover-dark: #ff988a;
313
326
  $sds-color-semantic-negative-fill-pressed: #6f0008;
314
- $sds-color-semantic-negative-fill-pressed-dark: #FFD8D1;
327
+ $sds-color-semantic-negative-fill-pressed-dark: #ffbdb3;
315
328
  $sds-color-semantic-negative-fill-primary: #db2131;
316
- $sds-color-semantic-negative-fill-primary-dark: #FF9385;
329
+ $sds-color-semantic-negative-fill-primary-dark: #e05043;
317
330
  $sds-color-semantic-negative-fill-secondary: #ffe8e6;
318
- $sds-color-semantic-negative-fill-secondary-dark: #630008;
319
- $sds-color-semantic-negative-ornament: #980013;
320
- $sds-color-semantic-negative-ornament-dark: #FFBDB3;
321
- $sds-color-semantic-negative-surface-primary: #ffe8e6;
322
- $sds-color-semantic-negative-surface-primary-dark: #630008;
323
- $sds-color-semantic-negative-surface-secondary: #db2131;
324
- $sds-color-semantic-negative-surface-secondary-dark: #FF9385;
325
- $sds-color-semantic-negative-text: #980013;
326
- $sds-color-semantic-negative-text-dark: #FFBDB3;
331
+ $sds-color-semantic-negative-fill-secondary-dark: #330603;
332
+ $sds-color-semantic-negative-ornament: #980017;
333
+ $sds-color-semantic-negative-ornament-dark: #ff988a;
334
+ $sds-color-semantic-negative-surface-primary: #db2131;
335
+ $sds-color-semantic-negative-surface-primary-dark: #e05043;
336
+ $sds-color-semantic-negative-surface-secondary: #ffe8e6;
337
+ $sds-color-semantic-negative-surface-secondary-dark: #330603;
338
+ $sds-color-semantic-negative-text: #980017;
339
+ $sds-color-semantic-negative-text-dark: #ff988a;
327
340
  $sds-color-semantic-neutral-border: #969696;
328
341
  $sds-color-semantic-neutral-border-dark: #aaaaaa;
329
342
  $sds-color-semantic-neutral-fill-hover: #6c6c6c;
@@ -336,249 +349,220 @@ $sds-color-semantic-neutral-fill-secondary: #f3f3f3;
336
349
  $sds-color-semantic-neutral-fill-secondary-dark: #333333;
337
350
  $sds-color-semantic-neutral-ornament: #3b3b3b;
338
351
  $sds-color-semantic-neutral-ornament-dark: #ededed;
339
- $sds-color-semantic-neutral-surface-primary: #dfdfdf;
340
- $sds-color-semantic-neutral-surface-primary-dark: #494949;
341
- $sds-color-semantic-neutral-surface-secondary: #969696;
342
- $sds-color-semantic-neutral-surface-secondary-dark: #aaaaaa;
352
+ $sds-color-semantic-neutral-surface-primary: #969696;
353
+ $sds-color-semantic-neutral-surface-primary-dark: #aaaaaa;
354
+ $sds-color-semantic-neutral-surface-secondary: #dfdfdf;
355
+ $sds-color-semantic-neutral-surface-secondary-dark: #494949;
343
356
  $sds-color-semantic-neutral-text: #3b3b3b;
344
357
  $sds-color-semantic-neutral-text-dark: #ededed;
345
- $sds-color-semantic-notice-border: #da9900;
346
- $sds-color-semantic-notice-border-dark: #cf8e00;
347
- $sds-color-semantic-notice-fill-hover: #b77800;
348
- $sds-color-semantic-notice-fill-hover-dark: #efad00;
358
+ $sds-color-semantic-notice-border: #b07300;
359
+ $sds-color-semantic-notice-border-dark: #e5bc63;
360
+ $sds-color-semantic-notice-fill-hover: #b07300;
361
+ $sds-color-semantic-notice-fill-hover-dark: #e5bc63;
349
362
  $sds-color-semantic-notice-fill-pressed: #7c3e00;
350
- $sds-color-semantic-notice-fill-pressed-dark: #ffdc9a;
363
+ $sds-color-semantic-notice-fill-pressed-dark: #f5d789;
351
364
  $sds-color-semantic-notice-fill-primary: #da9900;
352
- $sds-color-semantic-notice-fill-primary-dark: #cf8e00;
353
- $sds-color-semantic-notice-fill-secondary: #ffefcf;
354
- $sds-color-semantic-notice-fill-secondary-dark: #552300;
355
- $sds-color-semantic-notice-ornament: #b77800;
356
- $sds-color-semantic-notice-ornament-dark: #efad00;
357
- $sds-color-semantic-notice-surface-primary: #ffefcf;
358
- $sds-color-semantic-notice-surface-primary-dark: #552300;
359
- $sds-color-semantic-notice-surface-secondary: #da9900;
360
- $sds-color-semantic-notice-surface-secondary-dark: #cf8e00;
361
- $sds-color-semantic-notice-text: #b77800;
362
- $sds-color-semantic-notice-text-dark: #efad00;
363
- $sds-color-semantic-positive-border: #238444;
365
+ $sds-color-semantic-notice-fill-primary-dark: #d9a943;
366
+ $sds-color-semantic-notice-fill-secondary: #fff3db;
367
+ $sds-color-semantic-notice-fill-secondary-dark: #361b07;
368
+ $sds-color-semantic-notice-ornament: #b07300;
369
+ $sds-color-semantic-notice-ornament-dark: #e5bc63;
370
+ $sds-color-semantic-notice-surface-primary: #da9900;
371
+ $sds-color-semantic-notice-surface-primary-dark: #d9a943;
372
+ $sds-color-semantic-notice-surface-secondary: #fff3db;
373
+ $sds-color-semantic-notice-surface-secondary-dark: #361b07;
374
+ $sds-color-semantic-notice-text: #b07300;
375
+ $sds-color-semantic-notice-text-dark: #e5bc63;
376
+ $sds-color-semantic-positive-border: #105b2b;
364
377
  $sds-color-semantic-positive-border-dark: #85d898;
365
378
  $sds-color-semantic-positive-fill-hover: #105b2b;
366
- $sds-color-semantic-positive-fill-hover-dark: #bcecc5;
379
+ $sds-color-semantic-positive-fill-hover-dark: #85d898;
367
380
  $sds-color-semantic-positive-fill-pressed: #07431d;
368
- $sds-color-semantic-positive-fill-pressed-dark: #daf4de;
381
+ $sds-color-semantic-positive-fill-pressed-dark: #bcecc5;
369
382
  $sds-color-semantic-positive-fill-primary: #238444;
370
- $sds-color-semantic-positive-fill-primary-dark: #85d898;
383
+ $sds-color-semantic-positive-fill-primary-dark: #4bae68;
371
384
  $sds-color-semantic-positive-fill-secondary: #daf4de;
372
- $sds-color-semantic-positive-fill-secondary-dark: #053918;
385
+ $sds-color-semantic-positive-fill-secondary-dark: #082608;
373
386
  $sds-color-semantic-positive-ornament: #105b2b;
374
- $sds-color-semantic-positive-ornament-dark: #bcecc5;
375
- $sds-color-semantic-positive-surface-primary: #daf4de;
376
- $sds-color-semantic-positive-surface-primary-dark: #053918;
377
- $sds-color-semantic-positive-surface-secondary: #238444;
378
- $sds-color-semantic-positive-surface-secondary-dark: #85d898;
387
+ $sds-color-semantic-positive-ornament-dark: #85d898;
388
+ $sds-color-semantic-positive-surface-primary: #238444;
389
+ $sds-color-semantic-positive-surface-primary-dark: #4bae68;
390
+ $sds-color-semantic-positive-surface-secondary: #daf4de;
391
+ $sds-color-semantic-positive-surface-secondary-dark: #082608;
379
392
  $sds-color-semantic-positive-text: #105b2b;
380
- $sds-color-semantic-positive-text-dark: #bcecc5;
393
+ $sds-color-semantic-positive-text-dark: #85d898;
381
394
  $sds-corner-l: 20px;
382
- $sds-corner-l-dark: 20px;
383
395
  $sds-corner-m: 4px;
384
- $sds-corner-m-dark: 4px;
385
396
  $sds-corner-s: 2px;
386
- $sds-corner-s-dark: 2px;
387
397
  $sds-corner-none: 0px;
388
- $sds-corner-none-dark: 0px;
389
398
  $sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
390
- $sds-drop-shadow-l-dark: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
391
399
  $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);
392
- $sds-drop-shadow-m-dark: 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);
393
400
  $sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
394
- $sds-drop-shadow-s-dark: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
395
401
  $sds-drop-shadow-none: none;
396
- $sds-drop-shadow-none-dark: none;
397
- $sds-font-color: black;
398
- $sds-font-color-dark: black;
399
402
  $sds-font-font-family-body: "Inter", sans-serif;
400
- $sds-font-font-family-body-dark: "Inter", sans-serif;
403
+ $sds-font-font-family-body-narrow: "Inter", sans-serif;
401
404
  $sds-font-font-family-caps: "Inter", sans-serif;
402
- $sds-font-font-family-caps-dark: "Inter", sans-serif;
405
+ $sds-font-font-family-caps-narrow: "Inter", sans-serif;
403
406
  $sds-font-font-family-code: "IBM Plex Mono", monospace;
404
- $sds-font-font-family-code-dark: "IBM Plex Mono", monospace;
407
+ $sds-font-font-family-code-narrow: "IBM Plex Mono", monospace;
405
408
  $sds-font-font-family-header: "Inter", sans-serif;
406
- $sds-font-font-family-header-dark: "Inter", sans-serif;
409
+ $sds-font-font-family-header-narrow: "Inter", sans-serif;
407
410
  $sds-font-font-family-tabular: "Inter", sans-serif;
408
- $sds-font-font-family-tabular-dark: "Inter", sans-serif;
411
+ $sds-font-font-family-tabular-narrow: "Inter", sans-serif;
409
412
  $sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
410
- $sds-font-body-xxxs-400-font-dark: 400 11px/16px "Inter", sans-serif;
413
+ $sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
411
414
  $sds-font-body-xxxs-400-letter-spacing: 0.1px;
412
- $sds-font-body-xxxs-400-letter-spacing-dark: 0.1px;
415
+ $sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px;
413
416
  $sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
414
- $sds-font-body-xxxs-600-font-dark: 600 11px/16px "Inter", sans-serif;
417
+ $sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
415
418
  $sds-font-body-xxxs-600-letter-spacing: 0.1px;
416
- $sds-font-body-xxxs-600-letter-spacing-dark: 0.1px;
419
+ $sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px;
417
420
  $sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
418
- $sds-font-body-xxs-400-font-dark: 400 12px/18px "Inter", sans-serif;
421
+ $sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", sans-serif;
419
422
  $sds-font-body-xxs-400-letter-spacing: 0.1px;
420
- $sds-font-body-xxs-400-letter-spacing-dark: 0.1px;
423
+ $sds-font-body-xxs-400-letter-spacing-narrow: 0.1px;
421
424
  $sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
422
- $sds-font-body-xxs-600-font-dark: 600 12px/18px "Inter", sans-serif;
425
+ $sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
423
426
  $sds-font-body-xxs-600-letter-spacing: 0.1px;
424
- $sds-font-body-xxs-600-letter-spacing-dark: 0.1px;
427
+ $sds-font-body-xxs-600-letter-spacing-narrow: 0.1px;
425
428
  $sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
426
- $sds-font-body-xs-400-font-dark: 400 13px/20px "Inter", sans-serif;
429
+ $sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
427
430
  $sds-font-body-xs-400-letter-spacing: 0.08px;
428
- $sds-font-body-xs-400-letter-spacing-dark: 0.08px;
431
+ $sds-font-body-xs-400-letter-spacing-narrow: 0.08px;
429
432
  $sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
430
- $sds-font-body-xs-600-font-dark: 600 13px/20px "Inter", sans-serif;
433
+ $sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
431
434
  $sds-font-body-xs-600-letter-spacing: 0.08px;
432
- $sds-font-body-xs-600-letter-spacing-dark: 0.08px;
435
+ $sds-font-body-xs-600-letter-spacing-narrow: 0.08px;
433
436
  $sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
434
- $sds-font-body-s-400-font-dark: 400 14px/24px "Inter", sans-serif;
437
+ $sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
435
438
  $sds-font-body-s-400-letter-spacing: 0.08px;
436
- $sds-font-body-s-400-letter-spacing-dark: 0.08px;
439
+ $sds-font-body-s-400-letter-spacing-narrow: 0.08px;
437
440
  $sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
438
- $sds-font-body-s-600-font-dark: 600 14px/24px "Inter", sans-serif;
441
+ $sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
439
442
  $sds-font-body-s-600-letter-spacing: 0.08px;
440
- $sds-font-body-s-600-letter-spacing-dark: 0.08px;
443
+ $sds-font-body-s-600-letter-spacing-narrow: 0.08px;
441
444
  $sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
442
- $sds-font-body-m-400-font-dark: 400 16px/26px "Inter", sans-serif;
445
+ $sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", sans-serif;
443
446
  $sds-font-body-m-400-letter-spacing: 0px;
444
- $sds-font-body-m-400-letter-spacing-dark: 0px;
447
+ $sds-font-body-m-400-letter-spacing-narrow: 0px;
445
448
  $sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
446
- $sds-font-body-m-600-font-dark: 600 16px/26px "Inter", sans-serif;
449
+ $sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", sans-serif;
447
450
  $sds-font-body-m-600-letter-spacing: 0px;
448
- $sds-font-body-m-600-letter-spacing-dark: 0px;
451
+ $sds-font-body-m-600-letter-spacing-narrow: 0px;
449
452
  $sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
450
- $sds-font-body-l-400-font-dark: 400 18px/28px "Inter", sans-serif;
453
+ $sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", sans-serif;
451
454
  $sds-font-body-l-400-letter-spacing: 0px;
452
- $sds-font-body-l-400-letter-spacing-dark: 0px;
455
+ $sds-font-body-l-400-letter-spacing-narrow: 0px;
453
456
  $sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
454
- $sds-font-body-l-600-font-dark: 600 18px/28px "Inter", sans-serif;
457
+ $sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", sans-serif;
455
458
  $sds-font-body-l-600-letter-spacing: 0px;
456
- $sds-font-body-l-600-letter-spacing-dark: 0px;
459
+ $sds-font-body-l-600-letter-spacing-narrow: 0px;
457
460
  $sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
458
- $sds-font-caps-xxxxs-600-font-dark: 600 10px/14px "Inter", sans-serif;
461
+ $sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
459
462
  $sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
460
- $sds-font-caps-xxxxs-600-letter-spacing-dark: 0.5px;
461
- $sds-font-caps-xxxxs-600-text-transform: uppercase;
462
- $sds-font-caps-xxxxs-600-text-transform-dark: uppercase;
463
+ $sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px;
464
+ $sds-font-caps-xxxxs-600-text-transform: uppercase;
465
+ $sds-font-caps-xxxxs-600-text-transform-narrow: uppercase;
463
466
  $sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
464
- $sds-font-caps-xxxs-600-font-dark: 600 11px/16px "Inter", sans-serif;
467
+ $sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif;
465
468
  $sds-font-caps-xxxs-600-letter-spacing: 0.5px;
466
- $sds-font-caps-xxxs-600-letter-spacing-dark: 0.5px;
467
- $sds-font-caps-xxxs-600-text-transform: uppercase;
468
- $sds-font-caps-xxxs-600-text-transform-dark: uppercase;
469
+ $sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px;
470
+ $sds-font-caps-xxxs-600-text-transform: uppercase;
471
+ $sds-font-caps-xxxs-600-text-transform-narrow: uppercase;
469
472
  $sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
470
- $sds-font-caps-xxs-600-font-dark: 600 12px/18px "Inter", sans-serif;
473
+ $sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
471
474
  $sds-font-caps-xxs-600-letter-spacing: 0.5px;
472
- $sds-font-caps-xxs-600-letter-spacing-dark: 0.5px;
473
- $sds-font-caps-xxs-600-text-transform: uppercase;
474
- $sds-font-caps-xxs-600-text-transform-dark: uppercase;
475
+ $sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px;
476
+ $sds-font-caps-xxs-600-text-transform: uppercase;
477
+ $sds-font-caps-xxs-600-text-transform-narrow: uppercase;
475
478
  $sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
476
- $sds-font-header-xxxs-600-font-dark: 600 11px/16px "Inter", sans-serif;
479
+ $sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
477
480
  $sds-font-header-xxxs-600-letter-spacing: 0.1px;
478
- $sds-font-header-xxxs-600-letter-spacing-dark: 0.1px;
481
+ $sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px;
479
482
  $sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
480
- $sds-font-header-xxs-600-font-dark: 600 12px/18px "Inter", sans-serif;
483
+ $sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif;
481
484
  $sds-font-header-xxs-600-letter-spacing: 0.1px;
482
- $sds-font-header-xxs-600-letter-spacing-dark: 0.1px;
485
+ $sds-font-header-xxs-600-letter-spacing-narrow: 0.1px;
483
486
  $sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
484
- $sds-font-header-xs-600-font-dark: 600 13px/18px "Inter", sans-serif;
487
+ $sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", sans-serif;
485
488
  $sds-font-header-xs-600-letter-spacing: 0.08px;
486
- $sds-font-header-xs-600-letter-spacing-dark: 0.08px;
489
+ $sds-font-header-xs-600-letter-spacing-narrow: 0.08px;
487
490
  $sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
488
- $sds-font-header-s-600-font-dark: 600 14px/20px "Inter", sans-serif;
491
+ $sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", sans-serif;
489
492
  $sds-font-header-s-600-letter-spacing: 0.08px;
490
- $sds-font-header-s-600-letter-spacing-dark: 0.08px;
493
+ $sds-font-header-s-600-letter-spacing-narrow: 0.08px;
491
494
  $sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
492
- $sds-font-header-m-600-font-dark: 600 16px/22px "Inter", sans-serif;
495
+ $sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", sans-serif;
493
496
  $sds-font-header-m-600-letter-spacing: 0px;
494
- $sds-font-header-m-600-letter-spacing-dark: 0px;
497
+ $sds-font-header-m-600-letter-spacing-narrow: 0.08px;
495
498
  $sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
496
- $sds-font-header-l-600-font-dark: 600 18px/24px "Inter", sans-serif;
499
+ $sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", sans-serif;
497
500
  $sds-font-header-l-600-letter-spacing: 0px;
498
- $sds-font-header-l-600-letter-spacing-dark: 0px;
501
+ $sds-font-header-l-600-letter-spacing-narrow: 0px;
499
502
  $sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
500
- $sds-font-header-xl-600-font-dark: 600 22px/30px "Inter", sans-serif;
503
+ $sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", sans-serif;
501
504
  $sds-font-header-xl-600-letter-spacing: 0px;
502
- $sds-font-header-xl-600-letter-spacing-dark: 0px;
505
+ $sds-font-header-xl-600-letter-spacing-narrow: 0px;
503
506
  $sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
504
- $sds-font-header-xxl-600-font-dark: 600 26px/34px "Inter", sans-serif;
507
+ $sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", sans-serif;
505
508
  $sds-font-header-xxl-600-letter-spacing: 0px;
506
- $sds-font-header-xxl-600-letter-spacing-dark: 0px;
509
+ $sds-font-header-xxl-600-letter-spacing-narrow: 0px;
507
510
  $sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
508
- $sds-font-tabular-xs-400-font-dark: 400 13px/20px "Inter", sans-serif;
511
+ $sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif;
509
512
  $sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
510
- $sds-font-tabular-xs-400-font-variant-numeric-dark: tabular-nums;
513
+ $sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums;
511
514
  $sds-font-tabular-xs-400-letter-spacing: 0px;
512
- $sds-font-tabular-xs-400-letter-spacing-dark: 0px;
515
+ $sds-font-tabular-xs-400-letter-spacing-narrow: 0px;
513
516
  $sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
514
- $sds-font-tabular-xs-600-font-dark: 600 13px/20px "Inter", sans-serif;
517
+ $sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif;
515
518
  $sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
516
- $sds-font-tabular-xs-600-font-variant-numeric-dark: tabular-nums;
519
+ $sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums;
517
520
  $sds-font-tabular-xs-600-letter-spacing: 0px;
518
- $sds-font-tabular-xs-600-letter-spacing-dark: 0px;
521
+ $sds-font-tabular-xs-600-letter-spacing-narrow: 0px;
519
522
  $sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
520
- $sds-font-tabular-s-400-font-dark: 400 14px/24px "Inter", sans-serif;
523
+ $sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", sans-serif;
521
524
  $sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
522
- $sds-font-tabular-s-400-font-variant-numeric-dark: tabular-nums;
525
+ $sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums;
523
526
  $sds-font-tabular-s-400-letter-spacing: 0px;
524
- $sds-font-tabular-s-400-letter-spacing-dark: 0px;
527
+ $sds-font-tabular-s-400-letter-spacing-narrow: 0px;
525
528
  $sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
526
- $sds-font-tabular-s-600-font-dark: 600 14px/24px "Inter", sans-serif;
529
+ $sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", sans-serif;
527
530
  $sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
528
- $sds-font-tabular-s-600-font-variant-numeric-dark: tabular-nums;
531
+ $sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums;
529
532
  $sds-font-tabular-s-600-letter-spacing: 0px;
530
- $sds-font-tabular-s-600-letter-spacing-dark: 0px;
533
+ $sds-font-tabular-s-600-letter-spacing-narrow: 0px;
531
534
  $sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
532
- $sds-font-code-xs-400-font-dark: 400 13px/20px "IBM Plex Mono", monospace;
535
+ $sds-font-code-xs-400-font-narrow: 400 13px/20px "IBM Plex Mono", monospace;
533
536
  $sds-font-code-xs-400-letter-spacing: 0px;
534
- $sds-font-code-xs-400-letter-spacing-dark: 0px;
537
+ $sds-font-code-xs-400-letter-spacing-narrow: 0px;
535
538
  $sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
536
- $sds-font-code-xs-600-font-dark: 600 13px/20px "IBM Plex Mono", monospace;
539
+ $sds-font-code-xs-600-font-narrow: 600 13px/20px "IBM Plex Mono", monospace;
537
540
  $sds-font-code-xs-600-letter-spacing: 0px;
538
- $sds-font-code-xs-600-letter-spacing-dark: 0px;
541
+ $sds-font-code-xs-600-letter-spacing-narrow: 0px;
539
542
  $sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
540
- $sds-font-code-s-400-font-dark: 400 14px/24px "IBM Plex Mono", monospace;
543
+ $sds-font-code-s-400-font-narrow: 400 14px/24px "IBM Plex Mono", monospace;
541
544
  $sds-font-code-s-400-letter-spacing: 0px;
542
- $sds-font-code-s-400-letter-spacing-dark: 0px;
545
+ $sds-font-code-s-400-letter-spacing-narrow: 0px;
543
546
  $sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
544
- $sds-font-code-s-600-font-dark: 600 14px/24px "IBM Plex Mono", monospace;
547
+ $sds-font-code-s-600-font-narrow: 600 14px/24px "IBM Plex Mono", monospace;
545
548
  $sds-font-code-s-600-letter-spacing: 0px;
546
- $sds-font-code-s-600-letter-spacing-dark: 0px;
549
+ $sds-font-code-s-600-letter-spacing-narrow: 0px;
547
550
  $sds-icon-size-input-height: 16px;
548
- $sds-icon-size-input-height-dark: 16px;
549
551
  $sds-icon-size-input-width: 16px;
550
- $sds-icon-size-input-width-dark: 16px;
551
552
  $sds-icon-size-xs-height: 12px;
552
- $sds-icon-size-xs-height-dark: 12px;
553
553
  $sds-icon-size-xs-width: 12px;
554
- $sds-icon-size-xs-width-dark: 12px;
555
554
  $sds-icon-size-s-height: 16px;
556
- $sds-icon-size-s-height-dark: 16px;
557
555
  $sds-icon-size-s-width: 16px;
558
- $sds-icon-size-s-width-dark: 16px;
559
556
  $sds-icon-size-l-height: 24px;
560
- $sds-icon-size-l-height-dark: 24px;
561
557
  $sds-icon-size-l-width: 24px;
562
- $sds-icon-size-l-width-dark: 24px;
563
558
  $sds-icon-size-xl-height: 32px;
564
- $sds-icon-size-xl-height-dark: 32px;
565
559
  $sds-icon-size-xl-width: 32px;
566
- $sds-icon-size-xl-width-dark: 32px;
567
560
  $sds-space-default: 12px;
568
- $sds-space-default-dark: 12px;
569
561
  $sds-space-xxxs: 2px;
570
- $sds-space-xxxs-dark: 2px;
571
562
  $sds-space-xxs: 4px;
572
- $sds-space-xxs-dark: 4px;
573
563
  $sds-space-xs: 6px;
574
- $sds-space-xs-dark: 6px;
575
564
  $sds-space-s: 8px;
576
- $sds-space-s-dark: 8px;
577
565
  $sds-space-m: 12px;
578
- $sds-space-m-dark: 12px;
579
566
  $sds-space-l: 16px;
580
- $sds-space-l-dark: 16px;
581
567
  $sds-space-xl: 24px;
582
- $sds-space-xl-dark: 24px;
583
- $sds-space-xxl: 40px;
584
- $sds-space-xxl-dark: 40px;
568
+ $sds-space-xxl: 40px;