Chirp Sass Documentation

Border

Installation

  yarn add @chewy/kib-foundations

Import

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

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 border tokens 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($alias, $path...) { ... }@function get($alias, $path...) { 
  $theme-map: common.get-theme-map(settings.$themes, common.$default-theme);
  $property: null;
  $fallback: null;

  // If multiple arguments are provided, use nested map traversal
  @if length($path) > 0 {
    $property: common.get-property-name('border', $alias, $path...);
    $fallback: -get-nested-fallback($alias, $path...);
  } @else {
    // Single argument - preserve original behavior
    $property: common.get-property-name('border', $alias);
    $fallback: -get-fallback($alias);
  }

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

Description

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

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$alias`	Border token alias	`String`	— none
`$path...`	Optional path arguments for nested token access	`List`	— none

Returns

Customproperty —

CSS var() function with fallback value

Example

Basic usage

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

.example {
  border-radius: border.get('br01');
}

Nested token access

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

.example {
  border-width: border.get('ct', 'swatch', 'border-width', 'selected');
}

Requires

[function] get-theme-map
[function] get-property-name
[function] -get-nested-fallback
[function] -get-fallback
[variable] themes
[variable] default-theme

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

  @if not $has-key {
    @error "Border token not found: '#{$alias}'";
  }

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

Description

Retrieves a border token fallback value from the default theme

Parameters

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

Returns

Number —

Fallback value in rem unit

Throws

Border token not found:

Requires

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

Used by

[function] get

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

  @if not $has-key {
    @error "Border token not found: '#{$alias}' with path '#{$path}'";
  }

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

Description

Retrieves a nested border token fallback value from the default theme

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$alias`	Base alias	`String`	— none
`$path...`	Nested path arguments	`List`	— none
`$theme`	Name of the theme	`String`	`common.$default-theme`

Returns

Number —

Fallback value in rem unit

Throws

Border token not found:

Requires

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

Used by

[function] get

@function -get-themes($tokens) { ... }@function -get-themes($tokens) { 
  $themes: ();

  @each $name, $theme in $tokens {
    $themes: map.set($themes, $name, map.get($theme, 'border'));
  }

  @return $themes;
 }

Description

Returns only border groups from spacing tokens map. Defined here to avoid a module loop.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$tokens`	Spacing tokens map	`Map`	— none

Returns

Map —

Border themes definitions map

Requires

[function] get
[variable] themes

Mixins

@mixin custom-properties($overrides) { ... }@mixin custom-properties($overrides) { 
  $border-properties: functions.get-properties($theme);

  @if $overrides {
    $border-properties: map.deep-merge($border-properties, $overrides);
  }

  @each $key, $value in $border-properties {
    #{common.get-property-name('border', $key)}: $value;
  }
 }

Description

Generates CSS Custom Properties for a Chirp's theme set of border tokens

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$overrides`	Map of overrides that should match values within the theme map	`Map`	— none

Example

Apply all available properties to the :root of the page

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

:root {
  @include border.custom-properties;
}

Apply properties to a selector

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

.chirp-theme {
  @include border.custom-properties;
}

Override a property

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

.custom-properties {
  @include border.custom-properties($overrides: ('br02': 1.2rem));
}

Requires

[function] get-properties
[function] get-property-name

Variables

$themes: (...);$themes: -get-themes(tokens.$chirp-spacings);

Description

Map of border token themes

Type

Map