zen-desktop/src/browser/base/content/zen-styles/zen-theme.css

/*
 * 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/.
 */
/* Here, we contain all the theme related variables, for example theme
 * colors, border radius, etc.
 * We have `--zen-border-radius` and `--zen-primary-color` as variables.
 */

:host(:is(.anonymous-content-host, notification-message)),
:root,
.zenLooksAndFeelColorOption {
  /** We also add `.zenLooksAndFeelColorOption` so that it recalculates the colors when the theme changes
  * in the preferences page.
  */

  /* Default values */
  --zen-border-radius: 7px;
  --zen-primary-color: #ffb787;

  /* Branding */
  --zen-branding-dark: #1d1d1d;
  --zen-branding-coral: #f76f53;
  --zen-branding-paper: #ebebeb;

  --zen-branding-bg: light-dark(var(--zen-branding-paper), var(--zen-branding-dark));
  --zen-branding-bg-reverse: light-dark(var(--zen-branding-dark), var(--zen-branding-paper));

  /** Zen colors are generated automatically from the primary color */
  --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
  --zen-colors-secondary: color-mix(in srgb, var(--zen-colors-primary) 20%, white 80%);
  --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 2%, white 98%);

  --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
  --zen-colors-primary-foreground: var(--zen-branding-bg-reverse);
  --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
  --zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(181, 181, 181, 0.11) 90%);

  --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);

  --zen-dialog-background: var(--zen-colors-tertiary);
  --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 3%, #f4f4f4 97%);

  --zen-secondary-btn-color: var(--zen-colors-primary-foreground);

  --in-content-primary-button-background: color-mix(
    in srgb,
    var(--zen-primary-color) 10%,
    var(--zen-branding-bg) 90%
  ) !important;
  --in-content-primary-button-background-hover: color-mix(
    in srgb,
    var(--zen-primary-color) 15%,
    var(--zen-branding-bg) 85%
  ) !important;
  --in-content-primary-button-background-active: color-mix(
    in srgb,
    var(--zen-primary-color) 20%,
    var(--zen-branding-bg) 80%
  ) !important;
  --button-text-color-primary: var(--zen-branding-bg-reverse) !important;
  --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
  --in-content-primary-button-border-color: transparent !important;
  --in-content-primary-button-border-hover: transparent !important;
  --in-content-primary-button-border-active: var(--zen-colors-border) !important;
  --in-content-box-border-color: var(--zen-colors-border) !important;

  --in-content-accent-color: var(--zen-colors-primary) !important;
  --in-content-accent-color-active: currentColor !important;

  /* This is like the secondary button */
  --in-content-button-background: transparent !important;
  --in-content-button-text-color: var(--zen-secondary-btn-color) !important;
  --in-content-button-background-hover: color-mix(in srgb, var(--zen-primary-color) 5%, var(--zen-branding-bg) 60%) !important;
  --button-bgcolor: var(--in-content-button-background) !important;
  --button-hover-bgcolor: var(--in-content-button-background-hover) !important;
  --button-hover-color: var(--in-content-button-text-color-hover) !important;
  --focus-outline-color: var(--button-bgcolor) !important;

  --toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
  --toolbarbutton-icon-fill: light-dark(rgb(57, 57, 58), rgb(251, 251, 254)) !important;

  --button-primary-bgcolor: var(--in-content-primary-button-background) !important;
  --button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
  --button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important;
  --button-primary-color: var(--in-content-primary-button-text-color) !important;

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

  --color-accent-primary: var(--button-primary-bgcolor) !important;
  --color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important;
  --color-accent-primary-active: var(--button-primary-active-bgcolor) !important;

  --link-color: var(--zen-branding-bg-reverse) !important;
  --link-color-hover: var(--zen-colors-primary-foreground) !important;
  --link-color-active: color-mix(in srgb, var(--zen-colors-primary-foreground) 80%, transparent 20%) !important;

  --in-content-page-background: var(--zen-colors-tertiary) !important;
  --zen-in-content-dialog-background: var(--zen-colors-tertiary);

  --zen-button-border-radius: 5px;
  --zen-button-padding: 0.6rem 1.2rem;

  --zen-toolbar-element-bg: light-dark(rgba(0, 0, 0, 0.11), rgba(255, 255, 255, 0.11));

  /* Toolbar */
  --zen-toolbar-height: 38px;
  --zen-toolbar-button-inner-padding: 6px;
  --toolbarbutton-outer-padding: 4px;

  --toolbarbutton-hover-background: color-mix(in srgb, var(--zen-branding-bg-reverse) 10%, transparent 90%);

  /* Other colors */
  --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;
  --urlbar-box-active-bgcolor: var(--toolbarbutton-hover-background) !important;
  --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
  --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
  --urlbar-box-hover-bgcolor: var(--toolbarbutton-hover-background) !important;

  /* XUL */
  --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
  --zen-main-browser-background-toolbar: var(--zen-main-browser-background);

  --browser-area-z-index-toolbox: 2 !important;

  --zen-appcontent-border: 1px solid var(--zen-colors-border);

  --toolbarbutton-border-radius: 6px;
  --urlbar-margin-inline: 1px !important;

  --fp-contextmenu-border-radius: 8px;
  --fp-contextmenu-padding: calc(4px - var(--fp-contextmenu-menuitem-border-width)) 0;
  --fp-contextmenu-menuitem-border-radius: calc(4px + var(--fp-contextmenu-menuitem-border-width));
  --fp-contextmenu-menuitem-padding-block: 6px;
  --fp-contextmenu-menuitem-padding-inline: 10px;
  --fp-contextmenu-menuitem-border-width: 2px;
  --fp-contextmenu-menuicon-margin-inline: 12px;
  --fp-contextmenu-menuitem-margin-inline: calc(4px - var(--fp-contextmenu-menuitem-border-width));
  --fp-contextmenu-menuitem-margin-block: 0px;
  --fp-contextmenu-menuitem-margin: var(--fp-contextmenu-menuitem-margin-block) var(--fp-contextmenu-menuitem-margin-inline);
  --fp-contextmenu-separator-vertical: calc(4px - var(--fp-contextmenu-menuitem-border-width));
  --fp-contextmenu-separator-horizontal: 0;
  --fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
  --toolbar-bgcolor: transparent;

  --toolbarbutton-active-background: var(--zen-toolbar-element-bg);

  --input-bgcolor: var(--zen-colors-tertiary) !important;
  --input-border-color: var(--zen-input-border-color) !important;
  --zen-themed-toolbar-bg: light-dark(var(--zen-branding-bg), #161616);
  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #161616);

  @media (-moz-windows-mica) or (-moz-platform: macos) {
    background: transparent;
    --zen-themed-toolbar-bg-transparency: 0;
    --zen-themed-toolbar-bg-transparent: light-dark(
      rgba(255, 255, 255, var(--zen-themed-toolbar-bg-transparency)),
      rgba(0, 0, 0, var(--zen-themed-toolbar-bg-transparency))
    );
  }

  --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
  --arrowpanel-background: var(--zen-dialog-background) !important;

  --tab-selected-shadow: none !important;
  --zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));

  /* Nativity */
  --zen-native-content-radius: var(--zen-border-radius);
  @media (-moz-platform: linux) {
    --zen-native-content-radius: env(-moz-gtk-csd-titlebar-radius);
  }
  --zen-native-inner-radius: var(
    --zen-webview-border-radius,
    /* Inner radius calculation:
      * 1. If the native radius - the separation is less than 4px, use 4px.
      * 2. Otherwise, use the the calculated value (inner radius = outer radius - separation).
    */
      max(5px, calc(var(--zen-native-content-radius) - var(--zen-element-separation)))
  );

  /** Other theme-related styles */
  @media (-moz-platform: macos) {
    font-family:
      SF Pro,
      ui-sans-serif,
      system-ui,
      sans-serif,
      Apple Color Emoji,
      Segoe UI Emoji,
      Segoe UI Symbol,
      Noto Color Emoji;
  }
}

@media (prefers-color-scheme: dark) {
  :host(:is(.anonymous-content-host, notification-message)),
  :root {
    --zen-in-content-dialog-background: var(--zen-branding-bg);
    --zen-dark-color-mix-base: var(--zen-branding-bg);
    --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-dark-color-mix-base) 80%);
    --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
    --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);

    --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, var(--zen-dark-color-mix-base) 10%);
    --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);

    --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-dark-color-mix-base) 99%);
    --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(53, 53, 53) 80%);
    --zen-colors-border-contrast: color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, 0.11) 90%);

    --zen-dialog-background: var(--zen-dark-color-mix-base);
    --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%);

    --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-dark-color-mix-base) 70%);
  }
}

@media (prefers-color-scheme: dark) {
  @media (-moz-bool-pref: 'zen.theme.color-prefs.amoled') {
    :root {
      --zen-dark-color-mix-base: hsl(5 5 5);
      --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(0, 0, 0) 96%);
    }
  }

  @media (-moz-bool-pref: 'zen.theme.color-prefs.colorful') {
    :root {
      --zen-in-content-dialog-background: rgb(28, 28, 32);

      --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
      --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 40%, black 60%);
      --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 15%, black 85%);

      --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, black 10%);
      --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);

      --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, black 80%);
      --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 80%, black 20%);

      --zen-dialog-background: color-mix(in srgb, var(--zen-primary-color) 10%, black 90%);
      --zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 8%, rgb(15, 15, 15) 92%);

      --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 30%, black 70%);
    }
  }
}