Skip to content

Commit c9c963c

Browse files
forestreamforestream
committed
Remove box
1 parent e1de67c commit c9c963c

File tree

1 file changed

+99
-103
lines changed
  • packages/components/src/components/Button

1 file changed

+99
-103
lines changed

‎packages/components/src/components/Button/index.tsx‎

Lines changed: 99 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Button as DevupButton } from '@devup-ui/react'
1+
import { Button as DevupButton } from '@devup-ui/react'
22

33
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
44
variant?: 'primary' | 'default'
@@ -39,118 +39,114 @@ export function Button({
3939
const isPrimary = variant === 'primary'
4040

4141
return (
42-
<Box p="10px">
43-
<DevupButton
44-
_active={{
42+
<DevupButton
43+
_active={{
44+
bg: isPrimary
45+
? `color-mix(in srgb, var(--p, var(--primary, --fallback-white)) 100%, #000 30%);`
46+
: isError
47+
? 'var(--e, var(--error, --fallback-black))'
48+
: `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 20%, #FFF 80%);`,
49+
border:
50+
!isPrimary &&
51+
(isError
52+
? '1px solid var(--e, var(--error, --fallback-black))'
53+
: `1px solid var(--p, var(--primary, --fallback-black))`),
54+
color: !isPrimary && isError && '#000',
55+
}}
56+
_disabled={{
57+
color: '#D6D7DE',
58+
bgColor: '#F0F0F3',
59+
cursor: 'not-allowed',
60+
borderColor: isPrimary ? 'transparent' : '$border',
61+
}}
62+
_focusVisible={{
63+
outline: '2px solid',
64+
outlineColor:
65+
!isPrimary && isError
66+
? 'var(--e, var(--error, --fallback-black))'
67+
: '$primaryFocus',
68+
}}
69+
_hover={{
70+
borderColor: isError
71+
? 'var(--e, var(--error, --fallback-black))'
72+
: `var(--p, var(--primary, --fallback-black))`,
73+
bg: isPrimary
74+
? `color-mix(in srgb, var(--p, var(--primary, --fallback-white)) 100%, #000 15%)`
75+
: isError
76+
? '1px solid var(--e, var(--error, --fallback-black))'
77+
: `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 10%, #FFF 90%)`,
78+
}}
79+
_themeDark={{
80+
_disabled: {
81+
color: '#373737',
82+
bgColor: '#47474A',
83+
cursor: 'not-allowed',
84+
borderColor: 'transparent',
85+
},
86+
_active: {
4587
bg: isPrimary
46-
? `color-mix(in srgb, var(--p, var(--primary, --fallback-white)) 100%, #000 30%);`
88+
? `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 100%, #FFF 30%);`
4789
: isError
4890
? 'var(--e, var(--error, --fallback-black))'
49-
: `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 20%, #FFF 80%);`,
91+
: 'var(--p, var(--primary, --fallback-white))',
5092
border:
5193
!isPrimary &&
5294
(isError
5395
? '1px solid var(--e, var(--error, --fallback-black))'
54-
: `1px solid var(--p, var(--primary, --fallback-black))`),
55-
color: !isPrimary && isError && '#000',
56-
}}
57-
_disabled={{
58-
color: '#D6D7DE',
59-
bgColor: '#F0F0F3',
60-
cursor: 'not-allowed',
61-
borderColor: isPrimary ? 'transparent' : '$border',
62-
}}
63-
_focusVisible={{
64-
outline: '2px solid',
65-
outlineColor:
66-
!isPrimary && isError
67-
? 'var(--e, var(--error, --fallback-black))'
68-
: '$primaryFocus',
69-
}}
70-
_hover={{
71-
borderColor: isError
72-
? 'var(--e, var(--error, --fallback-black))'
73-
: `var(--p, var(--primary, --fallback-black))`,
96+
: `1px solid var(--p, var(--primary, --fallback-white))`),
97+
color: !isPrimary && isError && '#FFF',
98+
},
99+
_hover: {
74100
bg: isPrimary
75-
? `color-mix(in srgb, var(--p, var(--primary, --fallback-white)) 100%, #000 15%)`
101+
? `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 100%, #FFF 15%);`
76102
: isError
77-
? '1px solid var(--e, var(--error, --fallback-black))'
78-
: `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 10%, #FFF 90%)`,
79-
}}
80-
_themeDark={{
81-
_disabled: {
82-
color: '#373737',
83-
bgColor: '#47474A',
84-
cursor: 'not-allowed',
85-
borderColor: 'transparent',
86-
},
87-
_active: {
88-
bg: isPrimary
89-
? `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 100%, #FFF 30%);`
90-
: isError
91-
? 'var(--e, var(--error, --fallback-black))'
92-
: 'var(--p, var(--primary, --fallback-white))',
93-
border:
94-
!isPrimary &&
95-
(isError
96-
? '1px solid var(--e, var(--error, --fallback-black))'
97-
: `1px solid var(--p, var(--primary, --fallback-white))`),
98-
color: !isPrimary && isError && '#FFF',
99-
},
100-
_hover: {
101-
bg: isPrimary
102-
? `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 100%, #FFF 15%);`
103-
: isError
104-
? '$inputBg'
105-
: `color-mix(in srgb, var(--p, var(--primary, --fallback-white)) 20%, #000 80%);`,
106-
},
107-
_focusVisible: {
108-
outlineColor: isPrimary
109-
? `var(--p, var(--primary, --fallback-white))`
110-
: isError
111-
? 'var(--e, var(--error, --fallback-black))'
112-
: '$primaryFocus',
113-
},
114-
}}
115-
bg={
116-
isPrimary ? 'var(--p, var(--primary, --fallback-black))' : '$inputBg'
117-
}
118-
border={isPrimary ? 'none' : '1px solid $border'}
119-
borderRadius={isPrimary ? '8px' : '10px'}
120-
className={className}
121-
color={
122-
isPrimary
123-
? '#FFF'
103+
? '$inputBg'
104+
: `color-mix(in srgb, var(--p, var(--primary, --fallback-white)) 20%, #000 80%);`,
105+
},
106+
_focusVisible: {
107+
outlineColor: isPrimary
108+
? `var(--p, var(--primary, --fallback-white))`
124109
: isError
125110
? 'var(--e, var(--error, --fallback-black))'
126-
: '$text'
127-
}
128-
cursor="pointer"
129-
outlineOffset="2px"
130-
px="40px"
131-
py="12px"
132-
styleOrder={1}
133-
styleVars={{
134-
'--p': colors.primary ?? 'var(--primary)',
135-
'--e': colors.error ?? 'var(--error)',
136-
'--fallback-white': '#FFF',
137-
'--fallback-black': '#000',
138-
}}
139-
transition=".25s"
140-
type={type}
141-
typography={
142-
isPrimary
143-
? size === 's'
144-
? 'buttonS'
145-
: 'buttonM'
146-
: isError
147-
? 'inputBold'
148-
: 'buttonxs'
149-
}
150-
{...props}
151-
>
152-
{children}
153-
</DevupButton>
154-
</Box>
111+
: '$primaryFocus',
112+
},
113+
}}
114+
bg={isPrimary ? 'var(--p, var(--primary, --fallback-black))' : '$inputBg'}
115+
border={isPrimary ? 'none' : '1px solid $border'}
116+
borderRadius={isPrimary ? '8px' : '10px'}
117+
className={className}
118+
color={
119+
isPrimary
120+
? '#FFF'
121+
: isError
122+
? 'var(--e, var(--error, --fallback-black))'
123+
: '$text'
124+
}
125+
cursor="pointer"
126+
outlineOffset="2px"
127+
px="40px"
128+
py="12px"
129+
styleOrder={1}
130+
styleVars={{
131+
'--p': colors.primary ?? 'var(--primary)',
132+
'--e': colors.error ?? 'var(--error)',
133+
'--fallback-white': '#FFF',
134+
'--fallback-black': '#000',
135+
}}
136+
transition=".25s"
137+
type={type}
138+
typography={
139+
isPrimary
140+
? size === 's'
141+
? 'buttonS'
142+
: 'buttonM'
143+
: isError
144+
? 'inputBold'
145+
: 'buttonxs'
146+
}
147+
{...props}
148+
>
149+
{children}
150+
</DevupButton>
155151
)
156152
}

0 commit comments

Comments
 (0)