@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;
$gl-spacing-scale-26: 26 * $grid-size;
$gl-spacing-scale-28: 28 * $grid-size;
$gl-spacing-scale-34: 34 * $grid-size;
$gl-spacing-scale-62: 62 * $grid-size;
$gl-spacing-scale-80: 80 * $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-contrast: #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: #f5f5f5 !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-42: px-to-rem(42px);
$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,
);

$border-color: $gray-100 !default;

// 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
$outline-offset: 1px;
$outline-width: 2px;
$outline: #{$outline-offset + $outline-width};
$focus-ring: 0 0 0 $outline-offset $white, 0 0 0 #{$outline-offset + $outline-width} $blue-400;
$focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} $white,
  inset 0 0 0 $outline-offset $white;
$focus-ring-dark: 0 0 0 $outline-offset rgba($black, 0.6),
  0 0 0 #{$outline-offset + $outline-width} $blue-300;
$focus-ring-outline: $outline-width solid $blue-400;

// 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>';
$gl-icon-select-chevron-down: 'data:image/svg+xml,%3Csvg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0.21967 0.21967C0.512563 -0.0732232 0.987437 -0.0732232 1.28033 0.21967L4 2.93934L6.71967 0.21967C7.01256 -0.073223 7.48744 -0.0732229 7.78033 0.21967C8.07322 0.512563 8.07322 0.987437 7.78033 1.28033L4.53033 4.53033C4.23744 4.82322 3.76256 4.82322 3.46967 4.53033L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z" fill="%23666666"/%3E%3C/svg%3E%0A';

// 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-bg: #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;