@material/web 0.1.0-alpha.0

package/chips/chip/lib/_chip.scss

@@ -0,0 +1,427 @@
+/**
+ * @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.
+
+@use '@material/web/compat/theme/theme-color';
+@use '@material/web/compat/touchtarget/touch-target';
+@use '@material/web/focus/lib/focus-ring-theme';
+@use '@material/web/motion/animation';
+// TODO(kainby): Uncomment when styles are translated to md3 ripple
+// @use '@material/web/ripple/ripple-theme';
+@use '@material/web/sass/dom';
+@use './chip-theme';
+
+@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.trailing-action-ripple-color(
+    chip-theme.$ripple-color
+  );
+  @include chip-theme.trailing-action-ripple-size(
+    chip-theme.$trailing-action-size
+  );
+
+  .md3-chip__action {
+    // TODO(kainby): 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(kainby): Translate to logical properties
+    // @include rtl.ignore-next-line();
+    left: 0;
+  }
+
+  #{chip-theme.$ripple-target-trailing} {
+    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%;
+    // TODO(kainby): Translate to md3 elevation
+    // @include elevation-theme.overlay-dimensions(100%, $query: $query);
+  }
+
+  .md3-chip__cell,
+  .md3-chip__action {
+    height: 100%;
+  }
+
+  .md3-chip__cell--primary {
+    overflow-x: hidden;
+  }
+
+  .md3-chip__cell--trailing {
+    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--trailing {
+    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 {
+    @include touch-target.margin(
+      $component-height: chip-theme.$height,
+    );
+  }
+
+  .md3-chip__action-touch {
+    @include touch-target.touch-target();
+  }
+
+  .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(kainby): 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(kainby): 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.trailing-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(kainby): Convert to md3 ripple
+    // @include ripple-theme.focus() {
+    //   .md3-chip__focus-ring {
+    //     z-index: 1;
+    //     display: block;
+    //     @include focus-ring.focus-ring($query: $query);
+    //   }
+    // }
+  }
+
+  .md3-chip__action--trailing:not(.md3-chip__action--presentational) {
+    // TODO(kainby): Convert to md3 ripple
+    // @include ripple-theme.focus() {
+      .md3-chip__focus-ring {
+        z-index: 1;
+        display: block;
+        @include focus-ring-theme.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-trailing-action-horizontal-padding(
+      chip-theme.$leading-padding,
+      chip-theme.$trailing-action-leading-padding,
+      chip-theme.$trailing-action-trailing-padding
+    );
+    @include chip-theme.with-graphic-and-trailing-action-horizontal-padding(
+      chip-theme.$graphic-leading-padding,
+      chip-theme.$graphic-trailing-padding,
+      chip-theme.$trailing-action-leading-padding,
+      chip-theme.$trailing-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.trailing-action-color(
+      chip-theme.$trailing-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.trailing-action-size(
+      chip-theme.$trailing-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-trailing-action-horizontal-padding(
+      chip-theme.$avatar-leading-padding,
+      chip-theme.$avatar-trailing-padding,
+      chip-theme.$trailing-action-leading-padding,
+      chip-theme.$trailing-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

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@use 'sass:map';
+@use '@material/web/compat/theme/keys';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/theme';
+@use './chip-theme';
+
+$_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),
+        )
+      );
+    }
+  }
+
+  @include keys.declare-custom-properties(
+    $theme,
+    $prefix: $_custom-property-prefix
+  );
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  @include theme.validate-theme($_light-theme, $theme);
+  $theme: keys.create-theme-properties(
+    $theme,
+    $prefix: $_custom-property-prefix
+  );
+  @include chip-theme.theme-styles($theme, $resolvers: $resolvers);
+}

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

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@use 'sass:map';
+@use '@material/web/compat/theme/keys';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/theme';
+@use './chip-theme';
+
+$_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-trailing-icon-trailing-icon-size: null,
+  with-trailing-icon-trailing-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-trailing-icon-disabled-trailing-icon-color: null,
+  with-trailing-icon-disabled-trailing-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-trailing-icon-hover-trailing-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-trailing-icon-focus-trailing-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-trailing-icon-pressed-trailing-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);
+
+  // Resolve elevation.
+  @each $key
+    in (
+      flat-container-elevation,
+      elevated-container-elevation,
+      elevated-disabled-container-elevation,
+      elevated-hover-container-elevation,
+      elevated-focus-container-elevation,
+      elevated-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),
+        )
+      );
+    }
+  }
+
+  @include keys.declare-custom-properties(
+    $theme,
+    $prefix: $_custom-property-prefix
+  );
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  @include theme.validate-theme($_light-theme, $theme);
+  $theme: keys.create-theme-properties(
+    $theme,
+    $prefix: $_custom-property-prefix
+  );
+  @include chip-theme.theme-styles($theme, $resolvers: $resolvers);
+}