Are we Design Tokens yet?

toolkit/themes/shared/design-system/dist/web/components/moz-toggle.tokens.css

Propagation: No Props Found

Back to Home

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

/* DO NOT EDIT this file directly, instead modify the relevant *.tokens.json file
 * and run `mach buildtokens` to see your changes. */

@layer acorn.tokens {
  :host {
    --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(--button-background-color-primary);
    --toggle-background-color-pressed-hover: var(--button-background-color-primary-hover);
    --toggle-background-color-pressed-active: var(--button-background-color-primary-active);
    --toggle-border-color: var(--border-color-interactive);
    --toggle-border-color-hover: var(--border-color-interactive-hover);
    --toggle-border-color-active: var(--border-color-interactive-active);
    --toggle-border-radius: var(--border-radius-circle);
    --toggle-border-width: var(--border-width);
    --toggle-dot-background-color: var(--toggle-border-color);
    --toggle-dot-background-color-hover: var(--toggle-border-color-hover);
    --toggle-dot-background-color-active: var(--toggle-border-color-active);
    --toggle-dot-background-color-on-pressed: var(--background-color-box);
    --toggle-dot-height: calc(var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width));
    --toggle-dot-margin: 1px;
    --toggle-dot-transform-x: calc(var(--toggle-width) - 2 * var(--toggle-dot-margin) - 2px - var(--toggle-dot-width));
    --toggle-dot-width: var(--toggle-dot-height);
    --toggle-height: var(--size-item-small);
    --toggle-inset: -2px;
    --toggle-opacity-disabled: var(--button-opacity-disabled);
    --toggle-width: var(--size-item-large);
  }

  @media (prefers-contrast) {
    :host {
      --toggle-border-color: var(--border-color-interactive);
    }
  }

  @media (forced-colors: active) {
    :host {
      --toggle-background-color-disabled: var(--button-background-color-disabled);
      --toggle-background-color-pressed-disabled: var(--button-background-color-primary-disabled);
      --toggle-border-color: var(--border-color-interactive);
      --toggle-border-color-hover: var(--border-color-interactive-hover);
      --toggle-border-color-active: var(--border-color-interactive-active);
      --toggle-border-color-disabled: var(--border-color-interactive-disabled);
      --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-disabled: var(--button-text-color-disabled);
      --toggle-dot-background-color-on-pressed: var(--button-background-color);
      --toggle-dot-background-color-on-pressed-disabled: var(--button-text-color-primary-disabled);
    }
  }
}

Back to Home