oColorsGetPaletteColor(name)

Return the CSS color for a palette color name

parameter type default description
name String

Returns

Links

oColorsMix(...)

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

parameter type default description
background (optional) String paper palette name of background color
color (optional) String black palette name of color
percentage (optional) Number 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 String
property String '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 list
property (optional) String all
options (optional) map ('default': false) default: fallback value (false, null, or one of $o-colors-palette)

Returns

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 String the name of the color to be shaded
brightness Number 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 Color the hex color of the background the text will appear on
opacity (optional) Number 100 the opacity percentage the text color should appear at

Returns

Links

oColorsSetColor(name, color)

Add a custom palette color

parameter type default description
name String Name in the palette
color color Color (rgb, hex, hsl…)

Example

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

Links

oColorsSetUseCase(...)

Add a custom use case property

parameter type default description
usecase String Name of the use case
property String Property it applies to
color String 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 String | list
propertyList (optional) String | list 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

o-colors-usecases

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

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 Color first color to compare
col2 Color 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 Color first color to compare
col2 Color second color to compare
warnings Boolean 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 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 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 Color first color to compare
col2 Color second color to compare Based on the JS in https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/contrast-ratio.js

Returns

Links

pow(number, exponent)

Power of maths function

parameter type default description
number Number Number
exponent Number Exponent From: https://css-tricks.com/snippets/sass/power-function/

Returns

Links