Return the CSS color for a palette color name
Returns a color based on the background context and base color at the supplied percentage
Return the defined palette color name for a use case / property combination
Return the CSS color name of the first defined use case in a prioritised list for a use case / property combination
// 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')); }Returns a customised version of our shade-able colors defined in $o-colors-tints
Returns a text color based on the background and an opacity percentage the color should appear at
Add a custom palette color
@include oColorsSetColor('grey-tint20': #cccccc);Add a custom use case property
@include oColorsSetUseCase(email, text, 'grey-tint5');Output property declarations for all defined properties for the specified use case
.my-thing {
@include oColorsFor(custom-box box);
}
.my-other-thing {
@include oColorsFor(custom-box box, background border);
}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.
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
Checks the contrast ratio and returns the WCAG rating, either AAA, AA, or AA18 meaning text should be at least 18px
Checks the constrast of two colors and reports based on WCAG guidelines for color contrast
Work out the brightness value in % of a color
Returns the luminance of $color as a float (between 0 and 1)
1 is pure white, 0 is pure black
Calculate the contrast ratio between two colors