Chirp Sass Documentation

Ct

Installation

  yarn add @chewy/kib-foundations

Import

  @use '~@chewy/kib-foundations/src/ct';

Functions

@function get-properties($theme: common.$default-theme) { ... }@function get-properties($theme: common.$default-theme) { 
  $theme-map: common.get-theme-map(settings.$themes, $theme);

  @return common.flatten-map($theme-map);
 }

Description

Returns a ct token theme as a flattened map

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$theme`	Name of the theme	`String`	`common.$default-theme`

Returns

Map —

Flattened map

Requires

[function] get-theme-map
[function] flatten-map
[variable] themes

@function get($path...) { ... }@function get($path...) { 
  $property: common.get-property-name('ct', $path...);
  $fallback: -get-fallback($path...);

  @return var(#{$property}, #{$fallback});
 }

Description

Creates a component token custom property with the fallback value from the default theme.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$path...`	Nested path to the component token	`List`	— none

Returns

Customproperty —

CSS var() function with fallback value

Example

Basic usage

@use '~@chewy/kib-foundations/src/ct';

.example {
  background-color: ct.get('field', 'input', 'active', 'bg-color');
}

Swatch token

@use '~@chewy/kib-foundations/src/ct';

.swatch {
  border-color: ct.get('swatch', 'available-yes', 'selected', 'focus', 'border-color');
}

Requires

[function] get-property-name
[function] -get-fallback

@function -get-fallback($path...) { ... }@function -get-fallback($path...) { 
  $theme-map: common.get-theme-map(settings.$themes, common.$default-theme);

  @if not map.has-key($theme-map, $path...) {
    @error "CT token not found: '#{$path}'";
  }

  @return map.get($theme-map, $path...);
 }

Description

Retrieves a ct token fallback value from the default theme

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$path...`	Nested path to the component token	`List`	— none

Returns

Any type —

Fallback value

Throws

CT token not found:

Requires

[function] get-theme-map
[function] get
[variable] themes
[variable] default-theme

Variables

$token-theme: (...);$token-theme: tokens.$chirp-theme;

Description

Full Chirp theme map used by ct helpers.

Type

Map

$themes: (...);$themes: (
  'base': map.get($token-theme, 'ct')
);

Description

Map of ct token themes. Creates a 'base' theme from $chirp-theme.ct.

Type

Map