diff --git a/browser/components/storybook/.storybook/addon-fluent/fluent-panel.css b/browser/components/storybook/.storybook/addon-fluent/fluent-panel.css
index cb6dd9b6f228..141857f08f47 100644
--- a/browser/components/storybook/.storybook/addon-fluent/fluent-panel.css
+++ b/browser/components/storybook/.storybook/addon-fluent/fluent-panel.css
@@ -7,11 +7,11 @@
 }
 
 .addon-panel-message {
-  background: #FFF5CF;
+  background: #fff5cf;
   color: #333333;
   padding: 10px 15px;
   line-height: 20px;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
   font-size: 13px;
 }
 
@@ -29,7 +29,7 @@ table.addon-panel-table thead.addon-panel-table-head th {
 
 @media (prefers-color-scheme: dark) {
   table.addon-panel-table thead.addon-panel-table-head th {
-    color: rgba(201, 205, 207, 0.55)
+    color: rgba(201, 205, 207, 0.55);
   }
 }
 
diff --git a/toolkit/content/tests/widgets/videomask.css b/toolkit/content/tests/widgets/videomask.css
index 066d441388b7..bf941d5030b7 100644
--- a/toolkit/content/tests/widgets/videomask.css
+++ b/toolkit/content/tests/widgets/videomask.css
@@ -1,9 +1,11 @@
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
 }
 
-audio, video {
+audio,
+video {
   width: 140px;
   height: 100px;
   background-color: black;
diff --git a/toolkit/content/widgets/datetimebox.css b/toolkit/content/widgets/datetimebox.css
index 4a6fc38aaec5..12ff84391079 100644
--- a/toolkit/content/widgets/datetimebox.css
+++ b/toolkit/content/widgets/datetimebox.css
@@ -45,7 +45,7 @@
   color: inherit;
   font-size: inherit;
   fill: currentColor;
-  opacity: .65;
+  opacity: 0.65;
   background-color: transparent;
   border: none;
   border-radius: 0.2em;
diff --git a/toolkit/content/widgets/infobar.css b/toolkit/content/widgets/infobar.css
index 9b28d3179db1..5668bf66b5b0 100644
--- a/toolkit/content/widgets/infobar.css
+++ b/toolkit/content/widgets/infobar.css
@@ -58,11 +58,11 @@
   }
 }
 
-:host([message-bar-type=infobar]:first-of-type) {
+:host([message-bar-type="infobar"]:first-of-type) {
   margin-top: 4px;
 }
 
-:host([message-bar-type=infobar]) {
+:host([message-bar-type="infobar"]) {
   margin: 0 4px 4px;
 }
 
@@ -89,10 +89,10 @@ strong {
 
 /* type="system" infobar styles */
 
-:host([type=system]) .icon {
+:host([type="system"]) .icon {
   display: none;
 }
 
-:host([type=system]) .content {
+:host([type="system"]) .content {
   margin-inline-start: 0;
 }
diff --git a/toolkit/content/widgets/moz-box-common.css b/toolkit/content/widgets/moz-box-common.css
index b0ea1234669d..ec4795ffb38e 100644
--- a/toolkit/content/widgets/moz-box-common.css
+++ b/toolkit/content/widgets/moz-box-common.css
@@ -27,12 +27,10 @@
     place-items: center start;
     gap: var(--space-xxsmall) var(--space-small);
     grid-template-columns: var(--box-icon-size) 1fr;
-    grid-template-areas:
-      "label label";
+    grid-template-areas: "label label";
 
     &.has-icon {
-      grid-template-areas:
-        "icon label";
+      grid-template-areas: "icon label";
     }
 
     &.has-description {
@@ -81,7 +79,6 @@
   border-end-start-radius: var(--box-border-radius-end, var(--box-border-radius-inner));
   border-end-end-radius: var(--box-border-radius-end, var(--box-border-radius-inner));
 
-
   &:focus-visible {
     outline: var(--focus-outline);
     outline-offset: var(--focus-outline-offset);
diff --git a/toolkit/content/widgets/moz-button/moz-button.css b/toolkit/content/widgets/moz-button/moz-button.css
index 97c6d1a32a16..3778cd257d7b 100644
--- a/toolkit/content/widgets/moz-button/moz-button.css
+++ b/toolkit/content/widgets/moz-button/moz-button.css
@@ -52,7 +52,7 @@ button {
   align-items: center;
   position: relative;
 
-  &[size=small] {
+  &[size="small"] {
     min-height: var(--button-min-height-small);
     font-size: var(--button-font-size-small);
   }
@@ -140,7 +140,7 @@ button {
     }
   }
 
-  &[type~=ghost] {
+  &[type~="ghost"] {
     background-color: var(--button-background-color-ghost);
     border-color: var(--button-border-color-ghost);
     color: var(--button-text-color-ghost);
@@ -165,29 +165,29 @@ button {
   }
 
   &.labelled {
-    gap: var(--space-small)
+    gap: var(--space-small);
   }
 
-  &[type~=icon]:not(.labelled) {
+  &[type~="icon"]:not(.labelled) {
     background-size: var(--icon-size-default);
     background-position: center;
     background-repeat: no-repeat;
   }
 
-  &[type~=icon]:not(.labelled),
+  &[type~="icon"]:not(.labelled),
   &:not(.labelled):has(img) {
     width: var(--button-size-icon);
     height: var(--button-size-icon);
     padding: var(--button-padding-icon);
 
-    &[size=small] {
+    &[size="small"] {
       width: var(--button-size-icon-small);
       height: var(--button-size-icon-small);
     }
   }
 
   img,
-  &[type~=icon]:not(.labelled) {
+  &[type~="icon"]:not(.labelled) {
     -moz-context-properties: fill, fill-opacity, stroke;
     fill: var(--button-icon-fill);
     stroke: var(--button-icon-stroke);
diff --git a/toolkit/content/widgets/moz-card/moz-card.css b/toolkit/content/widgets/moz-card/moz-card.css
index 4f488875699d..776b734e0e2e 100644
--- a/toolkit/content/widgets/moz-card/moz-card.css
+++ b/toolkit/content/widgets/moz-card/moz-card.css
@@ -2,7 +2,7 @@
  * 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/. */
 
- :host {
+:host {
   --card-border-radius: var(--border-radius-medium);
   --card-border-width: var(--border-width);
   --card-border: var(--card-border-width) solid var(--border-color-card);
@@ -23,7 +23,7 @@
   box-sizing: border-box;
 }
 
-:host([type=accordion]) {
+:host([type="accordion"]) {
   summary {
     padding-block: var(--card-padding-block, var(--card-padding));
   }
@@ -31,7 +31,7 @@
     padding-block-end: var(--card-padding-block, var(--card-padding));
   }
 }
-:host(:not([type=accordion])) {
+:host(:not([type="accordion"])) {
   .moz-card {
     padding-block: var(--card-padding-block, var(--card-padding));
   }
@@ -101,14 +101,14 @@ summary {
   border-end-end-radius: var(--card-border-radius);
 
   @media (prefers-contrast) {
-    :host([type=accordion]) & {
+    :host([type="accordion"]) & {
       border-block-start: 0;
       padding-block-start: var(--card-padding-block, var(--card-padding));
     }
   }
 }
 
-details  {
+details {
   > summary {
     list-style: none;
     border-radius: var(--card-border-radius);
diff --git a/toolkit/content/widgets/moz-five-star/moz-five-star.css b/toolkit/content/widgets/moz-five-star/moz-five-star.css
index 5521218c1374..e097a4c22452 100644
--- a/toolkit/content/widgets/moz-five-star/moz-five-star.css
+++ b/toolkit/content/widgets/moz-five-star/moz-five-star.css
@@ -41,7 +41,6 @@
   }
 }
 
-
 .rating-star[fill="half"] {
   background-image: url("chrome://global/skin/icons/rating-star.svg#half");
 }
diff --git a/toolkit/content/widgets/moz-input-color/moz-input-color.css b/toolkit/content/widgets/moz-input-color/moz-input-color.css
index 586355c3295c..b4b85294abec 100644
--- a/toolkit/content/widgets/moz-input-color/moz-input-color.css
+++ b/toolkit/content/widgets/moz-input-color/moz-input-color.css
@@ -2,8 +2,6 @@
  * 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/. */
 
-
-
 :host {
   --moz-input-color-swatch-size: 24px;
 
@@ -25,7 +23,6 @@ label {
   background-color: var(--button-background-color-ghost);
 }
 
-
 label:hover {
   border-color: var(--border-color-interactive-hover);
   background-color: var(--button-background-color-ghost-hover);
@@ -33,10 +30,9 @@ label:hover {
 
 label:hover:active {
   border-color: var(--border-color-interactive-active);
-  background-color: var(--button-background-color-ghost-active)
+  background-color: var(--button-background-color-ghost-active);
 }
 
-
 label:focus-within {
   outline: var(--focus-outline);
 }
@@ -67,5 +63,5 @@ label span {
 
 .icon {
   -moz-context-properties: fill;
-   fill: var(--icon-color);
+  fill: var(--icon-color);
 }
diff --git a/toolkit/content/widgets/moz-input-folder/moz-input-folder.css b/toolkit/content/widgets/moz-input-folder/moz-input-folder.css
index c3435cdd9531..da33a174b242 100644
--- a/toolkit/content/widgets/moz-input-folder/moz-input-folder.css
+++ b/toolkit/content/widgets/moz-input-folder/moz-input-folder.css
@@ -5,17 +5,17 @@
 @import url("chrome://global/content/elements/moz-input-text.css");
 
 :host {
-   --input-folder-space-inline: var(--space-medium);
-   width: 100%;
+  --input-folder-space-inline: var(--space-medium);
+  width: 100%;
 }
 
 #input {
-   min-width: var(--input-folder-min-width);
-   max-width: var(--input-folder-max-width);
+  min-width: var(--input-folder-min-width);
+  max-width: var(--input-folder-max-width);
 }
 
 .container {
-   display: flex;
-   align-items: flex-end;
-   gap: var(--input-folder-space-inline);
+  display: flex;
+  align-items: flex-end;
+  gap: var(--input-folder-space-inline);
 }
diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.css b/toolkit/content/widgets/moz-message-bar/moz-message-bar.css
index 1d37224d5cce..2ff14bb75417 100644
--- a/toolkit/content/widgets/moz-message-bar/moz-message-bar.css
+++ b/toolkit/content/widgets/moz-message-bar/moz-message-bar.css
@@ -11,7 +11,7 @@
   /* Container */
   --message-bar-container-min-height: var(--size-item-large);
 
- /* Border */
+  /* Border */
   --message-bar-border-color: oklch(from var(--message-bar-icon-color) l c h / 20%);
   --message-bar-border-radius: var(--border-radius-small);
   --message-bar-border-width: var(--border-width);
@@ -142,18 +142,18 @@ moz-button::part(button) {
 
 @media not (prefers-contrast) {
   /* MozMessageBar colors by message type */
-  :host([type=warning]) {
+  :host([type="warning"]) {
     --message-bar-background-color: var(--background-color-warning);
     --message-bar-icon-color: var(--icon-color-warning);
   }
 
-  :host([type=success]) {
+  :host([type="success"]) {
     --message-bar-background-color: var(--background-color-success);
     --message-bar-icon-color: var(--icon-color-success);
   }
 
-  :host([type=error]),
-  :host([type=critical]) {
+  :host([type="error"]),
+  :host([type="critical"]) {
     --message-bar-background-color: var(--background-color-critical);
     --message-bar-icon-color: var(--icon-color-critical);
   }
diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css
index c78cef8e7a39..213bd5af0e48 100644
--- a/toolkit/content/widgets/moz-page-nav/moz-page-nav.css
+++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css
@@ -9,7 +9,7 @@
   --page-nav-border-color: var(--border-color-transparent);
   --page-nav-focus-outline-inset: var(--focus-outline-inset);
   --page-nav-heading-logo-size: calc(var(--icon-size-default) + var(--space-small));
-  --page-nav-hr-color: #CFCFD8;
+  --page-nav-hr-color: #cfcfd8;
 
   margin-inline-start: 42px;
   position: sticky;
diff --git a/toolkit/content/widgets/moz-select/moz-select.css b/toolkit/content/widgets/moz-select/moz-select.css
index be9ab598096d..2864c4009295 100644
--- a/toolkit/content/widgets/moz-select/moz-select.css
+++ b/toolkit/content/widgets/moz-select/moz-select.css
@@ -6,7 +6,7 @@
   --select-border: var(--button-border);
   --select-border-radius: var(--button-border-radius);
   --select-border-color-hover: var(--button-border-color-hover);
-  --select-background-color:  var(--button-background-color);
+  --select-background-color: var(--button-background-color);
   --select-background-color-hover: var(--button-background-color-hover);
   --select-background-color-disabled: var(--button-background-color-disabled);
   --select-margin-block: var(--input-margin-block-adjust);
@@ -23,7 +23,7 @@
 
 .select-wrapper {
   border-radius: var(--select-border-radius);
-  background-color:  var(--select-background-color);
+  background-color: var(--select-background-color);
   margin-block: var(--select-margin-block);
   margin-inline: var(--select-margin-inline);
   min-width: var(--select-min-width);
@@ -43,7 +43,7 @@ select {
   border: var(--select-border);
   border-radius: var(--select-border-radius);
   padding-block: var(--space-xsmall);
-  padding-inline:  var(--space-large) var(--space-xxlarge);
+  padding-inline: var(--space-large) var(--space-xxlarge);
   margin: 0;
   min-height: var(--select-min-height);
   width: 100%;
diff --git a/toolkit/content/widgets/moz-toggle/moz-toggle.css b/toolkit/content/widgets/moz-toggle/moz-toggle.css
index 0a9087709394..8109499b9f30 100644
--- a/toolkit/content/widgets/moz-toggle/moz-toggle.css
+++ b/toolkit/content/widgets/moz-toggle/moz-toggle.css
@@ -141,7 +141,7 @@
 
   .toggle-button[aria-pressed="true"]:enabled::after {
     border: 1px solid var(--button-background-color);
-    content: '';
+    content: "";
     position: absolute;
     height: var(--toggle-height);
     width: var(--toggle-width);
diff --git a/toolkit/content/widgets/panel-list/panel-list.css b/toolkit/content/widgets/panel-list/panel-list.css
index b64523593404..4f14a84d6d0a 100644
--- a/toolkit/content/widgets/panel-list/panel-list.css
+++ b/toolkit/content/widgets/panel-list/panel-list.css
@@ -31,7 +31,7 @@
   overflow-y: visible;
 }
 
-:host(:not([slot=submenu])) {
+:host(:not([slot="submenu"])) {
   max-height: 100%;
 }
 
diff --git a/toolkit/themes/shared/design-system/package.json b/toolkit/themes/shared/design-system/package.json
index 2d3350084e99..4dc7f647978c 100644
--- a/toolkit/themes/shared/design-system/package.json
+++ b/toolkit/themes/shared/design-system/package.json
@@ -2,7 +2,7 @@
   "description": "Package file for node modules used to create our CSS tokens from a JSON source of truth.",
   "license": "MPL-2.0",
   "scripts": {
-    "build": "(npm ls || npm ci) && style-dictionary build --config ./tokens-config.js && prettier ./tokens-storybook.mjs ./tokens-figma-*.json --write",
+    "build": "(npm ls || npm ci) && style-dictionary build --config ./tokens-config.js && prettier ./tokens-storybook.mjs ./tokens-figma-*.json ./tokens-*.css --write",
     "test": "(npm ls || npm ci) && node tests/try-runner.js"
   },
   "devDependencies": {
diff --git a/toolkit/themes/shared/design-system/tokens-platform.css b/toolkit/themes/shared/design-system/tokens-platform.css
index b82e009cdc5d..aca89192abde 100644
--- a/toolkit/themes/shared/design-system/tokens-platform.css
+++ b/toolkit/themes/shared/design-system/tokens-platform.css
@@ -46,7 +46,7 @@
     --link-color-visited: var(--link-color);
 
     /** Table Row **/
-    --table-row-background-color-alternate: light-dark(rgba(0,0,0,5%), rgba(255,255,255,5%)); /* TODO Bug 1821203 - Gray use needs to be consolidated */
+    --table-row-background-color-alternate: light-dark(rgba(0, 0, 0, 5%), rgba(255, 255, 255, 5%)); /* TODO Bug 1821203 - Gray use needs to be consolidated */
 
     /** Text **/
     --text-color: currentColor;
diff --git a/toolkit/themes/shared/design-system/tokens-shared.css b/toolkit/themes/shared/design-system/tokens-shared.css
index 3241daba4887..187b112d4231 100644
--- a/toolkit/themes/shared/design-system/tokens-shared.css
+++ b/toolkit/themes/shared/design-system/tokens-shared.css
@@ -18,7 +18,7 @@
     --background-color-warning: light-dark(var(--color-yellow-0), var(--color-yellow-90));
 
     /** Border **/
-    --border-color: light-dark(#CFCFD8, #3A3944);
+    --border-color: light-dark(#cfcfd8, #3a3944);
     --border-color-card: color-mix(in srgb, currentColor 10%, transparent);
     --border-color-interactive-hover: var(--border-color-interactive);
     --border-color-interactive-active: var(--border-color-interactive);
@@ -152,16 +152,16 @@
     --color-green-100: oklch(27% 0.1 145);
     --color-green-110: oklch(20% 0.05 145);
     --color-orange-0: oklch(97% 0.05 50);
-    --color-orange-10: oklch(90% 0.10 50);
+    --color-orange-10: oklch(90% 0.1 50);
     --color-orange-20: oklch(86% 0.14 50);
     --color-orange-30: oklch(79% 0.17 50);
     --color-orange-40: oklch(72% 0.19 50);
     --color-orange-50: oklch(65% 0.21 50);
     --color-orange-60: oklch(58% 0.21 50);
-    --color-orange-70: oklch(48% 0.20 50);
+    --color-orange-70: oklch(48% 0.2 50);
     --color-orange-80: oklch(41% 0.17 50);
     --color-orange-90: oklch(34% 0.14 50);
-    --color-orange-100: oklch(27% 0.10 50);
+    --color-orange-100: oklch(27% 0.1 50);
     --color-orange-110: oklch(20% 0.05 50);
     --color-pink-0: oklch(97% 0.05 360);
     --color-pink-10: oklch(90% 0.1 360);
diff --git a/toolkit/themes/shared/design-system/tokens-storybook.mjs b/toolkit/themes/shared/design-system/tokens-storybook.mjs
index 16af8e339e04..b618942addb8 100644
--- a/toolkit/themes/shared/design-system/tokens-storybook.mjs
+++ b/toolkit/themes/shared/design-system/tokens-storybook.mjs
@@ -214,7 +214,7 @@ export const storybookTables = {
   "border-color": [
     {
       value: {
-        comment: "TODO Bug 1946826 - Border colors need to be consolidated",
+        comment: "TODO Bug 1821203 - Gray tones need to be consolidated",
         light: "#CFCFD8",
         dark: "#3A3944",
         prefersContrast: "CanvasText",
@@ -1025,7 +1025,7 @@ export const variableLookupTable = {
     default: "light-dark(var(--color-yellow-0), var(--color-yellow-90))",
   },
   "border-color": {
-    comment: "TODO Bug 1946826 - Border colors need to be consolidated",
+    comment: "TODO Bug 1821203 - Gray tones need to be consolidated",
     light: "#CFCFD8",
     dark: "#3A3944",
     prefersContrast: "CanvasText",
diff --git a/toolkit/themes/shared/design-system/tokens-table.css b/toolkit/themes/shared/design-system/tokens-table.css
index bb0f751550dc..e52e4d582c12 100644
--- a/toolkit/themes/shared/design-system/tokens-table.css
+++ b/toolkit/themes/shared/design-system/tokens-table.css
@@ -6,21 +6,21 @@
   --border-color-tokens-table: var(--color-gray-50);
   --table-border-outer: 2px solid var(--border-color-tokens-table);
   --table-border-inner: var(--border-width) solid var(--border-color-tokens-table);
-  --table-background-color: color-mix(in srgb,
-      var(--color-gray-50) 20%,
-      transparent);
+  --table-background-color: color-mix(in srgb, var(--color-gray-50) 20%, transparent);
   --outline-preview: 2px solid var(--color-gray-60);
   --background-color-icon-demo: var(--color-gray-60);
   --background-color-padding-demo: var(--color-blue-60);
   --background-color-space-demo: var(--color-blue-0);
-  --background-image-space-demo: linear-gradient(135deg,
-      var(--color-blue-30) 10%,
-      #0000 0,
-      #0000 50%,
-      var(--color-blue-30) 0,
-      var(--color-blue-30) 60%,
-      #0000 0,
-      #0000);
+  --background-image-space-demo: linear-gradient(
+    135deg,
+    var(--color-blue-30) 10%,
+    #0000 0,
+    #0000 50%,
+    var(--color-blue-30) 0,
+    var(--color-blue-30) 60%,
+    #0000 0,
+    #0000
+  );
   --link-outline-demo: 2px solid var(--color-blue-50);
 }
 
@@ -249,7 +249,8 @@ td:first-of-type {
 
 /** Default **/
 
-.default-preview, .shadow-preview {
+.default-preview,
+.shadow-preview {
   height: 50px;
   width: 100px;
   background-color: var(--button-background-color);