colors.md

OUI Colors

$base-black                  : #000;
$base-white                  : #FFF;

$root-color: (
  grey-85                    : tint($base-black, 15%),
  grey-78                    : tint($base-black, 22%),
  grey-50                    : tint($base-black, 50%),
  grey-40                    : tint($base-black, 60%),
  grey-35                    : tint($base-black, 65%),
  grey-25                    : tint($base-black, 75%),
  grey-12                    : tint($base-black, 88%),
  grey-06                    : tint($base-black, 94%),
  grey-03                    : tint($base-black, 97%), // #F6F6F7
  brand                      : #0081BA,
  brand-light                : #9ACCE2,
  brand-dark                 : #004766,
  warning                    : #FFD40C,
  bad-news                   : #C60C0C,
  good-news                  : #14A54A,
  draft                      : #F4B852, // Brand Oakland
  live                       : #77C96F, // Brand Haight+1
  admin                      : #FCB423 // Admin from v1
);

/// Base Colors
/// @description These are colors can be used on UI elements like borders.

$color: (

  ui: (
    white                    : $base-white,
    faint                    : map-fetch($root-color, grey-03),
    light                    : map-fetch($root-color, grey-06),
    base                     : map-fetch($root-color, grey-12),
    medium                   : map-fetch($root-color, grey-40),
    charcoal                 : map-fetch($root-color, grey-78),
    dark                     : map-fetch($root-color, grey-85),
    brand                    : map-fetch($root-color, brand),
    brand-light              : map-fetch($root-color, brand-light),
    brand-dark               : map-fetch($root-color, brand-dark),
    warning                  : map-fetch($root-color, warning),
    bad-news                 : map-fetch($root-color, bad-news),
    good-news                : map-fetch($root-color, good-news),
    draft                    : map-fetch($root-color, draft),
    live                     : map-fetch($root-color, live),
    admin                    : map-fetch($root-color, admin)
  ),

  link: (
    base                     : map-fetch($root-color, brand),
    brand-light              : map-fetch($root-color, brand-light),
    bad-news                 : map-fetch($root-color, bad-news),
    white                    : $base-white
  ),

  background: (
    base                     : $base-white,
    white                    : $base-white,
    faint                    : map-fetch($root-color, grey-03),
    light                    : map-fetch($root-color, grey-06),
    muted                    : map-fetch($root-color, grey-35),
    medium                   : map-fetch($root-color, grey-50),
    charcoal                 : map-fetch($root-color, grey-78),
    black                    : $base-black,
    brand                    : map-fetch($root-color, brand),
    brand-dark               : map-fetch($root-color, brand-dark),
    brand-light              : #F2F7FC,
    warning                  : #FCF8E3,
    bad-news                 : #F9E3E4,
    good-news                : #E9F6C3
  ),

  text: (
    base                     : map-fetch($root-color, grey-85),
    white                    : $base-white,
    faint                    : map-fetch($root-color, grey-12),
    light                    : map-fetch($root-color, grey-25),
    muted                    : map-fetch($root-color, grey-35),
    medium                   : map-fetch($root-color, grey-50),
    charcoal                 : map-fetch($root-color, grey-78),
    dark                     : map-fetch($root-color, grey-85),
    brand                    : map-fetch($root-color, brand),
    brand-dark               : map-fetch($root-color, brand-dark),
    warning                  : map-fetch($root-color, warning),
    bad-news                 : map-fetch($root-color, bad-news),
    good-news                : map-fetch($root-color, good-news)
  )

);

X Font Sizes

$x_fonts: map-extend($font,
  (
    size: (
      base                    : 14px,
      milli                   : 13px,
      micro                   : 11px,
      alpha                   : 30px, // h1
      beta                    : 26px, // h2
      gamma                   : 20px, // h3
      delta                   : 18px, // h4
      epsilon                 : 16px, // h5
      zeta                    : 14px // h6
    )
  )
);

X Colors

$x_colors: map-extend($color,
  (
    ui: (
      good-news                : #14A54A,
      highlight                : #0074B4,
      draft                    : #F4B852,
      live                     : #97C709
    ),
    background: (
      brand-faint              : #FAFCFE
    ),
    border: (
      brand                    : #CDD7EB
    ),
    text: (
      good-news                : #21a350,
      muted                    : #888
    )
  )
);

X Button Style

$x_button: map-extend($button,
  (
    size: (
      tiny: (
        height                  : 19px,
        line-height             : 18px,
        font-size               : 11px,
        padding                 : 0 8px,
        font-weight             : 500
      )
    ),
    type: (
      brand: (
        background             : #3a586e,
        hover:(
          background           : darken(#3a586e, 5%)
        ),
        active:(
          background           : #3a586e
        )
      )
    )
  )
);

PM Colors

$pm_colors: (
  green: #4caf50,
  light-green: #8bc34a,
  warning: #fbb05e,
  amber: #ffc107,
  danger: #f44455
);