Foundations
Functions
get-theme-map
@function get-theme-map($name) { ... }
@function get-theme-map($name) { @if map.has-key($themes, $name) == false { @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
Used by
- [function]
-get-color
- [function]
get-theme-colorset-properties
- [function]
get-type-style
- [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 default theme
Type
String
Used by
- [function]
get-type-style
- [function]
-get-type-style-property
- [function]
get
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