From 992a7774ffa84e8f0b993b71cc6d5fbd41a8e072 Mon Sep 17 00:00:00 2001
From: Timo <hallo@timobusse.de>
Date: Wed, 30 Apr 2025 07:24:41 +0200
Subject: [PATCH] button component: moves dark style button into dedicated
 style classes

---
 .../app/src/components/button/css/index.css   | 62 +++++++++++++++----
 .../app/src/components/button/index.tsx       | 23 ++++---
 pkgs/webview-ui/app/tailwind/core-plugin.ts   |  2 +-
 3 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/pkgs/webview-ui/app/src/components/button/css/index.css b/pkgs/webview-ui/app/src/components/button/css/index.css
index cff7ac8d8..53adc2082 100644
--- a/pkgs/webview-ui/app/src/components/button/css/index.css
+++ b/pkgs/webview-ui/app/src/components/button/css/index.css
@@ -1,30 +1,74 @@
 .button {
-  @apply inline-flex items-center flex-shrink gap-2 justify-center p-4 text-secondary-950 font-semibold;
+  @apply inline-flex items-center flex-shrink gap-1 justify-center p-4 text-secondary-950 font-semibold;
   letter-spacing: 0.0275rem;
 }
 
-/* button sizes */
+/* button SIZES */
 
 .button--default {
   padding: theme(padding.2) theme(padding.4);
   border-radius: theme(borderRadius.DEFAULT);
+
+  &:has(> .button__icon--start):has(> .button__label) {
+    padding-left: theme(padding[2.5]);
+  }
 }
 
 .button--small {
   padding: theme(padding[1.5]) theme(padding[3]);
   border-radius: 3px;
+
+  &:has(> .button__icon--start):has(> .button__label) {
+    padding-left: theme(padding.2);
+  }
 }
 
+/* button DARK and states */
+
 .button--dark {
-  @apply border border-solid border-secondary-950 bg-primary-900 text-white shadow-inner-primary;
+  @apply border border-solid border-secondary-950 bg-primary-800 text-white;
+
+  box-shadow: inset 1px 1px theme(backgroundColor.secondary.700);
+
+  &:disabled {
+    @apply disabled:bg-secondary-200 disabled:text-secondary-700 disabled:border-secondary-300;
+  }
+
+  & .button__icon {
+    color: theme(textColor.secondary.200);
+  }
 }
 
-/* button light and states */
+.button--dark-hover:hover {
+  @apply hover:bg-secondary-900;
+}
+
+.button--dark-focus:focus {
+  @apply focus:border-secondary-900;
+}
+
+.button--dark-active:active {
+  @apply focus:border-secondary-900;
+}
+
+.button--dark-active:active {
+  @apply active:border-secondary-900 active:shadow-inner-primary-active;
+}
+
+/* button LIGHT and states */
 
 .button--light {
-  @apply border border-solid border-secondary-400 bg-secondary-100;
+  @apply border border-solid border-secondary-400 bg-secondary-100 text-secondary-950;
 
-  box-shadow: inset 2px 2px theme(backgroundColor.white);
+  box-shadow: inset 1px 1px theme(backgroundColor.white);
+
+  &:disabled {
+    @apply disabled:bg-secondary-50 disabled:text-secondary-200 disabled:border-secondary-700;
+  }
+
+  & .button__icon {
+    color: theme(textColor.secondary.900);
+  }
 }
 
 .button--light-hover:hover {
@@ -40,7 +84,7 @@
 }
 
 .button--light-active:active {
-  @apply active:bg-secondary-200 border-secondary-600 active:text-secondary-900;
+  @apply active:bg-secondary-200 border-secondary-600 active:text-secondary-900 active:shadow-inner-primary-active;
 
   box-shadow: inset 2px 2px theme(backgroundColor.secondary.300);
 
@@ -48,7 +92,3 @@
     color: theme(textColor.secondary.900) !important;
   }
 }
-
-.button--light-disabled:disabled {
-  @apply disabled:bg-secondary-50 disabled:text-secondary-200 disabled:border-secondary-700;
-}
diff --git a/pkgs/webview-ui/app/src/components/button/index.tsx b/pkgs/webview-ui/app/src/components/button/index.tsx
index 01bde3a26..db5849d81 100644
--- a/pkgs/webview-ui/app/src/components/button/index.tsx
+++ b/pkgs/webview-ui/app/src/components/button/index.tsx
@@ -11,13 +11,10 @@ const variantColors: (
   disabled: boolean | undefined,
 ) => Record<Variants, string> = (disabled) => ({
   dark: cx(
-    "border border-solid",
-    "border-secondary-950 bg-primary-900 text-white",
-    "shadow-inner-primary",
-    !disabled && "hover:border-secondary-900 hover:bg-secondary-700", // Hover state
-    !disabled && "focus:border-secondary-900", // Focus state
-    !disabled &&
-      "active:border-secondary-900 active:shadow-inner-primary-active", // Active state
+    "button--dark",
+    !disabled && "button--dark-hover", // Hover state
+    !disabled && "button--dark-focus", // Focus state
+    !disabled && "button--dark-active", // Active state
     // Disabled
     "disabled:bg-secondary-200 disabled:text-secondary-700 disabled:border-secondary-300",
   ),
@@ -66,6 +63,11 @@ export const Button = (props: ButtonProps) => {
     "endIcon",
     "class",
   ]);
+
+  const buttonInvertion = (variant: Variants) => {
+    return !(!variant || variant === "ghost" || variant === "light");
+  };
+
   return (
     <button
       class={cx(
@@ -76,13 +78,16 @@ export const Button = (props: ButtonProps) => {
       )}
       {...other}
     >
-      {local.startIcon && <span class="h-4">{local.startIcon}</span>}
+      {local.startIcon && (
+        <span class="button__icon--start h-4">{local.startIcon}</span>
+      )}
       {local.children && (
         <Typography
           class="button__label"
           hierarchy="label"
           size={local.size || "default"}
-          color="primary"
+          color="inherit"
+          inverted={buttonInvertion(local.variant || "dark")}
           weight="medium"
           tag="span"
         >
diff --git a/pkgs/webview-ui/app/tailwind/core-plugin.ts b/pkgs/webview-ui/app/tailwind/core-plugin.ts
index b40862895..9965d8935 100644
--- a/pkgs/webview-ui/app/tailwind/core-plugin.ts
+++ b/pkgs/webview-ui/app/tailwind/core-plugin.ts
@@ -284,7 +284,7 @@ export default plugin.withOptions(
           "inner-primary":
             "2px 2px 0px 0px var(--clr-bg-inv-acc-3, #415E63) inset",
           "inner-primary-active":
-            "0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637), -2px -2px 0px 0px var(--clr-bg-inv-acc-1, #7B9B9F) inset",
+            "0px 0px 0px 1px #FFF, 0px 0px 0px 2px var(--clr-bg-inv-acc-4, #203637)",
           "inner-secondary":
             "-2px -2px 0px 0px #CEDFE2 inset, 2px 2px 0px 0px white inset",
           "inner-secondary-active":