@flytedan/flytebot-design-system 0.39.0 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -34,13 +34,12 @@
 .fd-btn:hover {
   text-decoration: none;
 }
-/* This translateY is the only press feedback any variant gets: while a real mouse holds a
-   button down, the pointer is over it, so :hover's own background is already showing —
-   restating a different :active-only background/box-shadow per variant is unreachable
-   without also losing :hover the moment the button is pressed, and a real browser clears
-   :active the instant the pointer leaves the element during a held press (there is no
-   sticky/dragged-off :active to distinguish from :hover here), so no per-variant :active
-   rule was ever independently observable. */
+/* While a real mouse holds a button down, the pointer is over it, so :hover's own rule is
+   also matching — but :hover and :active are equal specificity, and each variant's own
+   :active rule below is declared after that variant's :hover rule, so the cascade resolves
+   to :active's background/box-shadow, not :hover's. That is what gives an enabled button a
+   pressed colour genuinely distinct from its hovered one, on top of the translateY here
+   shared by every variant. */
 .fd-btn:active {
   transform: translateY(1px);
 }
@@ -125,6 +124,10 @@
 .fd-btn-primary:hover {
   background: var(--grad-primary-hover);
 }
+.fd-btn-primary:active {
+  background: var(--blue-800);
+  box-shadow: none;
+}
 .fd-btn-brandsoft {
   background: var(--grad-brand-soft);
   color: #fff;
@@ -145,6 +148,10 @@
   background: var(--surface-2);
   border-color: var(--border-strong);
 }
+.fd-btn-secondary:active {
+  background: var(--surface-3);
+  box-shadow: none;
+}
 .fd-btn-ghost {
   background: transparent;
   color: var(--text-2);
@@ -153,6 +160,9 @@
   background: var(--surface-3);
   color: var(--text);
 }
+.fd-btn-ghost:active {
+  background: var(--border);
+}
 .fd-btn-danger {
   background: var(--danger-solid);
   color: #fff;
@@ -161,6 +171,10 @@
 .fd-btn-danger:hover {
   background: #b93a31;
 }
+.fd-btn-danger:active {
+  background: var(--btn-solid-danger-bg-active);
+  box-shadow: none;
+}
 .fd-btn-link {
   background: none;
   color: var(--link);