@economic/taco 1.1.2 → 1.1.5-alpha.0

package/tailwind.config.js

@@ -1,297 +1,260 @@
-const plugin = require('tailwindcss/plugin');
-
-module.exports = {
-    theme: {
-        colors: {
-            transparent: 'transparent',
-            current: 'currentColor',
-            white: '#fff',
-            black: '#1c1c1c',
-            grey: {
-                lightest: '#fafafa',
-                light: '#efefef',
-                DEFAULT: '#ebebeb',
-                dark: '#ddd',
-                darker: '#acacac',
-                darkest: '#595959',
-            },
-            purple: {
-                lightest: '#585c74',
-                light: '#4b4f64',
-                DEFAULT: '#3d4153',
-                dark: '#353a48',
-            },
-            blue: {
-                lightest: '#e5efff',
-                light: '#6ba4ff',
-                DEFAULT: '#0063ff',
-                dark: '#0158e2',
-            },
-            red: {
-                lightest: '#f3cfc5',
-                light: '#e67355',
-                DEFAULT: '#cf3c16',
-                dark: '#b12d0b',
-            },
-            green: {
-                lightest: '#c4e1d7',
-                light: '#5caf93',
-                DEFAULT: '#138760',
-                dark: '#0c5f43',
-            },
-            yellow: {
-                lightest: '#fff1c3',
-                light: '#fddd70',
-                DEFAULT: '#ffc810',
-                dark: '#e89c2e',
-            },
-        },
-        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',
-            },
-        },
-    },
-    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-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-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-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: '24rem',
+                ...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-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-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-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',
+                },
+            });
+        }),
+    ],
+};