oColorsGetPaletteColor(name)

Return the CSS color for a palette color name

parameter type default description
name

Returns

Links

oColorsMix(...)

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

parameter type default description
background (optional) paper palette name of background color
color (optional) black palette name of color
percentage (optional) 60 percentage opacity of the color over the background

Returns

Links

oColorsGetUseCase(usecase, property)

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

parameter type default description
usecase
property 'text', 'background', 'border' or 'all'

Returns

Links

oColorsGetColorFor(...)

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

parameter type default description
namelist
property (optional) all
options (optional) ('default': false) default: fallback value (false, null, or oColorsGetPaletteColor($palette-color));

Returns

String | Color | Null

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

Links

oColorsGetTint(color, brightness)

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

parameter type default description
color the name of the color to be shaded
brightness the brightness value of the new color

Returns

Links

oColorsGetTextColor(background, opacity)

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

parameter type default description
background the hex color of the background the text will appear on
opacity (optional) 100 the opacity percentage the text color should appear at

Returns

Links

oColorsSetColor(...)

Add a custom palette color

parameter type default description
name Name in the palette
color Color (rgb, hex, hsl…)
color List (to signal deprecated tints for internal brand)

Examples

Example #1

 @include oColorsSetColor('grey-tint-20', #cccccc);

The internal and external palette do not share all colours, and we need  to
indicate that a particular color or colors will be deprecated for the internal
palette in the future

Example #2

scss

Links

oColorsSetUseCase(...)

Add a custom use case property

parameter type default description
usecase Name of the use case
property Property it applies to
color One of $o-colors-palette

Example

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

Links

oColorsFor(useCaseList, propertyList)

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

parameter type default description
useCaseList
propertyList (optional) all

Example

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

Links

o-colors-palette

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.

Links

oColorsGetWCAGRating(col1, col2)

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

parameter type default description
col1 first color to compare
col2 second color to compare

Returns

Links

oColorsCheckContrast(...)

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

parameter type default description
col1 first color to compare
col2 second color to compare
warnings whether this function should throw warnings/errors or just return

Returns

Links

oColorsColorBrightness(color)

Work out the brightness value in % of a color

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

Returns

Links

oColorsColorLuminance(color)

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

parameter type default description
color Color

Returns

Number - From: https://css-tricks.com/snippets/sass/luminance-color-function/

Links

oColorsGetContrastRatio(col1, col2)

Calculate the contrast ratio between two colors

parameter type default description
col1 first color to compare
col2 second color to compare Based on the JS in https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/contrast-ratio.js

Returns

Links