Add ghost and light color variants to buttons

petalframework · Nov 19, 2024 · b74c4d8 · b74c4d8
1 parent aac6394
commit b74c4d8
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/assets/default.css b/assets/default.css
@@ -51,6 +51,9 @@
 .pc-button--primary {
   @apply text-white border-transparent bg-primary-600 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;
 }
+.pc-button--primary-light {
+  @apply bg-primary-100 text-primary-800 border-primary-100 hover:bg-primary-200 hover:border-primary-200 active:bg-primary-300 focus:bg-primary-200 dark:bg-primary-200 dark:border-primary-200 dark:hover:border-primary-300 dark:text-primary-800 dark:hover:bg-primary-300 dark:active:bg-primary-400 dark:active:border-primary-400;
+}
 .pc-button--primary-outline {
   @apply border-primary-400 dark:border-primary-400 dark:active:border-primary-400 dark:hover:border-primary-300 dark:hover:text-primary-300 dark:hover:bg-transparent dark:text-primary-400 hover:border-primary-600 text-primary-600 hover:text-primary-700 active:bg-primary-200 hover:bg-primary-50 focus:border-primary-700 focus:shadow-primary-500/50;
 }
@@ -60,9 +63,15 @@
 .pc-button--primary-shadow {
   @apply text-white border-transparent shadow-xl bg-primary-600 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50 shadow-primary-500/30 dark:hover:shadow-primary-600/30 dark:focus:shadow-primary-600/30 dark:active:shadow-primary-700/30;
 }
+.pc-button--primary-ghost {
+  @apply bg-transparent border-transparent text-primary-800 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 focus:bg-transparent dark:text-primary-300 dark:hover:bg-primary-900 dark:hover:text-primary-300 dark:active:bg-primary-700 dark:focus:bg-transparent;
+}
 .pc-button--secondary {
   @apply text-white border-transparent bg-secondary-600 hover:bg-secondary-700 focus:bg-secondary-700 active:bg-secondary-800 focus:shadow-secondary-500/50;
 }
+.pc-button--secondary-light {
+  @apply bg-secondary-100 text-secondary-800 border-secondary-100 hover:bg-secondary-200 hover:border-secondary-200 active:bg-secondary-300 focus:bg-secondary-200 dark:bg-secondary-200 dark:border-secondary-200 dark:hover:border-secondary-300 dark:text-secondary-800 dark:hover:bg-secondary-300 dark:active:bg-secondary-400 dark:active:border-secondary-400;
+}
 .pc-button--secondary-outline {
   @apply border-secondary-400 dark:border-secondary-400 dark:active:border-secondary-400 dark:hover:border-secondary-300 dark:hover:text-secondary-300 dark:hover:bg-transparent dark:text-secondary-400 hover:border-secondary-600 text-secondary-600 hover:text-secondary-700 active:bg-secondary-200 hover:bg-secondary-50 focus:border-secondary-700 focus:shadow-secondary-500/50;
 }
@@ -72,6 +81,9 @@
 .pc-button--secondary-shadow {
   @apply text-white border-transparent shadow-xl bg-secondary-600 hover:bg-secondary-700 focus:bg-secondary-700 active:bg-secondary-800 focus:shadow-secondary-500/50 shadow-secondary-500/30 dark:hover:shadow-secondary-600/30 dark:focus:shadow-secondary-600/30 dark:active:shadow-secondary-700/30;
 }
+.pc-button--secondary-ghost {
+  @apply bg-transparent border-transparent text-secondary-800 hover:bg-secondary-100 hover:text-secondary-800 active:bg-secondary-200 focus:bg-transparent dark:text-secondary-300 dark:hover:bg-secondary-900 dark:hover:text-secondary-300 dark:active:bg-secondary-700 dark:focus:bg-transparent;
+}
 .pc-button--white {
   @apply text-gray-700 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;
 }
@@ -90,6 +102,9 @@
 .pc-button--info {
   @apply text-white border-transparent bg-info-600 hover:bg-info-700 active:bg-info-800 focus:bg-info-700;
 }
+.pc-button--info-light {
+  @apply bg-info-100 text-info-800 border-info-100 hover:bg-info-200 hover:border-info-200 active:bg-info-300 focus:bg-info-200 dark:bg-info-200 dark:border-info-200 dark:hover:border-info-300 dark:text-info-800 dark:hover:bg-info-300 dark:active:bg-info-400 dark:active:border-info-400;
+}
 .pc-button--info-outline {
   @apply text-info-600 border-info-400 dark:border-info-400 dark:active:border-info-400 dark:hover:border-info-300 dark:hover:text-info-300 dark:hover:bg-transparent dark:text-info-400 hover:border-info-600 hover:text-info-700 active:border-info-600 focus:text-info-600 active:text-info-700 active:bg-info-100 hover:bg-info-50 focus:border-info-700;
 }
@@ -99,9 +114,15 @@
 .pc-button--info-shadow {
   @apply text-white border-transparent shadow-xl bg-info-600 hover:bg-info-700 focus:bg-info-700 active:bg-info-800 focus:shadow-info-500/50 shadow-info-500/30 dark:hover:shadow-info-600/30 dark:focus:shadow-info-600/30 dark:active:shadow-info-700/30;
 }
+.pc-button--info-ghost {
+  @apply bg-transparent border-transparent text-info-800 hover:bg-info-100 hover:text-info-800 active:bg-info-200 focus:bg-transparent dark:text-info-300 dark:hover:bg-info-900 dark:hover:text-info-300 dark:active:bg-info-700 dark:focus:bg-transparent;
+}
 .pc-button--success {
   @apply text-white border-transparent bg-success-600 hover:bg-success-700 active:bg-success-800 focus:bg-success-700;
 }
+.pc-button--success-light {
+  @apply bg-success-100 text-success-800 border-success-100 hover:bg-success-200 hover:border-success-200 active:bg-success-300 focus:bg-success-200 dark:bg-success-200 dark:border-success-200 dark:hover:border-success-300 dark:text-success-800 dark:hover:bg-success-300 dark:active:bg-success-400 dark:active:border-success-400;
+}
 .pc-button--success-outline {
   @apply text-success-600 border-success-400 dark:border-success-400 dark:active:border-success-500 dark:hover:border-success-300 dark:hover:text-success-300 dark:hover:bg-transparent dark:text-success-400 hover:border-success-600 hover:text-success-700 active:border-success-600 focus:text-success-600 active:text-success-700 active:bg-success-100 hover:bg-success-50 focus:border-success-700;
 }
@@ -111,9 +132,15 @@
 .pc-button--success-shadow {
   @apply text-white border-transparent shadow-xl bg-success-600 hover:bg-success-700 active:bg-success-800 focus:bg-success-700 focus:shadow-success-500/50 shadow-success-500/30 dark:hover:shadow-success-600/30 dark:focus:shadow-success-600/30 dark:active:shadow-success-700/30;
 }
+.pc-button--success-ghost {
+  @apply bg-transparent border-transparent text-success-800 hover:bg-success-100 hover:text-success-800 active:bg-success-200 focus:bg-transparent dark:text-success-300 dark:hover:bg-success-900 dark:hover:text-success-300 dark:active:bg-success-700 dark:focus:bg-transparent;
+}
 .pc-button--warning {
   @apply text-white border-transparent bg-warning-600 hover:bg-warning-700 active:bg-warning-800 focus:bg-warning-700;
 }
+.pc-button--warning-light {
+  @apply bg-warning-100 text-warning-800 border-warning-100 hover:bg-warning-200 hover:border-warning-200 active:bg-warning-300 focus:bg-warning-200 dark:bg-warning-200 dark:border-warning-200 dark:hover:border-warning-300 dark:text-warning-800 dark:hover:bg-warning-300 dark:active:bg-warning-400 dark:active:border-warning-400;
+}
 .pc-button--warning-outline {
   @apply text-warning-600 border-warning-400 dark:border-warning-400 dark:active:border-warning-500 dark:hover:border-warning-300 dark:hover:text-warning-300 dark:hover:bg-transparent dark:text-warning-400 hover:border-warning-600 hover:text-warning-700 active:border-warning-600 focus:text-warning-600 active:text-warning-700 active:bg-warning-100 hover:bg-warning-50 focus:border-warning-700;
 }
@@ -123,9 +150,15 @@
 .pc-button--warning-shadow {
   @apply text-white border-transparent shadow-xl bg-warning-600 hover:bg-warning-700 focus:bg-warning-700 active:bg-warning-800 focus:shadow-warning-500/50 shadow-warning-500/30 dark:hover:shadow-warning-600/30 dark:focus:shadow-warning-600/30 dark:active:shadow-warning-700/30;
 }
+.pc-button--warning-ghost {
+  @apply bg-transparent border-transparent text-warning-800 hover:bg-warning-100 hover:text-warning-800 active:bg-warning-200 focus:bg-transparent dark:text-warning-300 dark:hover:bg-warning-900 dark:hover:text-warning-300 dark:active:bg-warning-700 dark:focus:bg-transparent;
+}
 .pc-button--danger {
   @apply text-white border-transparent bg-danger-600 hover:bg-danger-700 active:bg-danger-800 focus:bg-danger-700;
 }
+.pc-button--danger-light {
+  @apply bg-danger-100 text-danger-800 border-danger-100 hover:bg-danger-200 hover:border-danger-200 active:bg-danger-300 focus:bg-danger-200 dark:bg-danger-200 dark:border-danger-200 dark:hover:border-danger-300 dark:text-danger-800 dark:hover:bg-danger-300 dark:active:bg-danger-400 dark:active:border-danger-400;
+}
 .pc-button--danger-outline {
   @apply text-danger-600 border-danger-400 dark:active:border-danger-400 dark:border-danger-400 dark:hover:border-danger-300 dark:hover:text-danger-300 dark:hover:bg-transparent dark:text-danger-400 hover:border-danger-600 hover:text-danger-700 active:bg-danger-200 active:border-danger-700 hover:bg-danger-50 focus:border-danger-700;
 }
@@ -135,9 +168,15 @@
 .pc-button--danger-shadow {
   @apply text-white border-transparent shadow-xl bg-danger-600 hover:bg-danger-700 focus:bg-danger-700 active:bg-danger-800 focus:shadow-danger-500/50 shadow-danger-500/30 dark:hover:shadow-danger-600/30 dark:focus:shadow-danger-600/30 dark:active:shadow-danger-700/30;
 }
+.pc-button--danger-ghost {
+  @apply bg-transparent border-transparent text-danger-800 hover:bg-danger-100 hover:text-danger-800 active:bg-danger-200 focus:bg-transparent dark:text-danger-300 dark:hover:bg-danger-900 dark:hover:text-danger-300 dark:active:bg-danger-700 dark:focus:bg-transparent;
+}
 .pc-button--gray {
   @apply text-white bg-gray-600 border-transparent active:bg-gray-800 hover:bg-gray-700 focus:bg-gray-700;
 }
+.pc-button--gray-light {
+  @apply text-gray-800 bg-gray-100 border-gray-100 hover:bg-gray-200 hover:border-gray-200 active:bg-gray-300 focus:bg-gray-200 dark:bg-gray-200 dark:border-gray-200 dark:hover:border-gray-300 dark:text-gray-800 dark:hover:bg-gray-300 dark:active:bg-gray-400 dark:active:border-gray-400;
+}
 .pc-button--gray-outline {
   @apply text-gray-600 border-gray-400 dark:border-gray-400 dark:hover:border-gray-300 dark:active:border-gray-400 dark:hover:text-gray-300 dark:hover:bg-transparent dark:text-gray-400 hover:border-gray-600 hover:text-gray-700 active:bg-gray-200 active:border-gray-700 hover:bg-gray-50 focus:border-gray-700;
 }
@@ -147,6 +186,9 @@
 .pc-button--gray-shadow {
   @apply text-white bg-gray-600 border-transparent shadow-xl active:bg-gray-800 hover:bg-gray-700 focus:bg-gray-700 focus:shadow-gray-500/50 shadow-gray-500/30 dark:hover:shadow-gray-600/30 dark:focus:shadow-gray-600/30 dark:active:shadow-gray-700/30;
 }
+.pc-button--gray-ghost {
+  @apply text-gray-800 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-800 active:bg-gray-200 focus:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-300 dark:active:bg-gray-700 dark:focus:bg-transparent;
+}
 .pc-button--light {
   @apply text-gray-900 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800;
 }

diff --git a/lib/petal_components/button.ex b/lib/petal_components/button.ex
@@ -11,7 +11,7 @@ defmodule PetalComponents.Button do
 
   attr :variant, :string,
     default: "solid",
-    values: ["solid", "outline", "inverted", "shadow"],
+    values: ["solid", "light", "outline", "inverted", "shadow", "ghost"],
     doc: "button variant"
 
   attr :color, :string,