light.scss

// Light mode

$black: #1b1f23;
$white: #fff;

$tbd: $black;

//
//
// -------- Grays --------
$gray-0:        #fafbfc;
$gray-1:        #f6f8fa;
$gray-2:        #e1e4e8;
$gray-3:        #d1d5da;
$gray-4:        #959da5;
$gray-5:        #6a737d;
$gray-6:        #586069;
$gray-7:        #444d56;
$gray-8:        #2f363d;
$gray-9:        #24292e; // body font color

// -------- Blue --------
$blue-0:        #f1f8ff;
$blue-1:        #dbedff;
$blue-2:        #c8e1ff;
$blue-3:        #79b8ff;
$blue-4:        #2188ff;
$blue-5:        #0366d6; // Default: Passes AA with #fff
$blue-6:        #005cc5;
$blue-7:        #044289;
$blue-8:        #032f62;
$blue-9:        #05264c; // Passes with 1/2/300 blues

// -------- Green --------
$green-0:       #f0fff4;
$green-1:       #dcffe4;
$green-2:       #bef5cb;
$green-3:       #85e89d;
$green-4:       #34d058;
$green-5:       #28a745; // Default. passes AA Large
$green-6:       #22863a; // Text green, passes AA on #fff
$green-7:       #176f2c;
$green-8:       #165c26;
$green-9:       #144620;

// -------- Yellow --------
$yellow-0:      #fffdef;
$yellow-1:      #fffbdd;
$yellow-2:      #fff5b1;
$yellow-3:      #ffea7f;
$yellow-4:      #ffdf5d;
$yellow-5:      #ffd33d;
$yellow-6:      #f9c513;
$yellow-7:      #dbab09;
$yellow-8:      #b08800;
$yellow-9:      #735c0f;

// -------- Orange --------
$orange-0:      #fff8f2;
$orange-1:      #ffebda;
$orange-2:      #ffd1ac;
$orange-3:      #ffab70;
$orange-4:      #fb8532;
$orange-5:      #f66a0a; // Default. passes AA Large with #fff
$orange-6:      #e36209;
$orange-7:      #d15704;
$orange-8:      #c24e00;
$orange-9:      #a04100;

// -------- Red --------
$red-0:         #ffeef0;
$red-1:         #ffdce0;
$red-2:         #fdaeb7;
$red-3:         #f97583;
$red-4:         #ea4a5a;
$red-5:         #d73a49; // Default. passes AA
$red-6:         #cb2431;
$red-7:         #b31d28;
$red-8:         #9e1c23;
$red-9:         #86181d;

// -------- Purple --------
$purple-0:      #f5f0ff;
$purple-1:      #e6dcfd;
$purple-2:      #d1bcf9;
$purple-3:      #b392f0;
$purple-4:      #8a63d2;
$purple-5:      #6f42c1; // passes AA with #fff
$purple-6:      #5a32a3;
$purple-7:      #4c2889;
$purple-8:      #3a1d6e;
$purple-9:      #29134e;

// -------- Pink --------
$pink-0:      #ffeef8;
$pink-1:      #fedbf0;
$pink-2:      #f9b3dd;
$pink-3:      #f692ce;
$pink-4:      #ec6cb9;
$pink-5:      #ea4aaa;
$pink-6:      #d03592;
$pink-7:      #b93a86;
$pink-8:      #99306f;
$pink-9:      #6d224f;

// -------- Fades --------
$black-fade-10:      rgba($black, 0.1);
$black-fade-15:      rgba($black, 0.15);
$black-fade-30:      rgba($black, 0.3);
$black-fade-50:      rgba($black, 0.5);
$black-fade-70:      rgba($black, 0.7);
$black-fade-85:      rgba($black, 0.85);

$white-fade-10:      rgba($white, 0.1);
$white-fade-15:      rgba($white, 0.15);
$white-fade-30:      rgba($white, 0.3);
$white-fade-50:      rgba($white, 0.5);
$white-fade-70:      rgba($white, 0.7);
$white-fade-85:      rgba($white, 0.85);

// -------- Color defaults --------
$red:         $red-5;
$purple:      $purple-5;
$blue:        $blue-5;
$green:       $green-5;
$yellow:      $yellow-5;
$orange:      $orange-5;
$pink:        $pink-5;
$gray-dark:   $gray-9;
$gray-light:  $gray-4;
$gray:        $gray-5;

// -------- Color scale --------

$scale: (
  black: $black,
  white: $white,

  gray: (
    $gray-0,
    $gray-1,
    $gray-2,
    $gray-3,
    $gray-4,
    $gray-5,
    $gray-6,
    $gray-7,
    $gray-8,
    $gray-9,
  ),

  blue: (
    $blue-0,
    $blue-1,
    $blue-2,
    $blue-3,
    $blue-4,
    $blue-5,
    $blue-6,
    $blue-7,
    $blue-8,
    $blue-9,
  ),

  green: (
    $green-0,
    $green-1,
    $green-2,
    $green-3,
    $green-4,
    $green-5,
    $green-6,
    $green-7,
    $green-8,
    $green-9,
  ),

  yellow: (
    $yellow-0,
    $yellow-1,
    $yellow-2,
    $yellow-3,
    $yellow-4,
    $yellow-5,
    $yellow-6,
    $yellow-7,
    $yellow-8,
    $yellow-9,
  ),

  orange: (
    $orange-0,
    $orange-1,
    $orange-2,
    $orange-3,
    $orange-4,
    $orange-5,
    $orange-6,
    $orange-7,
    $orange-8,
    $orange-9,
  ),

  red: (
    $red-0,
    $red-1,
    $red-2,
    $red-3,
    $red-4,
    $red-5,
    $red-6,
    $red-7,
    $red-8,
    $red-9,
  ),

  purple: (
    $purple-0,
    $purple-1,
    $purple-2,
    $purple-3,
    $purple-4,
    $purple-5,
    $purple-6,
    $purple-7,
    $purple-8,
    $purple-9,
  ),

  pink: (
    $pink-0,
    $pink-1,
    $pink-2,
    $pink-3,
    $pink-4,
    $pink-5,
    $pink-6,
    $pink-7,
    $pink-8,
    $pink-9,
  )
);

// -------- Auto scale --------
// Note: The order of the auto scale is flipped in dark.scss

$auto: (
  black: $black,
  white: $white,

  gray: (
    $gray-0,
    $gray-1,
    $gray-2,
    $gray-3,
    $gray-4,
    $gray-5,
    $gray-6,
    $gray-7,
    $gray-8,
    $gray-9,
  ),

  blue: (
    $blue-0,
    $blue-1,
    $blue-2,
    $blue-3,
    $blue-4,
    $blue-5,
    $blue-6,
    $blue-7,
    $blue-8,
    $blue-9,
  ),

  green: (
    $green-0,
    $green-1,
    $green-2,
    $green-3,
    $green-4,
    $green-5,
    $green-6,
    $green-7,
    $green-8,
    $green-9,
  ),

  yellow: (
    $yellow-0,
    $yellow-1,
    $yellow-2,
    $yellow-3,
    $yellow-4,
    $yellow-5,
    $yellow-6,
    $yellow-7,
    $yellow-8,
    $yellow-9,
  ),

  orange: (
    $orange-0,
    $orange-1,
    $orange-2,
    $orange-3,
    $orange-4,
    $orange-5,
    $orange-6,
    $orange-7,
    $orange-8,
    $orange-9,
  ),

  red: (
    $red-0,
    $red-1,
    $red-2,
    $red-3,
    $red-4,
    $red-5,
    $red-6,
    $red-7,
    $red-8,
    $red-9,
  ),

  purple: (
    $purple-0,
    $purple-1,
    $purple-2,
    $purple-3,
    $purple-4,
    $purple-5,
    $purple-6,
    $purple-7,
    $purple-8,
    $purple-9,
  ),

  pink: (
    $pink-0,
    $pink-1,
    $pink-2,
    $pink-3,
    $pink-4,
    $pink-5,
    $pink-6,
    $pink-7,
    $pink-8,
    $pink-9,
  )
);

// -------- Functional colors ----------
$export: (
  scale: $scale,
  auto: $auto,

  // Pure functional

  text: (
    primary: $gray-9,
    secondary: $gray-6,
    tertiary: $gray-5,
    placeholder: $gray-5,
    disabled: $gray-5,
    inverse: $white,
    link: $blue-5,
    danger: $red-6,
    success: $green-6,
    warning: $yellow-8,
  ),

  icon: (
    primary:$gray-9,
    secondary: $gray-6,
    tertiary: $gray-4,
    info: $blue-5,
    danger: $red-5,
    success: $green-6,
    warning: $yellow-8,
  ),

  border: (
    primary: $gray-2,
    secondary: lighten($gray-2, 3%),
    tertiary: $gray-3,
    inverse: $white,
    info: $blue-5,
    danger: $red-5,
    success: $green-4,
    warning: $yellow-6,
  ),

  bg: (
    canvas: $white,
    canvas-mobile: $white,
    canvas-inverse: $gray-9,
    primary: $white,
    secondary: $gray-0,
    tertiary: $gray-1,
    overlay: $white,
    info: $blue-0,
    info-inverse: $blue-5,
    danger: $red-0,
    danger-inverse: $red-5,
    success: $green-1,
    success-inverse: $green-5,
    warning: $yellow-2,
    warning-inverse: $yellow-5,
  ),

  shadow: (
    small: 0 1px 0 rgba($black, 0.04),
    medium: 0 3px 6px rgba($gray-4, 0.15),
    large: 0 8px 24px rgba($gray-4, 0.2),
    extra-large: 0 12px 48px rgba($gray-4, 0.3),

    highlight: inset 0 1px 0 rgba($white, 0.25), // top highlight
    inset: inset 0 1px 0 rgba($gray-2, 0.2), // top inner shadow
  ),

  state: (
    hover: (
      primary-bg: $blue-5,// `$bg-blue` in Primer CSS
      primary-border: $blue-5,
      primary-text: $white,
      primary-icon: $white,
      secondary-bg: $gray-1,
      secondary-border: $gray-1,
    ),

    selected: (
      primary-bg: $blue-5,// `$bg-blue` in Primer CSS
      primary-border: $blue-5,
      primary-text: $white,
      primary-icon: $white,
    ),

    focus: (
      border: $blue-5, // blue focus border
      shadow: 0 0 0 3px rgba($blue-5, 0.3), // blue focus ring
    ),
  ),

  fade: (
    black: (
      10: $black-fade-10,
      15: $black-fade-15,
      30: $black-fade-30,
      50: $black-fade-50,
      70: $black-fade-70,
      85: $black-fade-85,
    ),

    white: (
      10: $white-fade-10,
      15: $white-fade-15,
      30: $white-fade-30,
      50: $white-fade-50,
      70: $white-fade-70,
      85: $white-fade-85,
    ),
  ),

  // Components

  alert: (
    info: (
      text: $gray-9,
      icon: rgba($blue-7, 0.6),
      bg: $blue-1,
      border: rgba($blue-7, 0.2),
    ),

    warn: (
      text: $gray-9,
      icon: $yellow-8,
      bg: $yellow-1,
      border: rgba($yellow-8, 0.2),
    ),

    error: (
      text: $gray-9,
      icon: rgba($red-8, 0.6),
      bg: #ffe3e6,
      border: rgba($red-8, 0.2),
    ),

    success: (
      text: $gray-9,
      icon: rgba($green-7, 0.8),
      bg: $green-1,
      border: rgba($green-7, 0.2),
    )
  ),

  autocomplete: (
    bg: $white,
    border: $gray-2,
    shadow: 0 3px 6px rgba($gray-4, 0.15),
    row-border: lighten($gray-2, 3%),
  ),

  blankslate: (
    icon: lighten($gray-4, 5%),
  ),

  btn: (
    bg: $gray-0,
    border: $black-fade-15,
    text: $gray-9,
    ic: $gray-5,

    shadow: 0 1px 0 rgba($black, 0.04),
    shadow-highlight: inset 0 1px 0 rgba($white, 0.25), // top highlight

    bg-hover: #f3f4f6,
    bg-active: darken(#f3f4f6, 2%),

    shadow-active: inset 0 0.15em 0.3em $black-fade-15, // TODO: Deprecate? Not used in Primer CSS
    shadow-input-focus: 0 0 0 0.2em rgba($blue, 0.3), // TODO: Deprecate?

    /* states */

    primary: (
      bg: #2ea44f,
      border: $black-fade-15,
      border-disabled: $black-fade-10,
      text: $white,
      ic: rgba($white, 0.8),
      shadow: 0 1px 0 $black-fade-10,
      shadow-highlight: inset 0 1px 0 rgba($white, 0.03),
      shadow-selected: inset 0 1px 0 rgba($green-9, 0.2),

      bg-hover: #2c974b,
      bg-active: darken(#2c974b, 2%),
      bg-disabled: #94d3a2,

      disabled-text: rgba($white, 0.8),
      disabled-shadow: 0 0 0 3px rgba(#2ea44f, 0.4),

      counter-bg: rgba($white, 0.2),
    ),

    inverse-on-hover: (
      border: $black-fade-15,
      shadow: 0 1px 0 $black-fade-10,
      shadow-inset: inset 0 1px 0 rgba($white, 0.03),
      counter-bg: rgba($white, 0.2),
    ),

    danger: (
      text: $red-5,
      text-disabled: rgba($red-5, 0.5),
      bg-hover: $red-6,
      bg-active: darken($red-6, 3%),
      shadow: inset 0 1px 0 rgba($red-9, 0.2),
      shadow-focus: 0 0 0 3px rgba($red-6, 0.4),
      counter-bg: rgba($red-5, 0.1),
      counter-bg-disabled: rgba($red-5, 0.05),
    ),

    outline: (
      text: $blue-5,
      text-disabled: rgba($blue-5, 0.5),
      bg-hover: $blue-5,
      bg-active: darken($blue-5, 3%),
      shadow: inset 0 1px 0 rgba($blue-9, 0.2),
      shadow-focus: 0 0 0 3px rgba($blue-6, 0.4),
      counter-bg: rgba($blue-5, 0.1),
      counter-bg-disabled: rgba($blue-5, 0.05),
    ),

    counter-bg: rgba($black, 0.08), // Darken for just a tad more contrast against the button background
  ),

  counter: (
    text: $gray-9,
    bg: rgba($gray-3, 0.5),

    primary: (
      text: $white,
      bg: $gray-5,
    ),

    secondary: (
      text: $gray-5,
    ),
  ),

  dropdown: (
    bg: $white,
    border: $gray-2,
    shadow: 0 8px 24px rgba($gray-4, 0.2),
  ),

  label: (
    border: $gray-2,

    primary: (
      text: $gray-9,
      border: $gray-5,
    ),

    secondary: (
      text: $gray-6,
      border: $gray-2,
    ),

    info: (
      text: $blue-5,
      border: $blue-5,
    ),

    success: (
      text: $green-6,
      border: $green-5,
    ),

    warning: (
      text: $yellow-9,
      border: $yellow-8,
    ),

    danger: (
      text: $red-5,
      border: $red-6,
    ),
  ),

  topic: (
    tag-bg: $blue-0,
    tag-border: $blue-0,
    tag-text: $blue-5,
  ),

  input: (
    bg: $white,
    contrast-bg: $gray-0,
    border: $gray-2,
    shadow: inset 0 1px 2px rgba($black, 0.075),

    disabled-bg: $white,
    disabled-border: $gray-2,

    warning-border: $yellow-6,
    error-border: $red-6,

    tooltip: (
      success: (
        text: $green-9,
        bg: $green-1,
        border: $green-4,
      ),

      warning: (
        text: $yellow-9,
        bg: $yellow-2,
        border: $yellow-6,
      ),

      error: (
        text: $red-9,
        bg: $red-0,
        border: $red-3,
      ),
    ),
  ),

  avatar: (
    border: transparent,
    stack-fade: $gray-3,
    stack-fade-more: $gray-2,
    child-shadow: -2px -2px 0 rgba($white, 0.8),
  ),

  toast: (
    ic-bg-loading: $gray-6,
  ),

  timeline: (
    text: $gray-7,
    badge-bg: $gray-2,
    target-badge-border: $blue-4,
    target-badge-shadow: $blue-2,
  ),

  select-menu: (
    bg: $white,
    border: $gray-2,
    border-secondary: lighten($gray-2, 3%),
    shadow: 0 0 18px rgba($black, 0.4),
    backdrop-bg: $black-fade-50,
    backdrop-border: transparent,
    tap-highlight: rgba($gray-3, 0.5),
    tap-focus-bg: $blue-1,
  ),

  box: (
    blue-border: $blue-2,
    row-yellow-bg: $yellow-1,
    row-blue-bg: $blue-0,
    header-blue-bg: $blue-0,
    header-blue-border: $blue-2,
  ),

  popover: (
    border: $black-fade-15,
  ),

  branch-name: (
    text: rgba($black, 0.6),
    icon: desaturate($blue-3, 70%),
    bg: lighten($blue-1, 3%),

    link: (
      text: $blue-5,
      icon: desaturate($blue-3, 70%),
      bg: lighten($blue-1, 3%),
    ),
  ),

  markdown: (
    code-bg: rgba($black, 0.05),
    frame-border: lighten($gray-3, 5%),
    blockquote-border: lighten($gray-3, 5%),
    table-border: lighten($gray-3, 5%),
    table-tr-border: darken($gray-3, 4%),
  ),

  menu: (
    heading-text: $gray-9,
    border-active: #f9826c, // coral
  ),

  sidenav: (
    selected-bg: $white,
    border-active: #f9826c, // coral
  ),

  tabnav: (
    selected-bg: $white,
  ),

  header: (
    text: $white-fade-70,
    bg: $gray-9,
    logo: $white,
  ),

  filter-item: (
    bar-bg: darken($gray-1, 2%),
  ),

  hidden-text-expander: (
    bg: lighten($gray-3, 5%),
    bg-hover: darken($gray-3, 4%),
  ),

  drag-and-drop: (
    border: darken($gray-3, 5%),
  ),

  upload-enabled: (
    border: lighten($gray-3, 5%),
    border-focused: lighten($blue-4, 8%),
  ),

  previewable-comment-form: (
    border: darken($gray-3, 5%),
    bg: $white,
  ),

  underlinenav: (
    border: rgba($gray-3, 0),
    border-hover: $gray-3,
    border-active: #f9826c,
    text: $gray-9,
    text-hover: $gray-9,
    text-active: $gray-9,
    icon: $gray-4,
    icon-hover: $gray-4,
    icon-active: $gray-9,
    counter-text: $gray-9,
  ),

  social-count: (
    bg: $white,
  ),

  header-search: (
    bg: $gray-9,
    border: $gray-7,
  ),


  // App level

  icon-folder: $blue-3,
  hl-author-bg: $blue-0,
  hl-author-border: $blue-2,
  logo-subdued: $gray-3,
  discussion-border: desaturate($green-3, 40%),

  diff: (
    neutral-bg: $gray-3,
    deletion-bg: $red-6,
    deletion-bg-strong: $tbd,
    deletion-border: $tbd,
    deletion-border-strong: $tbd,
    addition-bg: darken($green-4, 5%),
    addition-bg-strong: $tbd,
    addition-border: $tbd,
    addition-border-strong: $tbd,
  ),

  global-nav: (
    logo: $white,
    bg: $gray-9,
    text: $white,
    icon: $white,
    input-bg: $gray-0,
    input-border: $gray-0,
    input-icon: $gray-3,
    input-placeholder: $gray-4,
  ),

  calendar-graph: (
    /*bg: $white,
    border: $white,*/
    day-bg: #EBEDF0,
    day-border: rgba(27, 31, 35, 0.06),
    day-L1-bg: #9BE9A8,
    day-L2-bg: #40C463,
    day-L3-bg: #30A14E,
    day-L4-bg: #216E39,
    day-L4-border: rgba(27, 31, 35, 0.06),
    day-L3-border: rgba(27, 31, 35, 0.06),
    day-L2-border: rgba(27, 31, 35, 0.06),
    day-L1-border: rgba(27, 31, 35, 0.06),
  ),

  pr-state: (
    draft: (
      text: $white,
      bg: $gray-5,
      border: transparent,
    ),

    open: (
      text: $white,
      bg: $green-5,
      border: transparent,
    ),

    merged: (
      text: $white,
      bg: $purple-5,
      border: transparent,
    ),

    closed: (
      text: $white,
      bg: $red-5,
      border: transparent,
    ),
  ),
);