• No results

Border

Installation

  yarn add @chewy/kib-foundations

Import

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

Functions

get-properties

@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
NameDescriptionTypeDefault value
$theme

Name of the theme

Stringcommon.$default-theme
Returns
Map —

Flattened map

Requires
Used by

get

@function get($alias) { ... }@function get($alias) { 
  $theme-map: common.get-theme-map(settings.$themes, common.$default-theme);
  $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
NameDescriptionTypeDefault value
$alias

Border token alias

String—
Returns
Customproperty —

CSS var() function with fallback value

Example

Basic usage

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

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

-get-fallback

@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
NameDescriptionTypeDefault value
$alias

Alias of spacing unit

String—
$theme

Name of the theme

Stringcommon.$default-theme
Returns
Number —

Fallback value in rem unit

Throws

  • Border token not found:

Requires
Used by

-get-themes

@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
NameDescriptionTypeDefault value
$tokens

Spacing tokens map

Map—
Returns
Map —

Border themes definitions map

Requires

Mixins

custom-properties

@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
NameDescriptionTypeDefault value
$overrides

Map of overrides that should match values within the theme map

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

Variables

themes

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

Map of border token themes

Type

Map

Used by