Add ring defaults

ben-rogerson · Apr 23, 2021 · b0f443a · b0f443a
1 parent 3f49c17
commit b0f443a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/__fixtures__/globalStyles/tailwind.config.js b/__fixtures__/globalStyles/tailwind.config.js
@@ -12,6 +12,12 @@ module.exports = {
         400: 'grayish',
       },
     },
+    ringOffsetWidth: {
+      DEFAULT: '10px',
+    },
+    ringOffsetColor: {
+      DEFAULT: 'rainbow',
+    },
     borderColor: {
       // Tests the dynamic default border default color
       DEFAULT: 'blueish',

diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -7837,8 +7837,8 @@ const _GlobalStyles = () => (
       }
       * {
         --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
-        --tw-ring-offset-width: 0px;
-        --tw-ring-offset-color: #fff;
+        --tw-ring-offset-width: 10px;
+        --tw-ring-offset-color: rainbow;
         --tw-ring-color: rgba(59, 130, 246, 0.5);
         --tw-ring-offset-shadow: 0 0 #0000;
         --tw-ring-shadow: 0 0 #0000;
@@ -12560,7 +12560,6 @@ tw\`z-auto\`
 exports[`twin.macro pluginForms.js: pluginForms.js 1`] = `
 
 import { GlobalStyles } from './macro'
-
 ;<GlobalStyles />
 
       ↓ ↓ ↓ ↓ ↓ ↓

diff --git a/src/plugins/ring.js b/src/plugins/ring.js
@@ -16,8 +16,8 @@ export const globalRingStyles = ({ theme }) => {
 
   return `* {
     --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
+    --tw-ring-offset-width: ${theme('ringOffsetWidth.DEFAULT') || '0px'};
+    --tw-ring-offset-color: ${theme('ringOffsetColor.DEFAULT') || '#fff'};
     --tw-ring-color: ${ringColorDefault};
     --tw-ring-offset-shadow: 0 0 #0000;
     --tw-ring-shadow: 0 0 #0000;