corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D249173
This commit is contained in:
hannajones
2025-05-21 03:51:43 +00:00
committed by hjones@mozilla.com
parent d32c555e37
commit b10c7de8d0
20 changed files with 67 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
browser/components/storybook/.storybook/addon-fluent/fluent-panel.css
View File

@@ -7,11 +7,11 @@
} }
.addon-panel-message { .addon-panel-message {
background: #FFF5CF; background: #fff5cf;
color: #333333; color: #333333;
padding: 10px 15px; padding: 10px 15px;
line-height: 20px; 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; font-size: 13px;
} }
@@ -29,7 +29,7 @@ table.addon-panel-table thead.addon-panel-table-head th {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
table.addon-panel-table thead.addon-panel-table-head th { table.addon-panel-table thead.addon-panel-table-head th {
color: rgba(201, 205, 207, 0.55) color: rgba(201, 205, 207, 0.55);
} }
} }

6
toolkit/content/tests/widgets/videomask.css
View File

@@ -1,9 +1,11 @@
html, body { html,
body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
audio, video { audio,
video {
width: 140px; width: 140px;
height: 100px; height: 100px;
background-color: black; background-color: black;

2
toolkit/content/widgets/datetimebox.css
View File

@@ -45,7 +45,7 @@
color: inherit; color: inherit;
font-size: inherit; font-size: inherit;
fill: currentColor; fill: currentColor;
opacity: .65; opacity: 0.65;
background-color: transparent; background-color: transparent;
border: none; border: none;
border-radius: 0.2em; border-radius: 0.2em;

8
toolkit/content/widgets/infobar.css
View File

@@ -58,11 +58,11 @@
} }
} }
:host([message-bar-type=infobar]:first-of-type) { :host([message-bar-type="infobar"]:first-of-type) {
margin-top: 4px; margin-top: 4px;
} }
:host([message-bar-type=infobar]) { :host([message-bar-type="infobar"]) {
margin: 0 4px 4px; margin: 0 4px 4px;
} }
@@ -89,10 +89,10 @@ strong {
/* type="system" infobar styles */ /* type="system" infobar styles */
:host([type=system]) .icon { :host([type="system"]) .icon {
display: none; display: none;
} }
:host([type=system]) .content { :host([type="system"]) .content {
margin-inline-start: 0; margin-inline-start: 0;
} }

7
toolkit/content/widgets/moz-box-common.css
View File

@@ -27,12 +27,10 @@
place-items: center start; place-items: center start;
gap: var(--space-xxsmall) var(--space-small); gap: var(--space-xxsmall) var(--space-small);
grid-template-columns: var(--box-icon-size) 1fr; grid-template-columns: var(--box-icon-size) 1fr;
grid-template-areas: grid-template-areas: "label label";
"label label";
&.has-icon { &.has-icon {
grid-template-areas: grid-template-areas: "icon label";
"icon label";
} }
&.has-description { &.has-description {
@@ -81,7 +79,6 @@
border-end-start-radius: var(--box-border-radius-end, var(--box-border-radius-inner)); 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)); border-end-end-radius: var(--box-border-radius-end, var(--box-border-radius-inner));
&:focus-visible { &:focus-visible {
outline: var(--focus-outline); outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset); outline-offset: var(--focus-outline-offset);

14
toolkit/content/widgets/moz-button/moz-button.css
View File

@@ -52,7 +52,7 @@ button {
align-items: center; align-items: center;
position: relative; position: relative;
&[size=small] { &[size="small"] {
min-height: var(--button-min-height-small); min-height: var(--button-min-height-small);
font-size: var(--button-font-size-small); font-size: var(--button-font-size-small);
} }
@@ -140,7 +140,7 @@ button {
} }
} }
&[type~=ghost] { &[type~="ghost"] {
background-color: var(--button-background-color-ghost); background-color: var(--button-background-color-ghost);
border-color: var(--button-border-color-ghost); border-color: var(--button-border-color-ghost);
color: var(--button-text-color-ghost); color: var(--button-text-color-ghost);
@@ -165,29 +165,29 @@ button {
} }
&.labelled { &.labelled {
gap: var(--space-small) gap: var(--space-small);
} }
&[type~=icon]:not(.labelled) { &[type~="icon"]:not(.labelled) {
background-size: var(--icon-size-default); background-size: var(--icon-size-default);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
&[type~=icon]:not(.labelled), &[type~="icon"]:not(.labelled),
&:not(.labelled):has(img) { &:not(.labelled):has(img) {
width: var(--button-size-icon); width: var(--button-size-icon);
height: var(--button-size-icon); height: var(--button-size-icon);
padding: var(--button-padding-icon); padding: var(--button-padding-icon);
&[size=small] { &[size="small"] {
width: var(--button-size-icon-small); width: var(--button-size-icon-small);
height: var(--button-size-icon-small); height: var(--button-size-icon-small);
} }
} }
img, img,
&[type~=icon]:not(.labelled) { &[type~="icon"]:not(.labelled) {
-moz-context-properties: fill, fill-opacity, stroke; -moz-context-properties: fill, fill-opacity, stroke;
fill: var(--button-icon-fill); fill: var(--button-icon-fill);
stroke: var(--button-icon-stroke); stroke: var(--button-icon-stroke);

10
toolkit/content/widgets/moz-card/moz-card.css
View File

@@ -2,7 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:host { :host {
--card-border-radius: var(--border-radius-medium); --card-border-radius: var(--border-radius-medium);
--card-border-width: var(--border-width); --card-border-width: var(--border-width);
--card-border: var(--card-border-width) solid var(--border-color-card); --card-border: var(--card-border-width) solid var(--border-color-card);
@@ -23,7 +23,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
:host([type=accordion]) { :host([type="accordion"]) {
summary { summary {
padding-block: var(--card-padding-block, var(--card-padding)); padding-block: var(--card-padding-block, var(--card-padding));
} }
@@ -31,7 +31,7 @@
padding-block-end: var(--card-padding-block, var(--card-padding)); padding-block-end: var(--card-padding-block, var(--card-padding));
} }
} }
:host(:not([type=accordion])) { :host(:not([type="accordion"])) {
.moz-card { .moz-card {
padding-block: var(--card-padding-block, var(--card-padding)); padding-block: var(--card-padding-block, var(--card-padding));
} }
@@ -101,14 +101,14 @@ summary {
border-end-end-radius: var(--card-border-radius); border-end-end-radius: var(--card-border-radius);
@media (prefers-contrast) { @media (prefers-contrast) {
:host([type=accordion]) & { :host([type="accordion"]) & {
border-block-start: 0; border-block-start: 0;
padding-block-start: var(--card-padding-block, var(--card-padding)); padding-block-start: var(--card-padding-block, var(--card-padding));
} }
} }
} }
details { details {
> summary { > summary {
list-style: none; list-style: none;
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);

1
toolkit/content/widgets/moz-five-star/moz-five-star.css
View File

@@ -41,7 +41,6 @@
} }
} }
.rating-star[fill="half"] { .rating-star[fill="half"] {
background-image: url("chrome://global/skin/icons/rating-star.svg#half"); background-image: url("chrome://global/skin/icons/rating-star.svg#half");
} }

8
toolkit/content/widgets/moz-input-color/moz-input-color.css
View File

@@ -2,8 +2,6 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:host { :host {
--moz-input-color-swatch-size: 24px; --moz-input-color-swatch-size: 24px;
@@ -25,7 +23,6 @@ label {
background-color: var(--button-background-color-ghost); background-color: var(--button-background-color-ghost);
} }
label:hover { label:hover {
border-color: var(--border-color-interactive-hover); border-color: var(--border-color-interactive-hover);
background-color: var(--button-background-color-ghost-hover); background-color: var(--button-background-color-ghost-hover);
@@ -33,10 +30,9 @@ label:hover {
label:hover:active { label:hover:active {
border-color: var(--border-color-interactive-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 { label:focus-within {
outline: var(--focus-outline); outline: var(--focus-outline);
} }
@@ -67,5 +63,5 @@ label span {
.icon { .icon {
-moz-context-properties: fill; -moz-context-properties: fill;
fill: var(--icon-color); fill: var(--icon-color);
} }

14
toolkit/content/widgets/moz-input-folder/moz-input-folder.css
View File

@@ -5,17 +5,17 @@
@import url("chrome://global/content/elements/moz-input-text.css"); @import url("chrome://global/content/elements/moz-input-text.css");
:host { :host {
--input-folder-space-inline: var(--space-medium); --input-folder-space-inline: var(--space-medium);
width: 100%; width: 100%;
} }
#input { #input {
min-width: var(--input-folder-min-width); min-width: var(--input-folder-min-width);
max-width: var(--input-folder-max-width); max-width: var(--input-folder-max-width);
} }
.container { .container {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
gap: var(--input-folder-space-inline); gap: var(--input-folder-space-inline);
} }

10
toolkit/content/widgets/moz-message-bar/moz-message-bar.css
View File

@@ -11,7 +11,7 @@
/* Container */ /* Container */
--message-bar-container-min-height: var(--size-item-large); --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-color: oklch(from var(--message-bar-icon-color) l c h / 20%);
--message-bar-border-radius: var(--border-radius-small); --message-bar-border-radius: var(--border-radius-small);
--message-bar-border-width: var(--border-width); --message-bar-border-width: var(--border-width);
@@ -142,18 +142,18 @@ moz-button::part(button) {
@media not (prefers-contrast) { @media not (prefers-contrast) {
/* MozMessageBar colors by message type */ /* MozMessageBar colors by message type */
:host([type=warning]) { :host([type="warning"]) {
--message-bar-background-color: var(--background-color-warning); --message-bar-background-color: var(--background-color-warning);
--message-bar-icon-color: var(--icon-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-background-color: var(--background-color-success);
--message-bar-icon-color: var(--icon-color-success); --message-bar-icon-color: var(--icon-color-success);
} }
:host([type=error]), :host([type="error"]),
:host([type=critical]) { :host([type="critical"]) {
--message-bar-background-color: var(--background-color-critical); --message-bar-background-color: var(--background-color-critical);
--message-bar-icon-color: var(--icon-color-critical); --message-bar-icon-color: var(--icon-color-critical);
} }

2
toolkit/content/widgets/moz-page-nav/moz-page-nav.css
View File

@@ -9,7 +9,7 @@
--page-nav-border-color: var(--border-color-transparent); --page-nav-border-color: var(--border-color-transparent);
--page-nav-focus-outline-inset: var(--focus-outline-inset); --page-nav-focus-outline-inset: var(--focus-outline-inset);
--page-nav-heading-logo-size: calc(var(--icon-size-default) + var(--space-small)); --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; margin-inline-start: 42px;
position: sticky; position: sticky;

6
toolkit/content/widgets/moz-select/moz-select.css
View File

@@ -6,7 +6,7 @@
--select-border: var(--button-border); --select-border: var(--button-border);
--select-border-radius: var(--button-border-radius); --select-border-radius: var(--button-border-radius);
--select-border-color-hover: var(--button-border-color-hover); --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-hover: var(--button-background-color-hover);
--select-background-color-disabled: var(--button-background-color-disabled); --select-background-color-disabled: var(--button-background-color-disabled);
--select-margin-block: var(--input-margin-block-adjust); --select-margin-block: var(--input-margin-block-adjust);
@@ -23,7 +23,7 @@
.select-wrapper { .select-wrapper {
border-radius: var(--select-border-radius); 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-block: var(--select-margin-block);
margin-inline: var(--select-margin-inline); margin-inline: var(--select-margin-inline);
min-width: var(--select-min-width); min-width: var(--select-min-width);
@@ -43,7 +43,7 @@ select {
border: var(--select-border); border: var(--select-border);
border-radius: var(--select-border-radius); border-radius: var(--select-border-radius);
padding-block: var(--space-xsmall); padding-block: var(--space-xsmall);
padding-inline: var(--space-large) var(--space-xxlarge); padding-inline: var(--space-large) var(--space-xxlarge);
margin: 0; margin: 0;
min-height: var(--select-min-height); min-height: var(--select-min-height);
width: 100%; width: 100%;

2
toolkit/content/widgets/moz-toggle/moz-toggle.css
View File

@@ -141,7 +141,7 @@
.toggle-button[aria-pressed="true"]:enabled::after { .toggle-button[aria-pressed="true"]:enabled::after {
border: 1px solid var(--button-background-color); border: 1px solid var(--button-background-color);
content: ''; content: "";
position: absolute; position: absolute;
height: var(--toggle-height); height: var(--toggle-height);
width: var(--toggle-width); width: var(--toggle-width);

2
toolkit/content/widgets/panel-list/panel-list.css
View File

@@ -31,7 +31,7 @@
overflow-y: visible; overflow-y: visible;
} }
:host(:not([slot=submenu])) { :host(:not([slot="submenu"])) {
max-height: 100%; max-height: 100%;
} }

2
toolkit/themes/shared/design-system/package.json
View File

@@ -2,7 +2,7 @@
"description": "Package file for node modules used to create our CSS tokens from a JSON source of truth.", "description": "Package file for node modules used to create our CSS tokens from a JSON source of truth.",
"license": "MPL-2.0", "license": "MPL-2.0",
"scripts": { "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" "test": "(npm ls || npm ci) && node tests/try-runner.js"
}, },
"devDependencies": { "devDependencies": {

2
toolkit/themes/shared/design-system/tokens-platform.css
View File

@@ -46,7 +46,7 @@
--link-color-visited: var(--link-color); --link-color-visited: var(--link-color);
/** Table Row **/ /** 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 **/
--text-color: currentColor; --text-color: currentColor;

8
toolkit/themes/shared/design-system/tokens-shared.css
View File

@@ -18,7 +18,7 @@
--background-color-warning: light-dark(var(--color-yellow-0), var(--color-yellow-90)); --background-color-warning: light-dark(var(--color-yellow-0), var(--color-yellow-90));
/** Border **/ /** 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-card: color-mix(in srgb, currentColor 10%, transparent);
--border-color-interactive-hover: var(--border-color-interactive); --border-color-interactive-hover: var(--border-color-interactive);
--border-color-interactive-active: 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-100: oklch(27% 0.1 145);
--color-green-110: oklch(20% 0.05 145); --color-green-110: oklch(20% 0.05 145);
--color-orange-0: oklch(97% 0.05 50); --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-20: oklch(86% 0.14 50);
--color-orange-30: oklch(79% 0.17 50); --color-orange-30: oklch(79% 0.17 50);
--color-orange-40: oklch(72% 0.19 50); --color-orange-40: oklch(72% 0.19 50);
--color-orange-50: oklch(65% 0.21 50); --color-orange-50: oklch(65% 0.21 50);
--color-orange-60: oklch(58% 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-80: oklch(41% 0.17 50);
--color-orange-90: oklch(34% 0.14 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-orange-110: oklch(20% 0.05 50);
--color-pink-0: oklch(97% 0.05 360); --color-pink-0: oklch(97% 0.05 360);
--color-pink-10: oklch(90% 0.1 360); --color-pink-10: oklch(90% 0.1 360);

4
toolkit/themes/shared/design-system/tokens-storybook.mjs
View File

@@ -214,7 +214,7 @@ export const storybookTables = {
"border-color": [ "border-color": [
{ {
value: { value: {
comment: "TODO Bug 1946826 - Border colors need to be consolidated", comment: "TODO Bug 1821203 - Gray tones need to be consolidated",
light: "#CFCFD8", light: "#CFCFD8",
dark: "#3A3944", dark: "#3A3944",
prefersContrast: "CanvasText", prefersContrast: "CanvasText",
@@ -1025,7 +1025,7 @@ export const variableLookupTable = {
default: "light-dark(var(--color-yellow-0), var(--color-yellow-90))", default: "light-dark(var(--color-yellow-0), var(--color-yellow-90))",
}, },
"border-color": { "border-color": {
comment: "TODO Bug 1946826 - Border colors need to be consolidated", comment: "TODO Bug 1821203 - Gray tones need to be consolidated",
light: "#CFCFD8", light: "#CFCFD8",
dark: "#3A3944", dark: "#3A3944",
prefersContrast: "CanvasText", prefersContrast: "CanvasText",

25
toolkit/themes/shared/design-system/tokens-table.css
View File

@@ -6,21 +6,21 @@
--border-color-tokens-table: var(--color-gray-50); --border-color-tokens-table: var(--color-gray-50);
--table-border-outer: 2px solid var(--border-color-tokens-table); --table-border-outer: 2px solid var(--border-color-tokens-table);
--table-border-inner: var(--border-width) 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, --table-background-color: color-mix(in srgb, var(--color-gray-50) 20%, transparent);
var(--color-gray-50) 20%,
transparent);
--outline-preview: 2px solid var(--color-gray-60); --outline-preview: 2px solid var(--color-gray-60);
--background-color-icon-demo: var(--color-gray-60); --background-color-icon-demo: var(--color-gray-60);
--background-color-padding-demo: var(--color-blue-60); --background-color-padding-demo: var(--color-blue-60);
--background-color-space-demo: var(--color-blue-0); --background-color-space-demo: var(--color-blue-0);
--background-image-space-demo: linear-gradient(135deg, --background-image-space-demo: linear-gradient(
var(--color-blue-30) 10%, 135deg,
#0000 0, var(--color-blue-30) 10%,
#0000 50%, #0000 0,
var(--color-blue-30) 0, #0000 50%,
var(--color-blue-30) 60%, var(--color-blue-30) 0,
#0000 0, var(--color-blue-30) 60%,
#0000); #0000 0,
#0000
);
--link-outline-demo: 2px solid var(--color-blue-50); --link-outline-demo: 2px solid var(--color-blue-50);
} }
@@ -249,7 +249,8 @@ td:first-of-type {
/** Default **/ /** Default **/
.default-preview, .shadow-preview { .default-preview,
.shadow-preview {
height: 50px; height: 50px;
width: 100px; width: 100px;
background-color: var(--button-background-color); background-color: var(--button-background-color);