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; }
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; }
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
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$type | Alias of font style preset | String | md |
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;