@economic/taco 1.22.9 → 1.23.0

package/dist/esm/packages/taco/src/utils/taillwind.js

@@ -1,33 +1,92 @@
-const getStateClasses = value => {
-  switch (value) {
+const AVAILABLE_COLORS = ['green', 'yellow', 'red', 'blue', 'purple', 'brown', 'pink', 'orange', 'grey', 'transparent'];
+const getColorByState = state => {
+  switch (state) {
     case 'information':
-      return 'yt-blue-solid';
+      return 'blue';
     case 'warning':
-      return 'yt-yellow-solid';
+      return 'yellow';
     case 'error':
-      return 'yt-red-solid';
+      return 'red';
     case 'success':
-      return 'yt-green-solid';
+      return 'green';
     default:
-      return 'yt-grey-solid';
+      return 'grey';
   }
 };
-const getOutlineClasses = state => {
+const getOutlineColorShadeClasses = state => {
   switch (state) {
-    case 'information':
-    case 'primary':
-      return 'yt-blue-inverted';
-    case 'warning':
-      return 'yt-yellow-inverted';
-    case 'error':
-    case 'danger':
-      return 'yt-red-inverted';
-    case 'success':
-      return 'yt-green-inverted';
+    case 'green':
+      return 'border-green-700 text-green-700';
+    case 'yellow':
+      return 'border-yellow-700 text-yellow-700';
+    case 'red':
+      return 'border-red-500 text-red-500';
+    case 'blue':
+      return 'border-blue-500 text-blue-500';
+    case 'purple':
+      return 'border-purple-700 text-purple-700';
+    case 'brown':
+      return 'border-brown-700 text-brown-700';
+    case 'pink':
+      return 'border-pink-700 text-pink-700';
+    case 'orange':
+      return 'border-orange-700 text-orange-700';
+    case 'transparent':
+    case 'grey':
+    default:
+      return 'border-grey-700 text-grey-700';
+  }
+};
+const getSubtleColorShadeClasses = value => {
+  switch (value) {
+    case 'green':
+      return 'wcag-green-100';
+    case 'yellow':
+      return 'wcag-yellow-100';
+    case 'red':
+      return 'wcag-red-100';
+    case 'blue':
+      return 'wcag-blue-100';
+    case 'purple':
+      return 'wcag-purple-100';
+    case 'brown':
+      return 'wcag-brown-100';
+    case 'pink':
+      return 'wcag-pink-100';
+    case 'orange':
+      return 'wcag-orange-100';
+    case 'transparent':
+      return 'wcag-transparent';
+    case 'grey':
+    default:
+      return 'wcag-grey-200';
+  }
+};
+const getColorShadeClasses = value => {
+  switch (value) {
+    case 'green':
+      return 'wcag-green-700';
+    case 'yellow':
+      return 'wcag-yellow-500';
+    case 'red':
+      return 'wcag-red-500';
+    case 'blue':
+      return 'wcag-blue-500';
+    case 'purple':
+      return 'wcag-purple-700';
+    case 'brown':
+      return 'wcag-brown-700';
+    case 'pink':
+      return 'wcag-pink-500';
+    case 'orange':
+      return 'wcag-orange-700';
+    case 'transparent':
+      return 'wcag-transparent';
+    case 'grey':
     default:
-      return 'yt-grey-inverted';
+      return 'wcag-grey-700';
   }
 };
 
-export { getOutlineClasses, getStateClasses };
+export { AVAILABLE_COLORS, getColorByState, getColorShadeClasses, getOutlineColorShadeClasses, getSubtleColorShadeClasses };
 //# sourceMappingURL=taillwind.js.map

package/dist/esm/packages/taco/src/utils/taillwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"taillwind.js","sources":["../../../../../../src/utils/taillwind.ts"],"sourcesContent":["import { State, Appearance } from '../types';\n\nexport const getAppearanceClasses = (value: Appearance | undefined): string => {\n    switch (value) {\n        case 'primary':\n            return 'yt-blue-solid';\n\n        case 'danger':\n            return 'yt-red-solid';\n\n        case 'ghost':\n            return 'yt-blue-inverted';\n\n        case 'discrete':\n            return 'yt-transparent';\n\n        default:\n            return 'yt-grey-solid';\n    }\n};\n\nexport const getStateClasses = (value: State | undefined): string => {\n    switch (value) {\n        case 'information':\n            return 'yt-blue-solid';\n\n        case 'warning':\n            return 'yt-yellow-solid';\n\n        case 'error':\n            return 'yt-red-solid';\n\n        case 'success':\n            return 'yt-green-solid';\n\n        default:\n            return 'yt-grey-solid';\n    }\n};\n\nexport const getOutlineClasses = (state: Appearance | State | undefined): string => {\n    switch (state) {\n        case 'information':\n        case 'primary':\n            return 'yt-blue-inverted';\n\n        case 'warning':\n            return 'yt-yellow-inverted';\n\n        case 'error':\n        case 'danger':\n            return 'yt-red-inverted';\n\n        case 'success':\n            return 'yt-green-inverted';\n\n        default:\n            return 'yt-grey-inverted';\n    }\n};\n"],"names":["getStateClasses","value","getOutlineClasses","state"],"mappings":"MAqBaA,eAAe,GAAIC,KAAwB;EACpD,QAAQA,KAAK;IACT,KAAK,aAAa;MACd,OAAO,eAAe;IAE1B,KAAK,SAAS;MACV,OAAO,iBAAiB;IAE5B,KAAK,OAAO;MACR,OAAO,cAAc;IAEzB,KAAK,SAAS;MACV,OAAO,gBAAgB;IAE3B;MACI,OAAO,eAAe;;AAElC;MAEaC,iBAAiB,GAAIC,KAAqC;EACnE,QAAQA,KAAK;IACT,KAAK,aAAa;IAClB,KAAK,SAAS;MACV,OAAO,kBAAkB;IAE7B,KAAK,SAAS;MACV,OAAO,oBAAoB;IAE/B,KAAK,OAAO;IACZ,KAAK,QAAQ;MACT,OAAO,iBAAiB;IAE5B,KAAK,SAAS;MACV,OAAO,mBAAmB;IAE9B;MACI,OAAO,kBAAkB;;AAErC;;;;"}
+{"version":3,"file":"taillwind.js","sources":["../../../../../../src/utils/taillwind.ts"],"sourcesContent":["import { Color, State } from '../types';\n\nexport const AVAILABLE_COLORS = [\n    'green',\n    'yellow',\n    'red',\n    'blue',\n    'purple',\n    'brown',\n    'pink',\n    'orange',\n    'grey',\n    'transparent',\n] as const;\n\nexport const getColorByState = (state: State | undefined): Color => {\n    switch (state) {\n        case 'information':\n            return 'blue';\n        case 'warning':\n            return 'yellow';\n        case 'error':\n            return 'red';\n        case 'success':\n            return 'green';\n        default:\n            return 'grey';\n    }\n};\n\nexport const getOutlineColorShadeClasses = (state: Color | undefined): string => {\n    switch (state) {\n        case 'green':\n            return 'border-green-700 text-green-700';\n        case 'yellow':\n            return 'border-yellow-700 text-yellow-700';\n        case 'red':\n            return 'border-red-500 text-red-500';\n        case 'blue':\n            return 'border-blue-500 text-blue-500';\n        case 'purple':\n            return 'border-purple-700 text-purple-700';\n        case 'brown':\n            return 'border-brown-700 text-brown-700';\n        case 'pink':\n            return 'border-pink-700 text-pink-700';\n        case 'orange':\n            return 'border-orange-700 text-orange-700';\n        case 'transparent':\n        case 'grey':\n        default:\n            return 'border-grey-700 text-grey-700';\n    }\n};\n\nexport const getSubtleColorShadeClasses = (value: Color | undefined): string => {\n    switch (value) {\n        case 'green':\n            return 'wcag-green-100';\n        case 'yellow':\n            return 'wcag-yellow-100';\n        case 'red':\n            return 'wcag-red-100';\n        case 'blue':\n            return 'wcag-blue-100';\n        case 'purple':\n            return 'wcag-purple-100';\n        case 'brown':\n            return 'wcag-brown-100';\n        case 'pink':\n            return 'wcag-pink-100';\n        case 'orange':\n            return 'wcag-orange-100';\n        case 'transparent':\n            return 'wcag-transparent';\n        case 'grey':\n        default:\n            return 'wcag-grey-200';\n    }\n};\n\nexport const getColorShadeClasses = (value: Color | undefined): string => {\n    switch (value) {\n        case 'green':\n            return 'wcag-green-700';\n        case 'yellow':\n            return 'wcag-yellow-500';\n        case 'red':\n            return 'wcag-red-500';\n        case 'blue':\n            return 'wcag-blue-500';\n        case 'purple':\n            return 'wcag-purple-700';\n        case 'brown':\n            return 'wcag-brown-700';\n        case 'pink':\n            return 'wcag-pink-500';\n        case 'orange':\n            return 'wcag-orange-700';\n        case 'transparent':\n            return 'wcag-transparent';\n        case 'grey':\n        default:\n            return 'wcag-grey-700';\n    }\n};\n"],"names":["AVAILABLE_COLORS","getColorByState","state","getOutlineColorShadeClasses","getSubtleColorShadeClasses","value","getColorShadeClasses"],"mappings":"MAEaA,gBAAgB,GAAG,CAC5B,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,EACN,aAAa;MAGJC,eAAe,GAAIC,KAAwB;EACpD,QAAQA,KAAK;IACT,KAAK,aAAa;MACd,OAAO,MAAM;IACjB,KAAK,SAAS;MACV,OAAO,QAAQ;IACnB,KAAK,OAAO;MACR,OAAO,KAAK;IAChB,KAAK,SAAS;MACV,OAAO,OAAO;IAClB;MACI,OAAO,MAAM;;AAEzB;MAEaC,2BAA2B,GAAID,KAAwB;EAChE,QAAQA,KAAK;IACT,KAAK,OAAO;MACR,OAAO,iCAAiC;IAC5C,KAAK,QAAQ;MACT,OAAO,mCAAmC;IAC9C,KAAK,KAAK;MACN,OAAO,6BAA6B;IACxC,KAAK,MAAM;MACP,OAAO,+BAA+B;IAC1C,KAAK,QAAQ;MACT,OAAO,mCAAmC;IAC9C,KAAK,OAAO;MACR,OAAO,iCAAiC;IAC5C,KAAK,MAAM;MACP,OAAO,+BAA+B;IAC1C,KAAK,QAAQ;MACT,OAAO,mCAAmC;IAC9C,KAAK,aAAa;IAClB,KAAK,MAAM;IACX;MACI,OAAO,+BAA+B;;AAElD;MAEaE,0BAA0B,GAAIC,KAAwB;EAC/D,QAAQA,KAAK;IACT,KAAK,OAAO;MACR,OAAO,gBAAgB;IAC3B,KAAK,QAAQ;MACT,OAAO,iBAAiB;IAC5B,KAAK,KAAK;MACN,OAAO,cAAc;IACzB,KAAK,MAAM;MACP,OAAO,eAAe;IAC1B,KAAK,QAAQ;MACT,OAAO,iBAAiB;IAC5B,KAAK,OAAO;MACR,OAAO,gBAAgB;IAC3B,KAAK,MAAM;MACP,OAAO,eAAe;IAC1B,KAAK,QAAQ;MACT,OAAO,iBAAiB;IAC5B,KAAK,aAAa;MACd,OAAO,kBAAkB;IAC7B,KAAK,MAAM;IACX;MACI,OAAO,eAAe;;AAElC;MAEaC,oBAAoB,GAAID,KAAwB;EACzD,QAAQA,KAAK;IACT,KAAK,OAAO;MACR,OAAO,gBAAgB;IAC3B,KAAK,QAAQ;MACT,OAAO,iBAAiB;IAC5B,KAAK,KAAK;MACN,OAAO,cAAc;IACzB,KAAK,MAAM;MACP,OAAO,eAAe;IAC1B,KAAK,QAAQ;MACT,OAAO,iBAAiB;IAC5B,KAAK,OAAO;MACR,OAAO,gBAAgB;IAC3B,KAAK,MAAM;MACP,OAAO,eAAe;IAC1B,KAAK,QAAQ;MACT,OAAO,iBAAiB;IAC5B,KAAK,aAAa;MACd,OAAO,kBAAkB;IAC7B,KAAK,MAAM;IACX;MACI,OAAO,eAAe;;AAElC;;;;"}

package/dist/hooks/useIsHoverStatePaused.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useIsHoverStatePaused: () => [boolean, React.Dispatch<React.SetStateAction<boolean>>];

package/dist/index.css

@@ -167,6 +167,10 @@
         @apply invisible;
     }
 
+    .wcag-transparent {
+        @apply bg-black/[0.08] text-black;
+    }
+
     @keyframes fade-in {
         from {
             @apply opacity-0;
@@ -362,8 +366,7 @@
     }
 }
 
-.yt-grey-solid [data-taco='spinner'] svg circle,
-.yt-yellow-solid [data-taco='spinner'] svg circle {
+.yt-grey-solid [data-taco='spinner'] svg circle {
     stroke: theme('colors.grey.700');
 }
 
@@ -373,6 +376,10 @@
     stroke: theme('colors.white');
 }
 
+.yt-yellow-solid svg circle {
+    stroke: theme('colors.black');
+}
+
 .yt-blue-inverted svg circle {
     stroke: theme('colors.blue.500');
 }
@@ -393,6 +400,11 @@
     stroke: theme('colors.grey.700');
 }
 
+[class*='wcag-'] svg circle,
+[class*='text-'] svg circle {
+    stroke: currentColor;
+}
+
 [data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul,
 [data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul:hover {
     @apply border-blue-500;

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 import './css/global.css';
+export * from './components/Alert/Alert';
 export * from './components/AlertDialog/AlertDialog';
 export * from './components/Accordion/Accordion';
 export * from './components/Backdrop/Backdrop';
 export * from './components/Badge/Badge';
+export * from './components/BadgeIcon/BadgeIcon';
 export * from './components/Banner/Banner';
 export * from './components/Button/Button';
 export * from './components/Calendar/Calendar';