public/video-ui/styles/abstracts/_variables.scss

// -----------------------------------------------------------------------------
// This file contains all application-wide Sass variables.
// -----------------------------------------------------------------------------

/// Regular font family
/// $type List
$text-font-stack: 'Guardian Agate Sans', Arial, sans-serif !default;
$title-font-stack: 'Guardian Egyptian Text', Georgia, serif;

/**
 * COLOURS
 *
 * Wherever a grayscale colour is used, please use one of the many colour
 * steps defined as variables below.
 */

/*
Grayscale colour palette
As per: https://docs.google.com/a/guardian.co.uk/file/d/0B6htkhydcF-aV1lUUEhyYTBuRGM/edit
*/
$color100Grey: #F6F6F6; // hsl(59,0%,96%)
$color150Grey: #F1F1F1; // hsl(59,0%,94%)
$color200Grey: #EDEDED; // hsl(59,0%,92%)
$color300Grey: #DCDCDC; // hsl(59,0%,86%)
$color400Grey: #BDBDBD; // hsl(59,0%,74%)
$color500Grey: #898984; // hsl(59,3%,53%)
$color600Grey: #666666; // hsl(59,0%,46%)
$color625Grey: #444444; // hsl(59,0%,20%)
$color650Grey: #393939; // hsl(59,0%,20%)
$color700Grey: #333333; // hsl(59,0%,20%)
$color800Grey: #252525;
$color900Grey: #141414;


/*
Generic colours
*/
$slightDangerColor: #ca870c;
$dangerColor: #ed5935;
$mortalDangerColor: #bc250c;
$placeholderColor: $color500Grey;
$cBlueLink: #005689;
$cBlue: #148ad2;
$cBlue00: #002c59;
$cBlue6d: #6d8ea3;
$cBlue32: #32555f;
$cGrey700: #333333;
$cRedB5: #b51800;
$cRedE3: #e31f26;
$cRedFF: #ff7272;
$cYellow: #ffbc01;
$cGreen00: #008751;
$cGreen1c: #1c6326;
$cGreen33: #33a22b;
$cGreen32: #325f37;
$cWhite: #FFFFFF;

/*
Background colours
*/
$bodyBgColor: $color800Grey;
$greyBgColor: $color200Grey;
$darkGreyBgColor: $color300Grey;

// These colours should be abstracted into the colour palette (above) if a
// pattern emerges later down the line
$btnBgColor: $color500Grey;
$btnDisabledBgColor: $color300Grey;
$btnActiveBgColor: #00ADEE;
$btnDeepCtaHoverBgColor: #47af37;
$btnLightBgColor: $color400Grey;
$labelPublishedColor: $cGreen33;

/*
Border colours
*/
$greyBorderColor: $color600Grey;
$darkGreyBorderColor: $color650Grey;

/*
Text colours
*/
$brandColor: #ffbc01;
$darkBrandColor: darken($brandColor, 5);
$lightBrandColor: lighten($brandColor, 60);
$textColor: $color400Grey;
$anchorColor: $cWhite;


// Sizes
$toolbarHeight: 50px;
$videoBlockWidth: 230px;
$standard-padding: 10px;
$iconSize: 16px; /* Preferred icon size */

// Font sizes
$fontsize__detailbox: 17px;

$articleType: #137fcc;
$liveblogType: #e31f26;
$videoType: #ffbc01;

$large-screen: 1280px;