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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

The name of the theme to lookup

String none
Returns
Map

Map with theme groups

Throws
  • Theme

Requires

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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

Map to flatten

Map none
Returns
Map

New flattened map

Used by

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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$path...

Comma separated path to a design token

List none
Returns
String

Property name

Requires
Used by

Variables

property-prefix

$property-prefix: '--chirp' !default;
Description

Default prefix for CSS Custom Properties

Type

String

Used by

default-theme

$default-theme: 'base' !default;
Description

Name of the theme used for fallbacks. Last resort theme before erroring out.

Type

String

Used by

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

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