api

mixins

mood-flag

@mixin mood-flag() { ... }

Description

Injects a mood-flag CSS custom property into the CSS scope.
If mood-flag is 0, the mood color does not blend with the base colors.
If mood-flag is 1, the mood color blends with the base colors.

Parameters

None.

Example

// Given that the following CSS custom properties are defined:
// --mood-h: 0;
// --mood-s: 100;
// --mood-l: 50;
@include mood-flag;

// results into
--mood--flag: clamp(...);

Requires

[external] utils.inject
[external] utils.hardlimit

inject-color

@mixin inject-color($name) { ... }

Description

Inject a color CSS custom property into the CSS scope.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	CSS custom property name for color	`String`	— none

Example

// Given that the following CSS custom properties are defined:
// --my-color-h: 0;
// --my-color-s: 100;
// --my-color-l: 50;
@include inject-color('my-color');

// results into
--my-color: hsl(var(--my-color-h) var(--my-color-s) var(--my-color-l));

Requires

[function] runtime
[external] utils.inject

Used by

[mixin] inject-hsl
[mixin] inject-on
[mixin] inject-container

inject-hsl

@mixin inject-hsl($name, $h, $s, $l) { ... }

Description

Inject a color CSS custom property into the CSS scope.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	CSS custom property name for color	`String`	— none
`$h`	Hue. Should be between 0 and 360	`Number`	— none
`$s`	Saturation. Should be between 0 and 100	`Number`	— none
`$l`	Lightness. Should be between 0 and 100	`Number`	— none

Example

// Following:
@include inject-hsl('my-color', 0, 100, 50);

// results into
--my-color-h: 0;
--my-color-s: 100;
--my-color-l: 50;
--my-color: hsl(var(--my-color-h) var(--my-color-s) var(--my-color-l));

Requires

[mixin] inject-color
[external] utils.inject

Used by

[mixin] inject

inject-on

@mixin inject-on($name, $shift: tokens.$on-shift) { ... }

Description

Inject an on-color (text color) CSS custom property into the CSS scope.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	CSS custom property name for color	`String`	— none
`$shift`	Background to text lightness contrast. Should be between 0 to 50.	`Number`	`tokens.$on-shift`

Example

// Given that the following CSS custom properties are defined:
// --my-color-h: 0;
// --my-color-s: 100;
// --my-color-l: 50;
@include inject-on('my-color');

// results into
// --on-my-color-h: 0;
// --on-my-color-s: 100;
// --on-my-color--sign: (...);
// --on-my-color-l: calc(...);
// --on-my-color: hsl(...);

Requires

[function] runtime
[mixin] inject-color
[external] utils.inject
[external] utils.hardlimit
[external] utils.runtime
[external] tokens.$on-shift

Used by

[mixin] inject

inject-container

@mixin inject-container($name, $shift: tokens.$container-shift) { ... }

Description

Injects a container color CSS custom property into the CSS scope.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	CSS custom property name for color	`String`	— none
`$shift`	Background to container lightness contrast. Should be between 0 to 50.	`Number`	`tokens.$container-shift`

Example

// Given that the following CSS custom properties are defined:
// --my-color-h: 0;
// --my-color-s: 100;
// --my-color-l: 50;
@include inject-container('my-color');

// results into
// --my-color-container-h: 0;
// --my-color-container-s: 100;
// --my-color-container--sign: (...);
// --my-color-container-l: calc(...);
// --my-color-container: hsl(...);

Requires

[function] runtime
[mixin] inject-color
[external] utils.inject
[external] utils.hardlimit
[external] utils.runtime
[external] tokens.$container-shift

Used by

[mixin] inject

inject

@mixin inject($name, $h, $s, $l) { ... }

Description

Injects following CSS custom properties into the CSS scope.

color
on-color
container-color
on-container-color

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	CSS custom property name for color	`String`	— none
`$h`	Hue. Should be between 0 and 360	`Number`	— none
`$s`	Saturation. Should be between 0 and 100	`Number`	— none
`$l`	Lightness. Should be between 0 and 100	`Number`	— none

Example

// Given the following:
@include inject('my-color', 0, 100, 50);

// results into
// --my-color-h: 0;
// --my-color-s: 100;
// --my-color-l: 50;
// --my-color: hsl(...);
// --on-my-color-h: 0;
// --on-my-color-s: 100;
// --on-my-color--sign: (...);
// --on-my-color-l: calc(...);
// --on-my-color: hsl(...);
// --my-color-container-h: 0;
// --my-color-container-s: 100;
// --my-color-container--sign: (...);
// --my-color-container-l: calc(...);
// --my-color-container: hsl(...);
// --on-my-color-container-h: 0;
// --on-my-color-container-s: 100;
// --on-my-color-container--sign: (...);
// --on-my-color-container-l: calc(...);
// --on-my-color-container: hsl(...);

Requires

[mixin] inject-hsl
[mixin] inject-on
[mixin] inject-container

functions

blend-mood

@function blend-mood($name, $prop, $ratio: tokens.$blend-ratio) { ... }

Description

Blends a base color with the mood color.
This property works at runtime.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	CSS custom property name for color	`String`	— none
`$prop`	Sub-property of the color to be blended.	`String`	— none
`$ratio`	Base color to mood blend ratio.	`Number`	`tokens.$blend-ratio`

Returns

String —

Value of the custom property

Example

// Given that the following CSS custom properties are defined:
// --my-color-h: 0;
// --my-color-s: 100;
// --my-color-l: 50;

@include api.inject-hsl(
    'my-color-blended',
    @api.blend-mood('my-color', 'h'), // default ratio
    @api.blend-mood('my-color', 's', $ratio: 0.2), // custom ratio
    @api.blend-mood('my-color', 'l', $ratio: 0.6)  // custom ratio
);

// results into
--my-color-blended-h: calc(...);
--my-color-blended-s: calc(...);
--my-color-blended-l: calc(...);
--my-color-blended: hsl(...);

Requires

[function] runtime
[external] utils.blend
[external] utils.runtime
[external] tokens.$blend-ratio

runtime

@function runtime($name, $prop: null) { ... }

Description

Returns var notation for a CSS custom property.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	CSS custom property name for color to retrive	`String`	— none
`$prop`	Sub-property of the color	`'h', 's', 'l'`	`null`

Returns

String —

var notation for the CSS custom property

Requires

[external] utils.runtime

Used by

[function] blend-mood
[mixin] inject-color
[mixin] inject-on
[mixin] inject-container