diff --git a/doc-site/.vitepress/theme/styles/nve_theme.css b/doc-site/.vitepress/theme/styles/nve_theme.css index 280d0413..f103bfab 100644 --- a/doc-site/.vitepress/theme/styles/nve_theme.css +++ b/doc-site/.vitepress/theme/styles/nve_theme.css @@ -81,7 +81,7 @@ --color-shades-functional-blue-400: #38a9ff; --color-shades-functional-blue-500: #008ffb; --color-shades-functional-blue-600: #0f81fa; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #2061b6; --color-shades-functional-blue-850: #184886; --color-shades-functional-blue-900: #163f74; @@ -163,6 +163,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -279,43 +281,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-300); --color-neutrals-border-subtle: var(--color-shades-grey-150); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-950); - --color-interactive-primary-background-hover: var(--color-shades-grey-800); - --color-interactive-primary-background-disabled: var(--color-shades-grey-950); - --color-interactive-primary-foreground-default: var(--color-shades-grey-000); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-150); - --color-interactive-secondary-background-hover: var(--color-shades-grey-200); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-150); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-950); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-500); - --color-interactive-ghost-background-hover: var(--color-shades-grey-150); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-700); - --color-interactive-links-hover: var(--color-shades-grey-950); - --color-interactive-links-focus: var(--color-shades-functional-blue-700); - --color-interactive-links-visited: var(--color-shades-grey-600); - --color-interactive-danger-background-default: var(--color-shades-functional-red-700); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-850); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-700); - --color-interactive-danger-foreground-default: var(--color-shades-grey-000); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-000); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-950); + --color-interactive-background-primary-hover: var(--color-shades-grey-600); + --color-interactive-background-primary-disabled: var(--color-shades-grey-950); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-150); + --color-interactive-background-secondary-hover: var(--color-shades-grey-200); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-150); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-150); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-950); + --color-interactive-foreground-link-visited: var(--color-shades-grey-600); + --color-interactive-border-primary-enabled: var(--color-shades-grey-999); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-600-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-999); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-950); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-500); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */ --color-feedback-background-default-info: var(--color-shades-functional-blue-100); --color-feedback-background-default-error: var(--color-shades-functional-red-050); @@ -769,7 +757,7 @@ --color-shades-functional-blue-400: #38a9ff; --color-shades-functional-blue-500: #008ffb; --color-shades-functional-blue-600: #0f81fa; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #2061b6; --color-shades-functional-blue-850: #184886; --color-shades-functional-blue-900: #163f74; @@ -851,6 +839,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -967,43 +957,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-600); --color-neutrals-border-subtle: var(--color-shades-grey-700); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-000); - --color-interactive-primary-background-hover: var(--color-shades-grey-150); - --color-interactive-primary-background-disabled: var(--color-shades-grey-000); - --color-interactive-primary-foreground-default: var(--color-shades-grey-950); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-700); - --color-interactive-secondary-background-hover: var(--color-shades-grey-600); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-700); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-000); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-600); - --color-interactive-ghost-background-hover: var(--color-shades-grey-700); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-400); - --color-interactive-links-hover: var(--color-shades-grey-000); - --color-interactive-links-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-visited: var(--color-shades-grey-200); - --color-interactive-danger-background-default: var(--color-shades-functional-red-500); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-400); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-500); - --color-interactive-danger-foreground-default: var(--color-shades-grey-950); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-950); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-000); + --color-interactive-background-primary-hover: var(--color-shades-grey-150); + --color-interactive-background-primary-disabled: var(--color-shades-grey-000); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-700); + --color-interactive-background-secondary-hover: var(--color-shades-grey-600); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-700); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-700); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-200); + --color-interactive-foreground-link-visited: var(--color-shades-grey-200); + --color-interactive-border-primary-enabled: var(--color-shades-grey-000); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-100-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-000); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-000); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-600); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800); --color-feedback-background-default-info: var(--color-shades-functional-blue-850); --color-feedback-background-default-error: var(--color-shades-functional-red-850); diff --git a/doc-site/.vitepress/theme/styles/rme_theme.css b/doc-site/.vitepress/theme/styles/rme_theme.css index ad7c0c28..da8f4166 100644 --- a/doc-site/.vitepress/theme/styles/rme_theme.css +++ b/doc-site/.vitepress/theme/styles/rme_theme.css @@ -81,7 +81,7 @@ --color-shades-functional-blue-400: #38a9ff; --color-shades-functional-blue-500: #008ffb; --color-shades-functional-blue-600: #0f81fa; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #2061b6; --color-shades-functional-blue-850: #184886; --color-shades-functional-blue-900: #163f74; @@ -163,6 +163,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -279,43 +281,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-300); --color-neutrals-border-subtle: var(--color-shades-grey-150); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-950); - --color-interactive-primary-background-hover: var(--color-shades-grey-800); - --color-interactive-primary-background-disabled: var(--color-shades-grey-950); - --color-interactive-primary-foreground-default: var(--color-shades-grey-000); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-150); - --color-interactive-secondary-background-hover: var(--color-shades-grey-200); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-150); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-950); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-500); - --color-interactive-ghost-background-hover: var(--color-shades-grey-150); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-700); - --color-interactive-links-hover: var(--color-shades-grey-950); - --color-interactive-links-focus: var(--color-shades-functional-blue-700); - --color-interactive-links-visited: var(--color-shades-grey-600); - --color-interactive-danger-background-default: var(--color-shades-functional-red-700); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-850); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-700); - --color-interactive-danger-foreground-default: var(--color-shades-grey-000); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-000); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-950); + --color-interactive-background-primary-hover: var(--color-shades-grey-600); + --color-interactive-background-primary-disabled: var(--color-shades-grey-950); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-150); + --color-interactive-background-secondary-hover: var(--color-shades-grey-200); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-150); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-150); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-950); + --color-interactive-foreground-link-visited: var(--color-shades-grey-600); + --color-interactive-border-primary-enabled: var(--color-shades-grey-999); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-600-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-999); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-950); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-500); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */ --color-feedback-background-default-info: var(--color-shades-functional-blue-100); --color-feedback-background-default-error: var(--color-shades-functional-red-050); @@ -769,7 +757,7 @@ --color-shades-functional-blue-400: #38a9ff; --color-shades-functional-blue-500: #008ffb; --color-shades-functional-blue-600: #0f81fa; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #2061b6; --color-shades-functional-blue-850: #184886; --color-shades-functional-blue-900: #163f74; @@ -851,6 +839,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -967,43 +957,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-600); --color-neutrals-border-subtle: var(--color-shades-grey-700); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-000); - --color-interactive-primary-background-hover: var(--color-shades-grey-150); - --color-interactive-primary-background-disabled: var(--color-shades-grey-000); - --color-interactive-primary-foreground-default: var(--color-shades-grey-950); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-700); - --color-interactive-secondary-background-hover: var(--color-shades-grey-600); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-700); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-000); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-600); - --color-interactive-ghost-background-hover: var(--color-shades-grey-700); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-400); - --color-interactive-links-hover: var(--color-shades-grey-000); - --color-interactive-links-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-visited: var(--color-shades-grey-200); - --color-interactive-danger-background-default: var(--color-shades-functional-red-500); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-400); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-500); - --color-interactive-danger-foreground-default: var(--color-shades-grey-950); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-950); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-000); + --color-interactive-background-primary-hover: var(--color-shades-grey-150); + --color-interactive-background-primary-disabled: var(--color-shades-grey-000); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-700); + --color-interactive-background-secondary-hover: var(--color-shades-grey-600); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-700); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-700); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-200); + --color-interactive-foreground-link-visited: var(--color-shades-grey-200); + --color-interactive-border-primary-enabled: var(--color-shades-grey-000); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-100-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-000); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-000); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-600); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800); --color-feedback-background-default-info: var(--color-shades-functional-blue-850); --color-feedback-background-default-error: var(--color-shades-functional-red-850); diff --git a/doc-site/.vitepress/theme/styles/varsom_theme.css b/doc-site/.vitepress/theme/styles/varsom_theme.css index 818c7e02..2324ef26 100644 --- a/doc-site/.vitepress/theme/styles/varsom_theme.css +++ b/doc-site/.vitepress/theme/styles/varsom_theme.css @@ -81,7 +81,7 @@ --color-shades-functional-blue-400: #38a2ff; --color-shades-functional-blue-500: #0085fa; --color-shades-functional-blue-600: #087cf7; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #1f5fb2; --color-shades-functional-blue-850: #1e4476; --color-shades-functional-blue-900: #1e3d67; @@ -163,6 +163,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -279,43 +281,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-300); --color-neutrals-border-subtle: var(--color-shades-grey-150); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-950); - --color-interactive-primary-background-hover: var(--color-shades-grey-800); - --color-interactive-primary-background-disabled: var(--color-shades-grey-950); - --color-interactive-primary-foreground-default: var(--color-shades-grey-000); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-150); - --color-interactive-secondary-background-hover: var(--color-shades-grey-200); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-150); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-950); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-500); - --color-interactive-ghost-background-hover: var(--color-shades-grey-150); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-700); - --color-interactive-links-hover: var(--color-shades-grey-950); - --color-interactive-links-focus: var(--color-shades-functional-blue-700); - --color-interactive-links-visited: var(--color-shades-grey-600); - --color-interactive-danger-background-default: var(--color-shades-functional-red-700); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-850); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-700); - --color-interactive-danger-foreground-default: var(--color-shades-grey-000); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-000); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-950); + --color-interactive-background-primary-hover: var(--color-shades-grey-600); + --color-interactive-background-primary-disabled: var(--color-shades-grey-950); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-150); + --color-interactive-background-secondary-hover: var(--color-shades-grey-200); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-150); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-150); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-950); + --color-interactive-foreground-link-visited: var(--color-shades-grey-600); + --color-interactive-border-primary-enabled: var(--color-shades-grey-999); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-600-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-999); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-950); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-500); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */ --color-feedback-background-default-info: var(--color-shades-functional-blue-100); --color-feedback-background-default-error: var(--color-shades-functional-red-050); @@ -769,7 +757,7 @@ --color-shades-functional-blue-400: #38a2ff; --color-shades-functional-blue-500: #0085fa; --color-shades-functional-blue-600: #087cf7; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #1f5fb2; --color-shades-functional-blue-850: #1e4476; --color-shades-functional-blue-900: #1e3d67; @@ -851,6 +839,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -967,43 +957,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-600); --color-neutrals-border-subtle: var(--color-shades-grey-700); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-000); - --color-interactive-primary-background-hover: var(--color-shades-grey-150); - --color-interactive-primary-background-disabled: var(--color-shades-grey-000); - --color-interactive-primary-foreground-default: var(--color-shades-grey-950); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-700); - --color-interactive-secondary-background-hover: var(--color-shades-grey-600); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-700); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-000); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-600); - --color-interactive-ghost-background-hover: var(--color-shades-grey-700); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-400); - --color-interactive-links-hover: var(--color-shades-grey-000); - --color-interactive-links-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-visited: var(--color-shades-grey-200); - --color-interactive-danger-background-default: var(--color-shades-functional-red-500); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-400); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-500); - --color-interactive-danger-foreground-default: var(--color-shades-grey-950); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-950); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-000); + --color-interactive-background-primary-hover: var(--color-shades-grey-150); + --color-interactive-background-primary-disabled: var(--color-shades-grey-000); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-700); + --color-interactive-background-secondary-hover: var(--color-shades-grey-600); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-700); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-700); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-200); + --color-interactive-foreground-link-visited: var(--color-shades-grey-200); + --color-interactive-border-primary-enabled: var(--color-shades-grey-000); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-100-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-000); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-000); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-600); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800); --color-feedback-background-default-info: var(--color-shades-functional-blue-850); --color-feedback-background-default-error: var(--color-shades-functional-red-850); diff --git a/public/css/nve.css b/public/css/nve.css index a2a53727..ee939fd8 100644 --- a/public/css/nve.css +++ b/public/css/nve.css @@ -87,7 +87,7 @@ --color-shades-functional-blue-400: #38a9ff; --color-shades-functional-blue-500: #008ffb; --color-shades-functional-blue-600: #0f81fa; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #2061b6; --color-shades-functional-blue-850: #184886; --color-shades-functional-blue-900: #163f74; @@ -169,6 +169,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -285,43 +287,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-300); --color-neutrals-border-subtle: var(--color-shades-grey-150); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-950); - --color-interactive-primary-background-hover: var(--color-shades-grey-800); - --color-interactive-primary-background-disabled: var(--color-shades-grey-950); - --color-interactive-primary-foreground-default: var(--color-shades-grey-000); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-150); - --color-interactive-secondary-background-hover: var(--color-shades-grey-200); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-150); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-950); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-500); - --color-interactive-ghost-background-hover: var(--color-shades-grey-150); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-700); - --color-interactive-links-hover: var(--color-shades-grey-950); - --color-interactive-links-focus: var(--color-shades-functional-blue-700); - --color-interactive-links-visited: var(--color-shades-grey-600); - --color-interactive-danger-background-default: var(--color-shades-functional-red-700); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-850); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-700); - --color-interactive-danger-foreground-default: var(--color-shades-grey-000); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-000); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-950); + --color-interactive-background-primary-hover: var(--color-shades-grey-600); + --color-interactive-background-primary-disabled: var(--color-shades-grey-950); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-150); + --color-interactive-background-secondary-hover: var(--color-shades-grey-200); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-150); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-150); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-950); + --color-interactive-foreground-link-visited: var(--color-shades-grey-600); + --color-interactive-border-primary-enabled: var(--color-shades-grey-999); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-600-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-999); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-950); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-500); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */ --color-feedback-background-default-info: var(--color-shades-functional-blue-100); --color-feedback-background-default-error: var(--color-shades-functional-red-050); diff --git a/public/css/nve_dark.css b/public/css/nve_dark.css index 731b89b1..559fde87 100644 --- a/public/css/nve_dark.css +++ b/public/css/nve_dark.css @@ -87,7 +87,7 @@ --color-shades-functional-blue-400: #38a9ff; --color-shades-functional-blue-500: #008ffb; --color-shades-functional-blue-600: #0f81fa; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #2061b6; --color-shades-functional-blue-850: #184886; --color-shades-functional-blue-900: #163f74; @@ -169,6 +169,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -285,43 +287,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-600); --color-neutrals-border-subtle: var(--color-shades-grey-700); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-000); - --color-interactive-primary-background-hover: var(--color-shades-grey-150); - --color-interactive-primary-background-disabled: var(--color-shades-grey-000); - --color-interactive-primary-foreground-default: var(--color-shades-grey-950); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-700); - --color-interactive-secondary-background-hover: var(--color-shades-grey-600); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-700); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-000); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-600); - --color-interactive-ghost-background-hover: var(--color-shades-grey-700); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-400); - --color-interactive-links-hover: var(--color-shades-grey-000); - --color-interactive-links-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-visited: var(--color-shades-grey-200); - --color-interactive-danger-background-default: var(--color-shades-functional-red-500); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-400); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-500); - --color-interactive-danger-foreground-default: var(--color-shades-grey-950); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-950); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-000); + --color-interactive-background-primary-hover: var(--color-shades-grey-150); + --color-interactive-background-primary-disabled: var(--color-shades-grey-000); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-700); + --color-interactive-background-secondary-hover: var(--color-shades-grey-600); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-700); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-700); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-200); + --color-interactive-foreground-link-visited: var(--color-shades-grey-200); + --color-interactive-border-primary-enabled: var(--color-shades-grey-000); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-100-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-000); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-000); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-600); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800); --color-feedback-background-default-info: var(--color-shades-functional-blue-850); --color-feedback-background-default-error: var(--color-shades-functional-red-850); diff --git a/public/css/rme.css b/public/css/rme.css index 31f34333..5cb3e696 100644 --- a/public/css/rme.css +++ b/public/css/rme.css @@ -87,7 +87,7 @@ --color-shades-functional-blue-400: #38a9ff; --color-shades-functional-blue-500: #008ffb; --color-shades-functional-blue-600: #0f81fa; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #2061b6; --color-shades-functional-blue-850: #184886; --color-shades-functional-blue-900: #163f74; @@ -169,6 +169,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -285,43 +287,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-300); --color-neutrals-border-subtle: var(--color-shades-grey-150); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-950); - --color-interactive-primary-background-hover: var(--color-shades-grey-800); - --color-interactive-primary-background-disabled: var(--color-shades-grey-950); - --color-interactive-primary-foreground-default: var(--color-shades-grey-000); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-150); - --color-interactive-secondary-background-hover: var(--color-shades-grey-200); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-150); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-950); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-500); - --color-interactive-ghost-background-hover: var(--color-shades-grey-150); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-700); - --color-interactive-links-hover: var(--color-shades-grey-950); - --color-interactive-links-focus: var(--color-shades-functional-blue-700); - --color-interactive-links-visited: var(--color-shades-grey-600); - --color-interactive-danger-background-default: var(--color-shades-functional-red-700); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-850); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-700); - --color-interactive-danger-foreground-default: var(--color-shades-grey-000); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-000); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-950); + --color-interactive-background-primary-hover: var(--color-shades-grey-600); + --color-interactive-background-primary-disabled: var(--color-shades-grey-950); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-150); + --color-interactive-background-secondary-hover: var(--color-shades-grey-200); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-150); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-150); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-950); + --color-interactive-foreground-link-visited: var(--color-shades-grey-600); + --color-interactive-border-primary-enabled: var(--color-shades-grey-999); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-600-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-999); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-950); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-500); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */ --color-feedback-background-default-info: var(--color-shades-functional-blue-100); --color-feedback-background-default-error: var(--color-shades-functional-red-050); diff --git a/public/css/rme_dark.css b/public/css/rme_dark.css index 8d1f718a..0ae03716 100644 --- a/public/css/rme_dark.css +++ b/public/css/rme_dark.css @@ -87,7 +87,7 @@ --color-shades-functional-blue-400: #38a9ff; --color-shades-functional-blue-500: #008ffb; --color-shades-functional-blue-600: #0f81fa; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #2061b6; --color-shades-functional-blue-850: #184886; --color-shades-functional-blue-900: #163f74; @@ -169,6 +169,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -285,43 +287,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-600); --color-neutrals-border-subtle: var(--color-shades-grey-700); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-000); - --color-interactive-primary-background-hover: var(--color-shades-grey-150); - --color-interactive-primary-background-disabled: var(--color-shades-grey-000); - --color-interactive-primary-foreground-default: var(--color-shades-grey-950); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-700); - --color-interactive-secondary-background-hover: var(--color-shades-grey-600); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-700); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-000); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-600); - --color-interactive-ghost-background-hover: var(--color-shades-grey-700); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-400); - --color-interactive-links-hover: var(--color-shades-grey-000); - --color-interactive-links-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-visited: var(--color-shades-grey-200); - --color-interactive-danger-background-default: var(--color-shades-functional-red-500); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-400); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-500); - --color-interactive-danger-foreground-default: var(--color-shades-grey-950); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-950); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-000); + --color-interactive-background-primary-hover: var(--color-shades-grey-150); + --color-interactive-background-primary-disabled: var(--color-shades-grey-000); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-700); + --color-interactive-background-secondary-hover: var(--color-shades-grey-600); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-700); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-700); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-200); + --color-interactive-foreground-link-visited: var(--color-shades-grey-200); + --color-interactive-border-primary-enabled: var(--color-shades-grey-000); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-100-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-000); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-000); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-600); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800); --color-feedback-background-default-info: var(--color-shades-functional-blue-850); --color-feedback-background-default-error: var(--color-shades-functional-red-850); diff --git a/public/css/varsom.css b/public/css/varsom.css index f60abe64..de00295b 100644 --- a/public/css/varsom.css +++ b/public/css/varsom.css @@ -87,7 +87,7 @@ --color-shades-functional-blue-400: #38a2ff; --color-shades-functional-blue-500: #0085fa; --color-shades-functional-blue-600: #087cf7; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #1f5fb2; --color-shades-functional-blue-850: #1e4476; --color-shades-functional-blue-900: #1e3d67; @@ -169,6 +169,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -285,43 +287,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-300); --color-neutrals-border-subtle: var(--color-shades-grey-150); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-950); - --color-interactive-primary-background-hover: var(--color-shades-grey-800); - --color-interactive-primary-background-disabled: var(--color-shades-grey-950); - --color-interactive-primary-foreground-default: var(--color-shades-grey-000); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-150); - --color-interactive-secondary-background-hover: var(--color-shades-grey-200); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-150); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-950); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-950); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-500); - --color-interactive-ghost-background-hover: var(--color-shades-grey-150); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-950); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-700); - --color-interactive-links-hover: var(--color-shades-grey-950); - --color-interactive-links-focus: var(--color-shades-functional-blue-700); - --color-interactive-links-visited: var(--color-shades-grey-600); - --color-interactive-danger-background-default: var(--color-shades-functional-red-700); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-850); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-700); - --color-interactive-danger-foreground-default: var(--color-shades-grey-000); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-000); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-950); + --color-interactive-background-primary-hover: var(--color-shades-grey-600); + --color-interactive-background-primary-disabled: var(--color-shades-grey-950); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-150); + --color-interactive-background-secondary-hover: var(--color-shades-grey-200); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-150); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-150); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-700); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-950); + --color-interactive-foreground-link-visited: var(--color-shades-grey-600); + --color-interactive-border-primary-enabled: var(--color-shades-grey-999); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-600-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-999); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-950); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-500); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-150); /** For neutral messages */ --color-feedback-background-default-info: var(--color-shades-functional-blue-100); --color-feedback-background-default-error: var(--color-shades-functional-red-050); diff --git a/public/css/varsom_dark.css b/public/css/varsom_dark.css index 2f29420f..972e7356 100644 --- a/public/css/varsom_dark.css +++ b/public/css/varsom_dark.css @@ -87,7 +87,7 @@ --color-shades-functional-blue-400: #38a2ff; --color-shades-functional-blue-500: #0085fa; --color-shades-functional-blue-600: #087cf7; - --color-shades-functional-blue-700: #1e6fdc; + --color-shades-functional-blue-700: #1d6dd7; --color-shades-functional-blue-800: #1f5fb2; --color-shades-functional-blue-850: #1e4476; --color-shades-functional-blue-900: #1e3d67; @@ -169,6 +169,8 @@ --color-shades-functional-neutralgrey-950: #0d0d0e; --color-shades-functional-neutralgrey-999: #0d0d0e; --color-shades-functional-neutralgrey-000: #ffffff; + --color-shades-functional-neutralgrey-100-050: rgba(238, 239, 241, 0.5); + --color-shades-functional-neutralgrey-600-050: rgba(96, 101, 108, 0.5); --color-shades-functional-neutralgrey-050: #f7f7f8; --color-shades-additional-lime-100: #eaf4da; --color-shades-additional-lime-150: #dfeec8; @@ -285,43 +287,29 @@ --color-neutrals-border-mute: var(--color-shades-grey-600); --color-neutrals-border-subtle: var(--color-shades-grey-700); --color-neutrals-border-disabled: var(--color-shades-grey-500); - --color-interactive-primary-background-default: var(--color-shades-grey-000); - --color-interactive-primary-background-hover: var(--color-shades-grey-150); - --color-interactive-primary-background-disabled: var(--color-shades-grey-000); - --color-interactive-primary-foreground-default: var(--color-shades-grey-950); - --color-interactive-primary-foreground-hover: var(--color-shades-grey-950); - --color-interactive-primary-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-primary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-secondary-background-default: var(--color-shades-grey-700); - --color-interactive-secondary-background-hover: var(--color-shades-grey-600); - --color-interactive-secondary-background-disabled: var(--color-shades-grey-700); - --color-interactive-secondary-foreground-default: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-hover: var(--color-shades-grey-000); - --color-interactive-secondary-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-secondary-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-foreground-default: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-hover: var(--color-shades-grey-000); - --color-interactive-outlined-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-outlined-border-default: var(--color-shades-grey-500); - --color-interactive-outlined-border-hover: var(--color-shades-grey-000); - --color-interactive-outlined-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-outlined-border-disabled: var(--color-shades-grey-600); - --color-interactive-ghost-background-hover: var(--color-shades-grey-700); - --color-interactive-ghost-foreground-default: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-hover: var(--color-shades-grey-000); - --color-interactive-ghost-foreground-disabled: var(--color-shades-grey-000); - --color-interactive-ghost-border-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-default: var(--color-shades-functional-blue-400); - --color-interactive-links-hover: var(--color-shades-grey-000); - --color-interactive-links-focus: var(--color-shades-functional-blue-500); - --color-interactive-links-visited: var(--color-shades-grey-200); - --color-interactive-danger-background-default: var(--color-shades-functional-red-500); - --color-interactive-danger-background-hover: var(--color-shades-functional-red-400); - --color-interactive-danger-background-disabled: var(--color-shades-functional-red-500); - --color-interactive-danger-foreground-default: var(--color-shades-grey-950); - --color-interactive-danger-foreground-hover: var(--color-shades-grey-950); - --color-interactive-danger-foreground-disabled: var(--color-shades-grey-950); - --color-interactive-danger-border-focus: var(--color-shades-functional-blue-500); + --color-interactive-background-primary-enabled: var(--color-shades-grey-000); + --color-interactive-background-primary-hover: var(--color-shades-grey-150); + --color-interactive-background-primary-disabled: var(--color-shades-grey-000); + --color-interactive-background-secondary-enabled: var(--color-shades-grey-700); + --color-interactive-background-secondary-hover: var(--color-shades-grey-600); + --color-interactive-background-secondary-disabled: var(--color-shades-grey-700); + --color-interactive-background-tertiary-hover: var(--color-shades-grey-700); + --color-interactive-foreground-primary-enabled: var(--color-shades-grey-950); + --color-interactive-foreground-primary-hover: var(--color-shades-grey-950); + --color-interactive-foreground-primary-disabled: var(--color-shades-grey-950); + --color-interactive-foreground-secondary-enabled: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-hover: var(--color-shades-grey-000); + --color-interactive-foreground-secondary-disabled: var(--color-shades-grey-000); + --color-interactive-foreground-link-enabled: var(--color-shades-functional-blue-400); + --color-interactive-foreground-link-hover: var(--color-shades-functional-blue-200); + --color-interactive-foreground-link-visited: var(--color-shades-grey-200); + --color-interactive-border-primary-enabled: var(--color-shades-grey-000); + --color-interactive-border-primary-hover: var(--color-shades-functional-neutralgrey-100-050); + --color-interactive-border-primary-disabled: var(--color-shades-grey-000); + --color-interactive-border-secondary-enabled: var(--color-shades-grey-500); + --color-interactive-border-secondary-hover: var(--color-shades-grey-000); + --color-interactive-border-secondary-disabled: var(--color-shades-grey-600); + --color-interactive-border-accessibility-focus: var(--color-shades-functional-blue-500); --color-feedback-background-default-neutral: var(--color-shades-functional-neutralgrey-800); --color-feedback-background-default-info: var(--color-shades-functional-blue-850); --color-feedback-background-default-error: var(--color-shades-functional-red-850); diff --git a/tokens/$themes.json b/tokens/$themes.json index f2f64773..7d3d79b5 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -304,6 +304,8 @@ "color-shades.functional.neutralgrey.950": "6817186c6602e5e670b2b591887508197c673128", "color-shades.functional.neutralgrey.999": "4978e6f7f004af83b6a9270d88ece9441596bf7e", "color-shades.functional.neutralgrey.000": "8367a465eaac3314aef8655ebf0e729a722f9d02", + "color-shades.functional.neutralgrey.100-050": "969222f830736c128749c33dc9db63f6c2790a27", + "color-shades.functional.neutralgrey.600-050": "1573ed1672bf90c1416147f626a54618fabf9839", "color-shades.functional.neutralgrey.050": "b5d0276e6fb63ba300fd54b4ceeea3f3229e3ff7", "color-shades.additional.lime.100": "ef6e675fb5dab63afca149ee281c2a56125a57d1", "color-shades.additional.lime.150": "f99487c8ddd96f4a42e6de7e5960c0043569e3c2", @@ -689,6 +691,8 @@ "color-shades.functional.neutralgrey.950": "6817186c6602e5e670b2b591887508197c673128", "color-shades.functional.neutralgrey.999": "4978e6f7f004af83b6a9270d88ece9441596bf7e", "color-shades.functional.neutralgrey.000": "8367a465eaac3314aef8655ebf0e729a722f9d02", + "color-shades.functional.neutralgrey.100-050": "969222f830736c128749c33dc9db63f6c2790a27", + "color-shades.functional.neutralgrey.600-050": "1573ed1672bf90c1416147f626a54618fabf9839", "color-shades.functional.neutralgrey.050": "b5d0276e6fb63ba300fd54b4ceeea3f3229e3ff7", "color-shades.additional.lime.100": "ef6e675fb5dab63afca149ee281c2a56125a57d1", "color-shades.additional.lime.150": "f99487c8ddd96f4a42e6de7e5960c0043569e3c2", @@ -1081,43 +1085,27 @@ "color.neutrals.border.mute": "5d9a8fc9b75c1ce8463f3178e9e6414b4d18b75a", "color.neutrals.border.subtle": "283146ae0147ec4b20f312edb29074250f5359fa", "color.neutrals.border.disabled": "a8444debb4e0f90291787d98e1b17d825155c091", - "color.interactive.primary.background.default": "c3c4e39a7d8c6e6dd1fef0841d03dfdf083ea03b", - "color.interactive.primary.background.hover": "d0904907beba8db9f5171714e946d81c164038f1", - "color.interactive.primary.background.disabled": "7353b344a6853703eb33183207be7e7df29d941f", - "color.interactive.primary.foreground.default": "25c1ec8946363e1b8a759b8795b86513058edb48", - "color.interactive.primary.foreground.hover": "036eff9f6d4045e317dc97b76057ba6b2346b76f", - "color.interactive.primary.foreground.disabled": "a0aa4434ec5ea8eab8d80965610745b9a89e992f", - "color.interactive.primary.border.focus": "b3f3d9f740023df75632763c172903b4333d5bd1", - "color.interactive.secondary.background.default": "8c7fb3d7685c89acaf7059db70a5941a645388ff", - "color.interactive.secondary.background.hover": "9e653e0329fe924c2c94f8213005cba7b086a77d", - "color.interactive.secondary.background.disabled": "cab9cd603e97384382c4977451c2e657f4824a35", - "color.interactive.secondary.foreground.default": "f2c08ed0d479f8d901043aa5e31d5241da1dda2e", - "color.interactive.secondary.foreground.hover": "c1d92600e81abb1b6bf6911f380d1b98a6416fbc", - "color.interactive.secondary.foreground.disabled": "72107d4bea6e2ef15a35485539928a4e2e56d7a2", - "color.interactive.secondary.border.focus": "cbb508fdcd4c7379e26c39c34f1016ef3e6daa8a", - "color.interactive.outlined.foreground.default": "f40f6f9802b62d88e315075e25eb063e960c06d4", - "color.interactive.outlined.foreground.hover": "9ce95721e285a56f8adecc14d0626aab9e0a9bc8", - "color.interactive.outlined.foreground.disabled": "1e8b7cc66a3f3ca4608e607835f3031b9454d7a4", - "color.interactive.outlined.border.default": "d524e3913da28f6267542fec33ab1ad84459a948", - "color.interactive.outlined.border.hover": "a88568f44ded41510d80fcd7cb4c9d6633a9b929", - "color.interactive.outlined.border.focus": "a661f3ea210ed34ef2a43bd07ccd96389e54a67a", - "color.interactive.outlined.border.disabled": "593a28560b76a570c37e9b573f68292beb635f2f", - "color.interactive.ghost.background.hover": "ee9f969e737f597367ff234c6040301992daa741", - "color.interactive.ghost.foreground.default": "11029649474b110530bd16b565e2a432a97df7e0", - "color.interactive.ghost.foreground.hover": "e2f306ccd85fc79d4dd61b901f8c14289ad2d662", - "color.interactive.ghost.foreground.disabled": "e97f327e15e5d2ddfd10b80487b1b1ec4efb2476", - "color.interactive.ghost.border.focus": "90d79fe321b7893f89fb6944addb99016c844f74", - "color.interactive.links.default": "0bbcbd1a5b8abfb3aec0990b23c02681d7efde64", - "color.interactive.links.hover": "bc6c0e3e17300a85e87e0cc99477d43cbe8b8ad3", - "color.interactive.links.focus": "bb63e661f3d615f13d224310c14146967ab064f2", - "color.interactive.links.visited": "449964460a6f72c71dc25680d2b32cb7799a9f60", - "color.interactive.danger.background.default": "16489e218866f9f4ec4b3fe6991a054b9de1abf1", - "color.interactive.danger.background.hover": "6e991f3bc688094c49c2edfe8b348f6b1f1f1187", - "color.interactive.danger.background.disabled": "49fb9052b637cc7b92dece938b3a9a000c012960", - "color.interactive.danger.foreground.default": "39d20394a8cdf54f96665674df31d586f2be530d", - "color.interactive.danger.foreground.hover": "e02689ca74fe86206753c936b1ee6d45112dce16", - "color.interactive.danger.foreground.disabled": "9bbe803e02e47889d6d5d7a6b850e2a5ab88e5e5", - "color.interactive.danger.border.focus": "0da19c2bd8db6aad294f1aec4402c5ba6a9bd0fa", + "color.interactive.background.primary.enabled": "c3c4e39a7d8c6e6dd1fef0841d03dfdf083ea03b", + "color.interactive.background.primary.hover": "d0904907beba8db9f5171714e946d81c164038f1", + "color.interactive.background.primary.disabled": "7353b344a6853703eb33183207be7e7df29d941f", + "color.interactive.background.secondary.enabled": "8c7fb3d7685c89acaf7059db70a5941a645388ff", + "color.interactive.background.secondary.hover": "9e653e0329fe924c2c94f8213005cba7b086a77d", + "color.interactive.background.secondary.disabled": "cab9cd603e97384382c4977451c2e657f4824a35", + "color.interactive.background.tertiary.hover": "ee9f969e737f597367ff234c6040301992daa741", + "color.interactive.foreground.primary.enabled": "25c1ec8946363e1b8a759b8795b86513058edb48", + "color.interactive.foreground.primary.hover": "036eff9f6d4045e317dc97b76057ba6b2346b76f", + "color.interactive.foreground.primary.disabled": "a0aa4434ec5ea8eab8d80965610745b9a89e992f", + "color.interactive.foreground.secondary.enabled": "f2c08ed0d479f8d901043aa5e31d5241da1dda2e", + "color.interactive.foreground.secondary.hover": "c1d92600e81abb1b6bf6911f380d1b98a6416fbc", + "color.interactive.foreground.secondary.disabled": "72107d4bea6e2ef15a35485539928a4e2e56d7a2", + "color.interactive.foreground.link.enabled": "0bbcbd1a5b8abfb3aec0990b23c02681d7efde64", + "color.interactive.foreground.link.hover": "bc6c0e3e17300a85e87e0cc99477d43cbe8b8ad3", + "color.interactive.foreground.link.visited": "449964460a6f72c71dc25680d2b32cb7799a9f60", + "color.interactive.border.primary.enabled": "d87443486bd3dfa8ee9a4cba148914b558b3fd06", + "color.interactive.border.secondary.enabled": "d524e3913da28f6267542fec33ab1ad84459a948", + "color.interactive.border.secondary.hover": "a88568f44ded41510d80fcd7cb4c9d6633a9b929", + "color.interactive.border.secondary.disabled": "593a28560b76a570c37e9b573f68292beb635f2f", + "color.interactive.border.accessibility.focus": "90d79fe321b7893f89fb6944addb99016c844f74", "color.feedback.background.default.neutral": "c670a8662c6ac6720c8c6bfd010887ccf48d5483", "color.feedback.background.default.info": "7bbd181ee4ab26cccb55468bbd566870bae78af4", "color.feedback.background.default.error": "909f08d0b59e4dd6771eb70a774af847700207d1", @@ -1449,43 +1437,29 @@ "color.neutrals.border.mute": "5d9a8fc9b75c1ce8463f3178e9e6414b4d18b75a", "color.neutrals.border.subtle": "283146ae0147ec4b20f312edb29074250f5359fa", "color.neutrals.border.disabled": "a8444debb4e0f90291787d98e1b17d825155c091", - "color.interactive.primary.background.default": "c3c4e39a7d8c6e6dd1fef0841d03dfdf083ea03b", - "color.interactive.primary.background.hover": "d0904907beba8db9f5171714e946d81c164038f1", - "color.interactive.primary.background.disabled": "7353b344a6853703eb33183207be7e7df29d941f", - "color.interactive.primary.foreground.default": "25c1ec8946363e1b8a759b8795b86513058edb48", - "color.interactive.primary.foreground.hover": "036eff9f6d4045e317dc97b76057ba6b2346b76f", - "color.interactive.primary.foreground.disabled": "a0aa4434ec5ea8eab8d80965610745b9a89e992f", - "color.interactive.primary.border.focus": "b3f3d9f740023df75632763c172903b4333d5bd1", - "color.interactive.secondary.background.default": "8c7fb3d7685c89acaf7059db70a5941a645388ff", - "color.interactive.secondary.background.hover": "9e653e0329fe924c2c94f8213005cba7b086a77d", - "color.interactive.secondary.background.disabled": "cab9cd603e97384382c4977451c2e657f4824a35", - "color.interactive.secondary.foreground.default": "f2c08ed0d479f8d901043aa5e31d5241da1dda2e", - "color.interactive.secondary.foreground.hover": "c1d92600e81abb1b6bf6911f380d1b98a6416fbc", - "color.interactive.secondary.foreground.disabled": "72107d4bea6e2ef15a35485539928a4e2e56d7a2", - "color.interactive.secondary.border.focus": "cbb508fdcd4c7379e26c39c34f1016ef3e6daa8a", - "color.interactive.outlined.foreground.default": "f40f6f9802b62d88e315075e25eb063e960c06d4", - "color.interactive.outlined.foreground.hover": "9ce95721e285a56f8adecc14d0626aab9e0a9bc8", - "color.interactive.outlined.foreground.disabled": "1e8b7cc66a3f3ca4608e607835f3031b9454d7a4", - "color.interactive.outlined.border.default": "d524e3913da28f6267542fec33ab1ad84459a948", - "color.interactive.outlined.border.hover": "a88568f44ded41510d80fcd7cb4c9d6633a9b929", - "color.interactive.outlined.border.focus": "a661f3ea210ed34ef2a43bd07ccd96389e54a67a", - "color.interactive.outlined.border.disabled": "593a28560b76a570c37e9b573f68292beb635f2f", - "color.interactive.ghost.background.hover": "ee9f969e737f597367ff234c6040301992daa741", - "color.interactive.ghost.foreground.default": "11029649474b110530bd16b565e2a432a97df7e0", - "color.interactive.ghost.foreground.hover": "e2f306ccd85fc79d4dd61b901f8c14289ad2d662", - "color.interactive.ghost.foreground.disabled": "e97f327e15e5d2ddfd10b80487b1b1ec4efb2476", - "color.interactive.ghost.border.focus": "90d79fe321b7893f89fb6944addb99016c844f74", - "color.interactive.links.default": "0bbcbd1a5b8abfb3aec0990b23c02681d7efde64", - "color.interactive.links.hover": "bc6c0e3e17300a85e87e0cc99477d43cbe8b8ad3", - "color.interactive.links.focus": "bb63e661f3d615f13d224310c14146967ab064f2", - "color.interactive.links.visited": "449964460a6f72c71dc25680d2b32cb7799a9f60", - "color.interactive.danger.background.default": "16489e218866f9f4ec4b3fe6991a054b9de1abf1", - "color.interactive.danger.background.hover": "6e991f3bc688094c49c2edfe8b348f6b1f1f1187", - "color.interactive.danger.background.disabled": "49fb9052b637cc7b92dece938b3a9a000c012960", - "color.interactive.danger.foreground.default": "39d20394a8cdf54f96665674df31d586f2be530d", - "color.interactive.danger.foreground.hover": "e02689ca74fe86206753c936b1ee6d45112dce16", - "color.interactive.danger.foreground.disabled": "9bbe803e02e47889d6d5d7a6b850e2a5ab88e5e5", - "color.interactive.danger.border.focus": "0da19c2bd8db6aad294f1aec4402c5ba6a9bd0fa", + "color.interactive.background.primary.enabled": "c3c4e39a7d8c6e6dd1fef0841d03dfdf083ea03b", + "color.interactive.background.primary.hover": "d0904907beba8db9f5171714e946d81c164038f1", + "color.interactive.background.primary.disabled": "7353b344a6853703eb33183207be7e7df29d941f", + "color.interactive.background.secondary.enabled": "8c7fb3d7685c89acaf7059db70a5941a645388ff", + "color.interactive.background.secondary.hover": "9e653e0329fe924c2c94f8213005cba7b086a77d", + "color.interactive.background.secondary.disabled": "cab9cd603e97384382c4977451c2e657f4824a35", + "color.interactive.background.tertiary.hover": "ee9f969e737f597367ff234c6040301992daa741", + "color.interactive.foreground.primary.enabled": "25c1ec8946363e1b8a759b8795b86513058edb48", + "color.interactive.foreground.primary.hover": "036eff9f6d4045e317dc97b76057ba6b2346b76f", + "color.interactive.foreground.primary.disabled": "a0aa4434ec5ea8eab8d80965610745b9a89e992f", + "color.interactive.foreground.secondary.enabled": "f2c08ed0d479f8d901043aa5e31d5241da1dda2e", + "color.interactive.foreground.secondary.hover": "c1d92600e81abb1b6bf6911f380d1b98a6416fbc", + "color.interactive.foreground.secondary.disabled": "72107d4bea6e2ef15a35485539928a4e2e56d7a2", + "color.interactive.foreground.link.enabled": "0bbcbd1a5b8abfb3aec0990b23c02681d7efde64", + "color.interactive.foreground.link.hover": "bc6c0e3e17300a85e87e0cc99477d43cbe8b8ad3", + "color.interactive.foreground.link.visited": "449964460a6f72c71dc25680d2b32cb7799a9f60", + "color.interactive.border.primary.enabled": "d87443486bd3dfa8ee9a4cba148914b558b3fd06", + "color.interactive.border.primary.hover": "f45f2ad159d3e15ea1bd55889cc5d9ff76d2a044", + "color.interactive.border.primary.disabled": "0cb6ca182d903cd6c14a85e3db4e70b6d67b5eb9", + "color.interactive.border.secondary.enabled": "d524e3913da28f6267542fec33ab1ad84459a948", + "color.interactive.border.secondary.hover": "a88568f44ded41510d80fcd7cb4c9d6633a9b929", + "color.interactive.border.secondary.disabled": "593a28560b76a570c37e9b573f68292beb635f2f", + "color.interactive.border.accessibility.focus": "90d79fe321b7893f89fb6944addb99016c844f74", "color.feedback.background.default.neutral": "c670a8662c6ac6720c8c6bfd010887ccf48d5483", "color.feedback.background.default.info": "7bbd181ee4ab26cccb55468bbd566870bae78af4", "color.feedback.background.default.error": "909f08d0b59e4dd6771eb70a774af847700207d1", @@ -2637,6 +2611,8 @@ "color-shades.functional.neutralgrey.950": "6817186c6602e5e670b2b591887508197c673128", "color-shades.functional.neutralgrey.999": "4978e6f7f004af83b6a9270d88ece9441596bf7e", "color-shades.functional.neutralgrey.000": "8367a465eaac3314aef8655ebf0e729a722f9d02", + "color-shades.functional.neutralgrey.100-050": "969222f830736c128749c33dc9db63f6c2790a27", + "color-shades.functional.neutralgrey.600-050": "1573ed1672bf90c1416147f626a54618fabf9839", "color-shades.functional.neutralgrey.050": "b5d0276e6fb63ba300fd54b4ceeea3f3229e3ff7", "color-shades.additional.lime.100": "ef6e675fb5dab63afca149ee281c2a56125a57d1", "color-shades.additional.lime.150": "f99487c8ddd96f4a42e6de7e5960c0043569e3c2", @@ -2968,4 +2944,4 @@ }, "group": "Device" } -] +] \ No newline at end of file diff --git a/tokens/brand/nve.json b/tokens/brand/nve.json index bf6803fb..f8559b21 100644 --- a/tokens/brand/nve.json +++ b/tokens/brand/nve.json @@ -359,7 +359,7 @@ }, "700": { "$type": "color", - "$value": "#1E6FDC" + "$value": "#1D6DD7" }, "800": { "$type": "color", @@ -417,7 +417,7 @@ }, "600": { "$type": "color", - "$value": "#E92121" + "$value": "#E81C1C" }, "700": { "$type": "color", @@ -695,6 +695,14 @@ "$type": "color", "$value": "#ffffff" }, + "100-050": { + "$type": "color", + "$value": "rgba(238,239,241,0.5)" + }, + "600-050": { + "$type": "color", + "$value": "rgba(96,101,108,0.5)" + }, "050": { "$type": "color", "$value": "#f7f7f8" diff --git a/tokens/brand/varsom.json b/tokens/brand/varsom.json index 140b6de0..34bdac60 100644 --- a/tokens/brand/varsom.json +++ b/tokens/brand/varsom.json @@ -268,7 +268,7 @@ }, "700": { "$type": "color", - "$value": "#1E6FDC" + "$value": "#1D6DD7" }, "800": { "$type": "color", diff --git a/tokens/public/theme/dark.json b/tokens/public/theme/dark.json index 57573491..be7da679 100644 --- a/tokens/public/theme/dark.json +++ b/tokens/public/theme/dark.json @@ -141,9 +141,9 @@ } }, "interactive": { - "primary": { - "background": { - "default": { + "background": { + "primary": { + "enabled": { "$type": "color", "$value": "{color-shades.grey.000}" }, @@ -151,115 +151,93 @@ "$type": "color", "$value": "{color-shades.grey.150}" }, + "pressed": { + "$type": "color", + "$value": "{color-shades.grey.200}" + }, "disabled": { "$type": "color", "$value": "{color-shades.grey.000}" } }, - "foreground": { - "default": { + "secondary": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.grey.700}" }, "hover": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.grey.600}" + }, + "pressed": { + "$type": "color", + "$value": "{color-shades.grey.500}" }, "disabled": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.grey.700}" } }, - "border": { - "focus": { - "$type": "color", - "$value": "{color-shades.functional.blue.500}" - } - } - }, - "secondary": { - "background": { - "default": { + "tertiary": { + "hover": { "$type": "color", "$value": "{color-shades.grey.700}" }, - "hover": { + "pressed": { "$type": "color", "$value": "{color-shades.grey.600}" - }, - "disabled": { - "$type": "color", - "$value": "{color-shades.grey.700}" } }, - "foreground": { - "default": { + "danger": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.functional.red.500}" }, "hover": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.functional.red.400}" }, - "disabled": { + "pressed": { "$type": "color", - "$value": "{color-shades.grey.000}" - } - }, - "border": { - "focus": { + "$value": "{color-shades.functional.red.300}" + }, + "disabled": { "$type": "color", - "$value": "{color-shades.functional.blue.500}" + "$value": "{color-shades.functional.red.500}" } } }, - "outlined": { - "foreground": { - "default": { + "foreground": { + "primary": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.grey.950}" }, "hover": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.grey.950}" }, "disabled": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.grey.950}" } }, - "border": { - "default": { + "secondary": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.500}" + "$value": "{color-shades.grey.000}" }, "hover": { "$type": "color", "$value": "{color-shades.grey.000}" }, - "focus": { - "$type": "color", - "$value": "{color-shades.functional.blue.500}" - }, "disabled": { "$type": "color", - "$value": "{color-shades.grey.600}" - } - } - }, - "ghost": { - "background": { - "hover": { - "$type": "color", - "$value": "{color-shades.grey.700}" + "$value": "{color-shades.grey.000}" } }, - "foreground": { - "default": { - "$type": "color", - "$value": "{color-shades.grey.000}" - }, - "hover": { + "danger": { + "enabled": { "$type": "color", "$value": "{color-shades.grey.000}" }, @@ -268,61 +246,51 @@ "$value": "{color-shades.grey.000}" } }, - "border": { - "focus": { + "link": { + "enabled": { "$type": "color", - "$value": "{color-shades.functional.blue.500}" + "$value": "{color-shades.functional.blue.400}" + }, + "hover": { + "$type": "color", + "$value": "{color-shades.functional.blue.200}" + }, + "visited": { + "$type": "color", + "$value": "{color-shades.grey.200}" } } }, - "links": { - "default": { - "$type": "color", - "$value": "{color-shades.functional.blue.400}" - }, - "hover": { - "$type": "color", - "$value": "{color-shades.grey.000}" - }, - "focus": { - "$type": "color", - "$value": "{color-shades.functional.blue.500}" - }, - "visited": { - "$type": "color", - "$value": "{color-shades.grey.200}" - } - }, - "danger": { - "background": { - "default": { + "border": { + "primary": { + "enabled": { "$type": "color", - "$value": "{color-shades.functional.red.500}" + "$value": "{color-shades.grey.000}" }, "hover": { "$type": "color", - "$value": "{color-shades.functional.red.400}" + "$value": "{color-shades.functional.neutralgrey.100-050}" }, "disabled": { "$type": "color", - "$value": "{color-shades.functional.red.500}" + "$value": "{color-shades.grey.000}" } }, - "foreground": { - "default": { + "secondary": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.grey.500}" }, "hover": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.grey.000}" }, "disabled": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.grey.600}" } }, - "border": { + "accessibility": { "focus": { "$type": "color", "$value": "{color-shades.functional.blue.500}" diff --git a/tokens/public/theme/light.json b/tokens/public/theme/light.json index b9954c0a..2c98d2e7 100644 --- a/tokens/public/theme/light.json +++ b/tokens/public/theme/light.json @@ -139,188 +139,156 @@ } }, "interactive": { - "primary": { - "background": { - "default": { + "background": { + "primary": { + "enabled": { "$type": "color", "$value": "{color-shades.grey.950}" }, "hover": { "$type": "color", - "$value": "{color-shades.grey.800}" + "$value": "{color-shades.grey.600}" + }, + "pressed": { + "$type": "color", + "$value": "{color-shades.grey.500}" }, "disabled": { "$type": "color", "$value": "{color-shades.grey.950}" } }, - "foreground": { - "default": { + "secondary": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.grey.150}" }, "hover": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.grey.200}" + }, + "pressed": { + "$type": "color", + "$value": "{color-shades.grey.300}" }, "disabled": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.grey.150}" } }, - "border": { - "focus": { - "$type": "color", - "$value": "{color-shades.functional.blue.500}" - } - } - }, - "secondary": { - "background": { - "default": { + "tertiary": { + "hover": { "$type": "color", "$value": "{color-shades.grey.150}" }, - "hover": { + "pressed": { "$type": "color", "$value": "{color-shades.grey.200}" - }, - "disabled": { - "$type": "color", - "$value": "{color-shades.grey.150}" } }, - "foreground": { - "default": { + "danger": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.functional.red.700}" }, "hover": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.functional.red.800}" }, - "disabled": { + "pressed": { "$type": "color", - "$value": "{color-shades.grey.950}" - } - }, - "border": { - "focus": { + "$value": "{color-shades.functional.red.850}" + }, + "disabled": { "$type": "color", - "$value": "{color-shades.functional.blue.500}" + "$value": "{color-shades.functional.red.700}" } } }, - "outlined": { - "foreground": { - "default": { + "foreground": { + "primary": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.grey.000}" }, "hover": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.grey.000}" }, "disabled": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.grey.000}" } }, - "border": { - "default": { + "secondary": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.500}" + "$value": "{color-shades.grey.950}" }, "hover": { "$type": "color", "$value": "{color-shades.grey.950}" }, - "focus": { - "$type": "color", - "$value": "{color-shades.functional.blue.500}" - }, "disabled": { "$type": "color", - "$value": "{color-shades.grey.500}" + "$value": "{color-shades.grey.950}" } - } - }, - "ghost": { - "background": { - "hover": { + }, + "danger": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.150}" + "$value": "{color-shades.grey.000}" + }, + "disabled": { + "$type": "color", + "$value": "{color-shades.grey.000}" } }, - "foreground": { - "default": { + "link": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.functional.blue.700}" }, "hover": { "$type": "color", - "$value": "{color-shades.grey.950}" + "$value": "{color-shades.functional.blue.950}" }, - "disabled": { - "$type": "color", - "$value": "{color-shades.grey.950}" - } - }, - "border": { - "focus": { + "visited": { "$type": "color", - "$value": "{color-shades.functional.blue.500}" + "$value": "{color-shades.grey.600}" } } }, - "links": { - "default": { - "$type": "color", - "$value": "{color-shades.functional.blue.700}" - }, - "hover": { - "$type": "color", - "$value": "{color-shades.grey.950}" - }, - "focus": { - "$type": "color", - "$value": "{color-shades.functional.blue.700}" - }, - "visited": { - "$type": "color", - "$value": "{color-shades.grey.600}" - } - }, - "danger": { - "background": { - "default": { + "border": { + "primary": { + "enabled": { "$type": "color", - "$value": "{color-shades.functional.red.700}" + "$value": "{color-shades.grey.999}" }, "hover": { "$type": "color", - "$value": "{color-shades.functional.red.850}" + "$value": "{color-shades.functional.neutralgrey.600-050}" }, "disabled": { "$type": "color", - "$value": "{color-shades.functional.red.700}" + "$value": "{color-shades.grey.999}" } }, - "foreground": { - "default": { + "secondary": { + "enabled": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.grey.500}" }, "hover": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.grey.950}" }, "disabled": { "$type": "color", - "$value": "{color-shades.grey.000}" + "$value": "{color-shades.grey.500}" } }, - "border": { + "accessibility": { "focus": { "$type": "color", "$value": "{color-shades.functional.blue.500}"