Commit 041f7891 authored by Pascal Chevrel's avatar Pascal Chevrel
Browse files

Backed out changeset 1cdfa0b182b1 (bug 1798404) for causing regressions (bug... 

Backed out changeset 1cdfa0b182b1 (bug 1798404) for causing regressions (bug 1835581, bug 1835583, bug 1835588, bug 1835590) a=pascalc
parent 5b0961fa

browser/components/storybook/.storybook/preview-head.html

+1 −1
Original line number Diff line number Diff line 
<!-- This Source Code Form is subject to the terms of the Mozilla Public

   - 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/. -->

<link rel="stylesheet" href="chrome://global/skin/design-tokens-brand.css">



<style>

   /* Override the default Storybook padding in favour of styles

   provided by our WithCommonStyles wrapper */

devtools/client/styleeditor/test/browser_styleeditor_fission_switch_target.js

+2 −2
Original line number Diff line number Diff line
@@ -14,8 +14,8 @@ add_task(async function() { 


  info("Open a page that runs in the parent process");

  const { ui } = await openStyleEditorForURL(PARENT_PROCESS_URI);

  await waitUntil(() => ui.editors.length === 6);

  ok(true, `Six style sheets for ${PARENT_PROCESS_URI}`);

  await waitUntil(() => ui.editors.length === 4);

  ok(true, `Three style sheets for ${PARENT_PROCESS_URI}`);



  info("Navigate to a page that runs in the child process");

  await navigateToAndWaitForStyleSheets(CONTENT_PROCESS_URI, ui, 2);

toolkit/content/widgets/moz-toggle/moz-toggle.css

+44 −119
Original line number Diff line number Diff line
@@ -19,104 +19,101 @@ 
}



.description-wrapper {

  color: var(--text-color-deemphasized);

  color: var(--in-content-deemphasized-text);

}



.description-wrapper,

.description-wrapper ::slotted([slot="support-link"]) {

  grid-row: 2;

  font-size: var(--in-content-font-body-size-small);

  font-size: 0.867rem;

  line-height: 1.25;

  margin: 0;

  grid-column: 1 / -1;

}



.toggle-button {

  --toggle-background-color: var(--button-background-color);

  --toggle-background-color-hover: var(--button-background-color-hover);

  --toggle-background-color-active: var(--button-background-color-active);

  --toggle-background-color-pressed: var(--color-accent-primary);

  --toggle-background-color-pressed-hover: var(--color-accent-primary-hover);

  --toggle-background-color-pressed-active: var(--color-accent-primary-active);

  --toggle-border-color: var(--border-interactive-color);

  --toggle-border-radius: var(--border-radius-circle);

  --toggle-border-width: var(--border-width);

  --toggle-height: var(--size-item-small);

  --toggle-width: var(--size-item-large);

  --toggle-dot-background-color: var(--toggle-border-color);

  --toggle-dot-background-color-on-pressed: var(--color-canvas);

  --toggle-dot-margin: 1px;

  --toggle-dot-height: calc(var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width));

  --toggle-dot-width: var(--toggle-dot-height);

  --toggle-dot-transform-x: calc(var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width));

  --button-height: 16px;

  --button-half-height: 8px;

  --button-width: 32px;

  --button-border-width: 1px;

  /* dot-size = button-height - 2*dot-margin - 2*button-border-width */

  --dot-size: 12px;

  --dot-margin: 1px;

  /* --dot-transform-x = button-width - 2*dot-margin - dot-size - 2*button-border-width */

  --dot-transform-x: 16px;

  --border-color: #8F8F9D;

}



.toggle-button {

  appearance: none;

  padding: 0;

  margin: 0;

  border: var(--toggle-border-width) solid var(--toggle-border-color);

  height: var(--toggle-height);

  width: var(--toggle-width);

  border-radius: var(--toggle-border-radius);

  background: var(--toggle-background-color);

  border: var(--button-border-width) solid var(--border-color);

  height: var(--button-height);

  width: var(--button-width);

  border-radius: var(--button-half-height);

  background-color: var(--in-content-button-background);

  box-sizing: border-box;

}



.toggle-button:focus-visible {

  outline: var(--focus-outline);

  outline-offset: var(--focus-outline-offset);

  outline: var(--in-content-focus-outline-width) solid var(--in-content-focus-outline-color);

  outline-offset: var(--in-content-focus-outline-offset);

}



.toggle-button:enabled:hover {

  background: var(--toggle-background-color-hover);

  border-color: var(--toggle-border-color);

  background-color: var(--in-content-button-background-hover);

  border-color: var(--border-color);

}



.toggle-button:enabled:active {

  background: var(--toggle-background-color-active);

  border-color: var(--toggle-border-color);

  background-color: var(--in-content-button-background-active);

  border-color: var(--border-color);

}



.toggle-button[aria-pressed="true"] {

  background: var(--toggle-background-color-pressed);

  background-color: var(--in-content-primary-button-background);

  border-color: transparent;

}



.toggle-button[aria-pressed="true"]:enabled:hover {

  background: var(--toggle-background-color-pressed-hover);

  background-color: var(--in-content-primary-button-background-hover);

  border-color: transparent;

}



.toggle-button[aria-pressed="true"]:enabled:active {

  background: var(--toggle-background-color-pressed-active);

.toggle-button[aria-pressed="true"]:enabled:active,

.toggle-button[aria-pressed="true"].toggle-button:checked:enabled:hover:active {

  background-color: var(--in-content-primary-button-background-active);

  border-color: transparent;

}



.toggle-button::before {

  display: block;

  content: "";

  background-color: var(--toggle-dot-background-color);

  height: var(--toggle-dot-height);

  width: var(--toggle-dot-width);

  margin: var(--toggle-dot-margin);

  border-radius: var(--toggle-border-radius);

  background-color: var(--border-color);

  height: var(--dot-size);

  width: var(--dot-size);

  margin: var(--dot-margin);

  border-radius: 50%;

  outline: 1px solid transparent;

  outline-offset: -1px;

  translate: 0;

}



.toggle-button[aria-pressed="true"]::before {

  translate: var(--toggle-dot-transform-x);

  background-color: var(--toggle-dot-background-color-on-pressed);

}



.toggle-button[aria-pressed="true"]:enabled:hover::before,

.toggle-button[aria-pressed="true"]:enabled:active::before {

  background-color: var(--toggle-dot-background-color-on-pressed);

  translate: var(--dot-transform-x);

  /* TODO: Bug 1798404 - This color doesn't match the spec in dark mode. This should

  be re-visited when we're defining tokens. */

  background-color: var(--in-content-box-background);

}



.toggle-button[aria-pressed="true"]:-moz-locale-dir(rtl)::before,

.toggle-button[aria-pressed="true"]:dir(rtl)::before {

  translate: calc(-1 * var(--toggle-dot-transform-x));

  translate: calc(-1 * var(--dot-transform-x));

}



.toggle-button[aria-pressed="true"]:not(:active, :hover:active)::before {

  outline-color: var(--in-content-box-background);

}



@media (prefers-reduced-motion: no-preference) {
@@ -124,75 +121,3 @@ 
    transition: translate 100ms;

  }

}
 


@media (prefers-contrast) {

  :host([disabled]) {

    opacity: 1;

  }



  :host([disabled]) > .toggle-button[aria-pressed="true"],

  :host([disabled]) > .toggle-button {

    background-color: var(--toggle-background-color-disabled);

    border-color: var(--toggle-border-color-disabled);

  }



  :host([disabled]) > .toggle-button[aria-pressed="false"]::before,

  :host([disabled]) > .toggle-button[aria-pressed="true"]::before {

    background-color: var(--toggle-background-color-disabled);

  }



  .toggle-button {

    --toggle-dot-background-color: var(--color-accent-primary);

    --toggle-dot-background-color-hover: var(--color-accent-primary-hover);

    --toggle-dot-background-color-active: var(--color-accent-primary-active);

    --toggle-dot-background-color-on-pressed: var(--button-background-color);

    --toggle-background-color-disabled: var(--button-background-color-disabled);

    --toggle-border-color-hover: var(--border-interactive-color-hover);

    --toggle-border-color-active: var(--border-interactive-color-active);

    --toggle-border-color-disabled: var(--border-interactive-color-disabled);

  }



  .toggle-button:enabled:hover {

    border-color: var(--toggle-border-color-hover);

  }



  .toggle-button:enabled:active {

    border-color: var(--toggle-border-color-active);

  }



  .toggle-button[aria-pressed="true"]:enabled {

    border-color: var(--toggle-border-color);

    position: relative;

  }



  .toggle-button[aria-pressed="true"]:enabled:hover,

  .toggle-button[aria-pressed="true"]:enabled:hover:active  {

    border-color: var(--toggle-border-color-hover);

  }



  .toggle-button[aria-pressed="true"]:enabled:active {

    background-color: var(--toggle-dot-background-color-active);

    border-color: var(--toggle-dot-background-color-hover);

  }



  .toggle-button[aria-pressed="true"]:enabled::after {

    border: 1px solid var(--button-background-color);

    content: '';

    position: absolute;

    height: var(--toggle-height);

    width: var(--toggle-width);

    display: block;

    border-radius: var(--toggle-border-radius);

    inset: -2px;

  }



  .toggle-button[aria-pressed="true"]:enabled:active::after {

    border-color: var(--toggle-border-color-active);

  }



  .toggle-button:hover::before,

  .toggle-button:hover:active::before,

  .toggle-button:active::before {

    background-color: var(--toggle-dot-background-color-hover);

  }

}

toolkit/themes/shared/design-tokens-brand.css

deleted100644 → 0
+0 −53
Original line number Diff line number Diff line 
/* This Source Code Form is subject to the terms of the Mozilla Public

 * 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/. */



@import url("chrome://global/skin/design-tokens-shared.css");



:root {

  /* Typography */

  /** Font size **/

  --in-content-font-body-size-base: 15px;

  --in-content-font-body-size-small: 0.867rem;

}



@media not (prefers-contrast) {

  :root {

    /* Border */

    --border-interactive-color: var(--color-gray-60);



    /* Button */

    /* TODO Bug 1821203 - Gray use needs to be consolidated */

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



    /* 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: var(--color-blue-50);

    --brand-color-accent-hover: var(--color-blue-60);

    --brand-color-accent-active: var(--color-blue-70);

    --color-canvas: var(--color-white);



    /* Text */

    --text-color-deemphasized: var(--color-gray-70);

  }

}



@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {

  :root {

    /* Border */

    --border-interactive-color: var(--color-gray-50);



    /* Color */

    --brand-color-accent: var(--color-blue-20);

    --brand-color-accent-hover: var(--color-blue-10);

    --brand-color-accent-active: var(--color-blue-05);

    --color-canvas: var(--color-gray-90);



    /* Text */

    --text-color-deemphasized: var(--color-gray-50);

  }

}

toolkit/themes/shared/design-tokens-shared.css

deleted100644 → 0
+0 −100
Original line number Diff line number Diff line 
/* This Source Code Form is subject to the terms of the Mozilla Public

 * 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/. */



:root {

  /* Base tokens */

  /* Do not use base tokens directly as they don't carry any meaning. Refer to application tokens below. */

  /** Color **/

  --color-white: #ffffff;

  --color-blue-05: #aaf2ff;

  --color-blue-10: #80ebff;

  --color-blue-20: #00ddff;

  --color-blue-50: #0060df;

  --color-blue-60: #0250bb;

  --color-blue-70: #054096;

  --color-gray-50: #bfbfc9;

  --color-gray-60: #8f8f9d;

  --color-gray-70: #5b5b66;

  --color-gray-90: #1c1b22;



  /* Application tokens */

  /** Border **/

  --border-radius-circle: 9999px;

  --border-width: 1px;

  --border-interactive-color: unset;



  /** Button **/

  --button-background-color: unset;

  --button-background-color-hover: unset;

  --button-background-color-active: unset;



  /** Color **/

  --color-accent-primary: unset;

  --color-accent-primary-hover: unset;

  --color-accent-primary-active: unset;

  --color-canvas: unset;



  /** Focus Outline **/

  --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);

  --focus-outline-color: var(--color-accent-primary);

  --focus-outline-inset: calc(-1 * var(--focus-outline-width));

  --focus-outline-offset: 2px;

  --focus-outline-width: 2px;



  /** Text **/

  --text-color-deemphasized: unset;



  /** Size **/

  --size-item-small: 16px;

  --size-item-large: 32px;

}





@media (prefers-contrast) {

  :root, :host {

    /* Button */

    --button-background-color: ButtonFace;

    --button-background-color-hover: ButtonFace;

    --button-background-color-active: ButtonFace;

    --button-background-color-disabled: GrayText;



    /* Color */

    --color-canvas: Canvas;



    /* Text */

    --text-color-deemphasized: CanvasText;

  }

}



@media (forced-colors) {

  /* Applies to Windows HCM only */

  :root, host {

    /* Border */

    --border-interactive-color: ButtonText;

    --border-interactive-color-hover: SelectedItem;

    --border-interactive-color-active: ButtonText;

    --border-interactive-color-disabled: GrayText;



    /* Color */

    --color-accent-primary: ButtonText;

    --color-accent-primary-hover: SelectedItem;

    --color-accent-primary-active: SelectedItem;

  }

}



@media (forced-colors: none) and (prefers-contrast)  {

  /* Applies to macOS "increase contrast" only */

  :root, host {

    /* Border */

    --border-interactive-color: AccentColor;

    --border-interactive-color-hover: ButtonText;

    --border-interactive-color-active: AccentColor;

    --border-interactive-color-disabled: GrayText;



    /* Color */

    --color-accent-primary: AccentColor;

    --color-accent-primary-hover: ButtonText;

    --color-accent-primary-active: ButtonText;

  }

}