Chirp Sass Documentation

Color

Installation

  yarn add @chewy/kib-foundations

Import

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

Functions

@function get-color-property($path...) { ... }@function get-color-property($path...) { 
  @return functions.get-property($path...);
 }

Description

Creates a custom property reference from a color path

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$path...`	Comma separated path to a theme's color	`List`	— none

Returns

String —

CSS var() function with a fallback color

Example

Basic usage

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

.inverse-content {
  background-color: color.get-property('ui-bg', '06');
  color: color.get-property('text', 'inverse');
}

Used by

[mixin] icon-circle

@function -get-color($theme: common.$default-theme, $colorset: settings.$default-colorset, $path...) { ... }@function -get-color($theme: common.$default-theme, $colorset: settings.$default-colorset, $path...) { 
  $theme-map: common.get-theme-map(tokens.$chirp-themes, $theme);
  $is-default: $colorset == settings.$default-colorset;
  $has-key: map.has-key($theme-map, $colorset, $path...);

  @if $has-key == false {
    @if $is-default == false {
      @warn "Attempting to fallback to '#{settings.$default-colorset}' colors";
      @return -get-color($theme, settings.$default-colorset, $path...);
    } @else {
      @error "Color not found: '#{$path}'";
    }
  }

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

Description

Retrieves a color from a theme

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$theme`	The name of the theme to lookup	`String`	`common.$default-theme`
`$colorset`	'light' and 'dark' colorset	`String`	`settings.$default-colorset`
`$path...`	Comma separated path to a theme's color	`List`	— none

Returns

Color —

Color value from the theme

Throws

Color not found:

Requires

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

@function -get-valid-path($path...) { ... }@function -get-valid-path($path...) { 
  $property: common.get-property-name($path...);

  @if map.has-key(settings.$deprecated-property-names, $property) {
    $new-path: map.get(settings.$deprecated-property-names, $property);
    @warn "Color '#{$path}' is deprecated, please switch to '#{$new-path}'";
    @return $new-path;
  }

  @return $path;
 }

Description

Checks for deprecated color paths and if so, updates to the correct color path

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$path...`	Comma separated path to a theme's color	`List`	— none

Returns

List —

Comma separated path to a theme's color

Requires

[function] get-property-name
[function] get
[variable] deprecated-property-names

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

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

Description

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

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$colorset`	'light' or 'dark' colorset	`String`	`settings.$default-colorset`
`$theme`	The name of the theme to lookup	`String`	`common.$default-theme`

Returns

Map —

New flattened map

Requires

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

Used by

[mixin] custom-properties

@function get($path...) { ... }@function get($path...) { 
  @return get-property($path...);
 }

Description

Creates a custom property reference from a color path

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$path...`	Comma separated path to a theme's color	`List`	— none

Returns

String —

CSS var() function with a fallback color

Example

Basic usage

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

.inverse-content {
  background-color: color.get('ui-bg', '06');
  color: color.get('text', 'inverse');
}

Mixins

@mixin baseline-properties($args...) { ... }@mixin baseline-properties($args...) { 
  @include mixins.custom-properties($args...);
 }

Description

Generates CSS Custom Properties for a theme's colorset

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$args...`	(optional) Pass the following args: `colorset`, `theme`	`List`	— none

Example

Apply all available properties to the :root of the page

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

:root {
  @include color.baseline-properties;
}

Apply properties to a selector

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

.chirp-colors {
  @include color.baseline-properties;
}

Apply properties from the dark colorset

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

.chirp-colors-dark {
  @include color.baseline-properties('dark');
}

@mixin custom-properties($colorset, $theme, $overrides) { ... }@mixin custom-properties($colorset, $theme, $overrides) { 
  $flat-map: functions.get-theme-colorset-properties($colorset, $theme);

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

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

Description

Generates CSS Custom Properties for a theme's colorset

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$colorset`	'light' or 'dark' colorset	`String`	— none
`$theme`	The name of the theme to lookup	`String`	— none
`$overrides`	Map that overrides any matching values within the theme	`Map`	— none

Example

Apply all available properties to the :root of the page

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

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

Apply properties to a selector

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

.chirp-colors {
  @include color.custom-properties;
}

Apply properties from the dark colorset

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

.chirp-colors-dark {
  @include color.custom-properties('dark');
}

Override a property in the colorset

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

.chirp-colors-custom {
  @include color.custom-properties($overrides:( 'ui-bg-primary': #f6f6f6 ));
}

Requires

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

Variables

$default-colorset: 'light' !default;

Description

Name of the default colorset

Type

String

Used by

[function] -get-color

$deprecated-property-names: (...);$deprecated-property-names: (
  '--chirp-link-default-primary': (
    'link',
    'active',
    'primary'
  ),
  '--chirp-link-default-secondary': (
    'link',
    'active',
    'secondary'
  ),
  '--chirp-link-default-inverse': (
    'link',
    'active',
    'inverse'
  )
);

Description

Deprecated color paths

Type

Map

Used by

[function] -get-valid-path