material-web/switch/internal/_handle.scss

//
// Copyright 2022 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

// go/keep-sorted start
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../ripple/ripple';
@use '../../tokens';
// go/keep-sorted end

$_md-sys-motion: tokens.md-sys-motion-values();
$_easing-standard: map.get($_md-sys-motion, 'easing-standard');

@mixin styles($tokens) {
  @layer styles {
    .handle-container {
      display: flex;
      place-content: center;
      place-items: center;
      position: relative;
      // this easing is custom to perform the "overshoot" animation
      transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    $margin: calc(
      map.get($tokens, 'track-width') - map.get($tokens, 'track-height')
    );

    .selected .handle-container {
      margin-inline-start: $margin;
    }

    .unselected .handle-container {
      margin-inline-end: $margin;
    }

    .disabled .handle-container {
      transition: none;
    }

    .handle {
      // Handle shape
      border-start-start-radius: map.get($tokens, 'handle-shape-start-start');
      border-start-end-radius: map.get($tokens, 'handle-shape-start-end');
      border-end-end-radius: map.get($tokens, 'handle-shape-end-end');
      border-end-start-radius: map.get($tokens, 'handle-shape-end-start');
      height: map.get($tokens, 'handle-height');
      width: map.get($tokens, 'handle-width');

      transform-origin: center;
      transition-property: height, width;
      transition-duration: 250ms, 250ms;
      transition-timing-function: $_easing-standard, $_easing-standard;
      z-index: 0;
    }

    .handle::before {
      content: '';
      display: flex;
      inset: 0;
      position: absolute;
      border-radius: inherit;
      box-sizing: border-box;
      transition: background-color 67ms linear;
    }

    .disabled .handle,
    .disabled .handle::before {
      transition: none;
    }

    .selected .handle {
      height: map.get($tokens, 'selected-handle-height');
      width: map.get($tokens, 'selected-handle-width');
    }

    .handle.with-icon {
      height: map.get($tokens, 'with-icon-handle-height');
      width: map.get($tokens, 'with-icon-handle-width');
    }

    .selected:not(.disabled):active .handle,
    .unselected:not(.disabled):active .handle {
      height: map.get($tokens, 'pressed-handle-height');
      width: map.get($tokens, 'pressed-handle-width');
      transition-timing-function: linear;
      transition-duration: 100ms;
    }

    .selected .handle::before {
      background-color: map.get($tokens, 'selected-handle-color');
    }

    .selected:hover .handle::before {
      background-color: map.get($tokens, 'selected-hover-handle-color');
    }

    .selected:focus-within .handle::before {
      background-color: map.get($tokens, 'selected-focus-handle-color');
    }

    .selected:active .handle::before {
      background-color: map.get($tokens, 'selected-pressed-handle-color');
    }

    .selected.disabled .handle::before {
      background-color: map.get($tokens, 'disabled-selected-handle-color');
      opacity: map.get($tokens, 'disabled-selected-handle-opacity');
    }

    .unselected .handle::before {
      background-color: map.get($tokens, 'handle-color');
    }

    .unselected:hover .handle::before {
      background-color: map.get($tokens, 'hover-handle-color');
    }

    .unselected:focus-within .handle::before {
      background-color: map.get($tokens, 'focus-handle-color');
    }

    .unselected:active .handle::before {
      background-color: map.get($tokens, 'pressed-handle-color');
    }

    .unselected.disabled .handle::before {
      background-color: map.get($tokens, 'disabled-handle-color');
      opacity: map.get($tokens, 'disabled-handle-opacity');
    }

    md-ripple {
      border-radius: map.get($tokens, 'state-layer-shape');
      height: map.get($tokens, 'state-layer-size');
      inset: unset;
      width: map.get($tokens, 'state-layer-size');
    }

    .selected md-ripple {
      @include ripple.theme(
        (
          'hover-color': map.get($tokens, 'selected-hover-state-layer-color'),
          'pressed-color':
            map.get($tokens, 'selected-pressed-state-layer-color'),
          'hover-opacity':
            map.get($tokens, 'selected-hover-state-layer-opacity'),
          'pressed-opacity':
            map.get($tokens, 'selected-pressed-state-layer-opacity'),
        )
      );
    }

    .unselected md-ripple {
      @include ripple.theme(
        (
          'hover-color': map.get($tokens, 'hover-state-layer-color'),
          'pressed-color': map.get($tokens, 'pressed-state-layer-color'),
          'hover-opacity': map.get($tokens, 'hover-state-layer-opacity'),
          'pressed-opacity': map.get($tokens, 'pressed-state-layer-opacity'),
        )
      );
    }
  }

  @layer hcm {
    @media (forced-colors: active) {
      .unselected .handle::before {
        background: ButtonText;
      }

      .disabled .handle::before {
        opacity: 1;
      }

      .disabled.unselected .handle::before {
        background: GrayText;
      }
    }
  }
}