Are we Design Tokens yet?

toolkit/themes/shared/design-system/dist/web/components/moz-input-color.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 {
    --input-color-background-color: var(--button-background-color);
    --input-color-background-color-hover: var(--button-background-color-hover);
    --input-color-background-color-active: light-dark(var(--button-background-color-active), var(--color-violet-desaturated-60));
    --input-color-border-color: var(--border-color-interactive);
    --input-color-border-color-hover: var(--border-color-interactive-hover);
    --input-color-border-color-active: var(--border-color-interactive-active);
    --input-color-border-radius: var(--border-radius-medium);
    --input-color-gap: var(--space-small);
    --input-color-space-padding-block: var(--space-small);
    --input-color-space-padding-inline: var(--space-small);
    --input-color-swatch-border-color: var(--border-color-deemphasized);
    --input-color-swatch-border-radius: var(--border-radius-circle);
    --input-color-swatch-size: var(--size-item-medium);
    --input-color-text-color: var(--button-text-color);
    --input-color-text-color-hover: var(--button-text-color-hover);
    --input-color-text-color-active: var(--button-text-color-active);
  }

  @media (forced-colors: active) {
    :host {
      --input-color-background-color-active: var(--button-background-color-active);
    }
  }
}
Back to Home