Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.2)
// ----

$o-colors-palette: () !default;

/// Colour palette
///
/// These are the colours that make up the FT palette.
/// We don't use these colours directly, but instead assign them to 'use cases',
/// which are defined in use-cases.scss.
///
/// In the list below, each line contains a colour name and a colour code,
/// and is finished with a comma:
///
/// 	<colour name>:   <colour code>,
///
/// The colour name must be a single word comprising just letters,
/// numbers, and dashes.
///
/// You can have as many spaces between the colour name and the colour code
/// as you like (so you can line them up neatly), and you *MUST* finish the
/// line with a comma.
///
/// @type map
$o-colors-palette: map-merge((
	// Non-colour CSS values
	'transparent':           transparent,
	'inherit':               inherit,
	// Primary Palette
	'pink':                  #fff1e0,
	'black':                 #000000,
	'white':                 #ffffff,
	'blue':                  #2e6e9e,
	'dark-blue':             #275e86,
	'claret':                #9e2f50,
	'orange':                #d66d06,
	'grey-tint1':            #b0b0b0,
	'grey-tint2':            #999999,
	'grey-tint3':            #777777,
	'grey-tint4':            #505050,
	'grey-tint5':            #333333,
	'pink-tint1':            #f6e9d8,
	'pink-tint2':            #e9decf,
	'pink-tint3':            #cec6b9,
	'pink-tint4':            #a7a59b,
	'pink-tint5':            #74736c,
	// Colours
	'red':                   #cc0000,
	'green':                 #458b00,
	// Highlight tints
	'orange-tint1':          #eda45e,
	'brown-tint1':           #94826b,
	'yellow-tint1':          #eed485,
	'green-tint1':           #a6a471,
	'bluegreen-tint1':       #819e9a,
	'silver-tint1':          #c1b8b4,
	'purple-tint1':          #936971,
	'purple-tint2':          #737e7e,
	'red-tint1':             #b1493f,
	'red-tint2':             #c36256,
	'red-tint3':             #d17c70,
	'red-tint4':             #df9c92,
	'red-tint5':             #ebbcb3,
	'blue-tint1':            #598caf,
	'blue-tint2':            #75a5c2,
	'blue-tint3':            #8ab5cd,
	'blue-tint4':            #a9cadc,
	'blue-tint5':            #bcd7e5,
	// Sections colours
	'section-purple':        #92288f,
	'section-light-purple':  #ebcaec,
	'section-blue':          #0e6dcc,
	'section-light-blue':    #c5d4e8,
	'section-green':         #09a25c,
	'section-light-green':   #a1dbb2,
	'section-red':           #cc0033,
), $o-colors-palette);

$o-colors-usecases: () !default;

/// Colour use cases
///
/// These mappings define what we use our colours for.
///
/// Use case:           Must be a single word comprising just letters, numbers, and dashes.
/// Properties:         A Sass map of properties (must be 'border', 'text', 'background', or 'all')
///                     against palette colours (must be an exact match for a name of a colour defined
///                     in palette.scss).
///
/// Special properties: You can use the following special properties to mark use cases:
///
///                     _deprecated: <msg>  Emits <msg> as a warning if referenced, but still works
///
/// @type map
$o-colors-usecases: map-merge((
//<use case>                <properties>
	page:                     (background: 'pink', text: 'grey-tint5'),
	box:                      (background: 'pink-tint1'),
	link:                     (text: 'blue'),
	link-hover:               (text: 'black'),
	link-title:               (text: 'grey-tint5'),
	link-title-hover:         (text: 'blue'),
	title:                    (text: 'black'),
	body:                     (text: 'grey-tint5'),
	muted:                    (text: 'pink-tint3'),
	product-brand:            (background: 'claret'),

	// Section colours
	section-life-arts:        (all: 'section-purple'),
	section-life-arts-alt:    (all: 'section-light-purple'),
	section-magazine:         (all: 'section-blue'),
	section-magazine-alt:     (all: 'section-light-blue'),
	section-house-home:       (all: 'section-green'),
	section-house-home-alt:   (all: 'section-light-green'),
	section-money:            (all: 'section-red'),
	section-money-alt:        (all: 'white')
), $o-colors-usecases);

/// Add a custom palette color
///
/// @example scss
///  @include oColorsSetColor('grey-tint20': #cccccc);
///
/// @param {String} $name - Name in the palette
/// @param {color} $color - Color (rgb, hex, hsl…)
@mixin oColorsSetColor($name, $color) {
	$newcolor: ($name: $color);
	$o-colors-palette: map-merge($o-colors-palette, $newcolor) !global;
}

/// Add a custom use case property
///
/// @example scss
///  @include oColorsSetUseCase(email, text, 'grey-tint5');
///
/// @param {String} $usecase - Name of the use case
/// @param {String} $property - Property it applies to
/// @param {String} $color - One of $o-colors-palette
@mixin oColorsSetUseCase($usecase, $property, $color) {
	$propmap: ($property: $color);

	// The use-case already exists,
	// combine its existing properties with the new one
	@if (map-has-key($o-colors-usecases, $usecase)) {
		$propmap: map-merge(map-get($o-colors-usecases, $usecase), $propmap);
	}

	$newmap: ($usecase: $propmap);

	// Add the use-case and its properties to the global use-case map
	$o-colors-usecases: map-merge($o-colors-usecases, $newmap) !global;
}

/// Output property declarations for all defined properties for the specified use case
///
/// @example scss
///  .my-thing {
///  	@include oColorsFor(custom-box box);
///  }
///  .my-other-thing {
///  	@include oColorsFor(custom-box box, background border);
///  }
///
/// @param {String|list} $useCaseList
/// @param {String|list} $propertyList [all]
@mixin oColorsFor($useCaseList, $propertyList: all) {
	// Fail silently when a use case doesn't exist,
	// taking advantage of how Sass treats the `null` keyword:
	//
	// 		$foo: null;
	// 		el { color: $foo; } // outputs nothing
	$args: (default: null);

	@if ($propertyList == 'all' or index($propertyList, 'background')) {
		background-color: oColorsGetColorFor($useCaseList, background, $options: $args);
	}
	@if ($propertyList == 'all' or index($propertyList, 'text')) {
		color: oColorsGetColorFor($useCaseList, text, $options: $args);
	}
	@if ($propertyList == 'all' or index($propertyList, 'border')) {
		border-color: oColorsGetColorFor($useCaseList, border, $options: $args);
	}
}
/// Return the CSS color for a palette colour name
///
/// @param {String} $name
@function oColorsGetPaletteColor($name) {
	@if (map-has-key($o-colors-palette, $name)) {
		@return map-get($o-colors-palette, $name);
	} @else {
		@warn "Color name '#{inspect($name)}' is not defined in the palette";
		@return null;
	}
}

/// Return the defined palette colour name for a use case / property combination
///
/// @access private
///
/// @param {String} $usecase
/// @param {String} $property - 'text', 'background', 'border' or 'all'
@function _oColorsGetUseCase($usecase, $property) {
	$props: map-get($o-colors-usecases, $usecase);

	@if ($props) {
		$color: map-get($props, $property);
		@if ($color == null and $property != 'all') {
			$color: map-get($props, all);
		}
		@if (map-has-key($props, '_deprecated')) {
			@warn "Color use case '#{inspect($usecase)}' is deprecated (property '#{inspect($property)}' was requested): #{inspect(map-get($props, '_deprecated'))}";
		}
		@return $color;
	}
	@return null;
}

/// Return the CSS colour name of the first defined use case in a prioritised list for a use case / property combination
///
/// @example scss
/// // Single use case:
/// body { color: oColorsGetColorFor(page, text); }
///
/// // Use case with one or multiple fallbacks:
/// // Use "my-box" color if available. If not, fall back to the "box" use case.
/// .box { background-color: oColorsGetColorFor(my-box box, background); }
///
/// // No specific property:
/// .money-wrapper { background-color: oColorsGetColorFor(section-money); }
/// .money-headline { color: oColorsGetColorFor(section-money); }
///
/// // Assign a different fallback if the use case doesn't exist
/// .foo { background-color: oColorsGetColorFor(foo, background, $options: ('default': 'pink-tint-1')); }
///
/// @param {list} $namelist
/// @param {String} $property [all]
/// @param {map} $options [('default': false)] - default: fallback value (false, null, or one of $o-colors-palette)
@function oColorsGetColorFor($namelist, $property: all, $options: ('default': false)) {
	$default: map-get($options, 'default');
	$color: null;

	@each $name in $namelist {
		@if ($color == null) {
			$color: _oColorsGetUseCase($name, $property);
		}
	}

	@if ($color == null) {
		@if ($default or $default == null) {
			@return $default;
		} @else {
			$warn: "Undefined use-case: can't resolve use case list '#{inspect($namelist)}'";

			@if ($property) {
				$warn: $warn + " for property '#{inspect($property)}'";
			}

			@warn $warn;
		}
	}

	@return oColorsGetPaletteColor($color);
}

// If noisy, output helper classes for use cases and palette colours
	@each $usecase, $props in $o-colors-usecases {
		@each $prop, $color in $props {
			#{'.o-colors-' + $usecase + '-' + $prop} {
				@if $prop == text or $prop == all {
					color: oColorsGetPaletteColor($color);
				}
				@if $prop == background or $prop == all {
					background-color: oColorsGetPaletteColor($color);
				}
				@if $prop == border or $prop == all {
					border-color: oColorsGetPaletteColor($color);
				}
			}
		}
	}
	@each $name, $csscolor in $o-colors-palette {
		#{'.o-colors-palette-' + $name} {
			background-color: $csscolor;
		}
	}

SassMeister-output.css

.o-colors-page-background {
  background-color: #fff1e0;
}

.o-colors-page-text {
  color: #333333;
}

.o-colors-box-background {
  background-color: #f6e9d8;
}

.o-colors-link-text {
  color: #2e6e9e;
}

.o-colors-link-hover-text {
  color: #000000;
}

.o-colors-link-title-text {
  color: #333333;
}

.o-colors-link-title-hover-text {
  color: #2e6e9e;
}

.o-colors-title-text {
  color: #000000;
}

.o-colors-body-text {
  color: #333333;
}

.o-colors-muted-text {
  color: #cec6b9;
}

.o-colors-product-brand-background {
  background-color: #9e2f50;
}

.o-colors-section-life-arts-all {
  color: #92288f;
  background-color: #92288f;
  border-color: #92288f;
}

.o-colors-section-life-arts-alt-all {
  color: #ebcaec;
  background-color: #ebcaec;
  border-color: #ebcaec;
}

.o-colors-section-magazine-all {
  color: #0e6dcc;
  background-color: #0e6dcc;
  border-color: #0e6dcc;
}

.o-colors-section-magazine-alt-all {
  color: #c5d4e8;
  background-color: #c5d4e8;
  border-color: #c5d4e8;
}

.o-colors-section-house-home-all {
  color: #09a25c;
  background-color: #09a25c;
  border-color: #09a25c;
}

.o-colors-section-house-home-alt-all {
  color: #a1dbb2;
  background-color: #a1dbb2;
  border-color: #a1dbb2;
}

.o-colors-section-money-all {
  color: #cc0033;
  background-color: #cc0033;
  border-color: #cc0033;
}

.o-colors-section-money-alt-all {
  color: #ffffff;
  background-color: #ffffff;
  border-color: #ffffff;
}

.o-colors-palette-transparent {
  background-color: transparent;
}

.o-colors-palette-inherit {
  background-color: inherit;
}

.o-colors-palette-pink {
  background-color: #fff1e0;
}

.o-colors-palette-black {
  background-color: #000000;
}

.o-colors-palette-white {
  background-color: #ffffff;
}

.o-colors-palette-blue {
  background-color: #2e6e9e;
}

.o-colors-palette-dark-blue {
  background-color: #275e86;
}

.o-colors-palette-claret {
  background-color: #9e2f50;
}

.o-colors-palette-orange {
  background-color: #d66d06;
}

.o-colors-palette-grey-tint1 {
  background-color: #b0b0b0;
}

.o-colors-palette-grey-tint2 {
  background-color: #999999;
}

.o-colors-palette-grey-tint3 {
  background-color: #777777;
}

.o-colors-palette-grey-tint4 {
  background-color: #505050;
}

.o-colors-palette-grey-tint5 {
  background-color: #333333;
}

.o-colors-palette-pink-tint1 {
  background-color: #f6e9d8;
}

.o-colors-palette-pink-tint2 {
  background-color: #e9decf;
}

.o-colors-palette-pink-tint3 {
  background-color: #cec6b9;
}

.o-colors-palette-pink-tint4 {
  background-color: #a7a59b;
}

.o-colors-palette-pink-tint5 {
  background-color: #74736c;
}

.o-colors-palette-red {
  background-color: #cc0000;
}

.o-colors-palette-green {
  background-color: #458b00;
}

.o-colors-palette-orange-tint1 {
  background-color: #eda45e;
}

.o-colors-palette-brown-tint1 {
  background-color: #94826b;
}

.o-colors-palette-yellow-tint1 {
  background-color: #eed485;
}

.o-colors-palette-green-tint1 {
  background-color: #a6a471;
}

.o-colors-palette-bluegreen-tint1 {
  background-color: #819e9a;
}

.o-colors-palette-silver-tint1 {
  background-color: #c1b8b4;
}

.o-colors-palette-purple-tint1 {
  background-color: #936971;
}

.o-colors-palette-purple-tint2 {
  background-color: #737e7e;
}

.o-colors-palette-red-tint1 {
  background-color: #b1493f;
}

.o-colors-palette-red-tint2 {
  background-color: #c36256;
}

.o-colors-palette-red-tint3 {
  background-color: #d17c70;
}

.o-colors-palette-red-tint4 {
  background-color: #df9c92;
}

.o-colors-palette-red-tint5 {
  background-color: #ebbcb3;
}

.o-colors-palette-blue-tint1 {
  background-color: #598caf;
}

.o-colors-palette-blue-tint2 {
  background-color: #75a5c2;
}

.o-colors-palette-blue-tint3 {
  background-color: #8ab5cd;
}

.o-colors-palette-blue-tint4 {
  background-color: #a9cadc;
}

.o-colors-palette-blue-tint5 {
  background-color: #bcd7e5;
}

.o-colors-palette-section-purple {
  background-color: #92288f;
}

.o-colors-palette-section-light-purple {
  background-color: #ebcaec;
}

.o-colors-palette-section-blue {
  background-color: #0e6dcc;
}

.o-colors-palette-section-light-blue {
  background-color: #c5d4e8;
}

.o-colors-palette-section-green {
  background-color: #09a25c;
}

.o-colors-palette-section-light-green {
  background-color: #a1dbb2;
}

.o-colors-palette-section-red {
  background-color: #cc0033;
}