nve-designsystem 3.7.0 → 3.9.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.
Files changed (10) hide show
  1. package/css/nve.css +22 -9
  2. package/css/nve_dark.css +17 -7
  3. package/css/rme.css +19 -6
  4. package/css/rme_dark.css +14 -4
  5. package/css/varsom.css +19 -6
  6. package/css/varsom_dark.css +14 -4
  7. package/custom-elements.json +478 -478
  8. package/package.json +1 -1
  9. package/vscode.css-custom-data.json +4 -4
  10. package/vscode.html-custom-data.json +49 -49
package/css/nve.css CHANGED
@@ -20,6 +20,16 @@
20
20
  --color-shades-brand-999: #2b030a;
21
21
  --color-shades-brand-000: #ffffff; /** This token has a dark color on Varsom */
22
22
  --color-shades-brand-050: #ff8083;
23
+ --color-shades-accent-100: #ff999b;
24
+ --color-shades-accent-200: #ff7075;
25
+ --color-shades-accent-300: #ff4754;
26
+ --color-shades-accent-400: #ee2b41;
27
+ --color-shades-accent-500: #c6102e;
28
+ --color-shades-accent-600: #9c1128;
29
+ --color-shades-accent-700: #821729;
30
+ --color-shades-accent-800: #621825;
31
+ --color-shades-accent-900: #45171f;
32
+ --color-shades-accent-000: #ffb2b4;
23
33
  --color-shades-grey-100: #efeff1;
24
34
  --color-shades-grey-150: #e4e5e7;
25
35
  --color-shades-grey-200: #c9cbcf;
@@ -30,9 +40,9 @@
30
40
  --color-shades-grey-700: #484c51;
31
41
  --color-shades-grey-800: #3c3f44;
32
42
  --color-shades-grey-850: #292b2e;
33
- --color-shades-grey-900: #1b1c1e;
34
- --color-shades-grey-950: #0c0d0e;
35
- --color-shades-grey-999: #050505;
43
+ --color-shades-grey-900: #222325;
44
+ --color-shades-grey-950: #171a1c;
45
+ --color-shades-grey-999: #141414;
36
46
  --color-shades-grey-000: #ffffff;
37
47
  --color-shades-grey-050: #f7f7f8;
38
48
  --color-shades-data-color-a-100: #ff858d;
@@ -126,7 +136,7 @@
126
136
  --color-shades-functional-yellow-800: #bf9722;
127
137
  --color-shades-functional-yellow-850: #b08c21;
128
138
  --color-shades-functional-yellow-900: #a88324;
129
- --color-shades-functional-yellow-950: #836721;
139
+ --color-shades-functional-yellow-950: #977726;
130
140
  --color-shades-functional-yellow-999: #7a5f29;
131
141
  --color-shades-functional-yellow-000: #fff9e9;
132
142
  --color-shades-functional-yellow-050: #fff5d9;
@@ -249,11 +259,11 @@
249
259
  --color-brand-background-secondary: var(--color-shades-brand-400);
250
260
  --color-brand-background-tertiary: var(--color-shades-brand-150);
251
261
  --color-brand-background-quaternary: var(--color-shades-brand-700);
252
- --color-brand-foreground-primary: var(--color-shades-brand-500);
262
+ --color-brand-foreground-primary: var(--color-shades-accent-500);
263
+ --color-brand-foreground-secondary: var(--color-shades-accent-700); /** was 500 */
253
264
  --color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
254
- --color-brand-foreground-secondary: var(--color-shades-brand-700); /** was 500 */
255
265
  --color-brand-foreground-secondary-on-bg: var(--color-shades-brand-999);
256
- --color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
266
+ --color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
257
267
  --color-brand-border-primary: var(--color-shades-brand-500);
258
268
  --color-brand-border-secondary: var(--color-shades-brand-600);
259
269
  --color-brand-border-tertiary: var(--color-shades-brand-700);
@@ -570,6 +580,9 @@
570
580
  --spacing-content-margin-top: var(--spacing-40x);
571
581
  --spacing-content-margin-bottom: var(--spacing-88x);
572
582
  --spacing-content-margin-left-right: var(--spacing-48x);
583
+ --spacing-fixed-spacing-small: var(--dimension-4x);
584
+ --spacing-fixed-spacing-medium: var(--dimension-6x);
585
+ --spacing-fixed-spacing-large: var(--dimension-10x);
573
586
  --sizing-4x-small: var(--dimension-2x);
574
587
  --sizing-3x-small: var(--dimension-4x);
575
588
  --sizing-2x-small: var(--dimension-6x);
@@ -616,8 +629,10 @@
616
629
  --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-source-sans-pro);
617
630
  --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
618
631
  --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
632
+ --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
619
633
  --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
620
634
  --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
635
+ --font-size-medium: var(--dimension-5x); /** 18 px */
621
636
  --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
622
637
  --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
623
638
  --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
@@ -635,12 +650,10 @@
635
650
  --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
636
651
  --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
637
652
  --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
638
- --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
639
653
  --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
640
654
  --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
641
655
  --font-size-x-small: var(--dimension-4x); /** 14 px */
642
656
  --font-size-small: var(--dimension-4-5x); /** 16 px */
643
- --font-size-medium: var(--dimension-5x); /** 18 px */
644
657
  --font-size-large: var(--dimension-6x); /** 20 px */
645
658
  --font-size-x-large: var(--dimension-8x); /** 24 px */
646
659
  --font-size-2x-large: var(--dimension-10x); /** 32 px */
package/css/nve_dark.css CHANGED
@@ -20,6 +20,16 @@
20
20
  --color-shades-brand-999: #2b030a;
21
21
  --color-shades-brand-000: #ffffff; /** This token has a dark color on Varsom */
22
22
  --color-shades-brand-050: #ff8083;
23
+ --color-shades-accent-100: #ff999b;
24
+ --color-shades-accent-200: #ff7075;
25
+ --color-shades-accent-300: #ff4754;
26
+ --color-shades-accent-400: #ee2b41;
27
+ --color-shades-accent-500: #c6102e;
28
+ --color-shades-accent-600: #9c1128;
29
+ --color-shades-accent-700: #821729;
30
+ --color-shades-accent-800: #621825;
31
+ --color-shades-accent-900: #45171f;
32
+ --color-shades-accent-000: #ffb2b4;
23
33
  --color-shades-grey-100: #efeff1;
24
34
  --color-shades-grey-150: #e4e5e7;
25
35
  --color-shades-grey-200: #c9cbcf;
@@ -30,9 +40,9 @@
30
40
  --color-shades-grey-700: #484c51;
31
41
  --color-shades-grey-800: #3c3f44;
32
42
  --color-shades-grey-850: #292b2e;
33
- --color-shades-grey-900: #1b1c1e;
34
- --color-shades-grey-950: #0c0d0e;
35
- --color-shades-grey-999: #050505;
43
+ --color-shades-grey-900: #222325;
44
+ --color-shades-grey-950: #171a1c;
45
+ --color-shades-grey-999: #141414;
36
46
  --color-shades-grey-000: #ffffff;
37
47
  --color-shades-grey-050: #f7f7f8;
38
48
  --color-shades-data-color-a-100: #ff858d;
@@ -126,7 +136,7 @@
126
136
  --color-shades-functional-yellow-800: #bf9722;
127
137
  --color-shades-functional-yellow-850: #b08c21;
128
138
  --color-shades-functional-yellow-900: #a88324;
129
- --color-shades-functional-yellow-950: #836721;
139
+ --color-shades-functional-yellow-950: #977726;
130
140
  --color-shades-functional-yellow-999: #7a5f29;
131
141
  --color-shades-functional-yellow-000: #fff9e9;
132
142
  --color-shades-functional-yellow-050: #fff5d9;
@@ -249,11 +259,11 @@
249
259
  --color-brand-background-secondary: var(--color-shades-brand-250);
250
260
  --color-brand-background-tertiary: var(--color-shades-brand-800);
251
261
  --color-brand-background-quaternary: var(--color-shades-brand-200);
252
- --color-brand-foreground-primary: var(--color-shades-brand-150);
253
- --color-brand-foreground-secondary: var(--color-shades-brand-250); /** was 300 */
262
+ --color-brand-foreground-primary: var(--color-shades-accent-200);
263
+ --color-brand-foreground-secondary: var(--color-shades-accent-300); /** was 300 */
254
264
  --color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
255
265
  --color-brand-foreground-secondary-on-bg: var(--color-shades-grey-000);
256
- --color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
266
+ --color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
257
267
  --color-brand-border-primary: var(--color-shades-brand-100);
258
268
  --color-brand-border-secondary: var(--color-shades-brand-200);
259
269
  --color-brand-border-tertiary: var(--color-shades-brand-300); /** was 300 */
package/css/rme.css CHANGED
@@ -20,6 +20,16 @@
20
20
  --color-shades-brand-999: #0b1128;
21
21
  --color-shades-brand-000: #fffffff;
22
22
  --color-shades-brand-050: #d6deff;
23
+ --color-shades-accent-100: #adbafb;
24
+ --color-shades-accent-200: #91a1f3;
25
+ --color-shades-accent-300: #768adb;
26
+ --color-shades-accent-400: #6079d2;
27
+ --color-shades-accent-500: #4461ca;
28
+ --color-shades-accent-600: #2f49a7;
29
+ --color-shades-accent-700: #213273;
30
+ --color-shades-accent-800: #1e2e66;
31
+ --color-shades-accent-900: #19254c;
32
+ --color-shades-accent-000: #bdc8ff;
23
33
  --color-shades-grey-100: #edeff3;
24
34
  --color-shades-grey-150: #e0e4eb;
25
35
  --color-shades-grey-200: #c2cad6;
@@ -126,7 +136,7 @@
126
136
  --color-shades-functional-yellow-800: #bf9722;
127
137
  --color-shades-functional-yellow-850: #b08c21;
128
138
  --color-shades-functional-yellow-900: #a88324;
129
- --color-shades-functional-yellow-950: #836721;
139
+ --color-shades-functional-yellow-950: #977726;
130
140
  --color-shades-functional-yellow-999: #7a5f29;
131
141
  --color-shades-functional-yellow-000: #fff9e9;
132
142
  --color-shades-functional-yellow-050: #fff5d9;
@@ -249,11 +259,11 @@
249
259
  --color-brand-background-secondary: var(--color-shades-brand-400);
250
260
  --color-brand-background-tertiary: var(--color-shades-brand-150);
251
261
  --color-brand-background-quaternary: var(--color-shades-brand-700);
252
- --color-brand-foreground-primary: var(--color-shades-brand-500);
262
+ --color-brand-foreground-primary: var(--color-shades-accent-500);
263
+ --color-brand-foreground-secondary: var(--color-shades-accent-700); /** was 500 */
253
264
  --color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
254
- --color-brand-foreground-secondary: var(--color-shades-brand-700); /** was 500 */
255
265
  --color-brand-foreground-secondary-on-bg: var(--color-shades-brand-999);
256
- --color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
266
+ --color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
257
267
  --color-brand-border-primary: var(--color-shades-brand-500);
258
268
  --color-brand-border-secondary: var(--color-shades-brand-600);
259
269
  --color-brand-border-tertiary: var(--color-shades-brand-700);
@@ -570,6 +580,9 @@
570
580
  --spacing-content-margin-top: var(--spacing-40x);
571
581
  --spacing-content-margin-bottom: var(--spacing-88x);
572
582
  --spacing-content-margin-left-right: var(--spacing-48x);
583
+ --spacing-fixed-spacing-small: var(--dimension-4x);
584
+ --spacing-fixed-spacing-medium: var(--dimension-6x);
585
+ --spacing-fixed-spacing-large: var(--dimension-10x);
573
586
  --sizing-4x-small: var(--dimension-2x);
574
587
  --sizing-3x-small: var(--dimension-4x);
575
588
  --sizing-2x-small: var(--dimension-6x);
@@ -616,8 +629,10 @@
616
629
  --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-source-sans-pro);
617
630
  --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
618
631
  --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
632
+ --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
619
633
  --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
620
634
  --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
635
+ --font-size-medium: var(--dimension-5x); /** 18 px */
621
636
  --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
622
637
  --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
623
638
  --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
@@ -635,12 +650,10 @@
635
650
  --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
636
651
  --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
637
652
  --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
638
- --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
639
653
  --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
640
654
  --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
641
655
  --font-size-x-small: var(--dimension-4x); /** 14 px */
642
656
  --font-size-small: var(--dimension-4-5x); /** 16 px */
643
- --font-size-medium: var(--dimension-5x); /** 18 px */
644
657
  --font-size-large: var(--dimension-6x); /** 20 px */
645
658
  --font-size-x-large: var(--dimension-8x); /** 24 px */
646
659
  --font-size-2x-large: var(--dimension-10x); /** 32 px */
package/css/rme_dark.css CHANGED
@@ -20,6 +20,16 @@
20
20
  --color-shades-brand-999: #0b1128;
21
21
  --color-shades-brand-000: #fffffff;
22
22
  --color-shades-brand-050: #d6deff;
23
+ --color-shades-accent-100: #adbafb;
24
+ --color-shades-accent-200: #91a1f3;
25
+ --color-shades-accent-300: #768adb;
26
+ --color-shades-accent-400: #6079d2;
27
+ --color-shades-accent-500: #4461ca;
28
+ --color-shades-accent-600: #2f49a7;
29
+ --color-shades-accent-700: #213273;
30
+ --color-shades-accent-800: #1e2e66;
31
+ --color-shades-accent-900: #19254c;
32
+ --color-shades-accent-000: #bdc8ff;
23
33
  --color-shades-grey-100: #edeff3;
24
34
  --color-shades-grey-150: #e0e4eb;
25
35
  --color-shades-grey-200: #c2cad6;
@@ -126,7 +136,7 @@
126
136
  --color-shades-functional-yellow-800: #bf9722;
127
137
  --color-shades-functional-yellow-850: #b08c21;
128
138
  --color-shades-functional-yellow-900: #a88324;
129
- --color-shades-functional-yellow-950: #836721;
139
+ --color-shades-functional-yellow-950: #977726;
130
140
  --color-shades-functional-yellow-999: #7a5f29;
131
141
  --color-shades-functional-yellow-000: #fff9e9;
132
142
  --color-shades-functional-yellow-050: #fff5d9;
@@ -249,11 +259,11 @@
249
259
  --color-brand-background-secondary: var(--color-shades-brand-250);
250
260
  --color-brand-background-tertiary: var(--color-shades-brand-800);
251
261
  --color-brand-background-quaternary: var(--color-shades-brand-200);
252
- --color-brand-foreground-primary: var(--color-shades-brand-150);
253
- --color-brand-foreground-secondary: var(--color-shades-brand-250); /** was 300 */
262
+ --color-brand-foreground-primary: var(--color-shades-accent-200);
263
+ --color-brand-foreground-secondary: var(--color-shades-accent-300); /** was 300 */
254
264
  --color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
255
265
  --color-brand-foreground-secondary-on-bg: var(--color-shades-grey-000);
256
- --color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
266
+ --color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
257
267
  --color-brand-border-primary: var(--color-shades-brand-100);
258
268
  --color-brand-border-secondary: var(--color-shades-brand-200);
259
269
  --color-brand-border-tertiary: var(--color-shades-brand-300); /** was 300 */
package/css/varsom.css CHANGED
@@ -20,6 +20,16 @@
20
20
  --color-shades-brand-999: #491c08;
21
21
  --color-shades-brand-000: #432301;
22
22
  --color-shades-brand-050: #ffdeb8;
23
+ --color-shades-accent-100: #ffa866;
24
+ --color-shades-accent-200: #ff773d;
25
+ --color-shades-accent-300: #ff5e1a;
26
+ --color-shades-accent-400: #f05000;
27
+ --color-shades-accent-500: #cc3d00;
28
+ --color-shades-accent-600: #ad3400;
29
+ --color-shades-accent-700: #8f2b00;
30
+ --color-shades-accent-800: #6b2305;
31
+ --color-shades-accent-900: #4c1b06;
32
+ --color-shades-accent-000: #ffc38f;
23
33
  --color-shades-grey-100: #dff1f9;
24
34
  --color-shades-grey-150: #cce9f5;
25
35
  --color-shades-grey-200: #a6d8ee;
@@ -126,7 +136,7 @@
126
136
  --color-shades-functional-yellow-800: #bf9722;
127
137
  --color-shades-functional-yellow-850: #b08c21;
128
138
  --color-shades-functional-yellow-900: #a88324;
129
- --color-shades-functional-yellow-950: #836721;
139
+ --color-shades-functional-yellow-950: #977726;
130
140
  --color-shades-functional-yellow-999: #7a5f29;
131
141
  --color-shades-functional-yellow-000: #fff9e9;
132
142
  --color-shades-functional-yellow-050: #fff5d9;
@@ -249,11 +259,11 @@
249
259
  --color-brand-background-secondary: var(--color-shades-brand-400);
250
260
  --color-brand-background-tertiary: var(--color-shades-brand-150);
251
261
  --color-brand-background-quaternary: var(--color-shades-brand-700);
252
- --color-brand-foreground-primary: var(--color-shades-brand-500);
262
+ --color-brand-foreground-primary: var(--color-shades-accent-500);
263
+ --color-brand-foreground-secondary: var(--color-shades-accent-700); /** was 500 */
253
264
  --color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
254
- --color-brand-foreground-secondary: var(--color-shades-brand-700); /** was 500 */
255
265
  --color-brand-foreground-secondary-on-bg: var(--color-shades-brand-999);
256
- --color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
266
+ --color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
257
267
  --color-brand-border-primary: var(--color-shades-brand-500);
258
268
  --color-brand-border-secondary: var(--color-shades-brand-600);
259
269
  --color-brand-border-tertiary: var(--color-shades-brand-700);
@@ -570,6 +580,9 @@
570
580
  --spacing-content-margin-top: var(--spacing-40x);
571
581
  --spacing-content-margin-bottom: var(--spacing-88x);
572
582
  --spacing-content-margin-left-right: var(--spacing-48x);
583
+ --spacing-fixed-spacing-small: var(--dimension-4x);
584
+ --spacing-fixed-spacing-medium: var(--dimension-6x);
585
+ --spacing-fixed-spacing-large: var(--dimension-10x);
573
586
  --sizing-4x-small: var(--dimension-2x);
574
587
  --sizing-3x-small: var(--dimension-4x);
575
588
  --sizing-2x-small: var(--dimension-6x);
@@ -616,8 +629,10 @@
616
629
  --typography-body-medium-underline: var(--font-weight-regular) var(--font-size-small)/var(--line-height-5) var(--font-family-source-sans-pro);
617
630
  --typography-body-small: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
618
631
  --typography-body-small-underline: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
632
+ --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
619
633
  --typography-body-x-small: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
620
634
  --typography-body-x-small-underline: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-5) var(--font-family-source-sans-pro);
635
+ --font-size-medium: var(--dimension-5x); /** 18 px */
621
636
  --typography-body-compact-large-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
622
637
  --typography-body-compact-large-underline-compact: var(--font-weight-regular) var(--font-size-medium)/var(--line-height-1) var(--font-family-source-sans-pro);
623
638
  --typography-body-compact-medium-compact: var(--font-weight-regular) var(--font-size-small)/var(--line-height-1) var(--font-family-source-sans-pro);
@@ -635,12 +650,10 @@
635
650
  --typography-label-medium-light: var(--font-weight-regular) var(--font-size-small)/var(--line-height-6) var(--font-family-source-sans-pro);
636
651
  --typography-label-small: var(--font-weight-semibold) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
637
652
  --typography-label-small-light: var(--font-weight-regular) var(--font-size-x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
638
- --font-size-2x-small: var(--dimension-3-5x); /** 12 px */
639
653
  --typography-label-x-small: var(--font-weight-semibold) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
640
654
  --typography-label-x-small-light: var(--font-weight-regular) var(--font-size-2x-small)/var(--line-height-6) var(--font-family-source-sans-pro);
641
655
  --font-size-x-small: var(--dimension-4x); /** 14 px */
642
656
  --font-size-small: var(--dimension-4-5x); /** 16 px */
643
- --font-size-medium: var(--dimension-5x); /** 18 px */
644
657
  --font-size-large: var(--dimension-6x); /** 20 px */
645
658
  --font-size-x-large: var(--dimension-8x); /** 24 px */
646
659
  --font-size-2x-large: var(--dimension-10x); /** 32 px */
package/css/varsom_dark.css CHANGED
@@ -20,6 +20,16 @@
20
20
  --color-shades-brand-999: #491c08;
21
21
  --color-shades-brand-000: #432301;
22
22
  --color-shades-brand-050: #ffdeb8;
23
+ --color-shades-accent-100: #ffa866;
24
+ --color-shades-accent-200: #ff773d;
25
+ --color-shades-accent-300: #ff5e1a;
26
+ --color-shades-accent-400: #f05000;
27
+ --color-shades-accent-500: #cc3d00;
28
+ --color-shades-accent-600: #ad3400;
29
+ --color-shades-accent-700: #8f2b00;
30
+ --color-shades-accent-800: #6b2305;
31
+ --color-shades-accent-900: #4c1b06;
32
+ --color-shades-accent-000: #ffc38f;
23
33
  --color-shades-grey-100: #dff1f9;
24
34
  --color-shades-grey-150: #cce9f5;
25
35
  --color-shades-grey-200: #a6d8ee;
@@ -126,7 +136,7 @@
126
136
  --color-shades-functional-yellow-800: #bf9722;
127
137
  --color-shades-functional-yellow-850: #b08c21;
128
138
  --color-shades-functional-yellow-900: #a88324;
129
- --color-shades-functional-yellow-950: #836721;
139
+ --color-shades-functional-yellow-950: #977726;
130
140
  --color-shades-functional-yellow-999: #7a5f29;
131
141
  --color-shades-functional-yellow-000: #fff9e9;
132
142
  --color-shades-functional-yellow-050: #fff5d9;
@@ -249,11 +259,11 @@
249
259
  --color-brand-background-secondary: var(--color-shades-brand-250);
250
260
  --color-brand-background-tertiary: var(--color-shades-brand-800);
251
261
  --color-brand-background-quaternary: var(--color-shades-brand-200);
252
- --color-brand-foreground-primary: var(--color-shades-brand-150);
253
- --color-brand-foreground-secondary: var(--color-shades-brand-250); /** was 300 */
262
+ --color-brand-foreground-primary: var(--color-shades-accent-200);
263
+ --color-brand-foreground-secondary: var(--color-shades-accent-300); /** was 300 */
254
264
  --color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
255
265
  --color-brand-foreground-secondary-on-bg: var(--color-shades-grey-000);
256
- --color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
266
+ --color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
257
267
  --color-brand-border-primary: var(--color-shades-brand-100);
258
268
  --color-brand-border-secondary: var(--color-shades-brand-200);
259
269
  --color-brand-border-tertiary: var(--color-shades-brand-300); /** was 300 */