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: 80px;

// All text inputs have a 42px set height to simplify alignment.
$text-input-height: 2.625rem;
// Forms should be constrainted to a maximum width for legibility.
$max-form-width: 840px;

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

// colours
$color-teal: theme('colors.secondary.DEFAULT');
$color-teal-darker: theme('colors.secondary.400');
$color-teal-dark: theme('colors.secondary.600');

$color-white: theme('colors.white.DEFAULT');
$color-black: theme('colors.black.DEFAULT');

// darker to lighter
$color-grey-1: theme('colors.grey.600');
$color-grey-2: theme('colors.grey.400');
$color-grey-3: theme('colors.grey.200');
$color-grey-4: theme('colors.grey.100');
$color-grey-5: theme('colors.grey.50');

$color-menu-text: theme('colors.white-80');

$color-text-base: theme('colors.grey.600');

$color-input-text: $color-text-base;
$color-input-bg: theme('colors.white.DEFAULT');
$color-input-border: theme('colors.grey.150');
$color-input-disabled-text: theme('colors.grey.400');
$color-input-disabled-bg: theme('colors.grey.50');
$color-input-disabled-border: theme('colors.grey.100');
$color-input-hover-border: theme('colors.grey.200');
$color-input-error-border: theme('colors.critical.200');

$color-button: $color-teal;
$color-button-hover: $color-teal-darker;
$color-button-yes: theme('colors.positive.100');
$color-button-no: theme('colors.critical.200');
$color-button-warning: theme('colors.warning.100');

$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;

// 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: theme('fontFamily.sans');
$font-mono: theme('fontFamily.mono');

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

// misc sizing
$menu-width: 200px;
$menu-width-slim: 60px;
$side-panel-width: 500px;

$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;

$object-title-height: 40px;