@coconut-software/ui/ringPlugin.js

React components for faster and easier web development.

const plugin = require('tailwindcss/plugin')

const DEFAULTS = {
  outerColor: 'black',
  innerColor: 'white',
  ringWidth: '2',
}

const RING = {
  outline: `${DEFAULTS.ringWidth}px solid ${DEFAULTS.innerColor} !important`, // override equally specific tailwind focus:outline-none
  outlineOffset: '0 !important',
  boxShadow: `0 0 0 ${DEFAULTS.ringWidth * 2}px ${DEFAULTS.outerColor}`, // boxShadow sits underneath outline layer, so double outline's width to make visible
}

const RING_INSET = {
  outline: `${DEFAULTS.ringWidth}px solid ${DEFAULTS.innerColor} !important`,
  outlineOffset: `-${DEFAULTS.ringWidth * 2}px !important`,
  boxShadow: `0 0 0 ${DEFAULTS.ringWidth * 2}px ${DEFAULTS.outerColor} inset`,
}

const RING_INSET_SELECTED = (theme) => ({
  outline: `${DEFAULTS.ringWidth}px solid ${DEFAULTS.innerColor} !important`,
  outlineOffset: `-${DEFAULTS.ringWidth * 2}px !important`,
  borderColor: DEFAULTS.outerColor,
  boxShadow: `
    0 -${DEFAULTS.ringWidth}px 0 0 ${DEFAULTS.outerColor} inset,
    0 ${DEFAULTS.ringWidth}px 0 0 ${DEFAULTS.outerColor} inset,
    ${DEFAULTS.ringWidth * 2}px 0 0 0 ${theme('colors.black.90')} inset,
    0 0 0 ${DEFAULTS.ringWidth * 2}px ${DEFAULTS.outerColor} inset
  `,
})

/**
 * Focus indicator Plugin.
 *
 * Replace this with newer ring-X styles from tailwind when
 * upgrading to v3+
 *
 * This plugin will generate utility
 * classes for .ring, .ring-none and .ring-inset
 */
module.exports = plugin(
  function ({ addUtilities, theme, e }) {
    const ringColors = theme('ringColors', {})
    const ringPlacements = theme('ringPlacements', {})

    const ringDefault = {
      '.ring': RING,
    }

    const ringInsetSelected = {
      '.ring-inset-selected': RING_INSET_SELECTED(theme),
    }

    const ringColorUtilities = Object.entries(ringColors).map(
      ([key, value]) => {
        return {
          [`.${e(`ring-${key}`)}`]: {
            ...RING,
            boxShadow: `0 0 0 ${DEFAULTS.ringWidth * 2}px ${value}`,
          },
        }
      },
    )

    const ringPlacementUtilities = Object.entries(ringPlacements).map(
      ([key, value]) => {
        return {
          [`.${e(`ring-${key}`)}`]: {
            ...RING_INSET,
            boxShadow: `0 0 0 ${DEFAULTS.ringWidth * 2}px ${
              DEFAULTS.outerColor
            } ${value}`,
          },
        }
      },
    )

    addUtilities(
      [
        ...ringColorUtilities,
        ...ringPlacementUtilities,
        ringDefault,
        ringInsetSelected,
      ],
      ['focus-visible', 'hover'],
    )
  },
  {
    theme: {
      ringPlacements: {
        inset: 'inset',
      },
      ringColors: {
        none: 'transparent',
      },
    },
  },
)