Merging upstream version 125.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

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);
+    }
   }
 }