fix(checkbox): reduce forced-colors size

PiperOrigin-RevId: 549788908
material-components · Jul 21, 2023 · b5712f3 · b5712f3
1 parent 64242ab
commit b5712f3
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 96 deletions.
diff --git a/checkbox/checkbox.ts b/checkbox/checkbox.ts
@@ -8,7 +8,6 @@ import {customElement} from 'lit/decorators.js';
 
 import {Checkbox} from './lib/checkbox.js';
 import {styles} from './lib/checkbox-styles.css.js';
-import {styles as forcedColorsStyles} from './lib/forced-colors-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -31,5 +30,5 @@ declare global {
  */
 @customElement('md-checkbox')
 export class MdCheckbox extends Checkbox {
-  static override styles = [styles, forcedColorsStyles];
+  static override styles = [styles];
 }
diff --git a/checkbox/lib/_checkbox.scss b/checkbox/lib/_checkbox.scss
@@ -154,8 +154,7 @@ $_checkmark-bottom-left: 7px, -14px;
     transform: scale(0.6); // Background and icon scale from 60% to 100%.
   }
 
-  .selected .background,
-  .selected .icon {
+  :where(.selected) :is(.background, .icon) {
     opacity: 1;
     // Enter duration for scale and opacity.
     transition-duration: 350ms, 50ms;
@@ -326,128 +325,147 @@ $_checkmark-bottom-left: 7px, -14px;
 
   // States
 
-  .error .outline {
+  :where(.error) .outline {
     border-color: var(--_unselected-error-outline-color);
     // TODO(b/262410085): add once token is added
     // border-width: var(--_unselected-error-outline-width);
   }
 
-  .error .background {
+  :where(.error) .background {
     background: var(--_selected-error-container-color);
   }
 
-  .error .icon {
+  :where(.error) .icon {
     fill: var(--_selected-error-icon-color);
   }
 
-  :host(:hover) .outline {
+  :where(:hover) .outline {
     border-color: var(--_unselected-hover-outline-color);
     border-width: var(--_unselected-hover-outline-width);
   }
 
-  :host(:hover) .background {
+  :where(:hover) .background {
     background: var(--_selected-hover-container-color);
   }
 
-  :host(:hover) .icon {
+  :where(:hover) .icon {
     fill: var(--_selected-hover-icon-color);
   }
 
-  :host(:hover) .error .outline {
+  :where(.error:hover) .outline {
     border-color: var(--_unselected-error-hover-outline-color);
   }
 
-  :host(:hover) .error .background {
+  :where(.error:hover) .background {
     background: var(--_selected-error-hover-container-color);
   }
 
-  :host(:hover) .error .icon {
+  :where(.error:hover) .icon {
     fill: var(--_selected-error-hover-icon-color);
   }
 
-  :host(:focus-within) .outline {
+  :where(:focus-within) .outline {
     border-color: var(--_unselected-focus-outline-color);
     border-width: var(--_unselected-focus-outline-width);
   }
 
-  :host(:focus-within) .background {
+  :where(:focus-within) .background {
     background: var(--_selected-focus-container-color);
   }
 
-  :host(:focus-within) .icon {
+  :where(:focus-within) .icon {
     fill: var(--_selected-focus-icon-color);
   }
 
-  :host(:focus-within) .error .outline {
+  :where(.error:focus-within) .outline {
     border-color: var(--_unselected-error-focus-outline-color);
   }
 
-  :host(:focus-within) .error .background {
+  :where(.error:focus-within) .background {
     background: var(--_selected-error-focus-container-color);
   }
 
-  :host(:focus-within) .error .icon {
+  :where(.error:focus-within) .icon {
     fill: var(--_selected-error-focus-icon-color);
   }
 
-  :host(:active) .outline {
+  :where(:active) .outline {
     border-color: var(--_unselected-pressed-outline-color);
     border-width: var(--_unselected-pressed-outline-width);
   }
 
-  :host(:active) .background {
+  :where(:active) .background {
     background: var(--_selected-pressed-container-color);
   }
 
-  :host(:active) .icon {
+  :where(:active) .icon {
     fill: var(--_selected-pressed-icon-color);
   }
 
-  :host(:active) .error .outline {
+  :where(.error:active) .outline {
     border-color: var(--_unselected-error-pressed-outline-color);
   }
 
-  :host(:active) .error .background {
+  :where(.error:active) .background {
     background: var(--_selected-error-pressed-container-color);
   }
 
-  :host(:active) .error .icon {
+  :where(.error:active) .icon {
     fill: var(--_selected-error-pressed-icon-color);
   }
 
   // Don't animate to/from disabled states because the outline is hidden when
   // selected. Without this, there'd be a FOUC if the checkbox state is
   // programmatically  changed while disabled.
-  :host([disabled]),
-  .prev-disabled {
-    .background,
-    .icon,
-    .mark {
-      animation-duration: 0s;
-      transition-duration: 0s;
-    }
+  :where(.disabled, .prev-disabled) :is(.background, .icon, .mark) {
+    animation-duration: 0s;
+    transition-duration: 0s;
   }
 
-  :host([disabled]) .outline {
+  :where(.disabled) .outline {
     border-color: var(--_unselected-disabled-outline-color);
     border-width: var(--_unselected-disabled-outline-width);
     opacity: var(--_unselected-disabled-container-opacity);
   }
 
-  :host([disabled]) .selected .outline {
+  :where(.selected.disabled) .outline {
     // Hide the outline behind the transparent selected container color.
     // This can be removed once disabled colors are flattened.
     visibility: hidden;
   }
 
-  :host([disabled]) .selected .background {
+  :where(.selected.disabled) .background {
     // Set disabled opacity only when selected since opacity is used to show
     // or hide the container background.
     background: var(--_selected-disabled-container-color);
     opacity: var(--_selected-disabled-container-opacity);
   }
 
-  :host([disabled]) .icon {
+  :where(.disabled) .icon {
     fill: var(--_selected-disabled-icon-color);
   }
+
+  @media (forced-colors: active) {
+    .background {
+      background-color: CanvasText;
+    }
+
+    .selected.disabled .background {
+      background-color: GrayText;
+      opacity: 1;
+    }
+
+    .outline {
+      border-color: CanvasText;
+    }
+
+    .disabled .outline {
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    .icon {
+      fill: Canvas;
+    }
+  }
 }
diff --git a/checkbox/lib/checkbox.ts b/checkbox/lib/checkbox.ts
@@ -126,6 +126,7 @@ export class Checkbox extends LitElement {
     const isIndeterminate = this.indeterminate;
 
     const containerClasses = classMap({
+      'disabled': this.disabled,
       'selected': isChecked || isIndeterminate,
       'unselected': !isChecked && !isIndeterminate,
       'checked': isChecked,
@@ -149,17 +150,18 @@ export class Checkbox extends LitElement {
           <rect class="mark short" />
           <rect class="mark long" />
         </svg>
+
+        <input type="checkbox"
+          id="input"
+          aria-checked=${isIndeterminate ? 'mixed' : nothing}
+          aria-label=${ariaLabel || nothing}
+          aria-invalid=${this.error || nothing}
+          ?disabled=${this.disabled}
+          .indeterminate=${this.indeterminate}
+          .checked=${this.checked}
+          @change=${this.handleChange}
+        >
       </div>
-      <input type="checkbox"
-        id="input"
-        aria-checked=${isIndeterminate ? 'mixed' : nothing}
-        aria-label=${ariaLabel || nothing}
-        aria-invalid=${this.error || nothing}
-        ?disabled=${this.disabled}
-        .indeterminate=${this.indeterminate}
-        .checked=${this.checked}
-        @change=${this.handleChange}
-      >
     `;
   }
 

diff --git a/checkbox/lib/forced-colors-styles.scss b/checkbox/lib/forced-colors-styles.scss