@material/web 1.0.0-pre.2 → 1.0.0-pre.4

package/field/lib/_content.scss

@@ -3,14 +3,17 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
+@use 'sass:map';
 @use 'sass:math';
-@use '../../motion/animation';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
 // Duration of the label animation.
-$_label-duration: 150ms;
+$_label-duration: map.get($_md-sys-motion, 'duration-short3');
 // Duration of the content's visibility animation.
 $_visible-duration: math.round(math.div($_label-duration * 5, 9));
 // Short delay when entering (focusing/populating) so that the label may move
@@ -18,11 +21,10 @@ $_visible-duration: math.round(math.div($_label-duration * 5, 9));
 $_enter-delay: $_label-duration - $_visible-duration;
 
 @mixin styles() {
-  .md3-field__start,
-  .md3-field__middle,
-  .md3-field__end {
+  .start,
+  .middle,
+  .end {
     display: flex;
-    align-items: center;
     box-sizing: border-box;
     height: 100%;
     // Relative position for absolutely positioned labels (to avoid interfering
@@ -30,12 +32,36 @@ $_enter-delay: $_label-duration - $_visible-duration;
     position: relative;
   }
 
-  .md3-field__start,
-  .md3-field__end {
+  .start {
+    color: var(--_leading-content-color);
+  }
+
+  .end {
+    color: var(--_trailing-content-color);
+  }
+
+  .start,
+  .end {
+    align-items: center;
     justify-content: center;
   }
 
-  .md3-field__middle {
+  // TODO(b/239188049): remove when layout tokens are ready
+  .with-start .start,
+  .with-end .end {
+    min-width: 48px;
+  }
+
+  .with-start .start {
+    margin-inline-end: 4px;
+  }
+
+  .with-end .end {
+    margin-inline-start: 4px;
+  }
+
+  .middle {
+    align-items: stretch;
     // The container of the field aligns sections by "center". Only the middle
     // section opts in to baseline alignment.
     //
@@ -47,66 +73,103 @@ $_enter-delay: $_label-duration - $_visible-duration;
     flex: 1;
   }
 
-  .md3-field__content {
-    display: flex;
-    flex: 1;
-    opacity: 0;
-    transition: animation.standard(opacity, $_visible-duration);
+  .content {
     // Content elements provided to the field (such as <input>) may use
     // `currentColor` to inherit this property.
     color: var(--_content-color);
+    display: flex;
+    flex: 1;
+    // Content elements provided to the field (such as <input>) may inherit font
+    font: var(--_content-type);
+    opacity: 0;
+    transition: opacity $_visible-duration
+      map.get($_md-sys-motion, 'easing-emphasized');
+  }
+
+  .no-label .content,
+  .focused .content,
+  .populated .content {
+    opacity: 1;
+    transition-delay: $_enter-delay;
+  }
+
+  :hover .content {
+    color: var(--_hover-content-color);
+  }
+
+  :hover .start {
+    color: var(--_hover-leading-content-color);
+  }
+
+  :hover .end {
+    color: var(--_hover-trailing-content-color);
+  }
+
+  .focused .content {
+    color: var(--_focus-content-color);
+  }
+
+  .focused .start {
+    color: var(--_focus-leading-content-color);
+  }
 
-    .md3-field--no-label &,
-    .md3-field--focused &,
-    .md3-field--populated & {
-      opacity: 1;
-      transition-delay: $_enter-delay;
-    }
+  .focused .end {
+    color: var(--_focus-trailing-content-color);
   }
 
-  .md3-field--disabled {
-    &.md3-field--no-label,
-    &.md3-field--focused,
-    &.md3-field--populated {
-      .md3-field__content {
-        opacity: var(--_disabled-content-opacity);
-      }
-    }
+  .disabled .content {
+    color: var(--_disabled-content-color);
   }
 
-  :hover {
-    .md3-field__content {
-      color: var(--_hover-content-color);
-    }
+  .disabled.no-label .content,
+  .disabled.focused .content,
+  .disabled.populated .content {
+    opacity: var(--_disabled-content-opacity);
   }
 
-  .md3-field--focused {
-    .md3-field__content {
-      color: var(--_focus-content-color);
-    }
+  .disabled .start {
+    color: var(--_disabled-leading-content-color);
+    opacity: var(--_disabled-leading-content-opacity);
   }
 
-  .md3-field--disabled {
-    .md3-field__content {
-      color: var(--_disabled-content-color);
-    }
+  .disabled .end {
+    color: var(--_disabled-trailing-content-color);
+    opacity: var(--_disabled-trailing-content-opacity);
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__content {
-      color: var(--_error-content-color);
-    }
+  .error .content {
+    color: var(--_error-content-color);
+  }
+
+  .error .start {
+    color: var(--_error-leading-content-color);
+  }
 
-    &:hover {
-      .md3-field__content {
-        color: var(--_error-hover-content-color);
-      }
-    }
+  .error .end {
+    color: var(--_error-trailing-content-color);
+  }
+
+  .error:hover .content {
+    color: var(--_error-hover-content-color);
+  }
+
+  .error:hover .start {
+    color: var(--_error-hover-leading-content-color);
+  }
+
+  .error:hover .end {
+    color: var(--_error-hover-trailing-content-color);
+  }
+
+  .error.focused .content {
+    color: var(--_error-focus-content-color);
+  }
+
+  .error.focused .start {
+    color: var(--_error-focus-leading-content-color);
+  }
 
-    &.md3-field--focused {
-      .md3-field__content {
-        color: var(--_error-focus-content-color);
-      }
-    }
+  .error.focused .end {
+    color: var(--_error-focus-trailing-content-color);
   }
 }

package/field/lib/_filled-field.scss

@@ -3,34 +3,31 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
 @use 'sass:map';
-@use '../../motion/animation';
-@use '../../sass/resolvers';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../tokens';
 @use './md-comp-filled-field';
-@use './shared';
+// go/keep-sorted end
 
-$_animation-duration: 150ms;
+$_md-sys-motion: tokens.md-sys-motion-values();
 
 @mixin theme($tokens) {
   $reference: md-comp-filled-field.values();
-  // Add resolved tokens so that $theme may specify them.
-  $reference: map.merge($reference, shared.resolve-tokens($reference));
   $tokens: theme.validate-theme($reference, $tokens);
-  $tokens: shared.resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, filled-field);
+  $tokens: theme.create-theme-vars($tokens, 'filled-field');
+  $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
   $tokens: md-comp-filled-field.values();
-  $tokens: shared.resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, filled-field);
+  $tokens: theme.create-theme-vars($tokens, 'filled-field');
+  $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
   :host {
     @each $token, $value in $tokens {
@@ -38,63 +35,35 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__container {
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-end-radius: var(--_container-shape-end-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    // 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 {
-      background: var(--_container-color);
-    }
+  .background,
+  .state-layer {
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
 
-    // ::after is used for the state layer color and opacity
-    &::after {
-      visibility: hidden;
-    }
+  .background {
+    background: var(--_container-color);
+  }
 
-    &::before,
-    &::after {
-      border-radius: inherit;
-      content: '';
-      display: flex;
-      height: 100%;
-      position: absolute;
-      width: 100%;
-      z-index: -1;
-    }
+  .state-layer {
+    visibility: hidden;
   }
 
-  .md3-field__label--floating {
-    position: absolute;
-    top: 0;
+  .field:not(.disabled):hover .state-layer {
+    visibility: visible;
   }
 
-  .md3-field__state-layer {
-    border-radius: inherit;
-    height: 100%;
+  .label.floating {
     position: absolute;
-    width: 100%;
-    visibility: hidden;
-    z-index: -1;
-
-    .md3-field:not(.md3-field--disabled):hover & {
-      visibility: visible;
-    }
+    top: 0;
   }
 
-  .md3-field__active-indicator {
+  .active-indicator {
+    inset: auto 0 0 0;
     // 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%;
@@ -112,100 +81,74 @@ $_animation-duration: 150ms;
     // focused indicator
     &::after {
       opacity: 0;
-      transform: scaleX(0);
-      // The element 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;
-    }
-
-    .md3-field--focused & {
-      &::after {
-        opacity: 1;
-        transform: scaleX(1);
-        transition: animation.standard(transform, $_animation-duration);
-      }
+      transition: opacity map.get($_md-sys-motion, 'duration-short3')
+        map.get($_md-sys-motion, 'easing-emphasized');
     }
   }
 
-  .md3-field:not(.md3-field--with-start) {
-    .md3-field__start {
-      padding-inline-start: var(--_container-padding-horizontal);
-    }
+  .focused .active-indicator::after {
+    opacity: 1;
   }
 
-  .md3-field:not(.md3-field--with-end) {
-    .md3-field__end {
-      padding-inline-end: var(--_container-padding-horizontal);
-    }
+  .field:not(.with-start) .start {
+    padding-inline-start: var(--_container-padding-horizontal);
   }
 
-  .md3-field:not(.md3-field--no-label) {
-    .md3-field__container {
-      padding-bottom: var(--_with-label-container-padding-vertical);
-      padding-top: var(--_with-label-container-padding-vertical);
-    }
+  .field:not(.with-end) .end {
+    padding-inline-end: var(--_container-padding-horizontal);
+  }
 
-    .md3-field__middle {
-      padding-top: var(--_label-text-populated-line-height);
-    }
+  .field:not(.no-label) .container {
+    padding-bottom: var(--_with-label-container-padding-vertical);
+    padding-top: var(--_with-label-container-padding-vertical);
   }
 
-  :hover {
-    .md3-field__active-indicator::before {
-      border-bottom-color: var(--_hover-active-indicator-color);
-      border-bottom-width: var(--_hover-active-indicator-height);
-    }
+  .field:not(.no-label) .middle {
+    padding-top: var(--_label-text-populated-line-height);
+  }
 
-    .md3-field__state-layer {
-      background: var(--_hover-state-layer-color);
-      opacity: var(--_hover-state-layer-opacity);
-    }
+  :hover .active-indicator::before {
+    border-bottom-color: var(--_hover-active-indicator-color);
+    border-bottom-width: var(--_hover-active-indicator-height);
   }
 
   // Focus is on a separate element and does not need a focus selector
-  .md3-field__active-indicator::after {
+  .active-indicator::after {
     border-bottom-color: var(--_focus-active-indicator-color);
     border-bottom-width: var(--_focus-active-indicator-height);
   }
 
-  .md3-field--disabled {
-    .md3-field__active-indicator::before {
-      border-bottom-color: var(--_disabled-active-indicator-color);
-      border-bottom-width: var(--_disabled-active-indicator-height);
-      opacity: var(--_disabled-active-indicator-opacity);
-    }
+  :hover .state-layer {
+    background: var(--_hover-state-layer-color);
+    opacity: var(--_hover-state-layer-opacity);
+  }
 
-    .md3-field__container::before {
-      background: var(--_disabled-container-color);
-      opacity: var(--_disabled-container-opacity);
-    }
+  .disabled .active-indicator::before {
+    border-bottom-color: var(--_disabled-active-indicator-color);
+    border-bottom-width: var(--_disabled-active-indicator-height);
+    opacity: var(--_disabled-active-indicator-opacity);
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__active-indicator::before {
-      border-bottom-color: var(--_error-active-indicator-color);
-    }
+  .disabled .background {
+    background: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  .error .active-indicator::before {
+    border-bottom-color: var(--_error-active-indicator-color);
+  }
 
-    &:hover {
-      .md3-field__active-indicator::before {
-        border-bottom-color: var(--_error-hover-active-indicator-color);
-      }
+  .error:hover .active-indicator::before {
+    border-bottom-color: var(--_error-hover-active-indicator-color);
+  }
 
-      .md3-field__state-layer {
-        background: var(--_error-hover-state-layer-color);
-        opacity: var(--_error-hover-state-layer-opacity);
-      }
-    }
+  .error:hover .state-layer {
+    background: var(--_error-hover-state-layer-color);
+    opacity: var(--_error-hover-state-layer-opacity);
+  }
 
-    // Focus is on a separate element and does not need a focus selector
-    .md3-field__active-indicator::after {
-      border-bottom-color: var(--_error-focus-active-indicator-color);
-    }
+  // Focus is on a separate element and does not need a focus selector
+  .error .active-indicator::after {
+    border-bottom-color: var(--_error-focus-active-indicator-color);
   }
 }

package/field/lib/_label.scss

@@ -3,13 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@use '../../sass/typography';
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @mixin styles() {
-  .md3-field__label {
+  .label {
     color: var(--_label-text-color);
     overflow: hidden;
     max-width: 100%;
@@ -26,87 +21,54 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     z-index: 1;
-
-    @include typography.theme-styles(
-      (
-        font: var(--_label-text-font),
-        tracking: var(--_label-text-tracking),
-        weight: var(--_label-text-weight),
-      )
-    );
+    font: var(--_label-text-type);
   }
 
-  .md3-field__label--resting {
+  .label.resting {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    /*rtl:ignore*/
-    transform-origin: top left;
-
-    @include typography.theme-styles(
-      (
-        size: var(--_label-text-size),
-        line-height: var(--_label-text-line-height),
-      )
-    );
   }
 
-  .md3-field__label--floating {
-    @include typography.theme-styles(
-      (
-        size: var(--_label-text-populated-size),
-        line-height: var(--_label-text-populated-line-height),
-      )
-    );
+  .label.floating {
+    font-size: var(--_label-text-populated-size);
+    line-height: var(--_label-text-populated-line-height);
+    transform-origin: top left;
   }
 
-  .md3-field__label--hidden {
+  .label.hidden {
     opacity: 0;
   }
 
-  .md3-field--no-label {
-    .md3-field__label {
-      display: none;
-    }
+  .no-label .label {
+    display: none;
   }
 
-  :hover {
-    .md3-field__label {
-      color: var(--_hover-label-text-color);
-    }
+  :hover .label {
+    color: var(--_hover-label-text-color);
   }
 
-  .md3-field--focused {
-    .md3-field__label {
-      color: var(--_focus-label-text-color);
-    }
+  .focused .label {
+    color: var(--_focus-label-text-color);
   }
 
-  .md3-field--disabled {
-    .md3-field__label {
-      color: var(--_disabled-label-text-color);
+  .disabled .label {
+    color: var(--_disabled-label-text-color);
+  }
 
-      &:not(.md3-field__label--hidden) {
-        opacity: var(--_disabled-label-text-opacity);
-      }
-    }
+  .disabled .label:not(.hidden) {
+    opacity: var(--_disabled-label-text-opacity);
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__label {
-      color: var(--_error-label-text-color);
-    }
+  .error .label {
+    color: var(--_error-label-text-color);
+  }
 
-    &:hover {
-      .md3-field__label {
-        color: var(--_error-hover-label-text-color);
-      }
-    }
+  .error:hover .label {
+    color: var(--_error-hover-label-text-color);
+  }
 
-    &.md3-field--focused {
-      .md3-field__label {
-        color: var(--_error-focus-label-text-color);
-      }
-    }
+  .error.focused .label {
+    color: var(--_error-focus-label-text-color);
   }
 }