Color
Installation
yarn add @chewy/kib-foundationsImport
@use '~@chewy/kib-foundations/src/color';Functions
get-color-property
@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
| 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
-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
| parameter Name | parameter Description | parameter Type | parameter 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
- [function]
get - [variable]
-ct - [variable]
-background - [variable]
-elevation - [variable]
-colors
-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
| 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 - [function]
get-property-name - [variable]
aliases - [variable]
deprecated-property-names
Used by
- [function]
try-get
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
- [function]
flatten-map - [variable]
-colors - [variable]
-ct - [variable]
-elevation - [variable]
-shadow - [variable]
-border - [variable]
-background
Used by
- [function]
get-theme-colorset-properties - [mixin]
custom-properties
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
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$colorset | Deprecated, no longer used | String | settings.$default-colorset |
$theme | Deprecated, no longer used | String | common.$default-theme |
Returns
Map —Flattened map of color tokens
Requires
- [function]
get-color-properties - [variable]
default-colorset - [variable]
default-theme
get
@function get($path...) { ... }@function get($path...) { @return get-property($path...); }
Description
Creates a custom property reference from a color path
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');
}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
| parameter Name | parameter Description | parameter Type | parameter 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
- [function]
-get-valid-path - [function]
get - [variable]
-colors
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
| parameter Name | parameter Description | parameter Type | parameter 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
- [function]
get-property-name - [function]
get
Mixins
baseline-properties
@mixin baseline-properties($args...) { ... }@mixin baseline-properties($args...) { @include mixins.custom-properties($args...); }
Description
Generates CSS Custom Properties for a theme's colorset
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$args... | (optional) Pass the following args: | 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
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
| parameter Name | parameter Description | parameter Type | parameter 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. | Map | null |
Requires
- [function]
get-color-properties - [function]
get-property-name - [variable]
default-colorset - [variable]
default-theme
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
- [function]
-get-color - [function]
get-color-properties - [function]
try-get
-ct
$-ct: (...);$-ct: map.get(tokens.$chirp-theme, 'ct');
Description
Component tokens map from the base theme.
Type
Map
Used by
- [function]
-get-color - [function]
get-color-properties
-elevation
$-elevation: (...);$-elevation: map.get(tokens.$chirp-theme, 'elevation');
Description
Elevation tokens map from the base theme.
Type
Map
Used by
- [function]
-get-color - [function]
get-color-properties
-background
$-background: (...);$-background: map.get(tokens.$chirp-theme, 'background');
Description
Background tokens map from the base theme (blur effects, etc).
Type
Map
Used by
- [function]
-get-color - [function]
get-color-properties
-shadow
$-shadow: (...);$-shadow: map.get(tokens.$chirp-theme, 'shadow');
Description
Shadow tokens map from the base theme (deprecated aliases).
Type
Map
Used by
- [function]
get-color-properties
-border
$-border: (...);$-border: map.get(tokens.$chirp-theme, 'border');
Description
Border tokens map from the base theme (deprecated aliases).
Type
Map
Used by
- [function]
get-color-properties
default-colorset
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
Used by
- [function]
get-theme-colorset-properties - [mixin]
custom-properties
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