1 files changed, 23 insertions, 30 deletions
diff --git a/toolkit/themes/shared/design-system/tokens-brand.css b/toolkit/themes/shared/design-system/tokens-brand.css
index 0ab73834d0..4574cf405a 100644
--- a/toolkit/themes/shared/design-system/tokens-brand.css
+++ b/toolkit/themes/shared/design-system/tokens-brand.css
@@ -2,56 +2,49 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* DO NOT EDIT this file directly, instead modify design-tokens.json
+ * and run `npm run build` to see your changes. */
+
 @import url("chrome://global/skin/design-system/tokens-shared.css");
 
 @layer tokens-foundation {
   :root,
   :host(.anonymous-content-host) {
+    /** Attention Dot **/
+    --attention-dot-color: light-dark(#2ac3a2, #54ffbd);
+
+    /** Background Color **/
+    --background-color-canvas: light-dark(var(--color-white), var(--color-gray-90));
+
     /** Border **/
-    --border-interactive-color: light-dark(var(--color-gray-60), var(--color-gray-50));
+    --border-color-interactive: light-dark(var(--color-gray-60), var(--color-gray-50));
 
     /** Button **/
-    /* TODO Bug 1821203 - Gray use needs to be consolidated */
-    --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
+    --button-background-color: color-mix(in srgb, currentColor 7%, transparent); /* TODO Bug 1821203 - Gray use needs to be consolidated */
     --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(--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: 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 */
+    /** Font Size **/
+    --font-size-root: 15px;
+    --font-size-small: 0.867rem;
+    --font-size-large: 1.133rem;
+    --font-size-xlarge: 1.467rem;
+    --font-size-xxlarge: 1.6rem;
+
+    /** Link **/
+    --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);
 
     /** Text **/
     --text-color: light-dark(var(--color-gray-100), var(--color-gray-05));
   }
 }
-
-@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);
-    }
-  }
-}