material-web/packages/switch/_switch-theme.scss

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

@use 'sass:list';
@use 'sass:map';
@use '@material/switch/switch-theme' as mdc-switch-theme;
@use '@material/theme/keys';
@use '@material/theme/map-ext';
@use '@material/theme/state';
@use '@material/theme/theme';
@use '@material/mwc-ripple/ripple-theme';

@forward '@material/switch/switch-theme' show
  $forced-colors-theme,
  $light-theme,
  density;

@mixin theme($theme) {
  @include mdc-switch-theme.theme($theme);
}

@mixin theme-styles($theme) {
  @include theme.validate-theme(mdc-switch-theme.$light-theme, $theme);

  $pair: map-ext.split(
    $theme,
    selected-focus-state-layer-color,
    selected-focus-state-layer-opacity,
    selected-hover-state-layer-color,
    selected-hover-state-layer-opacity,
    selected-pressed-state-layer-color,
    selected-pressed-state-layer-opacity,
    unselected-focus-state-layer-color,
    unselected-focus-state-layer-opacity,
    unselected-hover-state-layer-color,
    unselected-hover-state-layer-opacity,
    unselected-pressed-state-layer-color,
    unselected-pressed-state-layer-opacity
  );

  $theme-without-ripple: list.nth($pair, 1);
  @include mdc-switch-theme.theme-styles($theme-without-ripple);

  $ripple-theme: list.nth($pair, 2);
  $ripple-theme: keys.create-theme-properties($ripple-theme, switch);
  @include state.selected(mdc-switch-theme.$selectors) {
    @include ripple-theme.theme(
      (
        focus-state-layer-color:
          map.get($ripple-theme, selected-focus-state-layer-color),
        focus-state-layer-opacity:
          map.get($ripple-theme, selected-focus-state-layer-opacity),
        hover-state-layer-color:
          map.get($ripple-theme, selected-hover-state-layer-color),
        hover-state-layer-opacity:
          map.get($ripple-theme, selected-hover-state-layer-opacity),
        pressed-state-layer-color:
          map.get($ripple-theme, selected-pressed-state-layer-color),
        pressed-state-layer-opacity:
          map.get($ripple-theme, selected-pressed-state-layer-opacity),
      )
    );

    // TODO(b/191298796): ripple-theme does not currently support setting
    // state layer colors other than hover. Remove this section when bug is
    // resolved.
    @include state.focus(mdc-switch-theme.$selectors) {
      @include ripple-theme.theme(
        (
          hover-state-layer-color:
            map.get($ripple-theme, selected-focus-state-layer-color),
        )
      );
    }
    @include state.pressed(mdc-switch-theme.$selectors) {
      @include ripple-theme.theme(
        (
          hover-state-layer-color:
            map.get($ripple-theme, selected-pressed-state-layer-color),
        )
      );
    }
  }

  @include state.unselected(mdc-switch-theme.$selectors) {
    @include ripple-theme.theme(
      (
        focus-state-layer-color:
          map.get($ripple-theme, unselected-focus-state-layer-color),
        focus-state-layer-opacity:
          map.get($ripple-theme, unselected-focus-state-layer-opacity),
        hover-state-layer-color:
          map.get($ripple-theme, unselected-hover-state-layer-color),
        hover-state-layer-opacity:
          map.get($ripple-theme, unselected-hover-state-layer-opacity),
        pressed-state-layer-color:
          map.get($ripple-theme, unselected-pressed-state-layer-color),
        pressed-state-layer-opacity:
          map.get($ripple-theme, unselected-pressed-state-layer-opacity),
      )
    );

    // TODO(b/191298796): ripple-theme does not currently support setting
    // state layer colors other than hover. Remove this section when bug is
    // resolved.
    @include state.focus(mdc-switch-theme.$selectors) {
      @include ripple-theme.theme(
        (
          hover-state-layer-color:
            map.get($ripple-theme, unselected-focus-state-layer-color),
        )
      );
    }
    @include state.pressed(mdc-switch-theme.$selectors) {
      @include ripple-theme.theme(
        (
          hover-state-layer-color:
            map.get($ripple-theme, unselected-pressed-state-layer-color),
        )
      );
    }
  }
}