@material/web 1.0.0-pre.1 → 1.0.0-pre.11

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

@@ -0,0 +1,130 @@
+//
+// 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-shape';
+@use './md-sys-typescale';
+@use './v0_172/md-comp-outlined-text-field';
+@use './values';
+// go/keep-sorted end
+
+$supported-tokens: (
+  // go/keep-sorted start
+  'caret-color',
+  'container-shape',
+  'disabled-input-text-color',
+  'disabled-input-text-opacity',
+  'disabled-label-text-color',
+  'disabled-label-text-opacity',
+  'disabled-leading-icon-color',
+  'disabled-leading-icon-opacity',
+  'disabled-outline-color',
+  'disabled-outline-opacity',
+  'disabled-outline-width',
+  'disabled-supporting-text-color',
+  'disabled-supporting-text-opacity',
+  'disabled-trailing-icon-color',
+  'disabled-trailing-icon-opacity',
+  'error-focus-caret-color',
+  'error-focus-input-text-color',
+  'error-focus-label-text-color',
+  'error-focus-leading-icon-color',
+  'error-focus-outline-color',
+  'error-focus-supporting-text-color',
+  'error-focus-trailing-icon-color',
+  'error-hover-input-text-color',
+  'error-hover-label-text-color',
+  'error-hover-leading-icon-color',
+  'error-hover-outline-color',
+  'error-hover-supporting-text-color',
+  'error-hover-trailing-icon-color',
+  'error-input-text-color',
+  'error-label-text-color',
+  'error-leading-icon-color',
+  'error-outline-color',
+  'error-supporting-text-color',
+  'error-trailing-icon-color',
+  'focus-input-text-color',
+  'focus-label-text-color',
+  'focus-leading-icon-color',
+  'focus-outline-color',
+  'focus-outline-width',
+  'focus-supporting-text-color',
+  'focus-trailing-icon-color',
+  'hover-input-text-color',
+  'hover-label-text-color',
+  'hover-leading-icon-color',
+  'hover-outline-color',
+  'hover-outline-width',
+  'hover-supporting-text-color',
+  'hover-trailing-icon-color',
+  'input-text-color',
+  'input-text-placeholder-color',
+  'input-text-prefix-color',
+  'input-text-suffix-color',
+  'input-text-type',
+  'label-text-color',
+  'label-text-populated-line-height',
+  'label-text-populated-size',
+  'label-text-type',
+  'leading-icon-color',
+  'leading-icon-size',
+  'outline-color',
+  'outline-width',
+  'supporting-text-color',
+  'supporting-text-type',
+  'trailing-icon-color',
+  'trailing-icon-size',
+  // go/keep-sorted end
+);
+
+$unsupported-tokens: (
+  // go/keep-sorted start
+  'input-text-font',
+  'input-text-line-height',
+  'input-text-size',
+  'input-text-tracking',
+  'input-text-weight',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-tracking',
+  'label-text-weight',
+  'supporting-text-font',
+  'supporting-text-line-height',
+  'supporting-text-size',
+  'supporting-text-tracking',
+  'supporting-text-weight' // go/keep-sorted end
+);
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-typescale': md-sys-typescale.values(),
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  $tokens: values.validate(
+    md-comp-outlined-text-field.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,
+    (
+      'input-text-type': map.get($deps, 'md-sys-typescale', 'body-large'),
+      'label-text-type': map.get($deps, 'md-sys-typescale', 'body-large'),
+      'supporting-text-type': map.get($deps, 'md-sys-typescale', 'body-small'),
+    )
+  );
+
+  @return $tokens;
+}

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

@@ -0,0 +1,62 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './md-sys-color';
+@use './md-sys-state';
+@use './v0_172/md-comp-radio-button';
+@use './values';
+// go/keep-sorted end
+
+$supported-tokens: (
+  // go/keep-sorted start
+  'disabled-selected-icon-color',
+  'disabled-selected-icon-opacity',
+  'disabled-unselected-icon-color',
+  'disabled-unselected-icon-opacity',
+  'icon-size',
+  'selected-focus-icon-color',
+  'selected-hover-icon-color',
+  'selected-hover-state-layer-color',
+  'selected-hover-state-layer-opacity',
+  'selected-icon-color',
+  'selected-pressed-icon-color',
+  'selected-pressed-state-layer-color',
+  'selected-pressed-state-layer-opacity',
+  'state-layer-size',
+  'unselected-focus-icon-color',
+  'unselected-hover-icon-color',
+  'unselected-hover-state-layer-color',
+  'unselected-hover-state-layer-opacity',
+  'unselected-icon-color',
+  'unselected-pressed-icon-color',
+  'unselected-pressed-state-layer-color',
+  'unselected-pressed-state-layer-opacity',
+  // go/keep-sorted end
+);
+
+$unsupported-tokens: (
+  // go/keep-sorted start
+  'selected-focus-state-layer-color',
+  'selected-focus-state-layer-opacity',
+  'unselected-focus-state-layer-color',
+  'unselected-focus-state-layer-opacity',
+  // go/keep-sorted end
+);
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-state': md-sys-state.values(),
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  $tokens: values.validate(
+    md-comp-radio-button.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens
+  );
+
+  @return $tokens;
+}

package/tokens/_md-comp-ripple.scss

@@ -0,0 +1,40 @@
+//
+// Copyright 2022 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-shape';
+@use './md-sys-state';
+@use './values';
+// go/keep-sorted end
+
+$supported-tokens: (
+  // go/keep-sorted start
+  'hover-color',
+  'hover-opacity',
+  'pressed-color',
+  'pressed-opacity',
+  // go/keep-sorted end
+);
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-state': md-sys-state.values(),
+);
+
+@function values($deps: $_default) {
+  $tokens: (
+    'hover-color': map.get($deps, 'md-sys-color', 'on-surface'),
+    'hover-opacity': map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
+    'pressed-color': map.get($deps, 'md-sys-color', 'on-surface'),
+    'pressed-opacity':
+      map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),
+  );
+
+  @return values.validate($tokens, $supported-tokens: $supported-tokens);
+}

package/tokens/_md-comp-slider.scss

@@ -0,0 +1,59 @@
+//
+// 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-slider';
+// 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(),
+);
+
+$_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',
+  'track-elevation',
+  // for efficiency, tick marks are rendered as radial-gradients and
+  // have more limited customization
+  'with-tick-marks-active-container-opacity',
+  'with-tick-marks-container-shape',
+  'with-tick-marks-disabled-container-opacity',
+  'with-tick-marks-inactive-container-opacity',
+  // focus tokens no longer used.
+  'focus-state-layer-color',
+  'focus-state-layer-opacity'
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  $tokens: md-comp-slider.values($deps, $exclude-hardcoded-values);
+  $tokens: map.remove($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'),
+    )
+  );
+  @return $tokens;
+}

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

@@ -0,0 +1,122 @@
+//
+// 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-suggestion-chip';
+@use './values';
+// go/keep-sorted end
+
+$supported-tokens: (
+  // go/keep-sorted start
+  'container-height',
+  'container-shape',
+  'disabled-label-text-color',
+  'disabled-label-text-opacity',
+  'disabled-leading-icon-color',
+  'disabled-outline-color',
+  'disabled-outline-opacity',
+  'elevated-container-color',
+  'elevated-container-elevation',
+  'elevated-container-shadow-color',
+  'elevated-disabled-container-color',
+  'elevated-disabled-container-elevation',
+  'elevated-disabled-container-opacity',
+  'elevated-focus-container-elevation',
+  'elevated-hover-container-elevation',
+  'elevated-pressed-container-elevation',
+  'focus-label-text-color',
+  'focus-leading-icon-color',
+  'focus-outline-color',
+  'hover-label-text-color',
+  'hover-leading-icon-color',
+  'hover-state-layer-color',
+  'hover-state-layer-opacity',
+  'icon-size',
+  'label-text-color',
+  'label-text-type',
+  'leading-icon-color',
+  'outline-color',
+  'outline-width',
+  'pressed-label-text-color',
+  'pressed-leading-icon-color',
+  'pressed-state-layer-color',
+  'pressed-state-layer-opacity',
+  // go/keep-sorted end
+);
+
+$unsupported-tokens: (
+  // go/keep-sorted start
+  'container-elevation',
+  'dragged-container-elevation',
+  'dragged-label-text-color',
+  'dragged-leading-icon-color',
+  'dragged-state-layer-color',
+  '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',
+  // 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(),
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  $tokens: values.validate(
+    md-comp-suggestion-chip.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      // Remove "flat-*" prefix (b/275577569)
+      'flat-container-elevation': 'container-elevation',
+      'flat-disabled-outline-color': 'disabled-outline-color',
+      'flat-disabled-outline-opacity': 'disabled-outline-opacity',
+      'flat-focus-outline-color': 'focus-outline-color',
+      'flat-outline-color': 'outline-color',
+      'flat-outline-width': 'outline-width',
+      // Remove "with-*" prefixes (b/273534858)
+      'with-leading-icon-disabled-leading-icon-color':
+        'disabled-leading-icon-color',
+      'with-leading-icon-disabled-leading-icon-opacity':
+        'disabled-leading-icon-opacity',
+      'with-leading-icon-dragged-leading-icon-color':
+        'dragged-leading-icon-color',
+      'with-leading-icon-focus-leading-icon-color': 'focus-leading-icon-color',
+      'with-leading-icon-hover-leading-icon-color': 'hover-leading-icon-color',
+      'with-leading-icon-leading-icon-color': 'leading-icon-color',
+      'with-leading-icon-pressed-leading-icon-color':
+        'pressed-leading-icon-color',
+      // Rename "leading-icon-size" to "icon-size" (b/275577569)
+      'with-leading-icon-leading-icon-size': 'icon-size'
+    )
+  );
+
+  // 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-switch.scss

@@ -0,0 +1,107 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './md-sys-color';
+@use './md-sys-shape';
+@use './md-sys-state';
+@use './v0_172/md-comp-switch';
+@use './values';
+// go/keep-sorted end
+
+$supported-tokens: (
+  // go/keep-sorted start
+  'disabled-selected-handle-color',
+  'disabled-selected-handle-opacity',
+  'disabled-selected-icon-color',
+  'disabled-selected-icon-opacity',
+  'disabled-selected-track-color',
+  'disabled-track-opacity',
+  'disabled-unselected-handle-color',
+  'disabled-unselected-handle-opacity',
+  'disabled-unselected-icon-color',
+  'disabled-unselected-icon-opacity',
+  'disabled-unselected-track-color',
+  'disabled-unselected-track-outline-color',
+  'handle-shape',
+  'pressed-handle-height',
+  'pressed-handle-width',
+  'selected-focus-handle-color',
+  'selected-focus-icon-color',
+  'selected-focus-track-color',
+  'selected-handle-color',
+  'selected-handle-height',
+  'selected-handle-width',
+  'selected-hover-handle-color',
+  'selected-hover-icon-color',
+  'selected-hover-state-layer-color',
+  'selected-hover-state-layer-opacity',
+  'selected-hover-track-color',
+  'selected-icon-color',
+  'selected-icon-size',
+  'selected-pressed-handle-color',
+  'selected-pressed-icon-color',
+  'selected-pressed-state-layer-color',
+  'selected-pressed-state-layer-opacity',
+  'selected-pressed-track-color',
+  'selected-track-color',
+  'state-layer-shape',
+  'state-layer-size',
+  'track-height',
+  'track-outline-width',
+  'track-shape',
+  'track-width',
+  'unselected-focus-handle-color',
+  'unselected-focus-icon-color',
+  'unselected-focus-track-color',
+  'unselected-focus-track-outline-color',
+  'unselected-handle-color',
+  'unselected-handle-height',
+  'unselected-handle-width',
+  'unselected-hover-handle-color',
+  'unselected-hover-icon-color',
+  'unselected-hover-state-layer-color',
+  'unselected-hover-state-layer-opacity',
+  'unselected-hover-track-color',
+  'unselected-hover-track-outline-color',
+  'unselected-icon-color',
+  'unselected-icon-size',
+  'unselected-pressed-handle-color',
+  'unselected-pressed-icon-color',
+  'unselected-pressed-state-layer-color',
+  'unselected-pressed-state-layer-opacity',
+  'unselected-pressed-track-color',
+  'unselected-pressed-track-outline-color',
+  'unselected-track-color',
+  'unselected-track-outline-color',
+  'with-icon-handle-height',
+  'with-icon-handle-width',
+  // go/keep-sorted end
+);
+
+$unsupported-tokens: (
+  // go/keep-sorted start
+  'selected-focus-state-layer-color',
+  'selected-focus-state-layer-opacity',
+  'unselected-focus-state-layer-color',
+  'unselected-focus-state-layer-opacity',
+  // go/keep-sorted end
+);
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-state': md-sys-state.values(),
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  $tokens: values.validate(
+    md-comp-switch.values($deps, $exclude-hardcoded-values),
+    $supported-tokens: $supported-tokens,
+    $unsupported-tokens: $unsupported-tokens
+  );
+
+  @return $tokens;
+}