Skip to content

Commit c76bc47

Browse files
flatypusFelixMalfait
flatypus
and
FelixMalfait
authored
[4725] Inverted Variants of buttons (#5671)
Resolves #4725 --------- Co-authored-by: Félix Malfait <[email protected]>
1 parent 9567103 commit c76bc47

File tree

5 files changed

+222
-102
lines changed

5 files changed

+222
-102
lines changed

‎packages/twenty-front/src/modules/ui/input/button/components/Button.tsx

+176-88
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export type ButtonProps = {
1616
title?: string;
1717
fullWidth?: boolean;
1818
variant?: ButtonVariant;
19+
inverted?: boolean;
1920
size?: ButtonSize;
2021
position?: ButtonPosition;
2122
accent?: ButtonAccent;
@@ -36,6 +37,7 @@ const StyledButton = styled('button', {
3637
ButtonProps,
3738
| 'fullWidth'
3839
| 'variant'
40+
| 'inverted'
3941
| 'size'
4042
| 'position'
4143
| 'accent'
@@ -46,83 +48,112 @@ const StyledButton = styled('button', {
4648
>
4749
>`
4850
align-items: center;
49-
${({ theme, variant, accent, disabled, focus }) => {
51+
${({ theme, variant, inverted, accent, disabled, focus }) => {
5052
switch (variant) {
5153
case 'primary':
5254
switch (accent) {
5355
case 'default':
5456
return css`
55-
background: ${theme.background.secondary};
56-
border-color: ${!disabled
57+
background: ${!inverted
58+
? theme.background.secondary
59+
: theme.background.primary};
60+
border-color: ${!inverted
5761
? focus
5862
? theme.color.blue
5963
: theme.background.transparent.light
60-
: 'transparent'};
61-
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
64+
: theme.background.transparent.light};
65+
border-width: 1px 1px 1px 1px !important;
66+
opacity: ${disabled ? 0.24 : 1};
6267
box-shadow: ${!disabled && focus
63-
? `0 0 0 3px ${theme.accent.tertiary}`
68+
? `0 0 0 3px ${
69+
!inverted
70+
? theme.accent.tertiary
71+
: theme.background.transparent.medium
72+
}`
6473
: 'none'};
65-
color: ${!disabled
66-
? theme.font.color.secondary
67-
: theme.font.color.extraLight};
74+
color: ${!inverted
75+
? !disabled
76+
? theme.font.color.secondary
77+
: theme.font.color.extraLight
78+
: theme.font.color.secondary};
6879
&:hover {
69-
background: ${!disabled
80+
background: ${!inverted
7081
? theme.background.tertiary
7182
: theme.background.secondary};
7283
}
7384
&:active {
74-
background: ${!disabled
85+
background: ${!inverted
7586
? theme.background.quaternary
76-
: theme.background.secondary};
87+
: theme.background.tertiary};
7788
}
7889
`;
7990
case 'blue':
8091
return css`
81-
background: ${theme.color.blue};
82-
border-color: ${!disabled
92+
background: ${!inverted
93+
? theme.color.blue
94+
: theme.background.primary};
95+
border-color: ${!inverted
8396
? focus
8497
? theme.color.blue
8598
: theme.background.transparent.light
86-
: 'transparent'};
87-
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
99+
: theme.background.transparent.light};
100+
border-width: 1px 1px 1px 1px !important;
88101
box-shadow: ${!disabled && focus
89-
? `0 0 0 3px ${theme.accent.tertiary}`
102+
? `0 0 0 3px ${
103+
!inverted
104+
? theme.accent.tertiary
105+
: theme.background.transparent.medium
106+
}`
90107
: 'none'};
91-
color: ${theme.grayScale.gray0};
108+
color: ${!inverted ? theme.grayScale.gray0 : theme.color.blue};
92109
opacity: ${disabled ? 0.24 : 1};
93-
94110
${disabled
95111
? ''
96112
: css`
97113
&:hover {
98-
background: ${theme.color.blue50};
114+
background: ${!inverted
115+
? theme.color.blue50
116+
: theme.background.secondary};
99117
}
100118
&:active {
101-
background: ${theme.color.blue60};
119+
background: ${!inverted
120+
? theme.color.blue60
121+
: theme.background.tertiary};
102122
}
103123
`}
104124
`;
105125
case 'danger':
106126
return css`
107-
background: ${theme.color.red};
108-
border-color: ${!disabled
127+
background: ${!inverted
128+
? theme.color.red
129+
: theme.background.primary};
130+
border-color: ${!inverted
109131
? focus
110132
? theme.color.red
111133
: theme.background.transparent.light
112-
: 'transparent'};
113-
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
134+
: theme.background.transparent.light};
135+
border-width: 1px 1px !important;
114136
box-shadow: ${!disabled && focus
115-
? `0 0 0 3px ${theme.color.red10}`
137+
? `0 0 0 3px ${
138+
!inverted
139+
? theme.color.red10
140+
: theme.background.transparent.medium
141+
}`
116142
: 'none'};
117-
color: ${theme.grayScale.gray0};
143+
color: ${!inverted ? theme.background.primary : theme.color.red};
118144
opacity: ${disabled ? 0.24 : 1};
119-
120145
${disabled
121146
? ''
122147
: css`
123-
&:hover,
148+
&:hover {
149+
background: ${!inverted
150+
? theme.color.red40
151+
: theme.background.secondary};
152+
}
124153
&:active {
125-
background: ${theme.color.red50};
154+
background: ${!inverted
155+
? theme.color.red50
156+
: theme.background.tertiary};
126157
}
127158
`}
128159
`;
@@ -133,88 +164,143 @@ const StyledButton = styled('button', {
133164
switch (accent) {
134165
case 'default':
135166
return css`
136-
background: ${focus
137-
? theme.background.transparent.primary
138-
: 'transparent'};
139-
border-color: ${variant === 'secondary'
140-
? !disabled && focus
141-
? theme.color.blue
142-
: theme.background.transparent.medium
143-
: focus
144-
? theme.color.blue
145-
: 'transparent'};
146-
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
167+
background: transparent;
168+
border-color: ${!inverted
169+
? variant === 'secondary'
170+
? !disabled && focus
171+
? theme.color.blue
172+
: theme.background.transparent.medium
173+
: focus
174+
? theme.color.blue
175+
: 'transparent'
176+
: variant === 'secondary'
177+
? focus || disabled
178+
? theme.grayScale.gray0
179+
: theme.background.transparent.primary
180+
: focus
181+
? theme.grayScale.gray0
182+
: 'transparent'};
183+
border-width: 1px 1px 1px 1px !important;
147184
box-shadow: ${!disabled && focus
148-
? `0 0 0 3px ${theme.accent.tertiary}`
185+
? `0 0 0 3px ${
186+
!inverted
187+
? theme.accent.tertiary
188+
: theme.background.transparent.medium
189+
}`
149190
: 'none'};
150-
color: ${!disabled
151-
? theme.font.color.secondary
152-
: theme.font.color.extraLight};
191+
opacity: ${disabled ? 0.24 : 1};
192+
color: ${!inverted
193+
? !disabled
194+
? theme.font.color.secondary
195+
: theme.font.color.extraLight
196+
: theme.font.color.inverted};
153197
&:hover {
154-
background: ${!disabled
155-
? theme.background.transparent.light
156-
: 'transparent'};
198+
background: ${!inverted
199+
? !disabled
200+
? theme.background.transparent.light
201+
: 'transparent'
202+
: theme.background.transparent.light};
157203
}
158204
&:active {
159-
background: ${!disabled
160-
? theme.background.transparent.light
161-
: 'transparent'};
205+
background: ${!inverted
206+
? !disabled
207+
? theme.background.transparent.light
208+
: 'transparent'
209+
: theme.background.transparent.medium};
162210
}
163211
`;
164212
case 'blue':
165213
return css`
166-
background: ${focus
167-
? theme.background.transparent.primary
168-
: 'transparent'};
169-
border-color: ${variant === 'secondary'
170-
? focus
171-
? theme.color.blue
172-
: theme.accent.primary
173-
: focus
174-
? theme.color.blue
175-
: 'transparent'};
176-
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
214+
background: transparent;
215+
border-color: ${!inverted
216+
? variant === 'secondary'
217+
? focus
218+
? theme.color.blue
219+
: theme.accent.primary
220+
: focus
221+
? theme.color.blue
222+
: 'transparent'
223+
: variant === 'secondary'
224+
? focus || disabled
225+
? theme.grayScale.gray0
226+
: theme.background.transparent.primary
227+
: focus
228+
? theme.grayScale.gray0
229+
: 'transparent'};
230+
border-width: 1px 1px 1px 1px !important;
177231
box-shadow: ${!disabled && focus
178-
? `0 0 0 3px ${theme.accent.tertiary}`
232+
? `0 0 0 3px ${
233+
!inverted
234+
? theme.accent.tertiary
235+
: theme.background.transparent.medium
236+
}`
179237
: 'none'};
180-
color: ${!disabled ? theme.color.blue : theme.accent.accent4060};
238+
opacity: ${disabled ? 0.24 : 1};
239+
color: ${!inverted
240+
? !disabled
241+
? theme.color.blue
242+
: theme.accent.accent4060
243+
: theme.font.color.inverted};
181244
&:hover {
182-
background: ${!disabled
183-
? theme.accent.tertiary
184-
: 'transparent'};
245+
background: ${!inverted
246+
? !disabled
247+
? theme.accent.tertiary
248+
: 'transparent'
249+
: theme.background.transparent.light};
185250
}
186251
&:active {
187-
background: ${!disabled
188-
? theme.accent.secondary
189-
: 'transparent'};
252+
background: ${!inverted
253+
? !disabled
254+
? theme.accent.secondary
255+
: 'transparent'
256+
: theme.background.transparent.medium};
190257
}
191258
`;
192259
case 'danger':
193260
return css`
194261
background: transparent;
195-
border-color: ${variant === 'secondary'
196-
? focus
197-
? theme.color.red
198-
: theme.border.color.danger
199-
: focus
200-
? theme.color.red
201-
: 'transparent'};
202-
border-width: ${!disabled && focus ? '1px 1px !important' : 0};
262+
border-color: ${!inverted
263+
? variant === 'secondary'
264+
? focus
265+
? theme.color.red
266+
: theme.border.color.danger
267+
: focus
268+
? theme.color.red
269+
: 'transparent'
270+
: variant === 'secondary'
271+
? focus || disabled
272+
? theme.grayScale.gray0
273+
: theme.background.transparent.primary
274+
: focus
275+
? theme.grayScale.gray0
276+
: 'transparent'};
277+
border-width: 1px 1px 1px 1px !important;
203278
box-shadow: ${!disabled && focus
204-
? `0 0 0 3px ${theme.color.red10}`
279+
? `0 0 0 3px ${
280+
!inverted
281+
? theme.color.red10
282+
: theme.background.transparent.medium
283+
}`
205284
: 'none'};
206-
color: ${!disabled
207-
? theme.font.color.danger
208-
: theme.border.color.danger};
285+
opacity: ${disabled ? 0.24 : 1};
286+
color: ${!inverted
287+
? !disabled
288+
? theme.font.color.danger
289+
: theme.color.red20
290+
: theme.font.color.inverted};
209291
&:hover {
210-
background: ${!disabled
211-
? theme.background.danger
212-
: 'transparent'};
292+
background: ${!inverted
293+
? !disabled
294+
? theme.background.danger
295+
: 'transparent'
296+
: theme.background.transparent.light};
213297
}
214298
&:active {
215-
background: ${!disabled
216-
? theme.background.danger
217-
: 'transparent'};
299+
background: ${!inverted
300+
? !disabled
301+
? theme.background.danger
302+
: 'transparent'
303+
: theme.background.transparent.medium};
218304
}
219305
`;
220306
}
@@ -277,6 +363,7 @@ export const Button = ({
277363
title,
278364
fullWidth = false,
279365
variant = 'primary',
366+
inverted = false,
280367
size = 'medium',
281368
accent = 'default',
282369
position = 'standalone',
@@ -294,6 +381,7 @@ export const Button = ({
294381
<StyledButton
295382
fullWidth={fullWidth}
296383
variant={variant}
384+
inverted={inverted}
297385
size={size}
298386
position={position}
299387
disabled={soon || disabled}

‎packages/twenty-front/src/modules/ui/input/button/components/__stories__/Button.stories.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const Default: Story = {
3030
title: 'Button',
3131
size: 'small',
3232
variant: 'primary',
33+
inverted: false,
3334
accent: 'danger',
3435
disabled: false,
3536
focus: false,

0 commit comments

Comments
 (0)