Add new ring utilities for custom focus styles and rounded outlines (#2747)

* Add ring utilities

* Remove redundant shadows, add 5% and 95% to opacity scale

* Undo changes to build file

* Update boxShadow.test.js

__tests__/plugins/boxShadow.test.js

@@ -45,16 +45,20 @@ test('box shadow can use DEFAULT keyword and negative prefix syntax', () => {
     {
       utilities: {
         '.shadow': {
-          'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+          '--box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+          'box-shadow': 'var(--box-shadow)',
         },
         '.shadow-md': {
-          'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+          '--box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+          'box-shadow': 'var(--box-shadow)',
         },
         '.-shadow': {
-          'box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+          '--box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+          'box-shadow': 'var(--box-shadow)',
         },
         '.-shadow-md': {
-          'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+          '--box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+          'box-shadow': 'var(--box-shadow)',
         },
       },
       variants: ['responsive'],

src/corePluginList.js

@@ -69,6 +69,11 @@ export const corePluginList = [
   'inset',
   'resize',
   'boxShadow',
+  'ringWidth',
+  'ringOffsetColor',
+  'ringOffsetWidth',
+  'ringColor',
+  'ringOpacity',
   'fill',
   'stroke',
   'strokeWidth',

src/plugins/boxShadow.js

@@ -8,7 +8,8 @@ export default function () {
         return [
           nameClass('shadow', modifier),
           {
-            'box-shadow': value,
+            '--box-shadow': value,
+            'box-shadow': 'var(--box-shadow)',
           },
         ]
       })

src/plugins/index.js

@@ -85,6 +85,11 @@ export { default as pointerEvents } from './pointerEvents'
 export { default as position } from './position'
 export { default as preflight } from './preflight'
 export { default as resize } from './resize'
+export { default as ringColor } from './ringColor'
+export { default as ringOffsetColor } from './ringOffsetColor'
+export { default as ringOffsetWidth } from './ringOffsetWidth'
+export { default as ringOpacity } from './ringOpacity'
+export { default as ringWidth } from './ringWidth'
 export { default as rotate } from './rotate'
 export { default as scale } from './scale'
 export { default as skew } from './skew'

src/plugins/ringColor.js

@@ -0,0 +1,32 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
+import { toRgba } from '../util/withAlphaVariable'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    const colors = flattenColorPalette(theme('ringColor'))
+    const utilities = _.fromPairs(
+      _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
+        try {
+          const [r, g, b, a] = toRgba(value)
+          return [
+            nameClass('ring', modifier),
+            {
+              '--ring-opacity': a === undefined ? '1' : a,
+              '--ring-color': `rgba(${r}, ${g}, ${b}, var(--ring-opacity))`,
+            },
+          ]
+        } catch (_error) {
+          return [
+            nameClass('ring', modifier),
+            {
+              '--ring-color': value,
+            },
+          ]
+        }
+      })
+    )
+    addUtilities(utilities, variants('ringColor'))
+  }
+}

src/plugins/ringOffsetColor.js

@@ -0,0 +1,20 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    const colors = flattenColorPalette(theme('ringOffsetColor'))
+    const utilities = _.fromPairs(
+      _.map(colors, (value, modifier) => {
+        return [
+          nameClass('ring-offset', modifier),
+          {
+            '--ring-offset-color': value,
+          },
+        ]
+      })
+    )
+    addUtilities(utilities, variants('ringOffsetColor'))
+  }
+}

src/plugins/ringOffsetWidth.js

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+import nameClass from '../util/nameClass'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    const utilities = _.fromPairs(
+      _.map(theme('ringOffsetWidth'), (value, modifier) => {
+        return [
+          nameClass('ring-offset', modifier),
+          {
+            '--ring-offset-width': value,
+          },
+        ]
+      })
+    )
+    addUtilities(utilities, variants('ringOffsetWidth'))
+  }
+}

src/plugins/ringOpacity.js

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+import nameClass from '../util/nameClass'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    const utilities = _.fromPairs(
+      _.map(_.omit(theme('ringOpacity'), 'DEFAULT'), (value, modifier) => {
+        return [
+          nameClass('ring-opacity', modifier),
+          {
+            '--ring-opacity': value,
+          },
+        ]
+      })
+    )
+    addUtilities(utilities, variants('ringOpacity'))
+  }
+}

src/plugins/ringWidth.js

@@ -0,0 +1,37 @@
+import _ from 'lodash'
+import nameClass from '../util/nameClass'
+import { toRgba } from '../util/withAlphaVariable'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    function safeCall(callback, defaultValue) {
+      try {
+        return callback()
+      } catch (_error) {
+        return defaultValue
+      }
+    }
+
+    const ringColorDefault = (([r, g, b]) => {
+      return `rgba(${r}, ${g}, ${b}, ${theme('ringOpacity.DEFAULT', '0.5')})`
+    })(safeCall(() => toRgba(theme('ringColor.DEFAULT')), ['147', '197', '253']))
+
+    const utilities = _.fromPairs(
+      _.map(theme('ringWidth'), (value, modifier) => {
+        return [
+          nameClass('ring', modifier),
+          {
+            '--ring-width': value,
+            '--ring-color-default': ringColorDefault,
+            'box-shadow': [
+              `0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff)`,
+              `0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default))`,
+              `var(--box-shadow, 0 0 #0000)`,
+            ].join(', '),
+          },
+        ]
+      })
+    )
+    addUtilities(utilities, variants('ringWidth'))
+  }
+}

stubs/defaultConfig.stub.js

@@ -125,7 +125,6 @@ module.exports = {
       8: '8px',
     },
     boxShadow: {
-      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
       sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
       DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
@@ -133,8 +132,6 @@ module.exports = {
       xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
       '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
       inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-      outline: '0 0 0 3px rgba(147, 197, 253, 0.5)',
-      solid: '0 0 0 2px currentColor',
       none: 'none',
     },
     container: {},
@@ -498,6 +495,7 @@ module.exports = {
     },
     opacity: {
       0: '0',
+      5: '0.05',
       10: '0.1',
       20: '0.2',
       25: '0.25',
@@ -509,6 +507,7 @@ module.exports = {
       75: '0.75',
       80: '0.8',
       90: '0.9',
+      95: '0.95',
       100: '1',
     },
     order: {
@@ -536,6 +535,30 @@ module.exports = {
     padding: (theme) => theme('spacing'),
     placeholderColor: (theme) => theme('colors'),
     placeholderOpacity: (theme) => theme('opacity'),
+    ringColor: (theme) => ({
+      DEFAULT: theme('colors.blue.500'),
+      ...theme('colors'),
+    }),
+    ringOffsetColor: (theme) => theme('colors'),
+    ringOffsetWidth: {
+      0: '0',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    ringOpacity: (theme) => ({
+      DEFAULT: '0.5',
+      ...theme('opacity'),
+    }),
+    ringWidth: {
+      DEFAULT: '3px',
+      0: '0',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
     rotate: {
       '-180': '-180deg',
       '-90': '-90deg',
@@ -794,6 +817,11 @@ module.exports = {
     pointerEvents: ['responsive'],
     position: ['responsive'],
     resize: ['responsive'],
+    ringColor: ['responsive'],
+    ringOffsetColor: ['responsive'],
+    ringOffsetWidth: ['responsive'],
+    ringOpacity: ['responsive'],
+    ringWidth: ['responsive', 'focus'],
     rotate: ['responsive', 'hover', 'focus'],
     scale: ['responsive', 'hover', 'focus'],
     skew: ['responsive', 'hover', 'focus'],