@material/mwc-button/_button-theme.scss

Material Design button web component

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

@use 'sass:map';
@use 'sass:selector';
@use '@material/elevation/elevation-theme';
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
@use '@material/shape/shape';
@use '@material/theme/css';
@use '@material/theme/theme-color';
@use '@material/theme/shadow-dom';
@use '@material/button/button-theme';
@use '@material/mwc-ripple/ripple-theme';

$_primary: theme-color.$primary;
$_on-primary: theme-color.$on-primary;
$_primary-opacities: mdc-ripple-theme.$dark-ink-opacities;
$_on-primary-opacities: mdc-ripple-theme.$light-ink-opacities;

$light-theme: (
  text: (
    label-color: $_primary,
    label-disabled-color: button-theme.$disabled-ink-color,
    label-focus-color: null,
    label-hover-color: null,
    label-press-color: null,
    shape: shape.$small-component-radius,
  ),
  outlined: (
    label-color: $_primary,
    label-disabled-color: button-theme.$disabled-ink-color,
    label-focus-color: null,
    label-hover-color: null,
    label-press-color: null,
    outline-color: null,
    outline-disabled-color: null,
    shape: shape.$small-component-radius,
  ),
  contained: (
    container-color: $_primary,
    container-disabled-color: button-theme.$disabled-container-color,
    label-color: $_on-primary,
    label-disabled-color: button-theme.$disabled-ink-color,
    label-focus-color: null,
    label-hover-color: null,
    label-press-color: null,
    shape: shape.$small-component-radius,
    elevation-shadow-color: elevation-theme.$baseline-color,
  ),
);

@mixin theme($theme: $light-theme) {
  // text buttons
  $text: map.get($theme, text);
  @if $text {
    @include _text-theme($text);
  }

  // outlined buttons
  $outlined: map.get($theme, outlined);
  @if $outlined {
    @include shadow-dom.host-aware(selector.append(&, '[outlined]')) {
      @include _outlined-theme($outlined);
    }
  }

  // contained buttons
  $contained: map.get($theme, contained);
  @if $contained {
    @include shadow-dom.host-aware(selector.append(&, '[raised]')) {
      @include _raised-elevations($contained);
    }
    @include shadow-dom.host-aware(
      selector.append(&, '[raised]'),
      selector.append(&, '[unelevated]')
    ) {
      @include _contained-theme($contained);
    }
  }
}

@mixin _text-theme($text) {
  @include css.declaration(--mdc-theme-primary, map.get($text, label-color));
  @include css.declaration(
    --mdc-button-disabled-ink-color,
    map.get($text, label-disabled-color)
  );
  @include shadow-dom.host-aware(selector.append(&, ':hover')) {
    @include css.declaration(
      --mdc-theme-primary,
      map.get($text, label-hover-color)
    );
  }
  @include shadow-dom.host-aware(selector.append(&, ':focus-within')) {
    @include css.declaration(
      --mdc-theme-primary,
      map.get($text, label-focus-color)
    );
  }
  @include shadow-dom.host-aware(selector.append(&, ':active')) {
    @include css.declaration(
      --mdc-theme-primary,
      map.get($text, label-pressed-color)
    );
  }
  // TODO(dfreedm): infer ripple opacities from label-color
  @include ripple-theme.theme-deprecated(
    (
      state: map.get($text, ripple-color),
      opacity: map.get($text, ripple-opacity),
    )
  );
  @include css.declaration(--mdc-shape-small, map.get($text, shape));
}

@mixin _outlined-theme($outlined) {
  @include css.declaration(
    --mdc-theme-primary,
    map.get($outlined, label-color)
  );
  @include css.declaration(
    --mdc-button-disabled-ink-color,
    map.get($outlined, label-disabled-color)
  );

  @include css.declaration(
    --mdc-button-outline-color,
    map.get($outlined, outline-color)
  );
  @include css.declaration(
    --mdc-button-disabled-outline-color,
    map.get($outlined, outline-disabled-color)
  );

  @include shadow-dom.host-aware(selector.append(&, ':hover')) {
    @include css.declaration(
      --mdc-theme-primary,
      map.get($outlined, label-hover-color)
    );

    @include css.declaration(
      --mdc-button-outline-color,
      map.get($outlined, outline-hover-color)
    );
  }

  @include shadow-dom.host-aware(
    selector.append(&, ':focus'),
    selector.append(&, ':focus-within')
  ) {
    @include css.declaration(
      --mdc-theme-primary,
      map.get($outlined, label-focus-color)
    );

    @include css.declaration(
      --mdc-button-outline-color,
      map.get($outlined, outline-focus-color)
    );
  }

  @include shadow-dom.host-aware(selector.append(&, ':active')) {
    @include css.declaration(
      --mdc-theme-primary,
      map.get($outlined, label-pressed-color)
    );

    @include css.declaration(
      --mdc-button-outline-color,
      map.get($outlined, outline-pressed-color)
    );
  }

  // TODO(dfreedm): infer ripple opacities from label-color
  @include ripple-theme.theme-deprecated(
    (
      state: map.get($outlined, ripple-color),
      opacity: map.get($outlined, ripple-opacity),
    )
  );
  @include css.declaration(--mdc-shape-small, map.get($outlined, shape));
}

@mixin _raised-elevations($contained) {
  $elevation-shadow-color: map.get($contained, elevation-shadow-color);

  @if $elevation-shadow-color {
    @include css.declaration(
      --mdc-button-raised-box-shadow,
      elevation-theme.elevation-box-shadow(2, $elevation-shadow-color)
    );

    @include css.declaration(
      --mdc-button-raised-box-shadow-active,
      elevation-theme.elevation-box-shadow(8, $elevation-shadow-color)
    );

    @include css.declaration(
      --mdc-button-raised-box-shadow-disabled,
      elevation-theme.elevation-box-shadow(0, $elevation-shadow-color)
    );

    @include css.declaration(
      --mdc-button-raised-box-shadow-hover,
      elevation-theme.elevation-box-shadow(4, $elevation-shadow-color)
    );

    @include css.declaration(
      --mdc-button-raised-box-shadow-focus,
      elevation-theme.elevation-box-shadow(4, $elevation-shadow-color)
    );
  }
}

@mixin _contained-theme($contained) {
  @include css.declaration(
    --mdc-theme-primary,
    map.get($contained, container-color)
  );
  @include css.declaration(
    --mdc-button-disabled-fill-color,
    map.get($contained, container-disabled-color)
  );
  @include css.declaration(
    --mdc-theme-on-primary,
    map.get($contained, label-color)
  );
  @include css.declaration(
    --mdc-button-disabled-ink-color,
    map.get($contained, label-disabled-color)
  );
  @include shadow-dom.host-aware(selector.append(&, ':hover')) {
    @include css.declaration(
      --mdc-theme-on-primary,
      map.get($contained, label-hover-color)
    );
  }

  @include shadow-dom.host-aware(
    selector.append(&, ':focus'),
    selector.append(&, ':focus-within')
  ) {
    @include css.declaration(
      --mdc-theme-on-primary,
      map.get($contained, label-focus-color)
    );
  }

  @include shadow-dom.host-aware(selector.append(&, ':active')) {
    @include css.declaration(
      --mdc-theme-on-primary,
      map.get($contained, label-pressed-color)
    );
  }

  // TODO(dfreedm): infer ripple opacities from label-color
  @include ripple-theme.theme-deprecated(
    (
      state: map.get($contained, ripple-color),
      opacity: map.get($contained, ripple-opacity),
    )
  );
  @include css.declaration(--mdc-shape-small, map.get($contained, shape));
}