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

package/button/lib/_button-theme.scss

@@ -1,204 +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.
-
-// TODO(b/228217731): Remove MDC/MWC dependencies
-@use 'sass:map';
-@use '@material/web/sass/color';
-@use '@material/web/ripple/ripple-theme';
-@use '@material/web/compat/theme/state';
-
-$selectors: (
-  // :not(:disabled) is used to support link styled as button
-  // as link does not support :enabled style
-  enabled: ':not(:disabled)',
-  disabled: ':disabled',
-  focus: ':focus',
-  hover: ':hover',
-  pressed: ':active'
-);
-
-@mixin theme-styles($theme) {
-  @include _set-label-text-typography(
-    (
-      family: map.get($theme, label-text-font),
-      size: map.get($theme, label-text-size),
-      tracking: map.get($theme, label-text-tracking),
-      weight: map.get($theme, label-text-weight),
-    )
-  );
-
-  @include _container-fill-color(
-    (
-      default: map.get($theme, container-color),
-      disabled: map.get($theme, disabled-container-color),
-    )
-  );
-
-  @include _ink-color(
-    (
-      default: map.get($theme, label-text-color),
-      hover: map.get($theme, hover-label-text-color),
-      focus: map.get($theme, focus-label-text-color),
-      pressed: map.get($theme, pressed-label-text-color),
-      disabled: map.get($theme, disabled-label-text-color),
-    )
-  );
-
-  @include ripple-theme.theme(
-    (
-      hover-state-layer-color: map.get($theme, hover-state-layer-color),
-      focus-state-layer-color: map.get($theme, focus-state-layer-color),
-      pressed-state-layer-color: map.get($theme, pressed-state-layer-color),
-      hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
-      focus-state-layer-opacity: map.get($theme, focus-state-layer-opacity),
-      pressed-state-layer-opacity: map.get($theme, pressed-state-layer-opacity),
-    )
-  );
-
-  $container-height: map.get($theme, container-height);
-  @include _set-height($container-height);
-
-  $shape: map.get($theme, container-shape);
-  @include _set-shape-radius($shape);
-
-  // TODO(b/181413732): Verify tokens below are named correctly
-  padding-inline-start: map.get($theme, 'spacing-leading');
-  padding-inline-end: map.get($theme, 'spacing-trailing');
-  &.md3-button--icon-leading {
-    padding-inline-start: map.get($theme, 'with-icon-spacing-leading');
-    padding-inline-end: map.get($theme, 'with-icon-spacing-trailing');
-  }
-  &.md3-button--icon-trailing {
-    padding-inline-start: map.get($theme, 'with-trailing-icon-spacing-leading');
-    padding-inline-end: map.get($theme, 'with-trailing-icon-spacing-trailing');
-  }
-}
-
-@function flatten-disabled-colors($theme) {
-  @return color.join-color-and-opacity-pairs(
-    $theme,
-    (
-      (
-        color-key: 'disabled-container-color',
-        opacity-key: 'disabled-container-opacity'
-      ),
-      (
-        color-key: 'disabled-label-text-color',
-        opacity-key: 'disabled-label-text-opacity'
-      ),
-      (
-        color-key: 'with-icon-disabled-icon-color',
-        opacity-key: 'with-icon-disabled-icon-opacity'
-      ),
-      (
-        color-key: 'disabled-outline-color',
-        opacity-key: 'disabled-outline-opacity'
-      )
-    )
-  );
-}
-
-@function remove-unsupported-tokens($theme) {
-  // b/193825150: Text and Outlined Button don't have `container-shadow-color`,
-  // leaving `container-elevation` useless.
-  @if not map.get($theme, 'container-shadow-color') {
-    $theme: map.remove($theme, 'container-elevation');
-  }
-
-  $unsupported-tokens: (
-    // TODO(b/233225796): Clean up this removal of `dragged` tokens.
-    'dragged-container-elevation',
-    'dragged-label-text-color',
-    'dragged-state-layer-color',
-    'dragged-state-layer-opacity',
-    'with-icon-dragged-icon-color',
-    // b/189346077#comment2: `label-text-line-height` is included in token set
-    // "just in case", but it's okay to ignore.
-    'label-text-line-height',
-    // b/203778922: `label-text-type` used by other platforms but not web.
-    'label-text-type'
-  );
-  @return map.remove($theme, $unsupported-tokens);
-}
-
-@mixin _container-fill-color($color-or-map) {
-  @include state.default($selectors) {
-    @include _set-container-fill-color(state.get-default-state($color-or-map));
-  }
-
-  @include state.hover($selectors) {
-    @include _set-container-fill-color(state.get-hover-state($color-or-map));
-  }
-
-  @include state.focus($selectors) {
-    @include _set-container-fill-color(state.get-focus-state($color-or-map));
-  }
-
-  @include state.pressed($selectors) {
-    @include _set-container-fill-color(state.get-pressed-state($color-or-map));
-  }
-
-  @include state.disabled($selectors) {
-    @include _set-container-fill-color(state.get-disabled-state($color-or-map));
-  }
-}
-
-@mixin _ink-color($color-or-map) {
-  @include state.default($selectors) {
-    @include _set-ink-color(state.get-default-state($color-or-map));
-  }
-
-  @include state.hover($selectors) {
-    @include _set-ink-color(state.get-hover-state($color-or-map));
-  }
-
-  @include state.focus($selectors) {
-    @include _set-ink-color(state.get-focus-state($color-or-map));
-  }
-
-  @include state.pressed($selectors) {
-    @include _set-ink-color(state.get-pressed-state($color-or-map));
-  }
-
-  @include state.disabled($selectors) {
-    @include _set-ink-color(state.get-disabled-state($color-or-map));
-  }
-}
-
-@mixin _set-height($height) {
-  block-size: $height;
-}
-
-@mixin _set-shape-radius($radius) {
-  &,
-  .md3-button__ripple {
-    border-radius: $radius;
-  }
-}
-
-@mixin _set-container-fill-color($color) {
-  background-color: $color;
-}
-
-@mixin _set-ink-color($color) {
-  color: $color;
-}
-
-@mixin _set-label-text-typography($typography-map) {
-  $family: map.get($typography-map, family);
-  $size: map.get($typography-map, size);
-  $tracking: map.get($typography-map, tracking);
-  $weight: map.get($typography-map, weight);
-  $transform: map.get($typography-map, transform);
-
-  font-family: $family;
-  font-size: $size;
-  letter-spacing: $tracking;
-  font-weight: $weight;
-  text-transform: $transform;
-}

package/button/lib/_button.scss

@@ -1,88 +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.
-
-// TODO(b/228217731): Remove compat dependencies
-@use '@material/web/compat/touchtarget/touch-target';
-@use '@material/web/elevation/lib/surface' as elevation-surface;
-@use '@material/web/compat/theme/selector-ext';
-
-@use './button-theme';
-
-@mixin static-styles() {
-  :host {
-    @include host-root;
-    @include selector-ext.append-strict(&, '[disabled]') {
-      @include disabled;
-    }
-  }
-
-  .md3-button {
-    @include root;
-
-    &:active {
-      @include active;
-    }
-
-    &:hover {
-      @include hover;
-    }
-  }
-
-  .md3-link-button-wrapper {
-    inline-size: 100%;
-  }
-}
-
-@mixin host-root() {
-  display: inline-flex;
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-  /**
-   * Override vertical-align with shortest value "top". Vertical-align's default
-   * "baseline" value causes buttons to be misaligned next to each other if one
-   * button has an icon and the other does not.
-   */
-  vertical-align: top;
-}
-
-@mixin root() {
-  @include elevation-surface.root-static-styles();
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-inline-size: 64px;
-  border: none;
-  outline: none;
-  line-height: inherit;
-  user-select: none;
-  -webkit-appearance: none;
-  vertical-align: middle;
-  background: transparent;
-  text-decoration: none;
-  inline-size: 100%;
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-}
-
-@mixin active() {
-  outline: none;
-}
-
-@mixin hover() {
-  cursor: pointer;
-}
-
-@mixin disabled() {
-  cursor: default;
-  pointer-events: none;
-}

package/button/lib/_elevated-button-theme.scss

@@ -1,53 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
-@use '@material/web/sass/typography';
-@use '@material/web/tokens';
-@use './button-theme';
-@use './elevation-theme';
-@use './icon-theme';
-
-$_custom-property-prefix: 'elevated-button';
-
-$light-theme: tokens.md-comp-elevated-button-values();
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  // TODO(b/198759625): Remove once spacing tokens are formally added
-  $theme: map.set($theme, 'spacing-leading', 24px);
-  $theme: map.set($theme, 'spacing-trailing', 24px);
-  $theme: map.set($theme, 'with-icon-spacing-leading', 16px);
-  $theme: map.set($theme, 'with-icon-spacing-trailing', 24px);
-  $theme: map.set($theme, 'with-trailing-icon-spacing-leading', 24px);
-  $theme: map.set($theme, 'with-trailing-icon-spacing-trailing', 16px);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include button-theme.theme-styles($theme);
-  @include icon-theme.theme-styles($theme);
-  @include elevation-theme.theme-styles($theme);
-}
-
-@function _resolve-theme($theme, $resolvers) {
-  $theme: button-theme.flatten-disabled-colors($theme);
-  $theme: button-theme.remove-unsupported-tokens($theme);
-  $theme: typography.resolve-theme(
-    $theme,
-    map.get($resolvers, 'typography'),
-    'label-text'
-  );
-  @return elevation-theme.resolve-theme($theme, $resolvers);
-}

package/button/lib/_elevation-theme.scss

@@ -1,94 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// TODO(b/228217731): Remove MDC/MWC dependencies
-@use 'sass:map';
-@use 'sass:meta';
-
-@use '@material/web/elevation/lib/elevation-theme';
-@use '@material/web/ripple/ripple-theme';
-@use '@material/web/compat/theme/state';
-
-@use './button-theme';
-
-$_selectors: button-theme.$selectors;
-
-@mixin theme-styles($theme) {
-  @debug map.get($theme, container-elevation-shadow);
-  @include _elevation(
-    (
-      default: (
-        shadow: map.get($theme, container-elevation-shadow),
-        overlay-opacity: map.get($theme, container-elevation-overlay-opacity),
-      ),
-      hover: (
-        shadow: map.get($theme, hover-container-elevation-shadow),
-        overlay-opacity:
-          map.get($theme, hover-container-elevation-overlay-opacity),
-      ),
-      focus: (
-        shadow: map.get($theme, focus-container-elevation-shadow),
-        overlay-opacity:
-          map.get($theme, focus-container-elevation-overlay-opacity),
-      ),
-      pressed: (
-        shadow: map.get($theme, pressed-container-elevation-shadow),
-        overlay-opacity:
-          map.get($theme, pressed-container-elevation-overlay-opacity),
-      ),
-      disabled: (
-        shadow: map.get($theme, disabled-container-elevation-shadow),
-        overlay-opacity:
-          map.get($theme, disabled-container-elevation-overlay-opacity),
-      ),
-    )
-  );
-
-  @include elevation-theme.theme-styles(
-    (
-      surface-tint-layer-color:
-        map.get($theme, container-surface-tint-layer-color),
-    )
-  );
-}
-
-@function resolve-theme($theme, $resolvers) {
-  @return elevation-theme.resolve-theme(
-    $theme,
-    map.get($resolvers, elevation),
-    $shadow-color-token: container-shadow-color,
-    $elevation-tokens: (
-      container-elevation,
-      disabled-container-elevation,
-      focus-container-elevation,
-      hover-container-elevation,
-      pressed-container-elevation
-    )
-  );
-}
-
-@mixin _elevation($elevations) {
-  @include state.default($_selectors) {
-    @include elevation-theme.theme-styles(state.get-default-state($elevations));
-  }
-
-  @include state.hover($_selectors) {
-    @include elevation-theme.theme-styles(state.get-hover-state($elevations));
-  }
-
-  @include state.focus($_selectors) {
-    @include elevation-theme.theme-styles(state.get-focus-state($elevations));
-  }
-
-  @include state.pressed($_selectors) {
-    @include elevation-theme.theme-styles(state.get-pressed-state($elevations));
-  }
-
-  @include state.disabled($_selectors) {
-    @include elevation-theme.theme-styles(
-      state.get-disabled-state($elevations)
-    );
-  }
-}

package/button/lib/_filled-button-theme.scss

@@ -1,53 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
-@use '@material/web/sass/typography';
-@use '@material/web/tokens';
-@use './button-theme';
-@use './elevation-theme';
-@use './icon-theme';
-
-$_custom-property-prefix: 'filled-button';
-
-$light-theme: tokens.md-comp-filled-button-values();
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  // TODO(b/198759625): Remove once spacing tokens are formally added
-  $theme: map.set($theme, 'spacing-leading', 24px);
-  $theme: map.set($theme, 'spacing-trailing', 24px);
-  $theme: map.set($theme, 'with-icon-spacing-leading', 16px);
-  $theme: map.set($theme, 'with-icon-spacing-trailing', 24px);
-  $theme: map.set($theme, 'with-trailing-icon-spacing-leading', 24px);
-  $theme: map.set($theme, 'with-trailing-icon-spacing-trailing', 16px);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include button-theme.theme-styles($theme);
-  @include icon-theme.theme-styles($theme);
-  @include elevation-theme.theme-styles($theme);
-}
-
-@function _resolve-theme($theme, $resolvers) {
-  $theme: button-theme.flatten-disabled-colors($theme);
-  $theme: button-theme.remove-unsupported-tokens($theme);
-  $theme: typography.resolve-theme(
-    $theme,
-    map.get($resolvers, 'typography'),
-    'label-text'
-  );
-  @return elevation-theme.resolve-theme($theme, $resolvers);
-}

package/button/lib/_icon-theme.scss

@@ -1,67 +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.
-
-// TODO(b/228217731): Remove MDC/MWC dependencies
-@use 'sass:map';
-@use '@material/web/ripple/ripple-theme';
-@use '@material/web/compat/theme/state';
-@use './button-theme';
-
-$_selectors: button-theme.$selectors;
-
-@mixin theme-styles($theme) {
-  @include _set-icon-color(
-    (
-      default: map.get($theme, with-icon-icon-color),
-      hover: map.get($theme, with-icon-hover-icon-color),
-      focus: map.get($theme, with-icon-focus-icon-color),
-      pressed: map.get($theme, with-icon-pressed-icon-color),
-      disabled: map.get($theme, with-icon-disabled-icon-color),
-    )
-  );
-
-  @include _set-icon-size(map.get($theme, with-icon-icon-size));
-}
-
-@mixin _set-icon-color($colors) {
-  @include state.default($_selectors) {
-    @include _icon-color(state.get-default-state($colors));
-  }
-
-  @include state.hover($_selectors) {
-    @include _icon-color(state.get-hover-state($colors));
-  }
-
-  @include state.focus($_selectors) {
-    @include _icon-color(state.get-focus-state($colors));
-  }
-
-  @include state.pressed($_selectors) {
-    @include _icon-color(state.get-pressed-state($colors));
-  }
-
-  @include state.disabled($_selectors) {
-    @include _icon-color(state.get-disabled-state($colors));
-  }
-}
-
-@mixin _icon-color($color) {
-  ::slotted([slot='icon']),
-  .md3-button__icon {
-    color: $color;
-  }
-}
-
-@mixin _set-icon-size($size) {
-  ::slotted([slot='icon']),
-  .md3-button__icon {
-    font-size: $size;
-    inline-size: $size;
-    block-size: $size;
-  }
-}

package/button/lib/_outlined-button-theme.scss

@@ -1,112 +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.
-
-// TODO(b/228217731): Remove compat dependencies
-@use 'sass:map';
-@use '@material/web/compat/theme/state';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
-@use '@material/web/sass/typography';
-@use '@material/web/tokens';
-@use './button-theme';
-@use './icon-theme';
-
-$_selectors: button-theme.$selectors;
-$_custom-property-prefix: 'outlined-button';
-
-$light-theme: tokens.md-comp-outlined-button-values();
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  // TODO(b/198759625): Remove once spacing tokens are formally added
-  $theme: map.set($theme, 'spacing-leading', 24px);
-  $theme: map.set($theme, 'spacing-trailing', 24px);
-  $theme: map.set($theme, 'with-icon-spacing-leading', 16px);
-  $theme: map.set($theme, 'with-icon-spacing-trailing', 24px);
-  $theme: map.set($theme, 'with-trailing-icon-spacing-leading', 24px);
-  $theme: map.set($theme, 'with-trailing-icon-spacing-trailing', 16px);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include button-theme.theme-styles($theme);
-  @include icon-theme.theme-styles($theme);
-  @include _shape-radius(map.get($theme, container-shape));
-  @include _outline-color(
-    (
-      default: map.get($theme, outline-color),
-      disabled: map.get($theme, disabled-outline-color),
-      pressed: map.get($theme, pressed-outline-color),
-    )
-  );
-  @include _outline-width(map.get($theme, outline-width));
-}
-
-@function _resolve-theme($theme, $resolvers) {
-  $theme: button-theme.flatten-disabled-colors($theme);
-  $theme: button-theme.remove-unsupported-tokens($theme);
-  $theme: typography.resolve-theme(
-    $theme,
-    map.get($resolvers, 'typography'),
-    'label-text'
-  );
-  @return $theme;
-}
-
-@mixin _shape-radius($radius) {
-  .md3-button__outline {
-    border-radius: $radius;
-  }
-}
-
-@mixin _outline-color($colors) {
-  @include state.default($_selectors) {
-    @include _set-outline-color(state.get-default-state($colors));
-  }
-
-  @include state.hover($_selectors) {
-    @include _set-outline-color(state.get-hover-state($colors));
-  }
-
-  @include state.focus($_selectors) {
-    @include _set-outline-color(state.get-focus-state($colors));
-  }
-
-  @include state.pressed($_selectors) {
-    @include _set-outline-color(state.get-pressed-state($colors));
-  }
-
-  @include state.disabled($_selectors) {
-    @include _set-outline-color(state.get-disabled-state($colors));
-  }
-}
-
-@mixin _set-outline-color($color) {
-  .md3-button__outline {
-    border-color: $color;
-  }
-}
-
-@mixin _outline-width($width) {
-  .md3-button__outline,
-  .md3-button__ripple {
-    border-width: $width;
-  }
-
-  .md3-button__ripple {
-    inline-size: calc(100% - 2 * #{$width});
-    block-size: calc(100% - 2 * #{$width});
-  }
-}