Material radio buttons, update on checkbox colors

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%;

packages/themes/src/presets/material/radiobutton/index.js

@@ -1,17 +1,14 @@
 export default {
     root: {
-        width: '1.25rem',
+        width: '20px',
-        height: '1.25rem',
+        height: '20px',
         background: '{form.field.background}',
-        checkedBackground: '{primary.color}',
+        checkedBackground: '{primary.contrast.color}',
-        checkedHoverBackground: '{primary.hover.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',
+        size: '10px',
-        checkedColor: '{primary.contrast.color}',
+        checkedColor: '{primary.color}',
-        checkedHoverColor: '{primary.contrast.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%);
+}
+`
 };