Merge pull request 'Button Updates' (#36) from adilallo/component/ButtonUpdates into main
Reviewed-on: #36
This commit was merged in pull request #36.
This commit is contained in:
@@ -37,6 +37,197 @@ export default function ComponentsPreview() {
|
|||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
{/* Button Section */}
|
||||||
|
<section className="space-y-[var(--spacing-scale-024)]">
|
||||||
|
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||||
|
Button Component
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||||
|
<div className="space-y-[var(--spacing-scale-016)]">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||||
|
All Variants
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
|
||||||
|
<Button variant="filled" size="medium">
|
||||||
|
Filled
|
||||||
|
</Button>
|
||||||
|
<Button variant="filled-inverse" size="medium">
|
||||||
|
Filled Inverse
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="medium">
|
||||||
|
Outline
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline-inverse" size="medium">
|
||||||
|
Outline Inverse
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="medium">
|
||||||
|
Ghost
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="medium">
|
||||||
|
Ghost Inverse
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="medium">
|
||||||
|
Danger
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="medium">
|
||||||
|
Danger Inverse
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||||
|
All Sizes - Danger Variant
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
|
||||||
|
<Button variant="danger" size="xsmall">
|
||||||
|
XSmall
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="small">
|
||||||
|
Small
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="medium">
|
||||||
|
Medium
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="large">
|
||||||
|
Large
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="xlarge">
|
||||||
|
XLarge
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||||
|
All Sizes - Danger Inverse Variant
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
|
||||||
|
<Button variant="danger-inverse" size="xsmall">
|
||||||
|
XSmall
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="small">
|
||||||
|
Small
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="medium">
|
||||||
|
Medium
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="large">
|
||||||
|
Large
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="xlarge">
|
||||||
|
XLarge
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||||
|
All Sizes - Ghost Variant
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
|
||||||
|
<Button variant="ghost" size="xsmall">
|
||||||
|
XSmall
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="small">
|
||||||
|
Small
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="medium">
|
||||||
|
Medium
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="large">
|
||||||
|
Large
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="xlarge">
|
||||||
|
XLarge
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||||
|
All Sizes - Ghost Inverse Variant
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
|
||||||
|
<Button variant="ghost-inverse" size="xsmall">
|
||||||
|
XSmall
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="small">
|
||||||
|
Small
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="medium">
|
||||||
|
Medium
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="large">
|
||||||
|
Large
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="xlarge">
|
||||||
|
XLarge
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||||
|
States - Danger Variant
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
|
||||||
|
<Button variant="danger" size="medium">
|
||||||
|
Normal
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="medium" disabled>
|
||||||
|
Disabled
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||||
|
States - Danger Inverse Variant
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
|
||||||
|
<Button variant="danger-inverse" size="medium">
|
||||||
|
Normal
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="medium" disabled>
|
||||||
|
Disabled
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||||
|
States - Ghost Variant
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
|
||||||
|
<Button variant="ghost" size="medium">
|
||||||
|
Normal
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="medium" disabled>
|
||||||
|
Disabled
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||||
|
States - Ghost Inverse Variant
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
|
||||||
|
<Button variant="ghost-inverse" size="medium">
|
||||||
|
Normal
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="medium" disabled>
|
||||||
|
Disabled
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Tooltip Section */}
|
{/* Tooltip Section */}
|
||||||
<section className="space-y-[var(--spacing-scale-024)]">
|
<section className="space-y-[var(--spacing-scale-024)]">
|
||||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||||
@@ -46,19 +237,19 @@ export default function ComponentsPreview() {
|
|||||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||||
<div className="flex flex-wrap gap-[var(--spacing-scale-024)] items-center">
|
<div className="flex flex-wrap gap-[var(--spacing-scale-024)] items-center">
|
||||||
<Tooltip text="Tooltip positioned at top" position="top">
|
<Tooltip text="Tooltip positioned at top" position="top">
|
||||||
<Button variant="default" size="medium">
|
<Button variant="filled" size="medium">
|
||||||
Hover me (Top)
|
Hover me (Top)
|
||||||
</Button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
||||||
<Tooltip text="Tooltip positioned at bottom" position="bottom">
|
<Tooltip text="Tooltip positioned at bottom" position="bottom">
|
||||||
<Button variant="primary" size="medium">
|
<Button variant="filled-inverse" size="medium">
|
||||||
Hover me (Bottom)
|
Hover me (Bottom)
|
||||||
</Button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
||||||
<Tooltip text="Disabled tooltip" disabled>
|
<Tooltip text="Disabled tooltip" disabled>
|
||||||
<Button variant="secondary" size="medium">
|
<Button variant="ghost" size="medium">
|
||||||
Disabled Tooltip
|
Disabled Tooltip
|
||||||
</Button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
@@ -325,7 +516,7 @@ export default function ComponentsPreview() {
|
|||||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||||
<div className="space-y-[var(--spacing-scale-016)]">
|
<div className="space-y-[var(--spacing-scale-016)]">
|
||||||
<Button
|
<Button
|
||||||
variant="primary"
|
variant="filled-inverse"
|
||||||
size="medium"
|
size="medium"
|
||||||
onClick={() => setCreateOpen(true)}
|
onClick={() => setCreateOpen(true)}
|
||||||
>
|
>
|
||||||
@@ -337,7 +528,7 @@ export default function ComponentsPreview() {
|
|||||||
Step {createStep} of 3
|
Step {createStep} of 3
|
||||||
</p>
|
</p>
|
||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="ghost"
|
||||||
size="small"
|
size="small"
|
||||||
onClick={() => setCreateStep((prev) => Math.max(1, prev - 1))}
|
onClick={() => setCreateStep((prev) => Math.max(1, prev - 1))}
|
||||||
disabled={createStep === 1}
|
disabled={createStep === 1}
|
||||||
@@ -345,7 +536,7 @@ export default function ComponentsPreview() {
|
|||||||
Previous Step
|
Previous Step
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="ghost"
|
||||||
size="small"
|
size="small"
|
||||||
onClick={() => setCreateStep((prev) => Math.min(3, prev + 1))}
|
onClick={() => setCreateStep((prev) => Math.min(3, prev + 1))}
|
||||||
disabled={createStep === 3}
|
disabled={createStep === 3}
|
||||||
|
|||||||
@@ -50,10 +50,10 @@ export function AlertView({
|
|||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="xsmall"
|
size="large"
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
ariaLabel="Close alert"
|
ariaLabel="Close alert"
|
||||||
className="shrink-0"
|
className="shrink-0 [&_svg_path]:transition-colors [&_svg_path]:duration-200 hover:[&_svg_path]:fill-[var(--color-content-default-primary)]"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
width="20"
|
width="20"
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ function AskOrganizerView({
|
|||||||
<Button
|
<Button
|
||||||
href={buttonHref}
|
href={buttonHref}
|
||||||
size="large"
|
size="large"
|
||||||
variant={variant === "inverse" ? "primary" : "default"}
|
variant={variant === "inverse" ? "filled-inverse" : "filled"}
|
||||||
className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
|
className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
|
||||||
onClick={onContactClick}
|
onClick={onContactClick}
|
||||||
ariaLabel={ariaLabel}
|
ariaLabel={ariaLabel}
|
||||||
|
|||||||
+35
-30
@@ -3,13 +3,14 @@ import { memo } from "react";
|
|||||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
variant?:
|
variant?:
|
||||||
| "default"
|
| "filled"
|
||||||
| "secondary"
|
| "filled-inverse"
|
||||||
| "primary"
|
| "outline"
|
||||||
| "outlined"
|
| "outline-inverse"
|
||||||
| "dark"
|
| "ghost"
|
||||||
| "inverse"
|
| "ghost-inverse"
|
||||||
| "ghost";
|
| "danger"
|
||||||
|
| "danger-inverse";
|
||||||
size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
|
size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
|
||||||
className?: string;
|
className?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
@@ -26,7 +27,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|||||||
const Button = memo<ButtonProps>(
|
const Button = memo<ButtonProps>(
|
||||||
({
|
({
|
||||||
children,
|
children,
|
||||||
variant = "default",
|
variant = "filled",
|
||||||
size = "xsmall",
|
size = "xsmall",
|
||||||
className = "",
|
className = "",
|
||||||
disabled = false,
|
disabled = false,
|
||||||
@@ -40,14 +41,14 @@ const Button = memo<ButtonProps>(
|
|||||||
}) => {
|
}) => {
|
||||||
const sizeStyles: Record<string, string> = {
|
const sizeStyles: Record<string, string> = {
|
||||||
xsmall:
|
xsmall:
|
||||||
"px-[var(--spacing-scale-006)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
|
"p-[var(--spacing-scale-006)] gap-[var(--spacing-scale-002)]",
|
||||||
small:
|
small:
|
||||||
"px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]",
|
"p-[var(--spacing-scale-008)] gap-[var(--spacing-scale-002)]",
|
||||||
medium: "p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
|
medium: "p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
|
||||||
large:
|
large:
|
||||||
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
|
"p-[var(--spacing-scale-012)] gap-[var(--spacing-scale-006)]",
|
||||||
xlarge:
|
xlarge:
|
||||||
"px-[var(--spacing-scale-020)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-008)]",
|
"p-[var(--spacing-scale-016)] gap-[var(--spacing-scale-008)]",
|
||||||
};
|
};
|
||||||
|
|
||||||
const fontStyles: Record<string, string> = {
|
const fontStyles: Record<string, string> = {
|
||||||
@@ -59,19 +60,21 @@ const Button = memo<ButtonProps>(
|
|||||||
};
|
};
|
||||||
|
|
||||||
const variantStyles: Record<string, string> = {
|
const variantStyles: Record<string, string> = {
|
||||||
default:
|
filled:
|
||||||
"bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset hover:scale-[1.02] hover:shadow-lg focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:scale-[1.02] active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 disabled:hover:shadow-none disabled:hover:outline-none",
|
"bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-invert-brand-primary)] hover:border-[var(--color-border-invert-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-inverse-primary)] focus:text-[var(--color-content-invert-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-[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-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",
|
||||||
secondary:
|
"filled-inverse":
|
||||||
"bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-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-brand-primary)] 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-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-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-default-brand-primary)] 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-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",
|
||||||
primary:
|
outline:
|
||||||
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] 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",
|
"bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-border-invert-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-border-invert-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-transparent active:text-[var(--color-content-default-primary)] active:border-[1.5px] 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-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||||
outlined:
|
"outline-inverse": "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-[var(--color-border-default-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-invert-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-border-default-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-transparent active:text-[var(--color-content-invert-primary)] active:border-[1.5px] 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-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||||
"bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-content-default-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-[1.5px] disabled:border-[var(--color-surface-default-secondary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
|
||||||
dark: "bg-transparent text-[var(--color-content-inverse-primary)] border border-[var(--border-color-default-primary)] hover:bg-transparent hover:text-[var(--color-content-inverse-brand-primary)] hover:border hover:border-[var(--border-color-inverse-brandprimary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-inverse-primary)] focus:outline-none focus:border focus:border-[var(--border-color-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
|
||||||
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:
|
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":
|
||||||
|
"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<string, string> = {
|
const hoverOutlineStyles: Record<string, string> = {
|
||||||
@@ -82,13 +85,15 @@ const Button = memo<ButtonProps>(
|
|||||||
xlarge: "hover:outline-[2.5px]",
|
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 filled variant, not filled-inverse, outline, outline-inverse, ghost, ghost-inverse, danger, or danger-inverse
|
||||||
const outlineStyles =
|
const outlineStyles =
|
||||||
variant === "primary" ||
|
variant === "filled-inverse" ||
|
||||||
variant === "outlined" ||
|
variant === "outline" ||
|
||||||
variant === "dark" ||
|
variant === "outline-inverse" ||
|
||||||
variant === "inverse" ||
|
variant === "ghost" ||
|
||||||
variant === "ghost"
|
variant === "ghost-inverse" ||
|
||||||
|
variant === "danger" ||
|
||||||
|
variant === "danger-inverse"
|
||||||
? ""
|
? ""
|
||||||
: hoverOutlineStyles[size];
|
: hoverOutlineStyles[size];
|
||||||
|
|
||||||
|
|||||||
@@ -93,19 +93,19 @@ function ContentLockupView({
|
|||||||
<div className="flex justify-start">
|
<div className="flex justify-start">
|
||||||
{/* Small button for xsm and sm breakpoints */}
|
{/* Small button for xsm and sm breakpoints */}
|
||||||
<div className="block md:hidden">
|
<div className="block md:hidden">
|
||||||
<Button variant="primary" size="small">
|
<Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="small">
|
||||||
{ctaText}
|
{ctaText}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{/* Large button for md and lg breakpoints */}
|
{/* Large button for md and lg breakpoints */}
|
||||||
<div className="hidden md:block xl:hidden">
|
<div className="hidden md:block xl:hidden">
|
||||||
<Button variant="primary" size="large" className={buttonClassName}>
|
<Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="large" className={buttonClassName}>
|
||||||
{ctaText}
|
{ctaText}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{/* XLarge button for xl breakpoint */}
|
{/* XLarge button for xl breakpoint */}
|
||||||
<div className="hidden xl:block">
|
<div className="hidden xl:block">
|
||||||
<Button variant="primary" size="xlarge">
|
<Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="xlarge">
|
||||||
{ctaText}
|
{ctaText}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -150,7 +150,7 @@ const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
|
|||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
size={buttonSize}
|
size={buttonSize}
|
||||||
variant="secondary"
|
variant="ghost"
|
||||||
ariaLabel={t("ariaLabels.createNewRule")}
|
ariaLabel={t("ariaLabels.createNewRule")}
|
||||||
>
|
>
|
||||||
{renderAvatarGroup(containerSize, avatarSize)}
|
{renderAvatarGroup(containerSize, avatarSize)}
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ export function ModalFooterView({
|
|||||||
{/* Back Button - Absolutely positioned bottom left */}
|
{/* Back Button - Absolutely positioned bottom left */}
|
||||||
{showBackButton && (
|
{showBackButton && (
|
||||||
<div className="absolute left-[16px] top-[12px]">
|
<div className="absolute left-[16px] top-[12px]">
|
||||||
<Button variant="outlined" size="medium" onClick={onBack}>
|
<Button variant="outline" size="medium" onClick={onBack}>
|
||||||
{defaultBackText}
|
{defaultBackText}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@@ -47,7 +47,7 @@ export function ModalFooterView({
|
|||||||
{showNextButton && (
|
{showNextButton && (
|
||||||
<div className="absolute right-[16px] top-[12px]">
|
<div className="absolute right-[16px] top-[12px]">
|
||||||
<Button
|
<Button
|
||||||
variant="default"
|
variant="filled"
|
||||||
size="medium"
|
size="medium"
|
||||||
onClick={onNext}
|
onClick={onNext}
|
||||||
disabled={nextButtonDisabled}
|
disabled={nextButtonDisabled}
|
||||||
|
|||||||
@@ -47,15 +47,15 @@ function NumberedCardsView({
|
|||||||
|
|
||||||
{/* Call to Action Button */}
|
{/* Call to Action Button */}
|
||||||
<div className="text-center sm:text-left lg:text-center">
|
<div className="text-center sm:text-left lg:text-center">
|
||||||
{/* Default button for xsm and sm breakpoints */}
|
{/* Filled button for xsm and sm breakpoints */}
|
||||||
<div className="block lg:hidden">
|
<div className="block lg:hidden">
|
||||||
<Button variant="default" size="large">
|
<Button variant="filled" size="large">
|
||||||
{t("numberedCards.buttons.createCommunityRule")}
|
{t("numberedCards.buttons.createCommunityRule")}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{/* Outlined button for lg and xlg breakpoints */}
|
{/* Outline button for lg and xlg breakpoints */}
|
||||||
<div className="hidden lg:block">
|
<div className="hidden lg:block">
|
||||||
<Button variant="outlined" size="large">
|
<Button variant="outline" size="large">
|
||||||
{t("numberedCards.buttons.seeHowItWorks")}
|
{t("numberedCards.buttons.seeHowItWorks")}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -82,7 +82,7 @@ export function RuleStackView({
|
|||||||
|
|
||||||
{/* See all templates button */}
|
{/* See all templates button */}
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<Button variant="outlined" size="large">
|
<Button variant="outline" size="large">
|
||||||
{t("button.seeAllTemplates")}
|
{t("button.seeAllTemplates")}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+1
-1
@@ -662,7 +662,7 @@
|
|||||||
--color-surface-default-brand-lavender: var(--color-lavender-lavender200);
|
--color-surface-default-brand-lavender: var(--color-lavender-lavender200);
|
||||||
--color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100);
|
--color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100);
|
||||||
--color-surface-default-brand-lime: var(--color-lime-lime100);
|
--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-secondary: var(--color-yellow-yellow800);
|
||||||
--color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50);
|
--color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50);
|
||||||
--color-surface-default-brand-rust: var(--color-rust-rust100);
|
--color-surface-default-brand-rust: var(--color-rust-rust100);
|
||||||
|
|||||||
+130
-92
@@ -16,13 +16,14 @@ export default {
|
|||||||
variant: {
|
variant: {
|
||||||
control: { type: "select" },
|
control: { type: "select" },
|
||||||
options: [
|
options: [
|
||||||
"default",
|
"filled",
|
||||||
"secondary",
|
"filled-inverse",
|
||||||
"primary",
|
"outline",
|
||||||
"outlined",
|
"outline-inverse",
|
||||||
"dark",
|
|
||||||
"inverse",
|
|
||||||
"ghost",
|
"ghost",
|
||||||
|
"ghost-inverse",
|
||||||
|
"danger",
|
||||||
|
"danger-inverse",
|
||||||
],
|
],
|
||||||
description: "The visual style variant of the button",
|
description: "The visual style variant of the button",
|
||||||
},
|
},
|
||||||
@@ -58,27 +59,30 @@ export const Variants = {
|
|||||||
render: (_args) => (
|
render: (_args) => (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="space-x-4">
|
<div className="space-x-4">
|
||||||
<Button {..._args} variant="default">
|
<Button {..._args} variant="filled">
|
||||||
Default
|
Filled
|
||||||
</Button>
|
</Button>
|
||||||
<Button {..._args} variant="secondary">
|
<Button {..._args} variant="filled-inverse">
|
||||||
Secondary
|
Filled Inverse
|
||||||
</Button>
|
</Button>
|
||||||
<Button {..._args} variant="primary">
|
<Button {..._args} variant="outline">
|
||||||
Primary
|
Outline
|
||||||
</Button>
|
</Button>
|
||||||
<Button {..._args} variant="outlined">
|
<Button {..._args} variant="outline-inverse">
|
||||||
Outlined
|
Outline Inverse
|
||||||
</Button>
|
|
||||||
<Button {..._args} variant="dark">
|
|
||||||
Dark
|
|
||||||
</Button>
|
|
||||||
<Button {..._args} variant="inverse">
|
|
||||||
Inverse
|
|
||||||
</Button>
|
</Button>
|
||||||
<Button {..._args} variant="ghost">
|
<Button {..._args} variant="ghost">
|
||||||
Ghost
|
Ghost
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button {..._args} variant="ghost-inverse">
|
||||||
|
Ghost Inverse
|
||||||
|
</Button>
|
||||||
|
<Button {..._args} variant="danger">
|
||||||
|
Danger
|
||||||
|
</Button>
|
||||||
|
<Button {..._args} variant="danger-inverse">
|
||||||
|
Danger Inverse
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
@@ -94,7 +98,7 @@ export const Variants = {
|
|||||||
export const Sizes = {
|
export const Sizes = {
|
||||||
args: {
|
args: {
|
||||||
children: "Button",
|
children: "Button",
|
||||||
variant: "default",
|
variant: "filled",
|
||||||
},
|
},
|
||||||
render: (_args) => (
|
render: (_args) => (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
@@ -130,7 +134,7 @@ export const States = {
|
|||||||
args: {
|
args: {
|
||||||
children: "Button",
|
children: "Button",
|
||||||
size: "large",
|
size: "large",
|
||||||
variant: "default",
|
variant: "filled",
|
||||||
},
|
},
|
||||||
render: (_args) => (
|
render: (_args) => (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
@@ -156,116 +160,84 @@ export const AllVariants = {
|
|||||||
render: () => (
|
render: () => (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-white font-semibold mb-3">Default Variant</h3>
|
<h3 className="text-white font-semibold mb-3">Filled Variant</h3>
|
||||||
<div className="space-x-4">
|
<div className="space-x-4">
|
||||||
<Button size="xsmall">XSmall</Button>
|
<Button variant="filled" size="xsmall">
|
||||||
<Button size="small">Small</Button>
|
|
||||||
<Button size="medium">Medium</Button>
|
|
||||||
<Button size="large">Large</Button>
|
|
||||||
<Button size="xlarge">XLarge</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 className="text-white font-semibold mb-3">Secondary Variant</h3>
|
|
||||||
<div className="space-x-4">
|
|
||||||
<Button variant="secondary" size="xsmall">
|
|
||||||
XSmall
|
XSmall
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="secondary" size="small">
|
<Button variant="filled" size="small">
|
||||||
Small
|
Small
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="secondary" size="medium">
|
<Button variant="filled" size="medium">
|
||||||
Medium
|
Medium
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="secondary" size="large">
|
<Button variant="filled" size="large">
|
||||||
Large
|
Large
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="secondary" size="xlarge">
|
<Button variant="filled" size="xlarge">
|
||||||
XLarge
|
XLarge
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-white font-semibold mb-3">Primary Variant</h3>
|
<h3 className="text-white font-semibold mb-3">Filled Inverse Variant</h3>
|
||||||
<div className="space-x-4">
|
<div className="space-x-4">
|
||||||
<Button variant="primary" size="xsmall">
|
<Button variant="filled-inverse" size="xsmall">
|
||||||
XSmall
|
XSmall
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="primary" size="small">
|
<Button variant="filled-inverse" size="small">
|
||||||
Small
|
Small
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="primary" size="medium">
|
<Button variant="filled-inverse" size="medium">
|
||||||
Medium
|
Medium
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="primary" size="large">
|
<Button variant="filled-inverse" size="large">
|
||||||
Large
|
Large
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="primary" size="xlarge">
|
<Button variant="filled-inverse" size="xlarge">
|
||||||
XLarge
|
XLarge
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-white font-semibold mb-3">Outlined Variant</h3>
|
<h3 className="text-white font-semibold mb-3">Outline Variant</h3>
|
||||||
<div className="space-x-4">
|
<div className="space-x-4">
|
||||||
<Button variant="outlined" size="xsmall">
|
<Button variant="outline" size="xsmall">
|
||||||
XSmall
|
XSmall
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outlined" size="small">
|
<Button variant="outline" size="small">
|
||||||
Small
|
Small
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outlined" size="medium">
|
<Button variant="outline" size="medium">
|
||||||
Medium
|
Medium
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outlined" size="large">
|
<Button variant="outline" size="large">
|
||||||
Large
|
Large
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outlined" size="xlarge">
|
<Button variant="outline" size="xlarge">
|
||||||
XLarge
|
XLarge
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-white font-semibold mb-3">Dark Variant</h3>
|
<h3 className="text-white font-semibold mb-3">Outline Inverse Variant</h3>
|
||||||
<div className="space-x-4">
|
<div className="space-x-4">
|
||||||
<Button variant="dark" size="xsmall">
|
<Button variant="outline-inverse" size="xsmall">
|
||||||
XSmall
|
XSmall
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="dark" size="small">
|
<Button variant="outline-inverse" size="small">
|
||||||
Small
|
Small
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="dark" size="medium">
|
<Button variant="outline-inverse" size="medium">
|
||||||
Medium
|
Medium
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="dark" size="large">
|
<Button variant="outline-inverse" size="large">
|
||||||
Large
|
Large
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="dark" size="xlarge">
|
<Button variant="outline-inverse" size="xlarge">
|
||||||
XLarge
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 className="text-white font-semibold mb-3">Inverse Variant</h3>
|
|
||||||
<div className="space-x-4">
|
|
||||||
<Button variant="inverse" size="xsmall">
|
|
||||||
XSmall
|
|
||||||
</Button>
|
|
||||||
<Button variant="inverse" size="small">
|
|
||||||
Small
|
|
||||||
</Button>
|
|
||||||
<Button variant="inverse" size="medium">
|
|
||||||
Medium
|
|
||||||
</Button>
|
|
||||||
<Button variant="inverse" size="large">
|
|
||||||
Large
|
|
||||||
</Button>
|
|
||||||
<Button variant="inverse" size="xlarge">
|
|
||||||
XLarge
|
XLarge
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@@ -292,30 +264,96 @@ export const AllVariants = {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-white font-semibold mb-3">Ghost Inverse Variant</h3>
|
||||||
|
<div className="space-x-4">
|
||||||
|
<Button variant="ghost-inverse" size="xsmall">
|
||||||
|
XSmall
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="small">
|
||||||
|
Small
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="medium">
|
||||||
|
Medium
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="large">
|
||||||
|
Large
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="xlarge">
|
||||||
|
XLarge
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-white font-semibold mb-3">Danger Variant</h3>
|
||||||
|
<div className="space-x-4">
|
||||||
|
<Button variant="danger" size="xsmall">
|
||||||
|
XSmall
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="small">
|
||||||
|
Small
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="medium">
|
||||||
|
Medium
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="large">
|
||||||
|
Large
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="xlarge">
|
||||||
|
XLarge
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
|
||||||
|
<div className="space-x-4">
|
||||||
|
<Button variant="danger-inverse" size="xsmall">
|
||||||
|
XSmall
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="small">
|
||||||
|
Small
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="medium">
|
||||||
|
Medium
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="large">
|
||||||
|
Large
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="xlarge">
|
||||||
|
XLarge
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||||
<div className="space-x-4">
|
<div className="space-x-4">
|
||||||
<Button size="large" disabled>
|
<Button variant="filled" size="large" disabled>
|
||||||
Default Disabled
|
Filled Disabled
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="secondary" size="large" disabled>
|
<Button variant="filled-inverse" size="large" disabled>
|
||||||
Secondary Disabled
|
Filled Inverse Disabled
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="primary" size="large" disabled>
|
<Button variant="outline" size="large" disabled>
|
||||||
Primary Disabled
|
Outline Disabled
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outlined" size="large" disabled>
|
<Button variant="outline-inverse" size="large" disabled>
|
||||||
Outlined Disabled
|
Outline Inverse Disabled
|
||||||
</Button>
|
|
||||||
<Button variant="dark" size="large" disabled>
|
|
||||||
Dark Disabled
|
|
||||||
</Button>
|
|
||||||
<Button variant="inverse" size="large" disabled>
|
|
||||||
Inverse Disabled
|
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" size="large" disabled>
|
<Button variant="ghost" size="large" disabled>
|
||||||
Ghost Disabled
|
Ghost Disabled
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button variant="ghost-inverse" size="large" disabled>
|
||||||
|
Ghost Inverse Disabled
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger" size="large" disabled>
|
||||||
|
Danger Disabled
|
||||||
|
</Button>
|
||||||
|
<Button variant="danger-inverse" size="large" disabled>
|
||||||
|
Danger Inverse Disabled
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 508 KiB After Width: | Height: | Size: 503 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 656 KiB After Width: | Height: | Size: 650 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 342 KiB After Width: | Height: | Size: 339 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 612 KiB After Width: | Height: | Size: 605 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 883 KiB After Width: | Height: | Size: 882 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 402 KiB After Width: | Height: | Size: 393 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB After Width: | Height: | Size: 138 KiB |
Reference in New Issue
Block a user