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

package/switch/lib/_switch-handle-theme.scss

@@ -1,137 +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';
-
-$_selected: '.md3-switch--selected';
-$_unselected: '.md3-switch--unselected';
-
-@mixin theme-styles($theme) {
-  .md3-switch__handle-container {
-    @include _handle-container($theme);
-  }
-
-  .md3-switch__handle {
-    @include _handle($theme);
-    @include _handle-selected($theme);
-    &::before {
-      @include _handle-unselected($theme);
-    }
-  }
-}
-
-@mixin _handle-container($theme) {
-  @include _handle-position(
-    map.get($theme, track-height),
-    map.get($theme, track-width)
-  );
-}
-
-@mixin _handle-position($track-height, $track-width) {
-  $margin: calc($track-width - $track-height);
-
-  #{$_selected} & {
-    margin-inline-start: $margin;
-  }
-
-  #{$_unselected} & {
-    margin-inline-end: $margin;
-  }
-}
-
-@mixin _handle($theme) {
-  // Handle shape
-  border-start-start-radius: map.get($theme, handle-shape-start-start);
-  border-start-end-radius: map.get($theme, handle-shape-start-end);
-  border-end-end-radius: map.get($theme, handle-shape-end-end);
-  border-end-start-radius: map.get($theme, handle-shape-end-start);
-
-  @include _handle-size($theme);
-}
-
-@mixin _handle-size($theme) {
-  height: map.get($theme, handle-height);
-  width: map.get($theme, handle-width);
-
-  // TODO(b/230484095): Use token instead of hard coded values
-  #{$_selected} &,
-  #{$_unselected} &.md3-switch__handle--big {
-    transform: scale(1.2);
-  }
-  #{$_unselected} & {
-    transform: scale(0.8);
-  }
-  #{$_selected}:enabled:active &,
-  #{$_unselected}:enabled:active & {
-    transform: scale(1.4);
-  }
-}
-
-@mixin _handle-selected($theme) {
-  @include _selected-handle-color(
-    (
-      default: map.get($theme, selected-handle-color),
-      disabled: map.get($theme, disabled-selected-handle-color),
-      focus: map.get($theme, selected-focus-handle-color),
-      hover: map.get($theme, selected-hover-handle-color),
-      pressed: map.get($theme, selected-pressed-handle-color),
-    )
-  );
-}
-
-@mixin _selected-handle-color($colors) {
-  background-color: map.get($colors, default);
-
-  #{$_selected}:hover & {
-    background-color: map.get($colors, hover);
-  }
-
-  #{$_selected}:focus-visible & {
-    background-color: map.get($colors, focus);
-  }
-
-  #{$_selected}:active & {
-    background-color: map.get($colors, pressed);
-  }
-
-  #{$_selected}:disabled & {
-    background-color: map.get($colors, disabled);
-  }
-}
-
-@mixin _handle-unselected($theme) {
-  @include _unselected-handle-color(
-    (
-      default: map.get($theme, unselected-handle-color),
-      disabled: map.get($theme, disabled-unselected-handle-color),
-      focus: map.get($theme, unselected-focus-handle-color),
-      hover: map.get($theme, unselected-hover-handle-color),
-      pressed: map.get($theme, unselected-pressed-handle-color),
-    )
-  );
-}
-
-@mixin _unselected-handle-color($colors) {
-  background-color: map.get($colors, default);
-
-  #{$_unselected}:hover & {
-    background-color: map.get($colors, hover);
-  }
-
-  #{$_unselected}:focus-visible & {
-    background-color: map.get($colors, focus);
-  }
-
-  #{$_unselected}:active & {
-    background-color: map.get($colors, pressed);
-  }
-
-  #{$_unselected}:disabled & {
-    background-color: map.get($colors, disabled);
-  }
-}

package/switch/lib/_switch-icon-theme.scss

@@ -1,52 +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';
-
-$_selected: '.md3-switch--selected';
-$_unselected: '.md3-switch--unselected';
-
-@mixin theme-styles($theme) {
-  .md3-switch__icon {
-    @include _icon($theme);
-  }
-}
-
-// PRIVATE API - icons
-
-@mixin _icon($theme) {
-  // icon size
-
-  #{$_selected} & {
-    width: map.get($theme, selected-icon-size);
-    height: map.get($theme, selected-icon-size);
-  }
-
-  #{$_unselected} & {
-    width: map.get($theme, unselected-icon-size);
-    height: map.get($theme, unselected-icon-size);
-  }
-
-  // icon color
-
-  #{$_selected} & {
-    fill: map.get($theme, selected-icon-color);
-  }
-
-  #{$_selected}:disabled & {
-    fill: map.get($theme, disabled-selected-icon-color);
-  }
-
-  #{$_unselected} & {
-    fill: map.get($theme, unselected-icon-color);
-  }
-
-  #{$_unselected}:disabled & {
-    fill: map.get($theme, disabled-unselected-icon-color);
-  }
-}

package/switch/lib/_switch-theme.scss

@@ -1,232 +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/focus/lib/focus-ring-theme';
-@use '@material/web/sass/color';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/shape';
-@use '@material/web/sass/theme';
-@use '@material/web/sass/var';
-@use '@material/web/tokens';
-
-@use './switch-track-theme';
-@use './switch-handle-theme';
-@use './switch-icon-theme';
-
-$_default-deps: (
-  md-sys-color: tokens.md-sys-color-values-light-dynamic(),
-  md-sys-elevation: tokens.md-sys-elevation-values(),
-  md-sys-shape: tokens.md-sys-shape-values(),
-  md-sys-state: tokens.md-sys-state-values(),
-);
-
-@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
-  $values: tokens.md-comp-switch-values($deps, $exclude-hardcoded-values);
-
-  // Add missing tokens.
-  $values: map.merge(
-    $values,
-    (
-      // TODO(b/230013081): remove this once the missing token is added.
-      unselected-track-outline-color: map.get($deps, md-sys-color, outline)
-    )
-  );
-
-  // Mark opacity tokens as not hardcoded
-  @if $exclude-hardcoded-values {
-    // If opacity value is null (e.g. for dark theme map, only the color
-    // changes, so the opacity value is null), use the default opacity value.
-    // Otherwise, the color is not flattened, meaning that the color would
-    // be applied without any opacity, which is incorrect.
-    $fullValues: tokens.md-comp-switch-values($deps);
-    $values: map.merge(
-      $values,
-      (
-        disabled-selected-handle-opacity:
-          map.get($fullValues, disabled-selected-handle-opacity),
-        disabled-unselected-handle-opacity:
-          map.get($fullValues, disabled-unselected-handle-opacity),
-        disabled-track-opacity: map.get($fullValues, disabled-track-opacity),
-        disabled-selected-icon-opacity:
-          map.get($fullValues, disabled-selected-icon-opacity),
-        disabled-unselected-icon-opacity:
-          map.get($fullValues, disabled-unselected-icon-opacity),
-      )
-    );
-  }
-
-  @return $values;
-}
-
-// PRIVATE PROPERTIES
-
-$_touch-target-size: 48px;
-
-$_selected: '.md3-switch--selected';
-$_unselected: '.md3-switch--unselected';
-
-// PUBLIC PROPERTIES
-
-$light-theme: values();
-$dark-theme: values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
-  ),
-  $exclude-hardcoded-values: true
-);
-
-$_forced-colors-theme: (
-  disabled-selected-icon-color: GrayText,
-  disabled-selected-icon-opacity: 1,
-  disabled-selected-track-color: GrayText,
-  disabled-track-opacity: 1,
-  disabled-unselected-handle-color: GrayText,
-  disabled-unselected-handle-opacity: 1,
-  disabled-unselected-icon-color: Canvas,
-  disabled-unselected-icon-opacity: 1,
-  selected-focus-track-color: ButtonText,
-  selected-hover-track-color: ButtonText,
-  selected-icon-color: ButtonText,
-  selected-pressed-track-color: ButtonText,
-  selected-track-color: ButtonText,
-  unselected-focus-handle-color: ButtonText,
-  unselected-handle-color: ButtonText,
-  unselected-hover-handle-color: ButtonText,
-  unselected-icon-color: Canvas,
-  unselected-pressed-handle-color: ButtonText,
-);
-
-@function _resolve-theme($theme, $resolvers) {
-  $theme: shape.resolve-theme(
-    $theme,
-    map.get($resolvers, shape),
-    track-shape,
-    handle-shape
-  );
-  $theme: _flatten-disable-colors($theme);
-  @return $theme;
-}
-
-@function _warn-of-not-implemented($theme) {
-  // TODO(b/230484095): remove this warning once these are implemented.
-  @if (
-    map.has-key($theme, selected-handle-height) or
-      map.has-key($theme, selected-handle-width) or
-      map.has-key($theme, unselected-handle-height) or
-      map.has-key($theme, unselected-handle-width) or
-      map.has-key($theme, pressed-handle-height) or
-      map.has-key($theme, pressed-handle-width)
-  ) {
-    @warn '`handle-height` and `handle-width` are not yet implemented. see b/230484095';
-  }
-  @return $theme;
-}
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: _warn-of-not-implemented($theme);
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, switch);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: _warn-of-not-implemented($theme);
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, switch);
-
-  :host {
-    @include _focus-ring($theme);
-  }
-
-  .md3-switch {
-    @include _root($theme);
-  }
-
-  @include switch-track-theme.theme-styles($theme);
-
-  @include switch-handle-theme.theme-styles($theme);
-
-  @include switch-icon-theme.theme-styles($theme);
-}
-
-// PRIVATE API
-
-@mixin _root($theme) {
-  width: map.get($theme, track-width);
-  height: map.get($theme, track-height);
-
-  // Track shape
-  border-start-start-radius: map.get($theme, track-shape-start-start);
-  border-start-end-radius: map.get($theme, track-shape-start-end);
-  border-end-end-radius: map.get($theme, track-shape-end-end);
-  border-end-start-radius: map.get($theme, track-shape-end-start);
-
-  @include _forced-colors-mode-theme;
-}
-
-@mixin _focus-ring($theme) {
-  // TODO(b/231741594): use `track-shape` once this is not deleted.
-  $track-shape: map.get($theme, track-shape-start-start);
-
-  @include focus-ring-theme.theme(
-    (
-      ring-radius: $track-shape,
-    )
-  );
-}
-
-@mixin _forced-colors-mode-theme {
-  // TODO(b/230630968): create a foced-colors-mode mixin
-  @media screen and (forced-colors: active) {
-    @include theme($_forced-colors-theme);
-  }
-}
-
-@function _flatten-disable-colors($theme) {
-  @return color.join-color-and-opacity-pairs(
-    $theme,
-    (
-      // Disabled Handle
-      (
-          color-key: disabled-selected-handle-color,
-          opacity-key: disabled-selected-handle-opacity
-        ),
-      (
-        color-key: disabled-unselected-handle-color,
-        opacity-key: disabled-unselected-handle-opacity
-      ),
-      // Disabled Track
-      (
-          color-key: disabled-selected-track-color,
-          opacity-key: disabled-track-opacity
-        ),
-      (
-        color-key: disabled-unselected-track-color,
-        opacity-key: disabled-track-opacity
-      ),
-      (
-        color-key: disabled-unselected-track-outline-color,
-        opacity-key: disabled-track-opacity
-      ),
-      // Disabled Icon
-      (
-          color-key: disabled-selected-icon-color,
-          opacity-key: disabled-selected-icon-opacity
-        ),
-      (
-        color-key: disabled-unselected-icon-color,
-        opacity-key: disabled-unselected-icon-opacity
-      )
-    )
-  );
-}

package/switch/lib/_switch-track-theme.scss

@@ -1,117 +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';
-
-$_selected: '.md3-switch--selected';
-$_unselected: '.md3-switch--unselected';
-
-@mixin theme-styles($theme) {
-  .md3-switch__track {
-    @include _track-selected($theme);
-    &::before {
-      @include _track-unselected($theme);
-    }
-  }
-}
-
-@mixin _track-selected($theme) {
-  @include _track-selected-color(
-    (
-      default: map.get($theme, selected-track-color),
-      disabled: map.get($theme, disabled-selected-track-color),
-      focus: map.get($theme, selected-focus-track-color),
-      hover: map.get($theme, selected-hover-track-color),
-      pressed: map.get($theme, selected-pressed-track-color),
-    )
-  );
-}
-
-@mixin _track-selected-color($colors) {
-  background-color: map.get($colors, default);
-
-  #{$_selected}:hover & {
-    background-color: map.get($colors, hover);
-  }
-
-  #{$_selected}:focus-visible & {
-    background-color: map.get($colors, focus);
-  }
-
-  #{$_selected}:active & {
-    background-color: map.get($colors, pressed);
-  }
-
-  #{$_selected}:disabled & {
-    background-color: map.get($colors, disabled);
-  }
-}
-
-@mixin _track-unselected($theme) {
-  border-width: map.get($theme, track-outline-width);
-
-  @include _track-unselected-color(
-    (
-      default: map.get($theme, unselected-track-color),
-      disabled: map.get($theme, disabled-unselected-track-color),
-      focus: map.get($theme, unselected-focus-track-color),
-      hover: map.get($theme, unselected-hover-track-color),
-      pressed: map.get($theme, unselected-pressed-track-color),
-    )
-  );
-
-  @include _track-outline-color(
-    (
-      default: map.get($theme, unselected-track-outline-color),
-      disabled: map.get($theme, disabled-unselected-track-outline-color),
-      focus: map.get($theme, unselected-focus-track-outline-color),
-      hover: map.get($theme, unselected-hover-track-outline-color),
-      pressed: map.get($theme, unselected-pressed-track-outline-color),
-    )
-  );
-}
-
-@mixin _track-unselected-color($colors) {
-  background-color: map.get($colors, default);
-
-  #{$_unselected}:hover & {
-    background-color: map.get($colors, hover);
-  }
-
-  #{$_unselected}:focus-visible & {
-    background-color: map.get($colors, focus);
-  }
-
-  #{$_unselected}:active & {
-    background-color: map.get($colors, pressed);
-  }
-
-  #{$_unselected}:disabled & {
-    background-color: map.get($colors, disabled);
-  }
-}
-
-@mixin _track-outline-color($colors) {
-  border-color: map.get($colors, default);
-
-  #{$_unselected}:hover & {
-    border-color: map.get($colors, hover);
-  }
-
-  #{$_unselected}:focus-visible & {
-    border-color: map.get($colors, focus);
-  }
-
-  #{$_unselected}:active & {
-    border-color: map.get($colors, pressed);
-  }
-
-  #{$_unselected}:disabled & {
-    border-color: map.get($colors, disabled);
-  }
-}