Merge branch 'v2-dev' of https://github.com/materializecss/materialize into refactor-components

wuda-io · wuda-io · commit 5649d902b286 · 2025-05-04T19:41:09.000+02:00
diff --git a/components/checkbox/_checkboxes.scss b/components/checkbox/_checkboxes.scss
@@ -44,8 +44,11 @@
   }
 
   &:not(:checked):disabled + span:not(.lever):before {
-    border: none;
-    background-color: var(--md-sys-color-on-surface);
+    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  }
+
+  &:disabled + span:not(.lever) {
+    color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
   }
 
   // Focused styles
@@ -74,8 +77,8 @@
   }
 
   &:disabled + span:before {
-    border-right: 2px solid var(--md-sys-color-on-surface);
-    border-bottom: 2px solid var(--md-sys-color-on-surface);
+    border-right: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+    border-bottom: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
   }
 }
 
@@ -97,7 +100,7 @@
 
   // Disabled indeterminate
   &:disabled + span:not(.lever):before {
-    border-right: 2px solid var(--md-sys-color-on-surface);
+    border-right: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
     background-color: transparent;
   }
 }
@@ -184,16 +187,15 @@
   }
 
   &:disabled:not(:checked) + span:not(.lever):after {
-    border-color: transparent;
-    background-color: var(--md-sys-color-on-surface);
+    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
   }
 
   &:disabled:checked + span:not(.lever):before {
     background-color: transparent;
   }
 
   &:disabled:checked + span:not(.lever):after {
-    background-color: var(--md-sys-color-on-surface);
-    border-color: var(--md-sys-color-on-surface);
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+    border: none;
   }
 }
diff --git a/components/radio-button/_radio-buttons.scss b/components/radio-button/_radio-buttons.scss
@@ -83,30 +83,30 @@
 
 /* Disabled Radio With gap */
 [type="radio"].with-gap:disabled:checked + span:before {
-  border: 2px solid var(--md-sys-color-on-surface);
+  border: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
 }
 
 [type="radio"].with-gap:disabled:checked + span:after {
   border: none;
-  background-color: var(--md-sys-color-on-surface);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
 }
 
 /* Disabled style */
 [type="radio"]:disabled:not(:checked) + span:before,
 [type="radio"]:disabled:checked + span:before {
   background-color: transparent;
-  border-color: var(--md-sys-color-on-surface);
+  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
 }
 
 [type="radio"]:disabled + span {
-  color: var(--md-sys-color-on-surface);
+  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
 }
 
 [type="radio"]:disabled:not(:checked) + span:before {
-  border-color: var(--md-sys-color-on-surface);
+  border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
 }
 
 [type="radio"]:disabled:checked + span:after {
-  background-color: var(--md-sys-color-on-surface);
-  border-color: var(--md-sys-color-on-surface);
+  background-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) 38%);
 }

Original file line number	Diff line number	Diff line change
`@@ -44,8 +44,11 @@`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`&:not(:checked):disabled + span:not(.lever):before {`
`47`		`- border: none;`
`48`		`- background-color: var(--md-sys-color-on-surface);`
	`47`	`+ border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
	`48`	`+ }`
	`49`	`+`
	`50`	`+ &:disabled + span:not(.lever) {`
	`51`	`+ color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`49`	`52`	`}`
`50`	`53`
`51`	`54`	`// Focused styles`
`@@ -74,8 +77,8 @@`
`74`	`77`	`}`
`75`	`78`
`76`	`79`	`&:disabled + span:before {`
`77`		`- border-right: 2px solid var(--md-sys-color-on-surface);`
`78`		`- border-bottom: 2px solid var(--md-sys-color-on-surface);`
	`80`	`+ border-right: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
	`81`	`+ border-bottom: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`79`	`82`	`}`
`80`	`83`	`}`
`81`	`84`
`@@ -97,7 +100,7 @@`
`97`	`100`
`98`	`101`	`// Disabled indeterminate`
`99`	`102`	`&:disabled + span:not(.lever):before {`
`100`		`- border-right: 2px solid var(--md-sys-color-on-surface);`
	`103`	`+ border-right: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`101`	`104`	`background-color: transparent;`
`102`	`105`	`}`
`103`	`106`	`}`
`@@ -184,16 +187,15 @@`
`184`	`187`	`}`
`185`	`188`
`186`	`189`	`&:disabled:not(:checked) + span:not(.lever):after {`
`187`		`- border-color: transparent;`
`188`		`- background-color: var(--md-sys-color-on-surface);`
	`190`	`+ border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`189`	`191`	`}`
`190`	`192`
`191`	`193`	`&:disabled:checked + span:not(.lever):before {`
`192`	`194`	`background-color: transparent;`
`193`	`195`	`}`
`194`	`196`
`195`	`197`	`&:disabled:checked + span:not(.lever):after {`
`196`		`- background-color: var(--md-sys-color-on-surface);`
`197`		`- border-color: var(--md-sys-color-on-surface);`
	`198`	`+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
	`199`	`+ border: none;`
`198`	`200`	`}`
`199`	`201`	`}`
Original file line number	Diff line number	Diff line change
`@@ -83,30 +83,30 @@`
`83`	`83`
`84`	`84`	`/* Disabled Radio With gap */`
`85`	`85`	`[type="radio"].with-gap:disabled:checked + span:before {`
`86`		`- border: 2px solid var(--md-sys-color-on-surface);`
	`86`	`+ border: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`87`	`87`	`}`
`88`	`88`
`89`	`89`	`[type="radio"].with-gap:disabled:checked + span:after {`
`90`	`90`	`border: none;`
`91`		`- background-color: var(--md-sys-color-on-surface);`
	`91`	`+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`92`	`92`	`}`
`93`	`93`
`94`	`94`	`/* Disabled style */`
`95`	`95`	`[type="radio"]:disabled:not(:checked) + span:before,`
`96`	`96`	`[type="radio"]:disabled:checked + span:before {`
`97`	`97`	`background-color: transparent;`
`98`		`- border-color: var(--md-sys-color-on-surface);`
	`98`	`+ border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`[type="radio"]:disabled + span {`
`102`		`- color: var(--md-sys-color-on-surface);`
	`102`	`+ color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`103`	`103`	`}`
`104`	`104`
`105`	`105`	`[type="radio"]:disabled:not(:checked) + span:before {`
`106`		`- border-color: var(--md-sys-color-on-surface);`
	`106`	`+ border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`107`	`107`	`}`
`108`	`108`
`109`	`109`	`[type="radio"]:disabled:checked + span:after {`
`110`		`- background-color: var(--md-sys-color-on-surface);`
`111`		`- border-color: var(--md-sys-color-on-surface);`
	`110`	`+ background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
	`111`	`+ border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);`
`112`	`112`	`}`