Cards

Installation

  yarn add @chewy/kib-cards-styles

Import

  @use '../../styles/mixins' as common;

Mixins

card-interactive-forced-colors

@mixin card-interactive-forced-colors($hover-not) { ... }@mixin card-interactive-forced-colors($hover-not) { 
  @media (forced-colors: active) {
    box-shadow: none !important;
    border: 1px solid CanvasText;
    background-color: Canvas;

    &:focus-visible {
      border-color: Highlight;
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover:not(#{$hover-not}):not(:active):not(:focus-visible) {
        border-color: Highlight !important;
        background-color: Canvas !important;
      }
    }
  }
 }
Description

Base interactive card forced-colors treatment (default + focus + hover)

Parameters
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$hover-not

Selector to exclude from HCM hover (default :disabled)

String none

card-interactive-disabled-hcm

@mixin card-interactive-disabled-hcm() { ... }@mixin card-interactive-disabled-hcm() { 
  @include card.card-interactive-disabled;

  @media (forced-colors: active) {
    border-color: GrayText;
    opacity: 1;
  }
 }
Description

Base interactive card disabled treatment (opacity + HCM)

Parameters

None.