Foundations
Functions
get-theme-map
@function get-theme-map($name) { ... }
@function get-theme-map($name) { $has-key: map.has-key($themes, $name); $is-default: $name == settings.$default-theme; @if $has-key == false { @if $is-default == false { @warn "Theme '#{$name}' not found. Attempting to fallback to '#{settings.$default-theme}' theme"; @return map.get($themes, settings.$default-theme); } @else { @error "Theme '#{$name}' not found."; } } @return map.get($themes, $name); }
Description
Retrieves a theme map
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$name | The name of the theme to lookup | String | — none |
Returns
Map
—Map with theme groups
Throws
Theme
Requires
- [function]
get
- [variable]
themes
- [variable]
default-theme
Used by
- [function]
-get-color
- [function]
get-theme-colorset-properties
- [function]
get-type-style-with-fallback
- [function]
get-properties
- [function]
-get-type-style-value
- [function]
-get-type-style-property
- [function]
-get-spacing-value
- [function]
get-properties
flatten-map
@function flatten-map($map) { ... }
@function flatten-map($map) { $flat-map: (); @each $key, $value in $map { @if meta.type-of($value) == 'map' { $child-map: flatten-map($value); @each $child-key, $child-value in $child-map { $flat-map: map.set($flat-map, '#{$key}-#{$child-key}', $child-value); } } @else { $flat-map: map.set($flat-map, $key, $value); } } @return $flat-map; }
Description
Returns a map with nested keys flattened into a kebab-cased string
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$map | Map to flatten | Map | — none |
Returns
Map
—New flattened map
Used by
- [function]
get-theme-colorset-properties
- [function]
get-properties
- [function]
get-properties
get-property-name
@function get-property-name($path...) { ... }
@function get-property-name($path...) { $property: '#{settings.$property-prefix}'; @each $item, $i in $path { @if $item { $property: '#{$property}-#{$item}'; } } @return $property; }
Description
Creates the custom property name from a design token path
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$path... | Comma separated path to a design token | List | — none |
Returns
String
—Property name
Requires
- [variable]
property-prefix
Used by
- [function]
-get-valid-path
- [mixin]
custom-properties
- [mixin]
link
- [mixin]
custom-properties
- [function]
-get-type-style-property
- [mixin]
custom-properties
- [mixin]
style-as
- [function]
get
Variables
property-prefix
$property-prefix: '--chirp' !default;
default-theme
$default-theme: 'base' !default;
Description
Name of the theme used for fallbacks. Last resort theme before erroring out.
Type
String
Used by
- [function]
get-theme-map
- [function]
get-type-style-with-fallback
- [function]
get
preferred-theme
$preferred-theme: $default-theme !default;
Description
Name of the preferred theme to look for properties first. If not found it will fallback to the the $default-theme.
Type
String
Used by
- [function]
get-type-style-with-fallback
- [function]
-get-type-style-property
baseline-font-size
$baseline-font-size: 10px !default;
Description
Font size baseline. Unit functions use this when converting from pixels into rems. This font size is what should be set to the root html element in percentage from 16px. KibNormalize has this built in.
Type
Number