@economic/taco 1.17.0-alpha.0 → 1.17.0

package/tailwind.config.js

@@ -1,284 +1,534 @@
-const tokens = require('@economic/taco-tokens').default;
-const plugin = require('tailwindcss/plugin');
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-module.exports = {
-    theme: {
-        colors: tokens.colors,
-        fontFamily: {
-            display: ['Helvetica, Arial, sans-serif'],
-            mono: ['Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'],
-        },
-        extend: {
-            cursor: {
-                grab: 'grab',
-                grabbing: 'grabbing',
-            },
-            listStyleType: {
-                circle: 'circle',
-            },
-            spacing: {
-                18: '4.5rem',
-                72: '18rem',
-                80: '20rem',
-                88: '22rem',
-                96: '24rem',
-                104: '26rem',
-                112: '28rem',
-                120: '30rem',
-                128: '32rem',
-                xs: '32rem',
-                sm: '48rem',
-                md: '64rem',
-                lg: '80rem',
-            },
-            screens: {
-                xs: '375px',
-                ...defaultTheme.screens,
-            },
-        },
-    },
-    plugins: [
-        require('./plugins/tailwindcss-aria-attributes'),
-        plugin(function ({ addUtilities, theme }) {
-            // ideally we would do this using the @layer utilities directive, but
-            // that causes issues in tools like tailwind where the typescript is loaded before the css
-            // resulting in "yt-focus class does not exist" errors
-            addUtilities({
-                '.fixed-center': {
-                    position: 'fixed',
-                    left: '50%',
-                    top: '50%',
-                    transform: 'translateX(-50%) translateY(-50%)',
-                },
-                '.absolute-center': {
-                    position: 'absolute',
-                    left: '50%',
-                    top: '50%',
-                    transform: 'translateX(-50%) translateY(-50%)',
-                },
-                '.absolute-center-x': {
-                    position: 'absolute',
-                    left: '50%',
-                    transform: 'translateX(-50%)',
-                },
-                '.absolute-center-y': {
-                    position: 'absolute',
-                    top: '50%',
-                    transform: 'translateY(-50%)',
-                }, // WCAG contrast combinations
-                '.wcag-black': {
-                    background: theme('colors.black'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-white': {
-                    background: theme('colors.white'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-lightest': {
-                    background: theme('colors.grey.lightest'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-light': {
-                    background: theme('colors.grey.light'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey': {
-                    background: theme('colors.grey.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-dark': {
-                    background: theme('colors.grey.dark'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-grey-darker': {
-                    background: theme('colors.grey.darker'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-grey-darkest': {
-                    background: theme('colors.grey.darkest'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-grey-darkNew': {
-                    background: theme('colors.grey.darkNew'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-lightest': {
-                    background: theme('colors.purple.lightest'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-light': {
-                    background: theme('colors.purple.light'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple': {
-                    background: theme('colors.purple.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-dark': {
-                    background: theme('colors.purple.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-darker': {
-                    background: theme('colors.purple.darker'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-darkest': {
-                    background: theme('colors.purple.darkest'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-darkNew_1': {
-                    background: theme('colors.purple.darkNew_1'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-purple-darkNew_2': {
-                    background: theme('colors.purple.darkNew_2'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-blue-lightest': {
-                    background: theme('colors.blue.lightest'),
-                    color: theme('colors.blue.dark'),
-                },
-                '.wcag-blue-light': {
-                    background: theme('colors.blue.light'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-blue': {
-                    background: theme('colors.blue.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-blue-dark': {
-                    background: theme('colors.blue.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-red-lightest': {
-                    background: theme('colors.red.lightest'),
-                    color: theme('colors.red.dark'),
-                },
-                '.wcag-red-light': {
-                    background: theme('colors.red.light'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-red': {
-                    background: theme('colors.red.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-red-dark': {
-                    background: theme('colors.red.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-green-lightest': {
-                    background: theme('colors.green.lightest'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-green-light': {
-                    background: theme('colors.green.light'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-green': {
-                    background: theme('colors.green.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-green-dark': {
-                    background: theme('colors.green.dark'),
-                    color: theme('colors.white'),
-                },
-                '.wcag-yellow-lightest': {
-                    background: theme('colors.yellow.lightest'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-yellow-light': {
-                    background: theme('colors.yellow.light'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-yellow': {
-                    background: theme('colors.yellow.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.wcag-yellow-dark': {
-                    background: theme('colors.yellow.dark'),
-                    color: theme('colors.white'),
-                },
-                // Legacy
-                '.yt-transparent': {
-                    background: theme('colors.transparent'),
-                    color: theme('colors.blue.DEFAULT'),
-                },
-                '.yt-focus': {
-                    'box-shadow': '0 0 0 2px rgba(0, 99, 255, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-focus-dark': {
-                    'box-shadow': '0 0 0 3px rgba(38, 132, 255, 75%)',
-                    outline: 'none',
-                },
-                '.yt-focus-green': {
-                    'box-shadow': '0 0 0 0.15rem rgba(0, 213, 165, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-focus-yellow': {
-                    'box-shadow': '0 0 0 0.15rem rgba(239, 125, 0, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-focus-red': {
-                    'box-shadow': '0 0 0 0.15rem rgba(253, 99, 97, 0.25)',
-                    outline: 'none',
-                },
-                '.yt-blue-solid': {
-                    background: theme('colors.blue.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.yt-blue-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.blue.DEFAULT')}`,
-                    color: theme('colors.blue.DEFAULT'),
-                },
-                '.yt-yellow-solid': {
-                    background: theme('colors.yellow.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.yt-yellow-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.yellow.DEFAULT')}`,
-                    color: theme('colors.yellow.DEFAULT'),
-                },
-                '.yt-red-solid': {
-                    background: theme('colors.red.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.yt-red-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.red.DEFAULT')}`,
-                    color: theme('colors.red.DEFAULT'),
-                },
-                '.yt-green-solid': {
-                    background: theme('colors.green.DEFAULT'),
-                    color: theme('colors.white'),
-                },
-                '.yt-green-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.green.DEFAULT')}`,
-                    color: theme('colors.green.DEFAULT'),
-                },
-                '.yt-grey-solid': {
-                    background: theme('colors.grey.DEFAULT'),
-                    color: theme('colors.black'),
-                },
-                '.yt-grey-inverted': {
-                    background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.grey.darkest')}`,
-                    color: theme('colors.grey.darkest'),
-                },
-                '.yt-shadow': {
-                    'box-shadow': '0px 1px 3px 0px rgba(89, 85, 98, 0.35), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
-                },
-                '.yt-shadow-inset': {
-                    'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.3), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
-                },
-                '.pointer-events-all': {
-                    'pointer-events': 'all',
-                },
-            });
-        }),
-    ],
-};
+const tokens = require('@economic/taco-tokens').default;
+const plugin = require('tailwindcss/plugin');
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+    theme: {
+        colors: tokens.colors,
+        fontFamily: {
+            display: ['Helvetica, Arial, sans-serif'],
+            mono: ['Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'],
+        },
+        extend: {
+            cursor: {
+                grab: 'grab',
+                grabbing: 'grabbing',
+            },
+            listStyleType: {
+                circle: 'circle',
+            },
+            spacing: {
+                18: '4.5rem',
+                72: '18rem',
+                80: '20rem',
+                88: '22rem',
+                96: '24rem',
+                104: '26rem',
+                112: '28rem',
+                120: '30rem',
+                128: '32rem',
+                xs: '32rem',
+                sm: '48rem',
+                md: '64rem',
+                lg: '80rem',
+            },
+            screens: {
+                xs: '375px',
+                ...defaultTheme.screens,
+            },
+        },
+    },
+    plugins: [
+        require('./plugins/tailwindcss-aria-attributes'),
+        require('./plugins/tailwindcss-group-peer'),
+        plugin(function ({ addUtilities, theme }) {
+            // ideally we would do this using the @layer utilities directive, but
+            // that causes issues in tools like tailwind where the typescript is loaded before the css
+            // resulting in "yt-focus class does not exist" errors
+            addUtilities({
+                '.fixed-center': {
+                    position: 'fixed',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                },
+                '.absolute-center': {
+                    position: 'absolute',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translateX(-50%) translateY(-50%)',
+                },
+                '.absolute-center-x': {
+                    position: 'absolute',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                },
+                '.absolute-center-y': {
+                    position: 'absolute',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                }, // WCAG contrast combinations
+                '.wcag-black': {
+                    background: theme('colors.black'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-white': {
+                    background: theme('colors.white'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-50': {
+                    background: theme('colors.grey.50'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-100': {
+                    background: theme('colors.grey.100'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-200': {
+                    background: theme('colors.grey.200'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-300': {
+                    background: theme('colors.grey.300'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-500': {
+                    background: theme('colors.grey.500'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-grey-700': {
+                    background: theme('colors.grey.700'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey-900': {
+                    background: theme('colors.grey.900'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey-darkNew': {
+                    background: theme('colors.grey.darkNew'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey-lightest': {
+                    background: theme('colors.grey.lightest'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey-light': {
+                    background: theme('colors.grey.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey': {
+                    background: theme('colors.grey.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey-dark': {
+                    background: theme('colors.grey.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey-darker': {
+                    background: theme('colors.grey.darker'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-grey-darkest': {
+                    background: theme('colors.grey.darkest'),
+                    color: theme('colors.white'),
+                },
+
+                '.wcag-pink-100': {
+                    background: theme('colors.pink.100'),
+                    color: theme('colors.pink.900'),
+                },
+                '.wcag-pink-200': {
+                    background: theme('colors.pink.200'),
+                    color: theme('colors.pink.900'),
+                },
+                '.wcag-pink-300': {
+                    background: theme('colors.pink.300'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-pink-500': {
+                    background: theme('colors.pink.500'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-pink-700': {
+                    background: theme('colors.pink.700'),
+                    color: '#000000',
+                },
+                '.wcag-pink-900': {
+                    background: theme('colors.pink.900'),
+                    color: theme('colors.white'),
+                },
+
+                '.wcag-purple-100': {
+                    background: theme('colors.purple.100'),
+                    color: theme('colors.purple.900'),
+                },
+                '.wcag-purple-200': {
+                    background: theme('colors.purple.200'),
+                    color: theme('colors.purple.900'),
+                },
+                '.wcag-purple-300': {
+                    background: theme('colors.purple.300'),
+                    color: theme('colors.purple.900'),
+                },
+                '.wcag-purple-500': {
+                    background: theme('colors.purple.500'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-purple-700': {
+                    background: theme('colors.purple.700'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-900': {
+                    background: theme('colors.purple.900'),
+                    color: theme('colors.white'),
+                },
+
+                '.wcag-purple-lightest': {
+                    background: theme('colors.purple.lightest'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-light': {
+                    background: theme('colors.purple.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple': {
+                    background: theme('colors.purple.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-dark': {
+                    background: theme('colors.purple.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-darker': {
+                    background: theme('colors.purple.darker'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-darkest': {
+                    background: theme('colors.purple.darkest'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-darkNew_1': {
+                    background: theme('colors.purple.darkNew_1'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-purple-darkNew_2': {
+                    background: theme('colors.purple.darkNew_2'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-lightest': {
+                    background: theme('colors.blue.lightest'),
+                    color: theme('colors.blue.dark'),
+                },
+                '.wcag-blue-light': {
+                    background: theme('colors.blue.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue': {
+                    background: theme('colors.blue.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-dark': {
+                    background: theme('colors.blue.dark'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-100': {
+                    background: theme('colors.blue.100'),
+                    color: theme('colors.blue.900'),
+                },
+                '.wcag-blue-200': {
+                    background: theme('colors.blue.200'),
+                    color: theme('colors.blue.900'),
+                },
+                '.wcag-blue-300': {
+                    background: theme('colors.blue.300'),
+                    color: theme('colors.blue.900'),
+                },
+                '.wcag-blue-500': {
+                    background: theme('colors.blue.500'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-700': {
+                    background: theme('colors.blue.700'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-blue-900': {
+                    background: theme('colors.blue.900'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red-lightest': {
+                    background: theme('colors.red.lightest'),
+                    color: theme('colors.red.dark'),
+                },
+                '.wcag-red-light': {
+                    background: theme('colors.red.light'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red': {
+                    background: theme('colors.red.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red-dark': {
+                    background: theme('colors.red.dark'),
+                    color: theme('colors.white'),
+                },
+
+                '.wcag-red-100': {
+                    background: theme('colors.red.100'),
+                    color: theme('colors.red.900'),
+                },
+                '.wcag-red-200': {
+                    background: theme('colors.red.200'),
+                    color: theme('colors.red.900'),
+                },
+                '.wcag-red-300': {
+                    background: theme('colors.red.300'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-red-500': {
+                    background: theme('colors.red.500'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red-700': {
+                    background: theme('colors.red.700'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-red-900': {
+                    background: theme('colors.red.900'),
+                    color: theme('colors.white'),
+                },
+
+                '.wcag-green-lightest': {
+                    background: theme('colors.green.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-green-light': {
+                    background: theme('colors.green.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-green': {
+                    background: theme('colors.green.DEFAULT'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-green-dark': {
+                    background: theme('colors.green.dark'),
+                    color: theme('colors.white'),
+                },
+
+                '.wcag-green-100': {
+                    background: theme('colors.green.100'),
+                    color: theme('colors.green.900'),
+                },
+                '.wcag-green-200': {
+                    background: theme('colors.green.200'),
+                    color: theme('colors.green.900'),
+                },
+                '.wcag-green-300': {
+                    background: theme('colors.green.300'),
+                    color: theme('colors.green.900'),
+                },
+                '.wcag-green-500': {
+                    background: theme('colors.green.500'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-green-700': {
+                    background: theme('colors.green.700'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-green-900': {
+                    background: theme('colors.green.900'),
+                    color: theme('colors.white'),
+                },
+
+                '.wcag-yellow-lightest': {
+                    background: theme('colors.yellow.lightest'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow-light': {
+                    background: theme('colors.yellow.light'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow': {
+                    background: theme('colors.yellow.DEFAULT'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow-dark': {
+                    background: theme('colors.yellow.dark'),
+                    color: theme('colors.white'),
+                },
+
+                '.wcag-yellow-100': {
+                    background: theme('colors.yellow.100'),
+                    color: theme('colors.yellow.900'),
+                },
+                '.wcag-yellow-200': {
+                    background: theme('colors.yellow.200'),
+                    color: theme('colors.yellow.900'),
+                },
+                '.wcag-yellow-300': {
+                    background: theme('colors.yellow.300'),
+                    color: theme('colors.yellow.900'),
+                },
+                '.wcag-yellow-500': {
+                    background: theme('colors.yellow.500'),
+                    color: theme('colors.yellow.900'),
+                },
+                '.wcag-yellow-700': {
+                    background: theme('colors.yellow.700'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-yellow-900': {
+                    background: theme('colors.yellow.900'),
+                    color: theme('colors.white'),
+                },
+
+                '.wcag-brown-100': {
+                    background: theme('colors.brown.100'),
+                    color: theme('colors.brown.900'),
+                },
+                '.wcag-brown-200': {
+                    background: theme('colors.brown.200'),
+                    color: theme('colors.brown.900'),
+                },
+                '.wcag-brown-300': {
+                    background: theme('colors.brown.300'),
+                    color: theme('colors.brown.900'),
+                },
+                '.wcag-brown-500': {
+                    background: theme('colors.brown.500'),
+                    color: theme('colors.black'),
+                },
+                '.wcag-brown-700': {
+                    background: theme('colors.brown.700'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-brown-900': {
+                    background: theme('colors.brown.900'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-orange-100': {
+                    background: theme('colors.orange.100'),
+                    color: theme('colors.orange.900'),
+                },
+                '.wcag-orange-200': {
+                    background: theme('colors.orange.200'),
+                    color: theme('colors.orange.900'),
+                },
+                '.wcag-orange-300': {
+                    background: theme('colors.orange.300'),
+                    color: theme('colors.orange.900'),
+                },
+                '.wcag-orange-500': {
+                    background: theme('colors.orange.500'),
+                    color: theme('colors.orange.900'),
+                },
+                '.wcag-orange-700': {
+                    background: theme('colors.orange.700'),
+                    color: theme('colors.orange.900'),
+                },
+                '.wcag-orange-900': {
+                    background: theme('colors.orange.900'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-brand-vismaRed': {
+                    background: theme('colors.brand.vismaRed'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-brand-paleOrange': {
+                    background: theme('colors.brand.paleOrange'),
+                    color: theme('colors.orange.900'),
+                },
+                '.wcag-brand-sunsetOrange': {
+                    background: theme('colors.brand.sunsetOrange'),
+                    color: theme('colors.yellow.900'),
+                },
+                '.wcag-brand-midnightBlue': {
+                    background: theme('colors.brand.midnightBlue'),
+                    color: theme('colors.white'),
+                },
+                '.wcag-brand-coolBlue': {
+                    background: theme('colors.brand.coolBlue'),
+                    color: theme('colors.blue.900'),
+                },
+                // Legacy
+                '.yt-transparent': {
+                    background: theme('colors.transparent'),
+                    color: theme('colors.blue.500'),
+                },
+                '.yt-focus': {
+                    'box-shadow': '0 0 0 2px rgba(0, 99, 255, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-dark': {
+                    'box-shadow': '0 0 0 3px rgba(38, 132, 255, 75%)',
+                    outline: 'none',
+                },
+                '.yt-focus-green': {
+                    'box-shadow': '0 0 0 0.15rem rgba(0, 213, 165, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-yellow': {
+                    'box-shadow': '0 0 0 0.15rem rgba(239, 125, 0, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-focus-red': {
+                    'box-shadow': '0 0 0 0.15rem rgba(253, 99, 97, 0.25)',
+                    outline: 'none',
+                },
+                '.yt-blue-solid': {
+                    background: theme('colors.blue.500'),
+                    color: theme('colors.white'),
+                },
+                '.yt-blue-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.blue.500')}`,
+                    color: theme('colors.blue.500'),
+                },
+                '.yt-yellow-solid': {
+                    background: theme('colors.yellow.500'),
+                    color: theme('colors.black'),
+                },
+                '.yt-yellow-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.yellow.500')}`,
+                    color: theme('colors.yellow.500'),
+                },
+                '.yt-red-solid': {
+                    background: theme('colors.red.500'),
+                    color: theme('colors.white'),
+                },
+                '.yt-red-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.red.500')}`,
+                    color: theme('colors.red.500'),
+                },
+                '.yt-green-solid': {
+                    background: theme('colors.green.500'),
+                    color: theme('colors.white'),
+                },
+                '.yt-green-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.green.500')}`,
+                    color: theme('colors.green.500'),
+                },
+                '.yt-grey-solid': {
+                    background: theme('colors.grey.200'),
+                    color: theme('colors.black'),
+                },
+                '.yt-grey-inverted': {
+                    background: theme('colors.transparent'),
+                    border: `1px solid ${theme('colors.grey.700')}`,
+                    color: theme('colors.grey.700'),
+                },
+                '.yt-shadow': {
+                    'box-shadow': '0px 1px 3px 0px rgba(89, 85, 98, 0.35), 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
+                },
+                '.yt-shadow-inset': {
+                    'box-shadow': 'inset 0px 1px 4px 0px rgba(89, 85, 98, 0.3), inset 0px 0px 1px 0px rgba(89, 85, 98, 0.2)',
+                },
+                '.pointer-events-all': {
+                    'pointer-events': 'all',
+                },
+            });
+        }),
+    ],
+};