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

package/compat/touchtarget/_touch-target.scss

@@ -1,56 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:math';
-
-$height: 48px !default;
-$width: $height !default;
-
-/// Styles applied to the component's inner touch target element.
-/// By default, only sets the inner element height to the minimum touch target
-/// height ($mdc-touch-target-height).
-/// @param {Boolean} $set-width [false] - Sets the inner element width to the
-///     minimum touch target width ($mdc-touch-target-width).
-/// @param $height [$mdc-touch-target-height] - Touch target height.
-/// @param $width [$mdc-touch-target-width] - Touch target width.
-@mixin touch-target($set-width: false, $height: $height, $width: $width) {
-  position: absolute;
-  top: 50%;
-  height: $height;
-  @if $set-width {
-    /* @noflip */ /*rtl:ignore*/
-    left: 50%;
-    width: $width;
-    transform: translate(-50%, -50%);
-  } @else {
-    left: 0;
-    right: 0;
-    transform: translateY(-50%);
-  }
-}
-
-/// Applies margin to the component with the increased touch target,
-/// to compensate for the touch target.
-@mixin margin(
-  $component-height,
-  $component-width: null,
-  $touch-target-height: $height,
-  $touch-target-width: $width
-) {
-  $vertical-margin-value: math.div($touch-target-height - $component-height, 2);
-
-  margin-top: $vertical-margin-value;
-  margin-bottom: $vertical-margin-value;
-
-  @if $component-width {
-    $horizontal-margin-value: math.div(
-      $touch-target-width - $component-width,
-      2
-    );
-
-    margin-right: $horizontal-margin-value;
-    margin-left: $horizontal-margin-value;
-  }
-}

package/fab/lib/_fab-extended-theme.scss

@@ -1,108 +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.
-
-@use 'sass:map';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
-@use '@material/web/tokens';
-@use './fab-shared-theme';
-
-$surface-theme: tokens.md-comp-extended-fab-surface-values();
-
-@mixin primary-theme() {
-  $primary-theme: tokens.md-comp-extended-fab-primary-values();
-  @include theme($primary-theme);
-}
-
-@mixin secondary-theme() {
-  $secondary-theme: tokens.md-comp-extended-fab-secondary-values();
-  @include theme($secondary-theme);
-}
-
-@mixin tertiary-theme() {
-  $tertiary-theme: tokens.md-comp-extended-fab-tertiary-values();
-  @include theme($tertiary-theme);
-}
-
-@mixin branded-theme() {
-  $branded-theme: tokens.md-comp-extended-fab-branded-values();
-  @include theme($branded-theme);
-}
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme($surface-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, fab-extended);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($surface-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, fab-extended);
-
-  @include fab-shared-theme.theme-styles($theme);
-
-  height: map.get($theme, container-height);
-
-  @include _label-color(
-    (
-      default: map.get($theme, label-text-color),
-      focus: map.get($theme, focus-label-text-color),
-      hover: map.get($theme, hover-label-text-color),
-      pressed: map.get($theme, pressed-label-text-color),
-    )
-  );
-
-  @include _label-typography(
-    (
-      font: map.get($theme, label-text-font),
-      line-height: map.get($theme, label-text-line-height),
-      size: map.get($theme, label-text-size),
-      weight: map.get($theme, label-text-weight),
-      tracking: map.get($theme, label-text-tracking),
-    )
-  );
-}
-
-@function _resolve-theme($theme, $resolvers) {
-  @return fab-shared-theme.resolve-theme($theme, $resolvers);
-}
-
-@mixin _label-color($color-or-map) {
-  &:enabled {
-    @include _set-label-color(map.get($color-or-map, default));
-  }
-
-  &:hover {
-    @include _set-label-color(map.get($color-or-map, hover));
-  }
-
-  &:focus {
-    @include _set-label-color(map.get($color-or-map, focus));
-  }
-
-  &:active {
-    @include _set-label-color(map.get($color-or-map, pressed));
-  }
-}
-
-@mixin _set-label-color($color) {
-  .md3-fab__label {
-    color: $color;
-  }
-}
-
-@mixin _label-typography($typography-map) {
-  font-family: map.get($typography-map, font);
-  line-height: map.get($typography-map, line-height);
-  font-size: map.get($typography-map, size);
-  font-weight: map.get($typography-map, weight);
-  letter-spacing: map.get($typography-map, tracking);
-}

package/fab/lib/_fab-shared-theme.scss

@@ -1,202 +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.
-
-@use 'sass:map';
-@use 'sass:meta';
-
-@use '@material/web/elevation/lib/elevation-theme';
-@use '@material/web/ripple/ripple-theme';
-@use '@material/web/sass/elevation';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
-
-@function resolve-theme($theme, $resolvers) {
-  $theme: elevation-theme.resolve-theme(
-    $theme,
-    map.get($resolvers, elevation),
-    $shadow-color-token: container-shadow-color,
-    $elevation-tokens: (
-      container-elevation,
-      focus-container-elevation,
-      hover-container-elevation,
-      pressed-container-elevation,
-      lowered-container-elevation,
-      lowered-focus-container-elevation,
-      lowered-hover-container-elevation,
-      lowered-pressed-container-elevation
-    )
-  );
-
-  @return $theme;
-}
-
-@mixin theme-styles($theme) {
-  @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),
-      ),
-    )
-  );
-
-  @include _lowered-elevation(
-    (
-      default: (
-        shadow: map.get($theme, lowered-container-elevation-shadow),
-        overlay-opacity:
-          map.get($theme, lowered-container-elevation-overlay-opacity),
-      ),
-      hover: (
-        shadow: map.get($theme, lowered-hover-container-elevation-shadow),
-        overlay-opacity:
-          map.get($theme, lowered-hover-container-elevation-overlay-opacity),
-      ),
-      focus: (
-        shadow: map.get($theme, lowered-focus-container-elevation-shadow),
-        overlay-opacity:
-          map.get($theme, lowered-focus-container-elevation-overlay-opacity),
-      ),
-      pressed: (
-        shadow: map.get($theme, lowered-pressed-container-elevation-shadow),
-        overlay-opacity:
-          map.get($theme, lowered-pressed-container-elevation-overlay-opacity),
-      ),
-    )
-  );
-
-  @include elevation-theme.theme-styles(
-    (
-      surface-tint-layer-color:
-        map.get($theme, container-surface-tint-layer-color),
-    )
-  );
-
-  @include _container-fill-color(
-    (
-      default: map.get($theme, container-color),
-    )
-  );
-
-  @include _set-container-shape(map.get($theme, container-shape));
-
-  @include _icon-color(
-    (
-      default: map.get($theme, icon-color),
-      hover: map.get($theme, hover-icon-color),
-      focus: map.get($theme, focus-icon-color),
-      pressed: map.get($theme, pressed-icon-color),
-    )
-  );
-
-  @include _set-icon-size(map.get($theme, icon-size));
-
-  @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),
-    )
-  );
-}
-
-@mixin _lowered-elevation($elevation-map) {
-  &.md3-fab--lowered {
-    @include _elevation($elevation-map);
-  }
-}
-
-@mixin _elevation($elevation-map) {
-  &:enabled {
-    @include elevation-theme.theme-styles(map.get($elevation-map, default));
-  }
-
-  &:hover {
-    @include elevation-theme.theme-styles(map.get($elevation-map, hover));
-  }
-
-  &:focus {
-    @include elevation-theme.theme-styles(map.get($elevation-map, focus));
-  }
-
-  &:active {
-    @include elevation-theme.theme-styles(map.get($elevation-map, pressed));
-  }
-}
-
-@mixin _container-fill-color($color-or-map) {
-  &:enabled {
-    @include _set-container-fill-color(map.get($color-or-map, default));
-  }
-}
-
-@mixin _set-container-fill-color($color) {
-  background-color: $color;
-}
-
-@mixin _set-container-shape($radius) {
-  &,
-  .md3-fab__ripple {
-    border-radius: $radius;
-  }
-}
-
-@mixin _icon-color($color-or-map) {
-  &:enabled {
-    @include _set-icon-color(map.get($color-or-map, default));
-  }
-
-  &:hover {
-    @include _set-icon-color(map.get($color-or-map, hover));
-  }
-
-  &:focus {
-    @include _set-icon-color(map.get($color-or-map, focus));
-  }
-
-  &:active {
-    @include _set-icon-color(map.get($color-or-map, pressed));
-  }
-}
-
-@mixin _set-icon-color($color) {
-  ::slotted(*),
-  .md3-fab__icon {
-    color: $color;
-  }
-}
-
-@mixin _set-icon-size($size) {
-  ::slotted(*),
-  .md3-fab__icon,
-  i,
-  svg,
-  img {
-    font-size: $size;
-    height: $size;
-    width: $size;
-  }
-}

package/fab/lib/_fab-shared.scss

@@ -1,114 +0,0 @@
-//
-// Copyright 2022 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 '@material/web/sass/touch-target';
-@use '@material/web/elevation/lib/surface';
-@use '@material/web/compat/theme/selector-ext';
-@use '@material/web/focus/lib/focus-ring-theme';
-
-@mixin static-styles() {
-  :host {
-    @include host-root;
-    @include selector-ext.append-strict(&, '[disabled]') {
-      @include disabled;
-    }
-  }
-
-  .md3-fab {
-    @include root;
-
-    .md3-fab__ripple {
-      @include ripple;
-    }
-
-    &:active {
-      @include active;
-    }
-
-    &:hover {
-      @include hover;
-    }
-
-    .md3-fab__icon {
-      @include icon;
-    }
-
-    .md3-fab__touch {
-      @include touch-target;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .md3-fab {
-      @include high-contrast-styles;
-    }
-  }
-}
-
-@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 surface.root-static-styles;
-  display: inline-flex;
-  border: none;
-  outline: none;
-  user-select: none;
-  -webkit-appearance: none;
-  vertical-align: middle;
-  text-decoration: none;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-@mixin active() {
-  outline: none;
-}
-
-@mixin hover() {
-  cursor: pointer;
-}
-
-@mixin disabled() {
-  cursor: default;
-  pointer-events: none;
-}
-
-@mixin ripple() {
-  overflow: hidden;
-}
-
-@mixin icon() {
-  display: inline-flex;
-}
-
-@mixin touch-target() {
-  @include touch-target.touch-target();
-}
-
-@mixin high-contrast-styles() {
-  // Adjust the focus ring padding to account for the 1px border in HCM.
-  @include focus-ring-theme.theme(
-    (
-      container-outer-padding-vertical: 3px,
-      container-outer-padding-horizontal: 3px,
-    )
-  );
-  border: 1px solid ButtonText;
-}

package/fab/lib/_fab-theme.scss

@@ -1,107 +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/tokens';
-@use './fab-shared-theme';
-
-$surface-theme: tokens.md-comp-fab-surface-values();
-
-@mixin surface-small-theme() {
-  $surface-small-theme: tokens.md-comp-fab-surface-small-values();
-  @include theme($surface-small-theme);
-}
-
-@mixin surface-large-theme() {
-  $surface-large-theme: tokens.md-comp-fab-surface-large-values();
-  @include theme($surface-large-theme);
-}
-
-@mixin primary-small-theme() {
-  $primary-small-theme: tokens.md-comp-fab-primary-small-values();
-  @include theme($primary-small-theme);
-}
-
-@mixin primary-theme() {
-  $primary-theme: tokens.md-comp-fab-primary-values();
-  @include theme($primary-theme);
-}
-
-@mixin primary-large-theme() {
-  $primary-large-theme: tokens.md-comp-fab-primary-large-values();
-  @include theme($primary-large-theme);
-}
-
-@mixin secondary-small-theme() {
-  $secondary-small-theme: tokens.md-comp-fab-secondary-small-values();
-  @include theme($secondary-small-theme);
-}
-
-@mixin secondary-theme() {
-  $secondary-theme: tokens.md-comp-fab-secondary-values();
-  @include theme($secondary-theme);
-}
-
-@mixin secondary-large-theme() {
-  $secondary-large-theme: tokens.md-comp-fab-secondary-large-values();
-  @include theme($secondary-large-theme);
-}
-
-@mixin tertiary-small-theme() {
-  $tertiary-small-theme: tokens.md-comp-fab-tertiary-small-values();
-  @include theme($tertiary-small-theme);
-}
-
-@mixin tertiary-theme() {
-  $tertiary-theme: tokens.md-comp-fab-tertiary-values();
-  @include theme($tertiary-theme);
-}
-
-@mixin tertiary-large-theme() {
-  $tertiary-large-theme: tokens.md-comp-fab-tertiary-large-values();
-  @include theme($tertiary-large-theme);
-}
-
-@mixin branded-theme() {
-  $branded-theme: tokens.md-comp-fab-branded-values();
-  @include theme($branded-theme);
-}
-
-@mixin branded-large-theme() {
-  $branded-large-theme: tokens.md-comp-fab-branded-large-values();
-  @include theme($branded-large-theme);
-}
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme($surface-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, fab);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($surface-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, fab);
-
-  @include fab-shared-theme.theme-styles($theme);
-
-  @include _set-container-dimensions(
-    map.get($theme, container-width),
-    map.get($theme, container-height)
-  );
-}
-
-@function _resolve-theme($theme, $resolvers) {
-  @return fab-shared-theme.resolve-theme($theme, $resolvers);
-}
-
-@mixin _set-container-dimensions($width, $height) {
-  width: $width;
-  height: $height;
-}

package/field/lib/_content-theme.scss

@@ -1,80 +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.
-
-@use 'sass:map';
-
-@mixin theme-styles($theme) {
-  @include _content-color(
-    (
-      default: map.get($theme, content-color),
-      hover: map.get($theme, hover-content-color),
-      focus: map.get($theme, focus-content-color),
-      disabled: map.get($theme, disabled-content-color),
-    )
-  );
-  @include _content-error-color(
-    (
-      default: map.get($theme, error-content-color),
-      hover: map.get($theme, error-hover-content-color),
-      focus: map.get($theme, error-focus-content-color),
-    )
-  );
-  @include _content-opacity(
-    (
-      disabled: map.get($theme, disabled-content-opacity),
-    )
-  );
-}
-
-@mixin _content-color($colors) {
-  @include _set-content-color(map.get($colors, default));
-
-  &:hover {
-    @include _set-content-color(map.get($colors, hover));
-  }
-
-  &.md3-field--focused {
-    @include _set-content-color(map.get($colors, focus));
-  }
-
-  &.md3-field--disabled {
-    @include _set-content-color(map.get($colors, disabled));
-  }
-}
-
-@mixin _content-error-color($colors) {
-  &:not(.md3-field--disabled).md3-field--error {
-    @include _content-color($colors);
-  }
-}
-
-@mixin _set-content-color($color) {
-  // Content elements provided to the field (such as <input>) may use
-  // `currentColor` to inherit this property.
-  .md3-field__content {
-    color: $color;
-  }
-}
-
-@mixin _content-opacity($opacities) {
-  @include _set-content-opacity(map.get($opacities, default));
-
-  &.md3-field--disabled {
-    @include _set-content-opacity(map.get($opacities, disabled));
-  }
-}
-
-@mixin _set-content-opacity($opacity) {
-  &.md3-field--no-label,
-  &.md3-field--focused,
-  &.md3-field--populated {
-    .md3-field__content {
-      opacity: $opacity;
-    }
-  }
-}