@material/web 0.1.0-alpha.0

package/checkbox/lib/_checkbox-theme.scss

@@ -0,0 +1,532 @@
+//
+// 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/ripple/ripple-theme';
+@use '@material/web/sass/color';
+@use '@material/web/sass/theme';
+@use '@material/web/tokens';
+
+$custom-property-prefix: 'checkbox';
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme(tokens.md-comp-checkbox-values(), $theme);
+  @include theme.emit-theme-vars(
+    theme.create-theme-vars($theme, $custom-property-prefix)
+  );
+}
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme(tokens.md-comp-checkbox-values(), $theme);
+  $theme: _flatten-disable-colors($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);
+
+  @include _theme-styles-internal($theme);
+}
+
+$_theme-extension-keys: (
+  touch-target-size: null,
+);
+
+@mixin theme-extension($theme) {
+  $theme: theme.validate-theme($_theme-extension-keys, $theme);
+
+  .md3-checkbox {
+    @include _touch-target(map.get($theme, touch-target-size));
+  }
+}
+
+@mixin high-contrast-styles() {
+  $high-contrast-theme: (
+    selected-container-color: CanvasText,
+    selected-hover-container-color: CanvasText,
+    selected-focus-container-color: CanvasText,
+    selected-pressed-container-color: CanvasText,
+    selected-disabled-container-color: GrayText,
+    selected-icon-color: Canvas,
+    selected-hover-icon-color: Canvas,
+    selected-focus-icon-color: Canvas,
+    selected-pressed-icon-color: Canvas,
+    selected-disabled-icon-color: Canvas,
+    unselected-outline-color: CanvasText,
+    unselected-hover-outline-color: CanvasText,
+    unselected-focus-outline-color: CanvasText,
+    unselected-pressed-outline-color: CanvasText,
+    unselected-disabled-outline-color: GrayText,
+  );
+  $high-contrast-theme: theme.validate-theme(
+    tokens.md-comp-checkbox-values(),
+    $high-contrast-theme
+  );
+
+  @media (forced-colors: active) {
+    @include _theme-styles-internal($high-contrast-theme);
+  }
+}
+
+@mixin _theme-styles-internal($theme) {
+  .md3-checkbox {
+    @include _icon-size(map.get($theme, icon-size));
+    @include _container-height(map.get($theme, container-height));
+    @include _container-width(map.get($theme, container-width));
+    @include _container-shape(map.get($theme, container-shape));
+    @include _unselected-outline-color(
+      (
+        default: map.get($theme, unselected-outline-color),
+        hover: map.get($theme, unselected-hover-outline-color),
+        focus: map.get($theme, unselected-focus-outline-color),
+        pressed: map.get($theme, unselected-pressed-outline-color),
+        disabled: map.get($theme, unselected-disabled-outline-color),
+      )
+    );
+    @include _selected-container-color(
+      (
+        default: map.get($theme, selected-container-color),
+        hover: map.get($theme, selected-hover-container-color),
+        focus: map.get($theme, selected-focus-container-color),
+        pressed: map.get($theme, selected-pressed-container-color),
+        disabled: map.get($theme, selected-disabled-container-color),
+      )
+    );
+    @include _animation-styles(
+      map.get($theme, unselected-outline-color),
+      map.get($theme, selected-container-color)
+    );
+    @include _selected-outline-width(
+      (
+        default: map.get($theme, selected-outline-width),
+        hover: map.get($theme, selected-hover-outline-width),
+        focus: map.get($theme, selected-focus-outline-width),
+        pressed: map.get($theme, selected-pressed-outline-width),
+        disabled: map.get($theme, selected-disabled-container-outline-width),
+      )
+    );
+    @include _unselected-outline-width(
+      (
+        default: map.get($theme, unselected-outline-width),
+        hover: map.get($theme, unselected-hover-outline-width),
+        focus: map.get($theme, unselected-focus-outline-width),
+        pressed: map.get($theme, unselected-pressed-outline-width),
+        disabled: map.get($theme, unselected-disabled-outline-width),
+      )
+    );
+    @include _selected-icon-color(
+      (
+        default: map.get($theme, selected-icon-color),
+        hover: map.get($theme, selected-hover-icon-color),
+        focus: map.get($theme, selected-focus-icon-color),
+        pressed: map.get($theme, selected-pressed-icon-color),
+        disabled: map.get($theme, selected-disabled-icon-color),
+      )
+    );
+    @include _state-layer-size(map.get($theme, state-layer-size));
+    @include _touch-target(map.get($theme, state-layer-size));
+  }
+
+  .md3-checkbox--touch {
+    @include _touch-target(map.get($theme, _touch-target-size));
+  }
+
+  @include ripple-theme.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 _if-selected() {
+    .md3-checkbox__ripple {
+      @include ripple-theme.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),
+        )
+      );
+    }
+  }
+}
+
+@function _flatten-disable-colors($theme) {
+  @return color.join-color-and-opacity-pairs(
+    $theme,
+    (
+      (
+        color-key: disabled-selected-icon-color,
+        opacity-key: disabled-selected-icon-opacity
+      ),
+      (
+        color-key: disabled-unselected-icon-color,
+        opacity-key: disabled-unselected-icon-opacity
+      ),
+      (
+        color-key: selected-disabled-container-color,
+        opacity-key: selected-disabled-container-opacity
+      ),
+      (
+        color-key: unselected-disabled-outline-color,
+        opacity-key: unselected-disabled-container-opacity
+      )
+    )
+  );
+}
+
+@mixin _container-shape($shape) {
+  .md3-checkbox__background {
+    border-radius: $shape;
+  }
+}
+
+@mixin _icon-size($size) {
+  @include _container-height($size);
+  @include _container-width($size);
+}
+
+@mixin _selected-icon-color($color) {
+  // NOTE: Target checkmark when checkbox is selected and unselected so that the
+  // checkmark will have the same color during checked to uncheck animation.
+  .md3-checkbox__native-control ~ {
+    @include _checkmark-color(map.get($color, default));
+  }
+
+  .md3-checkbox__native-control:hover ~ {
+    @include _checkmark-color(map.get($color, hover));
+  }
+
+  .md3-checkbox__native-control:focus ~ {
+    @include _checkmark-color(map.get($color, focus));
+  }
+
+  .md3-checkbox__native-control:active ~ {
+    @include _checkmark-color(map.get($color, pressed));
+  }
+
+  .md3-checkbox__native-control:disabled ~ {
+    @include _checkmark-color(map.get($color, disabled));
+  }
+}
+
+@mixin _unselected-outline-width($width) {
+  @include _if-unselected {
+    @include _set-unselected-outline-width(map.get($width, default));
+  }
+
+  @include _if-unselected-hover {
+    @include _set-unselected-outline-width(map.get($width, hover));
+  }
+
+  @include _if-unselected-focus {
+    @include _set-unselected-outline-width(map.get($width, focus));
+  }
+
+  @include _if-unselected-pressed {
+    @include _set-unselected-outline-width(map.get($width, pressed));
+  }
+
+  @include _if-unselected-disabled {
+    @include _set-unselected-outline-width(map.get($width, disabled));
+  }
+}
+
+@mixin _set-unselected-outline-width($width) {
+  .md3-checkbox__background {
+    border-width: $width;
+  }
+}
+
+@mixin _selected-outline-width($width) {
+  @include _if-selected {
+    @include _set-selected-outline-width(map.get($width, default));
+  }
+
+  @include _if-selected-hover {
+    @include _set-selected-outline-width(map.get($width, hover));
+  }
+
+  @include _if-selected-focus {
+    @include _set-selected-outline-width(map.get($width, focus));
+  }
+
+  @include _if-selected-pressed {
+    @include _set-selected-outline-width(map.get($width, pressed));
+  }
+
+  @include _if-selected-disabled {
+    @include _set-selected-outline-width(map.get($width, disabled));
+  }
+}
+
+@mixin _set-selected-outline-width($width) {
+  .md3-checkbox__background {
+    border-width: $width;
+  }
+}
+
+@mixin _unselected-outline-color($color) {
+  @include _if-unselected {
+    @include _outline-color(map.get($color, default));
+  }
+
+  @include _if-unselected-hover {
+    @include _outline-color(map.get($color, hover));
+  }
+
+  @include _if-unselected-focus {
+    @include _outline-color(map.get($color, focus));
+  }
+
+  @include _if-unselected-pressed {
+    @include _outline-color(map.get($color, pressed));
+  }
+
+  @include _if-unselected-disabled {
+    @include _outline-color(map.get($color, disabled));
+  }
+}
+
+@mixin _selected-container-color($color) {
+  @include _if-selected {
+    @include _container-color(map.get($color, default));
+    @include _outline-color(map.get($color, default));
+  }
+
+  @include _if-selected-hover {
+    @include _container-color(map.get($color, hover));
+    @include _outline-color(map.get($color, hover));
+  }
+
+  @include _if-selected-focus {
+    @include _container-color(map.get($color, focus));
+    @include _outline-color(map.get($color, focus));
+  }
+
+  @include _if-selected-pressed {
+    @include _container-color(map.get($color, pressed));
+    @include _outline-color(map.get($color, pressed));
+  }
+
+  @include _if-selected-disabled {
+    @include _container-color(map.get($color, disabled));
+    @include _outline-color(map.get($color, disabled));
+  }
+}
+
+@mixin _container-height($height) {
+  .md3-checkbox__background {
+    height: $height;
+  }
+}
+
+@mixin _container-width($width) {
+  .md3-checkbox__background {
+    width: $width;
+  }
+}
+
+@mixin _state-layer-size($size) {
+  .md3-checkbox__ripple {
+    height: $size;
+    width: $size;
+  }
+}
+
+@mixin _touch-target($size) {
+  height: $size;
+  width: $size;
+
+  .md3-checkbox__native-control {
+    width: $size;
+    height: $size;
+  }
+}
+
+@mixin _animation-styles($unselected-outline-color, $selected-container-color) {
+  @if ($unselected-outline-color or $selected-container-color) {
+    @if (
+      $unselected-outline-color == null or $selected-container-color == null
+    ) {
+      @error 'Both unselected outline and selected container should be provided.';
+    }
+
+    @include _container-keyframes(
+      $from-outline-color: $unselected-outline-color,
+      $to-outline-color: $selected-container-color,
+      $from-container-color: transparent,
+      $to-container-color: $selected-container-color
+    );
+
+    .md3-checkbox--anim {
+      &-unchecked-checked,
+      &-unchecked-indeterminate {
+        .md3-checkbox__native-control:enabled ~ .md3-checkbox__background {
+          animation-name: md3-checkbox-fade-in-background;
+        }
+      }
+
+      &-checked-unchecked,
+      &-indeterminate-unchecked {
+        .md3-checkbox__native-control:enabled ~ .md3-checkbox__background {
+          animation-name: md3-checkbox-fade-out-background;
+        }
+      }
+    }
+  }
+}
+
+$_unselected-selector: ".md3-checkbox__native-control:not(:checked):not(:indeterminate):not([data-indeterminate='true'])";
+$_unselected-enabled-selector: '#{$_unselected-selector}:enabled';
+
+@mixin _if-unselected {
+  #{$_unselected-enabled-selector} ~ {
+    @content;
+  }
+}
+
+@mixin _if-unselected-hover {
+  #{$_unselected-enabled-selector}:hover ~ {
+    @content;
+  }
+}
+
+@mixin _if-unselected-focus {
+  #{$_unselected-enabled-selector}:focus ~ {
+    @content;
+  }
+}
+
+@mixin _if-unselected-pressed {
+  #{$_unselected-enabled-selector}:active ~ {
+    @content;
+  }
+}
+
+@mixin _if-unselected-disabled {
+  #{$_unselected-selector}:disabled ~ {
+    @content;
+  }
+}
+
+$_selected-selector: ".md3-checkbox__native-control:checked, .md3-checkbox__native-control:indeterminate, .md3-checkbox__native-control[data-indeterminate='true']";
+
+@mixin _if-selected {
+  #{$_selected-selector} {
+    &:enabled ~ {
+      @content;
+    }
+  }
+}
+
+@mixin _if-selected-hover {
+  #{$_selected-selector} {
+    &:enabled:hover ~ {
+      @content;
+    }
+  }
+}
+
+@mixin _if-selected-focus {
+  #{$_selected-selector} {
+    &:enabled:focus ~ {
+      @content;
+    }
+  }
+}
+
+@mixin _if-selected-pressed {
+  #{$_selected-selector} {
+    &:enabled:active ~ {
+      @content;
+    }
+  }
+}
+
+@mixin _if-selected-disabled {
+  #{$_selected-selector} {
+    &:disabled ~ {
+      @content;
+    }
+  }
+}
+
+@mixin _outline-color($color) {
+  .md3-checkbox__background {
+    border-color: $color;
+  }
+}
+
+@mixin _container-color($color) {
+  .md3-checkbox__background {
+    background-color: $color;
+  }
+}
+
+@mixin _checkmark-color($color) {
+  .md3-checkbox__background {
+    .md3-checkbox__checkmark {
+      color: $color;
+    }
+
+    .md3-checkbox__mixedmark {
+      color: $color;
+    }
+  }
+}
+
+@mixin _container-keyframes(
+  $from-outline-color,
+  $to-outline-color,
+  $from-container-color,
+  $to-container-color
+) {
+  @keyframes md3-checkbox-fade-in-background {
+    0% {
+      border-color: $from-outline-color;
+      background-color: $from-outline-color;
+    }
+
+    50% {
+      border-color: $to-outline-color;
+      background-color: $to-container-color;
+    }
+  }
+
+  @keyframes md3-checkbox-fade-out-background {
+    0%,
+    80% {
+      border-color: $to-outline-color;
+      background-color: $to-outline-color;
+    }
+
+    100% {
+      border-color: $from-outline-color;
+      background-color: $from-container-color;
+    }
+  }
+}