• 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

When generating CSS var(--token, fallback), the fallback (second argument) must always be resolved from the base theme map (e.g. get-theme-map($themes, $default-theme)) so that when the custom property is undefined, the base value is used consistently.

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-animation-theme-map

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

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

    @if $is-map and $key != 'deprecated' {
      $child-map: prepare-animation-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 animation styles are on the same nesting level for easier access on other functions and mixins. This is different than flatten-map which flattens every animation 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': ...
  ),
)

str-replace

@function str-replace($string, $search, $replace) { ... }@function str-replace($string, $search, $replace) { 
  $index: string.index($string, $search);

  @if $index {
    @return string.slice($string, 1, $index - 1) + $replace +
      str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
  }

  @return $string;
 }
Description

Replace instances of a substring

Parameters
Parameters
NameDescriptionTypeDefault value
$string

The source string to search within

String—
$search

The substring to search for in $string

String—
$replace

Replace instances of $search in $string with this value

String—
Returns
String —

Returns a modified version of $string that has instances of $search replaced with $replace

Used by
Links

prepare-typography-theme-map

@function prepare-typography-theme-map($theme-map) { ... }@function prepare-typography-theme-map($theme-map) { 
  // If the input map has a 'typography' key, extract it first
  // This handles cases where the entire $chirp-theme is passed instead of just the typography section
  @if map.has-key($theme-map, 'typography') {
    $theme-map: map.get($theme-map, 'typography');
  }

  $prepared-map: ();

  // List of category keys that should be skipped (not included in flattened keys)
  // These are intermediate grouping levels in the new token structure
  $category-keys: (
    'utility',
    'product-heading',
    'product-text',
    'editorial-heading',
    'editorial-text'
  );

  @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' {
      // Check if this is a category level that should be skipped
      $is-category: false;
      @each $cat in $category-keys {
        @if $key == $cat {
          $is-category: true;
        }
      }

      @if $is-category {
        // Skip the category level - merge children directly into parent
        $child-map: prepare-typography-theme-map($value);
        @each $child-key, $child-value in $child-map {
          $prepared-map: map.set($prepared-map, $child-key, $child-value);
        }
      } @else {
        // Normal flattening - prepend parent key
        $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': ...
  ),
)
Requires

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

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