Merge pull request #405 from ben-rogerson/feature/ring-defaults

Ring defaults
ben-rogerson · Apr 26, 2021 · 7afbfe2 · 7afbfe2
2 parents 4e03876 + b0f443a
commit 7afbfe2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 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
@@ -7971,8 +7971,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;

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;