diff --git a/packages/calcite-components/src/components/checkbox/checkbox.scss b/packages/calcite-components/src/components/checkbox/checkbox.scss
index a96fabbcaa7..2ee668f6eb6 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.scss
+++ b/packages/calcite-components/src/components/checkbox/checkbox.scss
@@ -3,9 +3,18 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-checkbox-size: Specifies the component's height and width.
+ * @prop --calcite-checkbox-size: defines the checkbox's size vertically and horizontally.
+ * @prop --calcite-checkbox-background-color: defines the background color of the checkbox.
+ * @prop --calcite-checkbox-shadow: defines the box shadow of the checkbox.
+ * @prop --calcite-checkbox-icon-color: defines the icon color of the checkbox.
  */
 
+:host {
+  --calcite-checkbox-background-color: var(--calcite-color-foreground-1);
+  --calcite-checkbox-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
+  --calcite-checkbox-icon-color: var(--calcite-color-background);
+}
+
 :host([scale="s"]) {
   --calcite-checkbox-size: theme("spacing.3");
 }
@@ -30,8 +39,7 @@
   }
 
   .check-svg {
-    @apply bg-foreground-1
-      pointer-events-none
+    @apply pointer-events-none
       box-border
       block
       overflow-hidden
@@ -39,15 +47,15 @@
       stroke-current
       stroke-1
       transition-default;
-    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
-    color: theme("backgroundColor.background");
+    background-color: var(--calcite-checkbox-background-color);
+    box-shadow: var(--calcite-checkbox-shadow);
+    color: var(--calcite-checkbox-icon-color);
   }
 }
 
 :host([status="invalid"]:not([checked])) {
-  .check-svg {
-    box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);
-  }
+  --calcite-checkbox-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);
+
   .toggle:focus {
     @apply focus-outset-danger;
   }
@@ -55,16 +63,12 @@
 
 :host([checked]),
 :host([indeterminate]) {
-  .check-svg {
-    @apply bg-brand;
-    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
-  }
+  --calcite-checkbox-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+  --calcite-checkbox-background-color: var(--calcite-color-brand);
 }
 :host([hovered]) .toggle,
 :host .toggle:hover {
-  .check-svg {
-    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
-  }
+  --calcite-checkbox-shadow: inset 0 0 0 2px var(--calcite-color-brand);
 }
 
 .toggle {
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx
index 2049fffbb5e..12dcff6735b 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.tsx
+++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx
@@ -59,8 +59,7 @@ export class Checkbox
    *
    * When not set, the component will be associated with its ancestor form element, if any.
    */
-  @Prop({ reflect: true })
-  form: string;
+  @Prop({ reflect: true }) form: string;
 
   /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */
   @Prop({ reflect: true, mutable: true }) guid: string;