material-components_material-web/components/button/lib/_button-theme.scss

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

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

@use 'sass:map';
@use '@material/ripple/ripple-theme';
@use '@material/shape/shape';
@use '@material/theme/state';
@use '@material/theme/theme';
@use '@material/typography/typography';

$light-theme: (
  container-height: 36px,
  container-shape: 4px,
  label-text-font: typography.get-font(button),
  label-text-size: typography.get-size(button),
  label-text-tracking: typography.get-tracking(button),
  label-text-transform: uppercase,
  label-text-weight: typography.get-weight(button),
  with-icon-icon-size: 18px,
);

$selectors: (
  // :not(:disabled) is used to support link styled as button
  // as link does not support :enabled style
  enabled: ':not(:disabled)',
  disabled: ':disabled',
  focus: ':focus',
  hover: ':hover',
  pressed: ':active'
);

@mixin theme-styles($theme, $resolvers) {
  @include _set-label-text-typography(
    (
      family: 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),
      transform: map.get($theme, label-text-transform),
    )
  );

  @include _container-fill-color(
    (
      default: map.get($theme, container-color),
      disabled: map.get($theme, disabled-container-color),
    )
  );

  @include _ink-color(
    (
      default: map.get($theme, label-text-color),
      hover: map.get($theme, hover-label-text-color),
      focus: map.get($theme, focus-label-text-color),
      pressed: map.get($theme, pressed-label-text-color),
      disabled: map.get($theme, disabled-label-text-color),
    )
  );

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

  $container-height: map.get($theme, container-height);
  @include _set-height($container-height);

  $shape: map.get($theme, container-shape);
  @include _set-shape-radius($shape);
}

@mixin _container-fill-color($color-or-map) {
  @include state.default($selectors) {
    @include _set-container-fill-color(state.get-default-state($color-or-map));
  }

  @include state.hover($selectors) {
    @include _set-container-fill-color(state.get-hover-state($color-or-map));
  }

  @include state.focus($selectors) {
    @include _set-container-fill-color(state.get-focus-state($color-or-map));
  }

  @include state.pressed($selectors) {
    @include _set-container-fill-color(state.get-pressed-state($color-or-map));
  }

  @include state.disabled($selectors) {
    @include _set-container-fill-color(state.get-disabled-state($color-or-map));
  }
}

@mixin _ink-color($color-or-map) {
  @include state.default($selectors) {
    @include _set-ink-color(state.get-default-state($color-or-map));
  }

  @include state.hover($selectors) {
    @include _set-ink-color(state.get-hover-state($color-or-map));
  }

  @include state.focus($selectors) {
    @include _set-ink-color(state.get-focus-state($color-or-map));
  }

  @include state.pressed($selectors) {
    @include _set-ink-color(state.get-pressed-state($color-or-map));
  }

  @include state.disabled($selectors) {
    @include _set-ink-color(state.get-disabled-state($color-or-map));
  }
}

@mixin _set-height($height) {
  @include theme.property(height, $height);
}

@mixin _set-shape-radius($radius) {
  @include shape.radius($radius);

  .mdc-button__ripple {
    @include shape.radius($radius);
  }
}

@mixin _set-container-fill-color($color) {
  @include theme.property(background-color, $color);
}

@mixin _set-ink-color($color) {
  @include theme.property(color, $color);
}

@mixin _set-label-text-typography($typography-map) {
  $family: map.get($typography-map, family);
  $size: map.get($typography-map, size);
  $tracking: map.get($typography-map, tracking);
  $weight: map.get($typography-map, weight);
  $transform: map.get($typography-map, transform);

  @include theme.property(font-family, $family);
  @include theme.property(font-size, $size);
  @include theme.property(letter-spacing, $tracking);
  @include theme.property(font-weight, $weight);
  @include theme.property(text-transform, $transform);
}

@mixin container-padding($padding) {
  @include theme.property(padding-inline-start, $padding);
  @include theme.property(padding-inline-end, $padding);
}

@mixin container-with-icon-padding($icon-padding) {
  &.mdc-button--icon-trailing {
    @include theme.property(padding-inline-end, $icon-padding);
  }

  &.mdc-button--icon-leading {
    @include theme.property(padding-inline-start, $icon-padding);
  }
}