Are we Design Tokens yet?

toolkit/themes/shared/design-system/src/toolbar.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/. */

:root {
  --toolbar-start-end-padding: 8px;

  --toolbarbutton-outer-padding: 2px;
  --toolbarbutton-outer-padding-narrow: 1px;

  --toolbarbutton-inner-padding: 8px;
  --toolbarbutton-inner-padding-narrow: 7px;
  --toolbarbutton-inner-padding-compact: 6px;
  --toolbarbutton-inner-padding-touch: 9px;
  --toolbarbutton-inner-padding-touch-narrow: 8px;

  --toolbarbutton-icon-fill: currentColor;
  --toolbarbutton-icon-fill-attention: AccentColor;
  --toolbarbutton-icon-fill-attention-text: AccentColorText;

  --toolbarbutton-disabled-opacity: 0.4;
  --toolbarbutton-border-radius: var(--button-border-radius);

  --toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent);
  --toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent);

  --toolbarbutton-outline-color: transparent;
  --toolbarbutton-hover-outline-color: transparent;
  --toolbarbutton-active-outline-color: transparent;
  --toolbarbutton-selected-outline-color: var(--toolbarbutton-active-outline-color);
  --toolbarbutton-outline: var(--border-width) solid var(--toolbarbutton-outline-color);
  --toolbarbutton-outline-offset: calc(-1 * var(--border-width));

  --toolbar-field-background-color: Field;
  --toolbar-field-color: FieldText;
  --toolbar-field-border-color: var(--input-border-color);
  --toolbar-field-focus-background-color: Field;
  --toolbar-field-focus-color: FieldText;
  --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);

  --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
  --toolbar-color: -moz-dialogtext;
  --toolbarseparator-color: color-mix(in srgb, currentColor 60%, transparent);

  /* Override some toolbar colors when not under prefers-contrast.
   *
   * For the light theme we use .05 alpha, to increase the contrast of the
   * text. For the dark theme, we use a darker background, which works because
   * the toolbar background applies some white unconditionally.
   */
  @media not (prefers-contrast) {
    --toolbar-field-border-color: transparent;
    --toolbar-field-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
    --toolbar-field-color: inherit;

    @media (prefers-color-scheme: light) {
      --toolbar-bgcolor: white;
    }
  }

  @media (prefers-contrast) {
    /* Reduce the opacity of disabled toolbar buttons in order to increase
       contrast with the enabled state. */
    --toolbarbutton-disabled-opacity: 0.3;
    --toolbar-field-focus-border-color: var(--focus-outline-color);
    --toolbarbutton-hover-outline-color: currentColor;
    --toolbarbutton-active-outline-color: currentColor;
  }

  @media (forced-colors) {
    --toolbarbutton-outline-color: ButtonText;
    --toolbarbutton-hover-outline-color: SelectedItem;
    --toolbarbutton-active-outline-color: ButtonText;
    --toolbarbutton-selected-outline-color: SelectedItem;

    &[lwtheme] {
      --toolbarbutton-outline-color: currentColor;
    }
  }

  &[lwtheme] {
    --toolbar-bgcolor: rgba(255, 255, 255, 0.4);
    --toolbar-color: var(--lwt-text-color, inherit);

    --toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
    --toolbarbutton-icon-fill-attention-text-light: rgb(240, 240, 244);
    --toolbarbutton-icon-fill-attention-text-dark: rgb(28, 27, 34);
    --toolbarbutton-icon-fill-attention-text: light-dark(
      var(--toolbarbutton-icon-fill-attention-text-light),
      var(--toolbarbutton-icon-fill-attention-text-dark)
    );
  }
}

/**
 * We intentionally do not use the custom colors on linux or macOS with system
 * theme enabled, instead choosing to fall back to system colors and
 * transparencies in order to look more native.
 */
@media not ((forced-colors) or (-moz-native-theme)) {
  :root:not([lwtheme]) {
    --toolbar-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
    --toolbar-bgcolor: light-dark(#f9f9fb, rgb(43, 42, 51));

    --toolbar-field-border-color: transparent;
    --toolbar-field-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
    --toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
    --toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77));
    --toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254));

    --toolbarbutton-icon-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254));
    --toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
    --toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
  }
}

Back to Home