From f633057563857272862e0e67f00fca1bc02ce8cb Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Sep 2024 14:42:22 +0300
Subject: [PATCH] Material radio buttons, update on checkbox colors

---
 .../src/presets/material/checkbox/index.js    | 11 +++-
 .../src/presets/material/radiobutton/index.js | 55 +++++++++++++++----
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/packages/themes/src/presets/material/checkbox/index.js b/packages/themes/src/presets/material/checkbox/index.js
index 7efdbdb44..1bbf1e6d3 100644
--- a/packages/themes/src/presets/material/checkbox/index.js
+++ b/packages/themes/src/presets/material/checkbox/index.js
@@ -8,9 +8,6 @@ export default {
         checkedHoverBackground: '{primary.color}',
         disabledBackground: '{form.field.disabled.background}',
         filledBackground: '{form.field.filled.background}',
-        borderColor: '{form.field.border.color}',
-        hoverBorderColor: '{form.field.hover.border.color}',
-        focusBorderColor: '{form.field.hover.border.color}',
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.color}',
         checkedFocusBorderColor: '{primary.color}',
@@ -33,6 +30,14 @@ export default {
         checkedHoverColor: '{primary.contrast.color}',
         disabledColor: '{form.field.disabled.color}'
     },
+    colorScheme: {
+        light: {
+            borderColor: '{surface.600}',
+            hoverBorderColor: '{surface.900}',
+            focusBorderColor: '{surface.900}'
+        },
+        dark: {}
+    },
     style: ({ dt }) => `
 .p-checkbox {
     border-radius: 50%;
diff --git a/packages/themes/src/presets/material/radiobutton/index.js b/packages/themes/src/presets/material/radiobutton/index.js
index b1b87c85f..8784fec24 100644
--- a/packages/themes/src/presets/material/radiobutton/index.js
+++ b/packages/themes/src/presets/material/radiobutton/index.js
@@ -1,17 +1,14 @@
 export default {
     root: {
-        width: '1.25rem',
-        height: '1.25rem',
+        width: '20px',
+        height: '20px',
         background: '{form.field.background}',
-        checkedBackground: '{primary.color}',
-        checkedHoverBackground: '{primary.hover.color}',
+        checkedBackground: '{primary.contrast.color}',
+        checkedHoverBackground: '{primary.contrast.color}',
         disabledBackground: '{form.field.disabled.background}',
         filledBackground: '{form.field.filled.background}',
-        borderColor: '{form.field.border.color}',
-        hoverBorderColor: '{form.field.hover.border.color}',
-        focusBorderColor: '{form.field.border.color}',
         checkedBorderColor: '{primary.color}',
-        checkedHoverBorderColor: '{primary.hover.color}',
+        checkedHoverBorderColor: '{primary.color}',
         checkedFocusBorderColor: '{primary.color}',
         checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
@@ -26,9 +23,43 @@ export default {
         transitionDuration: '{form.field.transition.duration}'
     },
     icon: {
-        size: '0.75rem',
-        checkedColor: '{primary.contrast.color}',
-        checkedHoverColor: '{primary.contrast.color}',
+        size: '10px',
+        checkedColor: '{primary.color}',
+        checkedHoverColor: '{primary.color}',
         disabledColor: '{form.field.disabled.color}'
-    }
+    },
+    colorScheme: {
+        light: {
+            borderColor: '{surface.600}',
+            hoverBorderColor: '{surface.900}',
+            focusBorderColor: '{surface.900}'
+        },
+        dark: {}
+    },
+    style: ({ dt }) => `
+.p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow ${dt('radiobutton.transition.duration')};
+}
+
+.p-radiobutton-box {
+    border-width: 2px;
+}
+
+.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
+}
+
+.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 92%);
+}
+
+.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 88%);
+}
+
+.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
+    box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 84%);
+}
+`
 };