Product Price

Installation

  yarn add @chewy/kib-product-styles

Import

  @use '~@chewy/kib-product-styles/src/kib-product-price/styles' as kib-product-price;

Mixins

root-container

@mixin root-container() { ... }@mixin root-container() { 
  @include typography.style-as('price-medium');

  color: settings.$text-color;
 }
Description

Root styles for price

Parameters

None.

Requires

strikethrough

@mixin strikethrough() { ... }@mixin strikethrough() { 
  @if $type == 'xs' {
    @include typography.style-as('price-x-small-strikethrough');
  } @else {
    @include typography.style-as('price-small-strikethrough');
  }

  color: settings.$strike-text-color;
 }
Description

Strikethrough price styles

Parameters

None.

Requires

font-styles

@mixin font-styles($type: md) { ... }@mixin font-styles($type: md) { 
  @if $type == 'md' {
    @include typography.style-as('price-medium');
  } @else if $type == 'sm' {
    @include typography.style-as('price-small');
  } @else if $type == 'lg' {
    @include typography.style-as('price-large');
  } @else if $type == 'xl' {
    @include typography.style-as('price-x-large');
  }
 }
Description

Price specific font styles based on type

Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$type

Alias of font style preset

Stringmd

label

@mixin label() { ... }@mixin label() { 
  @include kib-core.visually-hidden;
 }
Description

Visually hidden text label

Parameters

None.

Variables

text-color

$text-color: color.get('ui-elements', 'price', 'primary') !default;
Description

Text color for base price

Type

Color

strike-text-color

$strike-text-color: color.get('ui-elements', 'price', '02') !default;
Description

Text color for strike price

Type

Color

Used by