Product Message

Installation

  yarn add @chewy/kib-product-styles

Import

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

Mixins

message

@mixin message() { ... }@mixin message() { 
  @include typography.style-as('caption');

  width: fit-content;
  margin-bottom: settings.$spacing-bottom;
  margin-top: 0;
 }
Description

default message styles

Parameters

None.

Requires

promotion-base

@mixin promotion-base() { ... }@mixin promotion-base() { 
  padding: settings.$promotion-padding;
  border-radius: settings.$promotion-border-radius;
  color: settings.$promotion-text-color;
 }
Description

base promotion message styles

Parameters

None.

Requires

promotion

@mixin promotion() { ... }@mixin promotion() { 
  @if $type == 'brand' {
    background-color: settings.$promotion-background-color-brand;
  } @else {
    background-color: settings.$promotion-background-color;
  }
 }
Description

promotion message styles

Parameters

None.

Variables

text-color

Deprecated!

no longer referenced

$text-color: color.get('text', 'secondary') !default;
Description

Default color of message text

Type

Color

promotion-border-radius

$promotion-border-radius: kib-core.dimensions-get(tiny) !default;
Description

Default border radius of message

Type

Number

Used by

promotion-background-color

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

Default background color of promotional message

Type

Color

Used by

promotion-padding

$promotion-padding: spacing.get('s1') !default;
Description

Default padding for promotional message

Type

Number

Used by

promotion-background-color-brand

$promotion-background-color-brand: color.get('ui-elements', 'promotion', 'alternate') !default;
Description

Default background color of promotional message

Type

Color

Used by

promotion-text-color

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

Default color of promotional text

Type

Color

Used by

spacing-bottom

$spacing-bottom: unit.rem(12px) !default;
Description

Bottom spacing

Type

Number

Used by