notes/_sass/primer-support/lib/variables.scss

// variables
// stylelint-disable declaration-bang-space-before
// These are our margin and padding utility spacers. The default step size we
// use is 8px. This gives us a key of:
//    0 => 0px
//    1 => 4px
//    2 => 8px
//    3 => 12px
//    4 => 24px
//    5 => 32px
//    6 => 40px
$spacer: 8px !default;
$spacers: (
  0,
  round($spacer / 2),
  $spacer,
  $spacer * 2,
  $spacer * 3,
  $spacer * 4,
  $spacer * 5
) !default;

// Aliases for easy use
$spacer-1: nth($spacers, 2) !default; // 4px
$spacer-2: nth($spacers, 3) !default; // 8px
$spacer-3: nth($spacers, 4) !default; // 12px
$spacer-4: nth($spacers, 5) !default; // 24px
$spacer-5: nth($spacers, 6) !default; // 32px
$spacer-6: nth($spacers, 7) !default; // 40px

$container-width: 980px !default;
$grid-gutter:     10px !default;

// breakpoints
$width-xs: 0;
$width-sm: 544px;
$width-md: 768px;
$width-lg: 1012px;
$width-xl: 1280px;

// New responsive container-width
$container-md: $width-md !default;
$container-lg: $width-lg !default;
$container-xl: $width-xl !default;

// Breakpoints
$breakpoints: (
  // Small screen / phone
  sm: $width-sm,
  // Medium screen / tablet
  md: $width-md,
  // Large screen / desktop (980 + (12 * 2)) <= container + gutters
  lg: $width-lg,
  // Extra large screen / wide desktop
  xl: $width-xl
) !default;

// ---- Colors ----

// Brand
$blue:              #4078c0 !default;
$gray-dark:         #333    !default;
$gray-light:        #999    !default;
$gray:              #767676 !default;
$green:             #6cc644 !default;
$orange:            #c9510c !default;
$purple:            #6e5494 !default;
$red:               #bd2c00 !default;
$yellow:            #ffd36b !default;
$white:             #fff !default;

// State indicators.
$status-renamed:    #fffa5d !default;
$status-pending:    #cea61b !default;

// Repository type colors
$repo-private-text: #4c4a42 !default;
$repo-private-bg:   #fff9ea !default;
$repo-private-icon: #e9dba5 !default;

// Alerts
$flash-border-blue: #bac6d3 !default;
$flash-bg-blue: #e2eef9 !default;
$flash-text-blue: #246 !default;

$flash-border-yellow: #dfd8c2 !default;
$flash-bg-yellow: #fff9ea !default;
$flash-text-yellow: #4c4a42 !default;

$flash-border-red: #d2b2b2 !default;
$flash-bg-red:     #fcdede !default;
$flash-text-red:   #911 !default;

$flash-border-green: #bad3be !default;
$flash-bg-green:     #e2f9e5 !default;
$flash-text-green:   #22662c !default;

// Border colors
$border-blue:       #c5d5dd !default;
$border-blue-light: #c9e6f2 !default;
$border-blue-dark:  $blue !default;
$border-red:        $flash-border-red !default;
$border-red-dark:   $red !default;
$border-gray-dark:  #ddd !default;
$border-gray-darker: #444 !default;
$border-gray-light: #eee !default;
$border-gray:       #e5e5e5 !default;

// Background colors
$bg-blue-light:     #f2f8fa !default;
$bg-blue:           $blue !default;
$bg-gray-dark:      $gray-dark !default;
$bg-gray-light:     #fafafa !default;
$bg-gray:           #f5f5f5 !default;
$bg-green:          $green !default;
$bg-green-light:    #eaffea !default;
$bg-orange:         $orange !default;
$bg-purple:         $purple !default;
$bg-red:            $red !default;
$bg-red-light:      #fcdede !default;
$bg-white:          $white !default;
$bg-yellow:         $yellow !default;
$bg-yellow-light:   #fff9ea !default; // same as $flash-bg-yellow and $repo-private-bg

// Text colors
$text-blue:         $blue !default;
$text-gray-dark:    $gray-dark !default;
$text-gray-light:   $gray-light !default;
$text-gray:         $gray !default;
$text-green:        darken($green, 10%) !default;
$text-orange:       $orange !default;
$text-purple:       $purple !default;
$text-red:          $red !default;
$text-white:        $white !default;

// Border size
$border-width: 1px !default;
$border-color: $border-gray !default;
$border-style: solid !default;
$border: $border-width $border-color $border-style !default;
$border-radius: 3px !default;

// Box shadow
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !default;
$box-shadow-medium: 0 1px 5px rgba(0, 0, 0, 0.15) !default;
$box-shadow-large: 0 1px 15px rgba(0, 0, 0, 0.15) !default;

// Heading sizes
$h00-size: 48px !default;
$h0-size: 40px !default;
$h1-size: 32px !default;
$h2-size: 24px !default;
$h3-size: 20px !default;
$h4-size: 16px !default;
$h5-size: 14px !default;
$h6-size: 12px !default;

$font-weight-bold: 600 !default;
$font-weight-semibold: 500 !default;
$font-weight-normal: 400 !default;
$font-weight-light: 300 !default;

$font-size-small: 12px !default;

$lh-condensed-ultra: 1 !default;
$lh-condensed: 1.25 !default;
$lh-default: 1.5 !default;

// Font stacks
$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

// Monospace font stack
$mono-font: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;

// The base body size
$body-font-size: 14px !default;
$body-line-height: $lh-default !default;

// Tooltips
$tooltip-max-width: 250px !default;
$tooltip-background-color: rgba(0, 0, 0, 0.8) !default;
$tooltip-text-color: #fff !default;
$tooltip-delay: 0.4s !default;
$tooltip-duration: 0.1s !default;

$blob-inner-border: #eee;

$commitBackgroundColor: #f2f9fc;

$conversationListBorderColor: #eee;

$exploregrid-item-border-radius: 4px;

$stats-switcher-py: 10px;
// Future proof this `height` value by finding the computed line-height, then
// adding the total value of the vertical padding. This var is used to toggle
// between the stats bar and language breakdown.
$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2);

$min_tab_size: 1;
$max_tab_size: 12;