nve-designsystem 3.4.1 → 3.5.0
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/css/nve.css +42 -17
- package/css/nve_dark.css +47 -22
- package/css/rme.css +42 -17
- package/css/rme_dark.css +47 -22
- package/css/varsom.css +42 -17
- package/css/varsom_dark.css +47 -22
- package/custom-elements.json +478 -478
- package/package.json +1 -1
- package/vscode.css-custom-data.json +4 -4
- package/vscode.html-custom-data.json +49 -49
package/css/nve.css
CHANGED
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
--color-shades-functional-orange-850: #b34d09;
|
|
113
113
|
--color-shades-functional-orange-900: #a2420c;
|
|
114
114
|
--color-shades-functional-orange-950: #933d0b;
|
|
115
|
-
--color-shades-functional-orange-999: #
|
|
115
|
+
--color-shades-functional-orange-999: #5f2707;
|
|
116
116
|
--color-shades-functional-orange-000: #fff8f0;
|
|
117
117
|
--color-shades-functional-orange-050: #ffecd6;
|
|
118
118
|
--color-shades-functional-yellow-100: #fff4d1;
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
--color-shades-functional-yellow-850: #be9315;
|
|
128
128
|
--color-shades-functional-yellow-900: #b58a0e;
|
|
129
129
|
--color-shades-functional-yellow-950: #ab8207;
|
|
130
|
-
--color-shades-functional-yellow-999: #
|
|
130
|
+
--color-shades-functional-yellow-999: #856300;
|
|
131
131
|
--color-shades-functional-yellow-000: #fff9e9;
|
|
132
132
|
--color-shades-functional-yellow-050: #fff5d9;
|
|
133
133
|
--color-shades-functional-green-100: #e8fce8;
|
|
@@ -223,12 +223,12 @@
|
|
|
223
223
|
--opacity-disabled: 0.38;
|
|
224
224
|
--font-family-source-sans-pro: 'Source Sans Pro';
|
|
225
225
|
--line-height-0: 1.15;
|
|
226
|
-
--line-height-1: 1.
|
|
226
|
+
--line-height-1: 1.20;
|
|
227
227
|
--line-height-2: 1.25;
|
|
228
|
-
--line-height-3: 1.
|
|
229
|
-
--line-height-4: 1.
|
|
230
|
-
--line-height-5: 1.
|
|
231
|
-
--line-height-6: 1.
|
|
228
|
+
--line-height-3: 1.30;
|
|
229
|
+
--line-height-4: 1.40;
|
|
230
|
+
--line-height-5: 1.50;
|
|
231
|
+
--line-height-6: 1.10;
|
|
232
232
|
--text-case-capitalize: capitalize;
|
|
233
233
|
--text-case-none: none;
|
|
234
234
|
--text-case-uppercase: uppercase;
|
|
@@ -308,36 +308,61 @@
|
|
|
308
308
|
--color-interactive-danger-foreground-hover: var(--color-shades-grey-000);
|
|
309
309
|
--color-interactive-danger-foreground-disabled: var(--color-shades-grey-000);
|
|
310
310
|
--color-interactive-danger-border-focus: var(--color-shades-functional-blue-500);
|
|
311
|
+
--color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */
|
|
311
312
|
--color-feedback-background-default-info: var(--color-shades-functional-blue-100);
|
|
312
313
|
--color-feedback-background-default-error: var(--color-shades-functional-red-050);
|
|
313
314
|
--color-feedback-background-default-warning: var(--color-shades-functional-yellow-200);
|
|
314
315
|
--color-feedback-background-default-success: var(--color-shades-functional-green-150);
|
|
315
|
-
--color-feedback-background-
|
|
316
|
+
--color-feedback-background-subtle-neutral: var(--color-shades-functional-neutralgrey-050);
|
|
316
317
|
--color-feedback-background-subtle-info: var(--color-shades-functional-blue-000);
|
|
317
318
|
--color-feedback-background-subtle-error: var(--color-shades-functional-red-000);
|
|
318
319
|
--color-feedback-background-subtle-warning: var(--color-shades-functional-yellow-100);
|
|
319
320
|
--color-feedback-background-subtle-success: var(--color-shades-functional-green-100);
|
|
320
|
-
--color-feedback-background-
|
|
321
|
+
--color-feedback-background-emphasized-neutral: var(--color-shades-functional-neutralgrey-800);
|
|
321
322
|
--color-feedback-background-emphasized-info: var(--color-shades-functional-blue-700);
|
|
322
323
|
--color-feedback-background-emphasized-error: var(--color-shades-functional-red-700);
|
|
323
324
|
--color-feedback-background-emphasized-warning: var(--color-shades-functional-yellow-500);
|
|
324
325
|
--color-feedback-background-emphasized-success: var(--color-shades-functional-green-800);
|
|
325
|
-
--color-feedback-
|
|
326
|
+
--color-feedback-foreground-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
327
|
+
--color-feedback-foreground-info: var(--color-shades-functional-blue-800);
|
|
328
|
+
--color-feedback-foreground-error: var(--color-shades-functional-red-700);
|
|
329
|
+
--color-feedback-foreground-warning: var(--color-shades-functional-orange-999);
|
|
330
|
+
--color-feedback-foreground-success: var(--color-shades-functional-green-900);
|
|
331
|
+
--color-feedback-foreground-on-bg-subtle-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
332
|
+
--color-feedback-foreground-on-bg-subtle-info: var(--color-shades-functional-blue-999);
|
|
333
|
+
--color-feedback-foreground-on-bg-subtle-error: var(--color-shades-functional-red-950);
|
|
334
|
+
--color-feedback-foreground-on-bg-subtle-warning: var(--color-shades-functional-orange-999);
|
|
335
|
+
--color-feedback-foreground-on-bg-subtle-success: var(--color-shades-functional-green-999);
|
|
336
|
+
--color-feedback-foreground-on-bg-emphasized-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
337
|
+
--color-feedback-foreground-on-bg-emphasized-info: var(--color-shades-functional-neutralgrey-000);
|
|
338
|
+
--color-feedback-foreground-on-bg-emphasized-error: var(--color-shades-functional-neutralgrey-000);
|
|
339
|
+
--color-feedback-foreground-on-bg-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
|
|
340
|
+
--color-feedback-foreground-on-bg-emphasized-success: var(--color-shades-functional-neutralgrey-000);
|
|
341
|
+
--color-feedback-foreground-default-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
326
342
|
--color-feedback-foreground-default-info: var(--color-shades-functional-neutralgrey-999);
|
|
327
343
|
--color-feedback-foreground-default-error: var(--color-shades-functional-neutralgrey-999);
|
|
328
344
|
--color-feedback-foreground-default-warning: var(--color-shades-functional-neutralgrey-999);
|
|
329
345
|
--color-feedback-foreground-default-success: var(--color-shades-functional-neutralgrey-999);
|
|
330
|
-
--color-feedback-foreground-
|
|
346
|
+
--color-feedback-foreground-subtle-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
331
347
|
--color-feedback-foreground-subtle-info: var(--color-shades-functional-neutralgrey-999);
|
|
332
348
|
--color-feedback-foreground-subtle-error: var(--color-shades-functional-neutralgrey-999);
|
|
333
349
|
--color-feedback-foreground-subtle-warning: var(--color-shades-functional-neutralgrey-999);
|
|
334
350
|
--color-feedback-foreground-subtle-success: var(--color-shades-functional-neutralgrey-999);
|
|
335
|
-
--color-feedback-foreground-
|
|
351
|
+
--color-feedback-foreground-emphasized-neutral: var(--color-shades-grey-000);
|
|
336
352
|
--color-feedback-foreground-emphasized-info: var(--color-shades-grey-000);
|
|
337
353
|
--color-feedback-foreground-emphasized-error: var(--color-shades-grey-000);
|
|
338
354
|
--color-feedback-foreground-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
|
|
339
355
|
--color-feedback-foreground-emphasized-success: var(--color-shades-grey-000);
|
|
340
|
-
--color-feedback-
|
|
356
|
+
--color-feedback-border-subtle-neutral: var(--color-shades-functional-neutralgrey-200);
|
|
357
|
+
--color-feedback-border-subtle-info: var(--color-shades-functional-blue-200);
|
|
358
|
+
--color-feedback-border-subtle-error: var(--color-shades-functional-red-200);
|
|
359
|
+
--color-feedback-border-subtle-warning: var(--color-shades-functional-yellow-700);
|
|
360
|
+
--color-feedback-border-subtle-success: var(--color-shades-functional-green-600);
|
|
361
|
+
--color-feedback-border-emphasized-neutral: var(--color-shades-functional-neutralgrey-600);
|
|
362
|
+
--color-feedback-border-emphasized-info: var(--color-shades-functional-blue-800);
|
|
363
|
+
--color-feedback-border-emphasized-error: var(--color-shades-functional-red-800);
|
|
364
|
+
--color-feedback-border-emphasized-warning: var(--color-shades-functional-yellow-900);
|
|
365
|
+
--color-feedback-border-emphasized-success: var(--color-shades-functional-green-800);
|
|
341
366
|
--color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
|
|
342
367
|
--color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
|
|
343
368
|
--color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
|
|
@@ -590,8 +615,8 @@
|
|
|
590
615
|
--typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
591
616
|
--typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
592
617
|
--typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
593
|
-
--typography-body-compact-large-compact: var(--font-weight-regular) var(--line-height-1)
|
|
594
|
-
--typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--line-height-1)
|
|
618
|
+
--typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
619
|
+
--typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
595
620
|
--typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
596
621
|
--typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
597
622
|
--typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
@@ -603,8 +628,8 @@
|
|
|
603
628
|
--typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
604
629
|
--typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
605
630
|
--typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
606
|
-
--typography-label-medium: var(--font-weight-semibold) var(--line-height-6)
|
|
607
|
-
--typography-label-medium-light: var(--font-weight-regular) var(--line-height-6)
|
|
631
|
+
--typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
632
|
+
--typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
608
633
|
--typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
609
634
|
--typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
610
635
|
--font-size-2x-small: var(--dimension-3-5x); /** 12 px */
|
package/css/nve_dark.css
CHANGED
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
--color-shades-functional-orange-850: #b34d09;
|
|
113
113
|
--color-shades-functional-orange-900: #a2420c;
|
|
114
114
|
--color-shades-functional-orange-950: #933d0b;
|
|
115
|
-
--color-shades-functional-orange-999: #
|
|
115
|
+
--color-shades-functional-orange-999: #5f2707;
|
|
116
116
|
--color-shades-functional-orange-000: #fff8f0;
|
|
117
117
|
--color-shades-functional-orange-050: #ffecd6;
|
|
118
118
|
--color-shades-functional-yellow-100: #fff4d1;
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
--color-shades-functional-yellow-850: #be9315;
|
|
128
128
|
--color-shades-functional-yellow-900: #b58a0e;
|
|
129
129
|
--color-shades-functional-yellow-950: #ab8207;
|
|
130
|
-
--color-shades-functional-yellow-999: #
|
|
130
|
+
--color-shades-functional-yellow-999: #856300;
|
|
131
131
|
--color-shades-functional-yellow-000: #fff9e9;
|
|
132
132
|
--color-shades-functional-yellow-050: #fff5d9;
|
|
133
133
|
--color-shades-functional-green-100: #e8fce8;
|
|
@@ -223,12 +223,12 @@
|
|
|
223
223
|
--opacity-disabled: 0.38;
|
|
224
224
|
--font-family-source-sans-pro: 'Source Sans Pro';
|
|
225
225
|
--line-height-0: 1.15;
|
|
226
|
-
--line-height-1: 1.
|
|
226
|
+
--line-height-1: 1.20;
|
|
227
227
|
--line-height-2: 1.25;
|
|
228
|
-
--line-height-3: 1.
|
|
229
|
-
--line-height-4: 1.
|
|
230
|
-
--line-height-5: 1.
|
|
231
|
-
--line-height-6: 1.
|
|
228
|
+
--line-height-3: 1.30;
|
|
229
|
+
--line-height-4: 1.40;
|
|
230
|
+
--line-height-5: 1.50;
|
|
231
|
+
--line-height-6: 1.10;
|
|
232
232
|
--text-case-capitalize: capitalize;
|
|
233
233
|
--text-case-none: none;
|
|
234
234
|
--text-case-uppercase: uppercase;
|
|
@@ -288,7 +288,7 @@
|
|
|
288
288
|
--color-interactive-outlined-foreground-default: var(--color-shades-grey-000);
|
|
289
289
|
--color-interactive-outlined-foreground-hover: var(--color-shades-grey-000);
|
|
290
290
|
--color-interactive-outlined-foreground-disabled: var(--color-shades-grey-000);
|
|
291
|
-
--color-interactive-outlined-border-default: var(--color-shades-grey-
|
|
291
|
+
--color-interactive-outlined-border-default: var(--color-shades-grey-500);
|
|
292
292
|
--color-interactive-outlined-border-hover: var(--color-shades-grey-000);
|
|
293
293
|
--color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500);
|
|
294
294
|
--color-interactive-outlined-border-disabled: var(--color-shades-grey-600);
|
|
@@ -308,36 +308,61 @@
|
|
|
308
308
|
--color-interactive-danger-foreground-hover: var(--color-shades-grey-950);
|
|
309
309
|
--color-interactive-danger-foreground-disabled: var(--color-shades-grey-950);
|
|
310
310
|
--color-interactive-danger-border-focus: var(--color-shades-functional-blue-500);
|
|
311
|
-
--color-feedback-background-default-info: var(--color-shades-functional-blue-950);
|
|
312
|
-
--color-feedback-background-default-error: var(--color-shades-functional-red-950);
|
|
313
|
-
--color-feedback-background-default-warning: var(--color-shades-functional-yellow-950);
|
|
314
|
-
--color-feedback-background-default-success: var(--color-shades-functional-green-950);
|
|
315
311
|
--color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800);
|
|
312
|
+
--color-feedback-background-default-info: var(--color-shades-functional-blue-950);
|
|
313
|
+
--color-feedback-background-default-error: var(--color-shades-functional-red-850);
|
|
314
|
+
--color-feedback-background-default-warning: var(--color-shades-functional-yellow-999);
|
|
315
|
+
--color-feedback-background-default-success: var(--color-shades-functional-green-900);
|
|
316
|
+
--color-feedback-background-subtle-neutral: var(--color-shades-functional-neutralgrey-850);
|
|
316
317
|
--color-feedback-background-subtle-info: var(--color-shades-functional-blue-999);
|
|
317
|
-
--color-feedback-background-subtle-error: var(--color-shades-functional-red-
|
|
318
|
+
--color-feedback-background-subtle-error: var(--color-shades-functional-red-950);
|
|
318
319
|
--color-feedback-background-subtle-warning: var(--color-shades-functional-yellow-999);
|
|
319
|
-
--color-feedback-background-subtle-success: var(--color-shades-functional-green-
|
|
320
|
-
--color-feedback-background-subtle-neutral: var(--color-shades-functional-neutralgrey-850);
|
|
321
|
-
--color-feedback-background-emphasized-info: var(--color-shades-functional-blue-700);
|
|
322
|
-
--color-feedback-background-emphasized-error: var(--color-shades-functional-red-700);
|
|
323
|
-
--color-feedback-background-emphasized-warning: var(--color-shades-functional-yellow-500);
|
|
324
|
-
--color-feedback-background-emphasized-success: var(--color-shades-functional-green-800);
|
|
320
|
+
--color-feedback-background-subtle-success: var(--color-shades-functional-green-900);
|
|
325
321
|
--color-feedback-background-emphasized-neutral: var(--color-shades-functional-neutralgrey-150);
|
|
322
|
+
--color-feedback-background-emphasized-info: var(--color-shades-functional-blue-800);
|
|
323
|
+
--color-feedback-background-emphasized-error: var(--color-shades-functional-red-700);
|
|
324
|
+
--color-feedback-background-emphasized-warning: var(--color-shades-functional-yellow-600);
|
|
325
|
+
--color-feedback-background-emphasized-success: var(--color-shades-functional-green-900);
|
|
326
|
+
--color-feedback-foreground-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
327
|
+
--color-feedback-foreground-info: var(--color-shades-functional-blue-300);
|
|
328
|
+
--color-feedback-foreground-error: var(--color-shades-functional-red-300);
|
|
329
|
+
--color-feedback-foreground-warning: var(--color-shades-functional-orange-300);
|
|
330
|
+
--color-feedback-foreground-success: var(--color-shades-functional-green-300);
|
|
331
|
+
--color-feedback-foreground-on-bg-subtle-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
332
|
+
--color-feedback-foreground-on-bg-subtle-info: var(--color-shades-functional-blue-050);
|
|
333
|
+
--color-feedback-foreground-on-bg-subtle-error: var(--color-shades-functional-red-050);
|
|
334
|
+
--color-feedback-foreground-on-bg-subtle-warning: var(--color-shades-functional-orange-050);
|
|
335
|
+
--color-feedback-foreground-on-bg-subtle-success: var(--color-shades-functional-green-050);
|
|
336
|
+
--color-feedback-foreground-on-bg-emphasized-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
337
|
+
--color-feedback-foreground-on-bg-emphasized-info: var(--color-shades-functional-neutralgrey-000);
|
|
338
|
+
--color-feedback-foreground-on-bg-emphasized-error: var(--color-shades-functional-neutralgrey-000);
|
|
339
|
+
--color-feedback-foreground-on-bg-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
|
|
340
|
+
--color-feedback-foreground-on-bg-emphasized-success: var(--color-shades-functional-neutralgrey-000);
|
|
341
|
+
--color-feedback-foreground-default-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
326
342
|
--color-feedback-foreground-default-info: var(--color-shades-functional-neutralgrey-000);
|
|
327
343
|
--color-feedback-foreground-default-error: var(--color-shades-functional-neutralgrey-000);
|
|
328
344
|
--color-feedback-foreground-default-warning: var(--color-shades-functional-neutralgrey-000);
|
|
329
345
|
--color-feedback-foreground-default-success: var(--color-shades-functional-neutralgrey-000);
|
|
330
|
-
--color-feedback-foreground-
|
|
346
|
+
--color-feedback-foreground-subtle-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
331
347
|
--color-feedback-foreground-subtle-info: var(--color-shades-functional-neutralgrey-000);
|
|
332
348
|
--color-feedback-foreground-subtle-error: var(--color-shades-functional-neutralgrey-000);
|
|
333
349
|
--color-feedback-foreground-subtle-warning: var(--color-shades-functional-neutralgrey-000);
|
|
334
350
|
--color-feedback-foreground-subtle-success: var(--color-shades-functional-neutralgrey-000);
|
|
335
|
-
--color-feedback-foreground-
|
|
351
|
+
--color-feedback-foreground-emphasized-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
336
352
|
--color-feedback-foreground-emphasized-info: var(--color-shades-functional-neutralgrey-000);
|
|
337
353
|
--color-feedback-foreground-emphasized-error: var(--color-shades-functional-neutralgrey-000);
|
|
338
354
|
--color-feedback-foreground-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
|
|
339
355
|
--color-feedback-foreground-emphasized-success: var(--color-shades-functional-neutralgrey-000);
|
|
340
|
-
--color-feedback-
|
|
356
|
+
--color-feedback-border-subtle-neutral: var(--color-shades-functional-neutralgrey-400);
|
|
357
|
+
--color-feedback-border-subtle-info: var(--color-shades-functional-blue-500);
|
|
358
|
+
--color-feedback-border-subtle-error: var(--color-shades-functional-red-500);
|
|
359
|
+
--color-feedback-border-subtle-warning: var(--color-shades-functional-yellow-300);
|
|
360
|
+
--color-feedback-border-subtle-success: var(--color-shades-functional-green-800);
|
|
361
|
+
--color-feedback-border-emphasized-neutral: var(--color-shades-functional-neutralgrey-600);
|
|
362
|
+
--color-feedback-border-emphasized-info: var(--color-shades-functional-blue-700);
|
|
363
|
+
--color-feedback-border-emphasized-error: var(--color-shades-functional-red-300);
|
|
364
|
+
--color-feedback-border-emphasized-warning: var(--color-shades-functional-yellow-700);
|
|
365
|
+
--color-feedback-border-emphasized-success: var(--color-shades-functional-green-800);
|
|
341
366
|
--color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
|
|
342
367
|
--color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
|
|
343
368
|
--color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
|
package/css/rme.css
CHANGED
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
--color-shades-functional-orange-850: #b34d09;
|
|
113
113
|
--color-shades-functional-orange-900: #a2420c;
|
|
114
114
|
--color-shades-functional-orange-950: #933d0b;
|
|
115
|
-
--color-shades-functional-orange-999: #
|
|
115
|
+
--color-shades-functional-orange-999: #5f2707;
|
|
116
116
|
--color-shades-functional-orange-000: #fff8f0;
|
|
117
117
|
--color-shades-functional-orange-050: #ffecd6;
|
|
118
118
|
--color-shades-functional-yellow-100: #fff4d1;
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
--color-shades-functional-yellow-850: #be9315;
|
|
128
128
|
--color-shades-functional-yellow-900: #b58a0e;
|
|
129
129
|
--color-shades-functional-yellow-950: #ab8207;
|
|
130
|
-
--color-shades-functional-yellow-999: #
|
|
130
|
+
--color-shades-functional-yellow-999: #856300;
|
|
131
131
|
--color-shades-functional-yellow-000: #fff9e9;
|
|
132
132
|
--color-shades-functional-yellow-050: #fff5d9;
|
|
133
133
|
--color-shades-functional-green-100: #e8fce8;
|
|
@@ -223,12 +223,12 @@
|
|
|
223
223
|
--opacity-disabled: 0.38;
|
|
224
224
|
--font-family-source-sans-pro: 'Source Sans Pro';
|
|
225
225
|
--line-height-0: 1.15;
|
|
226
|
-
--line-height-1: 1.
|
|
226
|
+
--line-height-1: 1.20;
|
|
227
227
|
--line-height-2: 1.25;
|
|
228
|
-
--line-height-3: 1.
|
|
229
|
-
--line-height-4: 1.
|
|
230
|
-
--line-height-5: 1.
|
|
231
|
-
--line-height-6: 1.
|
|
228
|
+
--line-height-3: 1.30;
|
|
229
|
+
--line-height-4: 1.40;
|
|
230
|
+
--line-height-5: 1.50;
|
|
231
|
+
--line-height-6: 1.10;
|
|
232
232
|
--text-case-capitalize: capitalize;
|
|
233
233
|
--text-case-none: none;
|
|
234
234
|
--text-case-uppercase: uppercase;
|
|
@@ -308,36 +308,61 @@
|
|
|
308
308
|
--color-interactive-danger-foreground-hover: var(--color-shades-grey-000);
|
|
309
309
|
--color-interactive-danger-foreground-disabled: var(--color-shades-grey-000);
|
|
310
310
|
--color-interactive-danger-border-focus: var(--color-shades-functional-blue-500);
|
|
311
|
+
--color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */
|
|
311
312
|
--color-feedback-background-default-info: var(--color-shades-functional-blue-100);
|
|
312
313
|
--color-feedback-background-default-error: var(--color-shades-functional-red-050);
|
|
313
314
|
--color-feedback-background-default-warning: var(--color-shades-functional-yellow-200);
|
|
314
315
|
--color-feedback-background-default-success: var(--color-shades-functional-green-150);
|
|
315
|
-
--color-feedback-background-
|
|
316
|
+
--color-feedback-background-subtle-neutral: var(--color-shades-functional-neutralgrey-050);
|
|
316
317
|
--color-feedback-background-subtle-info: var(--color-shades-functional-blue-000);
|
|
317
318
|
--color-feedback-background-subtle-error: var(--color-shades-functional-red-000);
|
|
318
319
|
--color-feedback-background-subtle-warning: var(--color-shades-functional-yellow-100);
|
|
319
320
|
--color-feedback-background-subtle-success: var(--color-shades-functional-green-100);
|
|
320
|
-
--color-feedback-background-
|
|
321
|
+
--color-feedback-background-emphasized-neutral: var(--color-shades-functional-neutralgrey-800);
|
|
321
322
|
--color-feedback-background-emphasized-info: var(--color-shades-functional-blue-700);
|
|
322
323
|
--color-feedback-background-emphasized-error: var(--color-shades-functional-red-700);
|
|
323
324
|
--color-feedback-background-emphasized-warning: var(--color-shades-functional-yellow-500);
|
|
324
325
|
--color-feedback-background-emphasized-success: var(--color-shades-functional-green-800);
|
|
325
|
-
--color-feedback-
|
|
326
|
+
--color-feedback-foreground-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
327
|
+
--color-feedback-foreground-info: var(--color-shades-functional-blue-800);
|
|
328
|
+
--color-feedback-foreground-error: var(--color-shades-functional-red-700);
|
|
329
|
+
--color-feedback-foreground-warning: var(--color-shades-functional-orange-999);
|
|
330
|
+
--color-feedback-foreground-success: var(--color-shades-functional-green-900);
|
|
331
|
+
--color-feedback-foreground-on-bg-subtle-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
332
|
+
--color-feedback-foreground-on-bg-subtle-info: var(--color-shades-functional-blue-999);
|
|
333
|
+
--color-feedback-foreground-on-bg-subtle-error: var(--color-shades-functional-red-950);
|
|
334
|
+
--color-feedback-foreground-on-bg-subtle-warning: var(--color-shades-functional-orange-999);
|
|
335
|
+
--color-feedback-foreground-on-bg-subtle-success: var(--color-shades-functional-green-999);
|
|
336
|
+
--color-feedback-foreground-on-bg-emphasized-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
337
|
+
--color-feedback-foreground-on-bg-emphasized-info: var(--color-shades-functional-neutralgrey-000);
|
|
338
|
+
--color-feedback-foreground-on-bg-emphasized-error: var(--color-shades-functional-neutralgrey-000);
|
|
339
|
+
--color-feedback-foreground-on-bg-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
|
|
340
|
+
--color-feedback-foreground-on-bg-emphasized-success: var(--color-shades-functional-neutralgrey-000);
|
|
341
|
+
--color-feedback-foreground-default-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
326
342
|
--color-feedback-foreground-default-info: var(--color-shades-functional-neutralgrey-999);
|
|
327
343
|
--color-feedback-foreground-default-error: var(--color-shades-functional-neutralgrey-999);
|
|
328
344
|
--color-feedback-foreground-default-warning: var(--color-shades-functional-neutralgrey-999);
|
|
329
345
|
--color-feedback-foreground-default-success: var(--color-shades-functional-neutralgrey-999);
|
|
330
|
-
--color-feedback-foreground-
|
|
346
|
+
--color-feedback-foreground-subtle-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
331
347
|
--color-feedback-foreground-subtle-info: var(--color-shades-functional-neutralgrey-999);
|
|
332
348
|
--color-feedback-foreground-subtle-error: var(--color-shades-functional-neutralgrey-999);
|
|
333
349
|
--color-feedback-foreground-subtle-warning: var(--color-shades-functional-neutralgrey-999);
|
|
334
350
|
--color-feedback-foreground-subtle-success: var(--color-shades-functional-neutralgrey-999);
|
|
335
|
-
--color-feedback-foreground-
|
|
351
|
+
--color-feedback-foreground-emphasized-neutral: var(--color-shades-grey-000);
|
|
336
352
|
--color-feedback-foreground-emphasized-info: var(--color-shades-grey-000);
|
|
337
353
|
--color-feedback-foreground-emphasized-error: var(--color-shades-grey-000);
|
|
338
354
|
--color-feedback-foreground-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
|
|
339
355
|
--color-feedback-foreground-emphasized-success: var(--color-shades-grey-000);
|
|
340
|
-
--color-feedback-
|
|
356
|
+
--color-feedback-border-subtle-neutral: var(--color-shades-functional-neutralgrey-200);
|
|
357
|
+
--color-feedback-border-subtle-info: var(--color-shades-functional-blue-200);
|
|
358
|
+
--color-feedback-border-subtle-error: var(--color-shades-functional-red-200);
|
|
359
|
+
--color-feedback-border-subtle-warning: var(--color-shades-functional-yellow-700);
|
|
360
|
+
--color-feedback-border-subtle-success: var(--color-shades-functional-green-600);
|
|
361
|
+
--color-feedback-border-emphasized-neutral: var(--color-shades-functional-neutralgrey-600);
|
|
362
|
+
--color-feedback-border-emphasized-info: var(--color-shades-functional-blue-800);
|
|
363
|
+
--color-feedback-border-emphasized-error: var(--color-shades-functional-red-800);
|
|
364
|
+
--color-feedback-border-emphasized-warning: var(--color-shades-functional-yellow-900);
|
|
365
|
+
--color-feedback-border-emphasized-success: var(--color-shades-functional-green-800);
|
|
341
366
|
--color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
|
|
342
367
|
--color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
|
|
343
368
|
--color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
|
|
@@ -590,8 +615,8 @@
|
|
|
590
615
|
--typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
591
616
|
--typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
592
617
|
--typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
593
|
-
--typography-body-compact-large-compact: var(--font-weight-regular) var(--line-height-1)
|
|
594
|
-
--typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--line-height-1)
|
|
618
|
+
--typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
619
|
+
--typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
595
620
|
--typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
596
621
|
--typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
597
622
|
--typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
@@ -603,8 +628,8 @@
|
|
|
603
628
|
--typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
604
629
|
--typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
605
630
|
--typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
606
|
-
--typography-label-medium: var(--font-weight-semibold) var(--line-height-6)
|
|
607
|
-
--typography-label-medium-light: var(--font-weight-regular) var(--line-height-6)
|
|
631
|
+
--typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
632
|
+
--typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
608
633
|
--typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
609
634
|
--typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
610
635
|
--font-size-2x-small: var(--dimension-3-5x); /** 12 px */
|
package/css/rme_dark.css
CHANGED
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
--color-shades-functional-orange-850: #b34d09;
|
|
113
113
|
--color-shades-functional-orange-900: #a2420c;
|
|
114
114
|
--color-shades-functional-orange-950: #933d0b;
|
|
115
|
-
--color-shades-functional-orange-999: #
|
|
115
|
+
--color-shades-functional-orange-999: #5f2707;
|
|
116
116
|
--color-shades-functional-orange-000: #fff8f0;
|
|
117
117
|
--color-shades-functional-orange-050: #ffecd6;
|
|
118
118
|
--color-shades-functional-yellow-100: #fff4d1;
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
--color-shades-functional-yellow-850: #be9315;
|
|
128
128
|
--color-shades-functional-yellow-900: #b58a0e;
|
|
129
129
|
--color-shades-functional-yellow-950: #ab8207;
|
|
130
|
-
--color-shades-functional-yellow-999: #
|
|
130
|
+
--color-shades-functional-yellow-999: #856300;
|
|
131
131
|
--color-shades-functional-yellow-000: #fff9e9;
|
|
132
132
|
--color-shades-functional-yellow-050: #fff5d9;
|
|
133
133
|
--color-shades-functional-green-100: #e8fce8;
|
|
@@ -223,12 +223,12 @@
|
|
|
223
223
|
--opacity-disabled: 0.38;
|
|
224
224
|
--font-family-source-sans-pro: 'Source Sans Pro';
|
|
225
225
|
--line-height-0: 1.15;
|
|
226
|
-
--line-height-1: 1.
|
|
226
|
+
--line-height-1: 1.20;
|
|
227
227
|
--line-height-2: 1.25;
|
|
228
|
-
--line-height-3: 1.
|
|
229
|
-
--line-height-4: 1.
|
|
230
|
-
--line-height-5: 1.
|
|
231
|
-
--line-height-6: 1.
|
|
228
|
+
--line-height-3: 1.30;
|
|
229
|
+
--line-height-4: 1.40;
|
|
230
|
+
--line-height-5: 1.50;
|
|
231
|
+
--line-height-6: 1.10;
|
|
232
232
|
--text-case-capitalize: capitalize;
|
|
233
233
|
--text-case-none: none;
|
|
234
234
|
--text-case-uppercase: uppercase;
|
|
@@ -288,7 +288,7 @@
|
|
|
288
288
|
--color-interactive-outlined-foreground-default: var(--color-shades-grey-000);
|
|
289
289
|
--color-interactive-outlined-foreground-hover: var(--color-shades-grey-000);
|
|
290
290
|
--color-interactive-outlined-foreground-disabled: var(--color-shades-grey-000);
|
|
291
|
-
--color-interactive-outlined-border-default: var(--color-shades-grey-
|
|
291
|
+
--color-interactive-outlined-border-default: var(--color-shades-grey-500);
|
|
292
292
|
--color-interactive-outlined-border-hover: var(--color-shades-grey-000);
|
|
293
293
|
--color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500);
|
|
294
294
|
--color-interactive-outlined-border-disabled: var(--color-shades-grey-600);
|
|
@@ -308,36 +308,61 @@
|
|
|
308
308
|
--color-interactive-danger-foreground-hover: var(--color-shades-grey-950);
|
|
309
309
|
--color-interactive-danger-foreground-disabled: var(--color-shades-grey-950);
|
|
310
310
|
--color-interactive-danger-border-focus: var(--color-shades-functional-blue-500);
|
|
311
|
-
--color-feedback-background-default-info: var(--color-shades-functional-blue-950);
|
|
312
|
-
--color-feedback-background-default-error: var(--color-shades-functional-red-950);
|
|
313
|
-
--color-feedback-background-default-warning: var(--color-shades-functional-yellow-950);
|
|
314
|
-
--color-feedback-background-default-success: var(--color-shades-functional-green-950);
|
|
315
311
|
--color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800);
|
|
312
|
+
--color-feedback-background-default-info: var(--color-shades-functional-blue-950);
|
|
313
|
+
--color-feedback-background-default-error: var(--color-shades-functional-red-850);
|
|
314
|
+
--color-feedback-background-default-warning: var(--color-shades-functional-yellow-999);
|
|
315
|
+
--color-feedback-background-default-success: var(--color-shades-functional-green-900);
|
|
316
|
+
--color-feedback-background-subtle-neutral: var(--color-shades-functional-neutralgrey-850);
|
|
316
317
|
--color-feedback-background-subtle-info: var(--color-shades-functional-blue-999);
|
|
317
|
-
--color-feedback-background-subtle-error: var(--color-shades-functional-red-
|
|
318
|
+
--color-feedback-background-subtle-error: var(--color-shades-functional-red-950);
|
|
318
319
|
--color-feedback-background-subtle-warning: var(--color-shades-functional-yellow-999);
|
|
319
|
-
--color-feedback-background-subtle-success: var(--color-shades-functional-green-
|
|
320
|
-
--color-feedback-background-subtle-neutral: var(--color-shades-functional-neutralgrey-850);
|
|
321
|
-
--color-feedback-background-emphasized-info: var(--color-shades-functional-blue-700);
|
|
322
|
-
--color-feedback-background-emphasized-error: var(--color-shades-functional-red-700);
|
|
323
|
-
--color-feedback-background-emphasized-warning: var(--color-shades-functional-yellow-500);
|
|
324
|
-
--color-feedback-background-emphasized-success: var(--color-shades-functional-green-800);
|
|
320
|
+
--color-feedback-background-subtle-success: var(--color-shades-functional-green-900);
|
|
325
321
|
--color-feedback-background-emphasized-neutral: var(--color-shades-functional-neutralgrey-150);
|
|
322
|
+
--color-feedback-background-emphasized-info: var(--color-shades-functional-blue-800);
|
|
323
|
+
--color-feedback-background-emphasized-error: var(--color-shades-functional-red-700);
|
|
324
|
+
--color-feedback-background-emphasized-warning: var(--color-shades-functional-yellow-600);
|
|
325
|
+
--color-feedback-background-emphasized-success: var(--color-shades-functional-green-900);
|
|
326
|
+
--color-feedback-foreground-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
327
|
+
--color-feedback-foreground-info: var(--color-shades-functional-blue-300);
|
|
328
|
+
--color-feedback-foreground-error: var(--color-shades-functional-red-300);
|
|
329
|
+
--color-feedback-foreground-warning: var(--color-shades-functional-orange-300);
|
|
330
|
+
--color-feedback-foreground-success: var(--color-shades-functional-green-300);
|
|
331
|
+
--color-feedback-foreground-on-bg-subtle-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
332
|
+
--color-feedback-foreground-on-bg-subtle-info: var(--color-shades-functional-blue-050);
|
|
333
|
+
--color-feedback-foreground-on-bg-subtle-error: var(--color-shades-functional-red-050);
|
|
334
|
+
--color-feedback-foreground-on-bg-subtle-warning: var(--color-shades-functional-orange-050);
|
|
335
|
+
--color-feedback-foreground-on-bg-subtle-success: var(--color-shades-functional-green-050);
|
|
336
|
+
--color-feedback-foreground-on-bg-emphasized-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
337
|
+
--color-feedback-foreground-on-bg-emphasized-info: var(--color-shades-functional-neutralgrey-000);
|
|
338
|
+
--color-feedback-foreground-on-bg-emphasized-error: var(--color-shades-functional-neutralgrey-000);
|
|
339
|
+
--color-feedback-foreground-on-bg-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
|
|
340
|
+
--color-feedback-foreground-on-bg-emphasized-success: var(--color-shades-functional-neutralgrey-000);
|
|
341
|
+
--color-feedback-foreground-default-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
326
342
|
--color-feedback-foreground-default-info: var(--color-shades-functional-neutralgrey-000);
|
|
327
343
|
--color-feedback-foreground-default-error: var(--color-shades-functional-neutralgrey-000);
|
|
328
344
|
--color-feedback-foreground-default-warning: var(--color-shades-functional-neutralgrey-000);
|
|
329
345
|
--color-feedback-foreground-default-success: var(--color-shades-functional-neutralgrey-000);
|
|
330
|
-
--color-feedback-foreground-
|
|
346
|
+
--color-feedback-foreground-subtle-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
331
347
|
--color-feedback-foreground-subtle-info: var(--color-shades-functional-neutralgrey-000);
|
|
332
348
|
--color-feedback-foreground-subtle-error: var(--color-shades-functional-neutralgrey-000);
|
|
333
349
|
--color-feedback-foreground-subtle-warning: var(--color-shades-functional-neutralgrey-000);
|
|
334
350
|
--color-feedback-foreground-subtle-success: var(--color-shades-functional-neutralgrey-000);
|
|
335
|
-
--color-feedback-foreground-
|
|
351
|
+
--color-feedback-foreground-emphasized-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
336
352
|
--color-feedback-foreground-emphasized-info: var(--color-shades-functional-neutralgrey-000);
|
|
337
353
|
--color-feedback-foreground-emphasized-error: var(--color-shades-functional-neutralgrey-000);
|
|
338
354
|
--color-feedback-foreground-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
|
|
339
355
|
--color-feedback-foreground-emphasized-success: var(--color-shades-functional-neutralgrey-000);
|
|
340
|
-
--color-feedback-
|
|
356
|
+
--color-feedback-border-subtle-neutral: var(--color-shades-functional-neutralgrey-400);
|
|
357
|
+
--color-feedback-border-subtle-info: var(--color-shades-functional-blue-500);
|
|
358
|
+
--color-feedback-border-subtle-error: var(--color-shades-functional-red-500);
|
|
359
|
+
--color-feedback-border-subtle-warning: var(--color-shades-functional-yellow-300);
|
|
360
|
+
--color-feedback-border-subtle-success: var(--color-shades-functional-green-800);
|
|
361
|
+
--color-feedback-border-emphasized-neutral: var(--color-shades-functional-neutralgrey-600);
|
|
362
|
+
--color-feedback-border-emphasized-info: var(--color-shades-functional-blue-700);
|
|
363
|
+
--color-feedback-border-emphasized-error: var(--color-shades-functional-red-300);
|
|
364
|
+
--color-feedback-border-emphasized-warning: var(--color-shades-functional-yellow-700);
|
|
365
|
+
--color-feedback-border-emphasized-success: var(--color-shades-functional-green-800);
|
|
341
366
|
--color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
|
|
342
367
|
--color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
|
|
343
368
|
--color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
|
package/css/varsom.css
CHANGED
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
--color-shades-functional-orange-850: #b34d09;
|
|
113
113
|
--color-shades-functional-orange-900: #a2420c;
|
|
114
114
|
--color-shades-functional-orange-950: #933d0b;
|
|
115
|
-
--color-shades-functional-orange-999: #
|
|
115
|
+
--color-shades-functional-orange-999: #5f2707;
|
|
116
116
|
--color-shades-functional-orange-000: #fff8f0;
|
|
117
117
|
--color-shades-functional-orange-050: #ffecd6;
|
|
118
118
|
--color-shades-functional-yellow-100: #fff4d1;
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
--color-shades-functional-yellow-850: #be9315;
|
|
128
128
|
--color-shades-functional-yellow-900: #b58a0e;
|
|
129
129
|
--color-shades-functional-yellow-950: #ab8207;
|
|
130
|
-
--color-shades-functional-yellow-999: #
|
|
130
|
+
--color-shades-functional-yellow-999: #856300;
|
|
131
131
|
--color-shades-functional-yellow-000: #fff9e9;
|
|
132
132
|
--color-shades-functional-yellow-050: #fff5d9;
|
|
133
133
|
--color-shades-functional-green-100: #e8fce8;
|
|
@@ -223,12 +223,12 @@
|
|
|
223
223
|
--opacity-disabled: 0.38;
|
|
224
224
|
--font-family-source-sans-pro: 'Source Sans Pro';
|
|
225
225
|
--line-height-0: 1.15;
|
|
226
|
-
--line-height-1: 1.
|
|
226
|
+
--line-height-1: 1.20;
|
|
227
227
|
--line-height-2: 1.25;
|
|
228
|
-
--line-height-3: 1.
|
|
229
|
-
--line-height-4: 1.
|
|
230
|
-
--line-height-5: 1.
|
|
231
|
-
--line-height-6: 1.
|
|
228
|
+
--line-height-3: 1.30;
|
|
229
|
+
--line-height-4: 1.40;
|
|
230
|
+
--line-height-5: 1.50;
|
|
231
|
+
--line-height-6: 1.10;
|
|
232
232
|
--text-case-capitalize: capitalize;
|
|
233
233
|
--text-case-none: none;
|
|
234
234
|
--text-case-uppercase: uppercase;
|
|
@@ -308,36 +308,61 @@
|
|
|
308
308
|
--color-interactive-danger-foreground-hover: var(--color-shades-grey-000);
|
|
309
309
|
--color-interactive-danger-foreground-disabled: var(--color-shades-grey-000);
|
|
310
310
|
--color-interactive-danger-border-focus: var(--color-shades-functional-blue-500);
|
|
311
|
+
--color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */
|
|
311
312
|
--color-feedback-background-default-info: var(--color-shades-functional-blue-100);
|
|
312
313
|
--color-feedback-background-default-error: var(--color-shades-functional-red-050);
|
|
313
314
|
--color-feedback-background-default-warning: var(--color-shades-functional-yellow-200);
|
|
314
315
|
--color-feedback-background-default-success: var(--color-shades-functional-green-150);
|
|
315
|
-
--color-feedback-background-
|
|
316
|
+
--color-feedback-background-subtle-neutral: var(--color-shades-functional-neutralgrey-050);
|
|
316
317
|
--color-feedback-background-subtle-info: var(--color-shades-functional-blue-000);
|
|
317
318
|
--color-feedback-background-subtle-error: var(--color-shades-functional-red-000);
|
|
318
319
|
--color-feedback-background-subtle-warning: var(--color-shades-functional-yellow-100);
|
|
319
320
|
--color-feedback-background-subtle-success: var(--color-shades-functional-green-100);
|
|
320
|
-
--color-feedback-background-
|
|
321
|
+
--color-feedback-background-emphasized-neutral: var(--color-shades-functional-neutralgrey-800);
|
|
321
322
|
--color-feedback-background-emphasized-info: var(--color-shades-functional-blue-700);
|
|
322
323
|
--color-feedback-background-emphasized-error: var(--color-shades-functional-red-700);
|
|
323
324
|
--color-feedback-background-emphasized-warning: var(--color-shades-functional-yellow-500);
|
|
324
325
|
--color-feedback-background-emphasized-success: var(--color-shades-functional-green-800);
|
|
325
|
-
--color-feedback-
|
|
326
|
+
--color-feedback-foreground-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
327
|
+
--color-feedback-foreground-info: var(--color-shades-functional-blue-800);
|
|
328
|
+
--color-feedback-foreground-error: var(--color-shades-functional-red-700);
|
|
329
|
+
--color-feedback-foreground-warning: var(--color-shades-functional-orange-999);
|
|
330
|
+
--color-feedback-foreground-success: var(--color-shades-functional-green-900);
|
|
331
|
+
--color-feedback-foreground-on-bg-subtle-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
332
|
+
--color-feedback-foreground-on-bg-subtle-info: var(--color-shades-functional-blue-999);
|
|
333
|
+
--color-feedback-foreground-on-bg-subtle-error: var(--color-shades-functional-red-950);
|
|
334
|
+
--color-feedback-foreground-on-bg-subtle-warning: var(--color-shades-functional-orange-999);
|
|
335
|
+
--color-feedback-foreground-on-bg-subtle-success: var(--color-shades-functional-green-999);
|
|
336
|
+
--color-feedback-foreground-on-bg-emphasized-neutral: var(--color-shades-functional-neutralgrey-000);
|
|
337
|
+
--color-feedback-foreground-on-bg-emphasized-info: var(--color-shades-functional-neutralgrey-000);
|
|
338
|
+
--color-feedback-foreground-on-bg-emphasized-error: var(--color-shades-functional-neutralgrey-000);
|
|
339
|
+
--color-feedback-foreground-on-bg-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
|
|
340
|
+
--color-feedback-foreground-on-bg-emphasized-success: var(--color-shades-functional-neutralgrey-000);
|
|
341
|
+
--color-feedback-foreground-default-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
326
342
|
--color-feedback-foreground-default-info: var(--color-shades-functional-neutralgrey-999);
|
|
327
343
|
--color-feedback-foreground-default-error: var(--color-shades-functional-neutralgrey-999);
|
|
328
344
|
--color-feedback-foreground-default-warning: var(--color-shades-functional-neutralgrey-999);
|
|
329
345
|
--color-feedback-foreground-default-success: var(--color-shades-functional-neutralgrey-999);
|
|
330
|
-
--color-feedback-foreground-
|
|
346
|
+
--color-feedback-foreground-subtle-neutral: var(--color-shades-functional-neutralgrey-999);
|
|
331
347
|
--color-feedback-foreground-subtle-info: var(--color-shades-functional-neutralgrey-999);
|
|
332
348
|
--color-feedback-foreground-subtle-error: var(--color-shades-functional-neutralgrey-999);
|
|
333
349
|
--color-feedback-foreground-subtle-warning: var(--color-shades-functional-neutralgrey-999);
|
|
334
350
|
--color-feedback-foreground-subtle-success: var(--color-shades-functional-neutralgrey-999);
|
|
335
|
-
--color-feedback-foreground-
|
|
351
|
+
--color-feedback-foreground-emphasized-neutral: var(--color-shades-grey-000);
|
|
336
352
|
--color-feedback-foreground-emphasized-info: var(--color-shades-grey-000);
|
|
337
353
|
--color-feedback-foreground-emphasized-error: var(--color-shades-grey-000);
|
|
338
354
|
--color-feedback-foreground-emphasized-warning: var(--color-shades-functional-neutralgrey-999);
|
|
339
355
|
--color-feedback-foreground-emphasized-success: var(--color-shades-grey-000);
|
|
340
|
-
--color-feedback-
|
|
356
|
+
--color-feedback-border-subtle-neutral: var(--color-shades-functional-neutralgrey-200);
|
|
357
|
+
--color-feedback-border-subtle-info: var(--color-shades-functional-blue-200);
|
|
358
|
+
--color-feedback-border-subtle-error: var(--color-shades-functional-red-200);
|
|
359
|
+
--color-feedback-border-subtle-warning: var(--color-shades-functional-yellow-700);
|
|
360
|
+
--color-feedback-border-subtle-success: var(--color-shades-functional-green-600);
|
|
361
|
+
--color-feedback-border-emphasized-neutral: var(--color-shades-functional-neutralgrey-600);
|
|
362
|
+
--color-feedback-border-emphasized-info: var(--color-shades-functional-blue-800);
|
|
363
|
+
--color-feedback-border-emphasized-error: var(--color-shades-functional-red-800);
|
|
364
|
+
--color-feedback-border-emphasized-warning: var(--color-shades-functional-yellow-900);
|
|
365
|
+
--color-feedback-border-emphasized-success: var(--color-shades-functional-green-800);
|
|
341
366
|
--color-dangerlevel-background-mute-level1: var(--color-shades-functional-green-150);
|
|
342
367
|
--color-dangerlevel-background-mute-level2: var(--color-shades-functional-yellow-200);
|
|
343
368
|
--color-dangerlevel-background-mute-level3: var(--color-shades-functional-orange-150);
|
|
@@ -590,8 +615,8 @@
|
|
|
590
615
|
--typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
591
616
|
--typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
592
617
|
--typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
593
|
-
--typography-body-compact-large-compact: var(--font-weight-regular) var(--line-height-1)
|
|
594
|
-
--typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--line-height-1)
|
|
618
|
+
--typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
619
|
+
--typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
595
620
|
--typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
596
621
|
--typography-body-compact-medium-underline-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
597
622
|
--typography-body-compact-small-compact: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-1) var(--font-family-source-sans-pro);
|
|
@@ -603,8 +628,8 @@
|
|
|
603
628
|
--typography-detailtext-caps-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
|
|
604
629
|
--typography-label-large: var(--font-weight-semibold) var(--font-size-medium)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
605
630
|
--typography-label-large-light: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
606
|
-
--typography-label-medium: var(--font-weight-semibold) var(--line-height-6)
|
|
607
|
-
--typography-label-medium-light: var(--font-weight-regular) var(--line-height-6)
|
|
631
|
+
--typography-label-medium: var(--font-weight-semibold) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
632
|
+
--typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
608
633
|
--typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
609
634
|
--typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
|
|
610
635
|
--font-size-2x-small: var(--dimension-3-5x); /** 12 px */
|