diff --git a/src/scss/components/choice-tile/_index.scss b/src/scss/components/choice-tile/_index.scss
index e9557b3bd..0b09a7a33 100644
--- a/src/scss/components/choice-tile/_index.scss
+++ b/src/scss/components/choice-tile/_index.scss
@@ -18,14 +18,14 @@ hx-tile {
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 0;
-    color: $gray-700;
+    color: var(--hxChoiceTile-header-color, $gray-700);
     line-height: 24px;
     text-align: center;
   }
 
   > p {
     font-size: 0.75rem;
-    color: $gray-700;
+    color: var(--hxChoiceTile-tile-paragraph-color, $gray-700);
   }
 
   &.hxSm {
@@ -113,13 +113,13 @@ label.hxChoice > input[invalid] + hx-tile.hxSubdued {
 // ========== DEFAULT ==========
 // NOTE: These styles may be able to go into default hx-tile defs
 label.hxChoice > input + hx-tile {
-  background-color: $gray-0;
-  border: solid 1px $gray-400;
-  color: $gray-900;
+  background-color: var(--hxChoiceTile-input-bgcolor, $gray-0);
+  border: solid 1px var(--hxChoiceTile-input-hxTile-bordercolor, $gray-400);
+  color: var(--hxChoiceTile-input-color, $gray-900);
   cursor: pointer;
 
   .hx-tile-icon {
-    color: $gray-400;
+    color: var(--hxChoiceTile-hxTile-color, $gray-400);
   }
 }
 
@@ -134,28 +134,28 @@ label.hxChoice > input:focus + hx-tile {
 
 // ========== CHECKED ==========
 label.hxChoice > input:checked + hx-tile {
-  border: 1px solid $purple-300;
-  color: $gray-0;
+  border: 1px solid var(--hxChoiceTile-inputChecked-bordercolor, $purple-300);
+  color: var(--hxChoiceTile-inputChecked-color, $gray-0);
 
   > hx-icon {
-    color: $purple-300;
+    color: var(--hxChoiceTile-inputChecked-hxicon-color, $purple-300);
   }
 
   .hx-tile-icon {
-    color: $purple-300;
+    color: var(--hxChoiceTile-checked-hxTile-color, $purple-300);
   }
 
   > header {
-    color: $purple-300;
+    color: var(--hxChoiceTile-checked-hxTile-header-color, $purple-300);
   }
 
   > p {
-    color: $gray-950;
+    color: var(--hxChoiceTile-checked-paragraph-color, $gray-950);
   }
 
   // DEPRECATED: remove in v1.0.0
   hx-tile-description {
-    color: $gray-900;
+    color: var(--hxChoiceTile-checked-description-color, $gray-900);
   }
 }
 
@@ -164,12 +164,12 @@ label.hxChoice > input[invalid] + hx-tile {
   @include hxChoiceTile--invalid;
 
   > p {
-    color: $gray-900;
+    color: var(--hxChoiceTile-invalid-paragraph-color, $gray-900);
   }
 
   // DEPRECATED: remove in v1.0.0
   hx-tile-description {
-    color: $gray-900;
+    color: var(--hxChoiceTile-invalid-description-color, $gray-900);
   }
 
   .hx-tile-icon {
@@ -199,20 +199,20 @@ label.hxChoice > input[disabled] + hx-tile:hover {
   @include hxChoiceTile--disabled;
 
   > p {
-    color: $gray-500;
+    color: var(--hxChoiceTile-disabled-paragraph-color, $gray-500);
   }
 
   // DEPRECATED: remove in v1.0.0
   hx-tile-description {
-    color: $gray-500;
+    color: var(--hxChoiceTile-disabled-description-color, $gray-500);
   }
 
   > header {
-    color: $gray-500;
+    color: var(--hxChoiceTile-disabled-header-color, $gray-500);
   }
 
   hx-icon {
-    color: $gray-400;
+    color: var(--hxChoiceTile-disabled-hxIcon-color, $gray-400);
   }
 }
 
diff --git a/src/scss/components/choice-tile/mixins/_hxChoiceTile.scss b/src/scss/components/choice-tile/mixins/_hxChoiceTile.scss
index f32c3f4b1..dc5aca104 100644
--- a/src/scss/components/choice-tile/mixins/_hxChoiceTile.scss
+++ b/src/scss/components/choice-tile/mixins/_hxChoiceTile.scss
@@ -6,21 +6,20 @@
 @mixin hxChoiceTile($pseudo-state: null) {
   @if $pseudo-state == focus {
     box-shadow: 0 0 4px rgba($purple-700, 0.5);
-  }
-  @else if $pseudo-state == hover {
-    background-color: $gray-0;
-    border: 1px solid $purple-700;
+  } @else if $pseudo-state == hover {
+    background-color: var(--hxChoiceTile-hover-bgcolor, $gray-0);
+    border: 1px solid var(--hxChoiceTile-hover-bordercolor, $purple-700);
 
     > header {
-      color: $purple-700;
+      color: var(--hxChoiceTile-hover-header-color, $purple-700);
     }
 
     > p {
-      color: $gray-950;
+      color: var(--hxChoiceTile-hover-paragraph-color, $gray-950);
     }
 
     .hx-tile-icon {
-      color: $purple-700;
+      color: var(--hxChoiceTile-hover-hxTileIcon-color, $purple-700);
     }
   }
 }
@@ -29,8 +28,7 @@
 @mixin hxChoiceTile--subdued($pseudo-state: null) {
   @if $pseudo-state == hover {
     opacity: 1;
-  }
-  @else {
+  } @else {
     opacity: 0.7;
   }
 }
@@ -39,33 +37,31 @@
 @mixin hxChoiceTile--invalid($pseudo-state: null) {
   @if $pseudo-state == focus {
     box-shadow: 0 0 4px rgba($red-status-500, 0.5);
-  }
-  @else if $pseudo-state == hover {
-    background-color: $red-status-100;
-    border-color: $red-status-500;
-    color: $gray-900;
+  } @else if $pseudo-state == hover {
+    background-color: var(--hxChoiceTile-invalid-hover-bgcolor, $red-status-100);
+    border-color: var(--hxChoiceTile-invalid-hover-borderColor, $red-status-500);
+    color: var(--hxChoiceTile-invalid-hover-color, $gray-900);
 
     > header {
       color: inherit;
     }
-  }
-  @else {
-    border-color: $red-status-500;
+  } @else {
+    border-color: var(--hxChoiceTile-invalid-bordercolor, $red-status-500);
     border-width: 2px;
-    color: $red-status-500;
+    color: var(--hxChoiceTile-invalid-color, $red-status-500);
   }
 
   .hx-tile-icon {
-    color: $red-status-500;
+    color: var(--hxChoiceTile-invalid-hxTileIcon-color, $red-status-500);
   }
 }
 
 // ========== Disabled ==========
 @mixin hxChoiceTile--disabled {
-  background-color: $gray-0;
-  border-color: $gray-400;
+  background-color: var(--hxChoiceTile-disabled-bgcolor, $gray-0);
+  border-color: var(--hxChoiceTile-disabled-bordercolor, $gray-400);
   border-width: 1px;
-  color: $gray-500;
+  color: var(--hxChoiceTile-disabled-color, $gray-500);
   cursor: not-allowed;
 
   > header {