o-colors

functions

oColorsGetPaletteColor

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

Description

Return the CSS color for a palette color name

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$namenoneStringnone

Requires

Used by

Links

oColorsMix

@function oColorsMix($background: paper, $color: black, $percentage: 60) { ... }

Description

Returns a color based on the background context and base color at the supplied percentage

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$background

palette name of background color

Stringpaper
$color

palette name of color

Stringblack
$percentage

percentage opacity of the color over the background

Number60

Requires

Used by

Links

oColorsGetUseCase

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

Description

Return the defined palette color 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 color 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': 'black-5')); }

Requires

Used by

Links

oColorsGetTint

@function oColorsGetTint($color, $brightness) { ... }

Description

Returns a customised version of our shade-able colors defined in $o-colors-tints

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

the name of the color to be shaded

Stringnone
$brightness

the brightness value of the new color

Numbernone

Throws

  • It is not possible to use a tint of: #{$color}, please use one of: #{$color-tints} instead.

Requires

Links

oColorsGetTextColor

@function oColorsGetTextColor($background, $opacity: 100) { ... }

Description

Returns a text color based on the background and an opacity percentage the color should appear at

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$background

the hex color of the background the text will appear on

Colornone
$opacity

the opacity percentage the text color should appear at

Number100

Throws

  • The combination of #{$opacity}% #{$baseColor} on #{$background} does not pass WCAG guidelines for color contrast.

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

Used by

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

[private] _oColorsSetPaletteTints

@mixin _oColorsSetPaletteTints() { ... }

Description

Update the palette with calculated tints of each color from $o-colors-tints

Parameters

None.

Requires

Links

[private] _oColorsCSSVariables

@mixin _oColorsCSSVariables() { ... }

Description

Output all palette colors as CSS Variables

Parameters

None.

Requires

Links

variables

o-colors-palette

$o-colors-palette: map-merge((
	// non-color css values
	'transparent':           transparent,
	'inherit':               inherit,

	// primary palette
	'paper':                 #fff1e5,
	'black':                 #000000,
	'white':                 #ffffff,

	'claret':                #990f3d,
	'oxford':                #0f5499,
	'teal':                  #0d7680,

	'wheat':                 #f2dfce,
	'sky':                   #cce6ff,
	'slate':                 #262a33,

	'velvet':                #593380,
	'mandarin':              #ff8833,
	'lemon':                 #ffec1a,

	'candy':                 #ff7faa,
	'wasabi':                #96cc28,

	'jade':                  #00b359,
	'crimson':               #cc0000,

	'org-b2c':               #4e96eb,
	'org-b2c-dark':          #3a70af,
	'org-b2c-light':         #99c6fb,
), $o-colors-palette);

Description

color palette

These are the colors that make up the FT palette. We don't use these colors directly, but instead assign them to 'use cases', which are defined in use-cases.scss.

In the list below, each line contains a color name and a color code, and is finished with a comma:

<color name>:   <color code>,

The color name must be a single word comprising just letters, numbers, and dashes.

You can have as many spaces between the color name and the color 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: 'paper'),
	box:                      (background: 'wheat'),
	link:                     (text: 'teal'),
	link-hover:               (text: 'black-70'),
	link-title:               (text: 'black-80'),
	link-title-hover:         (text: 'black-70'),
	tag-link:                 (text: 'claret'),
	tag-link-hover:           (text: 'claret-30'),
	opinion-tag-link:         (text: 'oxford'),
	opinion-tag-link-hover:   (text: 'oxford-30'),
	title:                    (text: 'black'),
	body:                     (text: 'black-80'),
	muted:                    (text: 'black-20'),
	opinion:                  (background: 'sky'),
	hero:                     (background: 'wheat'),
	hero-opinion:             (background: 'oxford'),
	hero-highlight:           (background: 'claret'),

	// Section colors
	section-life-arts:        (all: 'velvet'),
	section-life-arts-alt:    (all: 'candy'),
	section-magazine:         (all: 'oxford'),
	section-magazine-alt:     (all: 'sky'),
	section-house-home:       (all: 'jade'),
	section-house-home-alt:   (all: 'wasabi'),
	section-money:            (all: 'crimson'),
	section-money-alt:        (all: 'white'),

), $o-colors-usecases);

Description

color use cases

These mappings define what we use our colors 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 colors (must be an exact match for a name of a color 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

General

functions

[private] _oColorsGetTextBase

@function _oColorsGetTextBase($color) { ... }

Description

Return either white or black for the text base depending on the background color

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

the name of the background color being used

Stringnone

Requires

Used by

oColorsGetWCAGRating

@function oColorsGetWCAGRating($col1, $col2) { ... }

Description

Checks the contrast ratio and returns the WCAG rating, either AAA, AA, or AA18 meaning text should be at least 18px

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$col1

first color to compare

Colornone
$col2

second color to compare

Colornone

Requires

oColorsCheckContrast

@function oColorsCheckContrast($col1, $col2, $warnings) { ... }

Description

Checks the constrast of two colors and reports based on WCAG guidelines for color contrast

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$col1

first color to compare

Colornone
$col2

second color to compare

Colornone
$warnings

whether this function should throw warnings/errors or just return

Booleannone

Throws

  • This combination of #{$col1} with #{$col2} does not pass WCAG color contrast guidelines.

Requires

Used by

[private] _oColorsHSB

@function _oColorsHSB($hue, $saturation, $brigthness, $alpha: 1) { ... }

Description

Returns the web-safe HSLA color based on HSB/HSV values

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$hue

number between 0-360

Numbernone
$saturation

number between 0-100

Numbernone
$brigthness

number between 0-100

Numbernone
$alpha

number between 0-1

Number1

Used by

oColorsColorBrightness

@function oColorsColorBrightness($color) { ... }

Description

Work out the brightness value in % of a color

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

color value to get brightness from From: https://gist.github.com/jlong/f06f5843104ee10006fe

Colornone

Used by

oColorsColorLuminance

@function oColorsColorLuminance($color) { ... }

Description

Returns the luminance of $color as a float (between 0 and 1) 1 is pure white, 0 is pure black

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

Color

Colornone

Returns

Requires

Used by

oColorsGetContrastRatio

@function oColorsGetContrastRatio($col1, $col2) { ... }

Description

Calculate the contrast ratio between two colors

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$col1

first color to compare

Colornone
$col2

second color to compare Based on the JS in https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/contrast-ratio.js

Colornone

Requires

Used by

pow

@function pow($number, $exponent) { ... }

Description

Power of maths function

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$number

Number

Numbernone
$exponent

Exponent From: https://css-tricks.com/snippets/sass/power-function/

Numbernone

Used by