yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

button component: introduces button-ghost dedicated styles

Browse Source
This commit is contained in:
Timo
2025-04-30 15:40:58 +02:00
committed by Johannes Kirschbauer
parent 4c62ea53c5
commit 8f2794993d
3 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
pkgs/webview-ui/app/src/components/button/css/button-ghost.css Normal file
View File

@@ -0,0 +1,11 @@
.button--ghost-hover:hover {
@apply hover:bg-secondary-100 hover:text-secondary-900;
}
.button--ghost-focus:focus {
@apply focus:bg-secondary-200 focus:text-secondary-900;
}
.button--ghost-active:active {
@apply active:bg-secondary-200 active:text-secondary-900 active:shadow-inner-primary-active;
}

1
pkgs/webview-ui/app/src/components/button/css/index.css
View File

@@ -1,5 +1,6 @@
@import "./button-light.css"; @import "./button-light.css";
@import "./button-dark.css"; @import "./button-dark.css";
@import "./button-ghost.css";
.button { .button {
@apply inline-flex items-center flex-shrink gap-1 justify-center p-4 font-semibold; @apply inline-flex items-center flex-shrink gap-1 justify-center p-4 font-semibold;

7
pkgs/webview-ui/app/src/components/button/index.tsx
View File

@@ -26,10 +26,9 @@ const variantColors: (
!disabled && "button--light-active", // Active state !disabled && "button--light-active", // Active state
), ),
ghost: cx( ghost: cx(
// "shadow-inner-secondary", !disabled && "button--ghost-hover", // Hover state
!disabled && "hover:bg-secondary-200 hover:text-secondary-900", // Hover state !disabled && "button--ghost-focus", // Focus state
!disabled && "focus:bg-secondary-200 focus:text-secondary-900", // Focus state !disabled && "button--ghost-active", // Active state
!disabled && "button--light-active", // Active state
), ),
}); });