Bug 1606785 - Format recomp CSS files with Prettier r=reusable-components-reviewers,desktop-theme-reviewers,dao,mkennedy

Differential Revision: https://phabricator.services.mozilla.com/D249173
2025-05-21 03:51:43 +00:00
parent d32c555e37
commit b10c7de8d0
20 changed files with 67 additions and 72 deletions
--- 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);
  }
 }

--- 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;
--- 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;
--- 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;
 }
--- 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);
--- 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);
--- 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);
--- 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");
 }
--- 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);
 }
--- 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);
 }
--- 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);
  }
--- 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;
--- 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%;
--- 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);
--- 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%;
 }

--- 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": {
--- 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;
--- 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);
--- 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",
--- 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);