Skip to content

Commit e525ecd

Browse files
FrodeKolstadgithub-actions[bot]
FrodeKolstad
and
github-actions[bot]
authored
feat(tokens): ny: color-shades.accent + color.brand.foreground-farger… (#759)
* feat(tokens): ny: color-shades.accent + color.brand.foreground-farger som refererer til disse * (tokens): oppdatert css basert på nye tokens * fix(tokens): kun sync mot variables i Figma * fix(tokens): justerte farger brand * (tokens): oppdatert css basert på nye tokens --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 12583d4 commit e525ecd

15 files changed

Lines changed: 352 additions & 80 deletions

File tree

‎doc-site/.vitepress/theme/styles/nve_theme.css‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,16 @@
1414
--color-shades-brand-999: #2b030a;
1515
--color-shades-brand-000: #ffffff; /** This token has a dark color on Varsom */
1616
--color-shades-brand-050: #ff8083;
17+
--color-shades-accent-100: #ff999b;
18+
--color-shades-accent-200: #ff7075;
19+
--color-shades-accent-300: #ff4754;
20+
--color-shades-accent-400: #ee2b41;
21+
--color-shades-accent-500: #c6102e;
22+
--color-shades-accent-600: #9c1128;
23+
--color-shades-accent-700: #821729;
24+
--color-shades-accent-800: #621825;
25+
--color-shades-accent-900: #45171f;
26+
--color-shades-accent-000: #ffb2b4;
1727
--color-shades-grey-100: #efeff1;
1828
--color-shades-grey-150: #e4e5e7;
1929
--color-shades-grey-200: #c9cbcf;
@@ -24,9 +34,9 @@
2434
--color-shades-grey-700: #484c51;
2535
--color-shades-grey-800: #3c3f44;
2636
--color-shades-grey-850: #292b2e;
27-
--color-shades-grey-900: #1b1c1e;
28-
--color-shades-grey-950: #0c0d0e;
29-
--color-shades-grey-999: #050505;
37+
--color-shades-grey-900: #222325;
38+
--color-shades-grey-950: #171a1c;
39+
--color-shades-grey-999: #141414;
3040
--color-shades-grey-000: #ffffff;
3141
--color-shades-grey-050: #f7f7f8;
3242
--color-shades-data-color-a-100: #ff858d;
@@ -120,7 +130,7 @@
120130
--color-shades-functional-yellow-800: #bf9722;
121131
--color-shades-functional-yellow-850: #b08c21;
122132
--color-shades-functional-yellow-900: #a88324;
123-
--color-shades-functional-yellow-950: #836721;
133+
--color-shades-functional-yellow-950: #977726;
124134
--color-shades-functional-yellow-999: #7a5f29;
125135
--color-shades-functional-yellow-000: #fff9e9;
126136
--color-shades-functional-yellow-050: #fff5d9;
@@ -243,11 +253,11 @@
243253
--color-brand-background-secondary: var(--color-shades-brand-400);
244254
--color-brand-background-tertiary: var(--color-shades-brand-150);
245255
--color-brand-background-quaternary: var(--color-shades-brand-700);
246-
--color-brand-foreground-primary: var(--color-shades-brand-500);
256+
--color-brand-foreground-primary: var(--color-shades-accent-500);
257+
--color-brand-foreground-secondary: var(--color-shades-accent-700); /** was 500 */
247258
--color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
248-
--color-brand-foreground-secondary: var(--color-shades-brand-700); /** was 500 */
249259
--color-brand-foreground-secondary-on-bg: var(--color-shades-brand-999);
250-
--color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
260+
--color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
251261
--color-brand-border-primary: var(--color-shades-brand-500);
252262
--color-brand-border-secondary: var(--color-shades-brand-600);
253263
--color-brand-border-tertiary: var(--color-shades-brand-700);
@@ -658,6 +668,16 @@
658668
--color-shades-brand-999: #2b030a;
659669
--color-shades-brand-000: #ffffff; /** This token has a dark color on Varsom */
660670
--color-shades-brand-050: #ff8083;
671+
--color-shades-accent-100: #ff999b;
672+
--color-shades-accent-200: #ff7075;
673+
--color-shades-accent-300: #ff4754;
674+
--color-shades-accent-400: #ee2b41;
675+
--color-shades-accent-500: #c6102e;
676+
--color-shades-accent-600: #9c1128;
677+
--color-shades-accent-700: #821729;
678+
--color-shades-accent-800: #621825;
679+
--color-shades-accent-900: #45171f;
680+
--color-shades-accent-000: #ffb2b4;
661681
--color-shades-grey-100: #efeff1;
662682
--color-shades-grey-150: #e4e5e7;
663683
--color-shades-grey-200: #c9cbcf;
@@ -668,9 +688,9 @@
668688
--color-shades-grey-700: #484c51;
669689
--color-shades-grey-800: #3c3f44;
670690
--color-shades-grey-850: #292b2e;
671-
--color-shades-grey-900: #1b1c1e;
672-
--color-shades-grey-950: #0c0d0e;
673-
--color-shades-grey-999: #050505;
691+
--color-shades-grey-900: #222325;
692+
--color-shades-grey-950: #171a1c;
693+
--color-shades-grey-999: #141414;
674694
--color-shades-grey-000: #ffffff;
675695
--color-shades-grey-050: #f7f7f8;
676696
--color-shades-data-color-a-100: #ff858d;
@@ -764,7 +784,7 @@
764784
--color-shades-functional-yellow-800: #bf9722;
765785
--color-shades-functional-yellow-850: #b08c21;
766786
--color-shades-functional-yellow-900: #a88324;
767-
--color-shades-functional-yellow-950: #836721;
787+
--color-shades-functional-yellow-950: #977726;
768788
--color-shades-functional-yellow-999: #7a5f29;
769789
--color-shades-functional-yellow-000: #fff9e9;
770790
--color-shades-functional-yellow-050: #fff5d9;
@@ -887,11 +907,11 @@
887907
--color-brand-background-secondary: var(--color-shades-brand-250);
888908
--color-brand-background-tertiary: var(--color-shades-brand-800);
889909
--color-brand-background-quaternary: var(--color-shades-brand-200);
890-
--color-brand-foreground-primary: var(--color-shades-brand-150);
891-
--color-brand-foreground-secondary: var(--color-shades-brand-250); /** was 300 */
910+
--color-brand-foreground-primary: var(--color-shades-accent-200);
911+
--color-brand-foreground-secondary: var(--color-shades-accent-300); /** was 300 */
892912
--color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
893913
--color-brand-foreground-secondary-on-bg: var(--color-shades-grey-000);
894-
--color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
914+
--color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
895915
--color-brand-border-primary: var(--color-shades-brand-100);
896916
--color-brand-border-secondary: var(--color-shades-brand-200);
897917
--color-brand-border-tertiary: var(--color-shades-brand-300); /** was 300 */

‎doc-site/.vitepress/theme/styles/rme_theme.css‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,16 @@
1414
--color-shades-brand-999: #0b1128;
1515
--color-shades-brand-000: #fffffff;
1616
--color-shades-brand-050: #d6deff;
17+
--color-shades-accent-100: #adbafb;
18+
--color-shades-accent-200: #91a1f3;
19+
--color-shades-accent-300: #768adb;
20+
--color-shades-accent-400: #6079d2;
21+
--color-shades-accent-500: #4461ca;
22+
--color-shades-accent-600: #2f49a7;
23+
--color-shades-accent-700: #213273;
24+
--color-shades-accent-800: #1e2e66;
25+
--color-shades-accent-900: #19254c;
26+
--color-shades-accent-000: #bdc8ff;
1727
--color-shades-grey-100: #edeff3;
1828
--color-shades-grey-150: #e0e4eb;
1929
--color-shades-grey-200: #c2cad6;
@@ -120,7 +130,7 @@
120130
--color-shades-functional-yellow-800: #bf9722;
121131
--color-shades-functional-yellow-850: #b08c21;
122132
--color-shades-functional-yellow-900: #a88324;
123-
--color-shades-functional-yellow-950: #836721;
133+
--color-shades-functional-yellow-950: #977726;
124134
--color-shades-functional-yellow-999: #7a5f29;
125135
--color-shades-functional-yellow-000: #fff9e9;
126136
--color-shades-functional-yellow-050: #fff5d9;
@@ -243,11 +253,11 @@
243253
--color-brand-background-secondary: var(--color-shades-brand-400);
244254
--color-brand-background-tertiary: var(--color-shades-brand-150);
245255
--color-brand-background-quaternary: var(--color-shades-brand-700);
246-
--color-brand-foreground-primary: var(--color-shades-brand-500);
256+
--color-brand-foreground-primary: var(--color-shades-accent-500);
257+
--color-brand-foreground-secondary: var(--color-shades-accent-700); /** was 500 */
247258
--color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
248-
--color-brand-foreground-secondary: var(--color-shades-brand-700); /** was 500 */
249259
--color-brand-foreground-secondary-on-bg: var(--color-shades-brand-999);
250-
--color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
260+
--color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
251261
--color-brand-border-primary: var(--color-shades-brand-500);
252262
--color-brand-border-secondary: var(--color-shades-brand-600);
253263
--color-brand-border-tertiary: var(--color-shades-brand-700);
@@ -658,6 +668,16 @@
658668
--color-shades-brand-999: #0b1128;
659669
--color-shades-brand-000: #fffffff;
660670
--color-shades-brand-050: #d6deff;
671+
--color-shades-accent-100: #adbafb;
672+
--color-shades-accent-200: #91a1f3;
673+
--color-shades-accent-300: #768adb;
674+
--color-shades-accent-400: #6079d2;
675+
--color-shades-accent-500: #4461ca;
676+
--color-shades-accent-600: #2f49a7;
677+
--color-shades-accent-700: #213273;
678+
--color-shades-accent-800: #1e2e66;
679+
--color-shades-accent-900: #19254c;
680+
--color-shades-accent-000: #bdc8ff;
661681
--color-shades-grey-100: #edeff3;
662682
--color-shades-grey-150: #e0e4eb;
663683
--color-shades-grey-200: #c2cad6;
@@ -764,7 +784,7 @@
764784
--color-shades-functional-yellow-800: #bf9722;
765785
--color-shades-functional-yellow-850: #b08c21;
766786
--color-shades-functional-yellow-900: #a88324;
767-
--color-shades-functional-yellow-950: #836721;
787+
--color-shades-functional-yellow-950: #977726;
768788
--color-shades-functional-yellow-999: #7a5f29;
769789
--color-shades-functional-yellow-000: #fff9e9;
770790
--color-shades-functional-yellow-050: #fff5d9;
@@ -887,11 +907,11 @@
887907
--color-brand-background-secondary: var(--color-shades-brand-250);
888908
--color-brand-background-tertiary: var(--color-shades-brand-800);
889909
--color-brand-background-quaternary: var(--color-shades-brand-200);
890-
--color-brand-foreground-primary: var(--color-shades-brand-150);
891-
--color-brand-foreground-secondary: var(--color-shades-brand-250); /** was 300 */
910+
--color-brand-foreground-primary: var(--color-shades-accent-200);
911+
--color-brand-foreground-secondary: var(--color-shades-accent-300); /** was 300 */
892912
--color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
893913
--color-brand-foreground-secondary-on-bg: var(--color-shades-grey-000);
894-
--color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
914+
--color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
895915
--color-brand-border-primary: var(--color-shades-brand-100);
896916
--color-brand-border-secondary: var(--color-shades-brand-200);
897917
--color-brand-border-tertiary: var(--color-shades-brand-300); /** was 300 */

‎doc-site/.vitepress/theme/styles/varsom_theme.css‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,16 @@
1414
--color-shades-brand-999: #491c08;
1515
--color-shades-brand-000: #432301;
1616
--color-shades-brand-050: #ffdeb8;
17+
--color-shades-accent-100: #ffa866;
18+
--color-shades-accent-200: #ff773d;
19+
--color-shades-accent-300: #ff5e1a;
20+
--color-shades-accent-400: #f05000;
21+
--color-shades-accent-500: #cc3d00;
22+
--color-shades-accent-600: #ad3400;
23+
--color-shades-accent-700: #8f2b00;
24+
--color-shades-accent-800: #6b2305;
25+
--color-shades-accent-900: #4c1b06;
26+
--color-shades-accent-000: #ffc38f;
1727
--color-shades-grey-100: #dff1f9;
1828
--color-shades-grey-150: #cce9f5;
1929
--color-shades-grey-200: #a6d8ee;
@@ -120,7 +130,7 @@
120130
--color-shades-functional-yellow-800: #bf9722;
121131
--color-shades-functional-yellow-850: #b08c21;
122132
--color-shades-functional-yellow-900: #a88324;
123-
--color-shades-functional-yellow-950: #836721;
133+
--color-shades-functional-yellow-950: #977726;
124134
--color-shades-functional-yellow-999: #7a5f29;
125135
--color-shades-functional-yellow-000: #fff9e9;
126136
--color-shades-functional-yellow-050: #fff5d9;
@@ -243,11 +253,11 @@
243253
--color-brand-background-secondary: var(--color-shades-brand-400);
244254
--color-brand-background-tertiary: var(--color-shades-brand-150);
245255
--color-brand-background-quaternary: var(--color-shades-brand-700);
246-
--color-brand-foreground-primary: var(--color-shades-brand-500);
256+
--color-brand-foreground-primary: var(--color-shades-accent-500);
257+
--color-brand-foreground-secondary: var(--color-shades-accent-700); /** was 500 */
247258
--color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
248-
--color-brand-foreground-secondary: var(--color-shades-brand-700); /** was 500 */
249259
--color-brand-foreground-secondary-on-bg: var(--color-shades-brand-999);
250-
--color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
260+
--color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
251261
--color-brand-border-primary: var(--color-shades-brand-500);
252262
--color-brand-border-secondary: var(--color-shades-brand-600);
253263
--color-brand-border-tertiary: var(--color-shades-brand-700);
@@ -658,6 +668,16 @@
658668
--color-shades-brand-999: #491c08;
659669
--color-shades-brand-000: #432301;
660670
--color-shades-brand-050: #ffdeb8;
671+
--color-shades-accent-100: #ffa866;
672+
--color-shades-accent-200: #ff773d;
673+
--color-shades-accent-300: #ff5e1a;
674+
--color-shades-accent-400: #f05000;
675+
--color-shades-accent-500: #cc3d00;
676+
--color-shades-accent-600: #ad3400;
677+
--color-shades-accent-700: #8f2b00;
678+
--color-shades-accent-800: #6b2305;
679+
--color-shades-accent-900: #4c1b06;
680+
--color-shades-accent-000: #ffc38f;
661681
--color-shades-grey-100: #dff1f9;
662682
--color-shades-grey-150: #cce9f5;
663683
--color-shades-grey-200: #a6d8ee;
@@ -764,7 +784,7 @@
764784
--color-shades-functional-yellow-800: #bf9722;
765785
--color-shades-functional-yellow-850: #b08c21;
766786
--color-shades-functional-yellow-900: #a88324;
767-
--color-shades-functional-yellow-950: #836721;
787+
--color-shades-functional-yellow-950: #977726;
768788
--color-shades-functional-yellow-999: #7a5f29;
769789
--color-shades-functional-yellow-000: #fff9e9;
770790
--color-shades-functional-yellow-050: #fff5d9;
@@ -887,11 +907,11 @@
887907
--color-brand-background-secondary: var(--color-shades-brand-250);
888908
--color-brand-background-tertiary: var(--color-shades-brand-800);
889909
--color-brand-background-quaternary: var(--color-shades-brand-200);
890-
--color-brand-foreground-primary: var(--color-shades-brand-150);
891-
--color-brand-foreground-secondary: var(--color-shades-brand-250); /** was 300 */
910+
--color-brand-foreground-primary: var(--color-shades-accent-200);
911+
--color-brand-foreground-secondary: var(--color-shades-accent-300); /** was 300 */
892912
--color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
893913
--color-brand-foreground-secondary-on-bg: var(--color-shades-grey-000);
894-
--color-brand-foreground-tertiary-on-bg: var(--color-shades-brand-200);
914+
--color-brand-foreground-tertiary-on-bg: var(--color-shades-accent-400);
895915
--color-brand-border-primary: var(--color-shades-brand-100);
896916
--color-brand-border-secondary: var(--color-shades-brand-200);
897917
--color-brand-border-tertiary: var(--color-shades-brand-300); /** was 300 */

‎public/css/nve.css‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,16 @@
2020
--color-shades-brand-999: #2b030a;
2121
--color-shades-brand-000: #ffffff; /** This token has a dark color on Varsom */
2222
--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;
2333
--color-shades-grey-100: #efeff1;
2434
--color-shades-grey-150: #e4e5e7;
2535
--color-shades-grey-200: #c9cbcf;
@@ -30,9 +40,9 @@
3040
--color-shades-grey-700: #484c51;
3141
--color-shades-grey-800: #3c3f44;
3242
--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;
3646
--color-shades-grey-000: #ffffff;
3747
--color-shades-grey-050: #f7f7f8;
3848
--color-shades-data-color-a-100: #ff858d;
@@ -126,7 +136,7 @@
126136
--color-shades-functional-yellow-800: #bf9722;
127137
--color-shades-functional-yellow-850: #b08c21;
128138
--color-shades-functional-yellow-900: #a88324;
129-
--color-shades-functional-yellow-950: #836721;
139+
--color-shades-functional-yellow-950: #977726;
130140
--color-shades-functional-yellow-999: #7a5f29;
131141
--color-shades-functional-yellow-000: #fff9e9;
132142
--color-shades-functional-yellow-050: #fff5d9;
@@ -249,11 +259,11 @@
249259
--color-brand-background-secondary: var(--color-shades-brand-400);
250260
--color-brand-background-tertiary: var(--color-shades-brand-150);
251261
--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 */
253264
--color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
254-
--color-brand-foreground-secondary: var(--color-shades-brand-700); /** was 500 */
255265
--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);
257267
--color-brand-border-primary: var(--color-shades-brand-500);
258268
--color-brand-border-secondary: var(--color-shades-brand-600);
259269
--color-brand-border-tertiary: var(--color-shades-brand-700);

‎public/css/nve_dark.css‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,16 @@
2020
--color-shades-brand-999: #2b030a;
2121
--color-shades-brand-000: #ffffff; /** This token has a dark color on Varsom */
2222
--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;
2333
--color-shades-grey-100: #efeff1;
2434
--color-shades-grey-150: #e4e5e7;
2535
--color-shades-grey-200: #c9cbcf;
@@ -30,9 +40,9 @@
3040
--color-shades-grey-700: #484c51;
3141
--color-shades-grey-800: #3c3f44;
3242
--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;
3646
--color-shades-grey-000: #ffffff;
3747
--color-shades-grey-050: #f7f7f8;
3848
--color-shades-data-color-a-100: #ff858d;
@@ -126,7 +136,7 @@
126136
--color-shades-functional-yellow-800: #bf9722;
127137
--color-shades-functional-yellow-850: #b08c21;
128138
--color-shades-functional-yellow-900: #a88324;
129-
--color-shades-functional-yellow-950: #836721;
139+
--color-shades-functional-yellow-950: #977726;
130140
--color-shades-functional-yellow-999: #7a5f29;
131141
--color-shades-functional-yellow-000: #fff9e9;
132142
--color-shades-functional-yellow-050: #fff5d9;
@@ -249,11 +259,11 @@
249259
--color-brand-background-secondary: var(--color-shades-brand-250);
250260
--color-brand-background-tertiary: var(--color-shades-brand-800);
251261
--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 */
254264
--color-brand-foreground-primary-on-bg: var(--color-shades-brand-000);
255265
--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);
257267
--color-brand-border-primary: var(--color-shades-brand-100);
258268
--color-brand-border-secondary: var(--color-shades-brand-200);
259269
--color-brand-border-tertiary: var(--color-shades-brand-300); /** was 300 */

0 commit comments

Comments
 (0)