custom-design-tokens-functions
functions
css-var
@function css-var($name, $fallback) { ... }Description
Return a CSS custom property reference for a design token. Throws an error if the token is missing.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | Token name (e.g. surface-primary-faded). | String | — none |
$fallback | Optional fallback value. | String or Null | — none |
Returns
String —CSS var() reference.
Example
.example {
color: css-var(surface-primary-faded);
color: css-var(surface-primary-faded, #fff);
}Throws
design token not found in design token list
css-prop-name
@function css-prop-name($name) { ... }Description
Return a CSS custom property name for a design token. Throws an error if the token is missing.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | Token name (e.g. surface-primary-faded). | String | — none |
Returns
String —CSS custom property name.
Example
.example {
#{css-prop-name(space-md)}: #{css-var(space-xl)};
}Throws
design token not found in design token list
token-value
@function token-value($map, $name) { ... }Description
Return a Sass value from the flat token map. Throws an error if the token is missing.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$map | Flat token map (defaults to base tokens). | Map | — none |
$name | Token name (e.g. surface-primary-faded). | String | — none |
Returns
Token value.
Example
.example {
margin-inline: token-value(space-grid-md);
}@use "tokens-desktop" as tokensDesktop;
.example {
margin-inline: token-value(tokensDesktop.$tokens-desktop, space-grid-md);
}Throws
token-value() requires a token name.
design token not found in design token list
css-var
@function css-var($name, $fallback) { ... }Description
Return a CSS custom property reference for a design token. Throws an error if the token is missing.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | Token name (e.g. surface-primary-faded). | String | — none |
$fallback | Optional fallback value. | String or Null | — none |
Returns
String —CSS var() reference.
Example
.example {
color: css-var(surface-primary-faded);
color: css-var(surface-primary-faded, #fff);
}Throws
design token not found in design token list
css-prop-name
@function css-prop-name($name) { ... }Description
Return a CSS custom property name for a design token. Throws an error if the token is missing.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$name | Token name (e.g. surface-primary-faded). | String | — none |
Returns
String —CSS custom property name.
Example
.example {
#{css-prop-name(space-md)}: #{css-var(space-xl)};
}Throws
design token not found in design token list
token-value
@function token-value($map, $name) { ... }Description
Return a Sass value from the flat token map. Throws an error if the token is missing.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$map | Flat token map (defaults to base tokens). | Map | — none |
$name | Token name (e.g. surface-primary-faded). | String | — none |
Returns
Token value.
Example
.example {
margin-inline: token-value(space-grid-md);
}@use "tokens-desktop" as tokensDesktop;
.example {
margin-inline: token-value(tokensDesktop.$tokens-desktop, space-grid-md);
}Throws
token-value() requires a token name.
design token not found in design token list
tools
functions
map-deep-get
@function map-deep-get($map, $keys...) { ... }Description
Fetch nested keys and test if map got all $keys nested with each others
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$map | Map | Map | — none |
$keys | Keys to test | Arglist | — none |
Throws
ERROR. No property found for
#{$key}in map. Property omitted.
Author
Hugo Giraudel
if-important
@function if-important($important) { ... }Description
Add in mixin to include "!important" in argument list if needed
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$important | — none | String | — none |
Used by
- [mixin]
custom-prop-fallback - [mixin]
custom-prop-fallback - [mixin]
custom-prop-fallback - [mixin]
custom-prop-fallback
General
functions
hexToRGB
@function hexToRGB() { ... }Description
convert hex color code to RGB without the need for duplication
Parameters
None.
mixins
add-backdrop-filter
@mixin add-backdrop-filter($blur: 16px) { ... }Description
check for backdrop filter support
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$blur | sets the blur spread for the targeted element | String | 16px |
custom-prop-fallback
@mixin custom-prop-fallback($prop, $renderedValue, $renderedValueCustomProp:: $renderedValue, $important: false, $negativeValue: false) { ... }Description
Mixin used to implement CSS variables for themes
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$prop | CSS property | Property | — none |
$renderedValue | CSS property value | Type | — none |
$renderedValueCustomProp: | CSS custom prop name | Value | $renderedValue |
$important | include important if needed | Type | false |
$negativeValue | change value to its negative counterpart if needed | Type | false |
Example
customPropColorFallback
@include customPropColorFallback('background-color', $primary-10, bg-color)
// background-color: red;Requires
- [function]
if-important - [function]
if-important - [function]
if-important - [function]
if-important
css
.#{$namespace}centeredBgi, .centeredBgi
.#{$namespace}centeredBgi,
.centeredBgi { ... }Description
Use