material-components_material-web/switch/lib/_switch-theme.scss

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

// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.

@use 'sass:map';

@use '@material/web/focus/lib/focus-ring-theme';
@use '@material/web/sass/color';
@use '@material/web/sass/resolvers';
@use '@material/web/sass/shape';
@use '@material/web/sass/theme';
@use '@material/web/sass/var';
@use '@material/web/tokens';

@use './switch-track-theme';
@use './switch-handle-theme';
@use './switch-icon-theme';

$_default-deps: (
  md-sys-color: tokens.md-sys-color-values-light-dynamic(),
  md-sys-elevation: tokens.md-sys-elevation-values(),
  md-sys-shape: tokens.md-sys-shape-values(),
  md-sys-state: tokens.md-sys-state-values(),
);

@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
  $values: tokens.md-comp-switch-values($deps, $exclude-hardcoded-values);

  // Add missing tokens.
  $values: map.merge(
    $values,
    (
      // TODO(b/230013081): remove this once the missing token is added.
      unselected-track-outline-color: map.get($deps, md-sys-color, outline)
    )
  );

  @return $values;
}

// PRIVATE PROPERTIES

$_touch-target-size: 48px;

$_selected: '.md3-switch--selected';
$_unselected: '.md3-switch--unselected';

// PUBLIC PROPERTIES

$light-theme: values();

$_forced-colors-theme: (
  disabled-selected-icon-color: GrayText,
  disabled-selected-icon-opacity: 1,
  disabled-selected-track-color: GrayText,
  disabled-track-opacity: 1,
  disabled-unselected-handle-color: GrayText,
  disabled-unselected-handle-opacity: 1,
  disabled-unselected-icon-color: Canvas,
  disabled-unselected-icon-opacity: 1,
  selected-focus-track-color: ButtonText,
  selected-hover-track-color: ButtonText,
  selected-icon-color: ButtonText,
  selected-pressed-track-color: ButtonText,
  selected-track-color: ButtonText,
  unselected-focus-handle-color: ButtonText,
  unselected-handle-color: ButtonText,
  unselected-hover-handle-color: ButtonText,
  unselected-icon-color: Canvas,
  unselected-pressed-handle-color: ButtonText,
);

@function _resolve-theme($theme, $resolvers) {
  $theme: shape.resolve-theme(
    $theme,
    map.get($resolvers, shape),
    track-shape,
    handle-shape
  );
  $theme: _flatten-disable-colors($theme);
  @return $theme;
}

@mixin theme($theme, $resolvers: resolvers.$material) {
  $theme: theme.validate-theme($light-theme, $theme);
  $theme: _resolve-theme($theme, $resolvers);
  $theme: theme.create-theme-vars($theme, switch);

  @include theme.emit-theme-vars($theme);
}

@mixin theme-styles($theme, $resolvers: resolvers.$material) {
  $theme: theme.validate-theme-styles($light-theme, $theme);
  $theme: _resolve-theme($theme, $resolvers);
  $theme: theme.create-theme-vars($theme, switch);

  .md3-switch {
    @include _root($theme);
  }

  @include switch-track-theme.theme-styles($theme);

  @include switch-handle-theme.theme-styles($theme);

  @include switch-icon-theme.theme-styles($theme);
}

// PRIVATE API

@mixin _root($theme) {
  width: map.get($theme, track-width);
  height: map.get($theme, track-height);

  // Track shape
  border-start-start-radius: map.get($theme, track-shape-start-start);
  border-start-end-radius: map.get($theme, track-shape-start-end);
  border-end-end-radius: map.get($theme, track-shape-end-end);
  border-end-start-radius: map.get($theme, track-shape-end-start);

  @include _focus-ring(
    // TODO(b/231741594): use `track-shape` once this is not deleted.
    $track-shape: map.get($theme, track-shape-start-start)
  );

  @include _forced-colors-mode-theme;
}

@mixin _focus-ring($track-shape) {
  @include focus-ring-theme.theme(
    (
      ring-radius: $track-shape,
    )
  );
}

@mixin _forced-colors-mode-theme {
  // TODO(b/230630968): create a foced-colors-mode mixin
  @media screen and (forced-colors: active) {
    @include theme($_forced-colors-theme);
  }
}

@function _flatten-disable-colors($theme) {
  @return color.join-color-and-opacity-pairs(
    $theme,
    (
      // Disabled Handle
      (
          color-key: disabled-selected-handle-color,
          opacity-key: disabled-selected-handle-opacity
        ),
      (
        color-key: disabled-unselected-handle-color,
        opacity-key: disabled-unselected-handle-opacity
      ),
      // Disabled Track
      (
          color-key: disabled-selected-track-color,
          opacity-key: disabled-track-opacity
        ),
      (
        color-key: disabled-unselected-track-color,
        opacity-key: disabled-track-opacity
      ),
      (
        color-key: disabled-unselected-track-outline-color,
        opacity-key: disabled-track-opacity
      ),
      // Disabled Icon
      (
          color-key: disabled-selected-icon-color,
          opacity-key: disabled-selected-icon-opacity
        ),
      (
        color-key: disabled-unselected-icon-color,
        opacity-key: disabled-unselected-icon-opacity
      )
    )
  );
}