@fpkit/acss 0.5.12 → 0.5.13

package/src/components/buttons/button.scss

@@ -1,24 +1,20 @@
 button {
-  --btn-xs: 0.6rem;
-  --btn-sm: 0.7rem;
-  --btn-md: 0.85rem;
-  --btn-lg: 1.3125rem;
+  --btn-xs: 0.6875rem;
+  --btn-sm: 0.8125rem;
+  --btn-md: 0.9375rem;
+  --btn-lg: 1.125rem;
   --btn-pill: 100rem;
-  --btn-height: 2.5rem;
-  --fs: 0.95rem;
-  --btn-fs: 0.9375rem;
+  --btn-fs: var(--btn-md);
+  --btn-height: calc(var(--btn-fs) * 2.25);
   --btn-bg: lightgray;
   --btn-width: max-content;
-  --btn-calc-height: var(--btn-height, calc(40rem / 16));
 
   font-size: var(--btn-fs);
   font-weight: var(--btn-fw, 500);
-  height: var(--btn-height, calc(40rem / 16));
-  max-height: var(--btn-calc-height);
-  min-height: 1.5rem;
+  height: var(--btn-height);
   place-items: var(--btn-place, center);
-  padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
-  padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));
+  padding-inline: var(--btn-px, calc(var(--btn-fs) * 1.5));
+  padding-block: var(--btn-py, calc(var(--btn-fs) * 0.5));
   border: var(--btn-bdr, none);
   border-radius: var(--btn-rds, calc(6rem / 16));
   text-decoration: var(--btn-deco, none);
@@ -27,7 +23,10 @@ button {
   gap: var(--btn-gap, 0.2rem);
   white-space: var(--btn-wspc, inherit);
   margin: var(--btn-spc, 0);
-  transition: var(--tran-all);
+  transition: var(
+    --btn-transition,
+    var(--tran-all, all 0.3s cubic-bezier(0.4, 0, 0.2, 1))
+  );
   background-color: var(--btn-bg, var(--btn));
   outline: none;
   width: var(--btn-width);
@@ -60,15 +59,17 @@ button {
 
   // TODO: add hover/focus with :if()
   &:is(:hover, :focus) {
-    // --btn-bg: lightgray;
-    background-color: var(--btn-bg, var(--btn, lightgray));
-    filter: invert(1) hue-rotate (180deg);
-    transform: scale(0.95) var(--line-style, solid);
+    // Darken the background on hover by reducing brightness
+    filter: var(--btn-hover-filter, brightness(0.85));
+    transform: var(--btn-hover-transform, scale(1.03));
+    outline: var(--btn-hover-outline, thin);
     outline-offset: var(--line-offset, 1px);
+    // outline-style: var(--line-style, solid);
 
     &[aria-disabled="true"] {
       transform: none;
       opacity: var(--btn-opacity, 0.5);
+      filter: none;
     }
   }
 
@@ -91,29 +92,29 @@ button {
     border-radius: var(--btn-pill, 100rem);
   }
 
-  &[data-btn~="xs"] {
-    padding-inline: var(--btn-xs);
+  &[data-btn~="xs"],
+  .btn-xs {
     --btn-fs: var(--btn-xs);
-    --btn-height: 1.5rem;
     text-transform: uppercase;
   }
 
-  &[data-btn~="sm"] {
+  &[data-btn~="sm"],
+  .btn-sm {
     --btn-fs: var(--btn-sm);
-    --btn-height: 1.75rem;
   }
 
-  &[data-btn~="md"] {
+  &[data-btn~="md"],
+  .btn-md {
     --btn-fs: var(--btn-md);
-    --btn-height: 2rem;
   }
 
-  &[data-btn~="lg"] {
+  &[data-btn~="lg"],
+  .btn-lg {
     --btn-fs: var(--btn-lg);
-    --btn-height: 2.5rem;
   }
 
-  &[data-btn~="icon"] {
+  &[data-btn~="icon"],
+  .btn-icon {
     padding: unset;
     height: unset;
     --btn-bg: transparent;
@@ -125,7 +126,8 @@ button {
     justify-content: center;
   }
 
-  &[data-btn~="text"] {
+  &[data-btn~="text"],
+  .btn-text {
     --btn-bg: transparent;
     --btn-cl: currentColor;
     --btn-bdr: none;
@@ -134,9 +136,10 @@ button {
     --btn-py: 0.75rem;
     --btn-px: 0.75rem;
     &:is(:hover, :focus) {
-      background-color: transparent;
-      outline: 0.07rem solid var(--btn-cl);
+      background-color: color-mix(in srgb, var(--btn-cl) 10%, transparent);
+      outline: 0.025rem solid var(--btn-cl);
       outline-offset: 0;
+      filter: none; // Override parent filter
     }
   }
 }

package/src/components/buttons/button.stories.tsx

@@ -53,27 +53,61 @@ export const ButtonComponent: Story = {
   },
 } as Story;
 
+/**
+ * Create a submit button
+ */
+export const Submit: Story = {
+  args: {
+    type: "submit",
+    children: "Submit",
+  },
+} as Story;
+
+/**
+ * A reset button
+ */
+export const Reset: Story = {
+  args: {
+    type: "reset",
+    children: "Reset",
+  },
+} as Story;
+
+/**
+ * A cancel button
+ */
+export const Cancel: Story = {
+  args: {
+    type: "button",
+    children: "Cancel",
+  },
+} as Story;
+
 export const Xsmall: Story = {
   args: {
     "data-btn": "xs",
+    children: "Click",
   },
 } as Story;
 
 export const Small: Story = {
   args: {
     "data-btn": "sm",
+    children: "Small",
   },
 } as Story;
 
 export const Medium: Story = {
   args: {
     "data-btn": "md",
+    children: "Medium",
   },
 } as Story;
 
 export const Large: Story = {
   args: {
     "data-btn": "lg",
+    children: "Large",
   },
 } as Story;
 
@@ -82,5 +116,6 @@ export const Custom: Story = {
     styles: {
       "--btn-fs": "2rem",
     },
+    children: "Custom",
   },
 } as Story;