lightning-base-components 1.21.1-alpha → 1.21.3-alpha

package/src/lightning/primitiveInputCheckbox/input-checkbox.slds.css

@@ -1,219 +1,216 @@
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-:host([data-render-mode="shadow"]) {
-  /**
-   * Host mapping to composed sds-icon
-   *
-   * Static fallbacks in place for accessibility
-   */
-  --sds-c-icon-color-background: var(
-    --sds-c-inputcheckbox-color-background,
-    var(--sds-s-input-color-background, var(--sds-g-color-neutral-base-1))
-  );
-  --sds-c-icon-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground, transparent);
-  --sds-c-icon-color-border: var(
-    --sds-c-inputcheckbox-color-border,
-    var(--sds-s-input-color-border, var(--sds-g-color-neutral-base-contrast-4))
-  );
-  --sds-c-icon-sizing: var(--sds-c-inputcheckbox-sizing, 1rem);
-  --sds-c-icon-spacing: var(--sds-c-inputcheckbox-spacing);
-  --sds-c-icon-radius-border: var(--sds-c-inputcheckbox-radius-border, var(--sds-s-input-radius-border));
+/*******************************************
+* Imported dependency from @salesforce-ux/sds-primitives/src/sds/inputCheckbox/inputCheckbox.css
+*******************************************/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
-
-:host([data-render-mode="shadow"]:hover) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground-hover);
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-hover,
-    var(--sds-s-input-color-background-hover)
-  );
-  --sds-c-inputcheckbox-color-border: var(
-    --sds-c-inputcheckbox-color-border-hover,
-    var(--sds-s-input-color-border-hover)
-  );
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-hover);
-}
-
-:host([data-render-mode="shadow"][checked]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(
-    --sds-c-inputcheckbox-mark-color-foreground-checked,
-    var(--sds-g-color-neutral-base-1)
-  );
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-checked,
-    var(--sds-g-color-neutral-base-contrast-4)
-  );
-  --sds-c-inputcheckbox-color-border: var(
-    --sds-c-inputcheckbox-color-border-checked,
-    var(--sds-g-color-neutral-base-contrast-4)
-  );
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-checked);
+/**
+ * Parent container of input-checkbox
+ */
+:host([data-render-mode="shadow"]) [part~='input-checkbox'] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sds-c-inputcheckbox-spacing-gap, var(--sds-s-input-spacing-gap));
 }
-
-:host([data-render-mode="shadow"][checked]:hover) {
-  --sds-c-inputcheckbox-mark-color-foreground-checked: var(
-    --sds-c-inputcheckbox-mark-color-foreground-checked-hover
-  );
-  --sds-c-inputcheckbox-color-background-checked: var(--sds-c-inputcheckbox-color-background-checked-hover);
-  --sds-c-inputcheckbox-color-border-checked: var(--sds-c-inputcheckbox-color-border-checked-hover);
-  --sds-c-inputcheckbox-label-color-checked: var(
-    --sds-c-inputcheckbox-label-color-checked-hover,
-    var(--sds-c-inputcheckbox-label-color-hover)
-  );
+/**
+ * The visual container of the checkbox indicator
+ */
+:host([data-render-mode="shadow"]) [part='checkbox'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: var(--sds-c-inputcheckbox-color-background, var(--sds-s-input-color-background));
+  box-shadow: var(--sds-c-inputcheckbox-shadow);
+  width: var(--sds-c-inputcheckbox-sizing, 1rem);
+  height: var(--sds-c-inputcheckbox-sizing, 1rem);
+  border: var(--sds-c-inputcheckbox-sizing-border, var(--sds-s-input-sizing-border, 1px)) solid
+    var(--sds-c-inputcheckbox-color-border, var(--sds-s-input-color-border, currentColor));
+  border-radius: var(--sds-c-inputcheckbox-radius-border);
 }
-
-:host([data-render-mode="shadow"][indeterminate]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(
-    --sds-c-inputcheckbox-mark-color-foreground-indeterminate,
-    #fff
+/**
+ * Focus state
+ */
+:host([data-render-mode="shadow"]) [part='checkbox']:has(:focus) {
+  --sds-c-inputcheckbox-shadow: var(
+    --sds-c-inputcheckbox-shadow-focus,
+    var(--sds-s-input-shadow-focus, revert)
   );
   --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-indeterminate,
-    var(--sds-s-input-color-background, #111)
+    --sds-c-inputcheckbox-color-background-focus,
+    var(--sds-s-input-color-background-focus, revert)
   );
   --sds-c-inputcheckbox-color-border: var(
-    --sds-c-inputcheckbox-color-border-indeterminate,
-    var(--sds-s-input-color-border, #111)
+    --sds-c-inputcheckbox-color-border-focus,
+    var(--sds-s-input-color-border-focus, revert)
   );
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-indeterminate);
 }
-
-:host([data-render-mode="shadow"][indeterminate]:hover) {
-  --sds-c-inputcheckbox-mark-color-foreground-indeterminate: var(
-    --sds-c-inputcheckbox-mark-color-foreground-indeterminate-hover
-  );
-  --sds-c-inputcheckbox-color-background-indeterminate: var(
-    --sds-c-inputcheckbox-color-background-indeterminate-hover
-  );
-  --sds-c-inputcheckbox-color-border-indeterminate: var(
-    --sds-c-inputcheckbox-color-border-indeterminate-hover
-  );
-  --sds-c-inputcheckbox-label-color-indeterminate: var(
-    --sds-c-inputcheckbox-label-color-indeterminate-hover,
-    var(--sds-c-inputcheckbox-label-color-hover)
-  );
+/**
+ * Checked state
+ */
+:host([data-render-mode="shadow"]) [part='checkbox']:has(:checked) {
+  --sds-c-inputcheckbox-shadow: var(--sds-c-inputcheckbox-shadow-checked, revert);
+  --sds-c-inputcheckbox-color-background: var(--sds-c-inputcheckbox-color-background-checked, revert);
+  --sds-c-inputcheckbox-color-border: var(--sds-c-inputcheckbox-color-border-checked, revert);
 }
-
-:host([data-render-mode="shadow"][focus-visible]) {
-  --sds-c-inputcheckbox-shadow: var(
-    --sds-c-inputcheckbox-shadow-focus,
-    var(--sds-s-input-shadow-focus, 0 0 4px 1px var(--sds-g-color-palette-blue-50, #0176d3))
-  );
+/**
+ * Indeterminate state
+ */
+:host([data-render-mode="shadow"]) [part='checkbox']:has(:indeterminate) {
+  --sds-c-inputcheckbox-shadow: var(--sds-c-inputcheckbox-shadow-indeterminate, revert);
+  --sds-c-inputcheckbox-color-background: var(--sds-c-inputcheckbox-color-background-indeterminate, revert);
+  --sds-c-inputcheckbox-color-border: var(--sds-c-inputcheckbox-color-border-indeterminate, revert);
 }
-
-:host([data-render-mode="shadow"][disabled]) {
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-disabled,
-    var(--sds-s-input-color-background-disabled, #efefef)
-  );
-
-  /* TODO: Add shared border hook when available: https://github.com/salesforce-ux/salesforce-design-system/issues/272 */
-  --sds-c-inputcheckbox-color-border: var(--sds-c-inputcheckbox-color-border-disabled, #666);
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-disabled);
+/**
+ * The checked mark
+ */
+:host([data-render-mode="shadow"]) [part='mark'] {
+  display: inline-flex;
+  opacity: 0;
+  color: var(--sds-c-inputcheckbox-mark-color-foreground, var(--sds-s-mark-color-foreground));
+  background-color: var(--sds-c-inputcheckbox-mark-color-background, var(--sds-s-mark-color-background));
+  width: var(--sds-c-inputcheckbox-mark-sizing, var(--sds-s-mark-sizing, 1em));
+  height: var(--sds-c-inputcheckbox-mark-sizing, var(--sds-s-mark-sizing, 1em));
 }
+/**
+ * When the label or checkbox is clicked, a checked state is applied to the host element
+ */
+:host([data-render-mode="shadow"]) [part='checkbox']:has(:checked) [part='mark'] {
+  opacity: 1;
 
-:host([data-render-mode="shadow"][error]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground-error);
-  --sds-c-inputcheckbox-color-background: var(--sds-c-inputcheckbox-color-background-error);
-  --sds-c-inputcheckbox-color-border: var(--sds-c-inputcheckbox-color-border-error);
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-error);
+  --sds-c-inputcheckbox-mark-color-background: var(
+    --sds-c-inputcheckbox-mark-color-background-checked,
+    var(--sds-s-mark-color-background-checked, revert)
+  );
 }
-
-:host([data-render-mode="shadow"][disabled][checked]) {
+/**
+ * Indicator, Indeterminate state
+ */
+:host([data-render-mode="shadow"]) [part='checkbox']:has(:indeterminate) [part='mark'] {
   --sds-c-inputcheckbox-mark-color-foreground: var(
-    --sds-c-inputcheckbox-mark-color-foreground-disabled,
-    #666
+    --sds-c-inputcheckbox-mark-color-foreground-indeterminate,
+    revert
   );
-}
-
-:host([data-render-mode="shadow"][error][focus-visible]) {
-  --sds-c-inputcheckbox-shadow: var(
-    --sds-c-inputcheckbox-shadow-error-focus,
-    0 0 4px 1px var(--sds-g-color-palette-blue-50, #0176d3)
+  --sds-c-inputcheckbox-mark-color-background: var(
+    --sds-c-inputcheckbox-mark-color-background-indeterminate,
+    revert
   );
 }
-
-:host([data-render-mode="shadow"]) [part~='input-checkbox'] {
-  display: inline-flex;
-  align-items: center;
+/**
+ * The label of the checkbox
+ */
+:host([data-render-mode="shadow"]) [part~='label'] {
+  color: var(--sds-c-inputcheckbox-label-color, var(--sds-s-label-color));
+  font-size: var(--sds-c-inputcheckbox-label-font-size, var(--sds-s-label-font-size));
 }
-
-:host([data-render-mode="shadow"]) [part~='indicator'] {
-  display: inline-flex;
-  align-items: center;
-  box-shadow: var(--sds-c-inputcheckbox-shadow, var(--sds-s-input-shadow));
+/**
+ * If told, the label will be hidden from view
+ */
+:host([data-render-mode="shadow"][label-hidden]) [part~='label'] {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
 }
-
 /**
- * Size and position the input on top of our icon for accessibility
+ * Help text
+ * ---
+ * "visible" gets added when the slotchange confirms there are children
+ * This prevents box-model customizations from being applied, in the case of no children
  */
-
-:host([data-render-mode="shadow"]) [part~='checkbox'] {
-  position: absolute;
-  height: calc(
-    var(--sds-c-inputcheckbox-sizing, 1rem) + (var(--sds-c-inputcheckbox-sizing-border, 1px) * 2) +
-      var(--sds-c-inputcheckbox-spacing, 0px)
+:host([data-render-mode="shadow"]) [part='help-text visible'] {
+  font-size: var(--sds-c-inputcheckbox-helptext-font-size, var(--sds-s-helptext-font-size));
+  color: var(--sds-c-inputcheckbox-helptext-text-color, var(--sds-s-helptext-color));
+  padding-inline-start: var(
+    --sds-c-inputcheckbox-helptext-spacing-inlinestart,
+    var(--sds-c-inputcheckbox-helptext-spacing-inline, var(--sds-s-helptext-spacing))
+  );
+  padding-inline-end: var(
+    --sds-c-inputcheckbox-helptext-spacing-inlineend,
+    var(--sds-c-inputcheckbox-helptext-spacing-inline, var(--sds-s-helptext-spacing))
   );
-  width: calc(
-    var(--sds-c-inputcheckbox-sizing, 1rem) + (var(--sds-c-inputcheckbox-sizing-border, 1px) * 2) +
-      var(--sds-c-inputcheckbox-spacing, 0px)
+  padding-block-start: var(
+    --sds-c-inputcheckbox-helptext-spacing-blockstart,
+    var(--sds-c-inputcheckbox-helptext-spacing-block, var(--sds-s-helptext-spacing))
+  );
+  padding-block-end: var(
+    --sds-c-inputcheckbox-helptext-spacing-blockend,
+    var(--sds-c-inputcheckbox-helptext-spacing-block, var(--sds-s-helptext-spacing))
   );
-  opacity: 0.00001;
 }
-
-:host([data-render-mode="shadow"]) [part~='label'] {
-  padding-inline-start: var(--sds-c-inputcheckbox-label-spacing-inline-start);
-  color: var(--sds-c-inputcheckbox-label-color);
+/**
+ * HTML checkbox element, hidden from view
+ * No part is exposed because it should not be altered by an outside factor
+ */
+:host([data-render-mode="shadow"]) input[type='checkbox'] {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  z-index: 1;
+  opacity: 0;
 }
-
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-@supports (--styling-hooks: '') {
-  /**
+/**
      * Base
      */
-  :host([data-render-mode="shadow"]) [part='input-checkbox'] {
-    /* Label */
-    --sds-c-inputcheckbox-label-spacing-inline-start: var(
-      --slds-c-inputcheckbox-label-spacing-inlinestart,
-      var(--sds-g-spacing-2, 0.5rem)
-    );
+:host([data-render-mode="shadow"]) [part='input-checkbox'] {
+    /**
+      * Remap to SLDS blueprint hooks for parity
+      * https://www.lightningdesignsystem.com/components/checkbox/#Styling-Hooks-Overview
+      */
+    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+    --_slds-c-inputcheckbox-shadow: var(--slds-c-checkbox-shadow);
+    --_slds-c-inputcheckbox-shadow-focus: var(--slds-c-checkbox-shadow-focus);
+    --_slds-c-inputcheckbox-color-background: var(--slds-c-checkbox-color-background);
+    --_slds-c-inputcheckbox-color-background-checked: var(--slds-c-checkbox-color-background-checked);
+    --_slds-c-inputcheckbox-color-border: var(--slds-c-checkbox-color-border);
+    --_slds-c-inputcheckbox-color-border-checked: var(--slds-c-checkbox-color-border-checked);
+    --_slds-c-inputcheckbox-color-border-focus: var(--slds-c-checkbox-color-border-focus);
+    --_slds-c-inputcheckbox-mark-color-foreground: var(--slds-c-checkbox-mark-color-foreground);
+    --_slds-c-inputcheckbox-radius-border: var(--slds-c-checkbox-radius-border);
+    /* stylelint-enable sds-stylelint-plugin/styling-hooks-pattern */
 
     /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
     display: flex;
   }
-
-  /**
+/**
      * Label Container
      */
-  :host([data-render-mode="shadow"]) [part='label-container'] {
-    display: inline-flex;
-    align-items: center;
+:host([data-render-mode="shadow"]) [part='label-container'] {
+    display: block;
 
     /* Accounts for help-text in same row as label */
-    padding-inline-end: var(--sds-g-spacing-1, 0.25rem);
+    padding-inline-end: var(--slds-g-spacing-1);
   }
-
-  /**
+/**
      * Label
      *
      * Add [part='input-checkbox'] to increase specificity and
      * avoid collisions with other components using [part='label'] (e.g. slds-input-text)
      */
-  :host([data-render-mode="shadow"]) [part='input-checkbox'] [part='label'] {
-    color: var(--slds-c-inputcheckbox-label-color, var(--sds-g-color-neutral-base-30, #444444));
-    font-size: var(--sds-g-font-scale-neg-2, 0.8125rem);
+:host([data-render-mode="shadow"]) [part='input-checkbox'] [part='label'] {
+    color: var(--_slds-c-inputcheckbox-label-color, var(--slds-g-color-on-surface-2));
+    font-size: var(--slds-g-font-scale-neg-2);
     margin-block-end: 0;
-    padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    padding-block-start: calc(var(--slds-g-spacing-1) / 2);
+    padding-inline-start: var(--slds-g-spacing-2);
   }
-
-  /**
+/**
      * Checkbox
      *
      * Hidden from view, see Indicator for visual faux checkbox.
      */
-  :host([data-render-mode="shadow"]) [part='checkbox'] {
+:host([data-render-mode="shadow"]) [part='checkbox'] {
     width: 1px;
     height: 1px;
     border: 0;
@@ -224,8 +221,7 @@
     position: absolute;
     pointer-events: auto;
   }
-
-  /**
+/**
      * Checkbox Indicator
      *
      * ┌────────────────────┐  ┌─────────────────────┐
@@ -239,117 +235,111 @@
      * sds-input-checkbox uses sds-icon for its visual checkbox indicator. SLDS
      * + LBC uses a styled <span>. Due to this divergence, we require custom CSS.
      */
-  :host([data-render-mode="shadow"]) [part='indicator'] {
+:host([data-render-mode="shadow"]) [part='indicator'] {
+    display: inline-block;
     position: relative;
-    width: var(--slds-c-inputcheckbox-sizing, 1rem);
-    height: var(--slds-c-inputcheckbox-sizing, 1rem);
-    border-radius: var(--slds-c-inputcheckbox-radius-border, var(--sds-g-radius-border-1, 0.125rem));
-    border: var(--slds-c-inputcheckbox-sizing-border, var(--sds-g-sizing-border-1, 1px)) solid
-      var(--slds-c-inputcheckbox-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
-    background-color: var(--slds-c-inputcheckbox-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
-    box-shadow: var(--slds-c-inputcheckbox-shadow);
+    width: 1rem;
+    height: 1rem;
+    border-radius: var(--_slds-c-inputcheckbox-radius-border, var(--slds-g-radius-border-1));
+    border: var(--_slds-c-inputcheckbox-sizing-border, var(--slds-g-sizing-border-1)) solid
+      var(--_slds-c-inputcheckbox-color-border, var(--slds-g-color-border-2));
+    background-color: var(--_slds-c-inputcheckbox-color-background, var(--slds-g-color-surface-container-1));
+    box-shadow: var(--_slds-c-inputcheckbox-shadow);
     transition: border 0.1s linear, background-color 0.1s linear;
+    vertical-align: middle;
   }
-
-  /**
+/**
      * Checked
      */
-  :host([data-render-mode="shadow"][checked]) [part='indicator']::after {
+:host([data-render-mode="shadow"][checked]) [part='indicator']::after {
     content: '';
-    height: calc(var(--slds-c-inputcheckbox-sizing, 1rem) / 4);
-    width: calc(var(--slds-c-inputcheckbox-sizing, 1rem) / 2);
+    height: calc(1rem / 4);
+    width: calc(1rem / 2);
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0) rotate(-45deg);
     border-bottom: 2px solid
-      var(--slds-c-inputcheckbox-mark-color-foreground, var(--sds-g-color-brand-base-50, #0176d3));
-    border-left: 2px solid var(--slds-c-inputcheckbox-mark-color-foreground, var(--sds-g-color-brand-base-50, #0176d3));
+      var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
+    border-left: 2px solid var(--_slds-c-inputcheckbox-mark-color-foreground, var(--slds-g-color-border-accent-2));
   }
-
-  :host([data-render-mode="shadow"][checked]) [part='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-checked);
-    --slds-c-inputcheckbox-color-border: var(--slds-c-inputcheckbox-color-border-checked);
+:host([data-render-mode="shadow"][checked]) [part='indicator'] {
+    --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-checked);
+    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-checked);
   }
-
-  /**
+/**
      * Disabled
      */
-  :host([data-render-mode="shadow"][disabled]) [part='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(
-      --slds-c-inputcheckbox-color-background-disabled,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
+:host([data-render-mode="shadow"][disabled]) [part='indicator'] {
+    --_slds-c-inputcheckbox-color-background: var(
+      --_slds-c-inputcheckbox-color-background-disabled,
+      var(--slds-g-color-surface-container-2)
     );
-    --slds-c-inputcheckbox-color-border: var(--slds-c-inputcheckbox-color-border-disabled);
-    --slds-c-inputcheckbox-mark-color-foreground: var(
-      --slds-c-inputcheckbox-mark-color-foreground-disabled,
-      var(--sds-g-color-neutral-base-60, #939393)
+    --_slds-c-inputcheckbox-color-border: var(--_slds-c-inputcheckbox-color-border-disabled);
+    --_slds-c-inputcheckbox-mark-color-foreground: var(
+      --_slds-c-inputcheckbox-mark-color-foreground-disabled,
+      var(--slds-g-color-on-disabled-1)
     );
   }
-
-  /**
+/**
      * Focused
      */
-  :host([data-render-mode="shadow"]:focus-within) [part='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-focus);
-    --slds-c-inputcheckbox-color-border: var(
-      --slds-c-inputcheckbox-color-border-focus,
-      var(--sds-g-color-brand-base-50, #0176d3)
+:host([data-render-mode="shadow"]:focus-within) [part='indicator'] {
+    --_slds-c-inputcheckbox-color-background: var(--_slds-c-inputcheckbox-color-background-focus);
+    --_slds-c-inputcheckbox-color-border: var(
+      --_slds-c-inputcheckbox-color-border-focus,
+      var(--slds-g-color-accent-2)
     );
-    --slds-c-inputcheckbox-shadow: var(
-      --slds-c-inputcheckbox-shadow-focus,
-      0 0 3px var(--sds-g-color-brand-base-50, #0176d3)
+    --_slds-c-inputcheckbox-shadow: var(
+      --_slds-c-inputcheckbox-shadow-focus,
+      0 0 3px var(--slds-g-color-accent-2)
     );
   }
-
-  /**
+/**
      * Invalid
      */
-  :host([data-render-mode="shadow"][invalid]) [part='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-invalid);
-    --slds-c-inputcheckbox-sizing-border: var(
-      --slds-c-inputcheckbox-sizing-border-invalid,
-      var(--sds-g-sizing-border-2, 2px)
+:host([data-render-mode="shadow"][invalid]) [part='indicator'] {
+    --_slds-c-inputcheckbox-sizing-border: var(
+      --_slds-c-inputcheckbox-sizing-border-invalid,
+      var(--slds-g-sizing-border-2)
     );
-    --slds-c-inputcheckbox-color-border: var(
-      --slds-c-inputcheckbox-color-border-invalid,
-      var(--sds-g-color-error-base-50, #ea001e)
+    --_slds-c-inputcheckbox-color-border: var(
+      --_slds-c-inputcheckbox-color-border-invalid,
+      var(--slds-g-color-border-error-1)
     );
-    --slds-c-inputcheckbox-mark-color-foreground: var(
-      --slds-c-inputcheckbox-mark-color-foreground-invalid,
-      var(--sds-g-color-error-base-50, #ea001e)
+    --_slds-c-inputcheckbox-mark-color-foreground: var(
+      --_slds-c-inputcheckbox-mark-color-foreground-invalid,
+      var(--slds-g-color-error-1)
     );
   }
-
-  :host([data-render-mode="shadow"][invalid]) [part='help-text'] {
-    color: var(--slds-c-inputcheckbox-helptext-color-invalid, var(--sds-g-color-error-base-50, #ea001e));
+:host([data-render-mode="shadow"][invalid]) [part='help-text'] {
+    color: var(--_slds-c-inputcheckbox-helptext-color-invalid, var(--slds-g-color-error-1));
   }
-
-  /**
+/**
      * Label Inline Variant
      *
      * @TODO: Remove magic number for MQ
      */
-  @media (width >= 48em) {
+@media (width >= 48em) {
     :host([data-render-mode="shadow"][variant='label-inline']) [part='label-container'] {
       float: left;
 
       /* TODO: Get rid of these magic numbers */
       max-width: calc(33% - 1.125rem);
-      padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-      padding-inline-start: var(--sds-g-spacing-1, 0.25rem);
+      padding-block-start: var(--slds-g-spacing-1);
+      padding-inline-start: var(--slds-g-spacing-1);
     }
 
     :host([data-render-mode="shadow"][variant='label-inline']) [part='input-checkbox'] {
       display: block;
       margin-inline-start: 33%;
-      padding-block: var(--sds-g-spacing-1, 0.25rem);
-      margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+      padding-block: var(--slds-g-spacing-1);
+      margin-block-end: var(--slds-g-spacing-2);
     }
 
     :host([data-render-mode="shadow"][variant='label-inline']) [part='inline-help'] {
       float: left;
-      padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+      padding-block-start: var(--slds-g-spacing-1);
     }
 
     :host([data-render-mode="shadow"][variant='label-inline']) [part='indicator'] {
@@ -357,13 +347,12 @@
       display: block;
     }
   }
-
-  /**
+/**
      * Standalone Checkbox
      *
      * label-inline & label-stacked uses the "standalone" checkbox that lives outside the label
      */
-  :host([data-render-mode="shadow"][variant='label-inline']) [part='checkbox'],:host([data-render-mode="shadow"][variant='label-stacked']) [part='checkbox'] {
+:host([data-render-mode="shadow"][variant='label-inline']) [part='checkbox'],:host([data-render-mode="shadow"][variant='label-stacked']) [part='checkbox'] {
     width: 1rem;
     height: 1rem;
     margin: 0;
@@ -371,8 +360,6 @@
     opacity: 0;
     z-index: 1;
   }
-}
-
 /**
    * A temporarily baked-in utility class until SLDS gets a proper utility package.
    *
@@ -380,7 +367,6 @@
    * outcome is the removal of this class and replacing the class with the SLDS
    * utility package solution.
    */
-
 :host([data-render-mode="shadow"]) .slds-assistive-text {
   position: absolute !important;
   margin: -1px !important;

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.css

@@ -1,3 +1 @@
-/* @import 'lightning/sldsCommon';
-@import './input-checkbox.slds.css';
-@import './form-element.slds.css'; */
+@import './primitiveInputCheckbox.lbc.native.css';

package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.js

@@ -1,11 +1,13 @@
 import { classSet } from 'lightning/utils';
 import { VARIANT } from 'lightning/inputUtils';
 import labelRequired from '@salesforce/label/LightningControl.required';
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+
 
 import { isNativeComponent, reflectAttribute } from 'lightning/utilsPrivate';
 
-export default class LightningPrimitiveInputCheckbox extends LightningElement {
+export default class LightningPrimitiveInputCheckbox extends LightningShadowBaseClass {
     @api required;
     @api readOnly;
     @api label;
@@ -17,7 +19,6 @@ export default class LightningPrimitiveInputCheckbox extends LightningElement {
     @api accessKey;
     @api name;
     @api disabled;
-    @api variant;
     @api ariaKeyShortcuts;
     @api ariaDisabled;
     @api ariaRoleDescription;
@@ -40,6 +41,15 @@ export default class LightningPrimitiveInputCheckbox extends LightningElement {
         reflectAttribute(this, 'invalid', !!message);
     }
 
+    @api
+    get variant() {
+        return this._variant;
+    }
+    set variant(variant) {
+        this._variant = variant;
+        reflectAttribute(this, 'variant', variant);
+    }
+
     @api
     get inputElement() {
         if (!this.cachedInputElement) {
@@ -122,6 +132,7 @@ export default class LightningPrimitiveInputCheckbox extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this._isNativeShadow = isNativeComponent(this);
     }