• No results

Choices Radio

Installation

  yarn add @chewy/kib-choices-styles

Import

  @use '~@chewy/kib-choices-styles/src/kib-radio/styles' as kib-radio;

Mixins

radio-control-state

@mixin radio-control-state($selection, $interaction) { ... }@mixin radio-control-state($selection, $interaction) { 
  border-width: ct.get('radio', 'border-width', 'halo');
  border-style: solid;
  border-radius: ct.get('radio', 'border-radius', 'bg');
  border-color: color.get('ct', 'radio', $selection, $interaction, 'halo-color');
  background-color: color.get('ct', 'radio', $selection, $interaction, 'bg-color');

  &::after {
    border-width: ct.get('radio', 'border-width', 'border');
    border-style: solid;
    border-radius: ct.get('radio', 'border-radius', 'border');
    border-color: color.get('ct', 'radio', $selection, $interaction, 'border-color');
  }
 }
Description

Radio custom input control styles and various states

Parameters
Parameters
NameDescriptionTypeDefault value
$selection

Selection state (unselected, selected, indeterminate)

String—
$interaction

Interaction state (hover, active, focus, checked, disabled)

String—
Requires
Used by
Author

  • CDS

radio-fill-state

@mixin radio-fill-state($selection, $interaction) { ... }@mixin radio-fill-state($selection, $interaction) { 
  border-radius: ct.get('radio', 'border-radius', 'fill');
  background-color: color.get('ct', 'radio', $selection, $interaction, 'indicator-color');
 }
Description

Applies CT indicator token colors for a given fill state

Parameters
Parameters
NameDescriptionTypeDefault value
$selection

Selection state (unselected, selected)

String—
$interaction

Interaction state (active, hover, focus, pressed)

String—
Requires
Used by
Author

  • CDS

radio-label-state

@mixin radio-label-state($block) { ... }@mixin radio-label-state($block) { 
  $label-error: (
    'unselected': ':not(:focus-visible):not(:disabled):not(:checked)',
    'selected': ':checked:not(:focus-visible):not(:disabled)'
  );

  @each $selection, $native-suffix in $label-error {
    #{$block}__field--invalid:has(#{$block}__native#{$native-suffix}) & {
      color: color.get('ct', 'radio', $selection, 'error', 'text-primary-color');
    }
  }
 }
Description

CT text colors for native selection error states.

Parameters
Parameters
NameDescriptionTypeDefault value
$block

Root class of the parent block element

String—
Requires
Author

  • CDS

radio-control-custom-base

@mixin radio-control-custom-base() { ... }@mixin radio-control-custom-base() { 
  // Utility-5 line box (fs-utility-5 × lh-utility-5 = 24px in the base theme).
  --kib-radio-size: calc(#{typography.get('fs-utility-5')} * #{typography.get('lh-utility-5')});
  display: block;
  position: relative;
  flex-shrink: 0;
  width: var(--kib-radio-size);
  height: var(--kib-radio-size);
  margin-top: unit.rem(-2);
  border-radius: 50%;
  pointer-events: none;

  &::after {
    $distance: unit.rem(1px);
    content: '';
    position: absolute;
    top: $distance;
    right: $distance;
    bottom: $distance;
    left: $distance;
    transform: scale(0.75);
    transition-property: opacity, transform;
    transition-duration: animation.get('press', 'scale', 'duration');
    border-radius: 50%;
    opacity: 0;
    @media (forced-colors: active) {
      border-color: Highlight;
    }
  }
 }
Description

Base layout and transition styles for the custom radio control element

Parameters

None.

Requires
Used by
Author

  • CDS

radio-control-custom

@mixin radio-control-custom($block) { ... }@mixin radio-control-custom($block) { 
  $control-active: (
    'unselected': ':not(:disabled):not(:checked)',
    'selected': ':checked:not(:disabled)'
  );
  $control-hover: (
    'unselected': ':not(:focus-visible):not(:disabled):not(:checked)',
    'selected': ':checked:not(:focus-visible):not(:disabled)'
  );
  $control-focus: (
    'unselected': ':focus-visible:not(:disabled):not(:checked)',
    'selected': ':checked:focus-visible:not(:disabled)'
  );
  $control-pressed: (
    'unselected': ':not(:disabled):not(:checked)',
    'selected': ':checked:not(:disabled)'
  );
  $control-error: (
    'unselected': ':not(:focus-visible):not(:disabled):not(:checked)',
    'selected': ':checked:not(:focus-visible):not(:disabled)'
  );
  @include radio-control-custom-base;

  @each $selection, $native-suffix in $control-active {
    #{$block}__native#{$native-suffix} ~ & {
      @include radio-control-state($selection, 'active');
      &::after {
        transform: scale(1);
        opacity: 1;
      }
    }
  }
  @each $selection, $native-suffix in $control-hover {
    #{$block}__field:hover:has(#{$block}__native#{$native-suffix}) & {
      @include radio-control-state($selection, 'hover');
      &::after {
        transform: scale(1);
        opacity: 1;
      }
    }
  }

  @each $selection, $native-suffix in $control-error {
    #{$block}__field--invalid:has(#{$block}__native#{$native-suffix}) & {
      @include radio-control-state($selection, 'error');

      &::after {
        transform: scale(1);
        opacity: 1;
      }
    }
  }

  @each $selection, $native-suffix in $control-focus {
    #{$block}__native#{$native-suffix} ~ & {
      @include radio-control-state($selection, 'focus');
      &::after {
        transform: scale(1);
        opacity: 1;
      }
    }
  }
  @each $selection, $native-suffix in $control-pressed {
    #{$block}__native:active#{$native-suffix} ~ & {
      @include radio-control-state($selection, 'pressed');
    }

    #{$block}__field:has(#{$block}__native#{$native-suffix}:active) &,
    #{$block}__field:has(#{$block}__label:active):has(#{$block}__native#{$native-suffix}) & {
      @include radio-control-state($selection, 'pressed');
    }
  }

  #{$block}__native:disabled ~ & {
    opacity: 0.5;
    pointer-events: none;

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

  #{$block}__native:disabled:not(:checked) ~ & {
    @include radio-control-state('unselected', 'active');
    background-color: color.get('ui-bg', '02');

    &::after {
      transform: scale(1);
      opacity: 1;
    }
  }

  #{$block}__native:checked:disabled ~ & {
    @include radio-control-state('selected', 'active');

    &::after {
      transform: scale(1);
      opacity: 1;
    }

    @media (forced-colors: active) {
      border-color: GrayText;

      &::after {
        border-color: GrayText;
      }
    }
  }

  @include -radio-control-forced-colors($block);
 }
Description

Applies CT token colors and state styles for the custom radio control

Parameters
Parameters
NameDescriptionTypeDefault value
$block

Root class of the parent block element

String—
Requires
Author

  • CDS

-radio-control-forced-colors

@mixin -radio-control-forced-colors() { ... }@mixin -radio-control-forced-colors() { 
  $control-hover: (
    'unselected': ':not(:focus-visible):not(:disabled):not(:checked)',
    'selected': ':checked:not(:focus-visible):not(:disabled)'
  );

  @media (forced-colors: active) {
    #{$block}__native:not(:disabled) ~ & {
      border-color: CanvasText;
      background-color: Canvas;
    }

    @media (hover: hover) and (pointer: fine) {
      @each $selection, $native-suffix in $control-hover {
        #{$block}__field:hover:has(#{$block}__native#{$native-suffix}) & {
          border-color: Highlight;
          background-color: Canvas;
        }
      }
    }
  }
 }
Description

Forced-colors styles for the custom control surface.

Parameters

None.

Used by
Author

  • CDS

radio-fill

@mixin radio-fill() { ... }@mixin radio-fill() { 
  $fill-active: (
    'selected': ':checked'
  );
  $fill-hover: (
    'unselected': ':not(:focus-visible):not(:disabled):not(:checked)',
    'selected': ':checked:not(:focus-visible):not(:disabled)'
  );
  $fill-focus: (
    'unselected': ':focus-visible:not(:disabled):not(:checked)',
    'selected': ':checked:focus-visible:not(:disabled)'
  );
  $fill-pressed: (
    'unselected': ':not(:disabled):not(:checked)',
    'selected': ':checked:not(:disabled)'
  );
  $fill-error: (
    'unselected': ':not(:focus-visible):not(:disabled):not(:checked)',
    'selected': ':checked:not(:focus-visible):not(:disabled)'
  );
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--kib-radio-size) / 2);
  height: calc(var(--kib-radio-size) / 2);
  transform: translate(-50%, -50%) scale(0);
  transition-property: transform, opacity;
  transition-duration: animation.get('press', 'scale', 'duration');
  opacity: 0;

  @each $selection, $native-suffix in $fill-active {
    #{$block}__native#{$native-suffix} ~ #{$block}__control & {
      @include radio-fill-state($selection, 'active');
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
  @each $selection, $native-suffix in $fill-hover {
    #{$block}__field:hover:has(#{$block}__native#{$native-suffix}) & {
      @include radio-fill-state($selection, 'hover');
    }
  }

  @each $selection, $native-suffix in $fill-error {
    #{$block}__field--invalid:has(#{$block}__native#{$native-suffix}) & {
      @include radio-fill-state($selection, 'error');
    }
  }

  @each $selection, $native-suffix in $fill-focus {
    #{$block}__native#{$native-suffix} ~ #{$block}__control & {
      @include radio-fill-state($selection, 'focus');
    }
  }

  @each $selection, $native-suffix in $fill-pressed {
    #{$block}__native:active#{$native-suffix} ~ #{$block}__control & {
      @include radio-fill-state($selection, 'pressed');
    }

    #{$block}__field:has(#{$block}__native#{$native-suffix}:active) &,
    #{$block}__field:has(#{$block}__label:active):has(#{$block}__native#{$native-suffix}) & {
      @include radio-fill-state($selection, 'pressed');
    }
  }

  #{$block}__native:checked:not(:disabled) ~ #{$block}__control & {
    @media (forced-colors: active) {
      background-color: Highlight;
    }
  }

  #{$block}__native:checked:disabled ~ #{$block}__control & {
    @media (forced-colors: active) {
      background-color: GrayText;
    }
  }
 }
Description

Control fill with inner pseudo element to style checked state

Parameters

None.

Requires
Author

  • CDS