material-components_material-web/select/internal/_filled-select.scss

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

// go/keep-sorted start
@use 'sass:list';
@use 'sass:map';
@use 'sass:meta';
// go/keep-sorted end
// go/keep-sorted start
@use '../../field/filled-field';
@use '../../tokens';
// go/keep-sorted end

@mixin theme($tokens) {
  $supported-tokens: list.join(
    tokens.$md-comp-filled-select-supported-tokens,
    (
      'text-field-container-shape-start-start',
      'text-field-container-shape-start-end',
      'text-field-container-shape-end-end',
      'text-field-container-shape-end-start'
    )
  );

  @each $token, $value in $tokens {
    @if list.index($supported-tokens, $token) == null {
      @error 'Token `#{$token}` is not a supported token.';
    }

    @if $token ==
      'text-field-container-shape' and
      meta.type-of($value) ==
      'list'
    {
      @error 'Filled select `text-field-container-shape` may not be specified as a list. Use logical (`*-start-start`) tokens instead.';
    }

    @if $value {
      --md-filled-select-#{$token}: #{$value};
    }
  }
}

@mixin styles() {
  $tokens: tokens.md-comp-filled-select-values();

  :host {
    @each $token, $value in $tokens {
      @if $token == 'text-field-container-shape' {
        // Support logical shape properties. Filled text field has a default
        // oblong shape, which is why the fallback value is unique per corner.
        --_text-field-container-shape-start-start: var(
          --md-filled-select-text-field-container-shape-start-start,
          var(
            --md-filled-select-text-field-container-shape,
            #{list.nth($value, 1)}
          )
        );
        --_text-field-container-shape-start-end: var(
          --md-filled-select-text-field-container-shape-start-end,
          var(
            --md-filled-select-text-field-container-shape,
            #{list.nth($value, 2)}
          )
        );
        --_text-field-container-shape-end-end: var(
          --md-filled-select-text-field-container-shape-end-end,
          var(
            --md-filled-select-text-field-container-shape,
            #{list.nth($value, 3)}
          )
        );
        --_text-field-container-shape-end-start: var(
          --md-filled-select-text-field-container-shape-end-start,
          var(
            --md-filled-select-text-field-container-shape,
            #{list.nth($value, 4)}
          )
        );
      } @else {
        --_#{$token}: var(--md-filled-select-#{$token}, #{$value});
      }
    }

    @include filled-field.theme(
      (
        // go/keep-sorted start
        'active-indicator-color': var(--_text-field-active-indicator-color),
        'active-indicator-height': var(--_text-field-active-indicator-height),
        'container-color': var(--_text-field-container-color),
        'container-shape-end-end': var(--_text-field-container-shape-end-end),
        'container-shape-end-start':
          var(--_text-field-container-shape-end-start),
        'container-shape-start-end':
          var(--_text-field-container-shape-start-end),
        'container-shape-start-start':
          var(--_text-field-container-shape-start-start),
        'content-color': var(--_text-field-input-text-color),
        'content-font': var(--_text-field-input-text-font),
        'content-line-height': var(--_text-field-input-text-line-height),
        'content-size': var(--_text-field-input-text-size),
        'content-weight': var(--_text-field-input-text-weight),
        'disabled-active-indicator-color':
          var(--_text-field-disabled-active-indicator-color),
        'disabled-active-indicator-height':
          var(--_text-field-disabled-active-indicator-height),
        'disabled-active-indicator-opacity':
          var(--_text-field-disabled-active-indicator-opacity),
        'disabled-container-color': var(--_text-field-disabled-container-color),
        'disabled-container-opacity':
          var(--_text-field-disabled-container-opacity),
        'disabled-content-color': var(--_text-field-disabled-input-text-color),
        'disabled-content-opacity':
          var(--_text-field-disabled-input-text-opacity),
        'disabled-label-text-color':
          var(--_text-field-disabled-label-text-color),
        'disabled-label-text-opacity':
          var(--_text-field-disabled-label-text-opacity),
        'disabled-leading-content-color':
          var(--_text-field-disabled-leading-icon-color),
        'disabled-leading-content-opacity':
          var(--_text-field-disabled-leading-icon-opacity),
        'disabled-supporting-text-color':
          var(--_text-field-disabled-supporting-text-color),
        'disabled-supporting-text-opacity':
          var(--_text-field-disabled-supporting-text-opacity),
        'disabled-trailing-content-color':
          var(--_text-field-disabled-trailing-icon-color),
        'disabled-trailing-content-opacity':
          var(--_text-field-disabled-trailing-icon-opacity),
        'error-active-indicator-color':
          var(--_text-field-error-active-indicator-color),
        'error-content-color': var(--_text-field-error-input-text-color),
        'error-focus-active-indicator-color':
          var(--_text-field-error-focus-active-indicator-color),
        'error-focus-content-color':
          var(--_text-field-error-focus-input-text-color),
        'error-focus-label-text-color':
          var(--_text-field-error-focus-label-text-color),
        'error-focus-leading-content-color':
          var(--_text-field-error-focus-leading-icon-color),
        'error-focus-supporting-text-color':
          var(--_text-field-error-focus-supporting-text-color),
        'error-focus-trailing-content-color':
          var(--_text-field-error-focus-trailing-icon-color),
        'error-hover-active-indicator-color':
          var(--_text-field-error-hover-active-indicator-color),
        'error-hover-content-color':
          var(--_text-field-error-hover-input-text-color),
        'error-hover-label-text-color':
          var(--_text-field-error-hover-label-text-color),
        'error-hover-leading-content-color':
          var(--_text-field-error-hover-leading-icon-color),
        'error-hover-state-layer-color':
          var(--_text-field-error-hover-state-layer-color),
        'error-hover-state-layer-opacity':
          var(--_text-field-error-hover-state-layer-opacity),
        'error-hover-supporting-text-color':
          var(--_text-field-error-hover-supporting-text-color),
        'error-hover-trailing-content-color':
          var(--_text-field-error-hover-trailing-icon-color),
        'error-label-text-color': var(--_text-field-error-label-text-color),
        'error-leading-content-color':
          var(--_text-field-error-leading-icon-color),
        'error-supporting-text-color':
          var(--_text-field-error-supporting-text-color),
        'error-trailing-content-color':
          var(--_text-field-error-trailing-icon-color),
        'focus-active-indicator-color':
          var(--_text-field-focus-active-indicator-color),
        'focus-active-indicator-height':
          var(--_text-field-focus-active-indicator-height),
        'focus-content-color': var(--_text-field-focus-input-text-color),
        'focus-label-text-color': var(--_text-field-focus-label-text-color),
        'focus-leading-content-color':
          var(--_text-field-focus-leading-icon-color),
        'focus-supporting-text-color':
          var(--_text-field-focus-supporting-text-color),
        'focus-trailing-content-color':
          var(--_text-field-focus-trailing-icon-color),
        'hover-active-indicator-color':
          var(--_text-field-hover-active-indicator-color),
        'hover-active-indicator-height':
          var(--_text-field-hover-active-indicator-height),
        'hover-content-color': var(--_text-field-hover-input-text-color),
        'hover-label-text-color': var(--_text-field-hover-label-text-color),
        'hover-leading-content-color':
          var(--_text-field-hover-leading-icon-color),
        'hover-state-layer-color': var(--_text-field-hover-state-layer-color),
        'hover-state-layer-opacity':
          var(--_text-field-hover-state-layer-opacity),
        'hover-supporting-text-color':
          var(--_text-field-hover-supporting-text-color),
        'hover-trailing-content-color':
          var(--_text-field-hover-trailing-icon-color),
        'label-text-color': var(--_text-field-label-text-color),
        'label-text-font': var(--_text-field-label-text-font),
        'label-text-line-height': var(--_text-field-label-text-line-height),
        'label-text-populated-line-height':
          var(--_text-field-label-text-populated-line-height),
        'label-text-populated-size':
          var(--_text-field-label-text-populated-size),
        'label-text-size': var(--_text-field-label-text-size),
        'label-text-weight': var(--_text-field-label-text-weight),
        'leading-content-color': var(--_text-field-leading-icon-color),
        'supporting-text-color': var(--_text-field-supporting-text-color),
        'supporting-text-font': var(--_text-field-supporting-text-font),
        'supporting-text-line-height':
          var(--_text-field-supporting-text-line-height),
        'supporting-text-size': var(--_text-field-supporting-text-size),
        'supporting-text-weight': var(--_text-field-supporting-text-weight),
        'trailing-content-color': var(--_text-field-trailing-icon-color),
        // go/keep-sorted end
      )
    );
  }

  [has-start] .icon.leading {
    font-size: var(--_text-field-leading-icon-size);
    height: var(--_text-field-leading-icon-size);
    width: var(--_text-field-leading-icon-size);
  }

  .icon.trailing {
    font-size: var(--_text-field-trailing-icon-size);
    height: var(--_text-field-trailing-icon-size);
    width: var(--_text-field-trailing-icon-size);
  }
}