npm - @sk-web-gui/core - Versions diffs - 0.1.89 → 0.1.90 - Mend

@sk-web-gui/core 0.1.89 → 0.1.90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/cjs/components/button.js +12 -51
package/dist/cjs/components/button.js.map +1 -1
package/dist/esm/components/button.js +10 -78
package/dist/esm/components/button.js.map +1 -1
package/package.json +2 -2
package/src/components/button.js +8 -84

package/dist/cjs/components/button.js CHANGED Viewed

@@ -39,8 +39,8 @@ function buttonSolid(colors) {
         }
       },
       '&.btn': {
-        '&-disabled': {
-          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+        '&-disabled, &[aria-disabled="true"]': {
+          '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},
           '&.active': {
             '@apply border-gray-stroke': {}
           }
@@ -82,8 +82,8 @@ function buttonOutline(colors) {
       return _extends({}, styles, (_extends3 = {}, _extends3["&[data-color=\"" + color + "\"]"] = (_ref2 = {}, _ref2["@apply border-current"] = {}, _ref2["@apply text-" + color + "-600 bg-transparent"] = {}, _ref2["@apply hover:text-white hover:bg-" + color + "-active hover:border-" + color + "-active"] = {}, _ref2['&.active'] = (_active2 = {}, _active2["@apply text-white bg-" + color + "-active border-" + color + "-active"] = {}, _active2["@apply dark:bg-" + color + "-200"] = {}, _active2["@apply dark:bg-opacity-15"] = {}, _active2), _ref2["@apply focus-visible:border-" + color + "-500"] = {}, _ref2["@apply focus-visible:ring-" + color + "-500"] = {}, _ref2["@apply active:bg-" + color + "-100"] = {}, _ref2["@apply dark:border-" + color + "-200"] = {}, _ref2["@apply dark:text-" + color + "-200 dark:bg-transparent"] = {}, _ref2["@apply dark:border-" + color + "-300"] = {}, _ref2["@apply dark:hover:bg-" + color + "-200"] = {}, _ref2["@apply dark:hover:bg-opacity-15"] = {}, _ref2["@apply dark:focus-visible:border-" + color + "-500"] = {}, _ref2["@apply dark:focus-visible:ring-" + color + "-500"] = {}, _ref2["@apply dark:active:bg-" + color + "-200"] = {}, _ref2["@apply dark:active:bg-opacity-25"] = {}, _ref2), _extends3));
     }, {}), {
       '&.btn': {
-        '&-disabled': {
-          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+        '&-disabled, &[aria-disabled="true"]': {
+          '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},
           '&.active': {
             '@apply border-gray-stroke': {}
           }
@@ -95,51 +95,12 @@ function buttonOutline(colors) {
 function buttonGhost(colors) {
   return {
     '&-ghost': _extends({
-      '@apply text-body bg-transparent': {},
-      '@apply hover:bg-neutral-100': {},
       /* focus */
       '@apply focus-visible:z-base': {},
-      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
-      /* active */
-      '@apply active:bg-neutral-200': {},
-      /* dark mode */
-      '@apply dark:text-neutral-100 dark:bg-transparent': {},
-      /* dark hover */
-      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
-      /* dark active */
-      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-400': {}
+      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {}
     }, colors.reduce(function (styles, color) {
       var _ref3, _extends4;
-      return _extends({}, styles, (_extends4 = {}, _extends4["&[data-color=\"" + color + "\"]"] = (_ref3 = {}, _ref3["@apply text-" + color + "-600"] = {}, _ref3["@apply hover:bg-" + color + "-50"] = {}, _ref3["@apply focus-visible:ring-" + color + "-500"] = {}, _ref3["@apply active:bg-" + color + "-100"] = {}, _ref3["@apply dark:text-" + color + "-200 dark:bg-transparent"] = {}, _ref3["@apply dark:border-" + color + "-300 dark:hover:bg-" + color + "-200"] = {}, _ref3["@apply dark:hover:bg-opacity-15"] = {}, _ref3["@apply dark:active:bg-" + color + "-200"] = {}, _ref3["@apply dark:active:bg-opacity-25"] = {}, _ref3), _extends4));
-    }, {}))
-  };
-}
-function buttonLight(colors) {
-  return {
-    '&-light': _extends({
-      '@apply shadow-sm': {},
-      '@apply border border-transparent': {},
-      '@apply text-body bg-neutral-100': {},
-      /* hover */
-      '@apply hover:bg-neutral-200': {},
-      /* focus */
-      '@apply focus-visible:z-base': {},
-      '@apply focus-visible:border-primary-500': {},
-      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
-      /* active */
-      '@apply active:bg-neutral-300': {},
-      /* dark mode */
-      '@apply dark:border-transparent': {},
-      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
-      /* dark hover */
-      '@apply dark:hover:bg-neutral-600': {},
-      /* dark focus */
-      '@apply dark:focus-visible:border-primary-500': {},
-      /* dark active */
-      '@apply dark:active:bg-neutral-600': {}
-    }, colors.reduce(function (styles, color) {
-      var _ref4, _extends5;
-      return _extends({}, styles, (_extends5 = {}, _extends5["&[data-color=\"" + color + "\"]"] = (_ref4 = {}, _ref4["@apply text-" + color + "-600 bg-" + color + "-50"] = {}, _ref4["@apply hover:bg-" + color + "-100"] = {}, _ref4["@apply focus-visible:border-" + color + "-500"] = {}, _ref4["@apply focus-visible:ring-" + color + "-500"] = {}, _ref4["@apply active:bg-" + color + "-200"] = {}, _ref4["@apply dark:text-" + color + "-300 dark:bg-" + color + "-500"] = {}, _ref4["@apply dark:bg-opacity-15"] = {}, _ref4["@apply dark:hover:bg-" + color + "-500"] = {}, _ref4["@apply dark:hover:bg-opacity-25"] = {}, _ref4["@apply dark:focus-visible:border-" + color + "-500"] = {}, _ref4["@apply dark:focus-visible:ring-" + color + "-500"] = {}, _ref4["@apply dark:active:bg-" + color + "-500"] = {}, _ref4["@apply dark:active:bg-opacity-30"] = {}, _ref4), _extends5));
+      return _extends({}, styles, (_extends4 = {}, _extends4["&[data-color=\"" + color + "\"]"] = (_ref3 = {}, _ref3["@apply focus-visible:ring-" + color + "-500"] = {}, _ref3), _extends4));
     }, {}))
   };
 }
@@ -155,8 +116,8 @@ function buttonLink(colors) {
       '@apply dark:text-neutral-200': {},
       '@apply dark:active:text-neutral-500': {}
     }, colors.reduce(function (styles, color) {
-      var _ref5, _extends6;
-      return _extends({}, styles, (_extends6 = {}, _extends6["&[data-color=\"" + color + "\"]"] = (_ref5 = {}, _ref5["@apply text-" + color + "-600 active:text-" + color + "-700"] = {}, _ref5["@apply focus-visible:ring-" + color + "-500"] = {}, _ref5["@apply dark:text-" + color + "-200"] = {}, _ref5["@apply dark:active:text-" + color + "-500"] = {}, _ref5), _extends6));
+      var _ref4, _extends5;
+      return _extends({}, styles, (_extends5 = {}, _extends5["&[data-color=\"" + color + "\"]"] = (_ref4 = {}, _ref4["@apply text-" + color + "-600 active:text-" + color + "-700"] = {}, _ref4["@apply focus-visible:ring-" + color + "-500"] = {}, _ref4["@apply dark:text-" + color + "-200"] = {}, _ref4["@apply dark:active:text-" + color + "-500"] = {}, _ref4), _extends5));
     }, {}))
   };
 }
@@ -198,16 +159,16 @@ module.exports = Button = function Button(colors) {
       },
       // State
-      '&-disabled': {
-        '@apply disabled:shadow-none disabled:cursor-not-allowed': {},
-        '@apply disabled:text-gray disabled:bg-gray-light !important': {}
+      '&-disabled, &[aria-disabled="true"]': {
+        '@apply shadow-none disabled:shadow-none disabled:cursor-not-allowed cursor-not-allowed': {},
+        '@apply disabled:text-gray text-gray disabled:bg-gray-light bg-gray-light !important': {}
       },
       '.MuiSvgIcon-root': {
         fontSize: '1.5em',
         width: '1em',
         height: '1em'
       }
-    }, buttonSolid(colors), buttonOutline(colors), buttonLink(colors)),
+    }, buttonSolid(colors), buttonOutline(colors), buttonGhost(colors), buttonLink(colors)),
     '.btn-has-icon': {
       '&-left .MuiSvgIcon-root': {
         '@apply mr-sm': {}

package/dist/cjs/components/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","names":["buttonSolid","colors","_extends","reduce","styles","color","_active","_ref","_extends2","buttonOutline","_active2","_ref2","_extends3","buttonGhost","_ref3","_extends4","buttonLight","_ref4","_extends5","buttonLink","_ref5","_extends6","module","exports","Button","transitionProperty","borderRadius","minHeight","maxHeight","fontSize","width","height","minWidth","maxWidth"],"sources":["../../../src/components/button.js"],"sourcesContent":["function buttonSolid(colors) {\r\n return {\r\n '&-solid': {\r\n //\"@apply text-\": {},\r\n '@apply font-semibold border border-gray-stroke': {},\r\n '@apply text-body bg-white': {},\r\n /* hover /\r\n '@apply hover:text-white hover:bg-hover hover:border-primary-active': {},\r\n / keyboard active /\r\n '&.active': {\r\n '@apply text-white bg-hover border-primary-active': {},\r\n / dark /\r\n '@apply dark:border-hover dark:bg-neutral-600': {},\r\n },\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:border-primary': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-black': {},\r\n / active /\r\n '@apply active:bg-hover active:text-white': {},\r\n\r\n / dark mode /\r\n '@apply dark:border-neutral-600': {},\r\n '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n / dark hover /\r\n '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},\r\n / dark focus /\r\n '@apply dark:focus-visible:border-primary-500': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-900 dark:active:border-neutral-600': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n //[`@apply border-${color}`]: {},\r\n [`@apply text-white bg-${color}`]: {},\r\n // hover\r\n [`@apply hover:text-white hover:bg-${color}-active`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply text-white bg-${color}-active`]: {},\r\n },\r\n\r\n [`@apply active:text-white active:bg-${color}-active`]: {},\r\n [`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},\r\n\r\n // focus\r\n //[`@apply focus-visible:bg-${color}-700`]: {},\r\n //[`@apply focus-visible:border-${color}-500`]: {},\r\n //[`@apply focus-visible:ring-${color}-500`]: {},\r\n // active\r\n //[`@apply active:bg-${color}-600`]: {},\r\n // dark mode\r\n //[`@apply dark:border-${color}-500`]: {},\r\n //[`@apply dark:bg-${color}-600`]: {},\r\n // dark hover\r\n //[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},\r\n // dark focus\r\n //[`@apply dark:focus-visible:border-${color}-500`]: {},\r\n //[`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n // dark active\r\n //[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='primary']\": {\r\n '@apply border-primary hover:border-primary-active': {},\r\n '&.active': {\r\n '@apply border-primary-active': {},\r\n },\r\n },\r\n\r\n '&.btn': {\r\n '&-disabled': {\r\n '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},\r\n '&.active': {\r\n '@apply border-gray-stroke': {},\r\n },\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonOutline(colors) {\r\n return {\r\n '&-outline': {\r\n '@apply font-semibold border border-gray-stroke': {},\r\n '@apply text-body bg-transparent': {},\r\n / hover /\r\n '@apply hover:text-white hover:bg-primary-active hover:border-primary-active': {},\r\n / keyboard active /\r\n '&.active': {\r\n '@apply text-white bg-primary-active border-primary-active': {},\r\n / dark keyboard active /\r\n '@apply dark:border-neutral-300 dark:bg-neutral-700': {},\r\n },\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:border-primary-500': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n / active /\r\n '@apply active:bg-neutral-200': {},\r\n / dark mode /\r\n '@apply dark:border-neutral-600': {},\r\n '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n / dark hover /\r\n '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n / dark focus /\r\n '@apply dark:focus-visible:border-primary-500': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-600 dark:active:border-neutral-600': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply border-current`]: {},\r\n [`@apply text-${color}-600 bg-transparent`]: {},\r\n / hover /\r\n [`@apply hover:text-white hover:bg-${color}-active hover:border-${color}-active`]: {},\r\n / keyboard active /\r\n '&.active': {\r\n [`@apply text-white bg-${color}-active border-${color}-active`]: {},\r\n\r\n / dark keyboard active /\r\n [`@apply dark:bg-${color}-200`]: {},\r\n [`@apply dark:bg-opacity-15`]: {},\r\n },\r\n / focus /\r\n [`@apply focus-visible:border-${color}-500`]: {},\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n / active /\r\n [`@apply active:bg-${color}-100`]: {},\r\n / dark mode /\r\n [`@apply dark:border-${color}-200`]: {},\r\n [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n [`@apply dark:border-${color}-300`]: {},\r\n / dark hover /\r\n [`@apply dark:hover:bg-${color}-200`]: {},\r\n [`@apply dark:hover:bg-opacity-15`]: {},\r\n / dark focus /\r\n [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n / dark active /\r\n [`@apply dark:active:bg-${color}-200`]: {},\r\n [`@apply dark:active:bg-opacity-25`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&.btn': {\r\n '&-disabled': {\r\n '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},\r\n '&.active': {\r\n '@apply border-gray-stroke': {},\r\n },\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonGhost(colors) {\r\n return {\r\n '&-ghost': {\r\n '@apply text-body bg-transparent': {},\r\n '@apply hover:bg-neutral-100': {},\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n / active /\r\n '@apply active:bg-neutral-200': {},\r\n / dark mode /\r\n '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n / dark hover /\r\n '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-600 dark:active:border-neutral-400': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-600`]: {},\r\n [`@apply hover:bg-${color}-50`]: {},\r\n / focus /\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n [`@apply active:bg-${color}-100`]: {},\r\n // dark colors\r\n [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n [`@apply dark:border-${color}-300 dark:hover:bg-${color}-200`]: {},\r\n [`@apply dark:hover:bg-opacity-15`]: {},\r\n [`@apply dark:active:bg-${color}-200`]: {},\r\n [`@apply dark:active:bg-opacity-25`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLight(colors) {\r\n return {\r\n '&-light': {\r\n '@apply shadow-sm': {},\r\n '@apply border border-transparent': {},\r\n '@apply text-body bg-neutral-100': {},\r\n / hover /\r\n '@apply hover:bg-neutral-200': {},\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:border-primary-500': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n / active /\r\n '@apply active:bg-neutral-300': {},\r\n / dark mode /\r\n '@apply dark:border-transparent': {},\r\n '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n / dark hover /\r\n '@apply dark:hover:bg-neutral-600': {},\r\n / dark focus /\r\n '@apply dark:focus-visible:border-primary-500': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-600': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-600 bg-${color}-50`]: {},\r\n / hover /\r\n [`@apply hover:bg-${color}-100`]: {},\r\n / focus /\r\n [`@apply focus-visible:border-${color}-500`]: {},\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n / active /\r\n [`@apply active:bg-${color}-200`]: {},\r\n / dark mode /\r\n [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},\r\n [`@apply dark:bg-opacity-15`]: {},\r\n / dark hover /\r\n [`@apply dark:hover:bg-${color}-500`]: {},\r\n [`@apply dark:hover:bg-opacity-25`]: {},\r\n / dark focus /\r\n [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n / dark active */\r\n [`@apply dark:active:bg-${color}-500`]: {},\r\n [`@apply dark:active:bg-opacity-30`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLink(colors) {\r\n return {\r\n '&-link': {\r\n '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n '&.active': {\r\n '@apply underline': {},\r\n },\r\n '@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n // dark colors\r\n '@apply dark:text-neutral-200': {},\r\n '@apply dark:active:text-neutral-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-600 active:text-${color}-700`]: {},\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n // dark colors\r\n [`@apply dark:text-${color}-200`]: {},\r\n [`@apply dark:active:text-${color}-500`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nmodule.exports = Button = (colors) => ({\r\n '.btn': {\r\n '@apply relative': {},\r\n '@apply m-0': {},\r\n '@apply px-[3.2rem]': {},\r\n '@apply py-0': {},\r\n '@apply rounded-[0.4rem] inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n '@apply font-medium leading-tight': {},\r\n transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n '@apply\tduration-75 ease-out': {},\r\n '@apply outline-none appearance-none cursor-base select-none whitespace-nowrap': {},\r\n '@apply focus-visible:outline-none': {},\r\n\r\n \"&[data-rounded='true']\": {\r\n borderRadius: '3.2rem',\r\n },\r\n\r\n // sizing\r\n '&-sm': {\r\n '@apply text-xs': {},\r\n minHeight: '4rem',\r\n maxHeight: '4rem',\r\n },\r\n\r\n '&-md': {\r\n '@apply text-sm': {},\r\n minHeight: '4.4rem',\r\n maxHeight: '4.4rem',\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base': {},\r\n minHeight: '4.8rem',\r\n maxHeight: '4.8rem',\r\n },\r\n '&-fit-content': {\r\n '@apply p-0': {},\r\n fontSize: 'inherit',\r\n },\r\n\r\n // State\r\n\r\n '&-disabled': {\r\n '@apply disabled:shadow-none disabled:cursor-not-allowed': {},\r\n '@apply disabled:text-gray disabled:bg-gray-light !important': {},\r\n },\r\n '.MuiSvgIcon-root': {\r\n fontSize: '1.5em',\r\n width: '1em',\r\n height: '1em',\r\n },\r\n\r\n // variants\r\n ...buttonSolid(colors),\r\n ...buttonOutline(colors),\r\n //...buttonGhost(colors),\r\n //...buttonLight(colors),\r\n ...buttonLink(colors),\r\n },\r\n '.btn-has-icon': {\r\n '&-left .MuiSvgIcon-root': {\r\n '@apply mr-sm': {},\r\n },\r\n '&-right .MuiSvgIcon-root': {\r\n '@apply ml-sm': {},\r\n },\r\n },\r\n '[data-icon=true]': {\r\n '@apply p-0': {},\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-full': {},\r\n },\r\n '&.btn-sm': {\r\n minWidth: '4rem',\r\n maxWidth: '4rem',\r\n },\r\n\r\n '&.btn-md': {\r\n minWidth: '4.4rem',\r\n maxWidth: '4.4rem',\r\n },\r\n\r\n '&.btn-lg': {\r\n minWidth: '4.8rem',\r\n maxWidth: '4.8rem',\r\n },\r\n '.btn-has-icon': {\r\n '&-left .MuiSvgIcon-root': {\r\n '@apply mr-0': {},\r\n },\r\n '&-right .MuiSvgIcon-root': {\r\n '@apply ml-0': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
1	+ {"version":3,"file":"button.js","names":["buttonSolid","colors","_extends","reduce","styles","color","_active","_ref","_extends2","buttonOutline","_active2","_ref2","_extends3","buttonGhost","_ref3","_extends4","buttonLink","_ref4","_extends5","module","exports","Button","transitionProperty","borderRadius","minHeight","maxHeight","fontSize","width","height","minWidth","maxWidth"],"sources":["../../../src/components/button.js"],"sourcesContent":["function buttonSolid(colors) {\r\n return {\r\n '&-solid': {\r\n //\"@apply text-\": {},\r\n '@apply font-semibold border border-gray-stroke': {},\r\n '@apply text-body bg-white': {},\r\n /* hover /\r\n '@apply hover:text-white hover:bg-hover hover:border-primary-active': {},\r\n / keyboard active /\r\n '&.active': {\r\n '@apply text-white bg-hover border-primary-active': {},\r\n / dark /\r\n '@apply dark:border-hover dark:bg-neutral-600': {},\r\n },\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:border-primary': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-black': {},\r\n / active /\r\n '@apply active:bg-hover active:text-white': {},\r\n\r\n / dark mode /\r\n '@apply dark:border-neutral-600': {},\r\n '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n / dark hover /\r\n '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},\r\n / dark focus /\r\n '@apply dark:focus-visible:border-primary-500': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-900 dark:active:border-neutral-600': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n //[`@apply border-${color}`]: {},\r\n [`@apply text-white bg-${color}`]: {},\r\n // hover\r\n [`@apply hover:text-white hover:bg-${color}-active`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply text-white bg-${color}-active`]: {},\r\n },\r\n\r\n [`@apply active:text-white active:bg-${color}-active`]: {},\r\n [`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},\r\n\r\n // focus\r\n //[`@apply focus-visible:bg-${color}-700`]: {},\r\n //[`@apply focus-visible:border-${color}-500`]: {},\r\n //[`@apply focus-visible:ring-${color}-500`]: {},\r\n // active\r\n //[`@apply active:bg-${color}-600`]: {},\r\n // dark mode\r\n //[`@apply dark:border-${color}-500`]: {},\r\n //[`@apply dark:bg-${color}-600`]: {},\r\n // dark hover\r\n //[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},\r\n // dark focus\r\n //[`@apply dark:focus-visible:border-${color}-500`]: {},\r\n //[`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n // dark active\r\n //[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='primary']\": {\r\n '@apply border-primary hover:border-primary-active': {},\r\n '&.active': {\r\n '@apply border-primary-active': {},\r\n },\r\n },\r\n\r\n '&.btn': {\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},\r\n '&.active': {\r\n '@apply border-gray-stroke': {},\r\n },\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonOutline(colors) {\r\n return {\r\n '&-outline': {\r\n '@apply font-semibold border border-gray-stroke': {},\r\n '@apply text-body bg-transparent': {},\r\n / hover /\r\n '@apply hover:text-white hover:bg-primary-active hover:border-primary-active': {},\r\n / keyboard active /\r\n '&.active': {\r\n '@apply text-white bg-primary-active border-primary-active': {},\r\n / dark keyboard active /\r\n '@apply dark:border-neutral-300 dark:bg-neutral-700': {},\r\n },\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:border-primary-500': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n / active /\r\n '@apply active:bg-neutral-200': {},\r\n / dark mode /\r\n '@apply dark:border-neutral-600': {},\r\n '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n / dark hover /\r\n '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n / dark focus /\r\n '@apply dark:focus-visible:border-primary-500': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-600 dark:active:border-neutral-600': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply border-current`]: {},\r\n [`@apply text-${color}-600 bg-transparent`]: {},\r\n / hover /\r\n [`@apply hover:text-white hover:bg-${color}-active hover:border-${color}-active`]: {},\r\n / keyboard active /\r\n '&.active': {\r\n [`@apply text-white bg-${color}-active border-${color}-active`]: {},\r\n\r\n / dark keyboard active /\r\n [`@apply dark:bg-${color}-200`]: {},\r\n [`@apply dark:bg-opacity-15`]: {},\r\n },\r\n / focus /\r\n [`@apply focus-visible:border-${color}-500`]: {},\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n / active /\r\n [`@apply active:bg-${color}-100`]: {},\r\n / dark mode /\r\n [`@apply dark:border-${color}-200`]: {},\r\n [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n [`@apply dark:border-${color}-300`]: {},\r\n / dark hover /\r\n [`@apply dark:hover:bg-${color}-200`]: {},\r\n [`@apply dark:hover:bg-opacity-15`]: {},\r\n / dark focus /\r\n [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n / dark active /\r\n [`@apply dark:active:bg-${color}-200`]: {},\r\n [`@apply dark:active:bg-opacity-25`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&.btn': {\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},\r\n '&.active': {\r\n '@apply border-gray-stroke': {},\r\n },\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonGhost(colors) {\r\n return {\r\n '&-ghost': {\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n / focus */\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLink(colors) {\r\n return {\r\n '&-link': {\r\n '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n '&.active': {\r\n '@apply underline': {},\r\n },\r\n '@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n // dark colors\r\n '@apply dark:text-neutral-200': {},\r\n '@apply dark:active:text-neutral-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-600 active:text-${color}-700`]: {},\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n // dark colors\r\n [`@apply dark:text-${color}-200`]: {},\r\n [`@apply dark:active:text-${color}-500`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nmodule.exports = Button = (colors) => ({\r\n '.btn': {\r\n '@apply relative': {},\r\n '@apply m-0': {},\r\n '@apply px-[3.2rem]': {},\r\n '@apply py-0': {},\r\n '@apply rounded-[0.4rem] inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n '@apply font-medium leading-tight': {},\r\n transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n '@apply\tduration-75 ease-out': {},\r\n '@apply outline-none appearance-none cursor-base select-none whitespace-nowrap': {},\r\n '@apply focus-visible:outline-none': {},\r\n\r\n \"&[data-rounded='true']\": {\r\n borderRadius: '3.2rem',\r\n },\r\n\r\n // sizing\r\n '&-sm': {\r\n '@apply text-xs': {},\r\n minHeight: '4rem',\r\n maxHeight: '4rem',\r\n },\r\n\r\n '&-md': {\r\n '@apply text-sm': {},\r\n minHeight: '4.4rem',\r\n maxHeight: '4.4rem',\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base': {},\r\n minHeight: '4.8rem',\r\n maxHeight: '4.8rem',\r\n },\r\n '&-fit-content': {\r\n '@apply p-0': {},\r\n fontSize: 'inherit',\r\n },\r\n\r\n // State\r\n\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply shadow-none disabled:shadow-none disabled:cursor-not-allowed cursor-not-allowed': {},\r\n '@apply disabled:text-gray text-gray disabled:bg-gray-light bg-gray-light !important': {},\r\n },\r\n '.MuiSvgIcon-root': {\r\n fontSize: '1.5em',\r\n width: '1em',\r\n height: '1em',\r\n },\r\n\r\n // variants\r\n ...buttonSolid(colors),\r\n ...buttonOutline(colors),\r\n ...buttonGhost(colors),\r\n ...buttonLink(colors),\r\n },\r\n '.btn-has-icon': {\r\n '&-left .MuiSvgIcon-root': {\r\n '@apply mr-sm': {},\r\n },\r\n '&-right .MuiSvgIcon-root': {\r\n '@apply ml-sm': {},\r\n },\r\n },\r\n '[data-icon=true]': {\r\n '@apply p-0': {},\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-full': {},\r\n },\r\n '&.btn-sm': {\r\n minWidth: '4rem',\r\n maxWidth: '4rem',\r\n },\r\n\r\n '&.btn-md': {\r\n minWidth: '4.4rem',\r\n maxWidth: '4.4rem',\r\n },\r\n\r\n '&.btn-lg': {\r\n minWidth: '4.8rem',\r\n maxWidth: '4.8rem',\r\n },\r\n '.btn-has-icon': {\r\n '&-left .MuiSvgIcon-root': {\r\n '@apply mr-0': {},\r\n },\r\n '&-right .MuiSvgIcon-root': {\r\n '@apply ml-0': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}

package/dist/esm/components/button.js CHANGED Viewed

@@ -66,8 +66,8 @@ function buttonSolid(colors) {
         }
       },
       '&.btn': {
-        '&-disabled': {
-          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+        '&-disabled, &[aria-disabled="true"]': {
+          '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},
           '&.active': {
             '@apply border-gray-stroke': {}
           }
@@ -138,8 +138,8 @@ function buttonOutline(colors) {
       }
     }), {}), {
       '&.btn': {
-        '&-disabled': {
-          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+        '&-disabled, &[aria-disabled="true"]': {
+          '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},
           '&.active': {
             '@apply border-gray-stroke': {}
           }
@@ -151,81 +151,13 @@ function buttonOutline(colors) {
 function buttonGhost(colors) {
   return {
     '&-ghost': _extends({
-      '@apply text-body bg-transparent': {},
-      '@apply hover:bg-neutral-100': {},
-      /* focus */
-      '@apply focus-visible:z-base': {},
-      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
-      /* active */
-      '@apply active:bg-neutral-200': {},
-      /* dark mode */
-      '@apply dark:text-neutral-100 dark:bg-transparent': {},
-      /* dark hover */
-      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
-      /* dark active */
-      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-400': {}
-    }, colors.reduce((styles, color) => _extends({}, styles, {
-      ["&[data-color=\"" + color + "\"]"]: {
-        ["@apply text-" + color + "-600"]: {},
-        ["@apply hover:bg-" + color + "-50"]: {},
-        /* focus */
-        ["@apply focus-visible:ring-" + color + "-500"]: {},
-        ["@apply active:bg-" + color + "-100"]: {},
-        // dark colors
-        ["@apply dark:text-" + color + "-200 dark:bg-transparent"]: {},
-        ["@apply dark:border-" + color + "-300 dark:hover:bg-" + color + "-200"]: {},
-        ["@apply dark:hover:bg-opacity-15"]: {},
-        ["@apply dark:active:bg-" + color + "-200"]: {},
-        ["@apply dark:active:bg-opacity-25"]: {}
-      }
-    }), {}))
-  };
-}
-function buttonLight(colors) {
-  return {
-    '&-light': _extends({
-      '@apply shadow-sm': {},
-      '@apply border border-transparent': {},
-      '@apply text-body bg-neutral-100': {},
-      /* hover */
-      '@apply hover:bg-neutral-200': {},
       /* focus */
       '@apply focus-visible:z-base': {},
-      '@apply focus-visible:border-primary-500': {},
-      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
-      /* active */
-      '@apply active:bg-neutral-300': {},
-      /* dark mode */
-      '@apply dark:border-transparent': {},
-      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
-      /* dark hover */
-      '@apply dark:hover:bg-neutral-600': {},
-      /* dark focus */
-      '@apply dark:focus-visible:border-primary-500': {},
-      /* dark active */
-      '@apply dark:active:bg-neutral-600': {}
+      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {}
     }, colors.reduce((styles, color) => _extends({}, styles, {
       ["&[data-color=\"" + color + "\"]"]: {
-        ["@apply text-" + color + "-600 bg-" + color + "-50"]: {},
-        /* hover */
-        ["@apply hover:bg-" + color + "-100"]: {},
         /* focus */
-        ["@apply focus-visible:border-" + color + "-500"]: {},
-        ["@apply focus-visible:ring-" + color + "-500"]: {},
-        /* active */
-        ["@apply active:bg-" + color + "-200"]: {},
-        /* dark mode */
-        ["@apply dark:text-" + color + "-300 dark:bg-" + color + "-500"]: {},
-        ["@apply dark:bg-opacity-15"]: {},
-        /* dark hover */
-        ["@apply dark:hover:bg-" + color + "-500"]: {},
-        ["@apply dark:hover:bg-opacity-25"]: {},
-        /* dark focus */
-        ["@apply dark:focus-visible:border-" + color + "-500"]: {},
-        ["@apply dark:focus-visible:ring-" + color + "-500"]: {},
-        /* dark active */
-        ["@apply dark:active:bg-" + color + "-500"]: {},
-        ["@apply dark:active:bg-opacity-30"]: {}
+        ["@apply focus-visible:ring-" + color + "-500"]: {}
       }
     }), {}))
   };
@@ -289,16 +221,16 @@ module.exports = Button = colors => ({
     },
     // State
-    '&-disabled': {
-      '@apply disabled:shadow-none disabled:cursor-not-allowed': {},
-      '@apply disabled:text-gray disabled:bg-gray-light !important': {}
+    '&-disabled, &[aria-disabled="true"]': {
+      '@apply shadow-none disabled:shadow-none disabled:cursor-not-allowed cursor-not-allowed': {},
+      '@apply disabled:text-gray text-gray disabled:bg-gray-light bg-gray-light !important': {}
     },
     '.MuiSvgIcon-root': {
       fontSize: '1.5em',
       width: '1em',
       height: '1em'
     }
-  }, buttonSolid(colors), buttonOutline(colors), buttonLink(colors)),
+  }, buttonSolid(colors), buttonOutline(colors), buttonGhost(colors), buttonLink(colors)),
   '.btn-has-icon': {
     '&-left .MuiSvgIcon-root': {
       '@apply mr-sm': {}

package/dist/esm/components/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","names":["buttonSolid","colors","_extends","reduce","styles","color","buttonOutline","buttonGhost","buttonLight","buttonLink","module","exports","Button","transitionProperty","borderRadius","minHeight","maxHeight","fontSize","width","height","minWidth","maxWidth"],"sources":["../../../src/components/button.js"],"sourcesContent":["function buttonSolid(colors) {\r\n return {\r\n '&-solid': {\r\n //\"@apply text-\": {},\r\n '@apply font-semibold border border-gray-stroke': {},\r\n '@apply text-body bg-white': {},\r\n /* hover /\r\n '@apply hover:text-white hover:bg-hover hover:border-primary-active': {},\r\n / keyboard active /\r\n '&.active': {\r\n '@apply text-white bg-hover border-primary-active': {},\r\n / dark /\r\n '@apply dark:border-hover dark:bg-neutral-600': {},\r\n },\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:border-primary': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-black': {},\r\n / active /\r\n '@apply active:bg-hover active:text-white': {},\r\n\r\n / dark mode /\r\n '@apply dark:border-neutral-600': {},\r\n '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n / dark hover /\r\n '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},\r\n / dark focus /\r\n '@apply dark:focus-visible:border-primary-500': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-900 dark:active:border-neutral-600': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n //[`@apply border-${color}`]: {},\r\n [`@apply text-white bg-${color}`]: {},\r\n // hover\r\n [`@apply hover:text-white hover:bg-${color}-active`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply text-white bg-${color}-active`]: {},\r\n },\r\n\r\n [`@apply active:text-white active:bg-${color}-active`]: {},\r\n [`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},\r\n\r\n // focus\r\n //[`@apply focus-visible:bg-${color}-700`]: {},\r\n //[`@apply focus-visible:border-${color}-500`]: {},\r\n //[`@apply focus-visible:ring-${color}-500`]: {},\r\n // active\r\n //[`@apply active:bg-${color}-600`]: {},\r\n // dark mode\r\n //[`@apply dark:border-${color}-500`]: {},\r\n //[`@apply dark:bg-${color}-600`]: {},\r\n // dark hover\r\n //[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},\r\n // dark focus\r\n //[`@apply dark:focus-visible:border-${color}-500`]: {},\r\n //[`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n // dark active\r\n //[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='primary']\": {\r\n '@apply border-primary hover:border-primary-active': {},\r\n '&.active': {\r\n '@apply border-primary-active': {},\r\n },\r\n },\r\n\r\n '&.btn': {\r\n '&-disabled': {\r\n '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},\r\n '&.active': {\r\n '@apply border-gray-stroke': {},\r\n },\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonOutline(colors) {\r\n return {\r\n '&-outline': {\r\n '@apply font-semibold border border-gray-stroke': {},\r\n '@apply text-body bg-transparent': {},\r\n / hover /\r\n '@apply hover:text-white hover:bg-primary-active hover:border-primary-active': {},\r\n / keyboard active /\r\n '&.active': {\r\n '@apply text-white bg-primary-active border-primary-active': {},\r\n / dark keyboard active /\r\n '@apply dark:border-neutral-300 dark:bg-neutral-700': {},\r\n },\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:border-primary-500': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n / active /\r\n '@apply active:bg-neutral-200': {},\r\n / dark mode /\r\n '@apply dark:border-neutral-600': {},\r\n '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n / dark hover /\r\n '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n / dark focus /\r\n '@apply dark:focus-visible:border-primary-500': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-600 dark:active:border-neutral-600': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply border-current`]: {},\r\n [`@apply text-${color}-600 bg-transparent`]: {},\r\n / hover /\r\n [`@apply hover:text-white hover:bg-${color}-active hover:border-${color}-active`]: {},\r\n / keyboard active /\r\n '&.active': {\r\n [`@apply text-white bg-${color}-active border-${color}-active`]: {},\r\n\r\n / dark keyboard active /\r\n [`@apply dark:bg-${color}-200`]: {},\r\n [`@apply dark:bg-opacity-15`]: {},\r\n },\r\n / focus /\r\n [`@apply focus-visible:border-${color}-500`]: {},\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n / active /\r\n [`@apply active:bg-${color}-100`]: {},\r\n / dark mode /\r\n [`@apply dark:border-${color}-200`]: {},\r\n [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n [`@apply dark:border-${color}-300`]: {},\r\n / dark hover /\r\n [`@apply dark:hover:bg-${color}-200`]: {},\r\n [`@apply dark:hover:bg-opacity-15`]: {},\r\n / dark focus /\r\n [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n / dark active /\r\n [`@apply dark:active:bg-${color}-200`]: {},\r\n [`@apply dark:active:bg-opacity-25`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&.btn': {\r\n '&-disabled': {\r\n '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},\r\n '&.active': {\r\n '@apply border-gray-stroke': {},\r\n },\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonGhost(colors) {\r\n return {\r\n '&-ghost': {\r\n '@apply text-body bg-transparent': {},\r\n '@apply hover:bg-neutral-100': {},\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n / active /\r\n '@apply active:bg-neutral-200': {},\r\n / dark mode /\r\n '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n / dark hover /\r\n '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-600 dark:active:border-neutral-400': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-600`]: {},\r\n [`@apply hover:bg-${color}-50`]: {},\r\n / focus /\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n [`@apply active:bg-${color}-100`]: {},\r\n // dark colors\r\n [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n [`@apply dark:border-${color}-300 dark:hover:bg-${color}-200`]: {},\r\n [`@apply dark:hover:bg-opacity-15`]: {},\r\n [`@apply dark:active:bg-${color}-200`]: {},\r\n [`@apply dark:active:bg-opacity-25`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLight(colors) {\r\n return {\r\n '&-light': {\r\n '@apply shadow-sm': {},\r\n '@apply border border-transparent': {},\r\n '@apply text-body bg-neutral-100': {},\r\n / hover /\r\n '@apply hover:bg-neutral-200': {},\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:border-primary-500': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n / active /\r\n '@apply active:bg-neutral-300': {},\r\n / dark mode /\r\n '@apply dark:border-transparent': {},\r\n '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n / dark hover /\r\n '@apply dark:hover:bg-neutral-600': {},\r\n / dark focus /\r\n '@apply dark:focus-visible:border-primary-500': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-600': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-600 bg-${color}-50`]: {},\r\n / hover /\r\n [`@apply hover:bg-${color}-100`]: {},\r\n / focus /\r\n [`@apply focus-visible:border-${color}-500`]: {},\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n / active /\r\n [`@apply active:bg-${color}-200`]: {},\r\n / dark mode /\r\n [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},\r\n [`@apply dark:bg-opacity-15`]: {},\r\n / dark hover /\r\n [`@apply dark:hover:bg-${color}-500`]: {},\r\n [`@apply dark:hover:bg-opacity-25`]: {},\r\n / dark focus /\r\n [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n / dark active */\r\n [`@apply dark:active:bg-${color}-500`]: {},\r\n [`@apply dark:active:bg-opacity-30`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLink(colors) {\r\n return {\r\n '&-link': {\r\n '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n '&.active': {\r\n '@apply underline': {},\r\n },\r\n '@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n // dark colors\r\n '@apply dark:text-neutral-200': {},\r\n '@apply dark:active:text-neutral-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-600 active:text-${color}-700`]: {},\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n // dark colors\r\n [`@apply dark:text-${color}-200`]: {},\r\n [`@apply dark:active:text-${color}-500`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nmodule.exports = Button = (colors) => ({\r\n '.btn': {\r\n '@apply relative': {},\r\n '@apply m-0': {},\r\n '@apply px-[3.2rem]': {},\r\n '@apply py-0': {},\r\n '@apply rounded-[0.4rem] inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n '@apply font-medium leading-tight': {},\r\n transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n '@apply\tduration-75 ease-out': {},\r\n '@apply outline-none appearance-none cursor-base select-none whitespace-nowrap': {},\r\n '@apply focus-visible:outline-none': {},\r\n\r\n \"&[data-rounded='true']\": {\r\n borderRadius: '3.2rem',\r\n },\r\n\r\n // sizing\r\n '&-sm': {\r\n '@apply text-xs': {},\r\n minHeight: '4rem',\r\n maxHeight: '4rem',\r\n },\r\n\r\n '&-md': {\r\n '@apply text-sm': {},\r\n minHeight: '4.4rem',\r\n maxHeight: '4.4rem',\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base': {},\r\n minHeight: '4.8rem',\r\n maxHeight: '4.8rem',\r\n },\r\n '&-fit-content': {\r\n '@apply p-0': {},\r\n fontSize: 'inherit',\r\n },\r\n\r\n // State\r\n\r\n '&-disabled': {\r\n '@apply disabled:shadow-none disabled:cursor-not-allowed': {},\r\n '@apply disabled:text-gray disabled:bg-gray-light !important': {},\r\n },\r\n '.MuiSvgIcon-root': {\r\n fontSize: '1.5em',\r\n width: '1em',\r\n height: '1em',\r\n },\r\n\r\n // variants\r\n ...buttonSolid(colors),\r\n ...buttonOutline(colors),\r\n //...buttonGhost(colors),\r\n //...buttonLight(colors),\r\n ...buttonLink(colors),\r\n },\r\n '.btn-has-icon': {\r\n '&-left .MuiSvgIcon-root': {\r\n '@apply mr-sm': {},\r\n },\r\n '&-right .MuiSvgIcon-root': {\r\n '@apply ml-sm': {},\r\n },\r\n },\r\n '[data-icon=true]': {\r\n '@apply p-0': {},\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-full': {},\r\n },\r\n '&.btn-sm': {\r\n minWidth: '4rem',\r\n maxWidth: '4rem',\r\n },\r\n\r\n '&.btn-md': {\r\n minWidth: '4.4rem',\r\n maxWidth: '4.4rem',\r\n },\r\n\r\n '&.btn-lg': {\r\n minWidth: '4.8rem',\r\n maxWidth: '4.8rem',\r\n },\r\n '.btn-has-icon': {\r\n '&-left .MuiSvgIcon-root': {\r\n '@apply mr-0': {},\r\n },\r\n '&-right .MuiSvgIcon-root': {\r\n '@apply ml-0': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
1	+ {"version":3,"file":"button.js","names":["buttonSolid","colors","_extends","reduce","styles","color","buttonOutline","buttonGhost","buttonLink","module","exports","Button","transitionProperty","borderRadius","minHeight","maxHeight","fontSize","width","height","minWidth","maxWidth"],"sources":["../../../src/components/button.js"],"sourcesContent":["function buttonSolid(colors) {\r\n return {\r\n '&-solid': {\r\n //\"@apply text-\": {},\r\n '@apply font-semibold border border-gray-stroke': {},\r\n '@apply text-body bg-white': {},\r\n /* hover /\r\n '@apply hover:text-white hover:bg-hover hover:border-primary-active': {},\r\n / keyboard active /\r\n '&.active': {\r\n '@apply text-white bg-hover border-primary-active': {},\r\n / dark /\r\n '@apply dark:border-hover dark:bg-neutral-600': {},\r\n },\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:border-primary': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-black': {},\r\n / active /\r\n '@apply active:bg-hover active:text-white': {},\r\n\r\n / dark mode /\r\n '@apply dark:border-neutral-600': {},\r\n '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n / dark hover /\r\n '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},\r\n / dark focus /\r\n '@apply dark:focus-visible:border-primary-500': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-900 dark:active:border-neutral-600': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n //[`@apply border-${color}`]: {},\r\n [`@apply text-white bg-${color}`]: {},\r\n // hover\r\n [`@apply hover:text-white hover:bg-${color}-active`]: {},\r\n // keyboard active\r\n '&.active': {\r\n [`@apply text-white bg-${color}-active`]: {},\r\n },\r\n\r\n [`@apply active:text-white active:bg-${color}-active`]: {},\r\n [`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},\r\n\r\n // focus\r\n //[`@apply focus-visible:bg-${color}-700`]: {},\r\n //[`@apply focus-visible:border-${color}-500`]: {},\r\n //[`@apply focus-visible:ring-${color}-500`]: {},\r\n // active\r\n //[`@apply active:bg-${color}-600`]: {},\r\n // dark mode\r\n //[`@apply dark:border-${color}-500`]: {},\r\n //[`@apply dark:bg-${color}-600`]: {},\r\n // dark hover\r\n //[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},\r\n // dark focus\r\n //[`@apply dark:focus-visible:border-${color}-500`]: {},\r\n //[`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n // dark active\r\n //[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n \"&[data-color='primary']\": {\r\n '@apply border-primary hover:border-primary-active': {},\r\n '&.active': {\r\n '@apply border-primary-active': {},\r\n },\r\n },\r\n\r\n '&.btn': {\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},\r\n '&.active': {\r\n '@apply border-gray-stroke': {},\r\n },\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonOutline(colors) {\r\n return {\r\n '&-outline': {\r\n '@apply font-semibold border border-gray-stroke': {},\r\n '@apply text-body bg-transparent': {},\r\n / hover /\r\n '@apply hover:text-white hover:bg-primary-active hover:border-primary-active': {},\r\n / keyboard active /\r\n '&.active': {\r\n '@apply text-white bg-primary-active border-primary-active': {},\r\n / dark keyboard active /\r\n '@apply dark:border-neutral-300 dark:bg-neutral-700': {},\r\n },\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:border-primary-500': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n / active /\r\n '@apply active:bg-neutral-200': {},\r\n / dark mode /\r\n '@apply dark:border-neutral-600': {},\r\n '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n / dark hover /\r\n '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n / dark focus /\r\n '@apply dark:focus-visible:border-primary-500': {},\r\n / dark active /\r\n '@apply dark:active:bg-neutral-600 dark:active:border-neutral-600': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply border-current`]: {},\r\n [`@apply text-${color}-600 bg-transparent`]: {},\r\n / hover /\r\n [`@apply hover:text-white hover:bg-${color}-active hover:border-${color}-active`]: {},\r\n / keyboard active /\r\n '&.active': {\r\n [`@apply text-white bg-${color}-active border-${color}-active`]: {},\r\n\r\n / dark keyboard active /\r\n [`@apply dark:bg-${color}-200`]: {},\r\n [`@apply dark:bg-opacity-15`]: {},\r\n },\r\n / focus /\r\n [`@apply focus-visible:border-${color}-500`]: {},\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n / active /\r\n [`@apply active:bg-${color}-100`]: {},\r\n / dark mode /\r\n [`@apply dark:border-${color}-200`]: {},\r\n [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n [`@apply dark:border-${color}-300`]: {},\r\n / dark hover /\r\n [`@apply dark:hover:bg-${color}-200`]: {},\r\n [`@apply dark:hover:bg-opacity-15`]: {},\r\n / dark focus /\r\n [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n / dark active /\r\n [`@apply dark:active:bg-${color}-200`]: {},\r\n [`@apply dark:active:bg-opacity-25`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n\r\n '&.btn': {\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},\r\n '&.active': {\r\n '@apply border-gray-stroke': {},\r\n },\r\n },\r\n },\r\n },\r\n };\r\n}\r\n\r\nfunction buttonGhost(colors) {\r\n return {\r\n '&-ghost': {\r\n / focus /\r\n '@apply focus-visible:z-base': {},\r\n '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n / focus */\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nfunction buttonLink(colors) {\r\n return {\r\n '&-link': {\r\n '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n '&.active': {\r\n '@apply underline': {},\r\n },\r\n '@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n // dark colors\r\n '@apply dark:text-neutral-200': {},\r\n '@apply dark:active:text-neutral-500': {},\r\n\r\n ...colors.reduce(\r\n (styles, color) => ({\r\n ...styles,\r\n [`&[data-color=\"${color}\"]`]: {\r\n [`@apply text-${color}-600 active:text-${color}-700`]: {},\r\n [`@apply focus-visible:ring-${color}-500`]: {},\r\n // dark colors\r\n [`@apply dark:text-${color}-200`]: {},\r\n [`@apply dark:active:text-${color}-500`]: {},\r\n },\r\n }),\r\n {}\r\n ),\r\n },\r\n };\r\n}\r\n\r\nmodule.exports = Button = (colors) => ({\r\n '.btn': {\r\n '@apply relative': {},\r\n '@apply m-0': {},\r\n '@apply px-[3.2rem]': {},\r\n '@apply py-0': {},\r\n '@apply rounded-[0.4rem] inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n '@apply font-medium leading-tight': {},\r\n transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n '@apply\tduration-75 ease-out': {},\r\n '@apply outline-none appearance-none cursor-base select-none whitespace-nowrap': {},\r\n '@apply focus-visible:outline-none': {},\r\n\r\n \"&[data-rounded='true']\": {\r\n borderRadius: '3.2rem',\r\n },\r\n\r\n // sizing\r\n '&-sm': {\r\n '@apply text-xs': {},\r\n minHeight: '4rem',\r\n maxHeight: '4rem',\r\n },\r\n\r\n '&-md': {\r\n '@apply text-sm': {},\r\n minHeight: '4.4rem',\r\n maxHeight: '4.4rem',\r\n },\r\n\r\n '&-lg': {\r\n '@apply text-base': {},\r\n minHeight: '4.8rem',\r\n maxHeight: '4.8rem',\r\n },\r\n '&-fit-content': {\r\n '@apply p-0': {},\r\n fontSize: 'inherit',\r\n },\r\n\r\n // State\r\n\r\n '&-disabled, &[aria-disabled=\"true\"]': {\r\n '@apply shadow-none disabled:shadow-none disabled:cursor-not-allowed cursor-not-allowed': {},\r\n '@apply disabled:text-gray text-gray disabled:bg-gray-light bg-gray-light !important': {},\r\n },\r\n '.MuiSvgIcon-root': {\r\n fontSize: '1.5em',\r\n width: '1em',\r\n height: '1em',\r\n },\r\n\r\n // variants\r\n ...buttonSolid(colors),\r\n ...buttonOutline(colors),\r\n ...buttonGhost(colors),\r\n ...buttonLink(colors),\r\n },\r\n '.btn-has-icon': {\r\n '&-left .MuiSvgIcon-root': {\r\n '@apply mr-sm': {},\r\n },\r\n '&-right .MuiSvgIcon-root': {\r\n '@apply ml-sm': {},\r\n },\r\n },\r\n '[data-icon=true]': {\r\n '@apply p-0': {},\r\n \"&[data-rounded='true']\": {\r\n '@apply rounded-full': {},\r\n },\r\n '&.btn-sm': {\r\n minWidth: '4rem',\r\n maxWidth: '4rem',\r\n },\r\n\r\n '&.btn-md': {\r\n minWidth: '4.4rem',\r\n maxWidth: '4.4rem',\r\n },\r\n\r\n '&.btn-lg': {\r\n minWidth: '4.8rem',\r\n maxWidth: '4.8rem',\r\n },\r\n '.btn-has-icon': {\r\n '&-left .MuiSvgIcon-root': {\r\n '@apply mr-0': {},\r\n },\r\n '&-right .MuiSvgIcon-root': {\r\n '@apply ml-0': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.89",
+  "version": "0.1.90",
   "license": "MIT",
   "main": "src/index.js",
   "module": "dist/esm/index.js",
@@ -40,5 +40,5 @@
     "@sk-web-gui/theme": "0.1.14",
     "mini-svg-data-uri": "^1.4.4"
   },
-  "gitHead": "c34ffa09211bc344fff14ae3598af36758bbdab8"
+  "gitHead": "5b6d3cdfd0d6759a07a934b16faed307f7f7eb3b"
 }

package/src/components/button.js CHANGED Viewed

@@ -74,8 +74,8 @@ function buttonSolid(colors) {
       },
       '&.btn': {
-        '&-disabled': {
-          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+        '&-disabled, &[aria-disabled="true"]': {
+          '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},
           '&.active': {
             '@apply border-gray-stroke': {},
           },
@@ -154,8 +154,8 @@ function buttonOutline(colors) {
       ),
       '&.btn': {
-        '&-disabled': {
-          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+        '&-disabled, &[aria-disabled="true"]': {
+          '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},
           '&.active': {
             '@apply border-gray-stroke': {},
           },
@@ -168,91 +168,16 @@ function buttonOutline(colors) {
 function buttonGhost(colors) {
   return {
     '&-ghost': {
-      '@apply text-body bg-transparent': {},
-      '@apply hover:bg-neutral-100': {},
       /* focus */
       '@apply focus-visible:z-base': {},
       '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
-      /* active */
-      '@apply active:bg-neutral-200': {},
-      /* dark mode */
-      '@apply dark:text-neutral-100 dark:bg-transparent': {},
-      /* dark hover */
-      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
-      /* dark active */
-      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-400': {},
       ...colors.reduce(
         (styles, color) => ({
           ...styles,
           [`&[data-color="${color}"]`]: {
-            [`@apply text-${color}-600`]: {},
-            [`@apply hover:bg-${color}-50`]: {},
             /* focus */
             [`@apply focus-visible:ring-${color}-500`]: {},
-            [`@apply active:bg-${color}-100`]: {},
-            // dark colors
-            [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},
-            [`@apply dark:border-${color}-300 dark:hover:bg-${color}-200`]: {},
-            [`@apply dark:hover:bg-opacity-15`]: {},
-            [`@apply dark:active:bg-${color}-200`]: {},
-            [`@apply dark:active:bg-opacity-25`]: {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-function buttonLight(colors) {
-  return {
-    '&-light': {
-      '@apply shadow-sm': {},
-      '@apply border border-transparent': {},
-      '@apply text-body bg-neutral-100': {},
-      /* hover */
-      '@apply hover:bg-neutral-200': {},
-      /* focus */
-      '@apply focus-visible:z-base': {},
-      '@apply focus-visible:border-primary-500': {},
-      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
-      /* active */
-      '@apply active:bg-neutral-300': {},
-      /* dark mode */
-      '@apply dark:border-transparent': {},
-      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
-      /* dark hover */
-      '@apply dark:hover:bg-neutral-600': {},
-      /* dark focus */
-      '@apply dark:focus-visible:border-primary-500': {},
-      /* dark active */
-      '@apply dark:active:bg-neutral-600': {},
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply text-${color}-600 bg-${color}-50`]: {},
-            /* hover */
-            [`@apply hover:bg-${color}-100`]: {},
-            /* focus */
-            [`@apply focus-visible:border-${color}-500`]: {},
-            [`@apply focus-visible:ring-${color}-500`]: {},
-            /* active */
-            [`@apply active:bg-${color}-200`]: {},
-            /* dark mode */
-            [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},
-            [`@apply dark:bg-opacity-15`]: {},
-            /* dark hover */
-            [`@apply dark:hover:bg-${color}-500`]: {},
-            [`@apply dark:hover:bg-opacity-25`]: {},
-            /* dark focus */
-            [`@apply dark:focus-visible:border-${color}-500`]: {},
-            [`@apply dark:focus-visible:ring-${color}-500`]: {},
-            /* dark active */
-            [`@apply dark:active:bg-${color}-500`]: {},
-            [`@apply dark:active:bg-opacity-30`]: {},
           },
         }),
         {}
@@ -332,9 +257,9 @@ module.exports = Button = (colors) => ({
     // State
-    '&-disabled': {
-      '@apply disabled:shadow-none disabled:cursor-not-allowed': {},
-      '@apply disabled:text-gray disabled:bg-gray-light !important': {},
+    '&-disabled, &[aria-disabled="true"]': {
+      '@apply shadow-none disabled:shadow-none disabled:cursor-not-allowed cursor-not-allowed': {},
+      '@apply disabled:text-gray text-gray disabled:bg-gray-light bg-gray-light !important': {},
     },
     '.MuiSvgIcon-root': {
       fontSize: '1.5em',
@@ -345,8 +270,7 @@ module.exports = Button = (colors) => ({
     // variants
     ...buttonSolid(colors),
     ...buttonOutline(colors),
-    //...buttonGhost(colors),
-    //...buttonLight(colors),
+    ...buttonGhost(colors),
     ...buttonLink(colors),
   },
   '.btn-has-icon': {