@material/web 0.1.0-alpha.0

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

@@ -0,0 +1,382 @@
+//
+// 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/_filled-field.scss

@@ -0,0 +1,129 @@
+//
+// 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 '@material/web/motion/animation';
+@use './field-theme';
+
+$_animation-duration: 150ms;
+
+@mixin static-styles() {
+  .md3-field--filled {
+    .md3-field__container {
+      @include container;
+    }
+
+    &:not(.md3-field--disabled):hover {
+      .md3-field__state-layer {
+        @include container-state-layer-hover;
+      }
+    }
+
+    .md3-field__label--floating {
+      @include label-floating;
+    }
+  }
+
+  .md3-field__state-layer {
+    @include container-state-layer;
+  }
+
+  .md3-field__active-indicator {
+    @include active-indicator;
+
+    .md3-field--focused & {
+      @include active-indicator-focus;
+    }
+  }
+}
+
+@mixin container() {
+  // If bottom corner radii are set, prevent the active indicator from
+  // overflowing.
+  overflow: hidden;
+  // Needed for negative z-index below to place background and state layer
+  // behind content.
+  z-index: 0;
+
+  // ::before is used for background color so that opacity may be changed
+  // without affecting content
+  &::before,
+  // ::after is used for the state layer color and opacity
+  &::after {
+    border-radius: inherit;
+    content: '';
+    display: flex;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    z-index: -1;
+  }
+
+  &::after {
+    visibility: hidden;
+  }
+}
+
+@mixin container-state-layer() {
+  border-radius: inherit;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  visibility: hidden;
+  z-index: -1;
+}
+
+@mixin container-state-layer-hover() {
+  visibility: visible;
+}
+
+@mixin label-floating() {
+  position: absolute;
+  top: 0;
+}
+
+@mixin active-indicator() {
+  // Prevent click events on the indicator element since it has no width and
+  // causes bugs when handled by the foundation for updating transform-origin.
+  inset: auto 0 0 0;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+
+  &::before,
+  &::after {
+    border-bottom-style: solid;
+    inset: auto 0 0 0;
+    content: '';
+    position: absolute;
+    width: 100%;
+  }
+
+  // focused indicator
+  &::after {
+    opacity: 0;
+    transform: scaleX(0);
+    // The foundation needs to update the transform-origin style attribute in
+    // response to click events. Psuedo elements cannot have their style
+    // updated, but their transform-origin can be inherited.
+    transform-origin: inherit;
+    // Add two transitions: opacity and a delayed transform. With a non-delayed
+    // transform transition on the focus selector without an opacity transition,
+    // this will result in the indicator scaling on enter and fading on exit.
+    transition: animation.standard(opacity, $_animation-duration),
+      transform 0s ease $_animation-duration;
+  }
+}
+
+@mixin active-indicator-focus() {
+  &::after {
+    opacity: 1;
+    transform: scaleX(1);
+    transition: animation.standard(transform, $_animation-duration);
+  }
+}

package/field/lib/_label-theme.scss

@@ -0,0 +1,123 @@
+//
+// 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);
+  }
+}

package/field/lib/_label.scss

@@ -0,0 +1,49 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  .md3-field__label {
+    overflow: hidden;
+    max-width: 100%;
+    // The resting label at 100% height can block pointer events to the content
+    // if it's very long and spans the full width of the field. Additionally,
+    // selecting the label's text doesn't present a good UX, since the user
+    // selection should be re-focused to another element (such as the input)
+    // upon focusing. Finally, since the actual label elements are swapped, it
+    // is not easy to maintain the user's label text selection.
+    pointer-events: none;
+    // TODO: Check with design, should there be any transition from resting to
+    // floating when there is a mismatch between ellipsis, such as opacity
+    // transition?
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  .md3-field__label--resting {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    /*rtl:ignore*/
+    transform-origin: top left;
+  }
+
+  .md3-field__label--floating {
+    /*! Used in field.ts @queryAsync. go/css-conformance#unstyled-classes */
+  }
+
+  .md3-field__label--hidden {
+    opacity: 0;
+  }
+
+  .md3-field--no-label {
+    .md3-field__label {
+      display: none;
+    }
+  }
+}