flowbite-svelte 0.15.22 → 0.15.26

package/buttons/ColorShadowButton.svelte

@@ -1,33 +1,30 @@
 <script>export let textSize = 'text-sm';
 export let color = 'blue';
-let btnClass;
+let btnClass = `hover:bg-gradient-to-br focus:ring-4 shadow-lg dark:shadow-lg font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2 `;
 export let type = 'button';
-if (color === 'blue') {
-    btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-}
-else if (color === 'green') {
-    btnClass = `text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 shadow-lg shadow-green-500/50 dark:shadow-lg dark:shadow-green-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+if (color === 'green') {
+    btnClass += `text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 focus:ring-green-300 dark:focus:ring-green-800 shadow-green-500/50 dark:shadow-green-800/80`;
 }
 else if (color === 'cyan') {
-    btnClass = `text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 shadow-lg shadow-cyan-500/50 dark:shadow-lg dark:shadow-cyan-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 focus:ring-cyan-300 dark:focus:ring-cyan-800 shadow-cyan-500/50 dark:shadow-cyan-800/80`;
 }
 else if (color === 'teal') {
-    btnClass = `text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800 shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 focus:ring-teal-300 dark:focus:ring-teal-800 shadow-teal-500/50 dark:shadow-teal-800/80`;
 }
 else if (color === 'lime') {
-    btnClass = `text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800 shadow-lg shadow-lime-500/50 dark:shadow-lg dark:shadow-lime-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 focus:ring-lime-300 dark:focus:ring-lime-800 shadow-lime-500/50 dark:shadow-lime-800/80`;
 }
 else if (color === 'red') {
-    btnClass = `text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 focus:ring-red-300 dark:focus:ring-red-800 shadow-red-500/50 dark:shadow-red-800/80`;
 }
 else if (color === 'pink') {
-    btnClass = `text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800 shadow-lg shadow-pink-500/50 dark:shadow-lg dark:shadow-pink-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 focus:ring-pink-300 dark:focus:ring-pink-800 shadow-pink-500/50 dark:shadow-pink-800/80`;
 }
 else if (color === 'purple') {
-    btnClass = `text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-lg dark:shadow-purple-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 focus:ring-purple-300 dark:focus:ring-purple-800 shadow-purple-500/50 dark:shadow-purple-800/80`;
 }
 else {
-    btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-blue-500/50 dark:shadow-blue-800/80`;
 }
 </script>
 

package/buttons/GradientDuotoneButton.svelte

@@ -1,30 +1,27 @@
 <script>export let textSize = 'text-sm';
 export let color = 'purple2blue';
-let btnClass;
+let btnClass = `focus:ring-4 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2 `;
 export let type = 'button';
-if (color === 'purple2blue') {
-    btnClass = `text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-}
-else if (color === 'cyan2blue') {
-    btnClass = `text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+if (color === 'cyan2blue') {
+    btnClass += `text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-blfocus:ring-cyan-300 dark:focus:ring-cyan-800`;
 }
 else if (color === 'green2blue') {
-    btnClass = `text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-blfocus:ring-green-200 dark:focus:ring-green-800`;
 }
 else if (color === 'purple2pink') {
-    btnClass = `text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-lfocus:ring-purple-200 dark:focus:ring-purple-800`;
 }
 else if (color === 'pink2orange') {
-    btnClass = `text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-blfocus:ring-pink-200 dark:focus:ring-pink-800`;
 }
 else if (color === 'teal2lime') {
-    btnClass = `text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200focus:ring-lime-200 dark:focus:ring-teal-700`;
 }
 else if (color === 'red2yellow') {
-    btnClass = `text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-blfocus:ring-red-100 dark:focus:ring-red-400`;
 }
 else {
-    btnClass = `text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-blfocus:ring-blue-300 dark:focus:ring-blue-800`;
 }
 </script>
 

package/buttons/GradientMonochromeButton.svelte

@@ -1,33 +1,30 @@
 <script>export let textSize = 'text-sm';
 export let color = 'blue';
-let btnClass;
+let btnClass = `focus:ring-4 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2 `;
 export let type = 'button';
-if (color === 'blue') {
-    btnClass = `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
-}
-else if (color === 'green') {
-    btnClass = `text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+if (color === 'green') {
+    btnClass += `text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800`;
 }
 else if (color === 'cyan') {
-    btnClass = `text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800`;
 }
 else if (color === 'teal') {
-    btnClass = `text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800`;
 }
 else if (color === 'lime') {
-    btnClass = `text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800`;
 }
 else if (color === 'red') {
-    btnClass = `text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800`;
 }
 else if (color === 'pink') {
-    btnClass = `text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800`;
 }
 else if (color === 'purple') {
-    btnClass = `text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800`;
 }
 else {
-    btnClass = `text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800 font-medium rounded-lg ${textSize} px-5 py-2.5 text-center mr-2 mb-2`;
+    btnClass += `text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800`;
 }
 </script>
 

package/buttons/GradientOutlineButton.svelte

@@ -2,39 +2,28 @@
 export let color = 'purple2blue';
 export let name = 'Read more';
 export let type = 'button';
-let btnClass;
-let spanClass;
-if (color === 'purple2blue') {
-    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800`;
-    spanClass = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
-}
-else if (color === 'cyan2blue') {
-    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800`;
-    spanClass = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+let btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br focus:ring-4 `;
+let spanClass = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+if (color === 'cyan2blue') {
+    btnClass += `from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800`;
 }
 else if (color === 'green2blue') {
-    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800`;
-    spanClass = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+    btnClass += `from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-green-200 dark:focus:ring-green-800`;
 }
 else if (color === 'purple2pink') {
-    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800`;
-    spanClass = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+    btnClass += `from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-purple-200 dark:focus:ring-purple-800`;
 }
 else if (color === 'pink2orange') {
-    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800`;
-    spanClass = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+    btnClass += `from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-pink-200 dark:focus:ring-pink-800`;
 }
 else if (color === 'teal2lime') {
-    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-lime-800`;
-    spanClass = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+    btnClass += `from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:ring-lime-200 dark:focus:ring-lime-800`;
 }
 else if (color === 'red2yellow') {
-    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400`;
-    spanClass = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+    btnClass += `from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-red-100 dark:focus:ring-red-400`;
 }
 else {
-    btnClass = `relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden ${textSize} font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800`;
-    spanClass = 'relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0';
+    btnClass += `from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-blue-300 dark:focus:ring-blue-800`;
 }
 </script>
 

package/cards/Card.svelte

@@ -8,33 +8,30 @@ export let textdivClass = 'p-5';
 export let headerClass = 'mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white';
 export let header = '';
 export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
-let buttonClass;
-if (btnColor === 'blue') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
-else if (btnColor === 'gray') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+let buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white focus:ring-4 ';
+if (btnColor === 'gray') {
+    buttonClass += 'bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 }
 else if (btnColor === 'red') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+    buttonClass += 'bg-red-700 rounded-lg hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
 }
 else if (btnColor === 'yellow') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+    buttonClass += 'bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
 }
 else if (btnColor === 'green') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+    buttonClass += 'bg-green-700 rounded-lg hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
 }
 else if (btnColor === 'indigo') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+    buttonClass += 'bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
 }
 else if (btnColor === 'purple') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+    buttonClass += 'bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
 }
 else if (btnColor === 'pink') {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+    buttonClass += 'bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
 }
 else {
-    buttonClass = 'inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    buttonClass += 'bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 </script>
 

package/cards/CtaCard.svelte

@@ -3,33 +3,30 @@ export let title = 'Work fast from anywhere';
 export let headColor = 'gray';
 export let btns;
 export let divClass = 'p-4 w-full text-center bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700';
-let headClass;
+let headClass = 'mb-2 text-3xl font-bold dark:text-white ';
 if (headColor === 'blue') {
-    headClass = 'mb-2 text-3xl font-bold text-blue-900 dark:text-white';
+    headClass += 'text-blue-900';
 }
 else if (headColor === 'gray') {
-    headClass = 'mb-2 text-3xl font-bold text-gray-900 dark:text-white';
+    headClass += 'text-gray-900';
 }
 else if (headColor === 'red') {
-    headClass = 'mb-2 text-3xl font-bold text-red-900 dark:text-white';
+    headClass += 'text-red-900';
 }
 else if (headColor === 'yellow') {
-    headClass = 'mb-2 text-3xl font-bold text-yellow-900 dark:text-white';
+    headClass += 'text-yellow-900';
 }
 else if (headColor === 'green') {
-    headClass = 'mb-2 text-3xl font-bold text-green-900 dark:text-white';
+    headClass += 'text-green-900';
 }
 else if (headColor === 'indigo') {
-    headClass = 'mb-2 text-3xl font-bold text-indigo-900 dark:text-white';
+    headClass += 'text-indigo-900';
 }
 else if (headColor === 'purple') {
-    headClass = 'mb-2 text-3xl font-bold text-purple-900 dark:text-white';
+    headClass += 'text-purple-900';
 }
 else if (headColor === 'pink') {
-    headClass = 'mb-2 text-3xl font-bold text-pink-900 dark:text-white';
-}
-else {
-    headClass = 'mb-2 text-3xl font-bold text-blue-900 dark:text-white';
+    headClass += 'text-pink-900';
 }
 </script>
 

package/cards/EcommerceCard.svelte

@@ -7,43 +7,39 @@ export let stars = 5;
 export let price = '$555';
 export let headerClass = 'text-xl font-semibold tracking-tight text-gray-900 dark:text-white';
 export let divClass = 'max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700';
-let spanClass;
-let linkClass;
-if (btnColor === 'blue') {
-    spanClass = 'bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3';
-    linkClass = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
-else if (btnColor === 'gray') {
-    spanClass = 'bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-gray-200 dark:text-gray-800 ml-3';
-    linkClass = 'text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+let spanClass = 'text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ml-3 ';
+let linkClass = 'text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center ';
+if (btnColor === 'gray') {
+    spanClass += 'bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-800';
+    linkClass += 'bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 }
 else if (btnColor === 'red') {
-    spanClass = 'bg-red-100 text-red-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-200 dark:text-red-800 ml-3';
-    linkClass = 'text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+    spanClass += 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-800';
+    linkClass += 'bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
 }
 else if (btnColor === 'yellow') {
-    spanClass = 'bg-yellow-100 text-yellow-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-200 dark:text-yellow-800 ml-3';
-    linkClass = 'text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+    spanClass += 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-800';
+    linkClass += 'bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
 }
 else if (btnColor === 'green') {
-    spanClass = 'bg-green-100 text-green-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-200 dark:text-green-800 ml-3';
-    linkClass = 'text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+    spanClass += 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-800';
+    linkClass += 'bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
 }
 else if (btnColor === 'indigo') {
-    spanClass = 'bg-indigo-100 text-indigo-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-800 ml-3';
-    linkClass = 'text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+    spanClass += 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-800';
+    linkClass += 'bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
 }
 else if (btnColor === 'purple') {
-    spanClass = 'bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-800 ml-3';
-    linkClass = 'text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+    spanClass += 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-800';
+    linkClass += 'bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
 }
 else if (btnColor === 'pink') {
-    spanClass = 'bg-pink-100 text-pink-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-800 ml-3';
-    linkClass = 'text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+    spanClass += 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-800';
+    linkClass += 'bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
 }
 else {
-    spanClass = 'bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3';
-    linkClass = 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    spanClass += 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800';
+    linkClass += 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 </script>
 

package/cards/InteractiveCard.svelte

@@ -11,33 +11,30 @@ export let link1;
 export let link2;
 export let headerClass = 'mb-1 text-xl font-medium text-gray-900 dark:text-white';
 export let divClass = 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700';
-let linkClass;
-if (buttonColor === 'blue') {
-    linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
-}
-else if (buttonColor === 'gray') {
-    linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+let linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white focus:ring-4 ';
+if (buttonColor === 'gray') {
+    linkClass += 'bg-gray-700 rounded-lg hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 }
 else if (buttonColor === 'red') {
-    linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+    linkClass += 'bg-red-700 rounded-lg hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
 }
 else if (buttonColor === 'yellow') {
-    linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+    linkClass += 'bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
 }
 else if (buttonColor === 'green') {
-    linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+    linkClass += 'bg-green-700 rounded-lg hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
 }
 else if (buttonColor === 'indigo') {
-    linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+    linkClass += 'bg-indigo-700 rounded-lg hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
 }
 else if (buttonColor === 'purple') {
-    linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+    linkClass += 'bg-purple-700 rounded-lg hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
 }
 else if (buttonColor === 'pink') {
-    linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+    linkClass += 'bg-pink-700 rounded-lg hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
 }
 else {
-    linkClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    linkClass += 'bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 </script>
 

package/cards/SignInCard.svelte

@@ -8,33 +8,33 @@ export let lostPassword;
 let email;
 let password;
 let error;
-let submitClass;
+let submitClass = 'w-full text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center ';
 if (btnSignInColor === 'blue') {
-    submitClass = 'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    submitClass += 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 else if (btnSignInColor === 'gray') {
-    submitClass = 'w-full text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
+    submitClass += 'bg-gray-700 hover:bg-gray-800 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 }
 else if (btnSignInColor === 'red') {
-    submitClass = 'w-full text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
+    submitClass += 'bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
 }
 else if (btnSignInColor === 'yellow') {
-    submitClass = 'w-full text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
+    submitClass += 'bg-yellow-700 hover:bg-yellow-800 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
 }
 else if (btnSignInColor === 'green') {
-    submitClass = 'w-full text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
+    submitClass += 'bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
 }
 else if (btnSignInColor === 'indigo') {
-    submitClass = 'w-full text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
+    submitClass += 'bg-indigo-700 hover:bg-indigo-800 focus:ring-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
 }
 else if (btnSignInColor === 'purple') {
-    submitClass = 'w-full text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
+    submitClass += 'bg-purple-700 hover:bg-purple-800 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
 }
 else if (btnSignInColor === 'pink') {
-    submitClass = 'w-full text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
+    submitClass += 'bg-pink-700 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
 }
 else {
-    submitClass = 'w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+    submitClass += 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
 }
 </script>
 

package/dropdowns/DropdownDefault.svelte

@@ -22,8 +22,8 @@ else if (textSize === 'text-base') {
 else {
     paddings = 'py-2.5 px-5';
 }
-let buttonClass;
 let round = rounded ? 'rounded-full' : 'rounded-lg';
+let buttonClass = `inline-flex z-10 items-center font-medium ${round} ${textSize} ${paddings} text-center `;
 export const openFn = (id) => {
     if (showDropdownId === id) {
         dropdownIdStore.update((n) => (n = null));
@@ -39,48 +39,44 @@ export let items;
 export let dropdownClass = 'absolute left-0 top-1 z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700';
 export let headerClass = 'py-3 px-4 text-gray-900 dark:text-white';
 export let linkClass = 'block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white';
-if (color === 'blue') {
-    buttonClass = `inline-flex z-10 items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
-}
-else if (color === 'blue-outline') {
-    buttonClass = `inline-flex z-10 items-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
+if (color === 'blue-outline') {
+    buttonClass += `text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800`;
 }
 else if (color === 'dark') {
-    buttonClass = `inline-flex z-10 items-center text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
+    buttonClass += `text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700`;
 }
 else if (color === 'dark-outline') {
-    buttonClass = `inline-flex z-10 items-center text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
+    buttonClass += `text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800`;
 }
 else if (color === 'light') {
-    buttonClass = `inline-flex z-10 items-center text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
+    buttonClass += `text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800`;
 }
 else if (color === 'green') {
-    buttonClass = `inline-flex z-10 items-center text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
+    buttonClass += `text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800`;
 }
 else if (color === 'green-outline') {
-    buttonClass = `inline-flex z-10 items-center text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
+    buttonClass += `text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800`;
 }
 else if (color === 'red') {
-    buttonClass = `inline-flex z-10 items-center text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
+    buttonClass += `text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900`;
 }
 else if (color === 'red-outline') {
-    buttonClass = `inline-flex z-10 items-center text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
+    buttonClass += `text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900`;
 }
 else if (color === 'yellow') {
-    buttonClass = `inline-flex z-10 items-center text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium ${round} ${textSize} ${paddings} text-center dark:focus:ring-yellow-900`;
+    buttonClass += `text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900`;
 }
 else if (color === 'yellow-outline') {
-    buttonClass = `inline-flex z-10 items-center text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
+    buttonClass += `text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900`;
 }
 else if (color === 'purple') {
-    buttonClass = `inline-flex z-10 items-center text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium ${round} ${textSize} ${paddings} text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
+    buttonClass += `text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900`;
 }
 else if (color === 'purple-outline') {
-    buttonClass = `inline-flex z-10 items-center text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg ${textSize} ${paddings} text-center dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
+    buttonClass += `text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900`;
 }
 else {
-    // blue
-    buttonClass = `inline-flex z-10 items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium ${round} ${textSize} ${paddings} text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
+    buttonClass += `text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800`;
 }
 </script>
 

package/forms/Checkbox.svelte

@@ -1,5 +1,5 @@
 <script>export let divClass = 'flex items-center mr-4';
-export let inputClass = 'w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+export let inputClass = 'w-4 h-4 bg-gray-100 rounded border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 ';
 export let labelClass = 'ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
 export let disabled = false;
 if (disabled) {
@@ -11,25 +11,25 @@ export let labelHelperClass = 'font-medium text-gray-900 dark:text-gray-300';
 export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
 export let color = 'blue';
 if (color === 'red') {
-    inputClass = 'w-4 h-4 text-red-600 bg-gray-100 rounded border-gray-300 focus:ring-red-500 dark:focus:ring-red-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+    inputClass += 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600';
 }
 else if (color === 'green') {
-    inputClass = 'w-4 h-4 text-green-600 bg-gray-100 rounded border-gray-300 focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+    inputClass += 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600';
 }
 else if (color === 'purple') {
-    inputClass = 'w-4 h-4 text-purple-600 bg-gray-100 rounded border-gray-300 focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+    inputClass += 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600';
 }
 else if (color === 'teal') {
-    inputClass = 'w-4 h-4 text-teal-600 bg-gray-100 rounded border-gray-300 focus:ring-teal-500 dark:focus:ring-teal-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+    inputClass += 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600';
 }
 else if (color === 'yellow') {
-    inputClass = 'w-4 h-4 text-yellow-400 bg-gray-100 rounded border-gray-300 focus:ring-yellow-500 dark:focus:ring-yellow-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+    inputClass += 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600';
 }
 else if (color === 'orange') {
-    inputClass = 'w-4 h-4 text-orange-500 bg-gray-100 rounded border-gray-300 focus:ring-orange-500 dark:focus:ring-orange-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+    inputClass += 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600';
 }
 else {
-    inputClass = 'w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600';
+    inputClass += 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600';
 }
 export let helper;
 export let id;

package/forms/Input.svelte

@@ -18,11 +18,11 @@ else {
     padding = 'p-2';
 }
 export let inputClass = `bg-gray-50 border border-gray-300 text-gray-900 ${size} rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ${padding} dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500`;
-export let labelClass = 'block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300';
+export let labelClass = 'block mb-4 text-sm font-medium text-gray-900 dark:text-gray-300';
 export let disabled = false;
 export let readonly = false;
 export let helper = '';
-export let helperClass = 'mt-2 text-sm text-gray-500 dark:text-gray-400';
+export let helperClass = 'text-sm text-gray-500 dark:text-gray-400';
 export let ref = null;
 // you need to this to avoid 2-way binding
 function setType(node) {
@@ -31,7 +31,9 @@ function setType(node) {
 </script>
 
 <div class={$$props.class}>
-	<label for={id} class={labelClass}>{label}</label>
+	{#if label}
+		<label for={id} class={labelClass}>{label}</label>
+	{/if}
 	<input
 		bind:value
 		bind:this={ref}