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

adamwathan · web-flow · commit d4fcd2eb8fcc · 2020-11-09T16:39:49.000-05:00
* Add ring utilities

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

* Undo changes to build file

* Update boxShadow.test.js
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
diff --git a/__tests__/plugins/boxShadow.test.js b/__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'],
diff --git a/src/corePluginList.js b/src/corePluginList.js
@@ -69,6 +69,11 @@ export const corePluginList = [
   'inset',
   'resize',
   'boxShadow',
+  'ringWidth',
+  'ringOffsetColor',
+  'ringOffsetWidth',
+  'ringColor',
+  'ringOpacity',
   'fill',
   'stroke',
   'strokeWidth',
diff --git a/src/plugins/boxShadow.js b/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)',
           },
         ]
       })
diff --git a/src/plugins/index.js b/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'
diff --git a/src/plugins/ringColor.js b/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'))
+  }
+}
diff --git a/src/plugins/ringOffsetColor.js b/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'))
+  }
+}
diff --git a/src/plugins/ringOffsetWidth.js b/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'))
+  }
+}
diff --git a/src/plugins/ringOpacity.js b/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'))
+  }
+}
diff --git a/src/plugins/ringWidth.js b/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'))
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
@@ -125,16 +125,13 @@ 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)',
       lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
       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'],

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,8 @@ export default function () {`
`8`	`8`	`return [`
`9`	`9`	`nameClass('shadow', modifier),`
`10`	`10`	`{`
`11`		`- 'box-shadow': value,`
	`11`	`+ '--box-shadow': value,`
	`12`	`+ 'box-shadow': 'var(--box-shadow)',`
`12`	`13`	`},`
`13`	`14`	`]`
`14`	`15`	`})`