SassDoc: o-colors

oColors(opts)

Output o-colors CSS.

Examples

Example #1

all o-colors styles.

@include oColors();

Example #2

only o-colors CSS custom properties ("CSS variables") for palette colours and usecases.

@include oColors($opts: (
	'palette-custom-properties': true,
	'usecase-custom-properties': true
));

Example #3

only o-colors classes for usecases.

@include oColors($opts: (
	'usecase-classes': true
));

Links

• "oColors" mixin on Github

oColorsByName(color-name)

Return the CSS color for a palette color name.

Returns

Links

• "oColorsByName" function on Github

oColorsByUsecase(...)

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

Returns

Links

• "oColorsByUsecase" function on Github

oColorsGetTone(color-name, brightness)

Returns a brighter or darker tone of a colour, where the hue remains the same but the saturation and luminance changes.

Not all our colours allow tones. If a colour cannot be toned an error is thrown. You may however mix the colour with another supported colour.

Returns

Links

• "oColorsGetTone" function on Github

oColorsGetToneDetails(color)

Figure out if a given colour is a tone. If it is a tone return the original colour name and its tone brightness, otherwise return null.

Returns

Example

the tone brightness of 'claret-80'

$tone-details: oColorsGetToneDetails('claret-80');
$color-name: map-get($tone-details, 'color-name'); // claret
$brightness: map-get($tone-details, 'brightness'); // 80

Links

• "oColorsGetToneDetails" function on Github

oColorsMix(...)

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

Returns

Links

• "oColorsMix" function on Github

oColorsGetTextColor(...)

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

Returns

Links

• "oColorsGetTextColor" function on Github

oColorsColorBrightness(color)

Work out the brightness value in % of a color From: https://gist.github.com/jlong/f06f5843104ee10006fe

Returns

Links

• "oColorsColorBrightness" function on Github

oColorsColorLuminance(color)

Returns the luminance of $color as a float (between 0 and 1) 1 is pure white, 0 is pure black. From: https://css-tricks.com/snippets/sass/luminance-color-function/

Returns

Links

• "oColorsColorLuminance" function on Github

oColorsGetContrastRatio(color-a, color-b)

Calculate the contrast ratio between two colours.

Returns

Links

• "oColorsGetContrastRatio" function on Github

oColorsGetPaletteDetails

Get a list of palette colour details, including the colour name.

Returns

Links

• "oColorsGetPaletteDetails" function on Github

oColorsSetColor(...)

Define a new palette color.

Examples

Example #1

Add a custom palette color

@include oColorsSetColor($color-name: 'o-example/pink', $color-value: #ff69b4);

Example #2

Deprecate a set colour (removing a color from the palette is considered a breaking change and requires a major release).

@include oColorsSetColor (
	$color-name: 'o-example/pink',
	$color-value #ff69b4,
	$opts: (
		'allow-tones': true,
		'deprecated': 'your deprecation message'
	)
);

Links

• "oColorsSetColor" mixin on Github

oColorsSetUseCase(...)

Add a custom use case property.

Examples

Example #1

a 'stripe' usecase with background, text, and border colour within a component 'o-example'.

@include oColorsSetUseCase('o-example/stripe', (
	'text': 'white',
	'background': 'black',
	'border': 'black-50'
));

Example #2

a custom colour to a 'stripe' usecase with background.

@include oColorsSetColor('o-example/my-pink', #ff69b4);
@include oColorsSetUseCase('o-example/stripe', (
	'background': 'o-example/my-pink',
));

Example #3

all usecase properties (removing a colour usecase is a breaking change).

@include oColorsSetUseCase('o-example/stripe', (
	'text': 'white',
	'background': 'black',
	'border': 'black-50'
), (deprecated: 'o-example has no stripes anymore.'));

Example #4

particular usecase properties e.g. "border" (removing a usecase property is a breaking change).

  @include oColorsSetUseCase('o-example/stripe', (
   		'text': 'white',
   		'background': 'black',
   		'border': 'black-50',
), ('deprecated': ('border': 'o-example stripes have no border anymore.')));

Links

• "oColorsSetUseCase" mixin on Github

o-colors-is-silent

Silent mode

Links

• "o-colors-is-silent" variable on Github