From 5dee3c8843fb3d1492d853f94492a23bee09760f Mon Sep 17 00:00:00 2001 From: amish1188 Date: Thu, 20 Nov 2025 13:30:54 +0100 Subject: [PATCH] fix(tokens): endre varsom brans shades-farger --- .../.vitepress/theme/styles/nve_theme.css | 36 +++--- .../.vitepress/theme/styles/rme_theme.css | 16 ++- .../.vitepress/theme/styles/varsom_theme.css | 120 +++++++++--------- public/css/nve.css | 15 ++- public/css/nve_dark.css | 21 +-- public/css/rme.css | 5 +- public/css/rme_dark.css | 11 +- public/css/varsom.css | 57 +++++---- public/css/varsom_dark.css | 63 ++++----- tokens/$themes.json | 62 ++++----- tokens/brand/nve.json | 10 +- tokens/brand/varsom.json | 56 ++++---- tokens/public/theme/dark.json | 13 +- tokens/public/theme/light.json | 8 +- 14 files changed, 258 insertions(+), 235 deletions(-) diff --git a/doc-site/.vitepress/theme/styles/nve_theme.css b/doc-site/.vitepress/theme/styles/nve_theme.css index eacabebd..8f655581 100644 --- a/doc-site/.vitepress/theme/styles/nve_theme.css +++ b/doc-site/.vitepress/theme/styles/nve_theme.css @@ -1,5 +1,5 @@ -:root.nve { --color-shades-brand-100: #ff4d52; - --color-shades-brand-150: #fb3744; +:root.nve { --color-shades-brand-100: #ff666b; + --color-shades-brand-150: #ff525d; --color-shades-brand-200: #f8253a; --color-shades-brand-250: #f3203c; --color-shades-brand-300: #e61335; @@ -13,15 +13,15 @@ --color-shades-brand-950: #500713; --color-shades-brand-999: #2b030a; --color-shades-brand-000: #fffffff; /** This token has a dark color on Varsom */ - --color-shades-brand-050: #ff5c61; + --color-shades-brand-050: #ff8083; --color-shades-grey-100: #efeff1; --color-shades-grey-150: #e4e5e7; --color-shades-grey-200: #c9cbcf; --color-shades-grey-300: #b6b9be; --color-shades-grey-400: #9ea2a9; - --color-shades-grey-500: #878c94; + --color-shades-grey-500: #858b93; --color-shades-grey-600: #60656c; - --color-shades-grey-700: #50545a; + --color-shades-grey-700: #484c51; --color-shades-grey-800: #3c3f44; --color-shades-grey-850: #292b2e; --color-shades-grey-900: #1b1c1e; @@ -216,13 +216,14 @@ --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --color-brand-background-primary: var(--color-shades-brand-500); - --color-brand-background-secondary: var(--color-shades-brand-150); + --color-brand-background-secondary: var(--color-shades-brand-500); + --color-brand-background-tertiary: var(--color-shades-brand-150); --color-brand-foreground-primary: var(--color-shades-brand-000); --color-brand-foreground-secondary: var(--color-shades-brand-999); --color-brand-foreground-tertiary: var(--color-shades-brand-700); /** was 500 */ --color-neutrals-background-canvas: var(--color-shades-grey-050); --color-neutrals-background-primary: var(--color-shades-grey-000); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-050); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-100); --color-neutrals-background-secondary: var(--color-shades-grey-150); --color-neutrals-foreground-primary: var(--color-shades-grey-999); --color-neutrals-foreground-subtle: var(--color-shades-grey-600); @@ -504,8 +505,8 @@ --font-size-x-large: var(--dimension-8x); /** 24 px */ --font-size-2x-large: var(--dimension-10x); /** 32 px */ --font-size-3x-large: var(--dimension-12x); /** 40 px */ } -:root.nve_darkmode { --color-shades-brand-100: #ff4d52; - --color-shades-brand-150: #fb3744; +:root.nve_darkmode { --color-shades-brand-100: #ff666b; + --color-shades-brand-150: #ff525d; --color-shades-brand-200: #f8253a; --color-shades-brand-250: #f3203c; --color-shades-brand-300: #e61335; @@ -519,15 +520,15 @@ --color-shades-brand-950: #500713; --color-shades-brand-999: #2b030a; --color-shades-brand-000: #fffffff; /** This token has a dark color on Varsom */ - --color-shades-brand-050: #ff5c61; + --color-shades-brand-050: #ff8083; --color-shades-grey-100: #efeff1; --color-shades-grey-150: #e4e5e7; --color-shades-grey-200: #c9cbcf; --color-shades-grey-300: #b6b9be; --color-shades-grey-400: #9ea2a9; - --color-shades-grey-500: #878c94; + --color-shades-grey-500: #858b93; --color-shades-grey-600: #60656c; - --color-shades-grey-700: #50545a; + --color-shades-grey-700: #484c51; --color-shades-grey-800: #3c3f44; --color-shades-grey-850: #292b2e; --color-shades-grey-900: #1b1c1e; @@ -721,14 +722,15 @@ --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); - --color-brand-background-primary: var(--color-shades-brand-250); - --color-brand-background-secondary: var(--color-shades-brand-800); + --color-brand-background-primary: var(--color-shades-brand-500); /** Primarily used on logo backgrounds */ + --color-brand-background-secondary: var(--color-shades-brand-250); + --color-brand-background-tertiary: var(--color-shades-brand-800); --color-brand-foreground-primary: var(--color-shades-brand-999); --color-brand-foreground-secondary: var(--color-shades-grey-000); --color-brand-foreground-tertiary: var(--color-shades-brand-250); /** was 300 */ - --color-neutrals-background-canvas: var(--color-shades-grey-850); - --color-neutrals-background-primary: var(--color-shades-grey-950); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-850); + --color-neutrals-background-canvas: var(--color-shades-grey-950); + --color-neutrals-background-primary: var(--color-shades-grey-850); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-800); --color-neutrals-background-secondary: var(--color-shades-grey-700); --color-neutrals-foreground-primary: var(--color-shades-grey-000); --color-neutrals-foreground-subtle: var(--color-shades-grey-200); diff --git a/doc-site/.vitepress/theme/styles/rme_theme.css b/doc-site/.vitepress/theme/styles/rme_theme.css index b9112fd9..7fde387b 100644 --- a/doc-site/.vitepress/theme/styles/rme_theme.css +++ b/doc-site/.vitepress/theme/styles/rme_theme.css @@ -216,13 +216,14 @@ --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --color-brand-background-primary: var(--color-shades-brand-500); - --color-brand-background-secondary: var(--color-shades-brand-150); + --color-brand-background-secondary: var(--color-shades-brand-500); + --color-brand-background-tertiary: var(--color-shades-brand-150); --color-brand-foreground-primary: var(--color-shades-brand-000); --color-brand-foreground-secondary: var(--color-shades-brand-999); --color-brand-foreground-tertiary: var(--color-shades-brand-700); /** was 500 */ --color-neutrals-background-canvas: var(--color-shades-grey-050); --color-neutrals-background-primary: var(--color-shades-grey-000); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-050); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-100); --color-neutrals-background-secondary: var(--color-shades-grey-150); --color-neutrals-foreground-primary: var(--color-shades-grey-999); --color-neutrals-foreground-subtle: var(--color-shades-grey-600); @@ -721,14 +722,15 @@ --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); - --color-brand-background-primary: var(--color-shades-brand-250); - --color-brand-background-secondary: var(--color-shades-brand-800); + --color-brand-background-primary: var(--color-shades-brand-500); /** Primarily used on logo backgrounds */ + --color-brand-background-secondary: var(--color-shades-brand-250); + --color-brand-background-tertiary: var(--color-shades-brand-800); --color-brand-foreground-primary: var(--color-shades-brand-999); --color-brand-foreground-secondary: var(--color-shades-grey-000); --color-brand-foreground-tertiary: var(--color-shades-brand-250); /** was 300 */ - --color-neutrals-background-canvas: var(--color-shades-grey-850); - --color-neutrals-background-primary: var(--color-shades-grey-950); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-850); + --color-neutrals-background-canvas: var(--color-shades-grey-950); + --color-neutrals-background-primary: var(--color-shades-grey-850); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-800); --color-neutrals-background-secondary: var(--color-shades-grey-700); --color-neutrals-foreground-primary: var(--color-shades-grey-000); --color-neutrals-foreground-subtle: var(--color-shades-grey-200); diff --git a/doc-site/.vitepress/theme/styles/varsom_theme.css b/doc-site/.vitepress/theme/styles/varsom_theme.css index ddfdfb6f..268ea101 100644 --- a/doc-site/.vitepress/theme/styles/varsom_theme.css +++ b/doc-site/.vitepress/theme/styles/varsom_theme.css @@ -1,34 +1,34 @@ -:root.varsom { --color-shades-brand-100: #fbc792; - --color-shades-brand-150: #fabf82; - --color-shades-brand-200: #f8b673; - --color-shades-brand-250: #f7ae63; - --color-shades-brand-300: #fabf82; - --color-shades-brand-400: #ff7b43; +:root.varsom { --color-shades-brand-100: #ffd1a3; + --color-shades-brand-150: #ffc38f; + --color-shades-brand-200: #ffb47a; + --color-shades-brand-250: #ffa970; + --color-shades-brand-300: #ff9152; + --color-shades-brand-400: #ff7033; --color-shades-brand-500: #ff5f1b; --color-shades-brand-600: #f44900; - --color-shades-brand-700: #f44900; - --color-shades-brand-800: #874602; - --color-shades-brand-850: #763d02; - --color-shades-brand-900: #653502; - --color-shades-brand-950: #542c01; - --color-shades-brand-999: #432301; + --color-shades-brand-700: #d64000; + --color-shades-brand-800: #9d3307; + --color-shades-brand-850: #892d06; + --color-shades-brand-900: #712809; + --color-shades-brand-950: #5c230a; + --color-shades-brand-999: #491c08; --color-shades-brand-000: #432301; - --color-shades-brand-050: #ffdfba; - --color-shades-grey-100: #f7f7f8; - --color-shades-grey-150: #c8eaf9; - --color-shades-grey-200: #7ec4e2; - --color-shades-grey-300: #b7babf; - --color-shades-grey-400: #9fa3a9; - --color-shades-grey-500: #878c94; + --color-shades-brand-050: #ffdeb8; + --color-shades-grey-100: #dff1f9; + --color-shades-grey-150: #cce9f5; + --color-shades-grey-200: #a6d8ee; + --color-shades-grey-300: #80c7e5; + --color-shades-grey-400: #43a9d5; + --color-shades-grey-500: #2d99c8; --color-shades-grey-600: #006b99; - --color-shades-grey-700: #00425f; - --color-shades-grey-800: #00425f; - --color-shades-grey-850: #002738; - --color-shades-grey-900: #1b1c1e; - --color-shades-grey-950: #00364e; - --color-shades-grey-999: #00131c; + --color-shades-grey-700: #004766; + --color-shades-grey-800: #003d57; + --color-shades-grey-850: #002a3d; + --color-shades-grey-900: #001c29; + --color-shades-grey-950: #000e14; + --color-shades-grey-999: #00070a; --color-shades-grey-000: #ffffff; - --color-shades-grey-050: #eff8fc; + --color-shades-grey-050: #eaf6fb; --color-shades-red-100: #ffc2c2; --color-shades-red-150: #ffa8a8; --color-shades-red-200: #ff9494; @@ -216,13 +216,14 @@ --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --color-brand-background-primary: var(--color-shades-brand-500); - --color-brand-background-secondary: var(--color-shades-brand-150); + --color-brand-background-secondary: var(--color-shades-brand-500); + --color-brand-background-tertiary: var(--color-shades-brand-150); --color-brand-foreground-primary: var(--color-shades-brand-000); --color-brand-foreground-secondary: var(--color-shades-brand-999); --color-brand-foreground-tertiary: var(--color-shades-brand-700); /** was 500 */ --color-neutrals-background-canvas: var(--color-shades-grey-050); --color-neutrals-background-primary: var(--color-shades-grey-000); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-050); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-100); --color-neutrals-background-secondary: var(--color-shades-grey-150); --color-neutrals-foreground-primary: var(--color-shades-grey-999); --color-neutrals-foreground-subtle: var(--color-shades-grey-600); @@ -504,37 +505,37 @@ --font-size-x-large: var(--dimension-8x); /** 24 px */ --font-size-2x-large: var(--dimension-10x); /** 32 px */ --font-size-3x-large: var(--dimension-12x); /** 40 px */ } -:root.varsom_darkmode { --color-shades-brand-100: #fbc792; - --color-shades-brand-150: #fabf82; - --color-shades-brand-200: #f8b673; - --color-shades-brand-250: #f7ae63; - --color-shades-brand-300: #fabf82; - --color-shades-brand-400: #ff7b43; +:root.varsom_darkmode { --color-shades-brand-100: #ffd1a3; + --color-shades-brand-150: #ffc38f; + --color-shades-brand-200: #ffb47a; + --color-shades-brand-250: #ffa970; + --color-shades-brand-300: #ff9152; + --color-shades-brand-400: #ff7033; --color-shades-brand-500: #ff5f1b; --color-shades-brand-600: #f44900; - --color-shades-brand-700: #f44900; - --color-shades-brand-800: #874602; - --color-shades-brand-850: #763d02; - --color-shades-brand-900: #653502; - --color-shades-brand-950: #542c01; - --color-shades-brand-999: #432301; + --color-shades-brand-700: #d64000; + --color-shades-brand-800: #9d3307; + --color-shades-brand-850: #892d06; + --color-shades-brand-900: #712809; + --color-shades-brand-950: #5c230a; + --color-shades-brand-999: #491c08; --color-shades-brand-000: #432301; - --color-shades-brand-050: #ffdfba; - --color-shades-grey-100: #f7f7f8; - --color-shades-grey-150: #c8eaf9; - --color-shades-grey-200: #7ec4e2; - --color-shades-grey-300: #b7babf; - --color-shades-grey-400: #9fa3a9; - --color-shades-grey-500: #878c94; + --color-shades-brand-050: #ffdeb8; + --color-shades-grey-100: #dff1f9; + --color-shades-grey-150: #cce9f5; + --color-shades-grey-200: #a6d8ee; + --color-shades-grey-300: #80c7e5; + --color-shades-grey-400: #43a9d5; + --color-shades-grey-500: #2d99c8; --color-shades-grey-600: #006b99; - --color-shades-grey-700: #00425f; - --color-shades-grey-800: #00425f; - --color-shades-grey-850: #002738; - --color-shades-grey-900: #1b1c1e; - --color-shades-grey-950: #00364e; - --color-shades-grey-999: #00131c; + --color-shades-grey-700: #004766; + --color-shades-grey-800: #003d57; + --color-shades-grey-850: #002a3d; + --color-shades-grey-900: #001c29; + --color-shades-grey-950: #000e14; + --color-shades-grey-999: #00070a; --color-shades-grey-000: #ffffff; - --color-shades-grey-050: #eff8fc; + --color-shades-grey-050: #eaf6fb; --color-shades-red-100: #ffc2c2; --color-shades-red-150: #ffa8a8; --color-shades-red-200: #ff9494; @@ -721,14 +722,15 @@ --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); - --color-brand-background-primary: var(--color-shades-brand-250); - --color-brand-background-secondary: var(--color-shades-brand-800); + --color-brand-background-primary: var(--color-shades-brand-500); /** Primarily used on logo backgrounds */ + --color-brand-background-secondary: var(--color-shades-brand-250); + --color-brand-background-tertiary: var(--color-shades-brand-800); --color-brand-foreground-primary: var(--color-shades-brand-999); --color-brand-foreground-secondary: var(--color-shades-grey-000); --color-brand-foreground-tertiary: var(--color-shades-brand-250); /** was 300 */ - --color-neutrals-background-canvas: var(--color-shades-grey-850); - --color-neutrals-background-primary: var(--color-shades-grey-950); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-850); + --color-neutrals-background-canvas: var(--color-shades-grey-950); + --color-neutrals-background-primary: var(--color-shades-grey-850); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-800); --color-neutrals-background-secondary: var(--color-shades-grey-700); --color-neutrals-foreground-primary: var(--color-shades-grey-000); --color-neutrals-foreground-subtle: var(--color-shades-grey-200); diff --git a/public/css/nve.css b/public/css/nve.css index e15f22d6..c2c2e3fe 100644 --- a/public/css/nve.css +++ b/public/css/nve.css @@ -4,8 +4,8 @@ @import './global.css'; :root { - --color-shades-brand-100: #ff4d52; - --color-shades-brand-150: #fb3744; + --color-shades-brand-100: #ff666b; + --color-shades-brand-150: #ff525d; --color-shades-brand-200: #f8253a; --color-shades-brand-250: #f3203c; --color-shades-brand-300: #e61335; @@ -19,15 +19,15 @@ --color-shades-brand-950: #500713; --color-shades-brand-999: #2b030a; --color-shades-brand-000: #fffffff; /** This token has a dark color on Varsom */ - --color-shades-brand-050: #ff5c61; + --color-shades-brand-050: #ff8083; --color-shades-grey-100: #efeff1; --color-shades-grey-150: #e4e5e7; --color-shades-grey-200: #c9cbcf; --color-shades-grey-300: #b6b9be; --color-shades-grey-400: #9ea2a9; - --color-shades-grey-500: #878c94; + --color-shades-grey-500: #858b93; --color-shades-grey-600: #60656c; - --color-shades-grey-700: #50545a; + --color-shades-grey-700: #484c51; --color-shades-grey-800: #3c3f44; --color-shades-grey-850: #292b2e; --color-shades-grey-900: #1b1c1e; @@ -222,13 +222,14 @@ --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --color-brand-background-primary: var(--color-shades-brand-500); - --color-brand-background-secondary: var(--color-shades-brand-150); + --color-brand-background-secondary: var(--color-shades-brand-500); + --color-brand-background-tertiary: var(--color-shades-brand-150); --color-brand-foreground-primary: var(--color-shades-brand-000); --color-brand-foreground-secondary: var(--color-shades-brand-999); --color-brand-foreground-tertiary: var(--color-shades-brand-700); /** was 500 */ --color-neutrals-background-canvas: var(--color-shades-grey-050); --color-neutrals-background-primary: var(--color-shades-grey-000); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-050); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-100); --color-neutrals-background-secondary: var(--color-shades-grey-150); --color-neutrals-foreground-primary: var(--color-shades-grey-999); --color-neutrals-foreground-subtle: var(--color-shades-grey-600); diff --git a/public/css/nve_dark.css b/public/css/nve_dark.css index a39255c1..bbb836be 100644 --- a/public/css/nve_dark.css +++ b/public/css/nve_dark.css @@ -4,8 +4,8 @@ @import './global.css'; :root.darkmode { - --color-shades-brand-100: #ff4d52; - --color-shades-brand-150: #fb3744; + --color-shades-brand-100: #ff666b; + --color-shades-brand-150: #ff525d; --color-shades-brand-200: #f8253a; --color-shades-brand-250: #f3203c; --color-shades-brand-300: #e61335; @@ -19,15 +19,15 @@ --color-shades-brand-950: #500713; --color-shades-brand-999: #2b030a; --color-shades-brand-000: #fffffff; /** This token has a dark color on Varsom */ - --color-shades-brand-050: #ff5c61; + --color-shades-brand-050: #ff8083; --color-shades-grey-100: #efeff1; --color-shades-grey-150: #e4e5e7; --color-shades-grey-200: #c9cbcf; --color-shades-grey-300: #b6b9be; --color-shades-grey-400: #9ea2a9; - --color-shades-grey-500: #878c94; + --color-shades-grey-500: #858b93; --color-shades-grey-600: #60656c; - --color-shades-grey-700: #50545a; + --color-shades-grey-700: #484c51; --color-shades-grey-800: #3c3f44; --color-shades-grey-850: #292b2e; --color-shades-grey-900: #1b1c1e; @@ -221,14 +221,15 @@ --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); - --color-brand-background-primary: var(--color-shades-brand-250); - --color-brand-background-secondary: var(--color-shades-brand-800); + --color-brand-background-primary: var(--color-shades-brand-500); /** Primarily used on logo backgrounds */ + --color-brand-background-secondary: var(--color-shades-brand-250); + --color-brand-background-tertiary: var(--color-shades-brand-800); --color-brand-foreground-primary: var(--color-shades-brand-999); --color-brand-foreground-secondary: var(--color-shades-grey-000); --color-brand-foreground-tertiary: var(--color-shades-brand-250); /** was 300 */ - --color-neutrals-background-canvas: var(--color-shades-grey-850); - --color-neutrals-background-primary: var(--color-shades-grey-950); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-850); + --color-neutrals-background-canvas: var(--color-shades-grey-950); + --color-neutrals-background-primary: var(--color-shades-grey-850); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-800); --color-neutrals-background-secondary: var(--color-shades-grey-700); --color-neutrals-foreground-primary: var(--color-shades-grey-000); --color-neutrals-foreground-subtle: var(--color-shades-grey-200); diff --git a/public/css/rme.css b/public/css/rme.css index 6e013383..7d7b07a7 100644 --- a/public/css/rme.css +++ b/public/css/rme.css @@ -222,13 +222,14 @@ --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --color-brand-background-primary: var(--color-shades-brand-500); - --color-brand-background-secondary: var(--color-shades-brand-150); + --color-brand-background-secondary: var(--color-shades-brand-500); + --color-brand-background-tertiary: var(--color-shades-brand-150); --color-brand-foreground-primary: var(--color-shades-brand-000); --color-brand-foreground-secondary: var(--color-shades-brand-999); --color-brand-foreground-tertiary: var(--color-shades-brand-700); /** was 500 */ --color-neutrals-background-canvas: var(--color-shades-grey-050); --color-neutrals-background-primary: var(--color-shades-grey-000); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-050); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-100); --color-neutrals-background-secondary: var(--color-shades-grey-150); --color-neutrals-foreground-primary: var(--color-shades-grey-999); --color-neutrals-foreground-subtle: var(--color-shades-grey-600); diff --git a/public/css/rme_dark.css b/public/css/rme_dark.css index cda1c52a..b7cdd93e 100644 --- a/public/css/rme_dark.css +++ b/public/css/rme_dark.css @@ -221,14 +221,15 @@ --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); - --color-brand-background-primary: var(--color-shades-brand-250); - --color-brand-background-secondary: var(--color-shades-brand-800); + --color-brand-background-primary: var(--color-shades-brand-500); /** Primarily used on logo backgrounds */ + --color-brand-background-secondary: var(--color-shades-brand-250); + --color-brand-background-tertiary: var(--color-shades-brand-800); --color-brand-foreground-primary: var(--color-shades-brand-999); --color-brand-foreground-secondary: var(--color-shades-grey-000); --color-brand-foreground-tertiary: var(--color-shades-brand-250); /** was 300 */ - --color-neutrals-background-canvas: var(--color-shades-grey-850); - --color-neutrals-background-primary: var(--color-shades-grey-950); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-850); + --color-neutrals-background-canvas: var(--color-shades-grey-950); + --color-neutrals-background-primary: var(--color-shades-grey-850); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-800); --color-neutrals-background-secondary: var(--color-shades-grey-700); --color-neutrals-foreground-primary: var(--color-shades-grey-000); --color-neutrals-foreground-subtle: var(--color-shades-grey-200); diff --git a/public/css/varsom.css b/public/css/varsom.css index 8bd71b2f..0c5ec443 100644 --- a/public/css/varsom.css +++ b/public/css/varsom.css @@ -4,37 +4,37 @@ @import './global.css'; :root { - --color-shades-brand-100: #fbc792; - --color-shades-brand-150: #fabf82; - --color-shades-brand-200: #f8b673; - --color-shades-brand-250: #f7ae63; - --color-shades-brand-300: #fabf82; - --color-shades-brand-400: #ff7b43; + --color-shades-brand-100: #ffd1a3; + --color-shades-brand-150: #ffc38f; + --color-shades-brand-200: #ffb47a; + --color-shades-brand-250: #ffa970; + --color-shades-brand-300: #ff9152; + --color-shades-brand-400: #ff7033; --color-shades-brand-500: #ff5f1b; --color-shades-brand-600: #f44900; - --color-shades-brand-700: #f44900; - --color-shades-brand-800: #874602; - --color-shades-brand-850: #763d02; - --color-shades-brand-900: #653502; - --color-shades-brand-950: #542c01; - --color-shades-brand-999: #432301; + --color-shades-brand-700: #d64000; + --color-shades-brand-800: #9d3307; + --color-shades-brand-850: #892d06; + --color-shades-brand-900: #712809; + --color-shades-brand-950: #5c230a; + --color-shades-brand-999: #491c08; --color-shades-brand-000: #432301; - --color-shades-brand-050: #ffdfba; - --color-shades-grey-100: #f7f7f8; - --color-shades-grey-150: #c8eaf9; - --color-shades-grey-200: #7ec4e2; - --color-shades-grey-300: #b7babf; - --color-shades-grey-400: #9fa3a9; - --color-shades-grey-500: #878c94; + --color-shades-brand-050: #ffdeb8; + --color-shades-grey-100: #dff1f9; + --color-shades-grey-150: #cce9f5; + --color-shades-grey-200: #a6d8ee; + --color-shades-grey-300: #80c7e5; + --color-shades-grey-400: #43a9d5; + --color-shades-grey-500: #2d99c8; --color-shades-grey-600: #006b99; - --color-shades-grey-700: #00425f; - --color-shades-grey-800: #00425f; - --color-shades-grey-850: #002738; - --color-shades-grey-900: #1b1c1e; - --color-shades-grey-950: #00364e; - --color-shades-grey-999: #00131c; + --color-shades-grey-700: #004766; + --color-shades-grey-800: #003d57; + --color-shades-grey-850: #002a3d; + --color-shades-grey-900: #001c29; + --color-shades-grey-950: #000e14; + --color-shades-grey-999: #00070a; --color-shades-grey-000: #ffffff; - --color-shades-grey-050: #eff8fc; + --color-shades-grey-050: #eaf6fb; --color-shades-red-100: #ffc2c2; --color-shades-red-150: #ffa8a8; --color-shades-red-200: #ff9494; @@ -222,13 +222,14 @@ --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); --color-brand-background-primary: var(--color-shades-brand-500); - --color-brand-background-secondary: var(--color-shades-brand-150); + --color-brand-background-secondary: var(--color-shades-brand-500); + --color-brand-background-tertiary: var(--color-shades-brand-150); --color-brand-foreground-primary: var(--color-shades-brand-000); --color-brand-foreground-secondary: var(--color-shades-brand-999); --color-brand-foreground-tertiary: var(--color-shades-brand-700); /** was 500 */ --color-neutrals-background-canvas: var(--color-shades-grey-050); --color-neutrals-background-primary: var(--color-shades-grey-000); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-050); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-100); --color-neutrals-background-secondary: var(--color-shades-grey-150); --color-neutrals-foreground-primary: var(--color-shades-grey-999); --color-neutrals-foreground-subtle: var(--color-shades-grey-600); diff --git a/public/css/varsom_dark.css b/public/css/varsom_dark.css index 609dc5eb..004d39d5 100644 --- a/public/css/varsom_dark.css +++ b/public/css/varsom_dark.css @@ -4,37 +4,37 @@ @import './global.css'; :root.darkmode { - --color-shades-brand-100: #fbc792; - --color-shades-brand-150: #fabf82; - --color-shades-brand-200: #f8b673; - --color-shades-brand-250: #f7ae63; - --color-shades-brand-300: #fabf82; - --color-shades-brand-400: #ff7b43; + --color-shades-brand-100: #ffd1a3; + --color-shades-brand-150: #ffc38f; + --color-shades-brand-200: #ffb47a; + --color-shades-brand-250: #ffa970; + --color-shades-brand-300: #ff9152; + --color-shades-brand-400: #ff7033; --color-shades-brand-500: #ff5f1b; --color-shades-brand-600: #f44900; - --color-shades-brand-700: #f44900; - --color-shades-brand-800: #874602; - --color-shades-brand-850: #763d02; - --color-shades-brand-900: #653502; - --color-shades-brand-950: #542c01; - --color-shades-brand-999: #432301; + --color-shades-brand-700: #d64000; + --color-shades-brand-800: #9d3307; + --color-shades-brand-850: #892d06; + --color-shades-brand-900: #712809; + --color-shades-brand-950: #5c230a; + --color-shades-brand-999: #491c08; --color-shades-brand-000: #432301; - --color-shades-brand-050: #ffdfba; - --color-shades-grey-100: #f7f7f8; - --color-shades-grey-150: #c8eaf9; - --color-shades-grey-200: #7ec4e2; - --color-shades-grey-300: #b7babf; - --color-shades-grey-400: #9fa3a9; - --color-shades-grey-500: #878c94; + --color-shades-brand-050: #ffdeb8; + --color-shades-grey-100: #dff1f9; + --color-shades-grey-150: #cce9f5; + --color-shades-grey-200: #a6d8ee; + --color-shades-grey-300: #80c7e5; + --color-shades-grey-400: #43a9d5; + --color-shades-grey-500: #2d99c8; --color-shades-grey-600: #006b99; - --color-shades-grey-700: #00425f; - --color-shades-grey-800: #00425f; - --color-shades-grey-850: #002738; - --color-shades-grey-900: #1b1c1e; - --color-shades-grey-950: #00364e; - --color-shades-grey-999: #00131c; + --color-shades-grey-700: #004766; + --color-shades-grey-800: #003d57; + --color-shades-grey-850: #002a3d; + --color-shades-grey-900: #001c29; + --color-shades-grey-950: #000e14; + --color-shades-grey-999: #00070a; --color-shades-grey-000: #ffffff; - --color-shades-grey-050: #eff8fc; + --color-shades-grey-050: #eaf6fb; --color-shades-red-100: #ffc2c2; --color-shades-red-150: #ffa8a8; --color-shades-red-200: #ff9494; @@ -221,14 +221,15 @@ --box-shadow-hard: -45px 80px 26px 0 rgba(0,0,0,0.00), -29px 51px 23px 0 rgba(0,0,0,0.01), -16px 29px 20px 0 rgba(0,0,0,0.02), -7px 13px 15px 0 rgba(0,0,0,0.03), -2px 3px 8px 0 rgba(0,0,0,0.04); --box-shadow-header: 0 4px 032px 0 rgba(0,0,0,0.02); --box-shadow-dropdown: 0 54px 15px 0 rgba(0,0,0,0.00), 0 35px 14px 0 rgba(0,0,0,0.00), 0 19px 12px 0 rgba(0,0,0,0.02), 0 9px 9px 0 rgba(0,0,0,0.03), 0 2px 5px 0 rgba(0,0,0,0.03); - --color-brand-background-primary: var(--color-shades-brand-250); - --color-brand-background-secondary: var(--color-shades-brand-800); + --color-brand-background-primary: var(--color-shades-brand-500); /** Primarily used on logo backgrounds */ + --color-brand-background-secondary: var(--color-shades-brand-250); + --color-brand-background-tertiary: var(--color-shades-brand-800); --color-brand-foreground-primary: var(--color-shades-brand-999); --color-brand-foreground-secondary: var(--color-shades-grey-000); --color-brand-foreground-tertiary: var(--color-shades-brand-250); /** was 300 */ - --color-neutrals-background-canvas: var(--color-shades-grey-850); - --color-neutrals-background-primary: var(--color-shades-grey-950); - --color-neutrals-background-primary-contrast: var(--color-shades-grey-850); + --color-neutrals-background-canvas: var(--color-shades-grey-950); + --color-neutrals-background-primary: var(--color-shades-grey-850); + --color-neutrals-background-primary-contrast: var(--color-shades-grey-800); --color-neutrals-background-secondary: var(--color-shades-grey-700); --color-neutrals-foreground-primary: var(--color-shades-grey-000); --color-neutrals-foreground-subtle: var(--color-shades-grey-200); diff --git a/tokens/$themes.json b/tokens/$themes.json index d9c51769..44362bd9 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -135,6 +135,10 @@ "$figmaCollectionId": "VariableCollectionId:1972:336", "$figmaModeId": "1972:8", "$figmaVariableReferences": { + "color-shades.brand.100": "e401fc23206d1645b3bbeda8d27041752c9cf2ba", + "color-shades.brand.150": "d5e9f67f8d4e1f95f9fdbb0fd41d875f8a0834b0", + "color-shades.brand.200": "9c063db266b79d5336efd3d7249ae7a6cd200a28", + "color-shades.brand.250": "16d08f489131afd9d2af9869d188e2d9c25f51f7", "color-shades.brand.300": "43aff2fd4008f40f7131319e3eb69dc77de9033e", "color-shades.brand.400": "b3193b1dea4a86e5c1226e9c54afb292b24c3a51", "color-shades.brand.500": "7dd87c8de2ad659bd970d1812371ae37b8736e78", @@ -145,6 +149,8 @@ "color-shades.brand.900": "3e05226e8e715522993c9e875ae8ec07c4e85ae8", "color-shades.brand.950": "83bc7a09c3cf31dbf3e88e92e7b908083f1043c8", "color-shades.brand.999": "2c9e29f3dbf0e5eda93d18ec171586d6daa315fc", + "color-shades.brand.000": "209e04905a001064851123cb49e7fbf335b11f0d", + "color-shades.brand.050": "9329667106be77a1fee37f23294a1a6f6efdc46f", "color-shades.grey.100": "9561dbd11827f2a983d5db198daad0ae911cf98d", "color-shades.grey.150": "7b307c62aebeb34af645b2a2614ca23bda0af4da", "color-shades.grey.200": "8f16211f68d4730be1adef392161961da7912e8f", @@ -386,12 +392,6 @@ "sizing.device-width.desktop-small": "991a7acae2c9b026210895a8ab52fe798f10d67a", "sizing.device-width.desktop": "e9f9bcfcf1f3fda8d51b6a612332d5de6754a428", "sizing.device-width.desktop-large": "55181fe068bdaf6d7bd5d218ab514203821569b4", - "color-shades.brand.250": "16d08f489131afd9d2af9869d188e2d9c25f51f7", - "color-shades.brand.200": "9c063db266b79d5336efd3d7249ae7a6cd200a28", - "color-shades.brand.150": "d5e9f67f8d4e1f95f9fdbb0fd41d875f8a0834b0", - "color-shades.brand.100": "e401fc23206d1645b3bbeda8d27041752c9cf2ba", - "color-shades.brand.050": "9329667106be77a1fee37f23294a1a6f6efdc46f", - "color-shades.brand.000": "209e04905a001064851123cb49e7fbf335b11f0d", "spacing.24x": "2be94cd952d9ef159058b74374490fe7ce348bf9", "spacing.40x": "fd4f866de77ac94673c60fa9630afa07e769fa03", "spacing.32x": "0fa32cda0595585b090c0e6de92d745ab26dc1c4", @@ -418,6 +418,10 @@ "$figmaCollectionId": "VariableCollectionId:1972:336", "$figmaModeId": "1972:9", "$figmaVariableReferences": { + "color-shades.brand.100": "e401fc23206d1645b3bbeda8d27041752c9cf2ba", + "color-shades.brand.150": "d5e9f67f8d4e1f95f9fdbb0fd41d875f8a0834b0", + "color-shades.brand.200": "9c063db266b79d5336efd3d7249ae7a6cd200a28", + "color-shades.brand.250": "16d08f489131afd9d2af9869d188e2d9c25f51f7", "color-shades.brand.300": "43aff2fd4008f40f7131319e3eb69dc77de9033e", "color-shades.brand.400": "b3193b1dea4a86e5c1226e9c54afb292b24c3a51", "color-shades.brand.500": "7dd87c8de2ad659bd970d1812371ae37b8736e78", @@ -428,6 +432,8 @@ "color-shades.brand.900": "3e05226e8e715522993c9e875ae8ec07c4e85ae8", "color-shades.brand.950": "83bc7a09c3cf31dbf3e88e92e7b908083f1043c8", "color-shades.brand.999": "2c9e29f3dbf0e5eda93d18ec171586d6daa315fc", + "color-shades.brand.000": "209e04905a001064851123cb49e7fbf335b11f0d", + "color-shades.brand.050": "9329667106be77a1fee37f23294a1a6f6efdc46f", "color-shades.grey.100": "9561dbd11827f2a983d5db198daad0ae911cf98d", "color-shades.grey.150": "7b307c62aebeb34af645b2a2614ca23bda0af4da", "color-shades.grey.200": "8f16211f68d4730be1adef392161961da7912e8f", @@ -669,12 +675,6 @@ "sizing.device-width.desktop-small": "991a7acae2c9b026210895a8ab52fe798f10d67a", "sizing.device-width.desktop": "e9f9bcfcf1f3fda8d51b6a612332d5de6754a428", "sizing.device-width.desktop-large": "55181fe068bdaf6d7bd5d218ab514203821569b4", - "color-shades.brand.250": "16d08f489131afd9d2af9869d188e2d9c25f51f7", - "color-shades.brand.200": "9c063db266b79d5336efd3d7249ae7a6cd200a28", - "color-shades.brand.150": "d5e9f67f8d4e1f95f9fdbb0fd41d875f8a0834b0", - "color-shades.brand.100": "e401fc23206d1645b3bbeda8d27041752c9cf2ba", - "color-shades.brand.050": "9329667106be77a1fee37f23294a1a6f6efdc46f", - "color-shades.brand.000": "209e04905a001064851123cb49e7fbf335b11f0d", "spacing.24x": "2be94cd952d9ef159058b74374490fe7ce348bf9", "spacing.40x": "fd4f866de77ac94673c60fa9630afa07e769fa03", "spacing.32x": "0fa32cda0595585b090c0e6de92d745ab26dc1c4", @@ -841,7 +841,12 @@ "$figmaCollectionId": "VariableCollectionId:1986:10", "$figmaModeId": "1986:0", "$figmaVariableReferences": { + "color.brand.background.primary": "910d9813e760ac89fdaf94bc2d748d88c9d7743d", + "color.brand.background.secondary": "312f97a0b978df6bfefba2ead92cde44acc192cb", + "color.brand.background.tertiary": "b8b8bf2fd3e2b93534099ed936d380fd67e9db6a", "color.brand.foreground.primary": "01ac9c70aaba0f8d0345be7ef55b8a9f42bc2ee9", + "color.brand.foreground.secondary": "256a1c419dc223315f819dbc423ddab06c058572", + "color.brand.foreground.tertiary": "45d6e821af5e9a9e2e4f33525bea804fd89ce791", "color.neutrals.background.canvas": "98a063add0686404a57aafebf42ffbc09ef05d7e", "color.neutrals.background.primary": "c4b12b39bcdeb1604b71bdf457a6794a35a6d0ef", "color.neutrals.background.primary-contrast": "71d4634f713a2965056809c40d92c03aa39f6bbc", @@ -980,11 +985,7 @@ "color.supplemental.emphasized.red.background": "9808092f6f5194a79b7244bc344a9bacab86490d", "color.supplemental.emphasized.red.foreground": "73fb5436467c16118707bc80f9d50bc6500c48d2", "color.supplemental.emphasized.blue.background": "ee96fb1be66cef722245c1bbc5e70d79289a68e8", - "color.supplemental.emphasized.blue.foreground": "11ac12d4268f7add230a431dba318aaeb1332025", - "color.brand.foreground.secondary": "256a1c419dc223315f819dbc423ddab06c058572", - "color.brand.background.primary": "312f97a0b978df6bfefba2ead92cde44acc192cb", - "color.brand.background.secondary": "b8b8bf2fd3e2b93534099ed936d380fd67e9db6a", - "color.brand.foreground.tertiary": "45d6e821af5e9a9e2e4f33525bea804fd89ce791" + "color.supplemental.emphasized.blue.foreground": "11ac12d4268f7add230a431dba318aaeb1332025" }, "group": "Theme" }, @@ -1150,6 +1151,12 @@ "$figmaCollectionId": "VariableCollectionId:1986:10", "$figmaModeId": "1986:1", "$figmaVariableReferences": { + "color.brand.background.primary": "910d9813e760ac89fdaf94bc2d748d88c9d7743d", + "color.brand.background.secondary": "312f97a0b978df6bfefba2ead92cde44acc192cb", + "color.brand.background.tertiary": "b8b8bf2fd3e2b93534099ed936d380fd67e9db6a", + "color.brand.foreground.primary": "01ac9c70aaba0f8d0345be7ef55b8a9f42bc2ee9", + "color.brand.foreground.secondary": "256a1c419dc223315f819dbc423ddab06c058572", + "color.brand.foreground.tertiary": "45d6e821af5e9a9e2e4f33525bea804fd89ce791", "color.neutrals.background.canvas": "98a063add0686404a57aafebf42ffbc09ef05d7e", "color.neutrals.background.primary": "c4b12b39bcdeb1604b71bdf457a6794a35a6d0ef", "color.neutrals.background.primary-contrast": "71d4634f713a2965056809c40d92c03aa39f6bbc", @@ -1288,12 +1295,7 @@ "color.supplemental.emphasized.red.background": "9808092f6f5194a79b7244bc344a9bacab86490d", "color.supplemental.emphasized.red.foreground": "73fb5436467c16118707bc80f9d50bc6500c48d2", "color.supplemental.emphasized.blue.background": "ee96fb1be66cef722245c1bbc5e70d79289a68e8", - "color.supplemental.emphasized.blue.foreground": "11ac12d4268f7add230a431dba318aaeb1332025", - "color.brand.foreground.primary": "01ac9c70aaba0f8d0345be7ef55b8a9f42bc2ee9", - "color.brand.foreground.secondary": "256a1c419dc223315f819dbc423ddab06c058572", - "color.brand.background.primary": "312f97a0b978df6bfefba2ead92cde44acc192cb", - "color.brand.background.secondary": "b8b8bf2fd3e2b93534099ed936d380fd67e9db6a", - "color.brand.foreground.tertiary": "45d6e821af5e9a9e2e4f33525bea804fd89ce791" + "color.supplemental.emphasized.blue.foreground": "11ac12d4268f7add230a431dba318aaeb1332025" }, "group": "Theme" }, @@ -2016,6 +2018,10 @@ "$figmaCollectionId": "VariableCollectionId:1972:336", "$figmaModeId": "2276:0", "$figmaVariableReferences": { + "color-shades.brand.100": "e401fc23206d1645b3bbeda8d27041752c9cf2ba", + "color-shades.brand.150": "d5e9f67f8d4e1f95f9fdbb0fd41d875f8a0834b0", + "color-shades.brand.200": "9c063db266b79d5336efd3d7249ae7a6cd200a28", + "color-shades.brand.250": "16d08f489131afd9d2af9869d188e2d9c25f51f7", "color-shades.brand.300": "43aff2fd4008f40f7131319e3eb69dc77de9033e", "color-shades.brand.400": "b3193b1dea4a86e5c1226e9c54afb292b24c3a51", "color-shades.brand.500": "7dd87c8de2ad659bd970d1812371ae37b8736e78", @@ -2026,6 +2032,8 @@ "color-shades.brand.900": "3e05226e8e715522993c9e875ae8ec07c4e85ae8", "color-shades.brand.950": "83bc7a09c3cf31dbf3e88e92e7b908083f1043c8", "color-shades.brand.999": "2c9e29f3dbf0e5eda93d18ec171586d6daa315fc", + "color-shades.brand.000": "209e04905a001064851123cb49e7fbf335b11f0d", + "color-shades.brand.050": "9329667106be77a1fee37f23294a1a6f6efdc46f", "color-shades.grey.100": "9561dbd11827f2a983d5db198daad0ae911cf98d", "color-shades.grey.150": "7b307c62aebeb34af645b2a2614ca23bda0af4da", "color-shades.grey.200": "8f16211f68d4730be1adef392161961da7912e8f", @@ -2267,12 +2275,6 @@ "sizing.device-width.desktop-small": "991a7acae2c9b026210895a8ab52fe798f10d67a", "sizing.device-width.desktop": "e9f9bcfcf1f3fda8d51b6a612332d5de6754a428", "sizing.device-width.desktop-large": "55181fe068bdaf6d7bd5d218ab514203821569b4", - "color-shades.brand.250": "16d08f489131afd9d2af9869d188e2d9c25f51f7", - "color-shades.brand.200": "9c063db266b79d5336efd3d7249ae7a6cd200a28", - "color-shades.brand.150": "d5e9f67f8d4e1f95f9fdbb0fd41d875f8a0834b0", - "color-shades.brand.100": "e401fc23206d1645b3bbeda8d27041752c9cf2ba", - "color-shades.brand.050": "9329667106be77a1fee37f23294a1a6f6efdc46f", - "color-shades.brand.000": "209e04905a001064851123cb49e7fbf335b11f0d", "spacing.24x": "2be94cd952d9ef159058b74374490fe7ce348bf9", "spacing.40x": "fd4f866de77ac94673c60fa9630afa07e769fa03", "spacing.32x": "0fa32cda0595585b090c0e6de92d745ab26dc1c4", @@ -2282,4 +2284,4 @@ }, "group": "Brand" } -] \ No newline at end of file +] diff --git a/tokens/brand/nve.json b/tokens/brand/nve.json index 4a31390e..03f1a0e2 100644 --- a/tokens/brand/nve.json +++ b/tokens/brand/nve.json @@ -3,11 +3,11 @@ "brand": { "100": { "$type": "color", - "$value": "#ff4d52" + "$value": "#FF666B" }, "150": { "$type": "color", - "$value": "#fb3744" + "$value": "#FF525D" }, "200": { "$type": "color", @@ -64,7 +64,7 @@ }, "050": { "$type": "color", - "$value": "#ff5c61" + "$value": "#FF8083" } }, "grey": { @@ -90,7 +90,7 @@ }, "500": { "$type": "color", - "$value": "#878c94" + "$value": "#858b93" }, "600": { "$type": "color", @@ -98,7 +98,7 @@ }, "700": { "$type": "color", - "$value": "#50545A" + "$value": "#484c51" }, "800": { "$type": "color", diff --git a/tokens/brand/varsom.json b/tokens/brand/varsom.json index 13da5b47..0b0ffd36 100644 --- a/tokens/brand/varsom.json +++ b/tokens/brand/varsom.json @@ -3,27 +3,27 @@ "brand": { "100": { "$type": "color", - "$value": "#fbc792" + "$value": "#FFD1A3" }, "150": { "$type": "color", - "$value": "#fabf82" + "$value": "#FFC38F" }, "200": { "$type": "color", - "$value": "#f8b673" + "$value": "#FFB47A" }, "250": { "$type": "color", - "$value": "#f7ae63" + "$value": "#FFA970" }, "300": { "$type": "color", - "$value": "#fabf82" + "$value": "#FF9152" }, "400": { "$type": "color", - "$value": "#FF7B43" + "$value": "#FF7033" }, "500": { "$type": "color", @@ -35,27 +35,27 @@ }, "700": { "$type": "color", - "$value": "#F44900" + "$value": "#D64000" }, "800": { "$type": "color", - "$value": "#874602" + "$value": "#9D3307" }, "850": { "$type": "color", - "$value": "#763d02" + "$value": "#892D06" }, "900": { "$type": "color", - "$value": "#653502" + "$value": "#712809" }, "950": { "$type": "color", - "$value": "#542c01" + "$value": "#5C230A" }, "999": { "$type": "color", - "$value": "#432301" + "$value": "#491C08" }, "000": { "$type": "color", @@ -63,61 +63,61 @@ }, "050": { "$type": "color", - "$value": "#ffdfba" + "$value": "#FFDEB8" } }, "grey": { "100": { "$type": "color", - "$value": "#f7f7f8" + "$value": "#DFF1F9" }, "150": { "$type": "color", - "$value": "#c8eaf9" + "$value": "#CCE9F5" }, "200": { "$type": "color", - "$value": "#7EC4E2" + "$value": "#A6D8EE" }, "300": { "$type": "color", - "$value": "#b7babf" + "$value": "#80C7E5" }, "400": { "$type": "color", - "$value": "#9fa3a9" + "$value": "#43A9D5" }, "500": { "$type": "color", - "$value": "#878c94" + "$value": "#2D99C8" }, "600": { "$type": "color", - "$value": "#006b99" + "$value": "#006B99" }, "700": { "$type": "color", - "$value": "#00425F" + "$value": "#004766" }, "800": { "$type": "color", - "$value": "#00425F" + "$value": "#003D57" }, "850": { "$type": "color", - "$value": "#002738" + "$value": "#002A3D" }, "900": { "$type": "color", - "$value": "#1b1c1e" + "$value": "#001C29" }, "950": { "$type": "color", - "$value": "#00364E" + "$value": "#000E14" }, "999": { "$type": "color", - "$value": "#00131C" + "$value": "#00070A" }, "000": { "$type": "color", @@ -125,8 +125,8 @@ }, "050": { "$type": "color", - "$value": "#eff8fc" + "$value": "#EAF6FB" } } } -} \ No newline at end of file +} diff --git a/tokens/public/theme/dark.json b/tokens/public/theme/dark.json index f31d3691..2600a9cf 100644 --- a/tokens/public/theme/dark.json +++ b/tokens/public/theme/dark.json @@ -4,9 +4,14 @@ "background": { "primary": { "$type": "color", - "$value": "{color-shades.brand.250}" + "$value": "{color-shades.brand.500}", + "$description": "Primarily used on logo backgrounds" }, "secondary": { + "$type": "color", + "$value": "{color-shades.brand.250}" + }, + "tertiary": { "$type": "color", "$value": "{color-shades.brand.800}" } @@ -31,15 +36,15 @@ "background": { "canvas": { "$type": "color", - "$value": "{color-shades.grey.850}" + "$value": "{color-shades.grey.950}" }, "primary": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.grey.850}" }, "primary-contrast": { "$type": "color", - "$value": "{color-shades.grey.850}" + "$value": "{color-shades.grey.800}" }, "secondary": { "$type": "color", diff --git a/tokens/public/theme/light.json b/tokens/public/theme/light.json index 2a376376..9ae67c45 100644 --- a/tokens/public/theme/light.json +++ b/tokens/public/theme/light.json @@ -7,6 +7,10 @@ "$value": "{color-shades.brand.500}" }, "secondary": { + "$type": "color", + "$value": "{color-shades.brand.500}" + }, + "tertiary": { "$type": "color", "$value": "{color-shades.brand.150}" } @@ -39,7 +43,7 @@ }, "primary-contrast": { "$type": "color", - "$value": "{color-shades.grey.050}" + "$value": "{color-shades.grey.100}" }, "secondary": { "$type": "color", @@ -709,4 +713,4 @@ } } } -} \ No newline at end of file +}