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');
}

Used by

[mixin] root-container
[mixin] item-header-wrapper
[mixin] item-trigger-wrapper
[mixin] item-content
[mixin] item-content-open
[mixin] item-close-button-focused
[mixin] title
[mixin] actions
[mixin] actions-dismissible
[mixin] action-trigger
[mixin] font-styles-x
[mixin] root-container
[mixin] list
[mixin] item
[mixin] root
[mixin] siblings
[mixin] default-button-styles
[mixin] button-styles
[mixin] size-medium
[mixin] size-small
[mixin] icon
[mixin] icon-position-end
[mixin] button-padding
[mixin] header
[mixin] controls
[mixin] view-all-link
[mixin] view-all-button
[mixin] chip-deselected-styles
[mixin] chip-action-disabled-styles
[mixin] chip-choice-base-styles
[mixin] chip-choice-selected-styles
[mixin] chip-choice-active-styles
[mixin] chip-choice-hover-styles
[mixin] chip-choices-container-styles
[mixin] chip-choices-child-styles
[mixin] chip-selected-styles
[mixin] container-styles
[mixin] child-styles
[mixin] choice-root
[mixin] choice-append-container
[mixin] range-label
[mixin] rating-heading
[mixin] rating-control
[mixin] icon-focus-indicator
[mixin] active-colors
[mixin] inactive-colors
[mixin] count
[mixin] action
[function] -get-color
[function] -get-valid-path
[function] get-theme-colorset-properties
[mixin] controls-container
[mixin] rotate-control
[mixin] input-adornment
[mixin] picker-controls-bar
[mixin] picker-toolbar-selected-date
[mixin] picker-dialog-content
[mixin] picker-dialog-content-input
[mixin] sm-margin-styles
[mixin] elevation
[mixin] field-root-container
[mixin] field-control
[mixin] field-icon
[mixin] field-label
[mixin] field-messages-container
[mixin] field-messages-common
[mixin] autocomplete-menu
[mixin] autocomplete-option
[mixin] group-label
[mixin] group-messages-above
[mixin] group-messages-below
[mixin] toggle-button
[function] get-theme-map
[mixin] nav
[mixin] pagination-button
[mixin] font-styles-x
[mixin] icon-size
[mixin] icon-circle
[mixin] label
[mixin] root-container
[mixin] root-container-with-subtitle
[mixin] image-wrapper
[mixin] icon-wrapper
[mixin] compact
[mixin] content
[mixin] subtitle
[mixin] icon-container
[mixin] default
[function] get-map-by-key-safe
[mixin] root-container
[mixin] icon
[mixin] menu-link
[mixin] menu-link-icon-wrapper
[mixin] menu-group-link
[mixin] menu-group-toggle
[mixin] header
[mixin] title
[mixin] content
[mixin] actions
[mixin] normalize-blocks
[mixin] normalize-text
[mixin] normalize-lists
[mixin] normalize-code
[mixin] root-container
[mixin] list-item-previous
[mixin] list-item-next
[mixin] card-root
[mixin] avatar-wrapper
[mixin] caption
[mixin] list-item
[mixin] icon-wrapper
[mixin] icon-personalized
[mixin] icon-diet
[mixin] icon-prescription
[mixin] icon-frozen
[mixin] icon-chewy
[mixin] icon-fresh
[mixin] icon-restricted
[mixin] canvas
[mixin] canvas-landscape-extended
[mixin] canvas-content
[mixin] choices-landscape
[mixin] label
[mixin] root-container
[mixin] row
[mixin] append-content
[mixin] root-container
[mixin] count-wrapper
[mixin] row
[mixin] sponsor
[mixin] subtitle
[mixin] title
[mixin] content
[mixin] root-container
[mixin] count-wrapper
[mixin] action
[mixin] header-wrapper
[mixin] header-small
[mixin] subheading
[mixin] card-root
[mixin] append-container-indent
[mixin] header
[mixin] title-icon
[mixin] control-back
[mixin] content
[mixin] steps-wrapper
[mixin] step-content
[mixin] base-styles
[mixin] text-skeleton
[mixin] label
[mixin] actions
[mixin] actions-stacked
[mixin] action
[mixin] tooltip
[mixin] content
[function] get-weight
[function] get-type-style-with-fallback
[function] -transform-type-style
[function] -get-type-style-value
[function] get-type-style
[function] get-map-by-key-safe
[mixin] style-as-type
[mixin] create-type-helpers
[function] -get-spacing-value
[function] get-properties

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

Description

Deprecated color paths

Type

Map

Used by

[function] -get-valid-path