@luminescent/ui 1.1.1 → 1.1.4

package/lib/components/bg.js

@@ -22,7 +22,7 @@ export default function ({ matchUtilities, theme }) {
             const textColor = shades[index - 5 < 0 ? shades.length - 1 : index - 5] || shades[index + 5 > shades.length - 1 ? 0 : index + 5];
             return {
                 background: (_a = theme(`colors.${value}`)) !== null && _a !== void 0 ? _a : value,
-                color: (_b = theme(`colors.${textColor}`)) !== null && _b !== void 0 ? _b : 'inherit',
+                color: textColor == value ? 'inherit' : (_b = theme(`colors.${textColor}`)) !== null && _b !== void 0 ? _b : 'inherit',
                 border: `1px solid ${(_d = (_c = theme(`colors.${borderColor !== null && borderColor !== void 0 ? borderColor : value}`)) !== null && _c !== void 0 ? _c : borderColor) !== null && _d !== void 0 ? _d : value}`,
                 outline: 'none',
                 '&:focus': {

package/lib/components/btn.js

@@ -1,7 +1,9 @@
+export const defaultClasses = 'lum-pad-md text-base lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md';
 export default function ({ addComponents }) {
     addComponents({
         '.lum-btn': {
             '@apply flex items-center gap-3 motion-safe:transition ease-in-out disabled:opacity-50 hover:drop-shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none text-center': {},
+            [`@apply ${defaultClasses}`]: {},
         },
     });
 }

package/lib/components/card.js

@@ -1,7 +1,9 @@
+export const defaultClasses = 'lum-bg-gray-900 lum-pad-equal-4xl rounded-lg';
 export default function ({ addComponents }) {
     addComponents({
         '.lum-card': {
             '@apply flex flex-col gap-3 motion-safe:transition ease-in-out whitespace-nowrap': {},
+            [`@apply ${defaultClasses}`]: {},
         },
     });
 }

package/lib/components/input.js

@@ -1,7 +1,9 @@
+export const defaultClasses = 'lum-pad-sm text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md';
 export default function ({ addComponents }) {
     addComponents({
         '.lum-input': {
             '@apply flex motion-safe:transition ease-in-out disabled:opacity-50 hover:drop-shadow-lg whitespace-nowrap touch-manipulation select-none': {},
+            [`@apply ${defaultClasses}`]: {},
         },
     });
 }

package/lib/components/pad.js

@@ -1,58 +1,24 @@
+const padding = {
+    xs: ['2.5', '1.5'],
+    sm: ['3', '2'],
+    md: ['4', '2'],
+    lg: ['7', '4'],
+    xl: ['8', '4'],
+    '2xl': ['10', '5'],
+    '3xl': ['12', '6'],
+    '4xl': ['14', '7'],
+    '5xl': ['16', '8'],
+};
 export default function ({ addComponents }) {
-    addComponents({
-        '.lum-pad-xs': {
-            '@apply px-2.5 py-1.5': {},
-            '&.lum-pad-equal': {
-                '@apply p-1.5': {},
-            },
-        },
-        '.lum-pad-sm': {
-            '@apply px-3 py-2': {},
-            '&.lum-pad-equal': {
-                '@apply p-2': {},
-            },
-        },
-        '.lum-pad-md': {
-            '@apply px-4 py-2': {},
-            '&.lum-pad-equal': {
-                '@apply p-2': {},
-            },
-        },
-        '.lum-pad-lg': {
-            '@apply px-7 py-4': {},
-            '&.lum-pad-equal': {
-                '@apply p-4': {},
-            },
-        },
-        '.lum-pad-xl': {
-            '@apply px-8 py-4': {},
-            '&.lum-pad-equal': {
-                '@apply p-4': {},
-            },
-        },
-        '.lum-pad-2xl': {
-            '@apply px-10 py-5': {},
-            '&.lum-pad-equal': {
-                '@apply p-5': {},
-            },
-        },
-        '.lum-pad-3xl': {
-            '@apply px-12 py-6': {},
-            '&.lum-pad-equal': {
-                '@apply p-6': {},
-            },
-        },
-        '.lum-pad-4xl': {
-            '@apply px-14 py-7': {},
-            '&.lum-pad-equal': {
-                '@apply p-7': {},
-            },
-        },
-        '.lum-pad-5xl': {
-            '@apply px-16 py-8': {},
-            '&.lum-pad-equal': {
-                '@apply p-8': {},
-            },
-        },
+    const classes = {};
+    Object.keys(padding).forEach((key) => {
+        const [x, y] = padding[key];
+        classes[`.lum-pad-${key}`] = {
+            [`@apply px-${x} py-${y}`]: {},
+        };
+        classes[`.lum-pad-equal-${key}`] = {
+            [`@apply p-${y}`]: {},
+        };
     });
+    addComponents(classes);
 }