ring defaults (#2951)

* add ring defaults

Fixes #2911

* add tests for the ringWidth utility

+ defaults

* update changelog

CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix issue with `@apply` not working as expected with `!important` inside an atrule ([#2824](https://github.com/tailwindlabs/tailwindcss/pull/2824))
 - Fix issue with `@apply` not working as expected with defined classes ([#2832](https://github.com/tailwindlabs/tailwindcss/pull/2832))
 
+### Added
+
+- Add default values for the `ring` utility ([#2951](https://github.com/tailwindlabs/tailwindcss/pull/2951))
+
 ## [2.0.1] - 2020-11-18
 
 - Nothing, just the only thing I could do when I found out npm won't let me publish the same version under two tags.

__tests__/plugins/ringWidth.test.js

@@ -0,0 +1,104 @@
+import invokePlugin from '../util/invokePlugin'
+import plugin from '../../src/plugins/ringWidth'
+
+test('ring widths', () => {
+  const config = {
+    theme: {
+      ringWidth: {
+        4: '4px',
+      },
+      ringOffsetWidth: {
+        4: '4px',
+      },
+      ringColor: {
+        black: '#000',
+      },
+      ringOffsetColor: {
+        white: '#fff',
+      },
+      ringOpacity: {
+        50: '.5',
+      },
+    },
+    variants: {
+      ringColor: [],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+  expect(utilities).toEqual([
+    [
+      {
+        '*': {
+          '--tw-ring-color': 'rgba(147, 197, 253, 0.5)',
+          '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-ring-offset-color': '#fff',
+          '--tw-ring-offset-shadow': '0 0 #0000',
+          '--tw-ring-offset-width': '0px',
+          '--tw-ring-shadow': '0 0 #0000',
+        },
+      },
+      {
+        respectImportant: false,
+      },
+    ],
+    [
+      {
+        '.ring-4': {
+          '--tw-ring-offset-shadow':
+            'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
+          '--tw-ring-shadow':
+            'var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
+          'box-shadow':
+            'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+        },
+        '.ring-inset': {
+          '--tw-ring-inset': 'inset',
+        },
+      },
+      undefined,
+    ],
+  ])
+})
+
+test('ring widths with defaults', () => {
+  const config = {
+    theme: {
+      ringWidth: {},
+      ringOffsetWidth: {
+        DEFAULT: '2px',
+      },
+      ringOffsetColor: {
+        DEFAULT: 'pink',
+      },
+    },
+    variants: {
+      ringColor: [],
+    },
+  }
+
+  const { utilities } = invokePlugin(plugin(), config)
+  expect(utilities).toEqual([
+    [
+      {
+        '*': {
+          '--tw-ring-color': 'rgba(147, 197, 253, 0.5)',
+          '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-ring-offset-color': 'pink',
+          '--tw-ring-offset-shadow': '0 0 #0000',
+          '--tw-ring-offset-width': '2px',
+          '--tw-ring-shadow': '0 0 #0000',
+        },
+      },
+      { respectImportant: false },
+    ],
+    [
+      {
+        '.ring-inset': {
+          '--tw-ring-inset': 'inset',
+        },
+      },
+      undefined,
+    ],
+  ])
+})

src/plugins/ringOffsetColor.js

@@ -7,7 +7,7 @@ export default function () {
   return function ({ addUtilities, theme, variants }) {
     const colors = flattenColorPalette(theme('ringOffsetColor'))
     const utilities = _.fromPairs(
-      _.map(colors, (value, modifier) => {
+      _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
         return [
           nameClass('ring-offset', modifier),
           {

src/plugins/ringOffsetWidth.js

@@ -4,7 +4,7 @@ import nameClass from '../util/nameClass'
 export default function () {
   return function ({ addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
-      _.map(theme('ringOffsetWidth'), (value, modifier) => {
+      _.map(_.omit(theme('ringOffsetWidth'), 'DEFAULT'), (value, modifier) => {
         return [
           nameClass('ring-offset', modifier),
           {

src/plugins/ringWidth.js

@@ -20,8 +20,8 @@ export default function () {
       {
         '*': {
           '--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',