• No results

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
NameDescriptionTypeDefault value
$name

The name of the theme to lookup

String—
Returns
Map —

Map with theme groups

Throws

  • Theme

Requires
Used by

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
NameDescriptionTypeDefault value
$map

Map to flatten

Map—
Returns
Map —

New flattened map

Used by

prepare-typography-theme-map

@function prepare-typography-theme-map($theme-map) { ... }@function prepare-typography-theme-map($theme-map) { 
  $prepared-map: ();

  @each $key, $value in $theme-map {
    $is-map: meta.type-of($value) == 'map';

    @if $is-map and not map.has-key($value, 'font-family') and $key != 'deprecated' {
      $child-map: prepare-typography-theme-map($value);
      @each $child-key, $child-value in $child-map {
        $prepared-map: map.set($prepared-map, '#{$key}-#{$child-key}', $child-value);
      }
    } @else {
      $prepared-map: map.set($prepared-map, $key, $value);
    }
  }

  @return $prepared-map;
 }
Description

Flattens map so all type styles are on the same nesting level for easier access on other functions and mixins. This is different than flatten-map which flattens every type style property down to the root level.

Parameters
Parameters
NameDescriptionTypeDefault value
$theme-map—Map—
Returns
Map —

Prepared map

Example

Original map before being processed

(
  'editorial': (
    'text-1': (
      'font-size': ...
    ),
    'text-2': (
      'font-size': ...
    )
  )
)

Resulting map after being processed

(
  'editorial-text-1': (
    'font-size': ...
  ),
  'editorial-text-2': (
    'font-size': ...
  ),
)

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
NameDescriptionTypeDefault value
$path...

Comma separated path to a design token

List—
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

Used by

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