diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
index 372a58475d8..447a92a75fd 100644
--- a/packages/calcite-components/src/components/switch/switch.scss
+++ b/packages/calcite-components/src/components/switch/switch.scss
@@ -3,24 +3,15 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ * @prop --calcite-switch-corner-radius: Specifies the corner radius of the component.
  * @prop --calcite-switch-handle-background-color: Specifies the background color of the component handle.
  * @prop --calcite-switch-handle-border-color: Specifies the border color of the component handle.
+ * @prop --calcite-switch-handle-shadow: Specifies the shadow of the component handle.
  * @prop --calcite-switch-track-background-color: Specifies the background color of the component track.
  * @prop --calcite-switch-track-border-color: Specifies the border color of the component track.
- * @prop --calcite-switch-corner-radius: Specifies the corner radius of the component.
- * @prop --calcite-switch-shadow: Specifies the shadow of the component.
  */
 
-@import "~@esri/calcite-design-tokens/dist/scss/core";
-
 :host {
-  --calcite-switch-handle-background-color: var(--calcite-color-foreground-1);
-  --calcite-switch-handle-border-color: var(--calcite-color-border-input);
-  --calcite-switch-track-background-color: var(--calcite-color-foreground-2);
-  --calcite-switch-track-border-color: var(--calcite-color-border-2);
-  --calcite-switch-corner-radius: var(--calcite-internal-switch-border-radius, --calcite-corner-radius-pill);
-  --calcite-switch-shadow: none;
-
   --calcite-internal-switch-border-radius: 9999px; // TODO: drop once --calcite-corner-radius is updated
 
   @apply relative
@@ -29,7 +20,6 @@
   cursor-pointer
   select-none
   align-middle;
-  tap-highlight-color: transparent;
 }
 
 .container {
@@ -47,9 +37,12 @@
     pointer-events-none
     relative;
 
-  border-color: var(--calcite-switch-track-border-color);
-  background-color: var(--calcite-switch-track-background-color);
-  border-radius: var(--calcite-switch-corner-radius);
+  border-color: var(--calcite-switch-track-border-color, var(--calcite-color-border-2));
+  background-color: var(--calcite-switch-track-background-color, var(--calcite-color-foreground-2));
+  border-radius: var(
+    --calcite-switch-corner-radius,
+    var(--calcite-internal-switch-border-radius, var(--calcite-corner-radius-pill))
+  );
   block-size: var(--calcite-internal-switch-track-height);
   inline-size: var(--calcite-internal-switch-track-width);
 }
@@ -66,15 +59,17 @@
   inset-block-start: -1px;
   inset-inline: -1px theme("inset.auto");
 
-  border-color: var(--calcite-switch-handle-border-color);
-  background-color: var(--calcite-switch-handle-background-color);
-  border-radius: var(--calcite-switch-corner-radius);
-  box-shadow: inset 0 0 0 1px var(--calcite-switch-shadow);
+  border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-border-input));
+  background-color: var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));
+  border-radius: var(
+    --calcite-switch-corner-radius,
+    var(--calcite-internal-switch-border-radius, var(--calcite-corner-radius-pill))
+  );
+  box-shadow: var(--calcite-switch-handle-shadow, none);
   block-size: var(--calcite-internal-switch-handle-height);
   inline-size: var(--calcite-internal-switch-handle-width);
 }
 
-// sizes
 :host([scale="s"]) {
   --calcite-internal-switch-handle-height: var(--calcite-size-sm);
   --calcite-internal-switch-handle-width: var(--calcite-size-sm);
@@ -93,7 +88,7 @@
   --calcite-internal-switch-handle-height: var(--calcite-size-xl);
   --calcite-internal-switch-handle-width: var(--calcite-size-xl);
   --calcite-internal-switch-track-height: var(--calcite-size-xxl);
-  --calcite-internal-switch-track-width: #{$calcite-size-48}; // TODO: need new size token for this size
+  --calcite-internal-switch-track-width: #{$calcite-size-48};
 }
 
 :host(:focus) .track {
@@ -102,28 +97,34 @@
 
 :host(:hover),
 :host(:focus) {
-  --calcite-switch-handle-border-color: var(--calcite-color-brand);
-  --calcite-switch-shadow: var(--calcite-color-brand);
+  .handle {
+    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
+    box-shadow: var(--calcite-switch-handle-shadow, inset 0 0 0 1px var(--calcite-color-brand));
+  }
 }
 
 :host([checked]) {
-  --calcite-switch-handle-border-color: var(--calcite-color-brand);
-  --calcite-switch-track-background-color: var(--calcite-color-brand);
-  --calcite-switch-track-border-color: var(--calcite-color-brand-hover);
+  .track {
+    background-color: var(--calcite-switch-track-background-color, var(--calcite-color-brand));
+    border-color: var(--calcite-switch-track-border-color, var(--calcite-color-brand));
+  }
 
   .handle {
+    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
     inset-inline: theme("inset.auto") -1px;
   }
 }
 
 :host([checked]:hover) {
-  --calcite-switch-handle-border-color: var(--calcite-color-brand-hover);
-  --calcite-switch-shadow: var(--calcite-color-brand-hover);
+  .handle {
+    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand-hover));
+    box-shadow: var(--calcite-switch-handle-shadow, inset 0 0 0 1px var(--calcite-color-brand-hover));
+  }
 }
 
 @media (forced-colors: active) {
   :host([checked]) {
-    --calcite-switch-track-background-color: canvasText;
+    background-color: canvasText;
   }
 }