Merge pull request #6340 from signalco-io/feat/ui-primitives/adjusted…

…-button-styles feat(ui-primitives): Adjusted button styles
signalco-io · Dec 3, 2024 · 4a595f6 · 4a595f6
2 parents 5bc0531 + df5e852
commit 4a595f6
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 11 deletions.
diff --git a/web/apps/ui-docs/stories/Primitives/Button.stories.tsx b/web/apps/ui-docs/stories/Primitives/Button.stories.tsx
@@ -11,14 +11,63 @@ export const Default: Story = {
     }
 };
 
-export const VariantPlain: Story = {
+export const Plain: Story = {
     args: {
         variant: 'plain',
         ...Default.args
     }
 };
 
-export const VariantSoftOnBackground: Story = {
+export const PlainOnBackground: Story = {
+    args: {
+        variant: 'plain',
+        ...Default.args
+    },
+    decorators: [
+        (Story) => (
+            <div className="p-4 bg-muted">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export const PlainOnCard: Story = {
+    args: {
+        variant: 'plain',
+        ...Default.args
+    },
+    decorators: [
+        (Story) => (
+            <Card>
+                <Story />
+            </Card>
+        )
+    ]
+};
+
+export const PlainOnMuted: Story = {
+    args: {
+        variant: 'plain',
+        ...Default.args
+    },
+    decorators: [
+        (Story) => (
+            <div className="p-4 bg-muted">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export const Soft: Story = {
+    args: {
+        variant: 'soft',
+        ...Default.args
+    }
+};
+
+export const SoftOnBackground: Story = {
     args: {
         variant: 'soft',
         ...Default.args
@@ -32,7 +81,7 @@ export const VariantSoftOnBackground: Story = {
     ]
 };
 
-export const VariantSoftOnCard: Story = {
+export const SoftOnCard: Story = {
     args: {
         variant: 'soft',
         ...Default.args
@@ -46,21 +95,35 @@ export const VariantSoftOnCard: Story = {
     ]
 };
 
-export const VariantSolid: Story = {
+export const SoftOnMuted: Story = {
+    args: {
+        variant: 'soft',
+        ...Default.args
+    },
+    decorators: [
+        (Story) => (
+            <div className="p-4 bg-muted">
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export const Solid: Story = {
     args: {
         variant: 'solid',
         ...Default.args
     }
 };
 
-export const VariantOulined: Story = {
+export const Oulined: Story = {
     args: {
         variant: 'outlined',
         ...Default.args
     }
 };
 
-export const VariantLink: Story = {
+export const Link: Story = {
     args: {
         variant: 'link',
         ...Default.args

diff --git a/web/packages/ui-primitives/package.json b/web/packages/ui-primitives/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@signalco/ui-primitives",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "license": "MIT",
     "type": "module",
     "sideEffects": false,

diff --git a/web/packages/ui-primitives/src/Button/Button.tsx b/web/packages/ui-primitives/src/Button/Button.tsx
@@ -49,10 +49,10 @@ const Button = forwardRef<HTMLElement, ButtonProps>(({
             ref={ref as any}
             className={cx(
                 'select-none inline-flex gap-1 items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background cursor-default',
-                (!variant || variant === 'soft') && 'bg-primary/15 text-secondary-foreground hover:bg-primary/25',
-                variant === 'outlined' && 'border border-input hover:bg-accent hover:text-accent-foreground',
-                variant === 'plain' && 'hover:bg-accent hover:text-accent-foreground',
-                variant === 'solid' && 'bg-primary text-primary-foreground hover:bg-primary/70',
+                (!variant || variant === 'soft') && 'bg-primary/15 text-primary hover:bg-primary/25 active:bg-primary/35',
+                variant === 'outlined' && 'border border-accent-foreground hover:bg-accent hover:text-accent-foreground active:bg-primary/10',
+                variant === 'plain' && 'hover:bg-primary/10 hover:text-accent-foreground active:bg-primary/20',
+                variant === 'solid' && 'bg-primary text-primary-foreground hover:bg-primary/70 active:bg-primary/80',
                 (!size || size === 'md') && 'h-10 py-2 px-4',
                 size === 'xs' && 'h-7 px-2 gap-0.5',
                 size === 'sm' && 'h-9 px-3 gap-1',