@norges-domstoler/dds-components 0.0.0-dev-20240521133811 → 0.0.0-dev-20240530102617
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.
- package/dist/index.css +610 -606
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +41 -37
- package/dist/index.d.ts +41 -37
- package/dist/index.js +167 -336
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +183 -361
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -6
package/dist/index.css
CHANGED
|
@@ -107,32 +107,29 @@
|
|
|
107
107
|
/* src/styles/selection.css */
|
|
108
108
|
*::-moz-selection {
|
|
109
109
|
background-color: var(--dds-color-tertiary-lightest);
|
|
110
|
-
color: var(--dds-color-
|
|
110
|
+
color: var(--dds-color-text-default);
|
|
111
111
|
}
|
|
112
112
|
*::selection {
|
|
113
113
|
background-color: var(--dds-color-tertiary-lightest);
|
|
114
|
-
color: var(--dds-color-
|
|
114
|
+
color: var(--dds-color-text-default);
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
/* src/components/Typography/typographyStyles.module.css */
|
|
118
|
-
:root {
|
|
119
|
-
--dds-text-color--default: var(--dds-color-neutrals-gray-9);
|
|
120
|
-
--dds-text-color--medium: var(--dds-color-neutrals-gray-7);
|
|
121
|
-
--dds-text-color--subtle: var(--dds-color-neutrals-gray-6);
|
|
122
|
-
--dds-text-color--on-inverse: var(--dds-color-neutrals-white);
|
|
123
|
-
}
|
|
124
118
|
:where(.typographyStyles_a) {
|
|
125
119
|
font: inherit;
|
|
126
|
-
color: var(--dds-color-
|
|
120
|
+
color: var(--dds-color-text-action-resting);
|
|
127
121
|
width: -moz-fit-content;
|
|
128
122
|
width: fit-content;
|
|
129
123
|
text-decoration: underline;
|
|
130
124
|
margin: 0;
|
|
131
125
|
&:hover {
|
|
132
|
-
color:
|
|
126
|
+
text-decoration-color: transparent;
|
|
133
127
|
}
|
|
134
128
|
@media (prefers-reduced-motion: no-preference) {
|
|
135
|
-
transition:
|
|
129
|
+
transition:
|
|
130
|
+
color 0.2s,
|
|
131
|
+
text-decoration-color 0.2s,
|
|
132
|
+
var(--dds-focus-transition);
|
|
136
133
|
}
|
|
137
134
|
}
|
|
138
135
|
:where(.typographyStyles_a--margins) {
|
|
@@ -148,11 +145,16 @@
|
|
|
148
145
|
vertical-align: baseline;
|
|
149
146
|
}
|
|
150
147
|
}
|
|
148
|
+
:where(.typographyStyles_a--visited) {
|
|
149
|
+
&:visited {
|
|
150
|
+
color: var(--dds-color-text-action-visited);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
151
153
|
:where(.typographyStyles_body-sans-01) {
|
|
152
154
|
margin: 0;
|
|
153
155
|
font: var(--dds-font-body-sans-01-font-style) var(--dds-font-body-sans-01-font-weight) var(--dds-font-body-sans-01-font-size) / var(--dds-font-body-sans-01-line-height) var(--dds-font-body-sans-01-font-family);
|
|
154
156
|
letter-spacing: var(--dds-font-body-sans-01-letter-spacing);
|
|
155
|
-
color: var(--dds-text-
|
|
157
|
+
color: var(--dds-color-text-default);
|
|
156
158
|
}
|
|
157
159
|
:where(.typographyStyles_body-sans-01--margins) {
|
|
158
160
|
display: block;
|
|
@@ -163,7 +165,7 @@
|
|
|
163
165
|
margin: 0;
|
|
164
166
|
font: var(--dds-font-body-sans-02-font-style) var(--dds-font-body-sans-02-font-weight) var(--dds-font-body-sans-02-font-size) / var(--dds-font-body-sans-02-line-height) var(--dds-font-body-sans-02-font-family);
|
|
165
167
|
letter-spacing: var(--dds-font-body-sans-02-letter-spacing);
|
|
166
|
-
color: var(--dds-text-
|
|
168
|
+
color: var(--dds-color-text-default);
|
|
167
169
|
}
|
|
168
170
|
:where(.typographyStyles_body-sans-02--margins) {
|
|
169
171
|
display: block;
|
|
@@ -174,7 +176,7 @@
|
|
|
174
176
|
margin: 0;
|
|
175
177
|
font: var(--dds-font-body-sans-03-font-style) var(--dds-font-body-sans-03-font-weight) var(--dds-font-body-sans-03-font-size) / var(--dds-font-body-sans-03-line-height) var(--dds-font-body-sans-03-font-family);
|
|
176
178
|
letter-spacing: var(--dds-font-body-sans-03-letter-spacing);
|
|
177
|
-
color: var(--dds-text-
|
|
179
|
+
color: var(--dds-color-text-default);
|
|
178
180
|
}
|
|
179
181
|
:where(.typographyStyles_body-sans-03--margins) {
|
|
180
182
|
display: block;
|
|
@@ -185,7 +187,7 @@
|
|
|
185
187
|
margin: 0;
|
|
186
188
|
font: var(--dds-font-body-sans-04-font-style) var(--dds-font-body-sans-04-font-weight) var(--dds-font-body-sans-04-font-size) / var(--dds-font-body-sans-04-line-height) var(--dds-font-body-sans-04-font-family);
|
|
187
189
|
letter-spacing: var(--dds-font-body-sans-04-letter-spacing);
|
|
188
|
-
color: var(--dds-text-
|
|
190
|
+
color: var(--dds-color-text-default);
|
|
189
191
|
}
|
|
190
192
|
:where(.typographyStyles_body-sans-04--margins) {
|
|
191
193
|
display: block;
|
|
@@ -196,7 +198,7 @@
|
|
|
196
198
|
margin: 0;
|
|
197
199
|
font: var(--dds-font-lead-sans-01-font-style) var(--dds-font-lead-sans-01-font-weight) var(--dds-font-lead-sans-01-font-size) / var(--dds-font-lead-sans-01-line-height) var(--dds-font-lead-sans-01-font-family);
|
|
198
200
|
letter-spacing: var(--dds-font-lead-sans-01-letter-spacing);
|
|
199
|
-
color: var(--dds-text-
|
|
201
|
+
color: var(--dds-color-text-default);
|
|
200
202
|
}
|
|
201
203
|
:where(.typographyStyles_lead-sans-01--margins) {
|
|
202
204
|
display: block;
|
|
@@ -207,7 +209,7 @@
|
|
|
207
209
|
margin: 0;
|
|
208
210
|
font: var(--dds-font-lead-sans-02-font-style) var(--dds-font-lead-sans-02-font-weight) var(--dds-font-lead-sans-02-font-size) / var(--dds-font-lead-sans-02-line-height) var(--dds-font-lead-sans-02-font-family);
|
|
209
211
|
letter-spacing: var(--dds-font-lead-sans-02-letter-spacing);
|
|
210
|
-
color: var(--dds-text-
|
|
212
|
+
color: var(--dds-color-text-default);
|
|
211
213
|
}
|
|
212
214
|
:where(.typographyStyles_lead-sans-02--margins) {
|
|
213
215
|
display: block;
|
|
@@ -218,7 +220,7 @@
|
|
|
218
220
|
margin: 0;
|
|
219
221
|
font: var(--dds-font-lead-sans-03-font-style) var(--dds-font-lead-sans-03-font-weight) var(--dds-font-lead-sans-03-font-size) / var(--dds-font-lead-sans-03-line-height) var(--dds-font-lead-sans-03-font-family);
|
|
220
222
|
letter-spacing: var(--dds-font-lead-sans-03-letter-spacing);
|
|
221
|
-
color: var(--dds-text-
|
|
223
|
+
color: var(--dds-color-text-default);
|
|
222
224
|
}
|
|
223
225
|
:where(.typographyStyles_lead-sans-03--margins) {
|
|
224
226
|
display: block;
|
|
@@ -229,7 +231,7 @@
|
|
|
229
231
|
margin: 0;
|
|
230
232
|
font: var(--dds-font-lead-sans-04-font-style) var(--dds-font-lead-sans-04-font-weight) var(--dds-font-lead-sans-04-font-size) / var(--dds-font-lead-sans-04-line-height) var(--dds-font-lead-sans-04-font-family);
|
|
231
233
|
letter-spacing: var(--dds-font-lead-sans-04-letter-spacing);
|
|
232
|
-
color: var(--dds-text-
|
|
234
|
+
color: var(--dds-color-text-default);
|
|
233
235
|
}
|
|
234
236
|
:where(.typographyStyles_lead-sans-04--margins) {
|
|
235
237
|
display: block;
|
|
@@ -240,7 +242,7 @@
|
|
|
240
242
|
margin: 0;
|
|
241
243
|
font: var(--dds-font-lead-sans-05-font-style) var(--dds-font-lead-sans-05-font-weight) var(--dds-font-lead-sans-05-font-size) / var(--dds-font-lead-sans-05-line-height) var(--dds-font-lead-sans-05-font-family);
|
|
242
244
|
letter-spacing: var(--dds-font-lead-sans-05-letter-spacing);
|
|
243
|
-
color: var(--dds-text-
|
|
245
|
+
color: var(--dds-color-text-default);
|
|
244
246
|
}
|
|
245
247
|
:where(.typographyStyles_lead-sans-05--margins) {
|
|
246
248
|
display: block;
|
|
@@ -251,103 +253,103 @@
|
|
|
251
253
|
margin: 0;
|
|
252
254
|
font: var(--dds-font-heading-sans-01-font-style) var(--dds-font-heading-sans-01-font-weight) var(--dds-font-heading-sans-01-font-size) / var(--dds-font-heading-sans-01-line-height) var(--dds-font-heading-sans-01-font-family);
|
|
253
255
|
letter-spacing: var(--dds-font-heading-sans-01-letter-spacing);
|
|
254
|
-
color: var(--dds-text-
|
|
256
|
+
color: var(--dds-color-text-default);
|
|
255
257
|
}
|
|
256
258
|
:where(.typographyStyles_heading-sans-01--margins) {
|
|
257
259
|
display: block;
|
|
258
260
|
margin-top: 0;
|
|
259
261
|
margin-bottom: var(--dds-font-heading-sans-01-paragraph-spacing);
|
|
260
|
-
padding-top: var(--
|
|
262
|
+
padding-top: var(--dds-spacing-padding-top-heading);
|
|
261
263
|
}
|
|
262
264
|
:where(.typographyStyles_heading-sans-02) {
|
|
263
265
|
margin: 0;
|
|
264
266
|
font: var(--dds-font-heading-sans-02-font-style) var(--dds-font-heading-sans-02-font-weight) var(--dds-font-heading-sans-02-font-size) / var(--dds-font-heading-sans-02-line-height) var(--dds-font-heading-sans-02-font-family);
|
|
265
267
|
letter-spacing: var(--dds-font-heading-sans-02-letter-spacing);
|
|
266
|
-
color: var(--dds-text-
|
|
268
|
+
color: var(--dds-color-text-default);
|
|
267
269
|
}
|
|
268
270
|
:where(.typographyStyles_heading-sans-02--margins) {
|
|
269
271
|
display: block;
|
|
270
272
|
margin-top: 0;
|
|
271
273
|
margin-bottom: var(--dds-font-heading-sans-02-paragraph-spacing);
|
|
272
|
-
padding-top: var(--
|
|
274
|
+
padding-top: var(--dds-spacing-padding-top-heading);
|
|
273
275
|
}
|
|
274
276
|
:where(.typographyStyles_heading-sans-03) {
|
|
275
277
|
margin: 0;
|
|
276
278
|
font: var(--dds-font-heading-sans-03-font-style) var(--dds-font-heading-sans-03-font-weight) var(--dds-font-heading-sans-03-font-size) / var(--dds-font-heading-sans-03-line-height) var(--dds-font-heading-sans-03-font-family);
|
|
277
279
|
letter-spacing: var(--dds-font-heading-sans-03-letter-spacing);
|
|
278
|
-
color: var(--dds-text-
|
|
280
|
+
color: var(--dds-color-text-default);
|
|
279
281
|
}
|
|
280
282
|
:where(.typographyStyles_heading-sans-03--margins) {
|
|
281
283
|
display: block;
|
|
282
284
|
margin-top: 0;
|
|
283
285
|
margin-bottom: var(--dds-font-heading-sans-03-paragraph-spacing);
|
|
284
|
-
padding-top: var(--
|
|
286
|
+
padding-top: var(--dds-spacing-padding-top-heading);
|
|
285
287
|
}
|
|
286
288
|
:where(.typographyStyles_heading-sans-04) {
|
|
287
289
|
margin: 0;
|
|
288
290
|
font: var(--dds-font-heading-sans-04-font-style) var(--dds-font-heading-sans-04-font-weight) var(--dds-font-heading-sans-04-font-size) / var(--dds-font-heading-sans-04-line-height) var(--dds-font-heading-sans-04-font-family);
|
|
289
291
|
letter-spacing: var(--dds-font-heading-sans-04-letter-spacing);
|
|
290
|
-
color: var(--dds-text-
|
|
292
|
+
color: var(--dds-color-text-default);
|
|
291
293
|
}
|
|
292
294
|
:where(.typographyStyles_heading-sans-04--margins) {
|
|
293
295
|
display: block;
|
|
294
296
|
margin-top: 0;
|
|
295
297
|
margin-bottom: var(--dds-font-heading-sans-04-paragraph-spacing);
|
|
296
|
-
padding-top: var(--
|
|
298
|
+
padding-top: var(--dds-spacing-padding-top-heading);
|
|
297
299
|
}
|
|
298
300
|
:where(.typographyStyles_heading-sans-05) {
|
|
299
301
|
margin: 0;
|
|
300
302
|
font: var(--dds-font-heading-sans-05-font-style) var(--dds-font-heading-sans-05-font-weight) var(--dds-font-heading-sans-05-font-size) / var(--dds-font-heading-sans-05-line-height) var(--dds-font-heading-sans-05-font-family);
|
|
301
303
|
letter-spacing: var(--dds-font-heading-sans-05-letter-spacing);
|
|
302
|
-
color: var(--dds-text-
|
|
304
|
+
color: var(--dds-color-text-default);
|
|
303
305
|
}
|
|
304
306
|
:where(.typographyStyles_heading-sans-05--margins) {
|
|
305
307
|
display: block;
|
|
306
308
|
margin-top: 0;
|
|
307
309
|
margin-bottom: var(--dds-font-heading-sans-05-paragraph-spacing);
|
|
308
|
-
padding-top: var(--
|
|
310
|
+
padding-top: var(--dds-spacing-padding-top-heading);
|
|
309
311
|
}
|
|
310
312
|
:where(.typographyStyles_heading-sans-06) {
|
|
311
313
|
margin: 0;
|
|
312
314
|
font: var(--dds-font-heading-sans-06-font-style) var(--dds-font-heading-sans-06-font-weight) var(--dds-font-heading-sans-06-font-size) / var(--dds-font-heading-sans-06-line-height) var(--dds-font-heading-sans-06-font-family);
|
|
313
315
|
letter-spacing: var(--dds-font-heading-sans-06-letter-spacing);
|
|
314
|
-
color: var(--dds-text-
|
|
316
|
+
color: var(--dds-color-text-default);
|
|
315
317
|
}
|
|
316
318
|
:where(.typographyStyles_heading-sans-06--margins) {
|
|
317
319
|
display: block;
|
|
318
320
|
margin-top: 0;
|
|
319
321
|
margin-bottom: var(--dds-font-heading-sans-06-paragraph-spacing);
|
|
320
|
-
padding-top: var(--
|
|
322
|
+
padding-top: var(--dds-spacing-padding-top-heading);
|
|
321
323
|
}
|
|
322
324
|
:where(.typographyStyles_heading-sans-07) {
|
|
323
325
|
margin: 0;
|
|
324
326
|
font: var(--dds-font-heading-sans-07-font-style) var(--dds-font-heading-sans-07-font-weight) var(--dds-font-heading-sans-07-font-size) / var(--dds-font-heading-sans-07-line-height) var(--dds-font-heading-sans-07-font-family);
|
|
325
327
|
letter-spacing: var(--dds-font-heading-sans-07-letter-spacing);
|
|
326
|
-
color: var(--dds-text-
|
|
328
|
+
color: var(--dds-color-text-default);
|
|
327
329
|
}
|
|
328
330
|
:where(.typographyStyles_heading-sans-07--margins) {
|
|
329
331
|
display: block;
|
|
330
332
|
margin-top: 0;
|
|
331
333
|
margin-bottom: var(--dds-font-heading-sans-07-paragraph-spacing);
|
|
332
|
-
padding-top: var(--
|
|
334
|
+
padding-top: var(--dds-spacing-padding-top-heading);
|
|
333
335
|
}
|
|
334
336
|
:where(.typographyStyles_heading-sans-08) {
|
|
335
337
|
margin: 0;
|
|
336
338
|
font: var(--dds-font-heading-sans-08-font-style) var(--dds-font-heading-sans-08-font-weight) var(--dds-font-heading-sans-08-font-size) / var(--dds-font-heading-sans-08-line-height) var(--dds-font-heading-sans-08-font-family);
|
|
337
339
|
letter-spacing: var(--dds-font-heading-sans-08-letter-spacing);
|
|
338
|
-
color: var(--dds-text-
|
|
340
|
+
color: var(--dds-color-text-default);
|
|
339
341
|
}
|
|
340
342
|
:where(.typographyStyles_heading-sans-08--margins) {
|
|
341
343
|
display: block;
|
|
342
344
|
margin-top: 0;
|
|
343
345
|
margin-bottom: var(--dds-font-heading-sans-08-paragraph-spacing);
|
|
344
|
-
padding-top: var(--
|
|
346
|
+
padding-top: var(--dds-spacing-padding-top-heading);
|
|
345
347
|
}
|
|
346
348
|
:where(.typographyStyles_supporting-style-label-01) {
|
|
347
349
|
margin: 0;
|
|
348
350
|
font: var(--dds-font-supporting-style-label-01-font-style) var(--dds-font-supporting-style-label-01-font-weight) var(--dds-font-supporting-style-label-01-font-size) / var(--dds-font-supporting-style-label-01-line-height) var(--dds-font-supporting-style-label-01-font-family);
|
|
349
351
|
letter-spacing: var(--dds-font-supporting-style-label-01-letter-spacing);
|
|
350
|
-
color: var(--dds-text-
|
|
352
|
+
color: var(--dds-color-text-medium);
|
|
351
353
|
}
|
|
352
354
|
:where(.typographyStyles_supporting-style-label-01--margins) {
|
|
353
355
|
display: block;
|
|
@@ -358,7 +360,7 @@
|
|
|
358
360
|
margin: 0;
|
|
359
361
|
font: var(--dds-font-supporting-style-helpertext-01-font-style) var(--dds-font-supporting-style-helpertext-01-font-weight) var(--dds-font-supporting-style-helpertext-01-font-size) / var(--dds-font-supporting-style-helpertext-01-line-height) var(--dds-font-supporting-style-helpertext-01-font-family);
|
|
360
362
|
letter-spacing: var(--dds-font-supporting-style-helpertext-01-letter-spacing);
|
|
361
|
-
color: var(--dds-text-
|
|
363
|
+
color: var(--dds-color-text-subtle);
|
|
362
364
|
}
|
|
363
365
|
:where(.typographyStyles_supporting-style-helper-text-01--margins) {
|
|
364
366
|
display: block;
|
|
@@ -369,7 +371,7 @@
|
|
|
369
371
|
margin: 0;
|
|
370
372
|
font: var(--dds-font-supporting-style-placeholdertext-01-font-style) var(--dds-font-supporting-style-placeholdertext-01-font-weight) var(--dds-font-supporting-style-placeholdertext-01-font-size) / var(--dds-font-supporting-style-placeholdertext-01-line-height) var(--dds-font-supporting-style-placeholdertext-01-font-family);
|
|
371
373
|
letter-spacing: var( --dds-font-supporting-style-placeholdertext-01-letter-spacing );
|
|
372
|
-
color: var(--dds-text-
|
|
374
|
+
color: var(--dds-color-text-subtle);
|
|
373
375
|
}
|
|
374
376
|
:where(.typographyStyles_supporting-style-placeholder-text-01--margins) {
|
|
375
377
|
display: block;
|
|
@@ -380,7 +382,7 @@
|
|
|
380
382
|
margin: 0;
|
|
381
383
|
font: var(--dds-font-supporting-style-placeholdertext-02-font-style) var(--dds-font-supporting-style-placeholdertext-02-font-weight) var(--dds-font-supporting-style-placeholdertext-02-font-size) / var(--dds-font-supporting-style-placeholdertext-02-line-height) var(--dds-font-supporting-style-placeholdertext-02-font-family);
|
|
382
384
|
letter-spacing: var( --dds-font-supporting-style-placeholdertext-02-letter-spacing );
|
|
383
|
-
color: var(--dds-text-
|
|
385
|
+
color: var(--dds-color-text-subtle);
|
|
384
386
|
}
|
|
385
387
|
:where(.typographyStyles_supporting-style-placeholder-text-02--margins) {
|
|
386
388
|
display: block;
|
|
@@ -391,7 +393,7 @@
|
|
|
391
393
|
margin: 0;
|
|
392
394
|
font: var(--dds-font-supporting-style-placeholdertext-03-font-style) var(--dds-font-supporting-style-placeholdertext-03-font-weight) var(--dds-font-supporting-style-placeholdertext-03-font-size) / var(--dds-font-supporting-style-placeholdertext-03-line-height) var(--dds-font-supporting-style-placeholdertext-03-font-family);
|
|
393
395
|
letter-spacing: var( --dds-font-supporting-style-placeholdertext-03-letter-spacing );
|
|
394
|
-
color: var(--dds-text-
|
|
396
|
+
color: var(--dds-color-text-subtle);
|
|
395
397
|
}
|
|
396
398
|
:where(.typographyStyles_supporting-style-placeholder-text-03--margins) {
|
|
397
399
|
display: block;
|
|
@@ -402,7 +404,7 @@
|
|
|
402
404
|
margin: 0;
|
|
403
405
|
font: var(--dds-font-supporting-style-tiny-01-font-style) var(--dds-font-supporting-style-tiny-01-font-weight) var(--dds-font-supporting-style-tiny-01-font-size) / var(--dds-font-supporting-style-tiny-01-line-height) var(--dds-font-supporting-style-tiny-01-font-family);
|
|
404
406
|
letter-spacing: var(--dds-font-supporting-style-tiny-01-letter-spacing);
|
|
405
|
-
color: var(--dds-text-
|
|
407
|
+
color: var(--dds-color-text-default);
|
|
406
408
|
}
|
|
407
409
|
:where(.typographyStyles_supporting-style-tiny-01--margins) {
|
|
408
410
|
display: block;
|
|
@@ -413,7 +415,7 @@
|
|
|
413
415
|
margin: 0;
|
|
414
416
|
font: var(--dds-font-supporting-style-tiny-02-font-style) var(--dds-font-supporting-style-tiny-02-font-weight) var(--dds-font-supporting-style-tiny-02-font-size) / var(--dds-font-supporting-style-tiny-02-line-height) var(--dds-font-supporting-style-tiny-02-font-family);
|
|
415
417
|
letter-spacing: var(--dds-font-supporting-style-tiny-02-letter-spacing);
|
|
416
|
-
color: var(--dds-text-
|
|
418
|
+
color: var(--dds-color-text-default);
|
|
417
419
|
}
|
|
418
420
|
:where(.typographyStyles_supporting-style-tiny-02--margins) {
|
|
419
421
|
display: block;
|
|
@@ -424,7 +426,7 @@
|
|
|
424
426
|
padding-inline: 0;
|
|
425
427
|
}
|
|
426
428
|
:where(.typographyStyles_legend--margins) {
|
|
427
|
-
margin-bottom: var(--
|
|
429
|
+
margin-bottom: var(--dds-spacing-x1-5);
|
|
428
430
|
}
|
|
429
431
|
:where(.typographyStyles_bold) {
|
|
430
432
|
font-weight: 600;
|
|
@@ -436,19 +438,19 @@
|
|
|
436
438
|
text-decoration: underline;
|
|
437
439
|
}
|
|
438
440
|
:where(.typographyStyles_a) {
|
|
439
|
-
color: var(--dds-color-
|
|
441
|
+
color: var(--dds-color-text-action-resting);
|
|
440
442
|
}
|
|
441
443
|
.typographyStyles_text-color--default {
|
|
442
|
-
color: var(--dds-text-
|
|
444
|
+
color: var(--dds-color-text-default);
|
|
443
445
|
}
|
|
444
446
|
.typographyStyles_text-color--medium {
|
|
445
|
-
color: var(--dds-text-
|
|
447
|
+
color: var(--dds-color-text-medium);
|
|
446
448
|
}
|
|
447
449
|
.typographyStyles_text-color--subtle {
|
|
448
|
-
color: var(--dds-text-
|
|
450
|
+
color: var(--dds-color-text-subtle);
|
|
449
451
|
}
|
|
450
452
|
.typographyStyles_text-color--on-inverse {
|
|
451
|
-
color: var(--dds-text-
|
|
453
|
+
color: var(--dds-color-text-on-inverse);
|
|
452
454
|
}
|
|
453
455
|
|
|
454
456
|
/* src/components/helpers/styling/utilStyles.module.css */
|
|
@@ -483,7 +485,7 @@
|
|
|
483
485
|
}
|
|
484
486
|
.utilStyles_scrollbar {
|
|
485
487
|
scrollbar-width: thin;
|
|
486
|
-
scrollbar-color: var(--dds-color-
|
|
488
|
+
scrollbar-color: var(--dds-color-surface-scrollbar) transparent;
|
|
487
489
|
}
|
|
488
490
|
.utilStyles_visibility-transition {
|
|
489
491
|
--dds-visiblity-transition: visibility 0.4s;
|
|
@@ -562,7 +564,7 @@
|
|
|
562
564
|
|
|
563
565
|
/* src/utils/RequiredMarker/RequiredMarker.module.css */
|
|
564
566
|
.RequiredMarker_wrapper {
|
|
565
|
-
color: var(--dds-color-
|
|
567
|
+
color: var(--dds-color-text-requiredfield);
|
|
566
568
|
}
|
|
567
569
|
|
|
568
570
|
/* src/components/helpers/Input/Input.module.css */
|
|
@@ -577,11 +579,11 @@
|
|
|
577
579
|
}
|
|
578
580
|
.Input_input {
|
|
579
581
|
position: relative;
|
|
580
|
-
color: var(--dds-color
|
|
581
|
-
border: 1px solid var(--dds-color-
|
|
582
|
-
background-color: var(--dds-color-
|
|
583
|
-
padding: var(--
|
|
584
|
-
border-radius: var(--
|
|
582
|
+
color: var(--dds-text-color--default);
|
|
583
|
+
border: 1px solid var(--dds-color-border-default);
|
|
584
|
+
background-color: var(--dds-color-surface-default);
|
|
585
|
+
padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
|
|
586
|
+
border-radius: var(--dds-border-radius-1);
|
|
585
587
|
width: 100%;
|
|
586
588
|
margin: 0;
|
|
587
589
|
box-sizing: border-box;
|
|
@@ -605,13 +607,13 @@
|
|
|
605
607
|
-webkit-appearance: none;
|
|
606
608
|
}
|
|
607
609
|
&:hover:enabled:-moz-read-write:not(:focus-visible) {
|
|
608
|
-
border-color: var(--dds-color-
|
|
609
|
-
box-shadow: 0 0 0 1px var(--dds-color-
|
|
610
|
+
border-color: var(--dds-color-border-action-hover);
|
|
611
|
+
box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
|
|
610
612
|
}
|
|
611
613
|
&:not(input):not(textarea):not(.Input_disabled):not(.Input_read-only):not(.Input_active):hover,
|
|
612
614
|
&:hover:enabled:read-write:not(:focus-visible) {
|
|
613
|
-
border-color: var(--dds-color-
|
|
614
|
-
box-shadow: 0 0 0 1px var(--dds-color-
|
|
615
|
+
border-color: var(--dds-color-border-action-hover);
|
|
616
|
+
box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
|
|
615
617
|
}
|
|
616
618
|
&.Input_input--stateful {
|
|
617
619
|
-webkit-appearance: textfield;
|
|
@@ -622,7 +624,7 @@
|
|
|
622
624
|
cursor: default;
|
|
623
625
|
background-color: transparent;
|
|
624
626
|
padding-left: 0;
|
|
625
|
-
padding-top: var(--
|
|
627
|
+
padding-top: var(--dds-spacing-x0-125);
|
|
626
628
|
}
|
|
627
629
|
&:not(.Input_disabled).Input_read-only,
|
|
628
630
|
&:enabled:read-only {
|
|
@@ -632,55 +634,55 @@
|
|
|
632
634
|
cursor: default;
|
|
633
635
|
background-color: transparent;
|
|
634
636
|
padding-left: 0;
|
|
635
|
-
padding-top: var(--
|
|
637
|
+
padding-top: var(--dds-spacing-x0-125);
|
|
636
638
|
}
|
|
637
639
|
&.Input_disabled,
|
|
638
640
|
&:disabled {
|
|
639
641
|
cursor: not-allowed;
|
|
640
|
-
color: var(--dds-color-
|
|
641
|
-
background-color: var(--dds-color-
|
|
642
|
+
color: var(--dds-color-text-medium);
|
|
643
|
+
background-color: var(--dds-color-surface-field-disabled);
|
|
642
644
|
}
|
|
643
645
|
}
|
|
644
646
|
}
|
|
645
647
|
.Input_input--hover:hover {
|
|
646
|
-
border-color: var(--dds-color-
|
|
647
|
-
box-shadow: 0 0 0 1px var(--dds-color-
|
|
648
|
+
border-color: var(--dds-color-border-action-hover);
|
|
649
|
+
box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
|
|
648
650
|
}
|
|
649
651
|
.Input_input--stateful-danger {
|
|
650
|
-
border-color: var(--dds-color-danger
|
|
651
|
-
box-shadow: 0 0 0 1px var(--dds-color-danger
|
|
652
|
+
border-color: var(--dds-color-border-danger);
|
|
653
|
+
box-shadow: 0 0 0 1px var(--dds-color-border-danger);
|
|
652
654
|
&:hover:enabled:-moz-read-write:not(:focus-within) {
|
|
653
|
-
border-color: var(--dds-color-danger
|
|
654
|
-
box-shadow: 0 0 0 1px var(--dds-color-danger
|
|
655
|
+
border-color: var(--dds-color-border-danger);
|
|
656
|
+
box-shadow: 0 0 0 1px var(--dds-color-border-danger);
|
|
655
657
|
}
|
|
656
658
|
&:not(.Input_disabled):hover:not(:focus-within),
|
|
657
659
|
&:hover:enabled:read-write:not(:focus-within) {
|
|
658
|
-
border-color: var(--dds-color-danger
|
|
659
|
-
box-shadow: 0 0 0 1px var(--dds-color-danger
|
|
660
|
+
border-color: var(--dds-color-border-danger);
|
|
661
|
+
box-shadow: 0 0 0 1px var(--dds-color-border-danger);
|
|
660
662
|
}
|
|
661
663
|
&:focus-within:enabled:-moz-read-write,
|
|
662
664
|
&:hover:focus-within:enabled:-moz-read-write,
|
|
663
665
|
&:active:enabled:-moz-read-write {
|
|
664
|
-
border-color: 1px solid var(--dds-color-
|
|
666
|
+
border-color: 1px solid var(--dds-color-border-default);
|
|
665
667
|
}
|
|
666
668
|
&:not(.Input_disabled):focus-within,
|
|
667
669
|
&:focus-within:enabled:read-write,
|
|
668
670
|
&:hover:focus-within:enabled:read-write,
|
|
669
671
|
&:active:enabled:read-write {
|
|
670
|
-
border-color: 1px solid var(--dds-color-
|
|
672
|
+
border-color: 1px solid var(--dds-color-border-default);
|
|
671
673
|
}
|
|
672
674
|
}
|
|
673
675
|
.Input_input--medium {
|
|
674
|
-
padding: var(--
|
|
676
|
+
padding: var(--dds-spacing-x0-75);
|
|
675
677
|
}
|
|
676
678
|
.Input_input--small {
|
|
677
|
-
padding: var(--
|
|
679
|
+
padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
|
|
678
680
|
}
|
|
679
681
|
.Input_input--tiny {
|
|
680
|
-
padding: var(--
|
|
682
|
+
padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
|
|
681
683
|
}
|
|
682
684
|
.Input_input--with-affix {
|
|
683
|
-
gap: var(--
|
|
685
|
+
gap: var(--dds-spacing-x1);
|
|
684
686
|
}
|
|
685
687
|
|
|
686
688
|
/* src/components/Typography/Typography/TextOverflowEllipsis/TextOverflowEllipsis.module.css */
|
|
@@ -702,10 +704,10 @@
|
|
|
702
704
|
|
|
703
705
|
/* src/components/helpers/styling/focus.module.css */
|
|
704
706
|
:root {
|
|
705
|
-
--dds-focus-outline: var(--dds-color-
|
|
706
|
-
--dds-focus-outline-offset: var(--
|
|
707
|
-
--dds-focus-outline-inset: calc(0px - var(--
|
|
708
|
-
--dds-focus-box-shadow: 0 0 0 2px var(--dds-color-
|
|
707
|
+
--dds-focus-outline: var(--dds-color-focus-outside) 2px solid;
|
|
708
|
+
--dds-focus-outline-offset: var(--dds-spacing-x0-125);
|
|
709
|
+
--dds-focus-outline-inset: calc(0px - var(--dds-spacing-x0-25));
|
|
710
|
+
--dds-focus-box-shadow: 0 0 0 2px var(--dds-color-focus-inside);
|
|
709
711
|
--dds-focus-transition: outline-offset 0.2s;
|
|
710
712
|
}
|
|
711
713
|
.focus_focusable:focus-visible {
|
|
@@ -760,8 +762,8 @@
|
|
|
760
762
|
/* src/components/helpers/Paper/Paper.module.css */
|
|
761
763
|
.Paper_container {
|
|
762
764
|
box-sizing: border-box;
|
|
763
|
-
background-color: var(--dds-color-
|
|
764
|
-
border-radius: var(--
|
|
765
|
+
background-color: var(--dds-color-surface-default);
|
|
766
|
+
border-radius: var(--dds-border-radius-1);
|
|
765
767
|
margin: 0;
|
|
766
768
|
}
|
|
767
769
|
.Paper_shadow--1 {
|
|
@@ -776,18 +778,21 @@
|
|
|
776
778
|
.Paper_shadow--4 {
|
|
777
779
|
box-shadow: var(--dds-shadow-4-onlight);
|
|
778
780
|
}
|
|
779
|
-
.Paper_border--
|
|
780
|
-
border: 1px solid var(--dds-color-
|
|
781
|
+
.Paper_border--default {
|
|
782
|
+
border: 1px solid var(--dds-color-border-default);
|
|
783
|
+
}
|
|
784
|
+
.Paper_border--subtle {
|
|
785
|
+
border: 1px solid var(--dds-color-border-subtle);
|
|
781
786
|
}
|
|
782
|
-
.Paper_border--
|
|
783
|
-
border: 1px solid var(--dds-color-
|
|
787
|
+
.Paper_border--on-inverse {
|
|
788
|
+
border: 1px solid var(--dds-color-border-inverse);
|
|
784
789
|
}
|
|
785
790
|
|
|
786
791
|
/* src/components/BackLink/BackLink.module.css */
|
|
787
792
|
.BackLink_link {
|
|
788
793
|
align-items: center;
|
|
789
794
|
display: flex;
|
|
790
|
-
gap: var(--
|
|
795
|
+
gap: var(--dds-spacing-x0-25);
|
|
791
796
|
}
|
|
792
797
|
|
|
793
798
|
/* src/components/Breadcrumbs/Breadcrumbs.module.css */
|
|
@@ -795,19 +800,19 @@
|
|
|
795
800
|
display: flex;
|
|
796
801
|
flex-wrap: wrap;
|
|
797
802
|
align-items: center;
|
|
798
|
-
gap: var(--
|
|
803
|
+
gap: var(--dds-spacing-x0-5);
|
|
799
804
|
}
|
|
800
805
|
.Breadcrumbs_list-item {
|
|
801
806
|
align-items: center;
|
|
802
807
|
display: flex;
|
|
803
|
-
gap: var(--
|
|
808
|
+
gap: var(--dds-spacing-x0-5);
|
|
804
809
|
padding: 0;
|
|
805
810
|
}
|
|
806
811
|
.Breadcrumbs_list-item--large-screen {
|
|
807
|
-
padding: var(--
|
|
812
|
+
padding: var(--dds-spacing-x0-125) 0;
|
|
808
813
|
}
|
|
809
814
|
.Breadcrumbs_icon {
|
|
810
|
-
color: var(--dds-color-
|
|
815
|
+
color: var(--dds-color-icon-action-resting);
|
|
811
816
|
}
|
|
812
817
|
|
|
813
818
|
/* src/components/Button/Button.module.css */
|
|
@@ -825,7 +830,7 @@
|
|
|
825
830
|
cursor: pointer;
|
|
826
831
|
box-shadow: none;
|
|
827
832
|
text-decoration: none;
|
|
828
|
-
border-radius: var(--
|
|
833
|
+
border-radius: var(--dds-border-radius-1);
|
|
829
834
|
border: 1px solid;
|
|
830
835
|
@media (prefers-reduced-motion: no-preference) {
|
|
831
836
|
transition: all 0.2s;
|
|
@@ -851,20 +856,20 @@
|
|
|
851
856
|
}
|
|
852
857
|
.Button_button--tiny {
|
|
853
858
|
&.Button_just-text {
|
|
854
|
-
padding: var(--
|
|
859
|
+
padding: var(--dds-spacing-x0-25);
|
|
855
860
|
}
|
|
856
861
|
&.Button_with-text-and-icon {
|
|
857
|
-
gap: var(--
|
|
862
|
+
gap: var(--dds-spacing-x0-125);
|
|
858
863
|
&.Button_with-icon-left {
|
|
859
|
-
padding: var(--
|
|
864
|
+
padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125);
|
|
860
865
|
}
|
|
861
866
|
&.Button_with-icon-right {
|
|
862
|
-
padding: var(--
|
|
867
|
+
padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
|
|
863
868
|
}
|
|
864
869
|
}
|
|
865
870
|
&.Button_just-icon,
|
|
866
871
|
&.Button_button--is-loading.Button_no-content {
|
|
867
|
-
padding: var(--
|
|
872
|
+
padding: var(--dds-spacing-x0-25);
|
|
868
873
|
}
|
|
869
874
|
.Button_icon {
|
|
870
875
|
font-size: var(--dds-font-supporting-style-tiny-01-line-height);
|
|
@@ -872,20 +877,20 @@
|
|
|
872
877
|
}
|
|
873
878
|
.Button_button--small {
|
|
874
879
|
&.Button_just-text {
|
|
875
|
-
padding: var(--
|
|
880
|
+
padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
|
|
876
881
|
}
|
|
877
882
|
&.Button_with-text-and-icon {
|
|
878
|
-
gap: var(--
|
|
883
|
+
gap: var(--dds-spacing-x0-5);
|
|
879
884
|
&.Button_with-icon-left {
|
|
880
|
-
padding: var(--
|
|
885
|
+
padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5);
|
|
881
886
|
}
|
|
882
887
|
&.Button_with-icon-right {
|
|
883
|
-
padding: var(--
|
|
888
|
+
padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
|
|
884
889
|
}
|
|
885
890
|
}
|
|
886
891
|
&.Button_just-icon,
|
|
887
892
|
&.Button_button--is-loading.Button_no-content {
|
|
888
|
-
padding: var(--
|
|
893
|
+
padding: var(--dds-spacing-x0-5);
|
|
889
894
|
}
|
|
890
895
|
.Button_icon {
|
|
891
896
|
font-size: var(--dds-font-body-sans-01-line-height);
|
|
@@ -893,20 +898,20 @@
|
|
|
893
898
|
}
|
|
894
899
|
.Button_button--medium {
|
|
895
900
|
&.Button_just-text {
|
|
896
|
-
padding: var(--
|
|
901
|
+
padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
|
|
897
902
|
}
|
|
898
903
|
&.Button_with-text-and-icon {
|
|
899
|
-
gap: var(--
|
|
904
|
+
gap: var(--dds-spacing-x0-5);
|
|
900
905
|
&.Button_with-icon-left {
|
|
901
|
-
padding: var(--
|
|
906
|
+
padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
|
|
902
907
|
}
|
|
903
908
|
&.Button_with-icon-right {
|
|
904
|
-
padding: var(--
|
|
909
|
+
padding: var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x1);
|
|
905
910
|
}
|
|
906
911
|
}
|
|
907
912
|
&.Button_just-icon,
|
|
908
913
|
&.Button_button--is-loading.Button_no-content {
|
|
909
|
-
padding: var(--
|
|
914
|
+
padding: var(--dds-spacing-x0-75);
|
|
910
915
|
}
|
|
911
916
|
.Button_icon {
|
|
912
917
|
font-size: var(--dds-font-body-sans-02-line-height);
|
|
@@ -914,20 +919,20 @@
|
|
|
914
919
|
}
|
|
915
920
|
.Button_button--large {
|
|
916
921
|
&.Button_just-text {
|
|
917
|
-
padding: var(--
|
|
922
|
+
padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5);
|
|
918
923
|
}
|
|
919
924
|
&.Button_with-text-and-icon {
|
|
920
|
-
gap: var(--
|
|
925
|
+
gap: var(--dds-spacing-x0-75);
|
|
921
926
|
&.Button_with-icon-left {
|
|
922
|
-
padding: var(--
|
|
927
|
+
padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
|
|
923
928
|
}
|
|
924
929
|
&.Button_with-icon-right {
|
|
925
|
-
padding: var(--
|
|
930
|
+
padding: var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1-5);
|
|
926
931
|
}
|
|
927
932
|
}
|
|
928
933
|
&.Button_just-icon,
|
|
929
934
|
&.Button_button--is-loading.Button_no-content {
|
|
930
|
-
padding: var(--
|
|
935
|
+
padding: var(--dds-spacing-x1);
|
|
931
936
|
}
|
|
932
937
|
.Button_icon {
|
|
933
938
|
font-size: var(--dds-font-body-sans-04-line-height);
|
|
@@ -942,43 +947,43 @@
|
|
|
942
947
|
justify-content: center;
|
|
943
948
|
}
|
|
944
949
|
.Button_button--primary {
|
|
945
|
-
background-color: var(--dds-color-
|
|
946
|
-
border-color: var(--dds-color-
|
|
947
|
-
color: var(--dds-color-
|
|
950
|
+
background-color: var(--dds-color-surface-action-resting);
|
|
951
|
+
border-color: var(--dds-color-surface-action-resting);
|
|
952
|
+
color: var(--dds-color-text-on-action);
|
|
948
953
|
&:hover:not(.Button_button--is-loading) {
|
|
949
|
-
background-color: var(--dds-color-
|
|
950
|
-
border-color: var(--dds-color-
|
|
951
|
-
color: var(--dds-color-
|
|
954
|
+
background-color: var(--dds-color-surface-action-hover);
|
|
955
|
+
border-color: var(--dds-color-surface-action-hover);
|
|
956
|
+
color: var(--dds-color-text-on-action);
|
|
952
957
|
}
|
|
953
958
|
}
|
|
954
959
|
.Button_button--secondary {
|
|
955
|
-
background-color: var(--dds-color-
|
|
956
|
-
border-color: var(--dds-color-
|
|
957
|
-
color: var(--dds-color-
|
|
960
|
+
background-color: var(--dds-color-surface-default);
|
|
961
|
+
border-color: var(--dds-color-border-default);
|
|
962
|
+
color: var(--dds-color-text-default);
|
|
958
963
|
&:hover:not(.Button_button--is-loading) {
|
|
959
|
-
background-color: var(--dds-color-
|
|
960
|
-
border-color: var(--dds-color-
|
|
961
|
-
color: var(--dds-color-
|
|
964
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
965
|
+
border-color: var(--dds-color-border-action-hover);
|
|
966
|
+
color: var(--dds-color-text-default);
|
|
962
967
|
}
|
|
963
968
|
}
|
|
964
969
|
.Button_button--tertiary {
|
|
965
970
|
background-color: transparent;
|
|
966
971
|
border-color: transparent;
|
|
967
|
-
color: var(--dds-color-
|
|
972
|
+
color: var(--dds-color-text-default);
|
|
968
973
|
&:hover:not(.Button_button--is-loading) {
|
|
969
|
-
background-color: var(--dds-color-
|
|
974
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
970
975
|
border-color: transparent;
|
|
971
|
-
color: var(--dds-color-
|
|
976
|
+
color: var(--dds-color-text-default);
|
|
972
977
|
}
|
|
973
978
|
}
|
|
974
979
|
.Button_button--danger {
|
|
975
|
-
background-color: var(--dds-color-danger-
|
|
976
|
-
border-color: var(--dds-color-danger-
|
|
977
|
-
color: var(--dds-color-
|
|
980
|
+
background-color: var(--dds-color-surface-action-danger-resting);
|
|
981
|
+
border-color: var(--dds-color-surface-action-danger-resting);
|
|
982
|
+
color: var(--dds-color-text-on-action);
|
|
978
983
|
&:hover:not(.Button_button--is-loading) {
|
|
979
|
-
background-color: var(--dds-color-danger-
|
|
980
|
-
border-color: var(--dds-color-danger-
|
|
981
|
-
color: var(--dds-color-
|
|
984
|
+
background-color: var(--dds-color-surface-action-danger-hover);
|
|
985
|
+
border-color: var(--dds-color-surface-action-danger-hover);
|
|
986
|
+
color: var(--dds-color-text-on-action);
|
|
982
987
|
}
|
|
983
988
|
}
|
|
984
989
|
|
|
@@ -1024,6 +1029,9 @@
|
|
|
1024
1029
|
overflow-y: auto;
|
|
1025
1030
|
min-width: 180px;
|
|
1026
1031
|
max-width: 300px;
|
|
1032
|
+
.OverflowMenu_divider {
|
|
1033
|
+
margin-block: var(--dds-spacing-x0-75);
|
|
1034
|
+
}
|
|
1027
1035
|
}
|
|
1028
1036
|
.OverflowMenu_list {
|
|
1029
1037
|
display: flex;
|
|
@@ -1033,11 +1041,11 @@
|
|
|
1033
1041
|
display: flex;
|
|
1034
1042
|
box-sizing: border-box;
|
|
1035
1043
|
align-items: center;
|
|
1036
|
-
color: var(--dds-color-
|
|
1037
|
-
background-color: var(--dds-color-
|
|
1044
|
+
color: var(--dds-color-text-default);
|
|
1045
|
+
background-color: var(--dds-color-surface-default);
|
|
1038
1046
|
text-decoration: none;
|
|
1039
|
-
padding: var(--
|
|
1040
|
-
gap: var(--
|
|
1047
|
+
padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
|
|
1048
|
+
gap: var(--dds-spacing-x0-25);
|
|
1041
1049
|
}
|
|
1042
1050
|
.OverflowMenu_list__item--link {
|
|
1043
1051
|
text-align: left;
|
|
@@ -1053,7 +1061,7 @@
|
|
|
1053
1061
|
}
|
|
1054
1062
|
&:hover,
|
|
1055
1063
|
&:active {
|
|
1056
|
-
background-color: var(--dds-color-
|
|
1064
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
1057
1065
|
}
|
|
1058
1066
|
}
|
|
1059
1067
|
.OverflowMenu_icon {
|
|
@@ -1062,22 +1070,25 @@
|
|
|
1062
1070
|
font-size: var(--dds-font-body-sans-01-line-height);
|
|
1063
1071
|
}
|
|
1064
1072
|
.OverflowMenu_divider {
|
|
1065
|
-
margin-inline: var(--
|
|
1073
|
+
margin-inline: var(--dds-spacing-x1);
|
|
1066
1074
|
}
|
|
1067
1075
|
|
|
1068
1076
|
/* src/components/Divider/Divider.module.css */
|
|
1069
1077
|
.Divider_divider {
|
|
1070
1078
|
border: 0;
|
|
1071
1079
|
background-color: transparent;
|
|
1072
|
-
border-top:
|
|
1073
|
-
margin-top: var(--
|
|
1074
|
-
margin-bottom: var(--
|
|
1080
|
+
border-top: 1px solid;
|
|
1081
|
+
margin-top: var(--dds-spacing-x1);
|
|
1082
|
+
margin-bottom: var(--dds-spacing-x1);
|
|
1083
|
+
}
|
|
1084
|
+
.Divider_divider--default {
|
|
1085
|
+
color: var(--dds-color-border-default);
|
|
1075
1086
|
}
|
|
1076
|
-
.Divider_divider--
|
|
1077
|
-
|
|
1087
|
+
.Divider_divider--subtle {
|
|
1088
|
+
color: var(--dds-color-border-subtle);
|
|
1078
1089
|
}
|
|
1079
|
-
.Divider_divider--
|
|
1080
|
-
|
|
1090
|
+
.Divider_divider--on-inverse {
|
|
1091
|
+
color: var(--dds-color-border-inverse);
|
|
1081
1092
|
}
|
|
1082
1093
|
|
|
1083
1094
|
/* src/components/ButtonGroup/ButtonGroup.module.css */
|
|
@@ -1151,18 +1162,18 @@
|
|
|
1151
1162
|
}
|
|
1152
1163
|
}
|
|
1153
1164
|
.Card_container--filled {
|
|
1154
|
-
background-color: var(--dds-color-primary-
|
|
1155
|
-
border-color: var(--dds-color-primary-
|
|
1165
|
+
background-color: var(--dds-color-brand-primary-subtle);
|
|
1166
|
+
border-color: var(--dds-color-brand-primary-subtle);
|
|
1156
1167
|
}
|
|
1157
1168
|
.Card_container--border {
|
|
1158
|
-
background-color: var(--dds-color-
|
|
1159
|
-
border-color: var(--dds-color-
|
|
1169
|
+
background-color: var(--dds-color-surface-default);
|
|
1170
|
+
border-color: var(--dds-color-border-default);
|
|
1160
1171
|
}
|
|
1161
1172
|
.Card_container--navigation {
|
|
1162
1173
|
text-decoration: none;
|
|
1163
1174
|
&:hover {
|
|
1164
|
-
border-color: var(--dds-color-
|
|
1165
|
-
box-shadow: inset 0 0 0 1px var(--dds-color-
|
|
1175
|
+
border-color: var(--dds-color-border-action-hover);
|
|
1176
|
+
box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
|
|
1166
1177
|
}
|
|
1167
1178
|
}
|
|
1168
1179
|
.Card_container--expandable {
|
|
@@ -1186,7 +1197,7 @@
|
|
|
1186
1197
|
transition: box-shadow 0.2s, var(--dds-focus-transition);
|
|
1187
1198
|
}
|
|
1188
1199
|
&:hover {
|
|
1189
|
-
box-shadow: 0 0 0 2px var(--dds-color-
|
|
1200
|
+
box-shadow: 0 0 0 2px var(--dds-color-border-action-hover);
|
|
1190
1201
|
}
|
|
1191
1202
|
}
|
|
1192
1203
|
.CardAccordion_header-container {
|
|
@@ -1205,9 +1216,9 @@
|
|
|
1205
1216
|
display: flex;
|
|
1206
1217
|
align-items: center;
|
|
1207
1218
|
justify-content: center;
|
|
1208
|
-
height: var(--dds-
|
|
1209
|
-
width: var(--dds-
|
|
1210
|
-
margin-left: var(--
|
|
1219
|
+
height: var(--dds-icon-size-medium);
|
|
1220
|
+
width: var(--dds-icon-size-medium);
|
|
1221
|
+
margin-left: var(--dds-spacing-x0-5);
|
|
1211
1222
|
}
|
|
1212
1223
|
.CardAccordion_body {
|
|
1213
1224
|
overflow: hidden;
|
|
@@ -1230,15 +1241,15 @@
|
|
|
1230
1241
|
display: flex;
|
|
1231
1242
|
align-items: center;
|
|
1232
1243
|
max-width: 100%;
|
|
1233
|
-
gap: var(--
|
|
1234
|
-
padding: var(--
|
|
1235
|
-
border: 1px solid var(--dds-color-
|
|
1236
|
-
border-radius: var(--
|
|
1237
|
-
background-color: var(--dds-color-
|
|
1244
|
+
gap: var(--dds-spacing-x0-25);
|
|
1245
|
+
padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
|
|
1246
|
+
border: 1px solid var(--dds-color-border-subtle);
|
|
1247
|
+
border-radius: var(--dds-border-radius-1);
|
|
1248
|
+
background-color: var(--dds-color-surface-subtle);
|
|
1238
1249
|
}
|
|
1239
1250
|
.Chip_group {
|
|
1240
1251
|
display: flex;
|
|
1241
|
-
gap: var(--
|
|
1252
|
+
gap: var(--dds-spacing-x0-75);
|
|
1242
1253
|
}
|
|
1243
1254
|
|
|
1244
1255
|
/* src/components/date-inputs/common/DateInput.module.css */
|
|
@@ -1255,16 +1266,16 @@
|
|
|
1255
1266
|
display: inline-flex;
|
|
1256
1267
|
flex-direction: row;
|
|
1257
1268
|
align-items: center;
|
|
1258
|
-
gap: var(--
|
|
1269
|
+
gap: var(--dds-spacing-x0-25);
|
|
1259
1270
|
}
|
|
1260
1271
|
.DateInput_date-input--medium {
|
|
1261
|
-
padding-inline: var(--
|
|
1272
|
+
padding-inline: var(--dds-spacing-x0-5) !important;
|
|
1262
1273
|
}
|
|
1263
1274
|
.DateInput_date-input--small {
|
|
1264
|
-
padding-inline: var(--
|
|
1275
|
+
padding-inline: var(--dds-spacing-x0-5) !important;
|
|
1265
1276
|
}
|
|
1266
1277
|
.DateInput_date-input--tiny {
|
|
1267
|
-
padding-inline: var(--
|
|
1278
|
+
padding-inline: var(--dds-spacing-x0-25) !important;
|
|
1268
1279
|
}
|
|
1269
1280
|
.DateInput_date-segment-container {
|
|
1270
1281
|
display: flex;
|
|
@@ -1278,8 +1289,8 @@
|
|
|
1278
1289
|
font-variant-numeric: tabular-nums;
|
|
1279
1290
|
outline: none;
|
|
1280
1291
|
&:focus:not([aria-readonly]) {
|
|
1281
|
-
background-color: var(--dds-color-
|
|
1282
|
-
color: var(--dds-color-
|
|
1292
|
+
background-color: var(--dds-color-surface-action-selected);
|
|
1293
|
+
color: var(--dds-color-text-on-action);
|
|
1283
1294
|
}
|
|
1284
1295
|
}
|
|
1285
1296
|
.DateInput_segment__placeholder {
|
|
@@ -1288,7 +1299,7 @@
|
|
|
1288
1299
|
font-variant-numeric: tabular-nums;
|
|
1289
1300
|
pointer-events: none;
|
|
1290
1301
|
.DateInput_segment:focus:not([aria-readonly]) & {
|
|
1291
|
-
color: var(--dds-color-
|
|
1302
|
+
color: var(--dds-color-text-on-action);
|
|
1292
1303
|
}
|
|
1293
1304
|
}
|
|
1294
1305
|
.DateInput_segment__placeholder--invisible {
|
|
@@ -1301,39 +1312,40 @@
|
|
|
1301
1312
|
align-items: center;
|
|
1302
1313
|
justify-content: center;
|
|
1303
1314
|
margin-inline: -1px 0;
|
|
1304
|
-
padding: var(--
|
|
1305
|
-
color: var(--dds-color-
|
|
1315
|
+
padding: var(--dds-spacing-x0-25);
|
|
1316
|
+
color: var(--dds-color-text-default);
|
|
1306
1317
|
}
|
|
1307
1318
|
.DateInput_icon-wrapper--small {
|
|
1308
|
-
margin-block: calc(0px - var(--dds-
|
|
1319
|
+
margin-block: calc(0px - var(--dds-icon-size-medium));
|
|
1309
1320
|
}
|
|
1310
1321
|
.DateInput_icon-wrapper--medium {
|
|
1311
|
-
margin-block: calc(0px - var(--dds-
|
|
1322
|
+
margin-block: calc(0px - var(--dds-icon-size-small));
|
|
1312
1323
|
}
|
|
1313
1324
|
.DateInput_popover-button {
|
|
1314
1325
|
cursor: pointer;
|
|
1315
1326
|
border: 0;
|
|
1316
1327
|
transition: 0.2s;
|
|
1317
1328
|
background: transparent;
|
|
1318
|
-
border-radius: var(--
|
|
1329
|
+
border-radius: var(--dds-border-radius-1);
|
|
1330
|
+
color: var(--dds-color-icon-default);
|
|
1319
1331
|
&:not(:disabled):not(.DateInput_disabled):hover,
|
|
1320
1332
|
&:not(:disabled):not(.DateInput_disabled):active {
|
|
1321
|
-
background-color: var(--dds-color-
|
|
1322
|
-
color: var(--dds-color-
|
|
1333
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
1334
|
+
color: var(--dds-color-icon-action-hover);
|
|
1323
1335
|
}
|
|
1324
1336
|
&:disabled,
|
|
1325
1337
|
&.DateInput_disabled {
|
|
1326
1338
|
cursor: not-allowed;
|
|
1327
1339
|
outline: none;
|
|
1328
|
-
color: var(--dds-color-
|
|
1340
|
+
color: var(--dds-color-text-subtle);
|
|
1329
1341
|
}
|
|
1330
1342
|
}
|
|
1331
1343
|
.DateInput_popover {
|
|
1332
1344
|
z-index: 100;
|
|
1333
|
-
border-radius: var(--
|
|
1334
|
-
background-color: var(--dds-color-
|
|
1335
|
-
border:
|
|
1336
|
-
padding: var(--
|
|
1345
|
+
border-radius: var(--dds-border-radius-1);
|
|
1346
|
+
background-color: var(--dds-color-surface-default);
|
|
1347
|
+
border: 1px solid var(--dds-color-border-default);
|
|
1348
|
+
padding: var(--dds-spacing-x0-5);
|
|
1337
1349
|
box-shadow: var(--dds-shadow-2-onlight);
|
|
1338
1350
|
}
|
|
1339
1351
|
.DateInput_calendar {
|
|
@@ -1370,36 +1382,36 @@
|
|
|
1370
1382
|
cursor: pointer;
|
|
1371
1383
|
border: 1px solid;
|
|
1372
1384
|
border-color: transparent;
|
|
1373
|
-
border-radius: var(--
|
|
1385
|
+
border-radius: var(--dds-border-radius-1);
|
|
1374
1386
|
transition: 0.2s;
|
|
1375
1387
|
}
|
|
1376
1388
|
.DateInput_calendar__cell-button--today {
|
|
1377
1389
|
text-decoration: underline;
|
|
1378
|
-
border-color: var(--dds-color-
|
|
1390
|
+
border-color: var(--dds-color-border-default);
|
|
1379
1391
|
}
|
|
1380
1392
|
.DateInput_calendar__cell-button--default {
|
|
1381
1393
|
background-color: transparent;
|
|
1382
|
-
color: var(--dds-color
|
|
1394
|
+
color: var(--dds-text-color--default);
|
|
1383
1395
|
&:hover {
|
|
1384
|
-
background-color: var(--dds-color-
|
|
1385
|
-
border-color: var(--dds-color-
|
|
1386
|
-
color: var(--dds-color
|
|
1396
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
1397
|
+
border-color: var(--dds-color-border-action-hover);
|
|
1398
|
+
color: var(--dds-text-color--default);
|
|
1387
1399
|
}
|
|
1388
1400
|
}
|
|
1389
1401
|
.DateInput_calendar__cell-button--selected {
|
|
1390
|
-
background-color: var(--dds-color-
|
|
1391
|
-
border-color: var(--dds-color-
|
|
1392
|
-
color: var(--dds-color-
|
|
1402
|
+
background-color: var(--dds-color-surface-action-selected);
|
|
1403
|
+
border-color: var(--dds-color-surface-action-selected);
|
|
1404
|
+
color: var(--dds-color-text-on-action);
|
|
1393
1405
|
}
|
|
1394
1406
|
.DateInput_calendar__cell-button--unavailable {
|
|
1395
|
-
background-color: var(--dds-color-
|
|
1396
|
-
border-color: var(--dds-color-
|
|
1397
|
-
color: var(--dds-color-
|
|
1407
|
+
background-color: var(--dds-color-surface-field-disabled);
|
|
1408
|
+
border-color: var(--dds-color-surface-field-disabled);
|
|
1409
|
+
color: var(--dds-color-text-subtle);
|
|
1398
1410
|
cursor: not-allowed;
|
|
1399
1411
|
text-decoration: line-through;
|
|
1400
1412
|
}
|
|
1401
1413
|
.DateInput_calendar__cell-button--unavailable--today {
|
|
1402
|
-
border-color: var(--dds-color-
|
|
1414
|
+
border-color: var(--dds-color-surface-field-disabled);
|
|
1403
1415
|
text-decoration: underline line-through;
|
|
1404
1416
|
}
|
|
1405
1417
|
|
|
@@ -1412,18 +1424,18 @@
|
|
|
1412
1424
|
max-width: 100%;
|
|
1413
1425
|
}
|
|
1414
1426
|
.InputMessage_container--error {
|
|
1415
|
-
padding: var(--
|
|
1416
|
-
background-color: var(--dds-color-danger-
|
|
1417
|
-
gap: var(--
|
|
1427
|
+
padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
|
|
1428
|
+
background-color: var(--dds-color-surface-danger-default);
|
|
1429
|
+
gap: var(--dds-spacing-x0-25);
|
|
1418
1430
|
.InputMessage_icon {
|
|
1419
|
-
color: var(--dds-color-danger-
|
|
1431
|
+
color: var(--dds-color-icon-on-danger-default);
|
|
1420
1432
|
}
|
|
1421
1433
|
}
|
|
1422
1434
|
.InputMessage_container--tip {
|
|
1423
|
-
background-color: var(--dds-color-
|
|
1435
|
+
background-color: var(--dds-color-surface-default);
|
|
1424
1436
|
}
|
|
1425
1437
|
.InputMessage_icon {
|
|
1426
|
-
margin-top: var(--
|
|
1438
|
+
margin-top: var(--dds-spacing-x0-125);
|
|
1427
1439
|
}
|
|
1428
1440
|
|
|
1429
1441
|
/* src/components/DescriptionList/DescriptionList.module.css */
|
|
@@ -1433,27 +1445,27 @@
|
|
|
1433
1445
|
flex-direction: column;
|
|
1434
1446
|
flex-wrap: wrap;
|
|
1435
1447
|
row-gap: 0;
|
|
1436
|
-
-moz-column-gap: var(--
|
|
1437
|
-
column-gap: var(--
|
|
1448
|
+
-moz-column-gap: var(--dds-spacing-x2);
|
|
1449
|
+
column-gap: var(--dds-spacing-x2);
|
|
1438
1450
|
& > dt:first-of-type {
|
|
1439
|
-
margin-top: var(--
|
|
1451
|
+
margin-top: var(--dds-spacing-x1);
|
|
1440
1452
|
}
|
|
1441
1453
|
& > dd:last-child {
|
|
1442
|
-
margin-bottom: var(--
|
|
1454
|
+
margin-bottom: var(--dds-spacing-x1);
|
|
1443
1455
|
}
|
|
1444
1456
|
dd + dt {
|
|
1445
|
-
margin-top: var(--
|
|
1457
|
+
margin-top: var(--dds-spacing-x2);
|
|
1446
1458
|
}
|
|
1447
1459
|
}
|
|
1448
1460
|
.DescriptionList_list--default {
|
|
1449
1461
|
dt {
|
|
1450
|
-
color: var(--dds-color-
|
|
1462
|
+
color: var(--dds-color-text-default);
|
|
1451
1463
|
font-weight: 600;
|
|
1452
1464
|
}
|
|
1453
1465
|
}
|
|
1454
1466
|
.DescriptionList_list--subtle {
|
|
1455
1467
|
dt {
|
|
1456
|
-
color: var(--dds-color-
|
|
1468
|
+
color: var(--dds-color-text-subtle);
|
|
1457
1469
|
}
|
|
1458
1470
|
}
|
|
1459
1471
|
.DescriptionList_list--row {
|
|
@@ -1470,17 +1482,17 @@
|
|
|
1470
1482
|
margin-inline-start: 0;
|
|
1471
1483
|
align-items: center;
|
|
1472
1484
|
display: flex;
|
|
1473
|
-
gap: var(--
|
|
1474
|
-
color: var(--dds-color-
|
|
1485
|
+
gap: var(--dds-spacing-x0-25);
|
|
1486
|
+
color: var(--dds-color-text-default);
|
|
1475
1487
|
}
|
|
1476
1488
|
.DescriptionList_group {
|
|
1477
|
-
margin: var(--
|
|
1489
|
+
margin: var(--dds-spacing-x2);
|
|
1478
1490
|
}
|
|
1479
1491
|
|
|
1480
1492
|
/* src/components/Drawer/Drawer.module.css */
|
|
1481
1493
|
:root {
|
|
1482
|
-
--dds-drawer-content-container-padding: var(--
|
|
1483
|
-
--dds-drawer-container-padding: calc( var(--
|
|
1494
|
+
--dds-drawer-content-container-padding: var(--dds-spacing-x0-25);
|
|
1495
|
+
--dds-drawer-container-padding: calc( var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding) ) calc(var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding)) calc(var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-drawer-content-container-padding));
|
|
1484
1496
|
}
|
|
1485
1497
|
.Drawer_container {
|
|
1486
1498
|
position: fixed;
|
|
@@ -1526,7 +1538,7 @@
|
|
|
1526
1538
|
.Drawer_content-container {
|
|
1527
1539
|
display: flex;
|
|
1528
1540
|
flex-direction: column;
|
|
1529
|
-
gap: var(--
|
|
1541
|
+
gap: var(--dds-spacing-x1);
|
|
1530
1542
|
padding: var(--dds-drawer-content-container-padding);
|
|
1531
1543
|
}
|
|
1532
1544
|
.Drawer_button--close {
|
|
@@ -1539,12 +1551,12 @@
|
|
|
1539
1551
|
overflow: hidden;
|
|
1540
1552
|
position: relative;
|
|
1541
1553
|
display: grid;
|
|
1542
|
-
padding: var(--
|
|
1554
|
+
padding: var(--dds-spacing-x0-25);
|
|
1543
1555
|
}
|
|
1544
1556
|
.ScrollableContainer_content {
|
|
1545
1557
|
overflow: auto;
|
|
1546
1558
|
scrollbar-width: none;
|
|
1547
|
-
padding-right: var(--
|
|
1559
|
+
padding-right: var(--dds-spacing-x0-5);
|
|
1548
1560
|
::-webkit-scrollbar {
|
|
1549
1561
|
display: none;
|
|
1550
1562
|
}
|
|
@@ -1567,7 +1579,7 @@
|
|
|
1567
1579
|
.ScrollableContainer_thumb {
|
|
1568
1580
|
position: absolute;
|
|
1569
1581
|
transition: background-color 0.2s;
|
|
1570
|
-
background-color: var(--dds-color-
|
|
1582
|
+
background-color: var(--dds-color-surface-scrollbar);
|
|
1571
1583
|
border-radius: 100px;
|
|
1572
1584
|
width: 10px;
|
|
1573
1585
|
}
|
|
@@ -1577,18 +1589,21 @@
|
|
|
1577
1589
|
display: flex;
|
|
1578
1590
|
justify-content: center;
|
|
1579
1591
|
align-items: center;
|
|
1580
|
-
min-height: var(--
|
|
1592
|
+
min-height: var(--dds-spacing-x10);
|
|
1581
1593
|
height: 100%;
|
|
1582
1594
|
width: 100%;
|
|
1583
|
-
background-color: var(--dds-color-
|
|
1584
|
-
padding: var(--
|
|
1595
|
+
background-color: var(--dds-color-surface-subtle);
|
|
1596
|
+
padding: var(--dds-spacing-x1-5);
|
|
1585
1597
|
}
|
|
1586
1598
|
.EmptyContent_text {
|
|
1587
1599
|
max-width: 70ch;
|
|
1588
1600
|
text-align: center;
|
|
1589
1601
|
display: flex;
|
|
1590
1602
|
flex-direction: column;
|
|
1591
|
-
gap: var(--
|
|
1603
|
+
gap: var(--dds-spacing-x1);
|
|
1604
|
+
}
|
|
1605
|
+
.EmptyContent_message {
|
|
1606
|
+
color: var(--dds-text-color--subtle);
|
|
1592
1607
|
}
|
|
1593
1608
|
|
|
1594
1609
|
/* src/components/FavStar/FavStar.module.css */
|
|
@@ -1596,9 +1611,9 @@
|
|
|
1596
1611
|
position: relative;
|
|
1597
1612
|
cursor: pointer;
|
|
1598
1613
|
display: inline-block;
|
|
1599
|
-
color: var(--dds-color-
|
|
1614
|
+
color: var(--dds-color-icon-medium);
|
|
1600
1615
|
background-color: transparent;
|
|
1601
|
-
border-radius: var(--
|
|
1616
|
+
border-radius: var(--dds-border-radius-1);
|
|
1602
1617
|
@media (prefers-reduced-motion: no-preference) {
|
|
1603
1618
|
transition:
|
|
1604
1619
|
0.2s color,
|
|
@@ -1607,14 +1622,14 @@
|
|
|
1607
1622
|
var(--dds-focus-transition);
|
|
1608
1623
|
}
|
|
1609
1624
|
&:hover {
|
|
1610
|
-
color: var(--dds-color-
|
|
1611
|
-
background-color: var(--dds-color-
|
|
1625
|
+
color: var(--dds-color-icon-action-hover);
|
|
1626
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
1612
1627
|
}
|
|
1613
1628
|
&:has(input:checked) {
|
|
1614
|
-
color: var(--dds-color-
|
|
1629
|
+
color: var(--dds-color-icon-action-resting);
|
|
1615
1630
|
}
|
|
1616
1631
|
&:hover:has(input:checked) {
|
|
1617
|
-
color: var(--dds-color-
|
|
1632
|
+
color: var(--dds-color-icon-action-hover);
|
|
1618
1633
|
}
|
|
1619
1634
|
&:active {
|
|
1620
1635
|
.FavStar_icon {
|
|
@@ -1623,12 +1638,12 @@
|
|
|
1623
1638
|
}
|
|
1624
1639
|
}
|
|
1625
1640
|
.FavStar_container--medium {
|
|
1626
|
-
width: var(--dds-
|
|
1627
|
-
height: var(--dds-
|
|
1641
|
+
width: var(--dds-icon-size-medium);
|
|
1642
|
+
height: var(--dds-icon-size-medium);
|
|
1628
1643
|
}
|
|
1629
1644
|
.FavStar_container--large {
|
|
1630
|
-
width: var(--dds-
|
|
1631
|
-
height: var(--dds-
|
|
1645
|
+
width: var(--dds-icon-size-large);
|
|
1646
|
+
height: var(--dds-icon-size-large);
|
|
1632
1647
|
}
|
|
1633
1648
|
.FavStar_icon {
|
|
1634
1649
|
color: currentColor;
|
|
@@ -1649,7 +1664,7 @@
|
|
|
1649
1664
|
/* src/components/Feedback/Feedback.module.css */
|
|
1650
1665
|
.Feedback_rating-container {
|
|
1651
1666
|
display: flex;
|
|
1652
|
-
gap: var(--
|
|
1667
|
+
gap: var(--dds-spacing-x1);
|
|
1653
1668
|
}
|
|
1654
1669
|
.Feedback_rating-container--row {
|
|
1655
1670
|
flex-direction: row;
|
|
@@ -1662,7 +1677,7 @@
|
|
|
1662
1677
|
.Feedback_rating-submitted-title {
|
|
1663
1678
|
display: inline-flex;
|
|
1664
1679
|
align-items: center;
|
|
1665
|
-
gap: var(--
|
|
1680
|
+
gap: var(--dds-spacing-x0-5);
|
|
1666
1681
|
}
|
|
1667
1682
|
.Feedback_button {
|
|
1668
1683
|
padding: 0 !important;
|
|
@@ -1684,79 +1699,79 @@
|
|
|
1684
1699
|
gap: 0;
|
|
1685
1700
|
}
|
|
1686
1701
|
.Stack_gap-x-0-125 {
|
|
1687
|
-
gap: var(--
|
|
1702
|
+
gap: var(--dds-spacing-x0-125);
|
|
1688
1703
|
}
|
|
1689
1704
|
.Stack_gap-x-0-25 {
|
|
1690
|
-
gap: var(--
|
|
1705
|
+
gap: var(--dds-spacing-x0-25);
|
|
1691
1706
|
}
|
|
1692
1707
|
.Stack_gap-x-0-5 {
|
|
1693
|
-
gap: var(--
|
|
1708
|
+
gap: var(--dds-spacing-x0-5);
|
|
1694
1709
|
}
|
|
1695
1710
|
.Stack_gap-x-0-75 {
|
|
1696
|
-
gap: var(--
|
|
1711
|
+
gap: var(--dds-spacing-x0-75);
|
|
1697
1712
|
}
|
|
1698
1713
|
.Stack_gap-x-1 {
|
|
1699
|
-
gap: var(--
|
|
1714
|
+
gap: var(--dds-spacing-x1);
|
|
1700
1715
|
}
|
|
1701
1716
|
.Stack_gap-x-1-5 {
|
|
1702
|
-
gap: var(--
|
|
1717
|
+
gap: var(--dds-spacing-x1-5);
|
|
1703
1718
|
}
|
|
1704
1719
|
.Stack_gap-x-2 {
|
|
1705
|
-
gap: var(--
|
|
1720
|
+
gap: var(--dds-spacing-x2);
|
|
1706
1721
|
}
|
|
1707
1722
|
.Stack_gap-x-2-5 {
|
|
1708
|
-
gap: var(--
|
|
1723
|
+
gap: var(--dds-spacing-x2-5);
|
|
1709
1724
|
}
|
|
1710
1725
|
.Stack_gap-x-3 {
|
|
1711
|
-
gap: var(--
|
|
1726
|
+
gap: var(--dds-spacing-x3);
|
|
1712
1727
|
}
|
|
1713
1728
|
.Stack_gap-x-4 {
|
|
1714
|
-
gap: var(--
|
|
1729
|
+
gap: var(--dds-spacing-x4);
|
|
1715
1730
|
}
|
|
1716
1731
|
.Stack_gap-x-6 {
|
|
1717
|
-
gap: var(--
|
|
1732
|
+
gap: var(--dds-spacing-x6);
|
|
1718
1733
|
}
|
|
1719
1734
|
.Stack_gap-x-10 {
|
|
1720
|
-
gap: var(--
|
|
1735
|
+
gap: var(--dds-spacing-x10);
|
|
1721
1736
|
}
|
|
1722
1737
|
.Stack_padding-0 {
|
|
1723
1738
|
padding: 0;
|
|
1724
1739
|
}
|
|
1725
1740
|
.Stack_padding-x-0-125 {
|
|
1726
|
-
padding: var(--
|
|
1741
|
+
padding: var(--dds-spacing-x0-125);
|
|
1727
1742
|
}
|
|
1728
1743
|
.Stack_padding-x-0-25 {
|
|
1729
|
-
padding: var(--
|
|
1744
|
+
padding: var(--dds-spacing-x0-25);
|
|
1730
1745
|
}
|
|
1731
1746
|
.Stack_padding-x-0-5 {
|
|
1732
|
-
padding: var(--
|
|
1747
|
+
padding: var(--dds-spacing-x0-5);
|
|
1733
1748
|
}
|
|
1734
1749
|
.Stack_padding-x-0-75 {
|
|
1735
|
-
padding: var(--
|
|
1750
|
+
padding: var(--dds-spacing-x0-75);
|
|
1736
1751
|
}
|
|
1737
1752
|
.Stack_padding-x-1 {
|
|
1738
|
-
padding: var(--
|
|
1753
|
+
padding: var(--dds-spacing-x1);
|
|
1739
1754
|
}
|
|
1740
1755
|
.Stack_padding-x-1-5 {
|
|
1741
|
-
padding: var(--
|
|
1756
|
+
padding: var(--dds-spacing-x1-5);
|
|
1742
1757
|
}
|
|
1743
1758
|
.Stack_padding-x-2 {
|
|
1744
|
-
padding: var(--
|
|
1759
|
+
padding: var(--dds-spacing-x2);
|
|
1745
1760
|
}
|
|
1746
1761
|
.Stack_padding-x-2-5 {
|
|
1747
|
-
padding: var(--
|
|
1762
|
+
padding: var(--dds-spacing-x2-5);
|
|
1748
1763
|
}
|
|
1749
1764
|
.Stack_padding-x-3 {
|
|
1750
|
-
padding: var(--
|
|
1765
|
+
padding: var(--dds-spacing-x3);
|
|
1751
1766
|
}
|
|
1752
1767
|
.Stack_padding-x-4 {
|
|
1753
|
-
padding: var(--
|
|
1768
|
+
padding: var(--dds-spacing-x4);
|
|
1754
1769
|
}
|
|
1755
1770
|
.Stack_padding-x-6 {
|
|
1756
|
-
padding: var(--
|
|
1771
|
+
padding: var(--dds-spacing-x6);
|
|
1757
1772
|
}
|
|
1758
1773
|
.Stack_padding-x-10 {
|
|
1759
|
-
padding: var(--
|
|
1774
|
+
padding: var(--dds-spacing-x10);
|
|
1760
1775
|
}
|
|
1761
1776
|
|
|
1762
1777
|
/* src/components/TextArea/TextArea.module.css */
|
|
@@ -1767,7 +1782,7 @@
|
|
|
1767
1782
|
height: auto;
|
|
1768
1783
|
resize: vertical;
|
|
1769
1784
|
vertical-align: bottom;
|
|
1770
|
-
padding-bottom: var(--
|
|
1785
|
+
padding-bottom: var(--dds-spacing-x0-5);
|
|
1771
1786
|
}
|
|
1772
1787
|
|
|
1773
1788
|
/* src/components/Tooltip/Tooltip.module.css */
|
|
@@ -1776,10 +1791,10 @@
|
|
|
1776
1791
|
width: fit-content;
|
|
1777
1792
|
}
|
|
1778
1793
|
.Tooltip_svg-arrow__border {
|
|
1779
|
-
fill: var(--dds-color-
|
|
1794
|
+
fill: var(--dds-color-border-default);
|
|
1780
1795
|
}
|
|
1781
1796
|
.Tooltip_svg-arrow__background {
|
|
1782
|
-
fill: var(--dds-color-
|
|
1797
|
+
fill: var(--dds-color-surface-default);
|
|
1783
1798
|
}
|
|
1784
1799
|
.Tooltip_paper {
|
|
1785
1800
|
width: -moz-fit-content;
|
|
@@ -1787,7 +1802,7 @@
|
|
|
1787
1802
|
position: absolute;
|
|
1788
1803
|
z-index: 80;
|
|
1789
1804
|
text-align: center;
|
|
1790
|
-
padding: var(--
|
|
1805
|
+
padding: var(--dds-spacing-x0-75);
|
|
1791
1806
|
}
|
|
1792
1807
|
|
|
1793
1808
|
/* src/components/Fieldset/Fieldset.module.css */
|
|
@@ -1808,35 +1823,35 @@
|
|
|
1808
1823
|
border-style: dashed;
|
|
1809
1824
|
display: flex;
|
|
1810
1825
|
flex-direction: column;
|
|
1811
|
-
gap: var(--
|
|
1812
|
-
border-color: var(--dds-color-
|
|
1813
|
-
background-color: var(--dds-color-
|
|
1814
|
-
padding: var(--
|
|
1826
|
+
gap: var(--dds-spacing-x1);
|
|
1827
|
+
border-color: var(--dds-color-border-default);
|
|
1828
|
+
background-color: var(--dds-color-surface-default);
|
|
1829
|
+
padding: var(--dds-spacing-x1-5) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1-5);
|
|
1815
1830
|
@media (prefers-reduced-motion: no-preference) {
|
|
1816
1831
|
transition: background-color 0.2s, border-color 0.2s;
|
|
1817
1832
|
}
|
|
1818
1833
|
}
|
|
1819
1834
|
.FileUploader_input-container--with-errors {
|
|
1820
|
-
border-color: var(--dds-color-danger
|
|
1835
|
+
border-color: var(--dds-color-border-danger);
|
|
1821
1836
|
}
|
|
1822
1837
|
.FileUploader_input-container--drag-active {
|
|
1823
|
-
border-color: var(--dds-color-
|
|
1824
|
-
background-color: var(--dds-color-
|
|
1838
|
+
border-color: var(--dds-color-border-action-hover);
|
|
1839
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
1825
1840
|
}
|
|
1826
1841
|
.FileUploader_input-container--no-drag-zone {
|
|
1827
|
-
padding: var(--
|
|
1842
|
+
padding: var(--dds-spacing-x0-5) 0;
|
|
1828
1843
|
}
|
|
1829
1844
|
.FileUploader_file {
|
|
1830
1845
|
display: flex;
|
|
1831
1846
|
justify-content: space-between;
|
|
1832
1847
|
align-items: center;
|
|
1833
|
-
gap: var(--
|
|
1834
|
-
padding: var(--
|
|
1835
|
-
margin-top: var(--
|
|
1836
|
-
background-color: var(--dds-color-
|
|
1848
|
+
gap: var(--dds-spacing-x0-75);
|
|
1849
|
+
padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
|
|
1850
|
+
margin-top: var(--dds-spacing-x0-5);
|
|
1851
|
+
background-color: var(--dds-color-surface-subtle);
|
|
1837
1852
|
}
|
|
1838
1853
|
.FileUploader_file--invalid {
|
|
1839
|
-
box-shadow: inset 0 0 0 2px var(--dds-color-danger
|
|
1854
|
+
box-shadow: inset 0 0 0 2px var(--dds-color-border-danger);
|
|
1840
1855
|
}
|
|
1841
1856
|
.FileUploader_file__name {
|
|
1842
1857
|
word-break: break-all;
|
|
@@ -1850,96 +1865,96 @@
|
|
|
1850
1865
|
justify-content: space-between;
|
|
1851
1866
|
box-sizing: border-box;
|
|
1852
1867
|
width: 100%;
|
|
1853
|
-
padding: 0 var(--
|
|
1868
|
+
padding: 0 var(--dds-spacing-x1);
|
|
1854
1869
|
}
|
|
1855
1870
|
.GlobalMessage_container--info {
|
|
1856
|
-
border-color: var(--dds-color-info
|
|
1857
|
-
background-color: var(--dds-color-info-
|
|
1871
|
+
border-color: var(--dds-color-border-info);
|
|
1872
|
+
background-color: var(--dds-color-surface-info-default);
|
|
1858
1873
|
.GlobalMessage_icon {
|
|
1859
|
-
color: var(--dds-color-info-
|
|
1874
|
+
color: var(--dds-color-icon-on-info-default);
|
|
1860
1875
|
}
|
|
1861
1876
|
}
|
|
1862
1877
|
.GlobalMessage_container--danger {
|
|
1863
|
-
border-color: var(--dds-color-danger
|
|
1864
|
-
background-color: var(--dds-color-danger-
|
|
1878
|
+
border-color: var(--dds-color-border-danger);
|
|
1879
|
+
background-color: var(--dds-color-surface-danger-default);
|
|
1865
1880
|
.GlobalMessage_icon {
|
|
1866
|
-
color: var(--dds-color-danger-
|
|
1881
|
+
color: var(--dds-color-icon-on-danger-default);
|
|
1867
1882
|
}
|
|
1868
1883
|
}
|
|
1869
1884
|
.GlobalMessage_container--warning {
|
|
1870
|
-
border-color: var(--dds-color-warning
|
|
1871
|
-
background-color: var(--dds-color-warning-
|
|
1885
|
+
border-color: var(--dds-color-border-warning);
|
|
1886
|
+
background-color: var(--dds-color-surface-warning-default);
|
|
1872
1887
|
.GlobalMessage_icon {
|
|
1873
|
-
color: var(--dds-color-warning-
|
|
1888
|
+
color: var(--dds-color-icon-on-warning-default);
|
|
1874
1889
|
}
|
|
1875
1890
|
}
|
|
1876
1891
|
.GlobalMessage_content {
|
|
1877
1892
|
display: flex;
|
|
1878
1893
|
align-items: center;
|
|
1879
|
-
padding: var(--
|
|
1894
|
+
padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1-5) var(--dds-spacing-x0-75) 0;
|
|
1880
1895
|
}
|
|
1881
1896
|
.GlobalMessage_content--closable {
|
|
1882
|
-
padding-right: var(--
|
|
1897
|
+
padding-right: var(--dds-spacing-x0-75);
|
|
1883
1898
|
}
|
|
1884
1899
|
.GlobalMessage_icon {
|
|
1885
|
-
margin-right: var(--
|
|
1900
|
+
margin-right: var(--dds-spacing-x0-75);
|
|
1886
1901
|
}
|
|
1887
1902
|
|
|
1888
1903
|
/* src/components/Grid/Grid.module.css */
|
|
1889
1904
|
.Grid_grid {
|
|
1890
1905
|
display: grid;
|
|
1891
|
-
grid-template-columns: repeat(var(--dds-grid-xs-
|
|
1892
|
-
-moz-column-gap: var(--dds-grid-xs-
|
|
1893
|
-
column-gap: var(--dds-grid-xs-
|
|
1894
|
-
margin-inline: var(--
|
|
1906
|
+
grid-template-columns: repeat(var(--dds-grid-xs-count), minmax(0, 1fr));
|
|
1907
|
+
-moz-column-gap: var(--dds-grid-xs-gutter-size);
|
|
1908
|
+
column-gap: var(--dds-grid-xs-gutter-size);
|
|
1909
|
+
margin-inline: var(--dds-spacing-x1);
|
|
1895
1910
|
max-width: var(--dds-grid-xs-max-width);
|
|
1896
1911
|
row-gap: var(--dds-grid-xs-row-gap);
|
|
1897
1912
|
@media only screen and (min-width: 600px) {
|
|
1898
|
-
grid-template-columns: repeat(var(--dds-grid-sm-
|
|
1899
|
-
-moz-column-gap: var(--dds-grid-sm-
|
|
1900
|
-
column-gap: var(--dds-grid-sm-
|
|
1901
|
-
margin-inline: var(--
|
|
1913
|
+
grid-template-columns: repeat(var(--dds-grid-sm-count), minmax(0, 1fr));
|
|
1914
|
+
-moz-column-gap: var(--dds-grid-sm-gutter-size);
|
|
1915
|
+
column-gap: var(--dds-grid-sm-gutter-size);
|
|
1916
|
+
margin-inline: var(--dds-spacing-x2);
|
|
1902
1917
|
max-width: var(--dds-grid-sm-max-width);
|
|
1903
1918
|
row-gap: var(--dds-grid-sm-row-gap);
|
|
1904
1919
|
}
|
|
1905
1920
|
@media only screen and (min-width: 960px) {
|
|
1906
|
-
grid-template-columns: repeat(var(--dds-grid-md-
|
|
1907
|
-
-moz-column-gap: var(--dds-grid-md-
|
|
1908
|
-
column-gap: var(--dds-grid-md-
|
|
1909
|
-
margin-inline: var(--
|
|
1921
|
+
grid-template-columns: repeat(var(--dds-grid-md-count), minmax(0, 1fr));
|
|
1922
|
+
-moz-column-gap: var(--dds-grid-md-gutter-size);
|
|
1923
|
+
column-gap: var(--dds-grid-md-gutter-size);
|
|
1924
|
+
margin-inline: var(--dds-spacing-x4);
|
|
1910
1925
|
max-width: var(--dds-grid-md-max-width);
|
|
1911
1926
|
row-gap: var(--dds-grid-md-row-gap);
|
|
1912
1927
|
}
|
|
1913
1928
|
@media only screen and (min-width: 1280px) {
|
|
1914
|
-
grid-template-columns: repeat(var(--dds-grid-lg-
|
|
1915
|
-
-moz-column-gap: var(--dds-grid-lg-
|
|
1916
|
-
column-gap: var(--dds-grid-lg-
|
|
1917
|
-
margin-inline: var(--
|
|
1929
|
+
grid-template-columns: repeat(var(--dds-grid-lg-count), minmax(0, 1fr));
|
|
1930
|
+
-moz-column-gap: var(--dds-grid-lg-gutter-size);
|
|
1931
|
+
column-gap: var(--dds-grid-lg-gutter-size);
|
|
1932
|
+
margin-inline: var(--dds-spacing-x6);
|
|
1918
1933
|
max-width: var(--dds-grid-lg-max-width);
|
|
1919
1934
|
row-gap: var(--dds-grid-lg-row-gap);
|
|
1920
1935
|
}
|
|
1921
1936
|
@media only screen and (min-width: 1920px) {
|
|
1922
|
-
grid-template-columns: repeat(var(--dds-grid-xl-
|
|
1923
|
-
-moz-column-gap: var(--dds-grid-xl-
|
|
1924
|
-
column-gap: var(--dds-grid-xl-
|
|
1925
|
-
margin-inline: var(--
|
|
1937
|
+
grid-template-columns: repeat(var(--dds-grid-xl-count), minmax(0, 1fr));
|
|
1938
|
+
-moz-column-gap: var(--dds-grid-xl-gutter-size);
|
|
1939
|
+
column-gap: var(--dds-grid-xl-gutter-size);
|
|
1940
|
+
margin-inline: var(--dds-spacing-x10);
|
|
1926
1941
|
max-width: var(--dds-grid-xl-max-width);
|
|
1927
1942
|
row-gap: var(--dds-grid-xl-row-gap);
|
|
1928
1943
|
}
|
|
1929
1944
|
}
|
|
1930
1945
|
.Grid_grid-child {
|
|
1931
|
-
--dds-grid-half-col-count: var(--dds-grid-xs-
|
|
1946
|
+
--dds-grid-half-col-count: var(--dds-grid-xs-count);
|
|
1932
1947
|
@media only screen and (min-width: 600px) {
|
|
1933
|
-
--dds-grid-half-col-count: var(--dds-grid-sm-
|
|
1948
|
+
--dds-grid-half-col-count: var(--dds-grid-sm-count);
|
|
1934
1949
|
}
|
|
1935
1950
|
@media only screen and (min-width: 960px) {
|
|
1936
|
-
--dds-grid-half-col-count: var(--dds-grid-md-
|
|
1951
|
+
--dds-grid-half-col-count: var(--dds-grid-md-count);
|
|
1937
1952
|
}
|
|
1938
1953
|
@media only screen and (min-width: 1280px) {
|
|
1939
|
-
--dds-grid-half-col-count: var(--dds-grid-lg-
|
|
1954
|
+
--dds-grid-half-col-count: var(--dds-grid-lg-count);
|
|
1940
1955
|
}
|
|
1941
1956
|
@media only screen and (min-width: 1920px) {
|
|
1942
|
-
--dds-grid-half-col-count: var(--dds-grid-xl-
|
|
1957
|
+
--dds-grid-half-col-count: var(--dds-grid-xl-count);
|
|
1943
1958
|
}
|
|
1944
1959
|
grid-row: var(--dds-grid-child-grid-row);
|
|
1945
1960
|
justify-self: var(--dds-grid-child-justify-self);
|
|
@@ -1980,10 +1995,10 @@
|
|
|
1980
1995
|
}
|
|
1981
1996
|
.InlineEdit_inline-input {
|
|
1982
1997
|
width: 100%;
|
|
1983
|
-
padding: var(--
|
|
1998
|
+
padding: var(--dds-spacing-x0-25);
|
|
1984
1999
|
border-color: transparent;
|
|
1985
2000
|
background-color: transparent;
|
|
1986
|
-
border-radius: var(--
|
|
2001
|
+
border-radius: var(--dds-border-radius-1);
|
|
1987
2002
|
@media (prefers-reduced-motion: no-preference) {
|
|
1988
2003
|
transition:
|
|
1989
2004
|
background-color 0.2s,
|
|
@@ -1993,30 +2008,30 @@
|
|
|
1993
2008
|
&:hover:enabled:-moz-read-write:not(:focus) {
|
|
1994
2009
|
border-color: transparent;
|
|
1995
2010
|
box-shadow: none;
|
|
1996
|
-
background-color: var(--dds-color-
|
|
2011
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
1997
2012
|
}
|
|
1998
2013
|
&:hover:enabled:read-write:not(:focus) {
|
|
1999
2014
|
border-color: transparent;
|
|
2000
2015
|
box-shadow: none;
|
|
2001
|
-
background-color: var(--dds-color-
|
|
2016
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
2002
2017
|
}
|
|
2003
2018
|
&:focus {
|
|
2004
|
-
background-color: var(--dds-color-
|
|
2019
|
+
background-color: var(--dds-color-surface-default);
|
|
2005
2020
|
}
|
|
2006
2021
|
}
|
|
2007
2022
|
.InlineEdit_inline-input--with-icon {
|
|
2008
|
-
padding-left: var(--
|
|
2023
|
+
padding-left: var(--dds-spacing-x2);
|
|
2009
2024
|
}
|
|
2010
2025
|
.InlineEdit_inline-input--with-icon--is-editing {
|
|
2011
|
-
padding-left: var(--
|
|
2026
|
+
padding-left: var(--dds-spacing-x0-25);
|
|
2012
2027
|
}
|
|
2013
2028
|
.InlineEdit_inline-textarea {
|
|
2014
2029
|
resize: vertical;
|
|
2015
2030
|
}
|
|
2016
2031
|
.InlineEdit_icon-wrapper {
|
|
2017
2032
|
position: absolute;
|
|
2018
|
-
top: var(--
|
|
2019
|
-
left: var(--
|
|
2033
|
+
top: var(--dds-spacing-x0-5);
|
|
2034
|
+
left: var(--dds-spacing-x0-5);
|
|
2020
2035
|
z-index: 1;
|
|
2021
2036
|
&:hover {
|
|
2022
2037
|
cursor: text;
|
|
@@ -2027,19 +2042,19 @@
|
|
|
2027
2042
|
.InternalHeader_bar {
|
|
2028
2043
|
display: flex;
|
|
2029
2044
|
align-items: center;
|
|
2030
|
-
background-color: var(--dds-color-
|
|
2031
|
-
border-bottom: 1px solid var(--dds-color-
|
|
2045
|
+
background-color: var(--dds-color-surface-default);
|
|
2046
|
+
border-bottom: 1px solid var(--dds-color-border-default);
|
|
2032
2047
|
min-height: 58px;
|
|
2033
|
-
gap: var(--
|
|
2034
|
-
padding-inline: var(--
|
|
2048
|
+
gap: var(--dds-spacing-x1-5);
|
|
2049
|
+
padding-inline: var(--dds-spacing-x1-5);
|
|
2035
2050
|
.InternalHeader_bar-separator {
|
|
2036
2051
|
margin-left: auto;
|
|
2037
2052
|
}
|
|
2038
2053
|
}
|
|
2039
2054
|
.InternalHeader_bar--small-screen {
|
|
2040
|
-
gap: var(--
|
|
2041
|
-
padding-inline-start: var(--
|
|
2042
|
-
padding-inline-end: var(--
|
|
2055
|
+
gap: var(--dds-spacing-x1);
|
|
2056
|
+
padding-inline-start: var(--dds-spacing-x1);
|
|
2057
|
+
padding-inline-end: var(--dds-spacing-x0-5);
|
|
2043
2058
|
}
|
|
2044
2059
|
.InternalHeader_bar--with-nav {
|
|
2045
2060
|
.InternalHeader_bar-separator {
|
|
@@ -2051,14 +2066,14 @@
|
|
|
2051
2066
|
}
|
|
2052
2067
|
.InternalHeader_bar-separator {
|
|
2053
2068
|
align-self: stretch;
|
|
2054
|
-
border-left: 1px solid var(--dds-color-
|
|
2069
|
+
border-left: 1px solid var(--dds-color-border-default);
|
|
2055
2070
|
}
|
|
2056
2071
|
.InternalHeader_nav-list {
|
|
2057
2072
|
box-sizing: border-box;
|
|
2058
2073
|
display: flex;
|
|
2059
2074
|
align-items: center;
|
|
2060
2075
|
width: 100%;
|
|
2061
|
-
gap: var(--
|
|
2076
|
+
gap: var(--dds-spacing-x1-5);
|
|
2062
2077
|
}
|
|
2063
2078
|
.InternalHeader_nav-list--small-screen {
|
|
2064
2079
|
align-items: initial;
|
|
@@ -2069,24 +2084,27 @@
|
|
|
2069
2084
|
}
|
|
2070
2085
|
.InternalHeader_nav-list__item__link {
|
|
2071
2086
|
text-decoration: none;
|
|
2072
|
-
padding: var(--
|
|
2073
|
-
border-radius: var(--
|
|
2087
|
+
padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
|
|
2088
|
+
border-radius: var(--dds-border-radius-1);
|
|
2074
2089
|
background-color: transparent;
|
|
2075
|
-
color: var(--dds-color-
|
|
2090
|
+
color: var(--dds-color-text-subtle);
|
|
2076
2091
|
&:hover {
|
|
2077
|
-
background-color: var(--dds-color-
|
|
2078
|
-
color: var(--dds-color-
|
|
2092
|
+
background-color: var(--dds-color-surface-hover-subtle);
|
|
2093
|
+
color: var(--dds-color-text-default);
|
|
2079
2094
|
}
|
|
2080
2095
|
@media (prefers-reduced-motion: no-preference) {
|
|
2081
|
-
transition:
|
|
2096
|
+
transition:
|
|
2097
|
+
background-color 0.2s,
|
|
2098
|
+
color 0.2s,
|
|
2099
|
+
var(--dds-focus-transition);
|
|
2082
2100
|
}
|
|
2083
2101
|
}
|
|
2084
2102
|
.InternalHeader_nav-list__item__link--active {
|
|
2085
|
-
background-color: var(--dds-color-
|
|
2086
|
-
color: var(--dds-color-
|
|
2103
|
+
background-color: var(--dds-color-surface-selected-default);
|
|
2104
|
+
color: var(--dds-color-text-default);
|
|
2087
2105
|
&:hover {
|
|
2088
|
-
background-color: var(--dds-color-
|
|
2089
|
-
color: var(--dds-color-
|
|
2106
|
+
background-color: var(--dds-color-surface-selected-default);
|
|
2107
|
+
color: var(--dds-color-text-default);
|
|
2090
2108
|
}
|
|
2091
2109
|
}
|
|
2092
2110
|
.InternalHeader_context-menu {
|
|
@@ -2095,8 +2113,8 @@
|
|
|
2095
2113
|
|
|
2096
2114
|
/* src/components/List/List.module.css */
|
|
2097
2115
|
.List_list {
|
|
2098
|
-
color: var(--dds-color-
|
|
2099
|
-
margin: var(--
|
|
2116
|
+
color: var(--dds-color-text-default);
|
|
2117
|
+
margin: var(--dds-spacing-x1) 0;
|
|
2100
2118
|
ul,
|
|
2101
2119
|
ol {
|
|
2102
2120
|
margin: 0;
|
|
@@ -2106,9 +2124,9 @@
|
|
|
2106
2124
|
font: inherit;
|
|
2107
2125
|
}
|
|
2108
2126
|
.List_list--unordered {
|
|
2109
|
-
--dds-list-ul-li-padding-left: 1em + var(--
|
|
2127
|
+
--dds-list-ul-li-padding-left: 1em + var(--dds-spacing-x0-25);
|
|
2110
2128
|
list-style: none;
|
|
2111
|
-
padding-left: calc(var(--
|
|
2129
|
+
padding-left: calc(var(--dds-spacing-x2) - (var(--dds-list-ul-li-padding-left)));
|
|
2112
2130
|
li {
|
|
2113
2131
|
position: relative;
|
|
2114
2132
|
padding-left: calc(var(--dds-list-ul-li-padding-left));
|
|
@@ -2133,7 +2151,7 @@
|
|
|
2133
2151
|
}
|
|
2134
2152
|
}
|
|
2135
2153
|
.List_list--ordered {
|
|
2136
|
-
padding-left: var(--
|
|
2154
|
+
padding-left: var(--dds-spacing-x2);
|
|
2137
2155
|
& > li > ol {
|
|
2138
2156
|
list-style-type: lower-alpha;
|
|
2139
2157
|
}
|
|
@@ -2152,43 +2170,43 @@
|
|
|
2152
2170
|
display: grid;
|
|
2153
2171
|
align-items: center;
|
|
2154
2172
|
box-shadow: var(--dds-shadow-1-onlight);
|
|
2155
|
-
border-radius: var(--
|
|
2156
|
-
padding: var(--
|
|
2157
|
-
gap: var(--
|
|
2173
|
+
border-radius: var(--dds-border-radius-1);
|
|
2174
|
+
padding: var(--dds-spacing-x0-75);
|
|
2175
|
+
gap: var(--dds-spacing-x0-5);
|
|
2158
2176
|
}
|
|
2159
2177
|
.LocalMessage_container--info {
|
|
2160
|
-
border-color: var(--dds-color-info
|
|
2161
|
-
background-color: var(--dds-color-info-
|
|
2178
|
+
border-color: var(--dds-color-border-info);
|
|
2179
|
+
background-color: var(--dds-color-surface-info-default);
|
|
2162
2180
|
.LocalMessage_icon {
|
|
2163
|
-
color: var(--dds-color-info-
|
|
2181
|
+
color: var(--dds-color-icon-on-info-default);
|
|
2164
2182
|
}
|
|
2165
2183
|
}
|
|
2166
2184
|
.LocalMessage_container--warning {
|
|
2167
|
-
border-color: var(--dds-color-warning
|
|
2168
|
-
background-color: var(--dds-color-warning-
|
|
2185
|
+
border-color: var(--dds-color-border-warning);
|
|
2186
|
+
background-color: var(--dds-color-surface-warning-default);
|
|
2169
2187
|
.LocalMessage_icon {
|
|
2170
|
-
color: var(--dds-color-warning-
|
|
2188
|
+
color: var(--dds-color-icon-on-warning-default);
|
|
2171
2189
|
}
|
|
2172
2190
|
}
|
|
2173
2191
|
.LocalMessage_container--danger {
|
|
2174
|
-
border-color: var(--dds-color-danger
|
|
2175
|
-
background-color: var(--dds-color-danger-
|
|
2192
|
+
border-color: var(--dds-color-border-danger);
|
|
2193
|
+
background-color: var(--dds-color-surface-danger-default);
|
|
2176
2194
|
.LocalMessage_icon {
|
|
2177
|
-
color: var(--dds-color-danger-
|
|
2195
|
+
color: var(--dds-color-icon-on-danger-default);
|
|
2178
2196
|
}
|
|
2179
2197
|
}
|
|
2180
2198
|
.LocalMessage_container--success {
|
|
2181
|
-
border-color: var(--dds-color-success
|
|
2182
|
-
background-color: var(--dds-color-success-
|
|
2199
|
+
border-color: var(--dds-color-border-success);
|
|
2200
|
+
background-color: var(--dds-color-surface-success-default);
|
|
2183
2201
|
.LocalMessage_icon {
|
|
2184
|
-
color: var(--dds-color-success-
|
|
2202
|
+
color: var(--dds-color-icon-on-success-default);
|
|
2185
2203
|
}
|
|
2186
2204
|
}
|
|
2187
2205
|
.LocalMessage_container--tips {
|
|
2188
|
-
border-color: var(--dds-color-
|
|
2189
|
-
background-color: var(--dds-color-
|
|
2206
|
+
border-color: var(--dds-color-border-info);
|
|
2207
|
+
background-color: var(--dds-color-surface-info-default);
|
|
2190
2208
|
.LocalMessage_icon {
|
|
2191
|
-
color: var(--dds-color-
|
|
2209
|
+
color: var(--dds-color-icon-on-info-default);
|
|
2192
2210
|
}
|
|
2193
2211
|
}
|
|
2194
2212
|
.LocalMessage_container--horisontal {
|
|
@@ -2209,14 +2227,14 @@
|
|
|
2209
2227
|
}
|
|
2210
2228
|
.LocalMessage_container__text {
|
|
2211
2229
|
grid-area: text;
|
|
2212
|
-
padding-right: var(--
|
|
2230
|
+
padding-right: var(--dds-spacing-x0-75);
|
|
2213
2231
|
}
|
|
2214
2232
|
.LocalMessage_container__icon {
|
|
2215
2233
|
grid-area: icon;
|
|
2216
2234
|
}
|
|
2217
2235
|
.LocalMessage_container__button {
|
|
2218
2236
|
grid-area: closeButton;
|
|
2219
|
-
margin: calc(0px - var(--
|
|
2237
|
+
margin: calc(0px - var(--dds-spacing-x0-75)) 0;
|
|
2220
2238
|
}
|
|
2221
2239
|
|
|
2222
2240
|
/* src/components/Modal/Modal.module.css */
|
|
@@ -2231,6 +2249,7 @@
|
|
|
2231
2249
|
bottom: 0;
|
|
2232
2250
|
left: 0;
|
|
2233
2251
|
z-index: 200;
|
|
2252
|
+
background-color: var(--dds-color-surface-backdrop-default);
|
|
2234
2253
|
@media (prefers-reduced-motion: no-preference) {
|
|
2235
2254
|
transition: opacity 0.2s;
|
|
2236
2255
|
}
|
|
@@ -2245,17 +2264,17 @@
|
|
|
2245
2264
|
display: flex;
|
|
2246
2265
|
flex-direction: column-reverse;
|
|
2247
2266
|
min-width: 200px;
|
|
2248
|
-
padding: var(--
|
|
2267
|
+
padding: var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1-5);
|
|
2249
2268
|
}
|
|
2250
2269
|
.Modal_content {
|
|
2251
2270
|
display: grid;
|
|
2252
|
-
padding-right: var(--
|
|
2253
|
-
gap: var(--
|
|
2271
|
+
padding-right: var(--dds-spacing-x1);
|
|
2272
|
+
gap: var(--dds-spacing-x1);
|
|
2254
2273
|
}
|
|
2255
2274
|
.Modal_actions {
|
|
2256
2275
|
display: flex;
|
|
2257
2276
|
flex-wrap: wrap;
|
|
2258
|
-
gap: var(--
|
|
2277
|
+
gap: var(--dds-spacing-x1);
|
|
2259
2278
|
}
|
|
2260
2279
|
.Modal_close-button {
|
|
2261
2280
|
align-self: flex-end;
|
|
@@ -2264,7 +2283,7 @@
|
|
|
2264
2283
|
/* src/components/Pagination/Pagination.module.css */
|
|
2265
2284
|
.Pagination_container {
|
|
2266
2285
|
display: flex;
|
|
2267
|
-
gap: var(--
|
|
2286
|
+
gap: var(--dds-spacing-x0-75);
|
|
2268
2287
|
justify-content: space-between;
|
|
2269
2288
|
flex-wrap: wrap;
|
|
2270
2289
|
}
|
|
@@ -2281,7 +2300,7 @@
|
|
|
2281
2300
|
grid-auto-flow: column;
|
|
2282
2301
|
margin: 0;
|
|
2283
2302
|
padding: 0;
|
|
2284
|
-
gap: var(--
|
|
2303
|
+
gap: var(--dds-spacing-x0-75);
|
|
2285
2304
|
}
|
|
2286
2305
|
.Pagination_list__item {
|
|
2287
2306
|
display: inline-grid;
|
|
@@ -2294,11 +2313,11 @@
|
|
|
2294
2313
|
display: grid;
|
|
2295
2314
|
grid-auto-flow: column;
|
|
2296
2315
|
align-items: center;
|
|
2297
|
-
gap: var(--
|
|
2316
|
+
gap: var(--dds-spacing-x0-75);
|
|
2298
2317
|
}
|
|
2299
2318
|
.Pagination_truncation-icon {
|
|
2300
|
-
color: var(--dds-color-
|
|
2301
|
-
min-width: calc(1ch + (2 * var(--
|
|
2319
|
+
color: var(--dds-color-icon-medium);
|
|
2320
|
+
min-width: calc(1ch + (2 * var(--dds-spacing-x0-75)));
|
|
2302
2321
|
}
|
|
2303
2322
|
|
|
2304
2323
|
/* src/components/Select/Select.module.css */
|
|
@@ -2318,18 +2337,18 @@
|
|
|
2318
2337
|
max-width: 100%;
|
|
2319
2338
|
}
|
|
2320
2339
|
.Select_icon {
|
|
2321
|
-
margin-right: var(--
|
|
2340
|
+
margin-right: var(--dds-spacing-x0-5);
|
|
2322
2341
|
}
|
|
2323
2342
|
.Select_control {
|
|
2324
2343
|
&:hover .Select_dropdown-indicator,
|
|
2325
2344
|
&:focus-within .Select_dropdown-indicator {
|
|
2326
|
-
color: var(--dds-color-
|
|
2345
|
+
color: var(--dds-color-icon-action-hover);
|
|
2327
2346
|
}
|
|
2328
|
-
&.Select_control--readonly
|
|
2347
|
+
&.Select_control--readonly .Select_dropdown-indicator {
|
|
2329
2348
|
color: transparent;
|
|
2330
2349
|
}
|
|
2331
|
-
&.Select_control--disabled
|
|
2332
|
-
color:
|
|
2350
|
+
&.Select_control--disabled .Select_dropdown-indicator {
|
|
2351
|
+
color: transparent;
|
|
2333
2352
|
}
|
|
2334
2353
|
}
|
|
2335
2354
|
|
|
@@ -2339,18 +2358,18 @@
|
|
|
2339
2358
|
width: -moz-fit-content;
|
|
2340
2359
|
width: fit-content;
|
|
2341
2360
|
z-index: 100;
|
|
2342
|
-
padding: var(--
|
|
2361
|
+
padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1);
|
|
2343
2362
|
}
|
|
2344
2363
|
.Popover_content--closable--no-title {
|
|
2345
|
-
margin-top: var(--
|
|
2364
|
+
margin-top: var(--dds-spacing-x2);
|
|
2346
2365
|
}
|
|
2347
2366
|
.Popover_title {
|
|
2348
|
-
margin-right: var(--
|
|
2367
|
+
margin-right: var(--dds-spacing-x2);
|
|
2349
2368
|
}
|
|
2350
2369
|
.Popover_close-button {
|
|
2351
2370
|
position: absolute;
|
|
2352
|
-
top: var(--
|
|
2353
|
-
right: var(--
|
|
2371
|
+
top: var(--dds-spacing-x0-25);
|
|
2372
|
+
right: var(--dds-spacing-x0-25);
|
|
2354
2373
|
}
|
|
2355
2374
|
|
|
2356
2375
|
/* src/components/ProgressTracker/ProgressTracker.module.css */
|
|
@@ -2360,12 +2379,12 @@
|
|
|
2360
2379
|
display: flex;
|
|
2361
2380
|
flex-direction: column;
|
|
2362
2381
|
align-items: flex-start;
|
|
2363
|
-
gap: var(--
|
|
2382
|
+
gap: var(--dds-spacing-x0-125);
|
|
2364
2383
|
margin: 0;
|
|
2365
2384
|
padding: 0;
|
|
2366
2385
|
}
|
|
2367
2386
|
.ProgressTracker_connector {
|
|
2368
|
-
border-right: var(--dds-progress-tracker-connector-width) solid var(--dds-color-
|
|
2387
|
+
border-right: var(--dds-progress-tracker-connector-width) solid var(--dds-color-border-default);
|
|
2369
2388
|
width: 1px;
|
|
2370
2389
|
height: 18px;
|
|
2371
2390
|
margin-left: calc((var(--dds-progress-tracker-item-number-size) / 2) - (var(--dds-progress-tracker-connector-width) / 2));
|
|
@@ -2386,40 +2405,36 @@
|
|
|
2386
2405
|
justify-content: flex-start;
|
|
2387
2406
|
align-items: center;
|
|
2388
2407
|
font-family: inherit;
|
|
2389
|
-
gap: var(--
|
|
2408
|
+
gap: var(--dds-spacing-x0-5);
|
|
2390
2409
|
cursor: pointer;
|
|
2391
2410
|
@media (prefers-reduced-motion: no-preference) {
|
|
2392
2411
|
transition: all 0.2s;
|
|
2393
2412
|
}
|
|
2394
2413
|
&:hover > .ProgressTracker_item-number--active-incomplete {
|
|
2395
|
-
background-color: var(--dds-color-
|
|
2396
|
-
border-color: var(--dds-color-
|
|
2397
|
-
color: var(--dds-color-
|
|
2398
|
-
}
|
|
2399
|
-
&:hover .ProgressTracker_item-number--active-completed {
|
|
2400
|
-
background-color: var(--dds-color-interactive-dark);
|
|
2401
|
-
border-color: var(--dds-color-interactive-dark);
|
|
2402
|
-
color: var(--dds-color-neutrals-white);
|
|
2414
|
+
background-color: var(--dds-color-surface-action-resting);
|
|
2415
|
+
border-color: var(--dds-color-border-action-default);
|
|
2416
|
+
color: var(--dds-color-text-on-action);
|
|
2403
2417
|
}
|
|
2404
2418
|
&:hover > .ProgressTracker_item-number--inactive-incomplete {
|
|
2405
|
-
background-color: var(--dds-color-
|
|
2406
|
-
border-color: var(--dds-color-
|
|
2407
|
-
color: var(--dds-color-
|
|
2419
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
2420
|
+
border-color: var(--dds-color-border-action-hover);
|
|
2421
|
+
color: var(--dds-color-text-action-hover);
|
|
2408
2422
|
}
|
|
2423
|
+
&:hover > .ProgressTracker_item-number--active-completed,
|
|
2409
2424
|
&:hover > .ProgressTracker_item-number--inactive-completed {
|
|
2410
|
-
background-color: var(--dds-color-
|
|
2411
|
-
border-color: var(--dds-color-
|
|
2412
|
-
color: var(--dds-color-
|
|
2425
|
+
background-color: var(--dds-color-surface-action-hover);
|
|
2426
|
+
border-color: var(--dds-color-border-action-hover);
|
|
2427
|
+
color: var(--dds-color-icon-on-action);
|
|
2413
2428
|
}
|
|
2414
2429
|
&:hover > .ProgressTracker_item-text--active-completed,
|
|
2415
2430
|
&:hover > .ProgressTracker_item-text--active-incomplete {
|
|
2416
|
-
color: var(--dds-color-
|
|
2431
|
+
color: var(--dds-color-text-action-resting);
|
|
2417
2432
|
text-decoration-color: transparent;
|
|
2418
2433
|
}
|
|
2419
2434
|
&:hover > .ProgressTracker_item-text--inactive-completed,
|
|
2420
2435
|
&:hover > .ProgressTracker_item-text--inactive-incomplete {
|
|
2421
|
-
color: var(--dds-color-
|
|
2422
|
-
text-decoration-color: var(--dds-color-
|
|
2436
|
+
color: var(--dds-color-text-action-hover);
|
|
2437
|
+
text-decoration-color: var(--dds-color-text-action-hover);
|
|
2423
2438
|
}
|
|
2424
2439
|
&:disabled {
|
|
2425
2440
|
cursor: not-allowed;
|
|
@@ -2434,7 +2449,7 @@
|
|
|
2434
2449
|
align-items: center;
|
|
2435
2450
|
justify-content: center;
|
|
2436
2451
|
z-index: 2;
|
|
2437
|
-
font-weight: 600
|
|
2452
|
+
font-weight: 600;
|
|
2438
2453
|
border: 2px solid;
|
|
2439
2454
|
height: var(--dds-progress-tracker-item-number-size);
|
|
2440
2455
|
width: var(--dds-progress-tracker-item-number-size);
|
|
@@ -2446,29 +2461,21 @@
|
|
|
2446
2461
|
}
|
|
2447
2462
|
}
|
|
2448
2463
|
.ProgressTracker_item-number--disabled {
|
|
2449
|
-
background-color: var(--dds-color-
|
|
2450
|
-
border-color: var(--dds-color-
|
|
2451
|
-
color: var(--dds-color-
|
|
2452
|
-
}
|
|
2453
|
-
.ProgressTracker_item-number--active-incomplete {
|
|
2454
|
-
background-color: var(--dds-color-interactive-base);
|
|
2455
|
-
border-color: var(--dds-color-interactive-base);
|
|
2456
|
-
color: var(--dds-color-neutrals-white) !important;
|
|
2464
|
+
background-color: var(--dds-color-surface-default);
|
|
2465
|
+
border-color: var(--dds-color-border-default);
|
|
2466
|
+
color: var(--dds-color-text-subtle);
|
|
2457
2467
|
}
|
|
2458
|
-
.ProgressTracker_item-number--active-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
color: var(--dds-color-
|
|
2468
|
+
.ProgressTracker_item-number--active-incomplete,
|
|
2469
|
+
.ProgressTracker_item-number--active-completed,
|
|
2470
|
+
.ProgressTracker_item-number--inactive-completed {
|
|
2471
|
+
background-color: var(--dds-color-surface-action-resting);
|
|
2472
|
+
border-color: var(--dds-color-border-action-default);
|
|
2473
|
+
color: var(--dds-color-text-on-action);
|
|
2462
2474
|
}
|
|
2463
2475
|
.ProgressTracker_item-number--inactive-incomplete {
|
|
2464
|
-
background-color: var(--dds-color-
|
|
2465
|
-
border-color: var(--dds-color-
|
|
2466
|
-
color: var(--dds-color-
|
|
2467
|
-
}
|
|
2468
|
-
.ProgressTracker_item-number--inactive-completed {
|
|
2469
|
-
background-color: var(--dds-color-interactive-base);
|
|
2470
|
-
border-color: var(--dds-color-interactive-base);
|
|
2471
|
-
color: var(--dds-color-neutrals-white) !important;
|
|
2476
|
+
background-color: var(--dds-color-surface-default);
|
|
2477
|
+
border-color: var(--dds-color-border-action-default);
|
|
2478
|
+
color: var(--dds-color-text-action-resting);
|
|
2472
2479
|
}
|
|
2473
2480
|
.ProgressTracker_item-text {
|
|
2474
2481
|
text-decoration: underline;
|
|
@@ -2476,25 +2483,25 @@
|
|
|
2476
2483
|
transition: text-decoration-color 0.2s;
|
|
2477
2484
|
}
|
|
2478
2485
|
.ProgressTracker_item-text--disabled {
|
|
2479
|
-
color: var(--dds-color-
|
|
2486
|
+
color: var(--dds-color-text-subtle);
|
|
2480
2487
|
text-decoration-color: transparent;
|
|
2481
2488
|
}
|
|
2482
2489
|
.ProgressTracker_item-text--active-completed,
|
|
2483
2490
|
.ProgressTracker_item-text--active-incomplete {
|
|
2484
|
-
color: var(--dds-color-
|
|
2491
|
+
color: var(--dds-color-text-action-resting);
|
|
2485
2492
|
text-decoration-color: transparent;
|
|
2486
2493
|
}
|
|
2487
2494
|
.ProgressTracker_item-text--inactive-completed,
|
|
2488
2495
|
.ProgressTracker_item-text--inactive-incomplete {
|
|
2489
|
-
color: var(--dds-color-
|
|
2490
|
-
text-decoration-color: var(--dds-color-
|
|
2496
|
+
color: var(--dds-color-text-medium);
|
|
2497
|
+
text-decoration-color: var(--dds-color-text-medium);
|
|
2491
2498
|
}
|
|
2492
2499
|
|
|
2493
2500
|
/* src/components/Search/Search.module.css */
|
|
2494
2501
|
.Search_container {
|
|
2495
2502
|
display: flex;
|
|
2496
2503
|
flex-direction: column;
|
|
2497
|
-
gap: var(--
|
|
2504
|
+
gap: var(--dds-spacing-x0-125);
|
|
2498
2505
|
}
|
|
2499
2506
|
.Search_input-group {
|
|
2500
2507
|
position: relative;
|
|
@@ -2503,10 +2510,10 @@
|
|
|
2503
2510
|
.Search_with-button-container {
|
|
2504
2511
|
display: grid;
|
|
2505
2512
|
grid-template-columns: 1fr auto;
|
|
2506
|
-
gap: var(--
|
|
2513
|
+
gap: var(--dds-spacing-x0-5);
|
|
2507
2514
|
}
|
|
2508
2515
|
.Search_input {
|
|
2509
|
-
padding-right: var(--
|
|
2516
|
+
padding-right: var(--dds-spacing-x0-25);
|
|
2510
2517
|
&[type=search]::-webkit-search-decoration,
|
|
2511
2518
|
&[type=search]::-webkit-search-cancel-button,
|
|
2512
2519
|
&[type=search]::-webkit-search-results-button,
|
|
@@ -2515,33 +2522,35 @@
|
|
|
2515
2522
|
}
|
|
2516
2523
|
}
|
|
2517
2524
|
.Search_input--small {
|
|
2518
|
-
padding-top: var(--
|
|
2519
|
-
padding-bottom: var(--
|
|
2520
|
-
padding-left: calc(var(--
|
|
2525
|
+
padding-top: var(--dds-spacing-x0-5);
|
|
2526
|
+
padding-bottom: var(--dds-spacing-x0-5);
|
|
2527
|
+
padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-small) + var(--dds-spacing-x0-5));
|
|
2521
2528
|
}
|
|
2522
2529
|
.Search_input--medium {
|
|
2523
|
-
padding-top: var(--
|
|
2524
|
-
padding-bottom: var(--
|
|
2525
|
-
padding-left: calc(var(--
|
|
2530
|
+
padding-top: var(--dds-spacing-x0-75);
|
|
2531
|
+
padding-bottom: var(--dds-spacing-x0-75);
|
|
2532
|
+
padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
|
|
2526
2533
|
}
|
|
2527
2534
|
.Search_input--large {
|
|
2528
|
-
padding-top: var(--
|
|
2529
|
-
padding-bottom: var(--
|
|
2530
|
-
padding-left: calc(var(--
|
|
2535
|
+
padding-top: var(--dds-spacing-x1);
|
|
2536
|
+
padding-bottom: var(--dds-spacing-x1);
|
|
2537
|
+
padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
|
|
2531
2538
|
}
|
|
2532
2539
|
.Search_search-icon {
|
|
2533
2540
|
position: absolute;
|
|
2534
|
-
left: var(--
|
|
2541
|
+
left: var(--dds-spacing-x0-75);
|
|
2535
2542
|
top: 50%;
|
|
2536
2543
|
transform: translate(0, -50%);
|
|
2537
2544
|
z-index: 1;
|
|
2538
|
-
color: var(--dds-color-
|
|
2545
|
+
color: var(--dds-color-icon-default);
|
|
2539
2546
|
}
|
|
2540
|
-
.Search_clear-button
|
|
2547
|
+
.Search_clear-button {
|
|
2541
2548
|
position: absolute;
|
|
2542
2549
|
top: 50%;
|
|
2543
2550
|
transform: translate(0, -50%);
|
|
2544
|
-
right: var(--
|
|
2551
|
+
right: var(--dds-spacing-x0-75);
|
|
2552
|
+
width: var(--dds-icon-size-medium);
|
|
2553
|
+
height: var(--dds-icon-size-medium);
|
|
2545
2554
|
}
|
|
2546
2555
|
.Search_suggestions {
|
|
2547
2556
|
position: absolute;
|
|
@@ -2550,30 +2559,28 @@
|
|
|
2550
2559
|
max-height: 300px;
|
|
2551
2560
|
z-index: 80;
|
|
2552
2561
|
overflow-y: scroll;
|
|
2553
|
-
margin-top: var(--
|
|
2554
|
-
border: 1px solid var(--dds-color-interactive-base);
|
|
2555
|
-
box-shadow: 0 0 0 1px var(--dds-color-interactive-base);
|
|
2562
|
+
margin-top: var(--dds-spacing-x0-25);
|
|
2556
2563
|
}
|
|
2557
2564
|
.Search_suggestions__header {
|
|
2558
|
-
padding-left: var(--
|
|
2565
|
+
padding-left: var(--dds-spacing-x1);
|
|
2559
2566
|
}
|
|
2560
2567
|
|
|
2561
2568
|
/* src/components/SelectionControl/SelectionControl.module.css */
|
|
2562
2569
|
.SelectionControl_container {
|
|
2563
2570
|
display: flex;
|
|
2564
2571
|
flex-direction: column;
|
|
2565
|
-
gap: var(--
|
|
2572
|
+
gap: var(--dds-spacing-x0-125);
|
|
2566
2573
|
}
|
|
2567
2574
|
.SelectionControl_group {
|
|
2568
2575
|
display: flex;
|
|
2569
2576
|
}
|
|
2570
2577
|
.SelectionControl_group--row {
|
|
2571
2578
|
flex-direction: row;
|
|
2572
|
-
gap: var(--
|
|
2579
|
+
gap: var(--dds-spacing-x0-75);
|
|
2573
2580
|
}
|
|
2574
2581
|
.SelectionControl_group--column {
|
|
2575
2582
|
flex-direction: column;
|
|
2576
|
-
gap: var(--
|
|
2583
|
+
gap: var(--dds-spacing-x0-5);
|
|
2577
2584
|
}
|
|
2578
2585
|
.SelectionControl_label {
|
|
2579
2586
|
position: relative;
|
|
@@ -2585,7 +2592,7 @@
|
|
|
2585
2592
|
user-select: none;
|
|
2586
2593
|
width: -moz-fit-content;
|
|
2587
2594
|
width: fit-content;
|
|
2588
|
-
padding-left: calc(18px + var(--
|
|
2595
|
+
padding-left: calc(18px + var(--dds-spacing-x0-5));
|
|
2589
2596
|
input ~ .SelectionControl_selection-control {
|
|
2590
2597
|
@media (prefers-reduced-motion: no-preference) {
|
|
2591
2598
|
transition:
|
|
@@ -2596,20 +2603,19 @@
|
|
|
2596
2603
|
}
|
|
2597
2604
|
}
|
|
2598
2605
|
&:hover input:enabled ~ .SelectionControl_selection-control {
|
|
2599
|
-
background-color: var(--dds-color-
|
|
2600
|
-
box-shadow: inset 0 0 0 1px var(--dds-color-
|
|
2601
|
-
border-color: var(--dds-color-
|
|
2606
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
2607
|
+
box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
|
|
2608
|
+
border-color: var(--dds-color-border-action-hover);
|
|
2602
2609
|
}
|
|
2603
2610
|
input:checked:enabled ~ .SelectionControl_selection-control,
|
|
2604
2611
|
input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
|
|
2605
|
-
border-color: var(--dds-color-
|
|
2606
|
-
background-color: var(--dds-color-
|
|
2612
|
+
border-color: var(--dds-color-surface-action-selected);
|
|
2613
|
+
background-color: var(--dds-color-surface-action-selected);
|
|
2607
2614
|
}
|
|
2608
2615
|
&:hover input:checked:enabled ~ .SelectionControl_selection-control,
|
|
2609
|
-
input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
|
|
2610
|
-
background-color: var(--dds-color-
|
|
2611
|
-
|
|
2612
|
-
border-color: var(--dds-color-interactive-dark);
|
|
2616
|
+
&:hover input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
|
|
2617
|
+
background-color: var(--dds-color-surface-action-hover);
|
|
2618
|
+
border-color: var(--dds-color-surface-action-hover);
|
|
2613
2619
|
}
|
|
2614
2620
|
input:checked ~ .SelectionControl_selection-control:after,
|
|
2615
2621
|
input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
|
|
@@ -2618,7 +2624,7 @@
|
|
|
2618
2624
|
}
|
|
2619
2625
|
.SelectionControl_label--checkbox {
|
|
2620
2626
|
.SelectionControl_selection-control:after {
|
|
2621
|
-
border: solid var(--dds-color-
|
|
2627
|
+
border: solid var(--dds-color-icon-on-action);
|
|
2622
2628
|
border-width: 0 1px 1px 0;
|
|
2623
2629
|
left: 35%;
|
|
2624
2630
|
top: 10%;
|
|
@@ -2638,7 +2644,7 @@
|
|
|
2638
2644
|
.SelectionControl_label--radio {
|
|
2639
2645
|
.SelectionControl_selection-control:after {
|
|
2640
2646
|
border-radius: 50%;
|
|
2641
|
-
background-color: var(--dds-color-
|
|
2647
|
+
background-color: var(--dds-color-icon-on-action);
|
|
2642
2648
|
height: 8px;
|
|
2643
2649
|
width: 8px;
|
|
2644
2650
|
left: 50%;
|
|
@@ -2649,36 +2655,35 @@
|
|
|
2649
2655
|
.SelectionControl_label--disabled {
|
|
2650
2656
|
cursor: not-allowed;
|
|
2651
2657
|
input:disabled ~ .SelectionControl_selection-control {
|
|
2652
|
-
border-color: var(--dds-color-
|
|
2658
|
+
border-color: var(--dds-color-border-default);
|
|
2653
2659
|
}
|
|
2654
2660
|
input:checked:disabled ~ .SelectionControl_selection-control,
|
|
2655
2661
|
input:disabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
|
|
2656
|
-
border-color: var(--dds-color-
|
|
2657
|
-
background-color: var(--dds-color-
|
|
2662
|
+
border-color: var(--dds-color-surface-action-selected-disabled);
|
|
2663
|
+
background-color: var(--dds-color-surface-action-selected-disabled);
|
|
2658
2664
|
}
|
|
2659
2665
|
}
|
|
2660
2666
|
.SelectionControl_label--readonly {
|
|
2661
2667
|
cursor: default;
|
|
2662
2668
|
input ~ .SelectionControl_selection-control {
|
|
2663
|
-
border-color: var(--dds-color-
|
|
2664
|
-
background-color:
|
|
2669
|
+
border-color: var(--dds-color-border-default);
|
|
2670
|
+
background-color: var(--dds-color-surface-field-disabled);
|
|
2665
2671
|
}
|
|
2666
2672
|
input:checked ~ .SelectionControl_selection-control,
|
|
2667
2673
|
input[data-indeterminate=true] ~ .SelectionControl_selection-control {
|
|
2668
|
-
border-color: var(--dds-color-
|
|
2669
|
-
background-color: var(--dds-color-
|
|
2674
|
+
border-color: var(--dds-color-surface-action-selected-disabled);
|
|
2675
|
+
background-color: var(--dds-color-surface-action-selected-disabled);
|
|
2670
2676
|
}
|
|
2671
2677
|
}
|
|
2672
2678
|
.SelectionControl_label--error {
|
|
2673
2679
|
&:hover input:enabled:not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
|
|
2674
|
-
background-color: var(--dds-color-danger-
|
|
2675
|
-
border-color: var(--dds-color-danger
|
|
2676
|
-
box-shadow: 0 0 0 1px var(--dds-
|
|
2680
|
+
background-color: var(--dds-color-surface-danger-default);
|
|
2681
|
+
border-color: var(--dds-color-border-danger);
|
|
2682
|
+
box-shadow: 0 0 0 1px var(--dds-c-tic-border-danger);
|
|
2677
2683
|
}
|
|
2678
|
-
input:not(:focus-visible) ~ .SelectionControl_selection-control
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
box-shadow: 0 0 0 1px var(--dds-color-danger-base);
|
|
2684
|
+
input:not(:focus-visible) ~ .SelectionControl_selectio- input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control &:hover input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control {
|
|
2685
|
+
border-color: var(--dds-color-border-danger);
|
|
2686
|
+
box-shadow: 0 0 0 1px var(--dds-color-border-danger);
|
|
2682
2687
|
}
|
|
2683
2688
|
}
|
|
2684
2689
|
.SelectionControl_label--no-text {
|
|
@@ -2689,9 +2694,9 @@
|
|
|
2689
2694
|
left: 0;
|
|
2690
2695
|
box-sizing: border-box;
|
|
2691
2696
|
border: 1px solid;
|
|
2692
|
-
border-color: var(--dds-color-
|
|
2693
|
-
background-color: var(--dds-color-
|
|
2694
|
-
border-radius: var(--
|
|
2697
|
+
border-color: var(--dds-color-border-default);
|
|
2698
|
+
background-color: var(--dds-color-surface-field-default);
|
|
2699
|
+
border-radius: var(--dds-border-radius-1);
|
|
2695
2700
|
height: 18px;
|
|
2696
2701
|
width: 18px;
|
|
2697
2702
|
&:after {
|
|
@@ -2707,8 +2712,8 @@
|
|
|
2707
2712
|
|
|
2708
2713
|
/* src/components/SkipToContent/SkipToContent.module.css */
|
|
2709
2714
|
.SkipToContent_wrapper {
|
|
2710
|
-
background-color: var(--dds-color-
|
|
2711
|
-
padding: var(--
|
|
2715
|
+
background-color: var(--dds-color-surface-inverse-default);
|
|
2716
|
+
padding: var(--dds-spacing-x0-25);
|
|
2712
2717
|
box-sizing: border-box;
|
|
2713
2718
|
position: absolute;
|
|
2714
2719
|
text-align: center;
|
|
@@ -2733,7 +2738,7 @@
|
|
|
2733
2738
|
.SkipToContent_link,
|
|
2734
2739
|
.SkipToContent_link:hover {
|
|
2735
2740
|
text-decoration: none;
|
|
2736
|
-
color: var(--dds-color-
|
|
2741
|
+
color: var(--dds-color-text-on-inverse);
|
|
2737
2742
|
}
|
|
2738
2743
|
|
|
2739
2744
|
/* src/components/SplitButton/SplitButton.module.css */
|
|
@@ -2759,7 +2764,7 @@
|
|
|
2759
2764
|
}
|
|
2760
2765
|
.SplitButton_option--primary,
|
|
2761
2766
|
.SplitButton_option--primary:hover {
|
|
2762
|
-
border-left: 1px solid var(--dds-color-
|
|
2767
|
+
border-left: 1px solid var(--dds-color-border-on-action);
|
|
2763
2768
|
}
|
|
2764
2769
|
|
|
2765
2770
|
/* src/components/Table/normal/Table.module.css */
|
|
@@ -2776,7 +2781,7 @@
|
|
|
2776
2781
|
}
|
|
2777
2782
|
.Table_table--with-dividers {
|
|
2778
2783
|
.Table_row--body {
|
|
2779
|
-
border-bottom: 1px solid var(--dds-color-
|
|
2784
|
+
border-bottom: 1px solid var(--dds-color-border-default);
|
|
2780
2785
|
}
|
|
2781
2786
|
.Table_row--colapsible-header--open {
|
|
2782
2787
|
border-bottom: none;
|
|
@@ -2792,22 +2797,22 @@
|
|
|
2792
2797
|
.Table_table--normal {
|
|
2793
2798
|
td,
|
|
2794
2799
|
th {
|
|
2795
|
-
padding: var(--
|
|
2800
|
+
padding: var(--dds-spacing-x1-5) var(--dds-spacing-x0-75);
|
|
2796
2801
|
}
|
|
2797
2802
|
}
|
|
2798
2803
|
.Table_table--compact {
|
|
2799
2804
|
td,
|
|
2800
2805
|
th {
|
|
2801
|
-
padding: var(--
|
|
2806
|
+
padding: var(--dds-spacing-x0-75);
|
|
2802
2807
|
}
|
|
2803
2808
|
}
|
|
2804
2809
|
.Table_table--extra-compact {
|
|
2805
2810
|
td,
|
|
2806
2811
|
th {
|
|
2807
|
-
padding: var(--
|
|
2812
|
+
padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
|
|
2808
2813
|
}
|
|
2809
2814
|
th {
|
|
2810
|
-
background-color: var(--dds-color-
|
|
2815
|
+
background-color: var(--dds-color-surface-default);
|
|
2811
2816
|
font-size: var(--dds-font-body-sans-01-font-size);
|
|
2812
2817
|
}
|
|
2813
2818
|
}
|
|
@@ -2821,29 +2826,29 @@
|
|
|
2821
2826
|
}
|
|
2822
2827
|
.Table_row--body {
|
|
2823
2828
|
&:nth-of-type(even) {
|
|
2824
|
-
background-color: var(--dds-color-
|
|
2829
|
+
background-color: var(--dds-color-surface-subtle);
|
|
2825
2830
|
}
|
|
2826
2831
|
&:nth-of-type(odd) {
|
|
2827
|
-
background-color: var(--dds-color-
|
|
2832
|
+
background-color: var(--dds-color-surface-default);
|
|
2828
2833
|
}
|
|
2829
2834
|
&.Table_row--sum,
|
|
2830
2835
|
&.Table_row--sum:nth-of-type(even),
|
|
2831
2836
|
&.Table_row--sum:nth-of-type(odd) {
|
|
2832
|
-
border-bottom: 1px solid var(--dds-color-
|
|
2833
|
-
border-top: 1px solid var(--dds-color-
|
|
2834
|
-
background: var(--dds-color-
|
|
2837
|
+
border-bottom: 1px solid var(--dds-color-border-default);
|
|
2838
|
+
border-top: 1px solid var(--dds-color-border-default);
|
|
2839
|
+
background: var(--dds-color-surface-default);
|
|
2835
2840
|
}
|
|
2836
2841
|
&.Table_row--selected,
|
|
2837
2842
|
&.Table_row--selected:nth-of-type(even),
|
|
2838
2843
|
&.Table_row--selected:nth-of-type(odd) {
|
|
2839
|
-
background-color: var(--dds-color-
|
|
2844
|
+
background-color: var(--dds-color-surface-selected-default);
|
|
2840
2845
|
}
|
|
2841
2846
|
}
|
|
2842
2847
|
.Table_row--hoverable:hover {
|
|
2843
|
-
background-color: var(--dds-color-
|
|
2848
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
2844
2849
|
}
|
|
2845
2850
|
.Table_cell--head {
|
|
2846
|
-
background-color: var(--dds-color-primary-
|
|
2851
|
+
background-color: var(--dds-color-brand-primary-subtle);
|
|
2847
2852
|
}
|
|
2848
2853
|
.Table_cell--left {
|
|
2849
2854
|
text-align: left;
|
|
@@ -2857,10 +2862,10 @@
|
|
|
2857
2862
|
.Table_cell__inner {
|
|
2858
2863
|
display: flex;
|
|
2859
2864
|
align-items: center;
|
|
2860
|
-
gap: var(--
|
|
2865
|
+
gap: var(--dds-spacing-x0-75);
|
|
2861
2866
|
}
|
|
2862
2867
|
.Table_sort-button {
|
|
2863
|
-
gap: var(--
|
|
2868
|
+
gap: var(--dds-spacing-x0-5);
|
|
2864
2869
|
-webkit-user-select: text;
|
|
2865
2870
|
-moz-user-select: text;
|
|
2866
2871
|
user-select: text;
|
|
@@ -2871,9 +2876,9 @@
|
|
|
2871
2876
|
}
|
|
2872
2877
|
}
|
|
2873
2878
|
.Table_collapse-button {
|
|
2874
|
-
height: var(--dds-
|
|
2875
|
-
width: var(--dds-
|
|
2876
|
-
border-radius: var(--
|
|
2879
|
+
height: var(--dds-icon-size-medium);
|
|
2880
|
+
width: var(--dds-icon-size-medium);
|
|
2881
|
+
border-radius: var(--dds-border-radius-1);
|
|
2877
2882
|
margin-left: auto;
|
|
2878
2883
|
margin-right: auto;
|
|
2879
2884
|
display: flex;
|
|
@@ -2883,7 +2888,7 @@
|
|
|
2883
2888
|
transition: all 0.2s;
|
|
2884
2889
|
}
|
|
2885
2890
|
&:hover {
|
|
2886
|
-
background-color: var(--dds-color-
|
|
2891
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
2887
2892
|
}
|
|
2888
2893
|
}
|
|
2889
2894
|
|
|
@@ -2895,7 +2900,7 @@
|
|
|
2895
2900
|
display: grid;
|
|
2896
2901
|
overflow-x: auto;
|
|
2897
2902
|
scroll-snap-type: x mandatory;
|
|
2898
|
-
border-bottom: 1px solid var(--dds-color-
|
|
2903
|
+
border-bottom: 1px solid var(--dds-color-border-subtle);
|
|
2899
2904
|
@media (prefers-reduced-motion: no-preference) {
|
|
2900
2905
|
scroll-behavior: smooth;
|
|
2901
2906
|
transition: var(--dds-focus-transition);
|
|
@@ -2921,36 +2926,39 @@
|
|
|
2921
2926
|
justify-content: center;
|
|
2922
2927
|
cursor: pointer;
|
|
2923
2928
|
border-bottom: 2px solid transparent;
|
|
2924
|
-
color: var(--dds-color-
|
|
2925
|
-
padding: var(--
|
|
2926
|
-
background: var(--dds-color-
|
|
2929
|
+
color: var(--dds-color-text-medium);
|
|
2930
|
+
padding: var(--dds-spacing-x0-5);
|
|
2931
|
+
background: var(--dds-color-surface-default);
|
|
2932
|
+
border-top-left-radius: var(--dds-border-radius-2);
|
|
2933
|
+
border-top-right-radius: var(--dds-border-radius-2);
|
|
2927
2934
|
@media (prefers-reduced-motion: no-preference) {
|
|
2928
2935
|
transition:
|
|
2929
2936
|
box-shadow 0.2s,
|
|
2930
2937
|
border-bottom 0.2s,
|
|
2931
2938
|
color 0.2s,
|
|
2939
|
+
background-color 0.2s,
|
|
2932
2940
|
var(--dds-focus-transition);
|
|
2933
2941
|
}
|
|
2934
2942
|
&:hover {
|
|
2935
|
-
color: var(--dds-color-
|
|
2936
|
-
|
|
2943
|
+
color: var(--dds-color-text-default);
|
|
2944
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
2937
2945
|
}
|
|
2938
2946
|
}
|
|
2939
2947
|
.Tabs_tab--row {
|
|
2940
2948
|
flex-direction: row;
|
|
2941
|
-
gap: var(--
|
|
2949
|
+
gap: var(--dds-spacing-x0-5);
|
|
2942
2950
|
}
|
|
2943
2951
|
.Tabs_tab--column {
|
|
2944
2952
|
flex-direction: column;
|
|
2945
|
-
gap: var(--
|
|
2953
|
+
gap: var(--dds-spacing-x0-25);
|
|
2946
2954
|
}
|
|
2947
2955
|
.Tabs_tab--active {
|
|
2948
|
-
color: var(--dds-color-
|
|
2949
|
-
|
|
2950
|
-
|
|
2956
|
+
color: var(--dds-color-text-default);
|
|
2957
|
+
border-color: var(--dds-color-surface-action-selected);
|
|
2958
|
+
box-shadow: inset 0px -2px 0px 0px var(--dds-color-surface-action-selected);
|
|
2951
2959
|
}
|
|
2952
2960
|
.Tabs_tab-panel {
|
|
2953
|
-
padding: var(--
|
|
2961
|
+
padding: var(--dds-spacing-x0-25);
|
|
2954
2962
|
}
|
|
2955
2963
|
.Tabs_tab-panel--inactive {
|
|
2956
2964
|
display: none;
|
|
@@ -2961,75 +2969,76 @@
|
|
|
2961
2969
|
border: 1px solid;
|
|
2962
2970
|
display: inline-flex;
|
|
2963
2971
|
align-items: center;
|
|
2964
|
-
border-radius: var(--
|
|
2965
|
-
padding: var(--
|
|
2972
|
+
border-radius: var(--dds-border-radius-1);
|
|
2973
|
+
padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
|
|
2966
2974
|
}
|
|
2967
2975
|
.Tag_container--with-icon {
|
|
2968
|
-
padding: var(--
|
|
2969
|
-
gap: var(--
|
|
2976
|
+
padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-5) var(--dds-spacing-x0-125) var(--dds-spacing-x0-25);
|
|
2977
|
+
gap: var(--dds-spacing-x0-25);
|
|
2970
2978
|
}
|
|
2971
2979
|
.Tag_container--default--default {
|
|
2972
|
-
background-color: var(--dds-color-
|
|
2973
|
-
border-color: var(--dds-color-
|
|
2980
|
+
background-color: var(--dds-color-surface-subtle);
|
|
2981
|
+
border-color: var(--dds-color-border-subtle);
|
|
2974
2982
|
}
|
|
2975
2983
|
.Tag_container--default--strong {
|
|
2976
|
-
background-color: var(--dds-color-
|
|
2977
|
-
border-color: var(--dds-color-
|
|
2984
|
+
background-color: var(--dds-color-surface-inverse-default);
|
|
2985
|
+
border-color: var(--dds-color-surface-inverse-default);
|
|
2986
|
+
color: var(--dds-color-text-on-inverse);
|
|
2978
2987
|
}
|
|
2979
2988
|
.Tag_container--success--default {
|
|
2980
|
-
background-color: var(--dds-color-success-
|
|
2981
|
-
border-color: var(--dds-color-success
|
|
2989
|
+
background-color: var(--dds-color-surface-success-default);
|
|
2990
|
+
border-color: var(--dds-color-border-success);
|
|
2982
2991
|
svg {
|
|
2983
|
-
color: var(--dds-color-success-
|
|
2992
|
+
color: var(--dds-color-icon-on-success-default);
|
|
2984
2993
|
}
|
|
2985
2994
|
}
|
|
2986
2995
|
.Tag_container--success--strong {
|
|
2987
|
-
background-color: var(--dds-color-success-
|
|
2988
|
-
border-color: var(--dds-color-success-
|
|
2996
|
+
background-color: var(--dds-color-surface-success-strong);
|
|
2997
|
+
border-color: var(--dds-color-surface-success-strong);
|
|
2989
2998
|
svg {
|
|
2990
|
-
color: var(--dds-color-
|
|
2999
|
+
color: var(--dds-color-icon-on-success-strong);
|
|
2991
3000
|
}
|
|
2992
3001
|
}
|
|
2993
3002
|
.Tag_container--danger--default {
|
|
2994
|
-
background-color: var(--dds-color-danger-
|
|
2995
|
-
border-color: var(--dds-color-danger
|
|
3003
|
+
background-color: var(--dds-color-surface-danger-default);
|
|
3004
|
+
border-color: var(--dds-color-border-danger);
|
|
2996
3005
|
svg {
|
|
2997
|
-
color: var(--dds-color-danger-
|
|
3006
|
+
color: var(--dds-color-icon-on-danger-default);
|
|
2998
3007
|
}
|
|
2999
3008
|
}
|
|
3000
3009
|
.Tag_container--danger--strong {
|
|
3001
|
-
background-color: var(--dds-color-danger-
|
|
3002
|
-
border-color: var(--dds-color-danger-
|
|
3010
|
+
background-color: var(--dds-color-surface-danger-strong);
|
|
3011
|
+
border-color: var(--dds-color-surface-danger-strong);
|
|
3003
3012
|
svg {
|
|
3004
|
-
color: var(--dds-color-
|
|
3013
|
+
color: var(--dds-color-icon-on-danger-strong);
|
|
3005
3014
|
}
|
|
3006
3015
|
}
|
|
3007
3016
|
.Tag_container--warning--default {
|
|
3008
|
-
background-color: var(--dds-color-warning-
|
|
3009
|
-
border-color: var(--dds-color-warning
|
|
3017
|
+
background-color: var(--dds-color-surface-warning-default);
|
|
3018
|
+
border-color: var(--dds-color-border-warning);
|
|
3010
3019
|
svg {
|
|
3011
|
-
color: var(--dds-color-warning-
|
|
3020
|
+
color: var(--dds-color-icon-on-warning-default);
|
|
3012
3021
|
}
|
|
3013
3022
|
}
|
|
3014
3023
|
.Tag_container--warning--strong {
|
|
3015
|
-
background-color: var(--dds-color-warning-
|
|
3024
|
+
background-color: var(--dds-color-surface-warning-strong);
|
|
3016
3025
|
border-color: var(--dds-color-warning-light);
|
|
3017
3026
|
svg {
|
|
3018
|
-
color: var(--dds-color-
|
|
3027
|
+
color: var(--dds-color-icon-on-warning-strong);
|
|
3019
3028
|
}
|
|
3020
3029
|
}
|
|
3021
3030
|
.Tag_container--info--default {
|
|
3022
|
-
background-color: var(--dds-color-info-
|
|
3023
|
-
border-color: var(--dds-color-info
|
|
3031
|
+
background-color: var(--dds-color-surface-info-default);
|
|
3032
|
+
border-color: var(--dds-color-border-info);
|
|
3024
3033
|
svg {
|
|
3025
|
-
color: var(--dds-color-info-
|
|
3034
|
+
color: var(--dds-color-icon-on-info-default);
|
|
3026
3035
|
}
|
|
3027
3036
|
}
|
|
3028
3037
|
.Tag_container--info--strong {
|
|
3029
|
-
background-color: var(--dds-color-info-
|
|
3030
|
-
border-color: var(--dds-color-info-
|
|
3038
|
+
background-color: var(--dds-color-surface-info-strong);
|
|
3039
|
+
border-color: var(--dds-color-surface-info-strong);
|
|
3031
3040
|
svg {
|
|
3032
|
-
color: var(--dds-color-
|
|
3041
|
+
color: var(--dds-color-icon-on-info-strong);
|
|
3033
3042
|
}
|
|
3034
3043
|
}
|
|
3035
3044
|
|
|
@@ -3047,31 +3056,31 @@
|
|
|
3047
3056
|
}
|
|
3048
3057
|
.TextInput_input {
|
|
3049
3058
|
&.TextInput_with-icon--medium {
|
|
3050
|
-
padding-left: calc(var(--
|
|
3059
|
+
padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
|
|
3051
3060
|
}
|
|
3052
3061
|
&.TextInput_with-icon--small {
|
|
3053
|
-
padding-left: calc(var(--
|
|
3062
|
+
padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-small) + var(--dds-spacing-x0-5));
|
|
3054
3063
|
}
|
|
3055
3064
|
&.TextInput_with-icon--tiny {
|
|
3056
|
-
padding-left: calc(var(--
|
|
3065
|
+
padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-25));
|
|
3057
3066
|
}
|
|
3058
3067
|
}
|
|
3059
3068
|
.TextInput_icon {
|
|
3060
3069
|
position: absolute;
|
|
3061
3070
|
z-index: 1;
|
|
3062
|
-
color: var(--dds-color-
|
|
3071
|
+
color: var(--dds-color-icon-default);
|
|
3063
3072
|
}
|
|
3064
3073
|
.TextInput_icon--medium {
|
|
3065
|
-
left: var(--
|
|
3066
|
-
top: calc(50% - (var(--dds-
|
|
3074
|
+
left: var(--dds-spacing-x0-75);
|
|
3075
|
+
top: calc(50% - (var(--dds-icon-size-medium) / 2));
|
|
3067
3076
|
}
|
|
3068
3077
|
.TextInput_icon--small {
|
|
3069
|
-
left: var(--
|
|
3070
|
-
top: calc(50% - (var(--dds-
|
|
3078
|
+
left: var(--dds-spacing-x0-75);
|
|
3079
|
+
top: calc(50% - (var(--dds-icon-size-small) / 2));
|
|
3071
3080
|
}
|
|
3072
3081
|
.TextInput_icon--tiny {
|
|
3073
|
-
left: var(--
|
|
3074
|
-
top: calc(50% - (var(--dds-
|
|
3082
|
+
left: var(--dds-spacing-x0-5);
|
|
3083
|
+
top: calc(50% - (var(--dds-icon-size-small) / 2));
|
|
3075
3084
|
}
|
|
3076
3085
|
.TextInput_affix {
|
|
3077
3086
|
position: absolute;
|
|
@@ -3086,13 +3095,13 @@
|
|
|
3086
3095
|
left: 0;
|
|
3087
3096
|
margin-left: 8px;
|
|
3088
3097
|
padding-right: 8px;
|
|
3089
|
-
border-right: 1px solid var(--dds-color-
|
|
3098
|
+
border-right: 1px solid var(--dds-color-border-default);
|
|
3090
3099
|
}
|
|
3091
3100
|
&.TextInput_suffix {
|
|
3092
3101
|
right: 0;
|
|
3093
3102
|
margin-right: 8px;
|
|
3094
3103
|
padding-left: 8px;
|
|
3095
|
-
border-left: 1px solid var(--dds-color-
|
|
3104
|
+
border-left: 1px solid var(--dds-color-border-default);
|
|
3096
3105
|
}
|
|
3097
3106
|
&.TextInput_prefix--readonly {
|
|
3098
3107
|
margin-left: 0;
|
|
@@ -3117,7 +3126,7 @@
|
|
|
3117
3126
|
.ToggleBar_container {
|
|
3118
3127
|
display: flex;
|
|
3119
3128
|
flex-direction: column;
|
|
3120
|
-
gap: var(--
|
|
3129
|
+
gap: var(--dds-spacing-x0-125);
|
|
3121
3130
|
}
|
|
3122
3131
|
.ToggleBar_bar {
|
|
3123
3132
|
display: grid;
|
|
@@ -3132,11 +3141,11 @@
|
|
|
3132
3141
|
height: 100%;
|
|
3133
3142
|
box-sizing: border-box;
|
|
3134
3143
|
cursor: pointer;
|
|
3135
|
-
background-color: var(--dds-color-
|
|
3136
|
-
border-right: 1px solid var(--dds-color-
|
|
3137
|
-
border-top: 1px solid var(--dds-color-
|
|
3138
|
-
border-bottom: 1px solid var(--dds-color-
|
|
3139
|
-
border-color: var(--dds-color-
|
|
3144
|
+
background-color: var(--dds-color-surface-default);
|
|
3145
|
+
border-right: 1px solid var(--dds-color-border-default);
|
|
3146
|
+
border-top: 1px solid var(--dds-color-border-default);
|
|
3147
|
+
border-bottom: 1px solid var(--dds-color-border-default);
|
|
3148
|
+
border-color: var(--dds-color-border-default);
|
|
3140
3149
|
@media (prefers-reduced-motion: no-preference) {
|
|
3141
3150
|
transition:
|
|
3142
3151
|
border-color 0.2s,
|
|
@@ -3147,64 +3156,62 @@
|
|
|
3147
3156
|
}
|
|
3148
3157
|
}
|
|
3149
3158
|
.ToggleBar_content--large--just-icon {
|
|
3150
|
-
padding: var(--
|
|
3159
|
+
padding: var(--dds-spacing-x1);
|
|
3151
3160
|
svg {
|
|
3152
3161
|
font-size: var(--dds-font-body-sans-04-line-height);
|
|
3153
3162
|
}
|
|
3154
3163
|
}
|
|
3155
3164
|
.ToggleBar_content--large--with-text {
|
|
3156
|
-
padding: var(--
|
|
3157
|
-
gap: var(--
|
|
3165
|
+
padding: var(--dds-spacing-x1) var(--dds-spacing-x2);
|
|
3166
|
+
gap: var(--dds-spacing-x1);
|
|
3158
3167
|
}
|
|
3159
3168
|
.ToggleBar_content--medium--just-icon {
|
|
3160
|
-
padding: var(--
|
|
3169
|
+
padding: var(--dds-spacing-x0-75);
|
|
3161
3170
|
svg {
|
|
3162
3171
|
font-size: var(--dds-font-body-sans-02-line-height);
|
|
3163
3172
|
}
|
|
3164
3173
|
}
|
|
3165
3174
|
.ToggleBar_content--medium--with-text {
|
|
3166
|
-
padding: var(--
|
|
3167
|
-
gap: var(--
|
|
3175
|
+
padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1-5);
|
|
3176
|
+
gap: var(--dds-spacing-x0-5);
|
|
3168
3177
|
}
|
|
3169
3178
|
.ToggleBar_content--small--just-icon {
|
|
3170
|
-
padding: var(--
|
|
3179
|
+
padding: var(--dds-spacing-x0-5);
|
|
3171
3180
|
svg {
|
|
3172
3181
|
font-size: var(--dds-font-body-sans-01-line-height);
|
|
3173
3182
|
}
|
|
3174
3183
|
}
|
|
3175
3184
|
.ToggleBar_content--small--with-text {
|
|
3176
|
-
padding: var(--
|
|
3177
|
-
gap: var(--
|
|
3185
|
+
padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
|
|
3186
|
+
gap: var(--dds-spacing-x0-5);
|
|
3178
3187
|
}
|
|
3179
3188
|
.ToggleBar_content--tiny--just-icon {
|
|
3180
|
-
padding: var(--
|
|
3189
|
+
padding: var(--dds-spacing-x0-25);
|
|
3181
3190
|
svg {
|
|
3182
3191
|
font-size: var(--dds-font-supporting-style-tiny-01-line-height);
|
|
3183
3192
|
}
|
|
3184
3193
|
}
|
|
3185
3194
|
.ToggleBar_content--tiny--with-text {
|
|
3186
|
-
padding: var(--
|
|
3187
|
-
gap: var(--
|
|
3195
|
+
padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
|
|
3196
|
+
gap: var(--dds-spacing-x0-5);
|
|
3188
3197
|
}
|
|
3189
3198
|
.ToggleBar_label {
|
|
3190
|
-
&:hover {
|
|
3191
|
-
color: var(--dds-color-
|
|
3192
|
-
border-color: var(--dds-color-interactive-dark);
|
|
3199
|
+
&:hover .ToggleBar_content {
|
|
3200
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
3193
3201
|
}
|
|
3194
3202
|
&:first-child .ToggleBar_content {
|
|
3195
|
-
border-left: 1px solid var(--dds-color-
|
|
3196
|
-
border-top-left-radius: var(--
|
|
3197
|
-
border-bottom-left-radius: var(--
|
|
3203
|
+
border-left: 1px solid var(--dds-color-border-default);
|
|
3204
|
+
border-top-left-radius: var(--dds-border-radius-1);
|
|
3205
|
+
border-bottom-left-radius: var(--dds-border-radius-1);
|
|
3198
3206
|
}
|
|
3199
3207
|
&:last-child .ToggleBar_content {
|
|
3200
|
-
border-top-right-radius: var(--
|
|
3201
|
-
border-bottom-right-radius: var(--
|
|
3208
|
+
border-top-right-radius: var(--dds-border-radius-1);
|
|
3209
|
+
border-bottom-right-radius: var(--dds-border-radius-1);
|
|
3202
3210
|
}
|
|
3203
3211
|
input:checked + .ToggleBar_content {
|
|
3204
|
-
color: var(--dds-color-
|
|
3205
|
-
border-color: var(--dds-color-
|
|
3206
|
-
background-color: var(--dds-color-
|
|
3207
|
-
box-shadow: inset 0 0 0 1px var(--dds-color-interactive-darker);
|
|
3212
|
+
color: var(--dds-color-text-on-action);
|
|
3213
|
+
border-color: var(--dds-color-surface-action-selected);
|
|
3214
|
+
background-color: var(--dds-color-surface-action-selected);
|
|
3208
3215
|
position: relative;
|
|
3209
3216
|
z-index: 0;
|
|
3210
3217
|
}
|
|
@@ -3218,12 +3225,12 @@
|
|
|
3218
3225
|
.ToggleButton_group-container {
|
|
3219
3226
|
display: flex;
|
|
3220
3227
|
flex-direction: column;
|
|
3221
|
-
gap: var(--
|
|
3228
|
+
gap: var(--dds-spacing-x0-5);
|
|
3222
3229
|
}
|
|
3223
3230
|
.ToggleButton_group {
|
|
3224
3231
|
display: flex;
|
|
3225
3232
|
flex-wrap: wrap;
|
|
3226
|
-
gap: var(--
|
|
3233
|
+
gap: var(--dds-spacing-x0-75);
|
|
3227
3234
|
}
|
|
3228
3235
|
.ToggleButton_group--row {
|
|
3229
3236
|
flex-direction: row;
|
|
@@ -3246,31 +3253,28 @@
|
|
|
3246
3253
|
width: fit-content;
|
|
3247
3254
|
border: 1px solid;
|
|
3248
3255
|
border-radius: 100px;
|
|
3249
|
-
gap: var(--
|
|
3250
|
-
padding: var(--
|
|
3251
|
-
background-color: var(--dds-color-
|
|
3252
|
-
color: var(--dds-color-
|
|
3256
|
+
gap: var(--dds-spacing-x0-5);
|
|
3257
|
+
padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
|
|
3258
|
+
background-color: var(--dds-color-surface-default);
|
|
3259
|
+
color: var(--dds-color-text-default);
|
|
3253
3260
|
@media (prefers-reduced-motion: no-preference) {
|
|
3254
3261
|
transition:
|
|
3255
3262
|
border-color 0.2s,
|
|
3256
3263
|
background-color 0.2s,
|
|
3257
|
-
box-shadow 0.2s,
|
|
3258
3264
|
var(--dds-focus-transition);
|
|
3259
3265
|
}
|
|
3260
3266
|
&:hover {
|
|
3261
|
-
border-color: var(--dds-color-
|
|
3262
|
-
|
|
3263
|
-
background-color: var(--dds-color-interactive-lightest);
|
|
3267
|
+
border-color: var(--dds-color-border-action-hover);
|
|
3268
|
+
background-color: var(--dds-color-surface-hover-default);
|
|
3264
3269
|
}
|
|
3265
3270
|
}
|
|
3266
3271
|
input:checked + .ToggleButton_content {
|
|
3267
|
-
color: var(--dds-color-
|
|
3268
|
-
background-color: var(--dds-color-
|
|
3269
|
-
border-color: var(--dds-color-
|
|
3272
|
+
color: var(--dds-color-text-on-action);
|
|
3273
|
+
background-color: var(--dds-color-surface-action-resting);
|
|
3274
|
+
border-color: var(--dds-color-surface-action-resting);
|
|
3270
3275
|
}
|
|
3271
3276
|
input:checked + .ToggleButton_content:hover {
|
|
3272
|
-
background-color: var(--dds-color-
|
|
3273
|
-
border-color: var(--dds-color-
|
|
3274
|
-
box-shadow: inset 0 0 0 1px var(--dds-color-interactive-dark);
|
|
3277
|
+
background-color: var(--dds-color-surface-action-hover);
|
|
3278
|
+
border-color: var(--dds-color-surface-action-hover);
|
|
3275
3279
|
}
|
|
3276
3280
|
/*# sourceMappingURL=index.css.map */
|