Use checkedColor for default check/radio text color, always use currentColor for actual background color

Author: adamwathan

index.js

@@ -19,7 +19,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
     radioSize: '1em',
     checkboxIcon: `<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>`,
     radioIcon: `<svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`,
-    checkedColor: 'currentColor',
+    checkedColor: defaultTheme.colors.gray[800],
     selectIcon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${defaultTheme.colors.gray[500]}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>`,
     selectIconOffset: defaultTheme.spacing[2],
     selectIconSize: '1.5em',
@@ -34,6 +34,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
       height: options.checkboxSize,
       width: options.checkboxSize,
       verticalAlign: 'middle',
+      color: options.checkedColor,
       borderColor: options.borderColor,
       borderWidth: options.borderWidth,
       borderRadius: options.borderRadius,
@@ -48,8 +49,8 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
         borderColor: options.focusBorderColor,
       },
       '&:checked': {
-        backgroundColor: options.checkedColor,
-        borderColor: options.checkedColor,
+        backgroundColor: 'currentColor',
+        borderColor: 'currentColor',
         backgroundImage: `url("${svgToDataUri(options.checkboxIcon)}")`,
         backgroundSize: '100% 100%',
         backgroundPosition: 'center',
@@ -70,6 +71,7 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
       height: options.radioSize,
       width: options.radioSize,
       verticalAlign: 'middle',
+      color: options.checkedColor,
       borderColor: options.borderColor,
       borderWidth: options.borderWidth,
       borderRadius: '50%',
@@ -84,8 +86,8 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
         borderColor: options.focusBorderColor,
       },
       '&:checked': {
-        backgroundColor: options.checkedColor,
-        borderColor: options.checkedColor,
+        backgroundColor: 'currentColor',
+        borderColor: 'currentColor',
         backgroundImage: `url("${svgToDataUri(options.radioIcon)}")`,
         backgroundSize: '100% 100%',
         backgroundPosition: 'center',