diff options
Diffstat (limited to 'toolkit/themes/shared/design-system/tokens-brand.css')
-rw-r--r-- | toolkit/themes/shared/design-system/tokens-brand.css | 55 |
1 files changed, 30 insertions, 25 deletions
diff --git a/toolkit/themes/shared/design-system/tokens-brand.css b/toolkit/themes/shared/design-system/tokens-brand.css index ac105d9767..0ab73834d0 100644 --- a/toolkit/themes/shared/design-system/tokens-brand.css +++ b/toolkit/themes/shared/design-system/tokens-brand.css @@ -4,17 +4,7 @@ @import url("chrome://global/skin/design-system/tokens-shared.css"); -:root, -:host(.anonymous-content-host) { - /** Font size **/ - --font-size-root: 15px; /* Set at the `:root`. Do not use */ - --font-size-small: 0.867rem; /* 13px */ - --font-size-large: 1.133rem; /* 17px */ - --font-size-xlarge: 1.467rem; /* 22px */ - --font-size-xxlarge: 1.6rem; /* 24px */ -} - -@media not (prefers-contrast) { +@layer tokens-foundation { :root, :host(.anonymous-content-host) { /** Border **/ @@ -25,28 +15,43 @@ --button-background-color: color-mix(in srgb, currentColor 7%, transparent); --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent); --button-background-color-active: color-mix(in srgb, currentColor 21%, transparent); + --button-border-color-primary: transparent; + --button-text-color: light-dark(var(--color-gray-100), var(--color-gray-05)); + --button-text-color-primary: light-dark(var(--color-gray-05), var(--color-gray-100)); /** Link **/ - --link-color: var(--brand-color-accent); - --link-color-hover: var(--brand-color-accent-hover); - --link-color-active: var(--brand-color-accent-active); + --link-color: var(--color-accent-primary); + --link-color-hover: var(--color-accent-primary-hover); + --link-color-active: var(--color-accent-primary-active); --link-color-visited: var(--link-color); /** Color **/ - --color-accent-primary: var(--brand-color-accent); - --color-accent-primary-hover: var(--brand-color-accent-hover); - --color-accent-primary-active: var(--brand-color-accent-active); - - --brand-color-accent: light-dark(var(--color-blue-50), var(--color-cyan-50)); - --brand-color-accent-hover: light-dark(var(--color-blue-60), var(--color-cyan-30)); - --brand-color-accent-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); + --color-accent-primary: light-dark(var(--color-blue-50), var(--color-cyan-50)); + --color-accent-primary-hover: light-dark(var(--color-blue-60), var(--color-cyan-30)); + --color-accent-primary-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); --color-canvas: light-dark(var(--color-white), var(--color-gray-90)); + /** Font size **/ + --font-size-root: 15px; /* Set at the `:root`. Do not use */ + --font-size-small: 0.867rem; /* 13px */ + --font-size-large: 1.133rem; /* 17px */ + --font-size-xlarge: 1.467rem; /* 22px */ + --font-size-xxlarge: 1.6rem; /* 24px */ + /** Text **/ --text-color: light-dark(var(--color-gray-100), var(--color-gray-05)); - --text-color-deemphasized: light-dark( - color-mix(in srgb, currentColor 69%, transparent), - color-mix(in srgb, currentColor 75%, transparent) - ); + } +} + +@layer tokens-prefers-contrast { + @media (prefers-contrast) { + :root, + :host(.anonymous-content-host) { + /* Border */ + --border-interactive-color: var(--text-color); + --border-interactive-color-hover: var(--border-interactive-color); + --border-interactive-color-active: var(--border-interactive-color); + --border-interactive-color-disabled: var(--border-interactive-color); + } } } |