wagtail/client/scss/settings/_variables.scss

@use 'sass:color';
// paths

// We can't use absolute paths here, because those are dependent on Django's
// STATIC_URL setting. Instead, relative paths from the final location of the
// compiled CSS files are used.
// */

$images-root: '../images/';

// grid settings
$grid-columns: 12;
$grid-gutter-width: 3%;
$grid-max-width: 1200px;
$grid-content-indent: 0.7;

$mobile-nice-padding: 20px;
$desktop-nice-padding: 50px;

// screen breakpoints
$breakpoints: (
  xs: 0,
  sm: 50em,
  // 800px
  md: 56.25em,
  // 900px
  lg: 75em,
  // 1200px
  xl: 100em,
  // 1440px
);

// colours
$color-teal-light: var(--color-primary-light);
$color-teal-lighter: var(--color-primary-lighter);
$color-teal: var(--color-primary);
$color-teal-darker: var(--color-primary-darker);
$color-teal-dark: var(--color-primary-dark);

$color-blue: #71b2d4;
$color-red: #cd3238;
$color-red-dark: #b4191f;
$color-orange: #e9b04d;
$color-orange-dark: #bb5b03;
$color-green: #189370;
$color-green-dark: #157b57;
$color-green-darker: #105d42; // White has AAA compatibility when this is used in bgd.
$color-salmon: #f37e77;
$color-salmon-light: #fcf2f2;
$color-white: #fff;
$color-black: #000;

// darker to lighter
$color-grey-1: color.adjust($color-white, $lightness: -80%);
$color-grey-2: color.adjust($color-white, $lightness: -70%);
$color-grey-3: color.adjust($color-white, $lightness: -15%);
$color-grey-4: color.adjust($color-white, $lightness: -10%);
$color-grey-5: color.adjust($color-white, $lightness: -2%);

$color-menu-text: color.adjust($color-white, $lightness: -20%);

$color-thead-bg: $color-grey-5;
$color-header-bg: $color-teal;

$color-fieldset-hover: $color-grey-5;
$color-input-border: $color-grey-4;
$color-input-focus: var(--color-input-focus);
$color-input-focus-border: var(--color-input-focus-border);
$color-input-error-bg: color.adjust(
  color.adjust($color-red, $saturation: 28%),
  $lightness: 45%
);

$color-button: $color-teal;
$color-button-hover: $color-teal-darker;
$color-button-yes: $color-green-dark;
$color-button-yes-hover: color.adjust($color-button-yes, $lightness: -8%);
$color-button-no: $color-red-dark;
$color-button-no-hover: color.adjust($color-button-no, $lightness: -20%);
$color-button-warning: $color-orange-dark;
$color-button-warning-hover: color.adjust(
  $color-button-warning,
  $lightness: -20%
);

$color-link: $color-teal-darker;
$color-link-hover: $color-teal-dark;

// The focus outline color is defined without reusing a named color variable
// because it shouldn’t be reused for anything else in the UI.
$color-focus-outline: #ffbf47;

$color-text-base: color.adjust($color-white, $lightness: -85%);
$color-text-input: color.adjust($color-white, $lightness: -90%);

// System Colors
$media-forced-colours: active;
$system-color-link-text: LinkText;
$system-color-button-text: ButtonText;

// Fonts
// Our fonts are based off of a list of system fallbacks to ensure
// that the most 'up-to-date' and available system font is used and rendered consistently as possible across browsers.
$font-sans:
  // iOS Safari, macOS Safari, macOS Firefox
  -apple-system,
  // macOS Chrome
  BlinkMacSystemFont,
  // Windows - for all browsers on Windows 7+ (putting Segoe UI before system-ui ensures Segoe UI will be rendered for different languages)
  'Segoe UI',
  system-ui,
  // Targets Android and newer Chrome OS'. (If Roboto is installed on your windows computer Segoe UI will take precedence.)
  Roboto,
  // A common fallback font for older macOS'
  'Helvetica Neue',
  // Very old Windows versions (special shout-out to whoever is using windows 95)
  Arial,
  // A last resort if all else fails, just give us something without serifs :)
  sans-serif,
  // All the emojis 👋🙂
  'Apple Color Emoji',
  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

// Legacy icon font, to be removed in the near future.
$font-wagtail-icons: wagtail;

// misc sizing
$thumbnail-width: 130px;
$menu-width: 200px;
$menu-width-slim: 65px;

$menu-width-max: 320px;

$mobile-nav-indent: 50px;

$sidebar-toggle-spacing: 12px;
$sidebar-toggle-size: 35px;

// transitions
// Please keep in sync with SIDEBAR_TRANSITION_DURATION variable in `client/src/components/Sidebar/Sidebar.tsx`
$menu-transition-duration: 150ms;

$focus-outline-width: 3px;

$nav-wrapper-inner-z-index: 26;
$draftail-editor-z-index: $nav-wrapper-inner-z-index + 1;

$object-title-height: 40px;

// Nav
$nav-grey-1: color.adjust($color-white, $lightness: -80%);
$nav-grey-2: color.adjust($color-white, $lightness: -60%);
$nav-grey-3: #262626;
$nav-item-hover-bg: rgba(100, 100, 100, 0.15);
$nav-item-active-bg: color.adjust($color-white, $lightness: -90%);
$nav-submenu-bg: color.adjust($color-white, $lightness: -85%);
$nav-footer-account-bg: $nav-item-active-bg;
$nav-footer-submenu-bg: $nav-submenu-bg;
$nav-footer-closed-height: 50px;
$nav-footer-submenu-height: 85px;
$nav-footer-open-height: $nav-footer-closed-height + $nav-footer-submenu-height;

// Nav search
$nav-search-color: color.adjust($color-white, $lightness: -20%);
$nav-search-border: color.adjust($color-white, $lightness: -40%);
$nav-search-bg: $nav-grey-1;
$nav-search-hover-bg: $nav-item-hover-bg;
$nav-search-focus-color: $color-white;
$nav-search-focus-bg: $nav-item-hover-bg;

// Form Errors
$color-text-error: color.change($color-red, $saturation: 69%, $lightness: 52%);
$color-text-error-forced-color: color.change(
  $color-red,
  $saturation: 100%,
  $lightness: 50%
);
$color-text-warning-forced-color: color.change(
  $color-orange,
  $saturation: 100%,
  $lightness: 70%
);