@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

package/sass/_assert.scss

@@ -1,3 +1,8 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
 @use 'sass:meta';
 
 ///

package/sass/_color-scheme.scss

@@ -0,0 +1,88 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '../tokens';
+@use './color';
+@use './theme';
+@use './var';
+
+// TODO(b/213571555): Following Sass mixins will call color scheme APIs which
+// are generated using tokens compiler when ready.
+
+/// Declares set of CSS custom properties for baseline dark color scheme
+/// overrides.
+@mixin dark-color-scheme(
+  $color-values-dark: tokens.md-sys-color-values-dark()
+) {
+  @include color-scheme(
+    _get-color-scheme-var-fallbacks($color-values-dark),
+    $color-values-dark
+  );
+}
+
+/// Declares set of CSS custom properties for baseline light color scheme
+/// overrides.
+@mixin light-color-scheme(
+  $color-values-light: tokens.md-sys-color-values-light()
+) {
+  @include color-scheme(
+    _get-color-scheme-var-fallbacks($color-values-light),
+    $color-values-light
+  );
+}
+
+$_baseline-color-scheme: tokens.md-sys-color-values-light();
+
+/// Declares set of CSS custom properties for custom color scheme override.
+/// @param {Map} $color-scheme - Map containing custom color scheme values.
+/// @example
+///   @include color-scheme((background: #f00));
+///   // --md-sys-color-background: #f00;
+///
+///   @include color-scheme((background: var(--foo-custom-color, #f00));
+///   // --md-sys-color-background: var(--foo-custom-color, #f00)
+@mixin color-scheme(
+  $color-scheme,
+  $baseline-color-scheme: $_baseline-color-scheme,
+  $prefix: var.create-name(sys-color)
+) {
+  $color-scheme: theme.validate-theme($baseline-color-scheme, $color-scheme);
+
+  @each $key, $value in $color-scheme {
+    #{$prefix}-#{$key}: #{$value};
+    @include _declare-color-in-rgb($key, $value, $prefix);
+  }
+}
+
+/// @param {Map} $color-scheme - Baseline color scheme map containing CSS vars
+///     with fallback values.
+/// @return {Map} - Returns a color scheme map with fallback values (concrete
+///     color values) of provided CSS vars.
+/// @example
+///   _get-color-scheme-var-fallbacks((
+///     background: var(--md-sys-color-background, #f00),
+///   )
+///   // (background: #f00)
+@function _get-color-scheme-var-fallbacks($color-scheme) {
+  @each $key, $value in $color-scheme {
+    @if var.is-var($value) {
+      $color-scheme: map.set($color-scheme, $key, var.fallback($value));
+    }
+  }
+
+  @return $color-scheme;
+}
+
+// TODO(b/213331407): Following colors are set in rgb (comma separated format)
+// to enable mixing with alpha value.
+// (e.g., rgb(var(--foo-sys-color-on-surface-rgb, 31,31,31), 0.38))
+// Remove once the attached bug is resolved.
+@mixin _declare-color-in-rgb($color-key, $value, $prefix) {
+  @if var.is-var($value) {
+    $value: var.deep-fallback($value);
+  }
+  #{$prefix}-#{$color-key}-rgb: #{color.hex-to-rgb(#{$value})};
+}

package/sass/_color.scss

@@ -84,51 +84,6 @@ $_hex: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'a' 'b' 'c' 'd' 'e' 'f';
   @return #{_hex-to-dec($r), _hex-to-dec($g), _hex-to-dec($b)};
 }
 
-///
-/// replace-as-rgba returns a map with the color key transformed to an RGBA
-/// color value created by joining the color key value with the opacity key
-/// value. The opacity key is removed from the map. This function is
-/// non-destructive and returns a new instance of the given map. It should only
-/// be used for disabled colors.
-///
-/// If $color is a var string then we would convert the color value to comma
-/// separated rgb value.
-///
-/// @example
-///.  replace-as-rgba((
-///     foo: red,
-///.    bar: 0.5
-///.  ), foo, bar) = (foo: rgba(255, 0, 0, 0.5))
-/// @example
-///.  replace-as-rgba((
-///     foo: var(--foo-color, #8ab4f8),
-///.    bar: 0.5
-///.  ), foo, bar) = (foo: rgb(var(--foo-color-rgb, 138, 180, 248), 0.5))
-///
-/// @param {Map} $map - the map with the given keys.
-/// @param {String} $color-key - the color key in the map.
-/// @param {String} $opacity-key - the opacity key in the map.
-/// @return {Map} The map with the color key replaced by an RGBA representation.
-@function replace-as-rgba($map, $color-key, $opacity-key) {
-  // Make a non-destructive copy of the map.
-  $out: map.merge($map, ());
-
-  $color: map.get($out, $color-key);
-  @if var.is-var($color) {
-    // TODO(b/213331407): Convert color from hex to rgba CSS color format to
-    // enable mixing rgb value with alpha using custom properties.
-    // (e.g., rgb(var(--foo-sys-color-on-surface-rgb, 31,31,31), 0.38))
-    // Remove once the attached bug is resolved.
-    $color: color-var-hex-to-rgba($color, map.get($out, $opacity-key));
-  } @else if meta.type-of($color) == 'color' {
-    $opacity: assert.is-type(map.get($out, $opacity-key), 'number');
-    $color: rgba($color, $opacity);
-  }
-
-  $out: map.set($out, $color-key, $color);
-  @return $out;
-}
-
 ///
 /// join-color-and-opacity-pairs returns a map with all given color and opacity
 /// keys joined to create an RGBA color value. This function is non-destructive
@@ -153,15 +108,40 @@ $_hex: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'a' 'b' 'c' 'd' 'e' 'f';
 ///   RGBA representations.
 ///
 @function join-color-and-opacity-pairs($map, $color-opacity-key-pairs) {
-  // Make a non-destructive copy of the map.
-  $out: map.merge($map, ());
+  // Make a copy of the map.
+  $original: $map;
+  $out: $map;
+  @if meta.type-of($color-opacity-key-pairs) == 'map' {
+    // Sass will automatically turn double paren lists of maps into a single
+    // map. Convert them back to a list.
+    $color-opacity-key-pairs: list.append((), $color-opacity-key-pairs);
+  }
   @each $pair in $color-opacity-key-pairs {
     $color-key: map.get($pair, color-key);
     $opacity-key: map.get($pair, opacity-key);
-    $has-keys: map.has-key($out, $color-key) and
-      map.has-key($out, $opacity-key);
+    // Check if the $original map has the color/opacity keys, since $out may
+    // have removed opacity keys.
+    $has-keys: map.has-key($original, $color-key) and
+      map.has-key($original, $opacity-key);
     @if $has-keys {
-      $out: replace-as-rgba($out, $color-key, $opacity-key);
+      $color: map.get($original, $color-key);
+      @if var.is-var($color) {
+        // TODO(b/213331407): Convert color from hex to rgba CSS color format to
+        // enable mixing rgb value with alpha using custom properties.
+        // (e.g., rgb(var(--foo-sys-color-on-surface-rgb, 31,31,31), 0.38))
+        // Remove once the attached bug is resolved.
+        $color: color-var-hex-to-rgba($color, map.get($original, $opacity-key));
+      } @else if meta.type-of($color) == 'color' {
+        $opacity: assert.is-type(map.get($original, $opacity-key), 'number');
+        $color: rgba($color, $opacity);
+      }
+
+      $out: map.set($out, $color-key, $color);
+
+      // Remove opacity keys from the $out map, but keep them in the
+      // $original map in case there are subsequent color/opacity pairs that
+      // need to reference the same opacity.
+      $out: map.remove($out, $opacity-key);
     }
   }
   @return $out;

package/sass/_feature-flags.scss

@@ -31,7 +31,7 @@ $_current-config: $_initial-config;
 /// mixin.
 ///
 /// @example - scss
-///   @include config.set($var-fallbacks: none) {
+///   @include feature-flags.with($var-fallbacks: none) {
 ///     // No fallback values will be emitted within this mixin scope
 ///     @include another-mixin();
 ///   }
@@ -47,9 +47,9 @@ $_current-config: $_initial-config;
 ///     properties.
 /// @param {String} $var-fallbacks [all] - What to emit for custom property
 ///     fallback values. (`all`, `none`, `vars`)
-@mixin set($config...) {
+@mixin with($config...) {
   @if not meta.content-exists() {
-    @error 'Content scope is required: config.set($options...) { /* scope */ }';
+    @error 'Content scope is required: feature-flags.with($options...) { /* scope */ }';
   }
 
   $config: meta.keywords($config);

package/segmentedbutton/lib/_outlined-segmented-button.scss

@@ -3,9 +3,33 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './shared';
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-segmented-button-values();
+  // TODO(b/198759625): Remove spacing tokens once provided.
+  $tokens: map.merge(
+    $tokens,
+    (
+      'spacing-leading': 12px,
+      'spacing-trailing': 12px,
+    )
+  );
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, 'segmented-button');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
 
-@mixin static-styles() {
   .md3-segmented-button__outline {
     border-radius: inherit;
     border-style: solid;

package/segmentedbutton/lib/_shared.scss

@@ -0,0 +1,388 @@
+//
+// Copyright 2022 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 '../../motion/animation';
+@use '../../ripple/ripple';
+@use '../../sass/color';
+@use '../../sass/resolvers';
+@use '../../sass/touch-target';
+@use '../../sass/typography';
+
+@mixin styles() {
+  @keyframes md3-segmented-button-checkmark-selection-draw-in {
+    from {
+      stroke-dashoffset: 29.7833385;
+    }
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes md3-segmented-button-simple-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes md3-segmented-button-simple-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  :host {
+    display: inline-flex;
+    outline: none;
+  }
+
+  .md3-segmented-button {
+    align-items: center;
+    background: transparent;
+    border: none;
+    border-radius: inherit;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    outline: none;
+    position: relative;
+    vertical-align: middle;
+    padding-inline-start: var(--_spacing-leading);
+    padding-inline-end: var(--_spacing-trailing);
+
+    .md3-segmented-button__outline {
+      border-color: var(--_outline-color);
+    }
+
+    &:disabled .md3-segmented-button__outline {
+      border-color: var(--_disabled-outline-color);
+    }
+
+    .md3-segmented-button__graphic,
+    .md3-segmented-button__checkmark,
+    .md3-segmented-button__icon,
+    .md3-segmented-button__icon ::slotted([slot='icon']) {
+      height: var(--_with-icon-icon-size);
+      width: var(--_with-icon-icon-size);
+      font-size: var(--_with-icon-icon-size);
+    }
+
+    // Under the following conditions, we need to account for extra space between
+    // the graphic and the text label/icon content:
+    //
+    //   1. A button with an icon and a label.
+    //   2. A selected button with a label and checkmark.
+    //   3. A selected button with an icon and checkmark but no label.
+    //
+    // We calculate a larger width here instead of using padding or margin for
+    // two main reasons:
+    //
+    //   1. We may need to transition between a zero width and an explicit width.
+    //   2. Both margin and padding take up space when a node has child content
+    //      even when a zero width is set and overflow is set to hidden.
+    //
+    // Because of those reasons, we calculate a new width with the given values.
+    &.md3-segmented-button--with-icon.md3-segmented-button--with-label,
+    &.md3-segmented-button--selected.md3-segmented-button--with-label.md3-segmented-button--with-checkmark,
+    &.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark {
+      .md3-segmented-button__graphic {
+        // TODO(b/198759625): Use padding token instead of hardcoded 8px value.
+        width: calc(var(--_with-icon-icon-size) + 8px);
+      }
+    }
+
+    .md3-segmented-button__label-text {
+      font-family: var(--_label-text-font);
+      font-size: var(--_label-text-size);
+      letter-spacing: var(--_label-text-tracking);
+      font-weight: var(--_label-text-weight);
+    }
+
+    &.md3-segmented-button--selected:enabled {
+      .md3-segmented-button__label-text {
+        color: var(--_selected-label-text-color);
+      }
+
+      &:hover {
+        .md3-segmented-button__label-text {
+          color: var(--_selected-hover-label-text-color);
+        }
+      }
+
+      &:focus {
+        .md3-segmented-button__label-text {
+          color: var(--_selected-focus-label-text-color);
+        }
+      }
+
+      &:active {
+        .md3-segmented-button__label-text {
+          color: var(--_selected-pressed-label-text-color);
+        }
+      }
+    }
+
+    &.md3-segmented-button--unselected:enabled {
+      .md3-segmented-button__label-text {
+        color: var(--_unselected-label-text-color);
+      }
+
+      &:hover {
+        .md3-segmented-button__label-text {
+          color: var(--_unselected-hover-label-text-color);
+        }
+      }
+
+      &:focus {
+        .md3-segmented-button__label-text {
+          color: var(--_unselected-focus-label-text-color);
+        }
+      }
+
+      &:active {
+        .md3-segmented-button__label-text {
+          color: var(--_unselected-pressed-label-text-color);
+        }
+      }
+    }
+
+    &:disabled {
+      .md3-segmented-button__label-text {
+        color: var(--_disabled-label-text-color);
+      }
+    }
+  }
+
+  .md3-segmented-button--unselected {
+    .md3-segmented-button__icon {
+      color: var(--_unselected-with-icon-icon-color);
+    }
+
+    &:hover {
+      .md3-segmented-button__icon {
+        color: var(--_unselected-hover-icon-color);
+      }
+    }
+
+    &:focus {
+      .md3-segmented-button__icon {
+        color: var(--_unselected-focus-icon-color);
+      }
+    }
+
+    &:active {
+      .md3-segmented-button__icon {
+        color: var(--_unselected-pressed-icon-color);
+      }
+    }
+
+    &:disabled {
+      .md3-segmented-button__icon {
+        color: var(--_disabled-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
+        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
+        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
+        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
+        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
+        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .md3-segmented-button--selected {
+    background-color: var(--_selected-container-color);
+
+    .md3-segmented-button__icon {
+      color: var(--_selected-with-icon-icon-color);
+    }
+
+    .md3-segmented-button__checkmark-path {
+      stroke: var(--_selected-with-icon-icon-color);
+    }
+
+    &:hover {
+      .md3-segmented-button__checkmark-path {
+        stroke: var(--_selected-hover-icon-color);
+      }
+    }
+
+    &:focus {
+      .md3-segmented-button__checkmark-path {
+        stroke: var(--_selected-focus-icon-color);
+      }
+    }
+
+    &:active {
+      .md3-segmented-button__checkmark-path {
+        stroke: var(--_selected-pressed-icon-color);
+      }
+    }
+
+    &:disabled {
+      .md3-segmented-button__checkmark-path {
+        stroke: var(--_disabled-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-state-layer-color: var(--_selected-hover-state-layer-color),
+        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
+        focus-state-layer-color: var(--_selected-focus-state-layer-color),
+        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
+        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
+        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .md3-segmented-button:enabled {
+    cursor: pointer;
+  }
+
+  .md3-segmented-button__focus-ring {
+    z-index: 1;
+  }
+
+  .md3-segmented-button__ripple {
+    border-radius: inherit;
+    z-index: 0;
+  }
+
+  .md3-segmented-button__touch {
+    @include touch-target.touch-target($width: 100%);
+  }
+
+  .md3-segmented-button__leading,
+  .md3-segmented-button__graphic {
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .md3-segmented-button__graphic {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .md3-segmented-button__graphic {
+    transition: animation.standard(width, 150ms);
+  }
+
+  .md3-segmented-button--unselected.md3-segmented-button--with-label,
+  .md3-segmented-button--unselected.md3-segmented-button--without-label,
+  .md3-segmented-button--selected.md3-segmented-button--without-checkmark {
+    .md3-segmented-button__graphic {
+      width: 0;
+    }
+  }
+
+  .md3-segmented-button--unselected .md3-segmented-button__checkmark {
+    opacity: 0;
+  }
+
+  .md3-segmented-button--selected.md3-segmented-button--with-label {
+    .md3-segmented-button__icon {
+      opacity: 0;
+    }
+  }
+
+  .md3-segmented-button--with-label .md3-segmented-button__checkmark {
+    display: inline-flex;
+    position: absolute;
+  }
+
+  .md3-segmented-button__checkmark-path {
+    stroke-width: 2px;
+    stroke-dasharray: 29.7833385;
+  }
+
+  .md3-segmented-button--selecting {
+    .md3-segmented-button__checkmark-path {
+      // We immediately render the checkmark in the animation start treatment
+      // because we're using an animation delay. If we didn't have the delay,
+      // the checkmark would render in the base fully-drawn state during the
+      // brief animation-delay period which would look wrong.
+      stroke-dashoffset: 29.7833385;
+      animation: md3-segmented-button-checkmark-selection-draw-in;
+      animation-duration: 150ms;
+      animation-delay: 50ms;
+      animation-fill-mode: forwards;
+      animation-timing-function: animation.$standard-easing;
+    }
+    &.md3-segmented-button--with-label .md3-segmented-button__icon {
+      animation: md3-segmented-button-simple-fade-out;
+      animation-duration: 75ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+  }
+
+  .md3-segmented-button--deselecting {
+    .md3-segmented-button__checkmark {
+      animation: md3-segmented-button-simple-fade-out;
+      animation-duration: 50ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+    &.md3-segmented-button--with-label .md3-segmented-button__icon {
+      // We immediately render the icon in the animation start treatment
+      // because we're using an animation delay. If we didn't have the delay,
+      // the icon would render with full opacity during the brief
+      // animation-delay period which would look wrong.
+      opacity: 0;
+      animation: md3-segmented-button-simple-fade-in;
+      animation-delay: 50ms;
+      animation-duration: 150ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+  }
+}
+
+@function resolve-tokens($tokens) {
+  $tokens: typography.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'typography'),
+    'label-text'
+  );
+  $tokens: _flatten-disabled-colors($tokens);
+  @return $tokens;
+}
+
+@function _flatten-disabled-colors($tokens) {
+  @return color.join-color-and-opacity-pairs(
+    $tokens,
+    (
+      (
+        color-key: 'disabled-container-color',
+        opacity-key: 'disabled-container-opacity'
+      ),
+      (
+        color-key: 'disabled-label-text-color',
+        opacity-key: 'disabled-label-text-opacity'
+      ),
+      (color-key: 'disabled-icon-color', opacity-key: 'disabled-icon-opacity'),
+      (
+        color-key: 'disabled-outline-color',
+        opacity-key: 'disabled-outline-opacity'
+      )
+    )
+  );
+}