@material/web 1.0.0-pre.3 → 1.0.0-pre.5

package/chips/chip/lib/_chip.scss

@@ -1,444 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// Selector '.md3-*' should only be used in this project.
-// stylelint-disable selector-class-pattern --
-// Internal styling for Chip MDC component.
-
-// go/keep-sorted start
-@use '../../../focus/focus-ring';
-@use '../../../motion/animation';
-// TODO(b/240224981): Uncomment when styles are translated to md3 ripple
-// @use '../../../ripple/ripple-theme';
-@use '../../../sass/dom';
-@use './chip-theme';
-// go/keep-sorted end
-
-@mixin core-styles() {
-  @include without-ripple-styles();
-  @include ripple-styles();
-}
-
-@mixin without-ripple-styles() {
-  @include static-styles();
-  @include _theme-styles();
-}
-
-@mixin ripple-styles() {
-  @include chip-theme.ripple-color(chip-theme.$ripple-color);
-  @include chip-theme.delete-action-ripple-color(chip-theme.$ripple-color);
-  @include chip-theme.delete-action-ripple-size(chip-theme.$delete-action-size);
-
-  .md3-chip__action {
-    // TODO(b/240224981): Translate to md3 ripple
-    // @include ripple.surface(
-    //   $ripple-target: chip-theme.$ripple-target,
-    //   $include-will-change: false
-    // );
-
-    // @include ripple.radius-bounded(
-    //   $ripple-target: chip-theme.$ripple-target
-    // );
-  }
-
-  #{chip-theme.$ripple-target} {
-    position: absolute;
-    // Ripple needs content-box as the box sizing and box-sizing: border-box
-    // is often set as a default, so we override that here.
-    box-sizing: content-box;
-    overflow: hidden;
-    pointer-events: none;
-  }
-
-  #{chip-theme.$ripple-target-primary} {
-    height: 100%;
-    width: 100%;
-    top: 0;
-    // TODO(b/240224981): Translate to md3 rtl / logical properties
-    // @include rtl.ignore-next-line();
-    left: 0;
-  }
-
-  #{chip-theme.$ripple-target-delete} {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-@mixin static-styles() {
-  .md3-chip,
-  .md3-chip__cell,
-  .md3-chip__action {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .md3-chip {
-    position: relative;
-    max-width: 100%;
-  }
-
-  .md3-chip__cell,
-  .md3-chip__action {
-    height: 100%;
-  }
-
-  .md3-chip__cell--primary {
-    overflow-x: hidden;
-  }
-
-  .md3-chip__cell--delete {
-    flex: 1 0 auto;
-  }
-
-  .md3-chip__action {
-    align-items: center;
-    background: none;
-    border: none;
-    box-sizing: content-box;
-    cursor: pointer;
-    display: inline-flex;
-    justify-content: center;
-    outline: none;
-    padding: 0;
-    text-decoration: none;
-    color: inherit;
-  }
-
-  .md3-chip__action--presentational {
-    cursor: auto;
-  }
-
-  .md3-chip--disabled,
-  .md3-chip__action:disabled {
-    pointer-events: none;
-  }
-
-  .md3-chip__action--primary {
-    overflow-x: hidden;
-  }
-
-  .md3-chip__action--delete {
-    position: relative;
-    overflow: visible;
-  }
-
-  .md3-chip__action--primary:before {
-    box-sizing: border-box;
-    content: '';
-    height: 100%;
-    left: 0;
-    position: absolute;
-    pointer-events: none;
-    top: 0;
-    width: 100%;
-    z-index: 1; // Position above touch target
-  }
-
-  .md3-chip--touch {
-    $margin: math.div(48px - chip-theme.$height, 2);
-    margin-top: $margin;
-    margin-bottom: $margin;
-  }
-
-  .md3-chip__action-touch {
-    position: absolute;
-    top: 50%;
-    height: 48px;
-    left: 0;
-    right: 0;
-    transform: translateY(-50%);
-  }
-
-  .md3-chip__text-label {
-    white-space: nowrap;
-    user-select: none;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .md3-chip__graphic {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    overflow: hidden;
-    pointer-events: none;
-    position: relative;
-    flex: 1 0 auto;
-  }
-
-  .md3-chip__checkmark {
-    position: absolute;
-    opacity: 0;
-    top: 50%;
-    // TODO(b/240224981): Translate to logical properties
-    // @include rtl.ignore-next-line();
-    left: 50%;
-  }
-
-  .md3-chip--selectable:not(.md3-chip--selected) {
-    &:not(.md3-chip--with-primary-icon) .md3-chip__graphic {
-      width: 0;
-    }
-  }
-
-  .md3-chip__checkmark-background {
-    opacity: 0;
-  }
-
-  .md3-chip__checkmark-svg {
-    display: block;
-  }
-
-  .md3-chip__checkmark-path {
-    stroke-width: 2px;
-    stroke-dasharray: 29.7833385;
-    stroke-dashoffset: 29.7833385;
-    stroke: currentColor;
-  }
-
-  .md3-chip--selecting {
-    .md3-chip__graphic {
-      transition: animation.standard(width, 150ms);
-    }
-
-    .md3-chip__checkmark {
-      transition: animation.standard(transform, 150ms);
-      transform: translate(-75%, -50%);
-    }
-
-    .md3-chip__checkmark-path {
-      transition: animation.standard(stroke-dashoffset, 150ms, $delay: 45ms);
-    }
-  }
-
-  .md3-chip--deselecting {
-    .md3-chip__graphic {
-      transition: animation.standard(width, 100ms);
-    }
-
-    .md3-chip__checkmark {
-      // TODO(b/240224981): Translate to md3 animation
-      // transition: animation.linear(opacity, 50ms),
-      //   animation.standard(transform, 100ms);
-      transform: translate(-75%, -50%);
-    }
-
-    .md3-chip__checkmark-path {
-      // Ensure the checkmark path stays visible
-      stroke-dashoffset: 0;
-    }
-  }
-
-  .md3-chip--selecting-with-primary-icon {
-    .md3-chip__icon--primary {
-      transition: animation.standard(opacity, 75ms);
-    }
-
-    .md3-chip__checkmark-path {
-      transition: animation.standard(stroke-dashoffset, 150ms, $delay: 75ms);
-    }
-  }
-
-  .md3-chip--deselecting-with-primary-icon {
-    .md3-chip__icon--primary {
-      transition: animation.standard(opacity, 150ms, $delay: 75ms);
-    }
-
-    .md3-chip__checkmark {
-      transition: animation.standard(opacity, 75ms);
-      // Ensure the checkmark stays statically positioned
-      transform: translate(-50%, -50%);
-    }
-
-    .md3-chip__checkmark-path {
-      // Ensure the checkmark path stays visible
-      stroke-dashoffset: 0;
-    }
-  }
-
-  .md3-chip--selected {
-    .md3-chip__icon--primary {
-      opacity: 0;
-    }
-
-    .md3-chip__checkmark {
-      transform: translate(-50%, -50%);
-      opacity: 1;
-    }
-
-    .md3-chip__checkmark-path {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @keyframes md3-chip-enter {
-    from {
-      transform: scale(0.8);
-      opacity: 0.4;
-    }
-    to {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  .md3-chip--enter {
-    animation: animation.deceleration(md3-chip-enter, 100ms);
-  }
-
-  @keyframes md3-chip-exit {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  .md3-chip--exit {
-    animation: animation.acceleration(md3-chip-exit, 75ms);
-  }
-
-  .md3-chip--hidden {
-    opacity: 0;
-    pointer-events: none;
-    transition: animation.acceleration(width, 150ms);
-  }
-}
-
-@mixin _high-contrast-mode() {
-  @include dom.forced-colors-mode {
-    @include chip-theme.outline-color(
-      (
-        default: CanvasText,
-        disabled: GrayText,
-      )
-    );
-    @include chip-theme.selected-outline-color(
-      (
-        default: CanvasText,
-        disabled: GrayText,
-      )
-    );
-    @include chip-theme.text-label-color(
-      (
-        disabled: GrayText,
-      )
-    );
-    @include chip-theme.icon-color(
-      (
-        disabled: GrayText,
-      )
-    );
-    @include chip-theme.checkmark-color(
-      (
-        disabled: GrayText,
-      )
-    );
-    @include chip-theme.delete-action-color(
-      (
-        disabled: GrayText,
-      )
-    );
-  }
-
-  ///
-  /// Renders a transparent border on focus in Windows high-contrast mode.
-  ///
-
-  .md3-chip__focus-ring {
-    display: none;
-  }
-
-  .md3-chip__action--primary:not(.md3-chip__action--presentational) {
-    // TODO(b/240224981): Convert to md3 ripple
-    // @include ripple.focus() {
-    //   .md3-chip__focus-ring {
-    //     z-index: 1;
-    //     display: block;
-    //     @include focus-ring.focus-ring($query: $query);
-    //   }
-    // }
-  }
-
-  .md3-chip__action--delete:not(.md3-chip__action--presentational) {
-    // TODO(b/240224981): Convert to md3 ripple
-    // @include ripple.focus() {
-    .md3-chip__focus-ring {
-      z-index: 1;
-      display: block;
-      @include focus-ring.theme(
-        (
-          container-outer-padding-vertical: 2px,
-          container-outer-padding-horizontal: -2px,
-        )
-      );
-    }
-    // }
-  }
-}
-
-@mixin _theme-styles() {
-  .md3-chip {
-    @include chip-theme.height(chip-theme.$height);
-    @include chip-theme.shape-radius(chip-theme.$radius);
-    @include chip-theme.horizontal-padding(
-      chip-theme.$leading-padding,
-      chip-theme.$trailing-padding
-    );
-    @include chip-theme.with-graphic-horizontal-padding(
-      chip-theme.$graphic-leading-padding,
-      chip-theme.$graphic-trailing-padding,
-      chip-theme.$trailing-padding
-    );
-    @include chip-theme.with-delete-action-horizontal-padding(
-      chip-theme.$leading-padding,
-      chip-theme.$delete-action-leading-padding,
-      chip-theme.$delete-action-trailing-padding
-    );
-    @include chip-theme.with-graphic-and-delete-action-horizontal-padding(
-      chip-theme.$graphic-leading-padding,
-      chip-theme.$graphic-trailing-padding,
-      chip-theme.$delete-action-leading-padding,
-      chip-theme.$delete-action-trailing-padding
-    );
-    @include chip-theme.container-color(chip-theme.$container-color);
-    @include chip-theme.text-label-color(chip-theme.$text-label-color);
-    @include chip-theme.icon-color(chip-theme.$icon-color);
-    @include chip-theme.checkmark-color(chip-theme.$checkmark-color);
-    @include chip-theme.delete-action-color(chip-theme.$delete-action-color);
-    @include chip-theme.text-label-type-scale(chip-theme.$type-scale);
-    @include chip-theme.graphic-size(chip-theme.$leading-icon-size);
-    @include chip-theme.icon-size(chip-theme.$leading-icon-size);
-    @include chip-theme.checkmark-size(chip-theme.$checkmark-size);
-    @include chip-theme.delete-action-size(chip-theme.$delete-action-size);
-
-    @include _high-contrast-mode();
-  }
-
-  .md3-chip--filter {
-    @include chip-theme.selected-container-color(
-      chip-theme.$filter-selected-container-color
-    );
-  }
-
-  .md3-chip--with-avatar {
-    @include chip-theme.with-graphic-horizontal-padding(
-      chip-theme.$avatar-leading-padding,
-      chip-theme.$avatar-trailing-padding,
-      chip-theme.$trailing-padding
-    );
-    @include chip-theme.with-graphic-and-delete-action-horizontal-padding(
-      chip-theme.$avatar-leading-padding,
-      chip-theme.$avatar-trailing-padding,
-      chip-theme.$delete-action-leading-padding,
-      chip-theme.$delete-action-trailing-padding
-    );
-    @include chip-theme.graphic-size(chip-theme.$avatar-size);
-    @include chip-theme.icon-size(chip-theme.$avatar-size);
-  }
-}

package/chips/chip/lib/_filter-chip-theme.scss

@@ -1,130 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../../sass/resolvers';
-@use '../../../sass/theme';
-@use './chip-theme';
-// go/keep-sorted end
-
-$_light-theme: (
-  container-shape: null,
-  container-height: null,
-  elevated-container-shadow-color: null,
-  flat-container-elevation: null,
-  flat-unselected-outline-color: null,
-  flat-unselected-outline-width: null,
-  flat-selected-container-color: null,
-  flat-selected-outline-color: null,
-  flat-selected-outline-width: null,
-  elevated-container-elevation: null,
-  elevated-unselected-container-color: null,
-  elevated-selected-container-color: null,
-  label-text-font: null,
-  label-text-line-height: null,
-  label-text-size: null,
-  label-text-weight: null,
-  label-text-tracking: null,
-  unselected-label-text-color: null,
-  selected-label-text-color: null,
-  with-icon-icon-size: null,
-  with-icon-unselected-icon-color: null,
-  with-icon-selected-icon-color: null,
-  disabled-label-text-color: null,
-  disabled-label-text-opacity: null,
-  flat-disabled-unselected-outline-color: null,
-  flat-disabled-unselected-outline-opacity: null,
-  flat-disabled-selected-outline-color: null,
-  flat-disabled-selected-outline-opacity: null,
-  with-icon-disabled-icon-color: null,
-  with-icon-disabled-icon-opacity: null,
-  elevated-disabled-container-elevation: null,
-  elevated-disabled-container-color: null,
-  elevated-disabled-container-opacity: null,
-  unselected-hover-state-layer-color: null,
-  unselected-hover-state-layer-opacity: null,
-  unselected-hover-label-text-color: null,
-  selected-hover-state-layer-color: null,
-  selected-hover-state-layer-opacity: null,
-  selected-hover-label-text-color: null,
-  with-icon-unselected-hover-icon-color: null,
-  with-icon-selected-hover-icon-color: null,
-  elevated-hover-container-elevation: null,
-  flat-selected-hover-container-elevation: null,
-  flat-unselected-hover-container-elevation: null,
-  unselected-focus-state-layer-color: null,
-  unselected-focus-state-layer-opacity: null,
-  unselected-focus-label-text-color: null,
-  selected-focus-state-layer-color: null,
-  selected-focus-state-layer-opacity: null,
-  selected-focus-label-text-color: null,
-  flat-unselected-focus-outline-color: null,
-  with-icon-unselected-focus-icon-color: null,
-  with-icon-selected-focus-icon-color: null,
-  elevated-focus-container-elevation: null,
-  elevated-pressed-container-elevation: null,
-  flat-selected-focus-container-elevation: null,
-  flat-unselected-focus-container-elevation: null,
-  unselected-pressed-state-layer-color: null,
-  unselected-pressed-state-layer-opacity: null,
-  unselected-pressed-label-text-color: null,
-  selected-pressed-state-layer-color: null,
-  selected-pressed-state-layer-opacity: null,
-  selected-pressed-label-text-color: null,
-  with-icon-unselected-pressed-icon-color: null,
-  with-icon-selected-pressed-icon-color: null,
-  elevated-selected-container-elevation: null,
-  flat-selected-pressed-container-elevation: null,
-  flat-unselected-pressed-container-elevation: null,
-  container-surface-tint-layer-color: null,
-);
-
-$_custom-property-prefix: 'filter-chip';
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($_light-theme, $theme);
-
-  // Resolve elevation.
-  @each $key
-    in (
-      flat-container-elevation,
-      elevated-container-elevation,
-      elevated-disabled-container-elevation,
-      elevated-hover-container-elevation,
-      elevated-focus-container-elevation,
-      flat-selected-focus-container-elevation,
-      flat-unselected-focus-container-elevation,
-      elevated-selected-container-elevation,
-      flat-selected-pressed-container-elevation,
-      flat-unselected-pressed-container-elevation
-    )
-  {
-    $value: map.get($theme, $key);
-    @if $value {
-      $theme: map.set(
-        $theme,
-        $key,
-        meta.call(
-          $elevation-resolver: map.get($resolvers, elevation),
-          $elevation: $value,
-          $shadow-color: map.get($theme, elevated-container-shadow-color),
-        )
-      );
-    }
-  }
-
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($_light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-  @include chip-theme.theme-styles($theme, $resolvers: $resolvers);
-}

package/chips/chip/lib/_input-chip-theme.scss

@@ -1,91 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../../elevation/lib/elevation';
-@use '../../../sass/resolvers';
-@use '../../../sass/theme';
-@use './chip-theme';
-// go/keep-sorted end
-
-$_light-theme: (
-  container-shape: null,
-  container-height: null,
-  container-elevation: null,
-  outline-color: null,
-  outline-width: null,
-  container-shadow-color: null,
-  label-text-font: null,
-  label-text-line-height: null,
-  label-text-size: null,
-  label-text-weight: null,
-  label-text-tracking: null,
-  label-text-color: null,
-  with-delete-icon-delete-icon-size: null,
-  with-delete-icon-delete-icon-color: null,
-  with-leading-icon-leading-icon-size: null,
-  with-leading-icon-leading-icon-color: null,
-  with-avatar-avatar-size: null,
-  with-avatar-avatar-shape: null,
-  disabled-outline-color: null,
-  disabled-outline-opacity: null,
-  disabled-label-text-color: null,
-  disabled-label-text-opacity: null,
-  with-delete-icon-disabled-delete-icon-color: null,
-  with-delete-icon-disabled-delete-icon-opacity: null,
-  with-leading-icon-disabled-leading-icon-color: null,
-  with-leading-icon-disabled-leading-icon-opacity: null,
-  with-avatar-disabled-avatar-opacity: null,
-  hover-state-layer-color: null,
-  hover-state-layer-opacity: null,
-  hover-label-text-color: null,
-  with-delete-icon-hover-delete-icon-color: null,
-  with-leading-icon-hover-leading-icon-color: null,
-  focus-state-layer-color: null,
-  focus-state-layer-opacity: null,
-  focus-label-text-color: null,
-  focus-outline-color: null,
-  with-delete-icon-focus-delete-icon-color: null,
-  with-leading-icon-focus-leading-icon-color: null,
-  pressed-state-layer-color: null,
-  pressed-state-layer-opacity: null,
-  pressed-label-text-color: null,
-  with-delete-icon-pressed-delete-icon-color: null,
-  with-leading-icon-pressed-leading-icon-color: null,
-  container-surface-tint-layer-color: null,
-);
-
-$_custom-property-prefix: 'input-chip';
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($_light-theme, $theme);
-  $theme: _resolve-tokens($theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  @include theme.validate-theme($_light-theme, $theme);
-  $theme: _resolve-tokens($theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-  @include chip-theme.theme-styles($theme, $resolvers: $resolvers);
-}
-
-@function _resolve-tokens($tokens) {
-  $tokens: elevation.resolve-tokens(
-    $tokens,
-    'flat-container-elevation',
-    'elevated-container-elevation',
-    'elevated-disabled-container-elevation',
-    'elevated-hover-container-elevation',
-    'elevated-focus-container-elevation',
-    'elevated-pressed-container-elevation'
-  );
-  @return $tokens;
-}