Chirp Sass Documentation

General

Functions

@function -get-spacing-value($theme: common.$default-theme, $alias) { ... }@function -get-spacing-value($theme: common.$default-theme, $alias) { 
  $theme-map: common.get-theme-map(tokens.$chirp-spacings, $theme);
  $spacings: map.get($theme-map, 'spacing');
  $has-key: map.has-key($spacings, $alias);

  @if $has-key == false {
    @error "Spacing not found: '#{$alias}'";
  }

  $value: map.get($spacings, $alias);

  @return unit.rem($value);
 }

Description

Retrieves a spacing unit from a theme's spacing tokens

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$theme`	Name of the theme	`String`	`common.$default-theme`
`$alias`	Alias of spacing unit	`String`	— none

Returns

Number —

Spacing value from the theme

Throws

Spacing not found:

Requires

[function] get-theme-map
[function] get
[function] rem

Used by

[function] get

@function get-properties($theme: common.$default-theme) { ... }@function get-properties($theme: common.$default-theme) { 
  $theme-map: common.get-theme-map(tokens.$chirp-spacings, $theme);

  @each $key, $value in map.get($theme-map, 'spacing') {
    $theme-map: map.set($theme-map, 'spacing', $key, unit.rem($value));
  }

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

Description

Returns a theme's spacings as a flattened map with kebab-cased names

Parameters

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

Returns

Map —

Final flattened map

Requires

[function] get-theme-map
[function] get
[function] rem
[function] flatten-map

@function get($spacings...) { ... }@function get($spacings...) { 
  $properties: ();

  @each $value in $spacings {
    @if meta.type-of($value) == number or $value == auto {
      $properties: list.append($properties, $value);
    } @else {
      $property: common.get-property-name('spacing', $value);
      $fallback: -get-spacing-value(common.$default-theme, $value);
      $properties: list.append($properties, var(#{$property}, #{$fallback}));
    }
  }

  // Return the plain value if it's just one. If a list with just one
  // value is returned, type functions will return `list` instead of `string`.
  @if list.length($properties) == 1 {
    @return list.nth($properties, 1);
  }

  @return $properties;
 }

Description

Creates a custom property reference from a list of spacing aliases. Number values and auto are allowed for convenience when writing complex shorthand padding or margin properties.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$spacings...`	Comma separated list of spacing units from a theme. Numbers and `auto` are also valid.	`List`	— none

Returns

List —

List of CSS var() function with fallback values

Example

Basic usage

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

.example {
  padding-right: spacing.get('s4');
}

.example-margin {
  margin: spacing.get('s2', auto);
}

.example-padding {
  padding: spacing.get('s3', 0, 's7');
}

Requires

Variables

$preferred-theme: common.$preferred-theme !default;

Description

Name of the preferred theme to look for properties first. If not found it will fallback to common.$default-theme.

Type

String

$themes: (...);$themes: (
  base: tokensWeb.$chirp-typography,
  petmd: tokensPetMD.$chirp-typography
);

Description

Map of typography token themes with type style declarations.

Type

Map

Used by

[function] get-theme-map
[function] get-type-style-with-fallback
[function] get-properties
[function] -get-type-style-value
[function] -get-type-style-property

Css

&--xs { ... }&--xs { @include mixins.font-styles('xs'); }