o-colors

functions

oColorsGetPaletteColor

@function oColorsGetPaletteColor($name) { ... }

Description

Return the CSS color for a palette colour name

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$namenoneStringnone

Requires

Used by

Links

[private] _oColorsGetUseCase

@function _oColorsGetUseCase($usecase, $property) { ... }

Description

Return the defined palette colour name for a use case / property combination

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$usecasenoneStringnone
$property

'text', 'background', 'border' or 'all'

Stringnone

Requires

Used by

Links

oColorsGetColorFor

@function oColorsGetColorFor($namelist, $property: all, $options: ('default': false)) { ... }

Description

Return the CSS colour name of the first defined use case in a prioritised list for a use case / property combination

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$namelistnoneListnone
$propertynoneStringall
$options

default: fallback value (false, null, or one of $o-colors-palette)

Map('default': false)

Example

// 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')); }

Requires

Used by

Links

mixins

oColorsSetColor

@mixin oColorsSetColor($name, $color) { ... }

Description

Add a custom palette color

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

Name in the palette

Stringnone
$color

Color (rgb, hex, hsl…)

Colornone

Example

@include oColorsSetColor('grey-tint20': #cccccc);

Requires

Links

oColorsSetUseCase

@mixin oColorsSetUseCase($usecase, $property, $color) { ... }

Description

Add a custom use case property

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$usecase

Name of the use case

Stringnone
$property

Property it applies to

Stringnone
$color

One of $o-colors-palette

Stringnone

Example

@include oColorsSetUseCase(email, text, 'grey-tint5');

Requires

Links

oColorsFor

@mixin oColorsFor($useCaseList, $propertyList: all) { ... }

Description

Output property declarations for all defined properties for the specified use case

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$useCaseListnoneString or Listnone
$propertyListnoneString or Listall

Example

.my-thing {
	@include oColorsFor(custom-box box);
}
.my-other-thing {
	@include oColorsFor(custom-box box, background border);
}

Requires

Links

variables

o-colors-palette

$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':            #f7e9d9,
	'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,

	// Next
	// http://next.ft.com/__styleguide/design-primitives#palette
	'warm-1':                #ffe9d7,
	'warm-2':                #f7e9d9,
	'warm-3':                #cec6b9,
	'warm-4':                #1d1d1d,
	'warm-5':                #fdf8f2,
	'warm-6':                #8b572a,

	'cold-1':                #505050,
	'cold-2':                #333333,
	'cold-3':                #1d1d1d,

	'blue-1':                #002758,
	'blue-2':                #eeeeee,

	'purple-1':              #410057,
	'purple-2':              #f3dee3,

	'teal-1':                #26747a,
	'teal-2':                #2bbbbf,

	'claret-1':              #9e2f50,
	'claret-2':              #ff7f8a,
	'claret-inverse':        #4f1828,

	// New rich journalism color
	'slate':                 #252830,

	// FT organisation colours
	'org-b2c':               #4e96eb,
	'org-b2c-dark':          #3a70af,
	'org-b2c-light':         #99c6fb,

	'org-b2b':               #f6801a,
	'org-b2b-dark':          #c85f04,
	'org-b2b-light':         #f29d53,

), $o-colors-palette);

Description

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

Used by

Links

o-colors-usecases

$o-colors-usecases: map-merge((

//<use case>                <properties>

	page:                     (background: 'pink', text: 'grey-tint5'),
	box:                      (background: 'pink-tint1'),
	link:                     (text: 'teal-1'),
	link-hover:               (text: 'grey-tint4'),
	link-title:               (text: 'grey-tint5'),
	link-title-hover:         (text: 'blue'),
	tag-link:                 (text: 'claret'),
	tag-link-hover:           (text: 'claret-inverse'),
	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);

Description

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

Used by

Links