app/assets/stylesheets/_variables.scss
//=================================================================================
//
// CONSTANTS
//
//=================================================================================
// COLOR PALETTE
// Greyscale.
$black: rgb(0,0,0);
$greyscale_dark: rgb(87,87,87);
$greyscale_midtone: rgb(128,128,128);
$greyscale_light: rgb(171,171,171);
$greyscale_lightest: rgb(252,252,252);
$white: rgb(255,255,255);
// Primary.
$primary: rgb(137,209,226);
$primary-dark: shade($primary, 25);
$primary-darkest: shade($primary, 50);
$primary-light: tint($primary, 25);
$primary-lightest: tint($primary, 50);
// Accents.
$accentA-base: rgb(209,249,148);
$accentA-light: tint($accentA-base, 25);
$accentA-dark: shade($accentA-base, 50);
$accentB: rgb(255,200,56);
// Complements.
$complement-base: rgb(242,144,191);
$complementA: shade($complement-base, 50);
$complementB: tint($complement-base, 50);
// Notification colors.
$alert-error-base: rgb(255,10,50);
// SEMANTIC COLOR VARIABLES
//
// Where possible, we named the variable based on the "role" of the element
// it is used for, as defined by WAI-ARIA
// http://www.w3.org/TR/wai-aria/rdf_model.html
//
// In some cases, such as pagination, that was not possible. In these cases
// the variable names are patterned on Twitter Bootstrap.
// http://getbootstrap.com/customize/
//
// Some of the variables describe what ARIA refers to as "widget roles,"
// for example $button-color or $link-color.
//
// Others describe "landmark roles," for example anything starting
// with $search, $banner, or $main.
//
// Variables should have the shortest possible name that will uniquely identify them
// following this structure:
//
// [widget]-[landmark | structure]-[non-WAI-ARIA qualifier]-[state]-rule
// ... where:
//
// [widget] = The specific widget. This would usually be
// present, but could be [optional]
// in cases where the variable was applying a
// style (such as a background color)
// to the containing landmark area.
// See examples at
// http://www.w3.org/TR/wai-aria-practices/#aria_ex
//
// [landmark | structure] = The [optional] landmark or document structure
// the widget appears in.
//
// [non-WAI-ARIA qualifier] = An [optional] descriptive qualifier for
// differentiating this variable,
// which is not covered succinctly in WAI-ARIA.
// (e.g. a Twitter Bootstrap-style name might be used.)
//
// [state] = The [optional] CSS pseudo-class being set
// (e.g. hover, active, etc.)
//
// rule = The CSS rule being set
// (e.g. background-color, color, etc.)
// Typography.
//
// TODO $text-color (this is probably a greyscale value)
$text-accent-color: $primary-dark;
$text-accent-hover-color: $complementA;
// Banner (Header)
//
// "Popups" in the upper-left of the header area.
//
$menubutton-popup-color: $primary-dark;
$menubutton-popup-hover-color: $complementA;
// Buttons inside the popups.
$button-popup-color: rgba($black,.5);
$button-popup-hover-color: $complementA;
$button-popup-fa-color: $primary-darkest;
$button-popup-bg: $accentA-light;
$button-popup-hover-bg: shade($accentA-light,5);
$button-popup-disabled-color: $greyscale_light;
$button-popup-disabled-bg: tint($greyscale_light, 60);
// Buttons.
//
$button-color: rgba($black,.5);
$button-hover-color: $complementA;
$button-fa-color: $primary-darkest;
$button-bg: $accentA-light;
$button-hover-bg: shade($accentA-light,5);
$button-disabled-color: $greyscale_light;
$button-disabled-bg: tint($greyscale_light, 60);
$button-small-color: tint($black, 25);
$button-small-fa-color: $primary-darkest;
$button-small-hover-color: $complementA;
$button-small-bg: none;
$button-small-bg-hover: $primary-light;
$button-utility-color: $complementA;
$button-utility-fa-color: $primary-darkest;
$button-utility-hover-color: $complementA;
$button-utility-bg: none;
$button-utility-bg-hover: $complementB;
// Forms.
//
$input-border-color: $primary-dark;
$input-fa-color: $primary-darkest;
// Search.
//
// Home page.
$search-bg: $primary;
// Sidebar.
$search-sidebar-bg: $primary-lightest;
$search-border-color: $primary;
$search-text-color: tint($black, 25);
$search-accent-color: shade($primary, 50);
$search-accent-hover: $text-accent-hover-color;
$search-button-color: $complementA;
$search-button-hover-color: shade($complement-base, 25);
$search-button-hover-background: $primary-light;
$search-button-fa-hover-color: $complementA;
// Boxes of search terms on the home page.
$list-search-border: $primary-light;
$listitem-search-border: $primary;
$list-search-important-border: $complementB;
$listitem-search-important-border: $accentB;
// Pagination.
//
$pagination-color: $complementA;
$pagination-hover-color: $complementA;
$pagination-bg: none;
$pagination-hover-bg: $complementB;
$pagination-border: $complementB;
$pagination-active-color: $white;
$pagination-active-bg: tint($complement-base, 25);
$pagination-disabled-color: $greyscale_dark;
$pagination-disabled-bg: rgba($complementB, 0.1);
$pagination-next-color: $white;
$pagination-next-hover-color: $white;
$pagination-next-bg: $primary-dark;
$pagination-next-hover-bg: tint($complement-base, 25);
$pagination-highlight: $black;
// Main
//
$main-highlight: $complementA;
$main-header-bg: rgba($complementB, 0.2);
$main-header-color: $black;
$main-list-mark-color: $complementB;
$main-border-color: $primary-dark;
// Alert
//
$alert-color: $black;
$alert-bg: $alert-error-base;
$alert-border-color: $black;
// Popups
//
$popup-bg: $white;
// Terminology info box — appears for select keywords above the search results.
$terminology-border: $complementA;
// END SEMANTIC COLOR VARIABLES
// Animation settings.
$animation-duration-slow: 100ms;
$animation-duration-base: 50ms;
$animation-duration-fast: 25ms;
// Positioning settings.
// The default border radius for rounded corners.
$border-radius-base: 4px;
// The stacking order layers (used with z-index).
$layer-11: 11000;
$layer-10: 10000;
$layer-9: 9000;
$layer-8: 8000;
$layer-7: 7000;
// Fonts
$font_serif: 'Libre Baskerville', serif;
$font_san_serif: 'Quattrocento Sans', sans-serif;
// Font sizes. Relative numbered names (-80,-90,-100,-110...) are used
// instead of labels (small, medium, large) to allow easy insertion
// of additional intermediate sizes. 100 is the baseline.
// The font sizing mixins in _mixins.scss provide mapping of human-readable labels to font sizes.
// For actual font size rhythm calculations, see http://modularscale.com.
// The settings are rounded values of a 16px baseline at a 3:4 perfect forth ratio.
// tiny
$font_size_80: 9px;
$font_leading_80: 0.75;
// small
$font_size_90: 12px;
$font_leading_90: 0.75;
// base-small
$font_size_95: 14px;
$font_leading_95: 1;
// baseline
$font_size_100: 16px;
$font_leading_100: 1;
// base-medium
$font_size_105: 18px;
$font_leading_105: 1;
// medium
$font_size_110: 21px;
$font_leading_110: 1.25;
// medium-large
$font_size_115: 24px;
$font_leading_110: 1.25;
// large
$font_size_120: 28px;
$font_leading_120: 1.25;
// x-large
$font_size_130: 38px;
$font_leading_130: 1.5;