@gitlab/ui/src/scss/variables.scss

@import 'functions';

// Layout
$grid-size: px-to-rem(8px);
$gl-spacing-scale-1: 0.25 * $grid-size;
$gl-spacing-scale-2: 0.5 * $grid-size;
$gl-spacing-scale-3: $grid-size;
$gl-spacing-scale-4: 1.5 * $grid-size;
$gl-spacing-scale-5: 2 * $grid-size;
$gl-spacing-scale-6: 3 * $grid-size;
$gl-spacing-scale-7: 4 * $grid-size;
$gl-spacing-scale-8: 5 * $grid-size;
$gl-spacing-scale-9: 6 * $grid-size;
$gl-spacing-scale-10: 7 * $grid-size;
$gl-spacing-scale-11: 8 * $grid-size;
$gl-spacing-scale-11-5: 9 * $grid-size;
$gl-spacing-scale-12: 10 * $grid-size;
$gl-spacing-scale-13: 12 * $grid-size;
$gl-spacing-scale-15: 15 * $grid-size;
$gl-spacing-scale-20: 20 * $grid-size;

// Responsive breakpoints

$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

$breakpoints: (
  xs: 0,
  sm: $breakpoint-sm,
  md: $breakpoint-md,
  lg: $breakpoint-lg,
  xl: $breakpoint-xl,
);

// Max widths
$limited-layout-width: 990px !default;

// Color schema
$black: #000 !default;
$black-normal: #333 !default;

$white: #fff !default;
$white-normal: #f0f0f0 !default;
$white-dark: #eaeaea !default;
$white-transparent: rgba(255, 255, 255, 0.8) !default;
$transparent-rgba: rgba($white, 0);

$green-50: #ecf4ee !default;
$green-100: #c3e6cd !default;
$green-200: #91d4a8 !default;
$green-300: #52b87a !default;
$green-400: #2da160 !default;
$green-500: #108548 !default;
$green-600: #217645 !default;
$green-700: #24663b !default;
$green-800: #0d532a !default;
$green-900: #0a4020 !default;
$green-950: #072b15 !default;

$blue-50: #e9f3fc !default;
$blue-100: #cbe2f9 !default;
$blue-200: #9dc7f1 !default;
$blue-300: #63a6e9 !default;
$blue-400: #428fdc !default;
$blue-500: #1f75cb !default;
$blue-600: #1068bf !default;
$blue-700: #0b5cad !default;
$blue-800: #064787 !default;
$blue-900: #033464 !default;
$blue-950: #002850 !default;

$orange-50: #fdf1dd !default;
$orange-100: #f5d9a8 !default;
$orange-200: #e9be74 !default;
$orange-300: #d99530 !default;
$orange-400: #c17d10 !default;
$orange-500: #ab6100 !default;
$orange-600: #9e5400 !default;
$orange-700: #8f4700 !default;
$orange-800: #703800 !default;
$orange-900: #5c2900 !default;
$orange-950: #421f00 !default;

$red-50: #fcf1ef !default;
$red-100: #fdd4cd !default;
$red-200: #fcb5aa !default;
$red-300: #f57f6c !default;
$red-400: #ec5941 !default;
$red-500: #dd2b0e !default;
$red-600: #c91c00 !default;
$red-700: #ae1800 !default;
$red-800: #8d1300 !default;
$red-900: #660e00 !default;
$red-950: #4d0a00 !default;

$purple-50: #f4f0ff !default;
$purple-100: #e1d8f9 !default;
$purple-200: #cbbbf2 !default;
$purple-300: #ac93e6 !default;
$purple-400: #9475db !default;
$purple-500: #7b58cf !default;
$purple-600: #694cc0 !default;
$purple-700: #5943b6 !default;
$purple-800: #453894 !default;
$purple-900: #2f2a6b !default;
$purple-950: #232150 !default;

/*
Neutral palette mapping

Old variables are mapped to new variables by approximating the closest variable, erring on the side of shifting darker (with the exception of old 400). There is currently nothing mapped to 600 and 800, which makes them a good use case for subtle nuance in the UI.


Before        After (reflected below)
-------------------------------------
50            10
100           50
200           100
300           200
400           200
500           300
600           400
700           500*
800           700
900           900
950           950

* Passes 4.5:1 contrast ratio on $gray-10
*/

$gray-10: #fafafa !default;
$gray-50: #f0f0f0 !default;
$gray-100: #dbdbdb !default;
$gray-200: #bfbfbf !default;
$gray-300: #999 !default;
$gray-400: #868686 !default;
$gray-500: #666 !default;
$gray-600: #5e5e5e !default;
$gray-700: #525252 !default;
$gray-800: #404040 !default;
$gray-900: #303030 !default;
$gray-950: #1f1f1f !default;

// GitLab themes

$gl-themes: 'indigo', 'blue', 'light-blue', 'green', 'red', 'light-red';

// The indigo light and indigo dark use $theme-indigo variables.
$theme-indigo-50: #f1f1ff !default;
$theme-indigo-100: #dbdbf8 !default;
$theme-indigo-200: #c7c7f2 !default;
$theme-indigo-300: #a2a2e6 !default;
$theme-indigo-400: #8181d7 !default;
$theme-indigo-500: #6666c4 !default;
$theme-indigo-600: #5252b5 !default;
$theme-indigo-700: #41419f !default;
$theme-indigo-800: #303083 !default;
$theme-indigo-900: #222261 !default;
$theme-indigo-950: #14143d !default;

$theme-blue-50: #cdd8e3 !default;
$theme-blue-100: #b9cadc !default;
$theme-blue-200: #a6bdd5 !default;
$theme-blue-300: #81a5c9 !default;
$theme-blue-400: #628eb9 !default;
$theme-blue-500: #4977a5 !default;
$theme-blue-600: #346596 !default;
$theme-blue-700: #235180 !default;
$theme-blue-800: #153c63 !default;
$theme-blue-900: #0b2640 !default;
$theme-blue-950: #04101c !default;

$theme-light-blue-50: #dde6ee !default;
$theme-light-blue-100: #c1d4e6 !default;
$theme-light-blue-200: #a0bedc !default;
$theme-light-blue-300: #74a3d3 !default;
$theme-light-blue-400: #4f8bc7 !default;
$theme-light-blue-500: #3476b9 !default;
$theme-light-blue-600: #2268ae !default;
$theme-light-blue-700: #145aa1 !default;
$theme-light-blue-800: #0e4d8d !default;
$theme-light-blue-900: #0c4277 !default;
$theme-light-blue-950: #0a3764 !default;

// The green light and green dark use $theme-green variables.
$theme-green-50: #dde9de !default;
$theme-green-100: #b1d6b5 !default;
$theme-green-200: #8cc497 !default;
$theme-green-300: #69af7d !default;
$theme-green-400: #499767 !default;
$theme-green-500: #308258 !default;
$theme-green-600: #25744c !default;
$theme-green-700: #1b653f !default;
$theme-green-800: #155635 !default;
$theme-green-900: #0e4328 !default;
$theme-green-950: #052e19 !default;

$theme-red-50: #f4e9e7 !default;
$theme-red-100: #ecd3d0 !default;
$theme-red-200: #e3bab5 !default;
$theme-red-300: #d59086 !default;
$theme-red-400: #c66e60 !default;
$theme-red-500: #ad4a3b !default;
$theme-red-600: #a13322 !default;
$theme-red-700: #8f2110 !default;
$theme-red-800: #761405 !default;
$theme-red-900: #580d02 !default;
$theme-red-950: #380700 !default;

$theme-light-red-50: #faf2f1 !default;
$theme-light-red-100: #f6d9d5 !default;
$theme-light-red-200: #ebada2 !default;
$theme-light-red-300: #e07f6f !default;
$theme-light-red-400: #d36250 !default;
$theme-light-red-500: #c24b38 !default;
$theme-light-red-600: #b53a26 !default;
$theme-light-red-700: #a02e1c !default;
$theme-light-red-800: #8b2212 !default;
$theme-light-red-900: #751709 !default;
$theme-light-red-950: #5c1105 !default;

// Data visualization color palette

$data-viz-green-50: #ddfab7;
$data-viz-green-100: #c9f097;
$data-viz-green-200: #b0de73;
$data-viz-green-300: #94c25e;
$data-viz-green-400: #83ab4a;
$data-viz-green-500: #608b2f;
$data-viz-green-600: #487900;
$data-viz-green-700: #366800;
$data-viz-green-800: #275600;
$data-viz-green-900: #1a4500;
$data-viz-green-950: #0f3300;

$data-viz-aqua-50: #b8fff2;
$data-viz-aqua-100: #93fae7;
$data-viz-aqua-200: #5eebdf;
$data-viz-aqua-300: #25d2d2;
$data-viz-aqua-400: #0bb6c6;
$data-viz-aqua-500: #0094b6;
$data-viz-aqua-600: #0080a1;
$data-viz-aqua-700: #006887;
$data-viz-aqua-800: #004d67;
$data-viz-aqua-900: #003f57;
$data-viz-aqua-950: #00293d;

$data-viz-blue-50: #e9ebff;
$data-viz-blue-100: #d4dcfa;
$data-viz-blue-200: #b7c6ff;
$data-viz-blue-300: #97acff;
$data-viz-blue-400: #748eff;
$data-viz-blue-500: #5772ff;
$data-viz-blue-600: #445cf2;
$data-viz-blue-700: #3547de;
$data-viz-blue-800: #232fcf;
$data-viz-blue-900: #1e23a8;
$data-viz-blue-950: #11118a;

$data-viz-magenta-50: #ffe3eb;
$data-viz-magenta-100: #ffc9d9;
$data-viz-magenta-200: #fcacc5;
$data-viz-magenta-300: #ff85af;
$data-viz-magenta-400: #f2639a;
$data-viz-magenta-500: #d84280;
$data-viz-magenta-600: #c52c6b;
$data-viz-magenta-700: #b31756;
$data-viz-magenta-800: #950943;
$data-viz-magenta-900: #7a0033;
$data-viz-magenta-950: #570028;

$data-viz-orange-50: #fae8d1;
$data-viz-orange-100: #f7d8b5;
$data-viz-orange-200: #f3c291;
$data-viz-orange-300: #eb9a5c;
$data-viz-orange-400: #e17223;
$data-viz-orange-500: #d14e00;
$data-viz-orange-600: #b24800;
$data-viz-orange-700: #944100;
$data-viz-orange-800: #6f3500;
$data-viz-orange-900: #5c2b00;
$data-viz-orange-950: #421e00;

$darken-normal-factor: 7%;
$darken-dark-factor: 10%;
$darken-border-factor: 5%;
$darken-border-dashed-factor: 25%;

$t-gray-a-02: rgba($black, 0.02);
$t-gray-a-04: rgba($black, 0.04);
$t-gray-a-06: rgba($black, 0.06);
$t-gray-a-08: rgba(#000, 0.08);
$t-gray-a-24: rgba(#000, 0.24);

// Text
$gl-text-color: $gray-900 !default;
$gl-text-color-secondary: $gray-500 !default;

$gl-font-weight-light: 300;
$gl-font-weight-normal: 400;
$gl-font-weight-bold: 600;

$gl-font-weights: (
  'normal': $gl-font-weight-normal,
  'bold': $gl-font-weight-bold,
);

// Line height
$gl-line-height-16: px-to-rem(16px);
$gl-line-height-20: px-to-rem(20px);
$gl-line-height-24: px-to-rem(24px);
$gl-line-height-28: px-to-rem(28px);
$gl-line-height-32: px-to-rem(32px);
$gl-line-height-36: px-to-rem(36px);
$gl-line-height-44: px-to-rem(44px);
$gl-line-height-52: px-to-rem(52px);

// UI typescale

// default (min-width: 0)
$gl-font-size: px-to-rem(14px);
$gl-font-size-sm: px-to-rem(12px);
$gl-font-size-lg: px-to-rem(16px);

$gl-font-size-h-display: px-to-rem(28px);
$gl-font-size-h1: px-to-rem(23px);
$gl-font-size-h2: px-to-rem(19px);

// breakpoint (min-width: 768px)
$gl-font-size-h-display-md: px-to-rem(31px);
$gl-font-size-h1-md: px-to-rem(25px);
$gl-font-size-h2-md: px-to-rem(20px);

// breakpoint (min-width: 1200px)
$gl-font-size-h-display-xl: px-to-rem(45px);
$gl-font-size-h1-xl: px-to-rem(32px);
$gl-font-size-h2-xl: px-to-rem(23px);

// Markdown typescale

// default (min-width: 0)
$gl-font-size-markdown: px-to-rem(16px);
$gl-font-size-markdown-sm: px-to-rem(14px);

$gl-font-size-markdown-h1: px-to-rem(28px);
$gl-font-size-markdown-h2: px-to-rem(23px);
$gl-font-size-markdown-h3: px-to-rem(19px);

// breakpoint (min-width: 768px)
$gl-font-size-markdown-h1-md: px-to-rem(31px);
$gl-font-size-markdown-h2-md: px-to-rem(25px);
$gl-font-size-markdown-h3-md: px-to-rem(20px);

// breakpoint (min-width: 1200px)
$gl-font-size-markdown-h1-xl: px-to-rem(45px);
$gl-font-size-markdown-h2-xl: px-to-rem(32px);
$gl-font-size-markdown-h3-xl: px-to-rem(23px);

// Compact markdown typescale

// default (min-width: 0)
$gl-font-size-compact-markdown-h1: px-to-rem(19px);

// media-md: min-width: 768px
$gl-font-size-compact-markdown-h1-md: px-to-rem(20px);

// media xl (min-width: 1200px)
$gl-font-size-compact-markdown-h1-xl: px-to-rem(23px);

// Monoscape
// These font sizes apply for all content-types, media-breakpoints, and element-types.
$gl-font-size-monospace: px-to-rem(13px);
$gl-font-size-monospace-lg: px-to-rem(15px);
$gl-font-size-monospace-sm: px-to-rem(11px);

// Fonts
$gl-monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
  'Courier New', 'andale mono', 'lucida console', monospace;
$gl-regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu,
  Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';

$gl-fonts: (
  'monospace': $gl-monospace-font,
  'regular': $gl-regular-font,
);

// use px for borders rather than rem
// we don't want borders to scale with font size
// 1px can end up being rounded to 0 after
// conversion to/from rem
$gl-border-size-1: 1px;
$gl-border-size-2: 2px;
$gl-border-size-3: 3px;
$gl-border-size-4: 4px;
$gl-border-size-5: 5px;
$gl-border-size-8: 8px;

// border roundness
$gl-border-radius-small: $gl-spacing-scale-1;
$gl-border-radius-base: $gl-spacing-scale-2;
$gl-border-radius-large: $gl-spacing-scale-3;
$gl-border-radius-6: $gl-spacing-scale-6;
$gl-border-radius-7: $gl-spacing-scale-7;
$gl-border-radius-full: 50%;

// transition parameters
$gl-transition-duration-slow: 0.4s;
$gl-transition-duration-medium: 0.2s;

// Focus ring
$focus-ring: 0 0 0 $gl-border-size-1 rgba($white, 0.4),
  0 0 0 $gl-border-size-4 rgba($blue-500, 0.48);
$focus-ring-inset: inset 0 0 0 $gl-border-size-3 rgba($blue-500, 0.48),
  inset 0 0 0 $gl-border-size-4 rgba($white, 0.4);

// Toasts
$toast-max-width: px-to-rem(586px);
$toast-padding-right: px-to-rem(42px);
$toast-background-color: #303030;

// Chart tooltip
$chart-tooltip-max-width: px-to-rem(512px);

$gl-icon-chevron-left: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L7.414 8l2.293-2.293a1 1 0 0 0-1.414-1.414l-3 3z"/></svg>';
$gl-icon-chevron-right: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M10.707 7.293a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L8.586 8 6.293 5.707a1 1 0 0 1 1.414-1.414l3 3z"/></svg>';
$gl-icon-chevron-down: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M7.293 10.707a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L8 8.586 5.707 6.293a1 1 0 0 0-1.414 1.414l3 3z"/></svg>';

// Icons
$default-icon-size: px-to-rem(16px);
$gl-icon-sizes: 8 12 14 16 24 32 48 72;

// Dropdowns
$gl-dropdown-width: px-to-rem(240px);
$gl-dropdown-width-narrow: px-to-rem(160px);
$gl-dropdown-width-wide: px-to-rem(400px);
$gl-max-dropdown-max-height: px-to-rem(312px);

// Broadcast messages
$gl-broadcast-message-text-max-width: px-to-rem(934px);

// Modal Widths
$gl-modal-small-width: px-to-rem(512px);
$gl-modal-medium-width: px-to-rem(768px);
$gl-modal-large-width: px-to-rem(990px);

// Modal bootstrap variables
$modal-header-border-color: $gray-200;
$modal-footer-border-color: $gray-200;
$modal-title-line-height: $gl-line-height-20;
$modal-backdrop: #000;
$modal-backdrop-opacity: 0.64;

// Bootstrap overrides
// these should ideally be moved further up in the file to the compoent-relevant sections
// but they can wait here for now
$body-color: $gl-text-color !default;

$secondary: $gray-50;
$success: $green-500;
$info: $blue-500;
$warning: $orange-500;
$danger: $red-500;

$font-weight-bold: $gl-font-weight-bold;

$font-family-sans-serif: $gl-regular-font;
$font-family-monospace: $gl-monospace-font;

$h1-font-size: $gl-font-size * 2.5;
$h2-font-size: $gl-font-size * 2;
$h3-font-size: $gl-font-size * 1.75;
$h4-font-size: $gl-font-size * 1.5;
$h5-font-size: $gl-font-size * 1.25;
$h6-font-size: $gl-font-size;

$spacer: $grid-size;
$spacers: (
  1: $gl-spacing-scale-2,
  2: $gl-spacing-scale-3,
  3: $gl-spacing-scale-5,
  4: $gl-spacing-scale-6,
  5: $gl-spacing-scale-7,
  6: $gl-spacing-scale-8,
  7: $gl-spacing-scale-9,
  8: $gl-spacing-scale-10,
  9: $gl-spacing-scale-11,
);

$table-accent-bg: $gray-50;
$card-border-color: $gray-100;
$card-cap-bg: $gray-10 !default;

// Form input sizes
$gl-form-input-sizes: (
  xs: $grid-size * 10,
  sm: $grid-size * 20,
  md: $grid-size * 30,
  lg: $grid-size * 40,
  xl: $grid-size * 70,
);

$popover-bg: $white !default;
$popover-arrow-width: 0.5rem;
$popover-arrow-height: 0.25rem;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-color: $gray-100;

$tooltip-opacity: 1;