@@ -3,9 +3,9 @@ import type { ButtonColor } from './Button';
33import tokens from '../../../../core/tokens' ;
44
55const sizePadding = {
6- small : `${ tokens . padding . BASELINE * 1 } px ${ tokens . padding . BASELINE * 2 } px` ,
7- medium : `${ tokens . padding . BASELINE * 2 } px ${ tokens . padding . BASELINE * 3 } px` ,
8- large : `${ tokens . padding . BASELINE * 2.5 } px ${ tokens . padding . BASELINE * 4 } px` ,
6+ small : `${ tokens . padding . BASELINE * 1 } px ${ tokens . padding . BASELINE * 2 } px` ,
7+ medium : `${ tokens . padding . BASELINE * 2 } px ${ tokens . padding . BASELINE * 3 } px` ,
8+ large : `${ tokens . padding . BASELINE * 2.5 } px ${ tokens . padding . BASELINE * 4 } px` ,
99} ;
1010
1111const sizeMinWidth = { small : 90 , medium : 120 , large : 160 } ;
@@ -22,7 +22,7 @@ export const ButtonContainer = styled.button<{
2222 width: ${ ( { width } ) => ( width ? `${ width } px` : 'auto' ) } ;
2323
2424 ${ ( { fullWidth, size = 'medium' } ) =>
25- fullWidth ? `flex: 1 0 ${ sizeMinWidth [ size ] } px;` : `flex: 0 0 auto;` } ;
25+ fullWidth ? `flex: 1 0 ${ sizeMinWidth [ size ] } px;` : `flex: 0 0 auto;` } ;
2626
2727 min-width: ${ ( { size = 'medium' } ) => `${ sizeMinWidth [ size ] } px` } ;
2828 max-width: 100%;
@@ -37,22 +37,22 @@ export const ButtonContainer = styled.button<{
3737 font-weight: ${ ( { fontWeight } ) => fontWeight ?? '600' } ;
3838 border: none;
3939 border-radius: ${ ( { rounded } ) =>
40- rounded ? tokens . borderRadius . ROUND : tokens . borderRadius . BASELINE } px;
40+ rounded ? tokens . borderRadius . ROUND : tokens . borderRadius . BASELINE } px;
4141 padding: ${ ( { size } ) => sizePadding [ size ?? 'medium' ] } ;
4242 box-sizing: border-box;
4343 cursor: pointer;
4444 height: fit-content;
4545
4646 ${ ( { variant, color, theme } ) => {
47- const style = theme . buttonStyles [ color ] ?. [ variant ] ;
48- if ( ! style ) {
49- return `
47+ const style = theme . buttonStyles [ color ] ?. [ variant ] ;
48+ if ( ! style ) {
49+ return `
5050 background: gray;
5151 color: white;
5252 border: none;
5353 ` ;
54- }
55- return `
54+ }
55+ return `
5656 background-color: ${ style . background } ;
5757 color: ${ style . text } ;
5858 box-shadow: ${ style . border } ;
@@ -61,5 +61,5 @@ export const ButtonContainer = styled.button<{
6161 color: ${ style . hover ?. text ?? style . text } ;
6262 }
6363 ` ;
64- } }
64+ } }
6565` ;
0 commit comments