From 7f7c643e9b6c4e296435a3105066d07fb0336b24 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Tue, 3 Feb 2026 09:06:32 -0700 Subject: [PATCH 1/5] Added danger button --- app/components-preview/page.tsx | 157 ++++++++++++++++++++++++++++++++ app/components/Button.tsx | 14 ++- stories/Button.stories.js | 56 ++++++++++++ 3 files changed, 224 insertions(+), 3 deletions(-) diff --git a/app/components-preview/page.tsx b/app/components-preview/page.tsx index ac3f7ae..c9cae7c 100644 --- a/app/components-preview/page.tsx +++ b/app/components-preview/page.tsx @@ -37,6 +37,163 @@ export default function ComponentsPreview() {

+ {/* Button Section */} +
+

+ Button Component +

+ +
+
+
+

+ All Variants +

+
+ + + + + + + + + +
+
+ +
+

+ All Sizes - Danger Variant +

+
+ + + + + +
+
+ +
+

+ All Sizes - Danger Inverse Variant +

+
+ + + + + +
+
+ +
+

+ All Sizes - Ghost Variant +

+
+ + + + + +
+
+ +
+

+ States - Danger Variant +

+
+ + +
+
+ +
+

+ States - Danger Inverse Variant +

+
+ + +
+
+ +
+

+ States - Ghost Variant +

+
+ + +
+
+
+
+
+ {/* Tooltip Section */}

diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 10e6826..9720495 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -9,7 +9,9 @@ interface ButtonProps extends React.ButtonHTMLAttributes { | "outlined" | "dark" | "inverse" - | "ghost"; + | "ghost" + | "danger" + | "danger-inverse"; size?: "xsmall" | "small" | "medium" | "large" | "xlarge"; className?: string; disabled?: boolean; @@ -72,6 +74,10 @@ const Button = memo( "bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", ghost: "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-secondary)] active:text-[var(--color-content-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-transparent disabled:text-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", + danger: + "bg-transparent text-[var(--color-border-default-negative-primary)] border border-[var(--color-border-default-negative-primary)] hover:bg-[var(--color-surface-invert-negative-secondary)] hover:text-[var(--color-border-default-negative-primary)] hover:border-[var(--color-border-default-negative-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-border-default-negative-primary)] focus:outline-none focus:border-[var(--color-border-default-negative-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-invert-negative-primary)] active:text-[var(--color-content-invert-negative-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", + "danger-inverse": + "bg-transparent text-[var(--color-content-invert-negative-primary)] border border-[var(--color-border-invert-negative-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-negative-primary)] hover:border-[var(--color-border-invert-negative-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-negative-primary)] focus:outline-none focus:border-[var(--color-border-invert-negative-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-negative-primary)] active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", }; const hoverOutlineStyles: Record = { @@ -82,13 +88,15 @@ const Button = memo( xlarge: "hover:outline-[2.5px]", }; - // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, or ghost + // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, ghost, danger, or danger-inverse const outlineStyles = variant === "primary" || variant === "outlined" || variant === "dark" || variant === "inverse" || - variant === "ghost" + variant === "ghost" || + variant === "danger" || + variant === "danger-inverse" ? "" : hoverOutlineStyles[size]; diff --git a/stories/Button.stories.js b/stories/Button.stories.js index cf525ab..79a4588 100644 --- a/stories/Button.stories.js +++ b/stories/Button.stories.js @@ -23,6 +23,8 @@ export default { "dark", "inverse", "ghost", + "danger", + "danger-inverse", ], description: "The visual style variant of the button", }, @@ -79,6 +81,12 @@ export const Variants = { + + ), @@ -292,6 +300,48 @@ export const AllVariants = { +
+

Danger Variant

+
+ + + + + +
+
+ +
+

Danger Inverse Variant

+
+ + + + + +
+
+

Disabled States

@@ -316,6 +366,12 @@ export const AllVariants = { + +
-- 2.43.0 From 5beb3193cb153832bbb212ad94671a9ed3c62049 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Tue, 3 Feb 2026 09:20:24 -0700 Subject: [PATCH 2/5] Added ghost button --- app/components-preview/page.tsx | 40 +++++++++++++++++++++++++++++++++ app/components/Button.tsx | 8 +++++-- stories/Button.stories.js | 28 +++++++++++++++++++++++ 3 files changed, 74 insertions(+), 2 deletions(-) diff --git a/app/components-preview/page.tsx b/app/components-preview/page.tsx index c9cae7c..9e3b05b 100644 --- a/app/components-preview/page.tsx +++ b/app/components-preview/page.tsx @@ -71,6 +71,9 @@ export default function ComponentsPreview() { + @@ -149,6 +152,29 @@ export default function ComponentsPreview() { +
+

+ All Sizes - Ghost Inverse Variant +

+
+ + + + + +
+
+

States - Danger Variant @@ -190,6 +216,20 @@ export default function ComponentsPreview() {

+ +
+

+ States - Ghost Inverse Variant +

+
+ + +
+

diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 9720495..556ff9d 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -10,6 +10,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes { | "dark" | "inverse" | "ghost" + | "ghost-inverse" | "danger" | "danger-inverse"; size?: "xsmall" | "small" | "medium" | "large" | "xlarge"; @@ -73,7 +74,9 @@ const Button = memo( inverse: "bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", ghost: - "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-secondary)] active:text-[var(--color-content-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-transparent disabled:text-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", + "bg-transparent text-[var(--color-content-default-brand-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-default-primary)] hover:border-transparent hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", + "ghost-inverse": + "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-invert-primary)] hover:border-transparent hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-brand-primary)] focus:outline-none focus:border-transparent focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", danger: "bg-transparent text-[var(--color-border-default-negative-primary)] border border-[var(--color-border-default-negative-primary)] hover:bg-[var(--color-surface-invert-negative-secondary)] hover:text-[var(--color-border-default-negative-primary)] hover:border-[var(--color-border-default-negative-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-border-default-negative-primary)] focus:outline-none focus:border-[var(--color-border-default-negative-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-invert-negative-primary)] active:text-[var(--color-content-invert-negative-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", "danger-inverse": @@ -88,13 +91,14 @@ const Button = memo( xlarge: "hover:outline-[2.5px]", }; - // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, ghost, danger, or danger-inverse + // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, ghost, ghost-inverse, danger, or danger-inverse const outlineStyles = variant === "primary" || variant === "outlined" || variant === "dark" || variant === "inverse" || variant === "ghost" || + variant === "ghost-inverse" || variant === "danger" || variant === "danger-inverse" ? "" diff --git a/stories/Button.stories.js b/stories/Button.stories.js index 79a4588..bb1f813 100644 --- a/stories/Button.stories.js +++ b/stories/Button.stories.js @@ -23,6 +23,7 @@ export default { "dark", "inverse", "ghost", + "ghost-inverse", "danger", "danger-inverse", ], @@ -81,6 +82,9 @@ export const Variants = { + @@ -300,6 +304,27 @@ export const AllVariants = { +
+

Ghost Inverse Variant

+
+ + + + + +
+
+

Danger Variant

@@ -366,6 +391,9 @@ export const AllVariants = { + -- 2.43.0 From 8f0db08d0f9b3d1a57e2fa6149a38075878cb5fc Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Tue, 3 Feb 2026 10:02:18 -0700 Subject: [PATCH 3/5] Update button components --- app/components-preview/page.tsx | 34 ++--- .../AskOrganizer/AskOrganizer.view.tsx | 2 +- app/components/Button.tsx | 39 ++--- .../ContentLockup/ContentLockup.view.tsx | 6 +- .../HomeHeader/HomeHeader.container.tsx | 2 +- .../ModalFooter/ModalFooter.view.tsx | 4 +- .../NumberedCards/NumberedCards.view.tsx | 2 +- app/components/RuleStack/RuleStack.view.tsx | 2 +- app/tailwind.css | 2 +- stories/Button.stories.js | 138 ++++++------------ 10 files changed, 86 insertions(+), 145 deletions(-) diff --git a/app/components-preview/page.tsx b/app/components-preview/page.tsx index 9e3b05b..4d8e60c 100644 --- a/app/components-preview/page.tsx +++ b/app/components-preview/page.tsx @@ -50,23 +50,17 @@ export default function ComponentsPreview() { All Variants
- - - - - - - - @@ -522,7 +516,7 @@ export default function ComponentsPreview() {
{/* Large button for md and lg breakpoints */}
-
{/* XLarge button for xl breakpoint */}
-
diff --git a/app/components/HomeHeader/HomeHeader.container.tsx b/app/components/HomeHeader/HomeHeader.container.tsx index dd21d02..4fb1e8f 100644 --- a/app/components/HomeHeader/HomeHeader.container.tsx +++ b/app/components/HomeHeader/HomeHeader.container.tsx @@ -150,7 +150,7 @@ const HomeHeaderContainer = memo(() => { return (
@@ -47,7 +47,7 @@ export function ModalFooterView({ {showNextButton && (
diff --git a/app/components/RuleStack/RuleStack.view.tsx b/app/components/RuleStack/RuleStack.view.tsx index 671385f..a735e46 100644 --- a/app/components/RuleStack/RuleStack.view.tsx +++ b/app/components/RuleStack/RuleStack.view.tsx @@ -82,7 +82,7 @@ export function RuleStackView({ {/* See all templates button */}
-
diff --git a/app/tailwind.css b/app/tailwind.css index 7642f27..7d7b680 100644 --- a/app/tailwind.css +++ b/app/tailwind.css @@ -662,7 +662,7 @@ --color-surface-default-brand-lavender: var(--color-lavender-lavender200); --color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100); --color-surface-default-brand-lime: var(--color-lime-lime100); - --color-surface-default-brand-primary: var(--color-yellow-yellow100); + --color-surface-default-brand-primary: var(--color-yellow-yellow1000); --color-surface-default-brand-secondary: var(--color-yellow-yellow800); --color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50); --color-surface-default-brand-rust: var(--color-rust-rust100); diff --git a/stories/Button.stories.js b/stories/Button.stories.js index bb1f813..efd0684 100644 --- a/stories/Button.stories.js +++ b/stories/Button.stories.js @@ -16,12 +16,10 @@ export default { variant: { control: { type: "select" }, options: [ - "default", - "secondary", - "primary", - "outlined", - "dark", - "inverse", + "filled", + "filled-inverse", + "outline", + "outline-inverse", "ghost", "ghost-inverse", "danger", @@ -61,23 +59,17 @@ export const Variants = { render: (_args) => (
- - - - - - - - - - -
-
- -
-

Secondary Variant

-
- - - - -
-

Primary Variant

+

Filled Inverse Variant

- - - - -
-

Outlined Variant

+

Outline Variant

- - - - -
-

Dark Variant

+

Outline Inverse Variant

- - - - - -
-
- -
-

Inverse Variant

-
- - - - -
@@ -370,23 +330,17 @@ export const AllVariants = {

Disabled States

- - - - - -
{/* Large button for md and lg breakpoints */}
-
{/* XLarge button for xl breakpoint */}
-
diff --git a/app/components/NumberedCards/NumberedCards.view.tsx b/app/components/NumberedCards/NumberedCards.view.tsx index dd9bef5..acc48fe 100644 --- a/app/components/NumberedCards/NumberedCards.view.tsx +++ b/app/components/NumberedCards/NumberedCards.view.tsx @@ -47,13 +47,13 @@ function NumberedCardsView({ {/* Call to Action Button */}
- {/* Default button for xsm and sm breakpoints */} + {/* Filled button for xsm and sm breakpoints */}
-
- {/* Outlined button for lg and xlg breakpoints */} + {/* Outline button for lg and xlg breakpoints */}