@economic/taco 1.16.2 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "1.16.2",
+    "version": "1.17.0",
     "description": "> TODO: description",
     "author": "Matt Daly <matthew.daly@visma.com>",
     "homepage": "https://github.com/e-conomic/taco#readme",
@@ -42,7 +42,7 @@
     },
     "dependencies": {
         "@dnd-kit/sortable": "^7.0.1",
-        "@economic/taco-tokens": "^1.3.1",
+        "@economic/taco-tokens": "^1.4.0",
         "@radix-ui/react-accordion": "^1.0.1",
         "@radix-ui/react-alert-dialog": "^1.0.2",
         "@radix-ui/react-checkbox": "^1.0.1",
@@ -129,5 +129,5 @@
             "not ie < 11"
         ]
     },
-    "gitHead": "f8e8f9a1773551da595babc61aa95f79d4af52af"
+    "gitHead": "d576d09d39cbfc0f201b850c1b85f4b858da67a1"
 }

package/plugins/tailwindcss-group-peer.js

@@ -0,0 +1,12 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(function groupPeer({ addVariant }) {
+    const pseudoVariants = ['active', 'focus', 'hover', 'invalid'].map(variant => [variant, `&:${variant}`]);
+
+    for (let [variantName, state] of pseudoVariants) {
+        addVariant(`group-peer-${variantName}`, ctx => {
+            const result = typeof state === 'function' ? state(ctx) : state;
+            return result.replace(/&(\S+)/, ':merge(.peer)$1 ~ .group &');
+        });
+    }
+});

package/tailwind.config.js

@@ -40,6 +40,7 @@ module.exports = {
     },
     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
@@ -75,21 +76,53 @@ module.exports = {
                     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.black'),
+                    color: theme('colors.white'),
                 },
                 '.wcag-grey-light': {
                     background: theme('colors.grey.light'),
-                    color: theme('colors.black'),
+                    color: theme('colors.white'),
                 },
                 '.wcag-grey': {
                     background: theme('colors.grey.DEFAULT'),
-                    color: theme('colors.black'),
+                    color: theme('colors.white'),
                 },
                 '.wcag-grey-dark': {
                     background: theme('colors.grey.dark'),
-                    color: theme('colors.black'),
+                    color: theme('colors.white'),
                 },
                 '.wcag-grey-darker': {
                     background: theme('colors.grey.darker'),
@@ -99,10 +132,57 @@ module.exports = {
                     background: theme('colors.grey.darkest'),
                     color: theme('colors.white'),
                 },
-                '.wcag-grey-darkNew': {
-                    background: theme('colors.grey.darkNew'),
+
+                '.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'),
@@ -151,6 +231,30 @@ module.exports = {
                     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'),
@@ -167,6 +271,32 @@ module.exports = {
                     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'),
@@ -183,6 +313,32 @@ module.exports = {
                     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'),
@@ -199,10 +355,104 @@ module.exports = {
                     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.DEFAULT'),
+                    color: theme('colors.blue.500'),
                 },
                 '.yt-focus': {
                     'box-shadow': '0 0 0 2px rgba(0, 99, 255, 0.25)',
@@ -225,49 +475,49 @@ module.exports = {
                     outline: 'none',
                 },
                 '.yt-blue-solid': {
-                    background: theme('colors.blue.DEFAULT'),
+                    background: theme('colors.blue.500'),
                     color: theme('colors.white'),
                 },
                 '.yt-blue-inverted': {
                     background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.blue.DEFAULT')}`,
-                    color: theme('colors.blue.DEFAULT'),
+                    border: `1px solid ${theme('colors.blue.500')}`,
+                    color: theme('colors.blue.500'),
                 },
                 '.yt-yellow-solid': {
-                    background: theme('colors.yellow.DEFAULT'),
+                    background: theme('colors.yellow.500'),
                     color: theme('colors.black'),
                 },
                 '.yt-yellow-inverted': {
                     background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.yellow.DEFAULT')}`,
-                    color: theme('colors.yellow.DEFAULT'),
+                    border: `1px solid ${theme('colors.yellow.500')}`,
+                    color: theme('colors.yellow.500'),
                 },
                 '.yt-red-solid': {
-                    background: theme('colors.red.DEFAULT'),
+                    background: theme('colors.red.500'),
                     color: theme('colors.white'),
                 },
                 '.yt-red-inverted': {
                     background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.red.DEFAULT')}`,
-                    color: theme('colors.red.DEFAULT'),
+                    border: `1px solid ${theme('colors.red.500')}`,
+                    color: theme('colors.red.500'),
                 },
                 '.yt-green-solid': {
-                    background: theme('colors.green.DEFAULT'),
+                    background: theme('colors.green.500'),
                     color: theme('colors.white'),
                 },
                 '.yt-green-inverted': {
                     background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.green.DEFAULT')}`,
-                    color: theme('colors.green.DEFAULT'),
+                    border: `1px solid ${theme('colors.green.500')}`,
+                    color: theme('colors.green.500'),
                 },
                 '.yt-grey-solid': {
-                    background: theme('colors.grey.DEFAULT'),
+                    background: theme('colors.grey.200'),
                     color: theme('colors.black'),
                 },
                 '.yt-grey-inverted': {
                     background: theme('colors.transparent'),
-                    border: `1px solid ${theme('colors.grey.darkest')}`,
-                    color: theme('colors.grey.darkest'),
+                    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)',