Are we Design Tokens yet?

toolkit/themes/shared/design-system/dist/web/components/moz-page-nav.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 {
    --page-nav-border-color: var(--border-color-transparent);
    --page-nav-button-background-color: var(--button-background-color-ghost);
    --page-nav-button-background-color-hover: var(--button-background-color-hover);
    --page-nav-button-background-color-active: var(--button-background-color-active);
    --page-nav-button-background-color-selected: var(--button-background-color-primary);
    --page-nav-button-border-color: var(--border-color-transparent);
    --page-nav-button-border-color-hover: var(--button-border-color-ghost-hover);
    --page-nav-button-border-color-active: var(--button-border-color-ghost-active);
    --page-nav-button-border-radius: var(--border-radius-circle);
    --page-nav-button-border-radius-focused: var(--border-radius-circle);
    --page-nav-button-gap: var(--space-xsmall);
    --page-nav-button-indicator-background-color: transparent;
    --page-nav-button-indicator-width: 0;
    --page-nav-button-padding: var(--space-medium);
    --page-nav-button-padding-small: var(--space-medium);
    --page-nav-button-text-color: var(--button-text-color-ghost);
    --page-nav-button-text-color-hover: var(--button-text-color-ghost-hover);
    --page-nav-button-text-color-active: var(--button-text-color-ghost-active);
    --page-nav-button-text-color-selected: var(--button-text-color-primary);
    --page-nav-focus-outline-offset: var(--focus-outline-offset);
    --page-nav-focus-padding: calc(var(--focus-outline-offset) + var(--focus-outline-width));
    --page-nav-gap: var(--space-large);
    --page-nav-heading-logo-size: var(--icon-size-large);
    --page-nav-hr-background-color: var(--border-color-deemphasized);
    --page-nav-margin-block-start: var(--page-space-block-start);
    --page-nav-margin-inline-start: 40px;
  }

  @media (forced-colors: active) {
    :host {
      --page-nav-button-background-color-selected: var(--button-background-color-selected);
      --page-nav-button-border-color: ButtonText;
      --page-nav-button-text-color-selected: var(--button-text-color-selected);
    }
  }
}

Back to Home