edx-platform/static/pattern-library/sass/utilities/_variables.scss

// ------------------------------
// edX Pattern Library: Variables

// About: Sass partial for defining variables used throughout the applications.

// #UNITS:          Basic units of measurement
// #GRID:           Grid and layout variables
// #COLORS:         Base, palette and theme color definitions + application
// #TYPOGRAPHY:     Font definitions and scales
// #DEPTH:          Event timing variables
// #TIMING:         Event timing variables
// #APPLICATIONS:   Applying configuration


// ----------------------------
// #UNITS
// ----------------------------
$em-base: 16; // deliberately sets bourbon-based em-base (http://bourbon.io/docs/#em-base)


// ----------------------------
// #GRID
// ----------------------------
// grid - baseline
$baseline:               20;
$baseline-vertical:      ($baseline*2);
$baseline-horizontal:    $baseline;

$susy: (
    use-custom clearfix: true,
    global-box-sizing: border-box,
    math: fluid,
    output: float,
    columns: 12,
    gutters: .5,
    container: rem(1170),
);

// grid - breakpoints
$bp-small:  320px;
$bp-medium: 768px;
$bp-large:  1024px;
$bp-huge:   1280px;

// ----------------------------
// #COLORS
// ----------------------------
// color: config
$transparent:               rgba(0, 0, 0, 0);

$gray:                      rgb(167, 164, 164);
$gray-cool:                 rgb(158, 177, 185);
$red:                       rgb(178, 6, 16);
$yellow:                    rgb(253, 188, 86);
$green:                     rgb(37, 184, 90);
$blue:                      rgb(0, 121, 188);
$pink:                      rgb(203, 89, 141);

// colors: brand
$brand-primary:             $blue;
$brand-primary-accent:      rgb(14, 166, 236);
$brand-secondary:           $pink;
$brand-secondary-accent:    rgb(242, 108, 170);

// colors: utilities
$success: $green;
$warning: $yellow;
$error: $red;

// colors: palettes
$palettes: (
    primary: (
        base:       $brand-primary,
        light:      tint($brand-primary, 30%),
        x-light:    tint($brand-primary, 70%),
        dark:       shade($brand-primary, 30%),
        x-dark:     shade($brand-primary, 55%),
        accent:     $brand-primary-accent,
        x-accent:   saturate($brand-primary-accent, 25%)
    ),
    secondary: (
        base:       $brand-secondary,
        light:      tint($brand-secondary, 30%),
        x-light:    tint($brand-secondary, 70%),
        dark:       shade($brand-secondary, 30%),
        x-dark:     shade($brand-secondary, 55%),
        accent:     $brand-secondary-accent
    ),
    grayscale: (
        base:       $gray,
        light:      tint($gray, 50%),
        x-light:    tint($gray, 75%),
        white:      tint($gray, 97%),
        white-t:    tint($gray, 100%),
        dark:       shade($gray, 40%),
        x-dark:     shade($gray, 60%),
        black:      shade($gray, 90%),
        black-t:    shade($gray, 100%),
        trans:      transparentize($gray, 0.50),
        x-trans:    transparentize($gray, 0.75),
        xx-trans:   transparentize($gray, 0.95)
    ),
    grayscale-cool: (
        base:       $gray-cool,
        light:      tint($gray-cool, 50%),
        x-light:    tint($gray-cool, 75%),
        dark:       shade($gray-cool, 50%),
        x-dark:     shade($gray-cool, 75%),
        trans:      transparentize($gray-cool, 0.50),
        x-trans:    transparentize($gray-cool, 0.75),
        xx-trans:   transparentize($gray-cool, 0.95)
    ),
    success: (
        base:       $success,
        light:      tint($success, 33%),
        dark:       shade($success, 33%)
    ),
    error: (
        base:       $error,
        light:      tint($error, 33%),
        dark:       shade($error, 33%)
    ),
    warning: (
        base:       $warning,
        light:      tint($warning, 33%),
        dark:       shade($warning, 33%)
    ),
);

// ----------------------------
// #TYPOGRAPHY
// ----------------------------
// typography: config
@include font-face(
    'Open Sans',
    '../../fonts/OpenSans/OpenSans-Light-webfont',
    300,
    $file-formats: woff woff2 ttf
);
@include font-face(
    'Open Sans',
    '../../fonts/OpenSans/OpenSans-LightItalic-webfont',
    300,
    italic,
    $file-formats: woff woff2 ttf
);
@include font-face(
    'Open Sans',
    '../../fonts/OpenSans/OpenSans-Regular-webfont',
    400,
    $file-formats: woff woff2 ttf
);
@include font-face(
    'Open Sans',
    '../../fonts/OpenSans/OpenSans-Italic-webfont',
    400,
    italic,
    $file-formats: woff woff2 ttf
);
@include font-face(
    'Open Sans',
    '../../fonts/OpenSans/OpenSans-Semibold-webfont',
    600,
    $file-formats: woff woff2 ttf
);
@include font-face(
    'Open Sans',
    '../../fonts/OpenSans/OpenSans-SemiboldItalic-webfont',
    600,
    italic,
    $file-formats: woff woff2 ttf
);
@include font-face(
    'Open Sans',
    '../../fonts/OpenSans/OpenSans-Bold-webfont',
    700,
    $file-formats: woff woff2 ttf
);
@include font-face(
    'Open Sans',
    '../../fonts/OpenSans/OpenSans-BoldItalic-webfont',
    700,
    italic,
    $file-formats: woff woff2 ttf
);

// typography: config - stacks
$font-family-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$font-family-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;

// typography: config - scale
$modular-scale-ratio: $perfect-fourth;

// typography: sizes
$font-sizes: (
    xxx-large:      38,
    xx-large:       28,
    x-large:        24,
    large:          21,
    mid-large:      18,
    base:           16,
    small:          14,
    x-small:        12,
);

// typography: line-height
$line-heights: (
    xx-large:       1.40,
    x-large:        1.40,
    large:          1.50,
    mid-large:      1.60,
    mid-small:      1.60,
    small:          1.5,
    base:           1.5,
    none:           0
);

// typography: weights
$font-weights: (
    normal:         400,
    light:          300,
    x-light:        200,
    semi-bold:      600,
    bold:           700,
    x-bold:         800
);

// typography: letter-spacing
$letter-spacing: (
    normal:         0,
    xx-tight:       -3,
    x-tight:        -2,
    tight:          -.095,
    loose:          -.075,
    x-loose:        -.025,
    xx-loose:       3
);

// ----------------------------
// #DEPTH
// ----------------------------
$z-depths: (
    base:           1,
    mid-back:       -10,
    back:           -100,
    very-back:      -1000,
    mid-front:      10,
    front:          100,
    very-front:     1000
);

$spacing-vertical: (
    base:       $baseline-vertical,
    mid-small:  ($baseline-vertical*0.75),
    small:      ($baseline-vertical/2),
    x-small:    ($baseline-vertical/4),
    xx-small:    ($baseline-vertical/8),
    mid-large:  ($baseline-vertical*1.5),
    large:      ($baseline-vertical*2),
    x-large:    ($baseline-vertical*4)
);

$spacing-horizontal: (
    base:       $baseline-horizontal,
    mid-small:  ($baseline-horizontal*0.75),
    small:      ($baseline-horizontal/2),
    x-small:    ($baseline-horizontal/4),
    xx-small:   ($baseline-horizontal/8),
    mid-large:  ($baseline-horizontal*1.5),
    large:      ($baseline-horizontal*2),
    x-large:    ($baseline-horizontal*4)
);


// ----------------------------
// #TIMING
// ----------------------------
$timing: (
    base:       0.75s,
    slow:       1s,
    x-slow:     1.5s,
    fast:       0.5s,
    x-fast:     0.25s,
    xx-fast:    0.125s
);

// ----------------------------
// #APPLICATIONS
// ----------------------------
// scaffolding
$view-bg: palette(grayscale, xx-light);

// base component settings
$component-focus-color: inherit;
$component-focus-bg: palette(primary, x-light);
$component-active-color: palette(grayscale, white);
$component-active-bg: palette(primary, base);

// base text settings
$text-base-font-family: $font-family-sans-serif;
$text-base-color: palette(grayscale, dark);
$text-base-font-weight: font-weight(normal);
$text-base-focus-color: palette(grayscale, x-dark);

$text-emphasized-color: palette(grayscale, x-dark);
$text-emphasized-font-weight: font-weight(normal);

$text-de-emphasized-color: palette(grayscale, base);
$text-de-emphasized-font-weight: font-weight(normal);

// links
$link-color: palette(primary, base);
$link-focus-color: palette(primary, sat);
$link-visited-color: palette(primary, dark);

// headings
$headings-font-weight-normal: font-weight(normal);
$headings-font-weight-bold: font-weight(semi-bold);
$headings-font-weight-x-bold: font-weight(bold);

$headings-base-font-family: $font-family-sans-serif;
$headings-base-font-weight: $headings-font-weight-normal;
$headings-base-color: palette(grayscale, x-dark);

$headings-primary-font-family: $font-family-sans-serif;
$headings-primary-color: palette(grayscale, black);

$headings-secondary-font-family: $font-family-sans-serif;
$headings-secondary-color: palette(grayscale, base);

// buttons
$buttons-border-style: solid;
$buttons-border-size: 1px;
$buttons-elevated-shadow: 3px;
$buttons-border-radius: 3px;
$buttons-font-weight: font-weight(semi-bold);

// tables
$table-cell-padding: spacing-vertical(small) spacing-horizontal(small);
$table-condensed-cell-padding: spacing-vertical(x-small) spacing-horizontal(x-small);
$table-bg: palette(grayscale, white);
$table-accent-bg: palette(primary, accent);
$table-focus-bg: $component-focus-bg;
$table-active-bg: $component-active-bg;
$table-border-color: palette(grayscale, x-light);