@material/web 0.1.0-alpha.2 → 1.0.0-pre.1

package/elevationold/lib/_elevation-theme.scss

@@ -1,74 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use 'sass:meta';
-@use '../../sass/theme';
-@use '../../sass/var';
-@use './elevation-overlay-theme';
-
-@function resolve-theme(
-  $theme,
-  $resolver,
-  $shadow-color-token,
-  $elevation-tokens
-) {
-  @if $resolver == null {
-    @return $theme;
-  }
-
-  $shadow-color: map.get($theme, $shadow-color-token);
-
-  // Resolve the value for each state key.
-  @each $token in $elevation-tokens {
-    $value: map.get($theme, $token);
-    $elevation-theme: meta.call(
-      $resolver,
-      $elevation: $value,
-      $shadow-color: $shadow-color
-    );
-
-    @each $resolved-token, $resolved-value in $elevation-theme {
-      $theme: map.set($theme, #{$token}-#{$resolved-token}, $resolved-value);
-    }
-
-    // clean up unused elevation token
-    $theme: map.remove($theme, $token);
-  }
-
-  // clean up unused shadow color token
-  $theme: map.remove($theme, $shadow-color-token);
-
-  @return $theme;
-}
-
-/// Represents the configurable values of the elevation theme.
-$_flat-theme: map.merge(
-  elevation-overlay-theme.$transparent-theme,
-  (
-    shadow: none,
-  )
-);
-
-/// Applies the given theme styles.
-///
-/// @param {Map} $theme - @see $_flat-theme for accepted theme properties.
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme-styles(
-    $_flat-theme,
-    $theme,
-    $require-all: false
-  );
-
-  @include _box-shadow(map.get($theme, shadow));
-  @include elevation-overlay-theme.theme-styles($theme);
-}
-
-/// Sets the box shadow of the element.
-///
-/// @param {String} $box-shadow - The shadow to apply to the element.
-@mixin _box-shadow($box-shadow) {
-  box-shadow: $box-shadow;
-}

package/elevationold/lib/_surface.scss

@@ -1,15 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-$duration: 280ms;
-$easing: cubic-bezier(0.4, 0, 0.2, 1);
-
-@mixin root-static-styles() {
-  position: relative;
-  transition: border #{$duration} #{$easing}, box-shadow #{$duration} #{$easing};
-  // used for interacting with overlays
-  z-index: 0;
-  --mdc-ripple-z-index: -1;
-}

package/elevationold/lib/elevation-overlay-styles.css.js

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * SPDX-License-Identifier: Apache-2.0
-  */
-import { css } from 'lit';
-export const styles = css `.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}/*# sourceMappingURL=elevation-overlay-styles.css.map */
-`;
-//# sourceMappingURL=elevation-overlay-styles.css.js.map

package/elevationold/lib/elevation-overlay-styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"elevation-overlay-styles.css.js","sourceRoot":"","sources":["elevation-overlay-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}/*# sourceMappingURL=elevation-overlay-styles.css.map */\n`;\n "]}

package/elevationold/lib/elevation-overlay-styles.scss

@@ -1,9 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-@use './elevation-overlay';
-
-@include elevation-overlay.static-styles;

package/radio/lib/_radio-theme.scss

@@ -1,377 +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.
-
-@use 'sass:map';
-@use 'sass:selector';
-
-@use '../../ripple/ripple';
-@use '../../sass/theme';
-@use '../../tokens';
-
-$light-theme: tokens.md-comp-radio-button-values();
-$custom-property-prefix: 'radio';
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  @include theme.emit-theme-vars(
-    theme.create-theme-vars($theme, $custom-property-prefix)
-  );
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  // Set touch target manually until tokens provide this information.
-  $theme: map.set($theme, _touch-target-size, 48px);
-  $theme: theme.create-theme-vars($theme, $prefix: $custom-property-prefix);
-
-  .md3-radio {
-    @include _disabled-selected-icon-color(
-      map.get($theme, disabled-selected-icon-color)
-    );
-    @include _disabled-selected-icon-opacity(
-      map.get($theme, disabled-selected-icon-opacity)
-    );
-    @include _disabled-unselected-icon-color(
-      map.get($theme, disabled-unselected-icon-color)
-    );
-    @include _disabled-unselected-icon-opacity(
-      map.get($theme, disabled-unselected-icon-opacity)
-    );
-    @include _icon-size(map.get($theme, icon-size));
-    @include _selected-focus-icon-color(
-      map.get($theme, selected-focus-icon-color)
-    );
-    @include _selected-hover-icon-color(
-      map.get($theme, selected-hover-icon-color)
-    );
-    @include _selected-icon-color(map.get($theme, selected-icon-color));
-    @include _selected-pressed-icon-color(
-      map.get($theme, selected-pressed-icon-color)
-    );
-    @include _state-layer-size(map.get($theme, state-layer-size));
-    @include _touch-target($size: map.get($theme, state-layer-size));
-    @include _unselected-focus-icon-color(
-      map.get($theme, unselected-focus-icon-color)
-    );
-    @include _unselected-hover-icon-color(
-      map.get($theme, unselected-hover-icon-color)
-    );
-    @include _unselected-icon-color(map.get($theme, unselected-icon-color));
-    @include _unselected-pressed-icon-color(
-      map.get($theme, unselected-pressed-icon-color)
-    );
-  }
-
-  .md3-radio--touch {
-    @include _touch-target($size: map.get($theme, _touch-target-size));
-  }
-
-  @include ripple.theme(
-    (
-      hover-state-layer-color:
-        map.get($theme, unselected-hover-state-layer-color),
-      focus-state-layer-color:
-        map.get($theme, unselected-focus-state-layer-color),
-      pressed-state-layer-color:
-        map.get($theme, unselected-pressed-state-layer-color),
-      hover-state-layer-opacity:
-        map.get($theme, unselected-hover-state-layer-opacity),
-      focus-state-layer-opacity:
-        map.get($theme, unselected-focus-state-layer-opacity),
-      pressed-state-layer-opacity:
-        map.get($theme, unselected-pressed-state-layer-opacity),
-    )
-  );
-
-  @include _checked-selector() {
-    @include ripple.theme(
-      (
-        hover-state-layer-color:
-          map.get($theme, selected-hover-state-layer-color),
-        focus-state-layer-color:
-          map.get($theme, selected-focus-state-layer-color),
-        pressed-state-layer-color:
-          map.get($theme, selected-pressed-state-layer-color),
-        hover-state-layer-opacity:
-          map.get($theme, selected-hover-state-layer-opacity),
-        focus-state-layer-opacity:
-          map.get($theme, selected-focus-state-layer-opacity),
-        pressed-state-layer-opacity:
-          map.get($theme, selected-pressed-state-layer-opacity),
-      )
-    );
-  }
-}
-
-$_theme-extension-keys: (
-  touch-target-size: null,
-);
-
-@mixin theme-extension($theme) {
-  $theme: theme.validate-theme($_theme-extension-keys, $theme);
-
-  .md3-radio {
-    @include _touch-target(map.get($theme, touch-target-size));
-  }
-}
-
-@mixin high-contrast-styles() {
-  @include _disabled-selected-icon-color(GrayText);
-  @include _disabled-selected-icon-opacity(1);
-  @include _disabled-unselected-icon-color(GrayText);
-  @include _disabled-unselected-icon-opacity(1);
-  @include _selected-icon-color(CanvasText);
-  @include _selected-hover-icon-color(CanvasText);
-  @include _selected-focus-icon-color(CanvasText);
-  @include _selected-pressed-icon-color(CanvasText);
-  @include _unselected-icon-color(CanvasText);
-  @include _unselected-hover-icon-color(CanvasText);
-  @include _unselected-focus-icon-color(CanvasText);
-  @include _unselected-pressed-icon-color(CanvasText);
-}
-
-///
-/// Sets the stroke color of a checked, disabled radio button.
-/// @param {Color} $color - The desired stroke color.
-///
-@mixin disabled-checked-stroke-color($color) {
-  @include _if-disabled-checked {
-    @include _stroke-color($color);
-  }
-}
-
-///
-/// Sets the stroke color of an unchecked, disabled radio button.
-/// @param {Color} $color - The desired stroke color.
-///
-@mixin disabled-unchecked-stroke-color($color) {
-  @include _if-disabled-unchecked {
-    @include _stroke-color($color);
-  }
-}
-
-///
-/// Sets the ink color of a disabled radio button.
-/// @param {Color} $color - The desired ink color
-///
-@mixin disabled-ink-color($color) {
-  @include _if-disabled {
-    @include _ink-color($color);
-  }
-}
-
-@mixin _disabled-selected-icon-color($color) {
-  @include disabled-checked-stroke-color($color);
-  @include disabled-ink-color($color);
-}
-
-@mixin _disabled-selected-icon-opacity($opacity) {
-  @include _disabled-checked-stroke-opacity($opacity);
-  @include _disabled-ink-opacity($opacity);
-}
-
-@mixin _disabled-unselected-icon-color($color) {
-  @include disabled-unchecked-stroke-color($color);
-}
-
-@mixin _disabled-unselected-icon-opacity($opacity) {
-  @include _disabled-unchecked-stroke-opacity($opacity);
-}
-
-@mixin _icon-size($size) {
-  .md3-radio__background {
-    height: $size;
-    width: $size;
-  }
-}
-
-@mixin _selected-hover-icon-color($color) {
-  @include _if-input-selected {
-    &:hover + {
-      @include _stroke-color($color);
-      @include _ink-color($color);
-    }
-  }
-}
-
-@mixin _selected-focus-icon-color($color) {
-  @include _if-input-selected {
-    &:focus + {
-      @include _stroke-color($color);
-      @include _ink-color($color);
-    }
-  }
-}
-
-@mixin _selected-pressed-icon-color($color) {
-  @include _if-input-selected {
-    &:active + {
-      @include _stroke-color($color);
-      @include _ink-color($color);
-    }
-  }
-}
-
-@mixin _selected-icon-color($color) {
-  @include _if-input-selected {
-    & + {
-      @include _stroke-color($color);
-      @include _ink-color($color);
-    }
-  }
-}
-
-@mixin _unselected-hover-icon-color($color) {
-  @include _if-input-unselected {
-    &:hover + {
-      @include _stroke-color($color);
-    }
-  }
-}
-
-@mixin _unselected-focus-icon-color($color) {
-  @include _if-input-unselected {
-    &:focus + {
-      @include _stroke-color($color);
-    }
-  }
-}
-
-@mixin _unselected-pressed-icon-color($color) {
-  @include _if-input-unselected {
-    &:active + {
-      @include _stroke-color($color);
-    }
-  }
-}
-
-@mixin _unselected-icon-color($color) {
-  @include _if-input-unselected {
-    & + {
-      @include _stroke-color($color);
-    }
-  }
-}
-
-@mixin _disabled-unchecked-stroke-opacity($opacity) {
-  @include _if-disabled-unchecked {
-    @include _stroke-opacity($opacity);
-  }
-}
-
-@mixin _disabled-checked-stroke-opacity($opacity) {
-  @include _if-disabled-checked {
-    @include _stroke-opacity($opacity);
-  }
-}
-
-@mixin _disabled-ink-opacity($opacity) {
-  @include _if-disabled {
-    @include _ink-opacity($opacity);
-  }
-}
-
-@mixin _touch-target($size) {
-  block-size: $size;
-  inline-size: $size;
-}
-
-@mixin _state-layer-size($size) {
-  .md3-radio__ripple {
-    block-size: $size;
-    inline-size: $size;
-  }
-}
-
-///
-/// Sets the ink color for radio. This is wrapped in a mixin
-/// that qualifies state such as `_if-enabled`
-///
-@mixin _ink-color($color) {
-  .md3-radio__background .md3-radio__inner-circle {
-    background-color: $color;
-  }
-}
-
-@mixin _ink-opacity($opacity) {
-  .md3-radio__background .md3-radio__inner-circle {
-    opacity: $opacity;
-  }
-}
-
-///
-/// Sets the stroke color for radio. This is wrapped in a mixin
-/// that qualifies state such as `_if-enabled`
-///
-@mixin _stroke-color($color) {
-  .md3-radio__background .md3-radio__outer-circle {
-    border-color: $color;
-  }
-}
-
-@mixin _stroke-opacity($opacity) {
-  .md3-radio__background .md3-radio__outer-circle {
-    opacity: $opacity;
-  }
-}
-
-@mixin _checked-selector() {
-  @at-root {
-    :host([checked]) {
-      @content;
-    }
-  }
-}
-
-@mixin _if-input-unselected {
-  .md3-radio__native-control:enabled:not(:checked) {
-    @content;
-  }
-}
-
-@mixin _if-input-selected {
-  .md3-radio__native-control:enabled:checked {
-    @content;
-  }
-}
-
-///
-/// Helps select the radio background only when its native control is in the
-/// disabled state.
-///
-@mixin _if-disabled {
-  .md3-radio__native-control:disabled {
-    + {
-      @content;
-    }
-  }
-}
-
-///
-/// Helps select the radio background only when its native control is in the
-/// disabled & unchecked state.
-///
-@mixin _if-disabled-unchecked {
-  .md3-radio__native-control:disabled {
-    &:not(:checked) + {
-      @content;
-    }
-  }
-}
-
-///
-/// Helps select the radio background only when its native control is in the
-/// disabled & checked state.
-///
-@mixin _if-disabled-checked {
-  .md3-radio__native-control:disabled {
-    &:checked + {
-      @content;
-    }
-  }
-}