material-components_material-web/button/lib/_outlined-button.scss

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

// go/keep-sorted start
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../sass/shape';
@use '../../sass/theme';
@use '../../sass/typography';
@use '../../tokens';
@use './shared';
// go/keep-sorted end

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

$_custom-property-prefix: 'outlined-button';

@mixin theme($tokens) {
  $tokens: theme.validate-theme(
    _resolve-tokens(tokens.md-comp-outlined-button-values()),
    _resolve-tokens($tokens)
  );
  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
  $tokens: shape.resolve-tokens($tokens, 'container-shape');

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

@mixin styles() {
  $tokens: tokens.md-comp-outlined-button-values();

  // TODO(b/198759625): Remove once spacing tokens are formally added
  $tokens: map.set($tokens, 'spacing-leading', 24px);
  $tokens: map.set($tokens, 'spacing-trailing', 24px);
  $tokens: map.set($tokens, 'with-icon-spacing-leading', 16px);
  $tokens: map.set($tokens, 'with-icon-spacing-trailing', 24px);
  $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 24px);
  $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px);
  $tokens: _resolve-tokens($tokens);
  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
  $tokens: shape.resolve-tokens($tokens, 'container-shape');

  :host {
    @each $token, $value in $tokens {
      --_#{$token}: #{$value};
    }
  }

  .md3-button__outline {
    inset: 0;
    border-style: solid;
    position: absolute;
    box-sizing: border-box;
    border-color: var(--_outline-color);
    border-start-start-radius: var(--_container-shape-start-start);
    border-start-end-radius: var(--_container-shape-start-end);
    border-end-start-radius: var(--_container-shape-end-start);
    border-end-end-radius: var(--_container-shape-end-end);

    .md3-button:active & {
      border-color: var(--_pressed-outline-color);
    }

    .md3-button:disabled & {
      border-color: var(--_disabled-outline-color);
    }
  }

  .md3-button__outline,
  .md3-button__ripple {
    border-width: var(--_outline-width);
  }

  .md3-button__ripple {
    inline-size: calc(100% - 2 * var(--_outline-width));
    block-size: calc(100% - 2 * var(--_outline-width));
    border-style: solid;
    border-color: transparent;
  }
}

@function _resolve-tokens($tokens) {
  $tokens: shared.flatten-disabled-colors($tokens);
  $tokens: shared.remove-unsupported-tokens($tokens);
  $tokens: typography.resolve-tokens($tokens, 'label-text');
  @return $tokens;
}