@material/web 0.1.0-alpha.0 → 0.1.0-alpha.1

package/field/lib/_filled-field-theme.scss

@@ -1,382 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/shape';
-@use '@material/web/sass/theme';
-@use '@material/web/sass/var';
-@use '@material/web/tokens';
-@use './content-theme';
-@use './field-theme';
-@use './label-theme';
-@use './supporting-text-theme';
-
-$_default-deps: (
-  md-sys-color: tokens.md-sys-color-values-light-dynamic(),
-  md-sys-shape: tokens.md-sys-shape-values(),
-  md-sys-state: tokens.md-sys-state-values(),
-  md-sys-typescale: tokens.md-sys-typescale-values(),
-);
-
-@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
-  $text-field-values: tokens.md-comp-filled-text-field-values(
-    $deps,
-    $exclude-hardcoded-values
-  );
-  // TODO(b/203778922): Remove *-type when type composite tokens are removed
-  // Remove unused tokens.
-  $values: map.remove(
-    $text-field-values,
-    caret-color,
-    disabled-input-text-color,
-    disabled-input-text-opacity,
-    error-focus-caret-color,
-    error-focus-input-text-color,
-    error-hover-input-text-color,
-    error-input-text-color,
-    focus-input-text-color,
-    hover-input-text-color,
-    input-text-color,
-    input-text-font,
-    input-text-line-height,
-    input-text-size,
-    input-text-tracking,
-    input-text-type,
-    input-text-weight,
-    label-text-type,
-    supporting-text-type
-  );
-
-  // Add missing tokens.
-  $values: map.merge(
-    $values,
-    (
-      container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
-      container-padding-vertical: if($exclude-hardcoded-values, null, 8px),
-      content-color: map.get($text-field-values, input-text-color),
-      disabled-content-color:
-        map.get($text-field-values, disabled-input-text-color),
-      disabled-content-opacity:
-        map.get($text-field-values, disabled-input-text-opacity),
-      error-content-color: map.get($text-field-values, error-input-text-color),
-      error-focus-content-color:
-        map.get($text-field-values, error-focus-input-text-color),
-      error-hover-content-color:
-        map.get($text-field-values, error-hover-input-text-color),
-      focus-content-color: map.get($text-field-values, focus-input-text-color),
-      hover-content-color: map.get($text-field-values, hover-input-text-color),
-      supporting-text-padding: if($exclude-hardcoded-values, null, 16px),
-      supporting-text-padding-top: if($exclude-hardcoded-values, null, 4px),
-    )
-  );
-
-  @return $values;
-}
-
-$light-theme: values();
-$dark-theme: values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
-  ),
-  $exclude-hardcoded-values: true
-);
-
-@function _resolve-theme($theme, $resolvers) {
-  $theme: label-theme.resolve-theme($theme, $resolvers);
-  $theme: supporting-text-theme.resolve-theme($theme, $resolvers);
-  $theme: shape.resolve-theme(
-    $theme,
-    map.get($resolvers, shape),
-    container-shape
-  );
-  @return $theme;
-}
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  // Add resolved tokens so that $theme may specify them.
-  $reference: map.merge($light-theme, _resolve-theme($light-theme, $resolvers));
-  $theme: theme.validate-theme($reference, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, filled-field);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, filled-field);
-
-  @include field-theme.theme-styles($theme);
-  @include content-theme.theme-styles($theme);
-  @include label-theme.theme-styles($theme);
-  @include supporting-text-theme.theme-styles($theme);
-
-  @include _active-indicator-color(
-    (
-      default: map.get($theme, active-indicator-color),
-      disabled: map.get($theme, disabled-active-indicator-color),
-      focus: map.get($theme, focus-active-indicator-color),
-      hover: map.get($theme, hover-active-indicator-color),
-    )
-  );
-  @include _active-indicator-error-color(
-    (
-      default: map.get($theme, error-active-indicator-color),
-      focus: map.get($theme, error-focus-active-indicator-color),
-      hover: map.get($theme, error-hover-active-indicator-color),
-    )
-  );
-  @include _active-indicator-opacity(
-    (
-      disabled: map.get($theme, disabled-active-indicator-opacity),
-    )
-  );
-  @include _active-indicator-height(
-    (
-      default: map.get($theme, active-indicator-height),
-      disabled: map.get($theme, disabled-active-indicator-height),
-      focus: map.get($theme, focus-active-indicator-height),
-      hover: map.get($theme, hover-active-indicator-height),
-    )
-  );
-  @include _container-color(
-    (
-      default: map.get($theme, container-color),
-      disabled: map.get($theme, disabled-container-color),
-    )
-  );
-  @include _container-opacity(
-    (
-      disabled: map.get($theme, disabled-container-opacity),
-    )
-  );
-  @include _container-padding-horizontal(
-    map.get($theme, container-padding-horizontal)
-  );
-  @include _container-padding-vertical(
-    map.get($theme, container-padding-vertical)
-  );
-  @include _container-shape(
-    (
-      start-start: map.get($theme, container-shape-start-start),
-      start-end: map.get($theme, container-shape-start-end),
-      end-end: map.get($theme, container-shape-end-end),
-      end-start: map.get($theme, container-shape-end-start),
-    )
-  );
-  @include _floating-label-text-line-height(
-    map.get($theme, label-text-populated-line-height)
-  );
-  @include _state-layer-color(
-    (
-      hover: map.get($theme, hover-state-layer-color),
-    )
-  );
-  @include _state-layer-error-color(
-    (
-      hover: map.get($theme, error-hover-state-layer-color),
-    )
-  );
-  @include _state-layer-opacity(
-    (
-      hover: map.get($theme, hover-state-layer-opacity),
-    )
-  );
-  @include _state-layer-error-opacity(
-    (
-      hover: map.get($theme, error-hover-state-layer-opacity),
-    )
-  );
-}
-
-@mixin _active-indicator-color($colors) {
-  @include _set-active-indicator-color(map.get($colors, default));
-
-  &:hover {
-    @include _set-active-indicator-color(map.get($colors, hover));
-  }
-
-  // Focus is on a separate element and does not need a focus selector
-  @include _set-active-indicator-focus-color(map.get($colors, focus));
-
-  &.md3-field--disabled {
-    @include _set-active-indicator-color(map.get($colors, disabled));
-  }
-}
-
-@mixin _set-active-indicator-color($color) {
-  .md3-field__active-indicator::before {
-    border-bottom-color: $color;
-  }
-}
-
-@mixin _set-active-indicator-focus-color($color) {
-  .md3-field__active-indicator::after {
-    border-bottom-color: $color;
-  }
-}
-
-@mixin _active-indicator-error-color($colors) {
-  &:not(.md3-field--disabled).md3-field--error {
-    @include _active-indicator-color($colors);
-  }
-}
-
-@mixin _active-indicator-opacity($opacities) {
-  @include _set-active-indicator-opacity(map.get($opacities, default));
-
-  &.md3-field--disabled {
-    @include _set-active-indicator-opacity(map.get($opacities, disabled));
-  }
-}
-
-@mixin _set-active-indicator-opacity($opacity) {
-  .md3-field__active-indicator::before {
-    opacity: $opacity;
-  }
-}
-
-@mixin _active-indicator-height($heights) {
-  @include _set-non-focus-active-indicator-height(map.get($heights, default));
-
-  &:hover {
-    @include _set-non-focus-active-indicator-height(map.get($heights, hover));
-  }
-
-  &.md3-field--disabled {
-    @include _set-non-focus-active-indicator-height(
-      map.get($heights, disabled)
-    );
-  }
-
-  .md3-field__active-indicator {
-    &::after {
-      // Focus is on a different element and does not need state selectors
-      border-bottom-width: map.get($heights, focus);
-    }
-  }
-}
-
-@mixin _set-non-focus-active-indicator-height($height) {
-  .md3-field__active-indicator {
-    &::before {
-      border-bottom-width: $height;
-    }
-  }
-}
-
-@mixin _container-color($colors) {
-  @include _set-container-color(map.get($colors, default));
-
-  &.md3-field--disabled {
-    @include _set-container-color(map.get($colors, disabled));
-  }
-}
-
-@mixin _set-container-color($color) {
-  .md3-field__container {
-    &::before {
-      background: $color;
-    }
-  }
-}
-
-@mixin _container-opacity($opacities) {
-  @include _set-container-opacity(map.get($opacities, default));
-
-  &.md3-field--disabled {
-    @include _set-container-opacity(map.get($opacities, disabled));
-  }
-}
-
-@mixin _set-container-opacity($opacity) {
-  .md3-field__container {
-    &::before {
-      opacity: $opacity;
-    }
-  }
-}
-
-@mixin _container-padding-horizontal($padding) {
-  &:not(.md3-field--with-start) {
-    .md3-field__start {
-      padding-inline-start: $padding;
-    }
-  }
-
-  &:not(.md3-field--with-end) {
-    .md3-field__end {
-      padding-inline-end: $padding;
-    }
-  }
-}
-
-@mixin _container-padding-vertical($padding) {
-  .md3-field__container {
-    padding-top: $padding;
-    padding-bottom: $padding;
-  }
-}
-
-@mixin _container-shape($shape) {
-  .md3-field__container {
-    border-start-start-radius: map.get($shape, start-start);
-    border-start-end-radius: map.get($shape, start-end);
-    border-end-end-radius: map.get($shape, end-end);
-    border-end-start-radius: map.get($shape, end-start);
-  }
-}
-
-@mixin _floating-label-text-line-height($line-height) {
-  &:not(.md3-field--no-label) {
-    .md3-field__middle {
-      padding-top: $line-height;
-    }
-  }
-}
-
-@mixin _state-layer-color($colors) {
-  &:hover {
-    @include _set-state-layer-color(map.get($colors, hover));
-  }
-}
-
-@mixin _set-state-layer-color($color) {
-  .md3-field__state-layer {
-    background: $color;
-  }
-}
-
-@mixin _state-layer-error-color($colors) {
-  &:not(.md3-field--disabled).md3-field--error {
-    @include _state-layer-color($colors);
-  }
-}
-
-@mixin _state-layer-opacity($opacities) {
-  &:hover {
-    @include _set-state-layer-opactiy(map.get($opacities, hover));
-  }
-}
-
-@mixin _set-state-layer-opactiy($opacity) {
-  .md3-field__state-layer {
-    opacity: $opacity;
-  }
-}
-
-@mixin _state-layer-error-opacity($opacities) {
-  &:not(.md3-field--disabled).md3-field--error {
-    @include _state-layer-opacity($opacities);
-  }
-}

package/field/lib/_label-theme.scss

@@ -1,123 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use '@material/web/sass/typography';
-
-@function resolve-theme($theme, $resolvers) {
-  @return typography.resolve-theme(
-    $theme,
-    map.get($resolvers, typography),
-    label-text,
-    label-text-populated
-  );
-}
-
-@mixin theme-styles($theme) {
-  @include _label-color(
-    (
-      default: map.get($theme, label-text-color),
-      focus: map.get($theme, focus-label-text-color),
-      hover: map.get($theme, hover-label-text-color),
-      disabled: map.get($theme, disabled-label-text-color),
-    )
-  );
-  @include _label-error-color(
-    (
-      default: map.get($theme, error-label-text-color),
-      focus: map.get($theme, error-focus-label-text-color),
-      hover: map.get($theme, error-hover-label-text-color),
-    )
-  );
-  @include _label-typography(
-    (
-      font: map.get($theme, label-text-font),
-      tracking: map.get($theme, label-text-tracking),
-      weight: map.get($theme, label-text-weight),
-    )
-  );
-  @include _label-typography-resting(
-    (
-      size: map.get($theme, label-text-size),
-      line-height: map.get($theme, label-text-line-height),
-    )
-  );
-  @include _label-typography-floating(
-    (
-      size: map.get($theme, label-text-populated-size),
-      line-height: map.get($theme, label-text-populated-line-height),
-    )
-  );
-  @include _label-opacity(
-    (
-      disabled: map.get($theme, disabled-label-text-opacity),
-    )
-  );
-}
-
-@mixin _label-color($colors) {
-  @include _set-label-color(map.get($colors, default));
-
-  &:hover {
-    @include _set-label-color(map.get($colors, hover));
-  }
-
-  &.md3-field--focused {
-    @include _set-label-color(map.get($colors, focus));
-  }
-
-  &.md3-field--disabled {
-    @include _set-label-color(map.get($colors, disabled));
-  }
-}
-
-@mixin _set-label-color($color) {
-  .md3-field__label {
-    color: $color;
-  }
-}
-
-@mixin _label-error-color($colors) {
-  &:not(.md3-field--disabled).md3-field--error {
-    @include _label-color($colors);
-  }
-}
-
-@mixin _label-opacity($opacities) {
-  &.md3-field--disabled {
-    @include _set-label-opacity(map.get($opacities, disabled));
-  }
-}
-
-@mixin _set-label-opacity($opacity) {
-  .md3-field__label {
-    &:not(.md3-field__label--hidden) {
-      opacity: $opacity;
-    }
-  }
-}
-
-@mixin _label-typography($font) {
-  .md3-field__label {
-    @include typography.theme-styles($font);
-  }
-}
-
-@mixin _label-typography-floating($font) {
-  .md3-field__label--floating {
-    @include typography.theme-styles($font);
-  }
-}
-
-@mixin _label-typography-resting($font) {
-  .md3-field__label--resting {
-    @include typography.theme-styles($font);
-  }
-}