Product Badges

Installation

  yarn add @chewy/kib-product-styles

Import

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

Mixins

list

@mixin list() { ... }@mixin list() { 
  margin: 0;
  padding: 0;
  margin-bottom: settings.$spacing;
 }
Description

List container styles

Parameters

None.

Requires

list-item

@mixin list-item() { ... }@mixin list-item() { 
  display: flex;
  margin-bottom: spacing.get('s2');

  &:last-child {
    margin: 0;
  }
 }
Description

List item styles

Parameters

None.

Requires

badge

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

  display: flex;
  align-items: center;
  color: color.get('text', 'secondary');
 }
Description

Root badges styles

Parameters

None.

Requires

badge-large

@mixin badge-large() { ... }@mixin badge-large() { 
  @include typography.style-as('paragraph-2');
 }
Description

Large badge text styles

Parameters

None.

icon-wrapper

@mixin icon-wrapper() { ... }@mixin icon-wrapper() { 
  margin-right: spacing.get('s1');
  display: inline-flex;
  align-self: flex-start;
 }
Description

Icon wrapper styles

Parameters

None.

Requires

label

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

Visually hidden text label

Parameters

None.

label-hidden

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

Wide accessible label styles

Parameters

None.

icon

@mixin icon() { ... }@mixin icon() { 
  width: settings.$icon-size;
  height: settings.$icon-size;

  @media (forced-colors: active) {
    &,
    path {
      fill: CanvasText;
    }
  }
 }
Description

Badge icon styles

Parameters

None.

Requires

icon-large

@mixin icon-large() { ... }@mixin icon-large() { 
  width: settings.$icon-size-large;
  height: settings.$icon-size-large;
 }
Description

Badge icon large styles

Parameters

None.

Requires

icon-restricted

@mixin icon-restricted() { ... }@mixin icon-restricted() { 
  color: color.get('icon', 'red');
 }
Description

Icon styles for restricted badge

Parameters

None.

Requires

icon-promotion

@mixin icon-promotion() { ... }@mixin icon-promotion() { 
  color: color.get('ui-elements', 'price', 'primary');
 }
Description

Icon styles for promotion badge

Parameters

None.

Requires

icon-chewy-plus

@mixin icon-chewy-plus() { ... }@mixin icon-chewy-plus() { 
  color: color.get('ui-bg', 'brand', 'primary');
 }
Description

Icon styles for chewyPlus badge

Parameters

None.

Requires

icon-chewy-plus-width

@mixin icon-chewy-plus-width() { ... }@mixin icon-chewy-plus-width() { 
  @if $large {
    width: unit.rem(64px);
  } @else {
    width: unit.rem(54px);
  }
 }
Description

Wide icon wide styles

Parameters

None.

Requires

Variables

spacing

$spacing: spacing.get('s3') !default;
Description

List bottom spacing

Type

Number

icon-size

$icon-size: unit.rem(16px) !default;
Description

Badge icon size

Type

Number

icon-size-large

$icon-size-large: unit.rem(24px) !default;
Description

Large badge icon size

Type

Number