utils

functions

abstract

@function abstract($concrete) { ... }

Description

Take a numeric value and return its unitless value.
This is useful for using abstract values in calculations.
This function is evaluated at compile time.
Not accessible at runtime.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$concrete`	Numeric / Concrete value from which to derive unitless value	`Any`	— none

Returns

Any type —

Abstract (unitless) value

Example

--hue: 30deg;
$shift: 10%;

--new-hue: calc(#{var.runtime(hue)} * (1 + $shift * 0.01}));
// --new-hue: calc(var(--hue) * (1 + 0.1%));

--new-hue: calc(#{var.runtime(hue)} * (1 + #{abstract($shift) * 0.01}));
// --new-hue: calc(var(--hue) * (1 + 0.1));

Requires

[external] math.div

Used by

[mixin] new
[mixin] presets

hardlimit

@function hardlimit($prop, $limit: 0) { ... }

Description

Compares a CSS custom property to a limit and returns 1 or 0.
If the property is greater than the limit, 1 is returned.
If the property is less than the limit, 0 is returned.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$prop`	CSS custom property under evaluation	`String`	— none
`$limit`	Limit to compare against. If 0, returns 1 if property is greater than 0. It should have same unit as the property.	`String` or `Number`	`0`

Returns

Number —

CSS clamp notation implementing the comparison

Requires

[function] runtime

blend

@function blend($flag, $true, $false) { ... }

Description

Blends two values based on a flag.
true and false values should have same unit.
Flag should be unitless.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$flag`	Flag to blend	`Number`	— none
`$true`	Value to return if flag is 1	`Number`	— none
`$false`	Value to return if flag is 0	`Number`	— none

Returns

String —

CSS notation for blended value

runtime

@function runtime($prop, $prefix: tokens.$prefix, $fallback: null) { ... }

Description

Returns var notation for a CSS custom property.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$prop`	CSS custom property to retrive	`String`	— none
`$prefix`	Prefix to be applied to the property. Set to false or null to exclude prefix.	`String`	`tokens.$prefix`
`$fallback`	Fallback value to use if property is not defined. If not provided, returns var() without fallback.	`Any`	`null`

Returns

String —

var notation for the CSS custom property

Requires

[external] tokens.$prefix

Used by

[function] hardlimit
[mixin] presets

mixins

inject

@mixin inject($vars, $prefix: tokens.$prefix) { ... }

Description

Inject a map of key-value pairs as CSS custom properties into the CSS scope.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$vars`	Key-value pairs to inject	`Map`	— none
`$prefix`	Prefix to be applied to the property. Set to false or null to exclude prefix.	`String`	`tokens.$prefix`

Requires

[external] tokens.$prefix

wrapper

mixins

new

@mixin new($name, $color) { ... }

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
`$color`	Value of the color. Can be any valid CSS color.	`Color`	— none

Example

@use '@dwijbavisi/mood-swings';
:root {
    @include mood-swings.new('my-color', #1f7a4d);
}

Requires

[function] abstract
[external] api.inject

Used by

[mixin] presets

presets

@mixin presets($accent: tokens.$accent, $variant: tokens.$variant, $mood: tokens.$mood, $error: tokens.$error, $warning: tokens.$warning, $success: tokens.$success) { ... }

Description

Injects preset color CSS custom properties into the css scope

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$accent`	Accent color for the color scheme	`Color`	`tokens.$accent`
`$variant`	Variant color for the color scheme	`Color`	`tokens.$variant`
`$mood`	Mood color for the color scheme	`Color`	`tokens.$mood`
`$error`	Error color for the color scheme	`Color`	`tokens.$error`
`$warning`	Warning color for the color scheme	`Color`	`tokens.$warning`
`$success`	Success color for the color scheme	`Color`	`tokens.$success`

Example

@use '@dwijbavisi/mood-swings';

:root {
    @include mood-swings.presets;
}

.primary {
    background-color: mood-swings.runtime('primary');
    color: mood-swings.runtime('on-primary');
}

Requires

[mixin] new
[function] abstract
[function] runtime
[external] api.inject-hsl
[external] api.inject
[external] api.mood-flag
[external] api.blend-mood
[external] api.runtime
[external] tokens.$accent
[external] tokens.$variant
[external] tokens.$mood
[external] tokens.$error
[external] tokens.$warning
[external] tokens.$success
[external] tokens.$abstract

functions

runtime

@function runtime($name) { ... }

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	`String`	— none

Example

@use '@dwijbavisi/mood-swings';
:root {
    @include mood-swings.presets;
}
body {
    background-color: mood-swings.runtime('surface');
    color: mood-swings.runtime('on-surface');
}

@use '@dwijbavisi/mood-swings';
:root {
    @include mood-swings.new('notify', orange);
}
.cookies {
    background-color: mood-swings.runtime('notify-container');
    color: mood-swings.runtime('on-notify-container');
}

Requires

[external] api.runtime