diff --git a/components/datepicker/_datepicker.scss b/components/datepicker/_datepicker.scss
index ad3d9b6245..31eb678153 100644
--- a/components/datepicker/_datepicker.scss
+++ b/components/datepicker/_datepicker.scss
@@ -1,4 +1,4 @@
-@use './mixins.module.scss' as *;
+@use '../../sass/mixins.module.scss' as *;
 
 .datepicker-container {
   display: flex;
@@ -100,7 +100,7 @@
     display: block;
     font-size: 1.5rem;
     line-height: 25px;
-    color:  var(--md-sys-color-on-primary);
+    color: var(--md-sys-color-on-primary);
   }
 
   .date-text {
@@ -215,7 +215,7 @@
   z-index: 1;
 
   &:hover {
-    background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
   }
 
   &:focus {
@@ -262,7 +262,7 @@
 
 /* Display modes */
 .datepicker-modal {
-  max-width: calc(325px + var(--modal-padding)*2);
+  max-width: calc(325px + var(--modal-padding) * 2);
   max-height: none;
   background-color: var(--md-sys-color-inverse-on-surface);
 }
diff --git a/components/radio-button/_radio-buttons.scss b/components/radio-button/_radio-buttons.scss
index 84a44df662..cafdf9d87e 100644
--- a/components/radio-button/_radio-buttons.scss
+++ b/components/radio-button/_radio-buttons.scss
@@ -78,7 +78,7 @@
 
 /* Focused styles */
 [type="radio"].tabbed:focus + span:before {
-  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+  box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
 }
 
 /* Disabled Radio With gap */
diff --git a/components/sliders/_range.scss b/components/sliders/_range.scss
index 15fb18d814..23f7376fe8 100644
--- a/components/sliders/_range.scss
+++ b/components/sliders/_range.scss
@@ -53,7 +53,7 @@ input[type=range] + .thumb {
     border-radius: 50% 50% 50% 0;
 
     .value {
-      color:  var(--md-sys-color-on-primary);
+      color: var(--md-sys-color-on-primary);
       margin-left: -1px;
       margin-top: 8px;
       font-size: 10px;
@@ -97,7 +97,7 @@ input[type=range]::-webkit-slider-thumb {
 }
 
 .keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
-  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+  box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
 }
 
 // FireFox
@@ -125,7 +125,7 @@ input[type=range]:-moz-focusring {
 }
 
 .keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
-  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+  box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
 }
 
 //------------------------------- Remove this?
@@ -154,5 +154,5 @@ input[type=range]::-ms-thumb {
 //--------------------------------
 
 .keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
-  box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);
+  box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
 }
diff --git a/components/switch/_switches.scss b/components/switch/_switches.scss
index b5226b2fa1..137bf9c8cf 100644
--- a/components/switch/_switches.scss
+++ b/components/switch/_switches.scss
@@ -82,7 +82,7 @@
 
   // NOT CHECKED [DOT]
   &:after {
-    @extend .outline; 
+    @extend .outline;
     height: var(--size-off);
     width: var(--size-off);
 
@@ -98,13 +98,13 @@ input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
 }
 
 input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {
-  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
 }
 
 // Switch active style
 input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
 input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
-  background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
 }
 
 input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
diff --git a/components/tabs/_tabs.scss b/components/tabs/_tabs.scss
index 7241a84989..036b44dcc8 100644
--- a/components/tabs/_tabs.scss
+++ b/components/tabs/_tabs.scss
@@ -36,11 +36,11 @@
     .tab a:hover,
     .tab a.active,
     .tab a:focus {
-      color:  var(--md-sys-color-on-primary);
+      color: var(--md-sys-color-on-primary);
     }
 
     .indicator {
-      background-color:  var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-on-primary);
     }
   }
 
@@ -96,7 +96,7 @@
       }
 
       &:hover {
-        background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+        background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
       }
 
       &:focus {
@@ -104,7 +104,7 @@
       }
 
       &.active {
-        background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
+        background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
       }
 
       &:focus,
diff --git a/components/text-fields/_input-fields.scss b/components/text-fields/_input-fields.scss
index 2b6c02fad0..5c32582b43 100644
--- a/components/text-fields/_input-fields.scss
+++ b/components/text-fields/_input-fields.scss
@@ -67,9 +67,9 @@ textarea.materialize-textarea {
     }
 
     &:disabled, &[readonly="readonly"] {
-      color: rgba(var(--md_sys_color_on-surface), 0.38);
-      border-color: rgba(var(--md_sys_color_on-surface), 0.12);
-      background-color: rgba(var(--md_sys_color_on-surface), 0.04);
+      color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+      border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
+      background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 4%);
     }
 
     // Label
@@ -86,7 +86,7 @@ textarea.materialize-textarea {
     }
 
     &:disabled + label, &[readonly="readonly"] + label {
-      color: rgba(var(--md_sys_color_on-surface), 0.38);
+      color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
     }
 
     // Hide helper text on data message
@@ -208,8 +208,8 @@ textarea.materialize-textarea {
       }
 
       &:disabled, &[readonly="readonly"] {
-        color: rgba(var(--md_sys_color_on-surface), 0.38);
-        border-color: rgba(var(--md_sys_color_on-surface), 0.12);
+        color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+        border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
       }
     }
   }
@@ -323,7 +323,10 @@ textarea {
 /* Autocomplete Items */
 .autocomplete-content {
   li {
-    .highlight { color: var(--md-sys-color-on-background); }
+    .highlight {
+      color: var(--md-sys-color-on-background);
+    }
+
     img {
       height: $dropdown-item-height - 10;
       width: $dropdown-item-height - 10;
diff --git a/components/timepicker/_timepicker.scss b/components/timepicker/_timepicker.scss
index b4cf26eafd..bd6232edff 100644
--- a/components/timepicker/_timepicker.scss
+++ b/components/timepicker/_timepicker.scss
@@ -166,7 +166,7 @@ input[type=text].timepicker-input-minutes {
 
 .timepicker-tick.active,
 .timepicker-tick:hover {
-  background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
 }
 
 .timepicker-dial {