@material/web 1.0.0-pre.12 → 1.0.0-pre.14

package/tokens/_md-comp-outlined-button.scss

@@ -19,33 +19,31 @@ $supported-tokens: (
   // go/keep-sorted start
   'container-height',
   'container-shape',
+  'disabled-icon-color',
+  'disabled-icon-opacity',
   'disabled-label-text-color',
   'disabled-label-text-opacity',
   'disabled-outline-color',
   'disabled-outline-opacity',
+  'focus-icon-color',
   'focus-label-text-color',
-  'focus-outline-color',
+  'hover-icon-color',
   'hover-label-text-color',
-  'hover-outline-color',
   'hover-state-layer-color',
   'hover-state-layer-opacity',
+  'icon-color',
+  'icon-size',
   'label-text-color',
   'label-text-type',
   'outline-color',
   'outline-width',
+  'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-outline-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
   'spacing-leading',
   'spacing-trailing',
-  'with-icon-disabled-icon-color',
-  'with-icon-disabled-icon-opacity',
-  'with-icon-focus-icon-color',
-  'with-icon-hover-icon-color',
-  'with-icon-icon-color',
-  'with-icon-icon-size',
-  'with-icon-pressed-icon-color',
   'with-icon-spacing-leading',
   'with-icon-spacing-trailing',
   'with-trailing-icon-spacing-leading',
@@ -55,8 +53,10 @@ $supported-tokens: (
 
 $unsupported-tokens: (
   // go/keep-sorted start
+  'focus-outline-color',
   'focus-state-layer-color',
   'focus-state-layer-opacity',
+  'hover-outline-color',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
@@ -89,6 +89,16 @@ $_default: (
       'with-trailing-icon-spacing-trailing':
         if($exclude-hardcoded-values, null, 16px),
       // go/keep-sorted end
+    ),
+    $renamed-tokens: (
+      // Remove "with-*" prefixes (b/273534858)
+      'with-icon-disabled-icon-color': 'disabled-icon-color',
+      'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
+      'with-icon-focus-icon-color': 'focus-icon-color',
+      'with-icon-hover-icon-color': 'hover-icon-color',
+      'with-icon-icon-color': 'icon-color',
+      'with-icon-icon-size': 'icon-size',
+      'with-icon-pressed-icon-color': 'pressed-icon-color'
     )
   );
 

package/tokens/_md-comp-outlined-field.scss

@@ -17,8 +17,7 @@
 
 $supported-tokens: (
   // go/keep-sorted start
-  'container-padding-horizontal',
-  'container-padding-vertical',
+  'bottom-space',
   'container-shape',
   'content-color',
   'content-type',
@@ -73,14 +72,18 @@ $supported-tokens: (
   'label-text-populated-size',
   'label-text-type',
   'leading-content-color',
+  'leading-space',
   'outline-color',
   'outline-label-padding',
   'outline-width',
   'supporting-text-color',
-  'supporting-text-padding',
-  'supporting-text-padding-top',
+  'supporting-text-leading-space',
+  'supporting-text-top-space',
+  'supporting-text-trailing-space',
   'supporting-text-type',
+  'top-space',
   'trailing-content-color',
+  'trailing-space',
   // go/keep-sorted end
 );
 
@@ -99,8 +102,7 @@ $_default: (
 
   $tokens: (
     // go/keep-sorted start
-    'container-padding-horizontal': if($exclude-hardcoded-values, null, 16px),
-    'container-padding-vertical': if($exclude-hardcoded-values, null, 16px),
+    'bottom-space': if($exclude-hardcoded-values, null, 16px),
     'container-shape': map.get($text-field, 'container-shape'),
     'content-color': map.get($text-field, 'input-text-color'),
     'content-type': map.get($text-field, 'input-text-type'),
@@ -187,14 +189,18 @@ $_default: (
       map.get($text-field, 'label-text-populated-size'),
     'label-text-type': map.get($text-field, 'label-text-type'),
     'leading-content-color': map.get($text-field, 'leading-icon-color'),
+    'leading-space': if($exclude-hardcoded-values, null, 16px),
     'outline-color': map.get($text-field, 'outline-color'),
     'outline-label-padding': if($exclude-hardcoded-values, null, 4px),
     'outline-width': map.get($text-field, 'outline-width'),
     'supporting-text-color': map.get($text-field, 'supporting-text-color'),
-    'supporting-text-padding': if($exclude-hardcoded-values, null, 16px),
-    'supporting-text-padding-top': if($exclude-hardcoded-values, null, 4px),
+    'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px),
+    'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px),
+    'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px),
     'supporting-text-type': map.get($text-field, 'supporting-text-type'),
+    'top-space': if($exclude-hardcoded-values, null, 16px),
     'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
+    'trailing-space': if($exclude-hardcoded-values, null, 16px),
     // go/keep-sorted end
   );
 

package/tokens/_md-comp-outlined-segmented-button.scss

@@ -16,54 +16,54 @@
 
 $supported-tokens: (
   // go/keep-sorted start
-  'container-height',
   'disabled-icon-color',
-  'disabled-icon-opacity',
   'disabled-label-text-color',
-  'disabled-label-text-opacity',
   'disabled-outline-color',
-  'disabled-outline-opacity',
-  'focus-state-layer-opacity',
   'hover-state-layer-opacity',
+  'icon-size',
   'label-text-type',
   'outline-color',
-  'outline-width',
   'pressed-state-layer-opacity',
   'selected-container-color',
   'selected-focus-icon-color',
   'selected-focus-label-text-color',
-  'selected-focus-state-layer-color',
   'selected-hover-icon-color',
   'selected-hover-label-text-color',
   'selected-hover-state-layer-color',
+  'selected-icon-color',
   'selected-label-text-color',
   'selected-pressed-icon-color',
   'selected-pressed-label-text-color',
   'selected-pressed-state-layer-color',
-  'selected-with-icon-icon-color',
-  'shape',
   'unselected-focus-icon-color',
   'unselected-focus-label-text-color',
-  'unselected-focus-state-layer-color',
   'unselected-hover-icon-color',
   'unselected-hover-label-text-color',
   'unselected-hover-state-layer-color',
+  'unselected-icon-color',
   'unselected-label-text-color',
   'unselected-pressed-icon-color',
   'unselected-pressed-label-text-color',
   'unselected-pressed-state-layer-color',
-  'unselected-with-icon-icon-color',
-  'with-icon-icon-size',
   // go/keep-sorted end
 );
 
 $unsupported-tokens: (
   // go/keep-sorted start
+  'container-height',
+  'disabled-icon-opacity',
+  'disabled-label-text-opacity',
+  'disabled-outline-opacity',
+  'focus-state-layer-opacity',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
   'label-text-tracking',
   'label-text-weight',
+  'outline-width',
+  'selected-focus-state-layer-color',
+  'shape',
+  'unselected-focus-state-layer-color',
   // go/keep-sorted end
 );
 
@@ -78,7 +78,13 @@ $_default: (
   $tokens: values.validate(
     md-comp-outlined-segmented-button.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      // Remove "with-*" prefixes (b/273534858)
+      'with-icon-icon-size': 'icon-size',
+      'selected-with-icon-icon-color': 'selected-icon-color',
+      'unselected-with-icon-icon-color': 'unselected-icon-color'
+    )
   );
 
   // TODO(b/271876162): remove when tokens compiler emits typescale tokens

package/tokens/_md-comp-outlined-text-field.scss

@@ -100,7 +100,8 @@ $unsupported-tokens: (
   'supporting-text-line-height',
   'supporting-text-size',
   'supporting-text-tracking',
-  'supporting-text-weight' // go/keep-sorted end
+  'supporting-text-weight',
+  // go/keep-sorted end
 );
 
 $_default: (

package/tokens/_md-comp-slider.scss

@@ -13,8 +13,50 @@
 @use './md-sys-state';
 @use './md-sys-typescale';
 @use './v0_172/md-comp-slider';
+@use './values';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'active-track-color',
+  'active-track-height',
+  'active-track-shape',
+  'disabled-active-track-color',
+  'disabled-active-track-opacity',
+  'disabled-handle-color',
+  'disabled-handle-elevation',
+  'disabled-inactive-track-color',
+  'disabled-inactive-track-opacity',
+  'focus-handle-color',
+  'handle-color',
+  'handle-elevation',
+  'handle-height',
+  'handle-shadow-color',
+  'handle-shape',
+  'handle-width',
+  'hover-handle-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'inactive-track-color',
+  'inactive-track-height',
+  'inactive-track-shape',
+  'label-container-color',
+  'label-container-height',
+  'label-label-text-color',
+  'label-label-text-type',
+  'pressed-handle-color',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
+  'state-layer-size',
+  'with-overlap-handle-outline-color',
+  'with-overlap-handle-outline-width',
+  'with-tick-marks-active-container-color',
+  'with-tick-marks-container-size',
+  'with-tick-marks-disabled-container-color',
+  'with-tick-marks-inactive-container-color',
+  // go/keep-sorted end
+);
+
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-elevation': md-sys-elevation.values(),
@@ -44,8 +86,11 @@ $_unsupported-tokens: (
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  $tokens: md-comp-slider.values($deps, $exclude-hardcoded-values);
-  $tokens: map.remove($tokens, $_unsupported-tokens...);
+  $tokens: values.validate(
+    md-comp-slider.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $_unsupported-tokens
+  );
 
   // TODO(b/271876162): remove when tokens compiler emits typescale tokens
   $tokens: map.merge(
@@ -55,5 +100,6 @@ $_unsupported-tokens: (
         map.get($deps, 'md-sys-typescale', 'label-medium'),
     )
   );
+
   @return $tokens;
 }

package/tokens/_md-comp-text-button.scss

@@ -19,26 +19,26 @@ $supported-tokens: (
   // go/keep-sorted start
   'container-height',
   'container-shape',
+  'disabled-icon-color',
+  'disabled-icon-opacity',
   'disabled-label-text-color',
   'disabled-label-text-opacity',
+  'focus-icon-color',
   'focus-label-text-color',
+  'hover-icon-color',
   'hover-label-text-color',
   'hover-state-layer-color',
   'hover-state-layer-opacity',
+  'icon-color',
+  'icon-size',
   'label-text-color',
   'label-text-type',
+  'pressed-icon-color',
   'pressed-label-text-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
   'spacing-leading',
   'spacing-trailing',
-  'with-icon-disabled-icon-color',
-  'with-icon-disabled-icon-opacity',
-  'with-icon-focus-icon-color',
-  'with-icon-hover-icon-color',
-  'with-icon-icon-color',
-  'with-icon-icon-size',
-  'with-icon-pressed-icon-color',
   'with-icon-spacing-leading',
   'with-icon-spacing-trailing',
   'with-trailing-icon-spacing-leading',
@@ -82,6 +82,16 @@ $_default: (
       'with-trailing-icon-spacing-trailing':
         if($exclude-hardcoded-values, null, 12px),
       // go/keep-sorted end
+    ),
+    $renamed-tokens: (
+      // Remove "with-*" prefixes (b/273534858)
+      'with-icon-disabled-icon-color': 'disabled-icon-color',
+      'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
+      'with-icon-focus-icon-color': 'focus-icon-color',
+      'with-icon-hover-icon-color': 'hover-icon-color',
+      'with-icon-icon-color': 'icon-color',
+      'with-icon-icon-size': 'icon-size',
+      'with-icon-pressed-icon-color': 'pressed-icon-color'
     )
   );
 

package/tokens/_values.scss

@@ -94,7 +94,7 @@
   }
 
   @each $token in map.keys($values) {
-    @if list.index($supported-tokens, $token) == 0 {
+    @if list.index($supported-tokens, $token) == null {
       @error 'values.validate($supported-tokens)) is missing the \'#{$token}\' token. Does it need adding to $unsupported-tokens?';
     }
   }

package/button/lib/_elevation.scss

@@ -1,68 +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.
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../elevation/elevation';
-@use '../../tokens';
-// go/keep-sorted end
-
-$_md-sys-motion: tokens.md-sys-motion-values();
-
-@mixin styles() {
-  md-elevation {
-    // TODO: replace duration with animation tokens
-    transition-duration: 280ms;
-    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
-  }
-
-  .md3-button {
-    @include elevation.theme(
-      (
-        'level': var(--_container-elevation),
-        'shadow-color': var(--_container-shadow-color),
-      )
-    );
-
-    // apply elevation in order of focused, hovered, pressed, disabled
-    // this ensures a button will have hover elevation after being focused
-    &:focus {
-      @include elevation.theme(
-        (
-          'level': var(--_focus-container-elevation),
-        )
-      );
-    }
-
-    &:hover {
-      @include elevation.theme(
-        (
-          'level': var(--_hover-container-elevation),
-        )
-      );
-    }
-
-    &:active {
-      @include elevation.theme(
-        (
-          'level': var(--_pressed-container-elevation),
-        )
-      );
-    }
-
-    &:disabled {
-      @include elevation.theme(
-        (
-          'level': var(--_disabled-container-elevation),
-        )
-      );
-    }
-  }
-}

package/button/lib/_icon.scss

@@ -1,42 +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.
-
-@mixin styles() {
-  // The icon CSS class overrides styles defined in the .material-icons CSS
-  // class, which is loaded separately so the order of CSS definitions is not
-  // guaranteed. Therefore, increase specifity to ensure overrides apply.
-  ::slotted([slot='icon']) {
-    .md3-button & {
-      display: inline-flex;
-      position: relative;
-      writing-mode: horizontal-tb;
-      fill: currentColor;
-      color: var(--_with-icon-icon-color);
-      font-size: var(--_with-icon-icon-size);
-      inline-size: var(--_with-icon-icon-size);
-      block-size: var(--_with-icon-icon-size);
-    }
-
-    .md3-button:hover & {
-      color: var(--_with-icon-hover-icon-color);
-    }
-
-    .md3-button:focus & {
-      color: var(--_with-icon-focus-icon-color);
-    }
-
-    .md3-button:active & {
-      color: var(--_with-icon-pressed-icon-color);
-    }
-
-    .md3-button:disabled & {
-      color: var(--_with-icon-disabled-icon-color);
-      opacity: var(--_with-icon-disabled-icon-opacity);
-    }
-  }
-}

package/button/lib/_outlined-button.scss

@@ -1,103 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:list';
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../tokens';
-// go/keep-sorted end
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@mixin theme($tokens) {
-  $supported-tokens: list.join(
-    tokens.$md-comp-outlined-button-supported-tokens,
-    (
-      'container-shape-start-start',
-      'container-shape-start-end',
-      'container-shape-end-end',
-      '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 $value {
-      --md-outlined-button-#{$token}: #{$value};
-    }
-  }
-}
-
-@mixin styles() {
-  $tokens: tokens.md-comp-outlined-button-values();
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-outlined-button-#{$token}, #{$value});
-    }
-
-    // Support logical shape properties
-    --_container-shape-start-start: var(
-      --md-outlined-button-container-shape-start-start,
-      var(--_container-shape)
-    );
-    --_container-shape-start-end: var(
-      --md-outlined-button-container-shape-start-end,
-      var(--_container-shape)
-    );
-    --_container-shape-end-end: var(
-      --md-outlined-button-container-shape-end-end,
-      var(--_container-shape)
-    );
-    --_container-shape-end-start: var(
-      --md-outlined-button-container-shape-end-start,
-      var(--_container-shape)
-    );
-  }
-
-  .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);
-      opacity: var(--_disabled-outline-opacity);
-    }
-  }
-
-  .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.remove-unsupported-tokens($tokens);
-  @return $tokens;
-}