Color

Installation

  yarn add @chewy/kib-foundations

Import

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

Functions

get-color-property

Deprecated!
@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 Nameparameter Descriptionparameter Typeparameter 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

-get-color

@function -get-color($path...) { ... }@function -get-color($path...) { 
  // Build a list from the arglist to check if first element is 'ct' or 'background'
  $path-list: ();
  @each $item in $path {
    $path-list: list.append($path-list, $item);
  }

  // If path starts with 'ct', look in the ct map
  @if list.length($path-list) > 0 and list.nth($path-list, 1) == 'ct' {
    // Remove 'ct' prefix and look in $-ct map
    $ct-path: ();
    @for $i from 2 through list.length($path-list) {
      $ct-path: list.append($ct-path, list.nth($path-list, $i));
    }

    // Handle inconsistent 'halo-color' vs 'halo' naming in token structure
    // Try the original path first, then try with 'halo-color' → 'halo' transformation
    $has-key: map.has-key($-ct, $ct-path...);

    // If not found and last segment is 'halo-color', try 'halo' instead
    @if $has-key == false and list.length($ct-path) > 0 {
      $last-segment: list.nth($ct-path, list.length($ct-path));
      @if $last-segment == 'halo-color' {
        // Try with 'halo' instead
        $new-path: ();
        @for $i from 1 through list.length($ct-path) - 1 {
          $new-path: list.append($new-path, list.nth($ct-path, $i));
        }
        $new-path: list.append($new-path, 'halo');

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

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

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

  // If path starts with 'background', look in the background map
  @if list.length($path-list) > 0 and list.nth($path-list, 1) == 'background' {
    // Remove 'background' prefix and look in $-background map
    $bg-path: ();
    @for $i from 2 through list.length($path-list) {
      $bg-path: list.append($bg-path, list.nth($path-list, $i));
    }

    $has-key: map.has-key($-background, $bg-path...);

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

    @return map.get($-background, $bg-path...);
  }

  // If path starts with 'shadow', map to elevation tokens for backward compatibility
  // Old: color.get('shadow', 'low-emphasis') → elevation.low-emphasis-shadow.color (if exists)
  //      OR elevation.emphasis-secondary.1.color (fallback for older token versions)
  // Old: color.get('shadow', 'medium-emphasis') → elevation.medium-emphasis-shadow.color (if exists)
  //      OR elevation.emphasis-primary.1.color (fallback)
  // Old: color.get('shadow', 'high-emphasis') → elevation.high-emphasis-shadow.color (if exists)
  //      OR elevation.overlay-small.1.color (fallback)
  @if list.length($path-list) > 0 and list.nth($path-list, 1) == 'shadow' {
    @if not $-elevation {
      @error "Elevation tokens not found in theme. Cannot resolve shadow path: '#{$path}'";
    }

    @if list.length($path-list) == 2 {
      $emphasis-level: list.nth($path-list, 2);
      $shadow-key: '#{$emphasis-level}-shadow';

      // Try the new token structure first (low-emphasis-shadow, medium-emphasis-shadow, high-emphasis-shadow)
      @if map.has-key($-elevation, $shadow-key) {
        $shadow-map: map.get($-elevation, $shadow-key);

        @if not map.has-key($shadow-map, 'color') {
          @error "Color property not found in elevation.#{$shadow-key}. Available properties: #{map.keys($shadow-map)}";
        }

        @return map.get($shadow-map, 'color');
      }

      // Fallback to older token structure for backward compatibility with published tokens
      // Map old shadow names to new elevation emphasis levels
      $fallback-map: (
        'low-emphasis': (
          'emphasis-secondary',
          '1',
          'color'
        ),
        'medium-emphasis': (
          'emphasis-primary',
          '1',
          'color'
        ),
        'high-emphasis': (
          'overlay-small',
          '1',
          'color'
        )
      );

      @if map.has-key($fallback-map, $emphasis-level) {
        $fallback-path: map.get($fallback-map, $emphasis-level);
        @return map.get($-elevation, $fallback-path...);
      }

      @error "Color not found: '#{$path}'. Unknown shadow emphasis level: '#{$emphasis-level}'";
    } @else {
      @error "Invalid shadow path: '#{$path}'. Expected format: color.get('shadow', 'low-emphasis')";
    }
  }

  // Otherwise look in regular color map
  $has-key: map.has-key($-colors, $path...);

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

  @return map.get($-colors, $path...);
 }
Description

Retrieves a color value from the token map. Checks the color map, ct (component tokens) map, and background map.

Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$path...

Comma separated path to a color (e.g., 'ui-bg', 'primary') or component token (e.g., 'ct', 'field', 'input', 'active', 'bg-color') or background token (e.g., 'background', 'blur', '16')

List none
Returns
Color

Color value from the token map

Throws
  • Color not found:

  • Elevation tokens not found in theme. Cannot resolve shadow path:

  • Color property not found in elevation.#{$shadow-key}. Available properties: #{map.keys($shadow-map)}

  • Invalid shadow path:

Requires

-get-valid-path

@function -get-valid-path($path...) { ... }@function -get-valid-path($path...) { 
  $path-list: ();
  @each $item in $path {
    $path-list: list.append($path-list, $item);
  }

  // Resolve path-prefix aliases (e.g. ct.field.input.* icon-color → adornment-color)
  @if list.length($path-list) >= 3 {
    $prefix-key: '#{list.nth($path-list, 1)}-#{list.nth($path-list, 2)}-#{list.nth($path-list, 3)}';
    @if map.has-key(settings.$aliases, $prefix-key) {
      $replacement: map.get(settings.$aliases, $prefix-key);
      @if meta.type-of($replacement) == 'list' {
        $_tail: ();
        @for $i from 4 through list.length($path-list) {
          $_tail: list.append($_tail, list.nth($path-list, $i));
        }
        $path-list: list.join($replacement, $_tail);
      }
    }
  }

  // Resolve last-segment aliases (e.g. icon-color → adornment-color for ct.field.input.*)
  @if list.length($path-list) ==
    5 and
    list.nth($path-list, 1) ==
    'ct' and
    list.nth($path-list, 2) ==
    'field' and
    list.nth($path-list, 3) ==
    'input' and
    list.nth($path-list, 5) ==
    'icon-color'
  {
    $segment-key: 'ct-field-input-icon-color';
    @if map.has-key(settings.$aliases, $segment-key) {
      $replacement: map.get(settings.$aliases, $segment-key);
      @if meta.type-of($replacement) == 'string' {
        $path-list: (
          list.nth($path-list, 1),
          list.nth($path-list, 2),
          list.nth($path-list, 3),
          list.nth($path-list, 4),
          $replacement
        );
      }
    }
  }

  // Resolve 4-segment path aliases (e.g. color.fields.base.icon-active → adornment-active)
  @if list.length($path-list) == 4 {
    $full-key: '#{list.nth($path-list, 1)}-#{list.nth($path-list, 2)}-#{list.nth($path-list, 3)}-#{list.nth($path-list, 4)}';
    @if map.has-key(settings.$aliases, $full-key) {
      $replacement: map.get(settings.$aliases, $full-key);
      @if meta.type-of($replacement) == 'string' {
        $path-list: (
          list.nth($path-list, 1),
          list.nth($path-list, 2),
          list.nth($path-list, 3),
          $replacement
        );
      }
    }
  }

  $property: common.get-property-name($path-list...);

  @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-list;
 }
Description

Checks for path aliases and deprecated color paths; returns the resolved path. Uses settings.$aliases (like typography style-as) so old token names still work.

Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$path...

Comma separated path to a theme's color

List none
Returns
List

Comma separated path to a theme's color

Requires
Used by

get-color-properties

@function get-color-properties() { ... }@function get-color-properties() { 
  $result: common.flatten-map($-colors);

  // Include component tokens (ct-*) — in old kib-tokens these were nested
  // inside the color themes map and output by the color mixin.
  @if $-ct {
    $flat-ct: common.flatten-map($-ct);

    @each $key, $value in $flat-ct {
      $result: map.set($result, 'ct-#{$key}', $value);
    }
  }

  // Include elevation tokens (new names + deprecated shadow aliases from source)
  @if $-elevation {
    $flat-elevation: common.flatten-map($-elevation);

    @each $key, $value in $flat-elevation {
      $result: map.set($result, 'elevation-#{$key}', $value);
    }
  }

  // Include shadow tokens (deprecated aliases from source)
  @if $-shadow {
    $flat-shadow: common.flatten-map($-shadow);

    @each $key, $value in $flat-shadow {
      $result: map.set($result, 'shadow-#{$key}', $value);
    }
  }

  // Include border tokens (deprecated aliases from source)
  @if $-border {
    $flat-border: common.flatten-map($-border);

    @each $key, $value in $flat-border {
      $result: map.set($result, 'border-#{$key}', $value);
    }
  }

  // Include background tokens (blur effects, etc) — new names under 'background-' prefix
  @if $-background {
    $flat-background: common.flatten-map($-background);

    @each $key, $value in $flat-background {
      $result: map.set($result, 'background-#{$key}', $value);
    }
  }

  @return $result;
 }
Description

Returns all color tokens as a flattened map with kebab-cased names.

Parameters

None.

Returns
Map

New flattened map

Requires

get-theme-colorset-properties

@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) { 
  @if $colorset != settings.$default-colorset and $colorset != 'light' {
    @warn "The $colorset parameter is deprecated. Dark mode should be handled via separate CSS theme files.";
  }

  @if $theme != common.$default-theme and $theme != 'base' {
    @warn "The $theme parameter is deprecated. Each theme now has its own SCSS file.";
  }

  @return get-color-properties();
 }
Description

Returns all color tokens as a flattened map with kebab-cased names. Uses chirp-design-tokens (always light base theme).

Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$colorset

Deprecated, no longer used

Stringsettings.$default-colorset
$theme

Deprecated, no longer used

Stringcommon.$default-theme
Returns
Map

Flattened map of color tokens

Requires

get

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

Creates a custom property reference from a color path

Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter 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');
}

try-get

@function try-get($path...) { ... }@function try-get($path...) { 
  $valid-path: -get-valid-path($path...);
  $has-key: map.has-key($-colors, $valid-path...);

  @if not $has-key {
    @return null;
  }

  @return get($path...);
 }
Description

Try to get a color value, returning null if it doesn't exist instead of throwing an error. Useful for iterating over optional shadow layers or checking if tokens exist.

Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$path...

Comma separated path to a theme's color

List none
Returns
String or Null

CSS var() function with a fallback color, or null if token doesn't exist

Requires

get-shadow-property

@function get-shadow-property($shadow-name, $property) { ... }@function get-shadow-property($shadow-name, $property) { 
  $property-name: common.get-property-name('elevation', $shadow-name, $property);
  $elevation-map: map.get(tokens.$chirp-theme, 'elevation');
  $fallback: map.get($elevation-map, $shadow-name, $property);

  @return string.unquote('var(#{$property-name}, #{$fallback})');
 }
Description

Creates a custom property reference for individual shadow properties

Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$shadow-name

Shadow token name (e.g., 'emphasis-primary', 'emphasis-secondary')

String none
$property

Shadow property ('offset-x', 'offset-y', 'blur', 'spread', 'color')

String none
Returns
String

CSS var() function with fallback value

Example

Basic usage

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

.card {
  box-shadow:
    color.get-shadow-property('emphasis-primary', 'blur')
    color.get-shadow-property('emphasis-primary', 'spread')
    color.get-shadow-property('emphasis-primary', 'color');
}
Requires

Mixins

baseline-properties

Deprecated!
@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 Nameparameter Descriptionparameter Typeparameter 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');
}

custom-properties

Deprecated!

Use prebuilt CSS theme files from @chewy/chirp-design-tokens instead.

Generates CSS Custom Properties for color tokens. Prefer importing theme files directly:

```css

@mixin custom-properties($colorset, $theme, $overrides: null) { ... }@mixin custom-properties($colorset, $theme, $overrides: null) { 
  @warn "color.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 $colorset != settings.$default-colorset and $colorset != 'light' {
    @warn "The $colorset parameter is deprecated. Dark mode should be handled via separate CSS theme files. Import @chewy/chirp-design-tokens/web/css/theme-base-dark.css instead.";
  }

  @if $theme != common.$default-theme and $theme != 'base' {
    @warn "The $theme parameter is deprecated. Each theme now has its own SCSS file. Import the specific theme file from @chewy/chirp-design-tokens/web/scss/ instead.";
  }

  // Use chirp-design-tokens (always uses light base theme)
  $flat-map: functions.get-color-properties();

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

  @each $key, $value in $flat-map {
    // Skip empty or null values to prevent SASS compilation errors
    @if $value != null and $value != () {
      #{common.get-property-name($key)}: $value;
    }
  }
 }
Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$colorset

Unused, retained for backwards compatibility.

String none
$theme

Unused, retained for backwards compatibility.

String none
$overrides

Map that overrides matching custom property values.

Mapnull
Requires

Variables

-colors

$-colors: (...);$-colors: map.get(tokens.$chirp-theme, 'color');
Description

Color tokens map extracted from the base theme. In the new structure, all color tokens live under the 'color' key.

Type

Map

Used by

-ct

$-ct: (...);$-ct: map.get(tokens.$chirp-theme, 'ct');
Description

Component tokens map from the base theme.

Type

Map

Used by

-elevation

$-elevation: (...);$-elevation: map.get(tokens.$chirp-theme, 'elevation');
Description

Elevation tokens map from the base theme.

Type

Map

Used by

-background

$-background: (...);$-background: map.get(tokens.$chirp-theme, 'background');
Description

Background tokens map from the base theme (blur effects, etc).

Type

Map

Used by

-shadow

$-shadow: (...);$-shadow: map.get(tokens.$chirp-theme, 'shadow');
Description

Shadow tokens map from the base theme (deprecated aliases).

Type

Map

Used by

-border

$-border: (...);$-border: map.get(tokens.$chirp-theme, 'border');
Description

Border tokens map from the base theme (deprecated aliases).

Type

Map

Used by

default-colorset

Deprecated!

Dark mode is now handled via separate CSS theme files. Import the dark theme CSS directly instead of using the $colorset parameter. This parameter is no longer functional and will be removed in a future version.

$default-colorset: 'light' !default;
Description

Name of the default colorset

Type

String

aliases

$aliases: (...);$aliases: (
  // ct.field.input.[state].icon-color → ct.field.input.[state].adornment-color (active, hover, focus, error, autofill, read-only)
  'ct-field-input-icon-color': 'adornment-color',
  // color.fields.base.icon-* → color.fields.base.adornment-* (field icon, not action icon)
  'color-fields-base-icon-active': 'adornment-active',
  'color-fields-base-icon-inactive': 'adornment-inactive',
  'color-fields-base-icon-interactive': 'adornment-interactive',
  'color-fields-base-icon-error': 'adornment-error'
);
Description

Map of color path aliases (like typography $aliases). Keys are path-prefix or pattern strings; values are either a list of segments replacing that prefix, or a string replacing the last path segment. Resolved in -get-valid-path() so callers can keep using old token names.

Type

Map

deprecated-property-names

$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