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...) { 
  $property: null;
  $fallback: null;

  // If multiple arguments are provided, use nested map traversal
  @if list.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. Resolves from the legacy border.* alias tree first, then falls back to top-level ct border tokens when needed for backwards compatibility.

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

@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);

  @if map.has-key($theme-map, $alias, $path...) {
    @return map.get($theme-map, $alias, $path...);
  }

  @if $alias == 'ct' {
    @each $segment in $path {
      @if string.index($segment, 'border-') == 1 {
        @if map.has-key(settings.$token-theme, $alias, $path...) {
          @return map.get(settings.$token-theme, $alias, $path...);
        }
      }
    }
  }

  @error "Border token not found: '#{$alias}' with path '#{$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
[variable] token-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($theme, $overrides: null) { ... }@mixin custom-properties($theme, $overrides: null) { 
  @warn "border.custom-properties() is deprecated. Import CSS theme files from @chewy/chirp-design-tokens/web/css (for example, theme-base-light.css and theme-base-dark.css).";

  @if $theme != common.$default-theme and $theme != 'base' {
    @warn "The $theme parameter is deprecated. Non-base themes will be handled via separate CSS theme files.";
  }

  $border-properties: functions.get-properties();

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

  @each $key, $value in $border-properties {
    @if meta.type-of($value) != 'map' {
      #{common.get-property-name($key)}: $value;
    }
  }
 }

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$theme`	Unused, retained for backwards compatibility.	`String`	— none
`$overrides`	Map that overrides matching custom property values.	`Map`	`null`

Requires

[function] get-properties
[function] get-property-name
[variable] default-theme

Variables

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

Description

Full Chirp theme map used by border helpers.

Type

Map

Used by

[function] -get-nested-fallback

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

Description

Map of border token themes Adapted for new token structure: creates a 'base' theme from $chirp-theme.border

Type

Map

Used by

[function] get-properties
[function] -get-fallback
[function] -get-nested-fallback
[function] -get-themes
[function] get-properties
[function] -get-fallback
[function] get-theme-map
[function] -get-themes
[function] weight-variant-token-exists
[function] type-style-exists
[function] get-type-style-with-fallback
[function] get-type-style-variant-weight
[function] get-properties
[function] -get-type-style-value
[function] -get-type-style-property
[mixin] style-as
[function] -get-spacing-value
[function] get-properties