Skip to content

Commit 670b747

Browse files
RomanPogorovRomanPogorov
committed
Buttons updated
1 parent 5fe61dc commit 670b747

4 files changed

Lines changed: 74 additions & 54 deletions

File tree

‎packages/react-components/src/components/ui/button.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ const buttonVariants = cva(
1515
variant: {
1616
primary:
1717
"bg-bg-link text-text-primary_on-brand shadow-xs hover:bg-bg-link-hover active:bg-bg-link disabled:bg-bg-disabled",
18-
critical:
19-
"bg-bg-error-primary-inverse text-fg-primary_inverse shadow-xs hover:bg-bg-error-primary-inverse-hover active:bg-bg-error-primary-inverse disabled:bg-bg-disabled",
2018
outline:
2119
"border border-border-primary bg-bg-primary text-text-tertiary shadow-xs hover:bg-bg-tertiary hover:text-fg-primary disabled:text-fg-disabled disabled:border-border-disabled",
22-
tertiary:
23-
"bg-bg-primary text-text-tertiary hover:text-text-secondary disabled:text-fg-disabled",
24-
ghost:
20+
critical:
21+
"bg-bg-error-primary_inverse text-text-primary_on-brand shadow-xs hover:bg-bg-error-primary_inverse_hover active:bg-bg-error-primary_inverse disabled:bg-bg-disabled",
22+
criticalInverse:
23+
"border typo-button-label-xs bg-transparent border-border-error_inverse text-text-primary_on-brand hover:border-border-error_inverse_hover disabled:text-text-error-secondary active:border-border-error_inverse disabled:bg-bg-error-primary_inverse",
24+
link: "text-text-tertiary hover:text-text-primary active:text-text-tertiary dark:hover:bg-accent/50",
25+
ghost:
2526
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
2627
},
2728
},

‎packages/react-components/src/index.css‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
--color-text-primary: var(--color-neutral-900);
1414
--color-text-secondary: var(--color-neutral-700);
1515
--color-text-secondary_hover: var(--color-neutral-800);
16-
--color-text-secondary_on-brand: var(--color-neutral-100);
1716
--color-text-primary_on-brand: var(--color-neutral-50);
17+
--color-text-secondary_on-brand: var(--color-neutral-100);
1818
--color-text-tertiary: var(--color-neutral-500);
1919
--color-text-quternary: var(--color-neutral-400);
2020
--color-text-quternary_hover: var(--color-neutral-500);
@@ -27,51 +27,48 @@
2727
--color-text-brand-secondary: var(--color-brand-300);
2828
--color-text-brand-secondary_hover: var(--color-brand-400);
2929
--color-text-error-primary: var(--color-red-500);
30+
--color-text-error-secondary: var(--color-brand-400);
3031
--color-text-success-primary: var(--color-green-500);
3132
--color-text-warning-primary: var(--color-yellow-500);
3233
--color-white: #ffffffff;
3334
--color-border-primary: var(--color-neutral-300);
34-
--color-border-primary-hover: var(--color-neutral-400);
35+
--color-border-primary_hover: var(--color-neutral-400);
3536
--color-border-secondary: var(--color-neutral-200);
3637
--color-border-disabled: var(--color-neutral-100);
38+
--color-border-brand: var(--color-brand-500);
3739
--color-border-error: var(--color-red-500);
40+
--color-border-error_inverse: var(--color-red-400);
41+
--color-border-error_inverse_hover: var(--color-red-300);
3842
--color-border-success: var(--color-green-500);
39-
--color-bg-primary: var(--color-white);
40-
--color-bg-primary-inverse: var(--color-neutral-900);
43+
--color-bg-primary: var(--white);
44+
--color-bg-primary_inverse: var(--color-neutral-900);
4145
--color-bg-secondary: var(--color-neutral-50);
4246
--color-bg-tertiary: var(--color-neutral-100);
4347
--color-bg-quaternary: var(--color-neutral-200);
4448
--color-bg-overlay: var(--color-neutral-900);
49+
--color-bg-disabled: var(--color-neutral-300);
50+
--color-bg-link: var(--color-blue-500);
51+
--color-bg-link_hover: var(--color-blue-600);
4552
--color-bg-error-primary: var(--color-red-50);
46-
--color-bg-error-primary-inverse: var(--color-red-500);
47-
--color-bg-error-primary-inverse-hover: var(--color-red-700);
53+
--color-bg-error-primary_inverse: var(--color-red-500);
54+
--color-bg-error-primary_inverse_hover: var(--color-red-700);
4855
--color-bg-error-secondary: var(--color-red-100);
4956
--color-bg-error-tertiary: var(--color-red-200);
5057
--color-bg-success-primary: var(--color-green-50);
51-
--color-bg-success-primary-inverse: var(--color-green-500);
58+
--color-bg-success-primary_inverse: var(--color-green-500);
5259
--color-bg-success-secondary: var(--color-green-100);
5360
--color-bg-warning-primary: var(--color-yellow-50);
54-
--color-bg-warning-primary-inverse: var(--color-yellow-500);
61+
--color-bg-warning-primary_inverse: var(--color-yellow-500);
5562
--color-bg-warning-secondary: var(--color-yellow-100);
56-
/* Brand-specific backgrounds */
57-
--color-bg-brand-primary: var(--color-cta);
58-
--color-bg-brand-primary-hover: var(--color-cta-hover);
59-
/* Link backgrounds from Figma */
60-
--color-bg-link: var(--color-blue-500);
61-
--color-bg-link-hover: var(--color-blue-600);
62-
--color-bg-disabled: #ccced3;
63-
/* Toolbar variants */
64-
--color-bg-toolbar-critical: transparent;
65-
--color-bg-toolbar-critical-solid: var(--color-bg-error-primary-inverse);
6663
--color-fg-primary: var(--color-neutral-900);
67-
--color-fg-primary_inverse: var(--color-white);
68-
--color-fg-primary-on-brand: var(--color-neutral-50);
64+
--color-fg-primary_inverse: var(--white);
65+
--color-fg-primary_on-brand: var(--color-neutral-50);
6966
--color-fg-secondary: var(--color-neutral-700);
70-
--color-fg-secondary-hover: var(--color-neutral-800);
71-
--color-fg-secondary-on-brand: var(--color-neutral-100);
67+
--color-fg-secondary_hover: var(--color-neutral-800);
68+
--color-fg-secondary_on-brand: var(--color-neutral-100);
7269
--color-fg-tertiary: var(--color-neutral-400);
73-
--color-fg-tertiary-hover: var(--color-neutral-500);
74-
--color-fg-tertiary-on-brand: var(--color-neutral-200);
70+
--color-fg-tertiary_hover: var(--color-neutral-500);
71+
--color-fg-tertiary_on-brand: var(--color-neutral-200);
7572
--color-fg-disabled: var(--color-neutral-300);
7673
--color-fg-brand-primary: var(--color-brand-500);
7774
--color-fg-brand-secondary: var(--color-brand-300);

‎packages/react-components/src/stories/Button.stories.tsx‎

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,18 @@ const meta = {
2121
"critical",
2222
"outline",
2323
"ghost",
24+
"link",
25+
"criticalInverse",
2426
],
2527
},
2628

2729
size: {
2830
control: "select",
29-
options: [
30-
"small",
31-
"regular",
32-
],
31+
options: ["small", "regular"],
3332
},
3433
},
3534
} satisfies Meta<typeof Button>;
3635

37-
3836
export default meta;
3937
type Story = StoryObj<typeof meta>;
4038

@@ -45,53 +43,77 @@ export const Default: Story = {
4543
disabled: false,
4644
},
4745
render: (args) => (
48-
<div className="p-6 flex justify-center items-center rounded-lg p-10 shadow-sm gap-4">
46+
<div
47+
className={`p-6 ${args.variant === "criticalInverse" ? "bg-red-700" : "bg-white"} flex justify-center items-center rounded-lg p-10 shadow-sm gap-4`}
48+
>
4949
<Button {...args}>Save</Button>
50-
<Button {...args}><Trash2 />Save</Button>
50+
<Button {...args}>
51+
<Trash2 />
52+
Save
53+
</Button>
5154
</div>
52-
)
55+
),
5356
};
5457

55-
5658
export const AllVariants: Story = {
5759
render: () => (
5860
<div className="p-6 min-h-screen">
5961
<div className=" rounded-lg p-6 shadow-sm">
60-
6162
{/* Header */}
6263
<div className="flex items-center gap-3 py-3 border-b border-gray-200 mb-4">
6364
<div className="w-30">Variant</div>
64-
<div className="min-w-100 text-sm font-medium text-gray-600"> Without icon </div>
65-
<div className="min-w-100 text-sm font-medium text-gray-600">With icon</div>
65+
<div className="min-w-100 text-sm font-medium text-gray-600">
66+
{" "}
67+
Without icon{" "}
68+
</div>
69+
<div className="min-w-100 text-sm font-medium text-gray-600">
70+
With icon
71+
</div>
6672
</div>
6773

6874
{["primary", "critical", "outline", "ghost"].map((variant) => (
6975
<div className="flex gap-3 items-center py-3 ">
7076
<div className="w-30"> {variant} </div>
7177
<div key={variant} className="flex gap-3 items-center w-100">
7278
<Button variant={variant}> Button </Button>
73-
<Button variant={variant} disabled> Button </Button>
74-
<Button variant={variant} size="small" > Button </Button>
75-
<Button variant={variant} size="small" disabled> Button </Button>
79+
<Button variant={variant} disabled>
80+
{" "}
81+
Button{" "}
82+
</Button>
83+
<Button variant={variant} size="small">
84+
{" "}
85+
Button{" "}
86+
</Button>
87+
<Button variant={variant} size="small" disabled>
88+
{" "}
89+
Button{" "}
90+
</Button>
7691
</div>
7792

7893
<div key={variant} className="flex gap-3 items-center w-100">
79-
<Button variant={variant}> <Trash2 /> Button </Button>
80-
<Button variant={variant} disabled> <Trash2 /> Button </Button>
81-
<Button variant={variant} size="small" > <Trash2 /> Button </Button>
82-
<Button variant={variant} size="small" disabled> <Trash2 /> Button </Button>
94+
<Button variant={variant}>
95+
{" "}
96+
<Trash2 /> Button{" "}
97+
</Button>
98+
<Button variant={variant} disabled>
99+
{" "}
100+
<Trash2 /> Button{" "}
101+
</Button>
102+
<Button variant={variant} size="small">
103+
{" "}
104+
<Trash2 /> Button{" "}
105+
</Button>
106+
<Button variant={variant} size="small" disabled>
107+
{" "}
108+
<Trash2 /> Button{" "}
109+
</Button>
83110
</div>
84111
</div>
85112
))}
86-
87-
88-
89-
90113
</div>
91114
</div>
92115
),
93116
parameters: {
94117
layout: "fullscreen",
95118
},
96119
};
97-

‎packages/react-components/src/tokens.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
--color-red-50: #fef9f9;
4242
--color-red-100: #fff6f5;
4343
--color-red-200: #fdedea;
44-
--color-red-300: #fad0cc;
44+
--color-red-300: #f4a499;
4545
--color-red-400: #ef7768;
4646
--color-red-500: #d7270f;
4747
--color-red-600: #d7270f;

0 commit comments

Comments
 (0)