@material/web 1.0.0-pre.15 → 1.0.0-pre.17

package/tokens/_md-comp-primary-tab.scss

@@ -0,0 +1,132 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use './md-sys-color';
+@use './md-sys-elevation';
+@use './md-sys-shape';
+@use './md-sys-state';
+@use './md-sys-typescale';
+@use './v0_172/md-comp-primary-navigation-tab';
+@use './values';
+// go/keep-sorted end
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-elevation': md-sys-elevation.values(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
+);
+
+$supported-tokens: (
+  // go/keep-sorted start
+  'active-focus-icon-color',
+  'active-focus-label-text-color',
+  'active-hover-icon-color',
+  'active-hover-label-text-color',
+  'active-hover-state-layer-color',
+  'active-hover-state-layer-opacity',
+  'active-icon-color',
+  'active-indicator-color',
+  'active-indicator-height',
+  'active-indicator-shape',
+  'active-label-text-color',
+  'active-pressed-icon-color',
+  'active-pressed-label-text-color',
+  'active-pressed-state-layer-color',
+  'active-pressed-state-layer-opacity',
+  'container-color',
+  'container-elevation',
+  'container-height',
+  'container-shape',
+  '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',
+  'with-icon-and-label-text-container-height',
+  // go/keep-sorted end
+);
+
+$unsupported-tokens: (
+  'with-label-text-label-text-font',
+  'with-label-text-label-text-line-height',
+  'with-label-text-label-text-size',
+  'with-label-text-label-text-tracking',
+  'with-label-text-label-text-weight',
+  'active-focus-state-layer-color',
+  'active-focus-state-layer-opacity',
+  'focus-state-layer-color',
+  'focus-state-layer-opacity'
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  $tokens: md-comp-primary-navigation-tab.values(
+    $deps,
+    $exclude-hardcoded-values: $exclude-hardcoded-values
+  );
+
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'label-text-type': map.get($deps, 'md-sys-typescale', 'title-small'),
+    )
+  );
+
+  @return values.validate(
+    $tokens,
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      // rename inactive-
+      'inactive-focus-state-layer-color': 'focus-state-layer-color',
+      'inactive-focus-state-layer-opacity': 'focus-state-layer-opacity',
+      'inactive-hover-state-layer-color': 'hover-state-layer-color',
+      'inactive-hover-state-layer-opacity': 'hover-state-layer-opacity',
+      'inactive-pressed-state-layer-color': 'pressed-state-layer-color',
+      'inactive-pressed-state-layer-opacity': 'pressed-state-layer-opacity',
+      // rename with-icon- and inactive-
+      'with-icon-active-focus-icon-color': 'active-focus-icon-color',
+      'with-icon-active-hover-icon-color': 'active-hover-icon-color',
+      'with-icon-active-icon-color': 'active-icon-color',
+      'with-icon-active-pressed-icon-color': 'active-pressed-icon-color',
+      'with-icon-icon-size': 'icon-size',
+      'with-icon-inactive-focus-icon-color': 'focus-icon-color',
+      'with-icon-inactive-hover-icon-color': 'hover-icon-color',
+      'with-icon-inactive-icon-color': 'icon-color',
+      'with-icon-inactive-pressed-icon-color': 'pressed-icon-color',
+      // rename with-label-text- and inactive-
+      'with-label-text-active-focus-label-text-color':
+        'active-focus-label-text-color',
+      'with-label-text-active-hover-label-text-color':
+        'active-hover-label-text-color',
+      'with-label-text-active-label-text-color': 'active-label-text-color',
+      'with-label-text-active-pressed-label-text-color':
+        'active-pressed-label-text-color',
+      'with-label-text-inactive-focus-label-text-color':
+        'focus-label-text-color',
+      'with-label-text-inactive-hover-label-text-color':
+        'hover-label-text-color',
+      'with-label-text-inactive-label-text-color': 'label-text-color',
+      'with-label-text-inactive-pressed-label-text-color':
+        'pressed-label-text-color',
+      'with-label-text-label-text-type': 'label-text-type'
+    )
+  );
+}

package/tokens/_md-comp-secondary-tab.scss

@@ -0,0 +1,139 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use './md-sys-color';
+@use './md-sys-elevation';
+@use './md-sys-shape';
+@use './md-sys-state';
+@use './md-sys-typescale';
+@use './v0_172/md-comp-secondary-navigation-tab';
+@use './values';
+// go/keep-sorted end
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-elevation': md-sys-elevation.values(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
+);
+
+$supported-tokens: (
+  // go/keep-sorted start
+  'active-focus-icon-color',
+  'active-focus-label-text-color',
+  'active-hover-icon-color',
+  'active-hover-label-text-color',
+  'active-hover-state-layer-color',
+  'active-hover-state-layer-opacity',
+  'active-icon-color',
+  'active-indicator-color',
+  'active-indicator-height',
+  'active-indicator-shape',
+  'active-label-text-color',
+  'active-pressed-icon-color',
+  'active-pressed-label-text-color',
+  'active-pressed-state-layer-color',
+  'active-pressed-state-layer-opacity',
+  'container-color',
+  'container-elevation',
+  'container-height',
+  'container-shape',
+  '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',
+  // go/keep-sorted end
+);
+
+$unsupported-tokens: (
+  // include an icon and the size will adjust;
+  // height is 48 and it's 64 with icon
+  'container-shadow-color',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-tracking',
+  'label-text-weight',
+  'focus-state-layer-color',
+  'focus-state-layer-opacity'
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  $tokens: md-comp-secondary-navigation-tab.values(
+    $deps,
+    $exclude-hardcoded-values: $exclude-hardcoded-values
+  );
+
+  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
+  $tokens: map.merge(
+    $tokens,
+    (
+      'label-text-type': map.get($deps, 'md-sys-typescale', 'title-small'),
+    )
+  );
+
+  $tokens: _add-missing-secondary-tokens($tokens);
+
+  $tokens: values.validate(
+    $tokens,
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      'inactive-label-text-color': 'label-text-color',
+      'with-icon-active-icon-color': 'active-icon-color',
+      'with-icon-focus-icon-color': 'focus-icon-color',
+      'with-icon-hover-icon-color': 'hover-icon-color',
+      'with-icon-icon-size': 'icon-size',
+      'with-icon-inactive-icon-color': 'icon-color',
+      'with-icon-pressed-icon-color': 'pressed-icon-color',
+    )
+  );
+
+  @return $tokens;
+}
+
+// add missing secondary tokens to match primary variant.
+@function _add-missing-secondary-tokens($tokens) {
+  $tokens: map.merge(
+    $tokens,
+    (
+      'active-focus-icon-color': map.get($tokens, 'icon-color'),
+      'active-focus-label-text-color':
+        map.get($tokens, 'active-label-text-color'),
+      'active-hover-icon-color': map.get($tokens, 'icon-color'),
+      'active-hover-label-text-color':
+        map.get($tokens, 'active-label-text-color'),
+      'active-hover-state-layer-color':
+        map.get($tokens, 'hover-state-layer-color'),
+      'active-hover-state-layer-opacity':
+        map.get($tokens, 'hover-state-layer-opacity'),
+      'active-icon-color': map.get($tokens, 'icon-color'),
+      'active-indicator-shape': 0,
+      'active-pressed-icon-color': map.get($tokens, 'icon-color'),
+      'active-pressed-label-text-color':
+        map.get($tokens, 'active-label-text-color'),
+      'active-pressed-state-layer-color':
+        map.get($tokens, 'pressed-state-layer-color'),
+      'active-pressed-state-layer-opacity':
+        map.get($tokens, 'pressed-state-layer-opacity'),
+    )
+  );
+  @return $tokens;
+}

package/tokens/_md-comp-slider.scss

@@ -42,8 +42,11 @@ $supported-tokens: (
   'inactive-track-shape',
   'label-container-color',
   'label-container-height',
-  'label-label-text-color',
-  'label-label-text-type',
+  'label-text-color',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'pressed-handle-color',
   'pressed-state-layer-color',
   'pressed-state-layer-opacity',
@@ -68,11 +71,8 @@ $_default: (
 $_unsupported-tokens: (
   'disabled-handle-opacity',
   'label-container-elevation',
-  'label-label-text-font',
-  'label-label-text-line-height',
-  'label-label-text-size',
-  'label-label-text-tracking',
-  'label-label-text-weight',
+  'label-text-type',
+  'label-text-tracking',
   'track-elevation',
   // for efficiency, tick marks are rendered as radial-gradients and
   // have more limited customization
@@ -89,15 +89,15 @@ $_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(
-    $tokens,
-    (
-      'label-label-text-type':
-        map.get($deps, 'md-sys-typescale', 'label-medium'),
+    $unsupported-tokens: $_unsupported-tokens,
+    $renamed-tokens: (
+      'label-label-text-color': 'label-text-color',
+      'label-label-text-type': 'label-text-type',
+      'label-label-text-font': 'label-text-font',
+      'label-label-text-line-height': 'label-text-line-height',
+      'label-label-text-size': 'label-text-size',
+      'label-label-text-tracking': 'label-text-tracking',
+      'label-label-text-weight': 'label-text-weight',
     )
   );
 

package/tokens/_md-comp-suggestion-chip.scss

@@ -44,7 +44,10 @@ $supported-tokens: (
   'hover-state-layer-opacity',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-icon-color',
   'outline-color',
   'outline-width',
@@ -65,11 +68,8 @@ $unsupported-tokens: (
   'dragged-state-layer-opacity',
   'focus-state-layer-color',
   'focus-state-layer-opacity',
-  'label-text-font',
-  'label-text-line-height',
-  'label-text-size',
   'label-text-tracking',
-  'label-text-weight',
+  'label-text-type',
   // go/keep-sorted end
 );
 
@@ -111,13 +111,5 @@ $_default: (
     )
   );
 
-  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
-  $tokens: map.merge(
-    $tokens,
-    (
-      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
-    )
-  );
-
   @return $tokens;
 }

package/tokens/_md-comp-test-table.scss

@@ -20,12 +20,23 @@ $_default: (
   @return (
     'cell-color': map.get($deps, 'md-sys-color', 'surface-container-lowest'),
     'cell-text-color': map.get($deps, 'md-sys-color', 'on-surface'),
-    'cell-text-type': map.get($deps, 'md-sys-typescale', 'body-medium'),
+    'cell-text-font': map.get($deps, 'md-sys-typescale', 'body-medium-font'),
+    'cell-text-size': map.get($deps, 'md-sys-typescale', 'body-medium-size'),
+    'cell-text-line-height':
+      map.get($deps, 'md-sys-typescale', 'body-medium-line-height'),
+    'cell-text-weight': map.get($deps, 'md-sys-typescale', 'body-medium-weight'),
     'cell-grid-color': map.get($deps, 'md-sys-color', 'surface-variant'),
     'header-cell-color': map.get($deps, 'md-sys-color', 'surface-variant'),
     'header-cell-text-color':
       map.get($deps, 'md-sys-color', 'on-surface-variant'),
-    'header-cell-text-type': map.get($deps, 'md-sys-typescale', 'title-medium'),
+    'header-cell-text-font':
+      map.get($deps, 'md-sys-typescale', 'title-medium-font'),
+    'header-cell-text-size':
+      map.get($deps, 'md-sys-typescale', 'title-medium-size'),
+    'header-cell-text-line-height':
+      map.get($deps, 'md-sys-typescale', 'title-medium-line-height'),
+    'header-cell-text-weight':
+      map.get($deps, 'md-sys-typescale', 'title-medium-weight'),
     'outline-color': map.get($deps, 'md-sys-color', 'outline')
   );
 }

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

@@ -32,7 +32,10 @@ $supported-tokens: (
   'icon-color',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'leading-space',
   'pressed-icon-color',
   'pressed-label-text-color',
@@ -50,11 +53,8 @@ $unsupported-tokens: (
   // go/keep-sorted start
   'focus-state-layer-color',
   'focus-state-layer-opacity',
-  'label-text-font',
-  'label-text-line-height',
-  'label-text-size',
   'label-text-tracking',
-  'label-text-weight',
+  'label-text-type',
   // go/keep-sorted end
 );
 
@@ -97,13 +97,5 @@ $_default: (
     )
   );
 
-  // TODO(b/271876162): remove this when tokens compiler emits typescale tokens
-  $tokens: map.merge(
-    $tokens,
-    (
-      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
-    )
-  );
-
   @return $tokens;
 }

package/tokens/_md-ref-palette.scss

@@ -5,8 +5,108 @@
 
 // go/keep-sorted start
 @use './v0_172/md-ref-palette';
+@use './values';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'black',
+  'error0',
+  'error10',
+  'error100',
+  'error20',
+  'error30',
+  'error40',
+  'error50',
+  'error60',
+  'error70',
+  'error80',
+  'error90',
+  'error95',
+  'error99',
+  'neutral-variant0',
+  'neutral-variant10',
+  'neutral-variant100',
+  'neutral-variant20',
+  'neutral-variant30',
+  'neutral-variant40',
+  'neutral-variant50',
+  'neutral-variant60',
+  'neutral-variant70',
+  'neutral-variant80',
+  'neutral-variant90',
+  'neutral-variant95',
+  'neutral-variant99',
+  'neutral0',
+  'neutral10',
+  'neutral100',
+  'neutral12',
+  'neutral17',
+  'neutral20',
+  'neutral22',
+  'neutral24',
+  'neutral30',
+  'neutral4',
+  'neutral40',
+  'neutral50',
+  'neutral6',
+  'neutral60',
+  'neutral70',
+  'neutral80',
+  'neutral87',
+  'neutral90',
+  'neutral92',
+  'neutral94',
+  'neutral95',
+  'neutral96',
+  'neutral98',
+  'neutral99',
+  'primary0',
+  'primary10',
+  'primary100',
+  'primary20',
+  'primary30',
+  'primary40',
+  'primary50',
+  'primary60',
+  'primary70',
+  'primary80',
+  'primary90',
+  'primary95',
+  'primary99',
+  'secondary0',
+  'secondary10',
+  'secondary100',
+  'secondary20',
+  'secondary30',
+  'secondary40',
+  'secondary50',
+  'secondary60',
+  'secondary70',
+  'secondary80',
+  'secondary90',
+  'secondary95',
+  'secondary99',
+  'tertiary0',
+  'tertiary10',
+  'tertiary100',
+  'tertiary20',
+  'tertiary30',
+  'tertiary40',
+  'tertiary50',
+  'tertiary60',
+  'tertiary70',
+  'tertiary80',
+  'tertiary90',
+  'tertiary95',
+  'tertiary99',
+  'white',
+  // go/keep-sorted end
+);
+
 @function values($exclude-hardcoded-values: false) {
-  @return md-ref-palette.values($exclude-hardcoded-values);
+  @return values.validate(
+    md-ref-palette.values($exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens
+  );
 }

package/tokens/_md-ref-typeface.scss

@@ -14,6 +14,9 @@ $supported-tokens: (
   // go/keep-sorted start
   'brand',
   'plain',
+  'weight-bold',
+  'weight-medium',
+  'weight-regular',
   // go/keep-sorted end
 );
 

package/tokens/_md-sys-color.scss

@@ -9,8 +9,63 @@
 // go/keep-sorted start
 @use './md-ref-palette';
 @use './v0_172/md-sys-color';
+@use './values';
 // go/keep-sorted end
 
+$supported-tokens: (
+  // go/keep-sorted start
+  'background',
+  'error',
+  'error-container',
+  'inverse-on-surface',
+  'inverse-primary',
+  'inverse-surface',
+  'on-background',
+  'on-error',
+  'on-error-container',
+  'on-primary',
+  'on-primary-container',
+  'on-primary-fixed',
+  'on-primary-fixed-variant',
+  'on-secondary',
+  'on-secondary-container',
+  'on-secondary-fixed',
+  'on-secondary-fixed-variant',
+  'on-surface',
+  'on-surface-variant',
+  'on-tertiary',
+  'on-tertiary-container',
+  'on-tertiary-fixed',
+  'on-tertiary-fixed-variant',
+  'outline',
+  'outline-variant',
+  'primary',
+  'primary-container',
+  'primary-fixed',
+  'primary-fixed-dim',
+  'scrim',
+  'secondary',
+  'secondary-container',
+  'secondary-fixed',
+  'secondary-fixed-dim',
+  'shadow',
+  'surface',
+  'surface-bright',
+  'surface-container',
+  'surface-container-high',
+  'surface-container-highest',
+  'surface-container-low',
+  'surface-container-lowest',
+  'surface-dim',
+  'surface-tint',
+  'surface-variant',
+  'tertiary',
+  'tertiary-container',
+  'tertiary-fixed',
+  'tertiary-fixed-dim',
+  // go/keep-sorted end
+);
+
 $_default-dark: (
   'md-ref-palette': md-ref-palette.values(),
 );
@@ -29,7 +84,7 @@ $_default-dark: (
     }
   }
 
-  @return $tokens;
+  @return values.validate($tokens, $supported-tokens: $supported-tokens);
 }
 
 $_default-light: (
@@ -50,5 +105,5 @@ $_default-light: (
     }
   }
 
-  @return $tokens;
+  @return values.validate($tokens, $supported-tokens: $supported-tokens);
 }