fix: fix some invalid color-styles

Mat2095 · Mat2095 · commit 4ffdef97cf85 · 2025-07-24T18:50:13.000+02:00
They were using rgba() in an incorrect way or used undefined variables. Closes #636 Also fixes wrong import-path in _datepicker.scss
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,15 +96,15 @@
       }
 
       &: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 {
         background-color: var(--md-sys-color-primary-container);
       }
 
       &.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
@@ -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
@@ -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 {

Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,7 @@`
`78`	`78`
`79`	`79`	`/* Focused styles */`
`80`	`80`	`[type="radio"].tabbed:focus + span:before {`
`81`		`- box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);`
	`81`	`+ box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`/* Disabled Radio With gap */`
Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ input[type=range] + .thumb {`
`53`	`53`	`border-radius: 50% 50% 50% 0;`
`54`	`54`
`55`	`55`	`.value {`
`56`		`- color: var(--md-sys-color-on-primary);`
	`56`	`+ color: var(--md-sys-color-on-primary);`
`57`	`57`	`margin-left: -1px;`
`58`	`58`	`margin-top: 8px;`
`59`	`59`	`font-size: 10px;`
`@@ -97,7 +97,7 @@ input[type=range]::-webkit-slider-thumb {`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {`
`100`		`- box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);`
	`100`	`+ box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);`
`101`	`101`	`}`
`102`	`102`
`103`	`103`	`// FireFox`
`@@ -125,7 +125,7 @@ input[type=range]:-moz-focusring {`
`125`	`125`	`}`
`126`	`126`
`127`	`127`	`.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {`
`128`		`- box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);`
	`128`	`+ box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);`
`129`	`129`	`}`
`130`	`130`
`131`	`131`	`//------------------------------- Remove this?`
`@@ -154,5 +154,5 @@ input[type=range]::-ms-thumb {`
`154`	`154`	`//--------------------------------`
`155`	`155`
`156`	`156`	`.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {`
`157`		`- box-shadow: 0 0 0 10px rgba(var(--md-sys-color-primary-numeric), 0.18);`
	`157`	`+ box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);`
`158`	`158`	`}`
Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,7 @@`
`82`	`82`
`83`	`83`	`// NOT CHECKED [DOT]`
`84`	`84`	`&:after {`
`85`		`- @extend .outline;`
	`85`	`+ @extend .outline;`
`86`	`86`	`height: var(--size-off);`
`87`	`87`	`width: var(--size-off);`
`88`	`88`
`@@ -98,13 +98,13 @@ input[type=checkbox]:not(:disabled) ~ .lever:hover::before {`
`98`	`98`	`}`
`99`	`99`
`100`	`100`	`input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {`
`101`		`- background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);`
	`101`	`+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);`
`102`	`102`	`}`
`103`	`103`
`104`	`104`	`// Switch active style`
`105`	`105`	`input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,`
`106`	`106`	`input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {`
`107`		`- background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);`
	`107`	`+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);`
`108`	`108`	`}`
`109`	`109`
`110`	`110`	`input[type=checkbox]:not(:disabled) ~ .lever:hover::before {`
Original file line number	Diff line number	Diff line change
`@@ -36,11 +36,11 @@`
`36`	`36`	`.tab a:hover,`
`37`	`37`	`.tab a.active,`
`38`	`38`	`.tab a:focus {`
`39`		`- color: var(--md-sys-color-on-primary);`
	`39`	`+ color: var(--md-sys-color-on-primary);`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.indicator {`
`43`		`- background-color: var(--md-sys-color-on-primary);`
	`43`	`+ background-color: var(--md-sys-color-on-primary);`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`
`@@ -96,15 +96,15 @@`
`96`	`96`	`}`
`97`	`97`
`98`	`98`	`&:hover {`
`99`		`- background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);`
	`99`	`+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);`
`100`	`100`	`}`
`101`	`101`
`102`	`102`	`&:focus {`
`103`	`103`	`background-color: var(--md-sys-color-primary-container);`
`104`	`104`	`}`
`105`	`105`
`106`	`106`	`&.active {`
`107`		`- background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);`
	`107`	`+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);`
`108`	`108`	`}`
`109`	`109`
`110`	`110`	`&:focus,`
Original file line number	Diff line number	Diff line change
`@@ -67,9 +67,9 @@ textarea.materialize-textarea {`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`&:disabled, &[readonly="readonly"] {`
`70`		`- color: rgba(var(--md_sys_color_on-surface), 0.38);`
`71`		`- border-color: rgba(var(--md_sys_color_on-surface), 0.12);`
`72`		`- background-color: rgba(var(--md_sys_color_on-surface), 0.04);`
	`70`	`+ color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
	`71`	`+ border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);`
	`72`	`+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 4%);`
`73`	`73`	`}`
`74`	`74`
`75`	`75`	`// Label`
`@@ -86,7 +86,7 @@ textarea.materialize-textarea {`
`86`	`86`	`}`
`87`	`87`
`88`	`88`	`&:disabled + label, &[readonly="readonly"] + label {`
`89`		`- color: rgba(var(--md_sys_color_on-surface), 0.38);`
	`89`	`+ color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`90`	`90`	`}`
`91`	`91`
`92`	`92`	`// Hide helper text on data message`
`@@ -208,8 +208,8 @@ textarea.materialize-textarea {`
`208`	`208`	`}`
`209`	`209`
`210`	`210`	`&:disabled, &[readonly="readonly"] {`
`211`		`- color: rgba(var(--md_sys_color_on-surface), 0.38);`
`212`		`- border-color: rgba(var(--md_sys_color_on-surface), 0.12);`
	`211`	`+ color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
	`212`	`+ border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);`
`213`	`213`	`}`
`214`	`214`	`}`
`215`	`215`	`}`
`@@ -323,7 +323,10 @@ textarea {`
`323`	`323`	`/* Autocomplete Items */`
`324`	`324`	`.autocomplete-content {`
`325`	`325`	`li {`
`326`		`- .highlight { color: var(--md-sys-color-on-background); }`
	`326`	`+ .highlight {`
	`327`	`+ color: var(--md-sys-color-on-background);`
	`328`	`+ }`
	`329`	`+`
`327`	`330`	`img {`
`328`	`331`	`height: $dropdown-item-height - 10;`
`329`	`332`	`width: $dropdown-item-height - 10;`
Original file line number	Diff line number	Diff line change
`@@ -166,7 +166,7 @@ input[type=text].timepicker-input-minutes {`
`166`	`166`
`167`	`167`	`.timepicker-tick.active,`
`168`	`168`	`.timepicker-tick:hover {`
`169`		`- background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);`
	`169`	`+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);`
`170`	`170`	`}`
`171`	`171`
`172`	`172`	`.timepicker-dial {`