material-components_material-web/segmented_button/lib/_outlined-segmented-button-theme.scss

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

@use 'sass:map';
@use '@material/web/sass/resolvers';
@use '@material/web/sass/theme';
@use '@material/web/tokens';

@use './segmented-button-theme';

$light-theme: tokens.md-comp-outlined-segmented-button-values();

$dark-theme: tokens.md-comp-outlined-segmented-button-values(
  (
    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
  )
);

@mixin theme-styles($theme, $resolvers: resolvers.$material) {
  $theme: theme.validate-theme-styles(
    $light-theme,
    $theme,
    $require-all: false
  );
  $theme: segmented-button-theme.resolve-theme($theme, $resolvers);
  $theme: theme.create-theme-vars($theme, 'segmented-button');

  @include segmented-button-theme.unselected-ripple(
    (
      'hover-state-layer-color':
        map.get($theme, 'unselected-hover-state-layer-color'),
      'hover-state-layer-opacity': map.get($theme, 'hover-state-layer-opacity'),
      'focus-state-layer-color':
        map.get($theme, 'unselected-focus-state-layer-color'),
      'focus-state-layer-opacity': map.get($theme, 'focus-state-layer-opacity'),
      'pressed-state-layer-color':
        map.get($theme, 'unselected-pressed-state-layer-color'),
      'pressed-state-layer-opacity':
        map.get($theme, 'pressed-state-layer-opacity'),
    )
  );

  @include segmented-button-theme.selected-ripple(
    (
      'hover-state-layer-color':
        map.get($theme, 'selected-hover-state-layer-color'),
      'hover-state-layer-opacity': map.get($theme, 'hover-state-layer-opacity'),
      'focus-state-layer-color':
        map.get($theme, 'selected-focus-state-layer-color'),
      'focus-state-layer-opacity': map.get($theme, 'focus-state-layer-opacity'),
      'pressed-state-layer-color':
        map.get($theme, 'selected-pressed-state-layer-color'),
      'pressed-state-layer-opacity':
        map.get($theme, 'pressed-state-layer-opacity'),
    )
  );

  @include segmented-button-theme.container-color(
    map.get($theme, 'selected-container-color')
  );

  @include segmented-button-theme.outline-colors(
    (
      'default': map.get($theme, 'outline-color'),
      'disabled': map.get($theme, 'disabled-outline-color'),
    )
  );

  @include segmented-button-theme.icon-size(
    map.get($theme, 'with-icon-icon-size')
  );

  // Under the following conditions, we need to account for extra space between
  // the graphic and the text label/icon content:
  //
  //   1. A button with an icon and a label.
  //   2. A selected button with a label and checkmark.
  //   3. A selected button with an icon and checkmark but no label.
  //
  // We calculate a larger width here instead of using padding or margin for
  // two main reasons:
  //
  //   1. We may need to transition between a zero width and an explicit width.
  //   2. Both margin and padding take up space when a node has child content
  //      even when a zero width is set and overflow is set to hidden.
  //
  // Because of those reasons, we calculate a new width with the given values.
  @include segmented-button-theme.visible-graphic-width(
    // TODO(b/198759625): Use padding token instead of hardcoded 8px value.
    calc(map.get($theme, 'with-icon-icon-size') + 8px)
  );

  @include segmented-button-theme.unselected-icon-colors(
    (
      'default': map.get($theme, 'unselected-with-icon-icon-color'),
      'hover': map.get($theme, 'unselected-hover-icon-color'),
      'focus': map.get($theme, 'unselected-focus-icon-color'),
      'pressed': map.get($theme, 'unselected-pressed-icon-color'),
      'disabled': map.get($theme, 'disabled-icon-color'),
    )
  );

  @include segmented-button-theme.selected-icon-colors(
    (
      'default': map.get($theme, 'selected-with-icon-icon-color'),
      'hover': map.get($theme, 'selected-hover-icon-color'),
      'focus': map.get($theme, 'selected-focus-icon-color'),
      'pressed': map.get($theme, 'selected-pressed-icon-color'),
      'disabled': map.get($theme, 'disabled-icon-color'),
    )
  );

  @include segmented-button-theme.text-label-font(
    (
      'font': map.get($theme, 'label-text-font'),
      'size': map.get($theme, 'label-text-size'),
      'tracking': map.get($theme, 'label-text-tracking'),
      'weight': map.get($theme, 'label-text-weight'),
    )
  );

  @include segmented-button-theme.selected-text-label-color(
    (
      'default': map.get($theme, 'selected-label-text-color'),
      'hover': map.get($theme, 'selected-hover-label-text-color'),
      'focus': map.get($theme, 'selected-focus-label-text-color'),
      'pressed': map.get($theme, 'selected-pressed-label-text-color'),
    )
  );

  @include segmented-button-theme.unselected-text-label-color(
    (
      'default': map.get($theme, 'unselected-label-text-color'),
      'hover': map.get($theme, 'unselected-hover-label-text-color'),
      'focus': map.get($theme, 'unselected-focus-label-text-color'),
      'pressed': map.get($theme, 'unselected-pressed-label-text-color'),
      'disabled': map.get($theme, 'disabled-label-text-color'),
    )
  );
}