Skip to content

Commit 743cbae

Browse files
minheqminheq
committed
fix: better button outling visual
1 parent bf05de0 commit 743cbae

2 files changed

Lines changed: 40 additions & 40 deletions

File tree

‎src/components/Button/Button.styles.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
124124
default: {
125125
backgroundColor: theme.colors.background.plain,
126126
borderColor: theme.colors.text.default,
127-
borderWidth: 4,
127+
borderWidth: 3,
128128
color: theme.colors.text.default,
129129

130130
focusColor: theme.colors.background.tint2,
@@ -133,7 +133,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
133133
danger: {
134134
backgroundColor: theme.colors.background.plain,
135135
borderColor: theme.colors.border.danger,
136-
borderWidth: 4,
136+
borderWidth: 3,
137137
color: theme.colors.text.danger,
138138

139139
focusColor: theme.colors.background.danger.focusLight,
@@ -142,7 +142,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
142142
primary: {
143143
backgroundColor: theme.colors.background.plain,
144144
borderColor: theme.colors.border.primary,
145-
borderWidth: 4,
145+
borderWidth: 3,
146146
color: theme.colors.text.primary,
147147

148148
focusColor: theme.colors.background.primary.focusLight,
@@ -151,7 +151,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
151151
secondary: {
152152
backgroundColor: theme.colors.background.plain,
153153
borderColor: theme.colors.border.secondary,
154-
borderWidth: 4,
154+
borderWidth: 3,
155155
color: theme.colors.text.secondary,
156156

157157
focusColor: theme.colors.background.secondary.focusLight,

‎tests/__snapshots__/snapshot.test.js.snap‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7004,18 +7004,18 @@ exports[`Button_3 1`] = `
70047004
"borderBottomLeftRadius": "4px",
70057005
"borderBottomRightRadius": "4px",
70067006
"borderBottomStyle": "solid",
7007-
"borderBottomWidth": "4px",
7007+
"borderBottomWidth": "3px",
70087008
"borderLeftColor": "rgba(126,126,126,1.00)",
70097009
"borderLeftStyle": "solid",
7010-
"borderLeftWidth": "4px",
7010+
"borderLeftWidth": "3px",
70117011
"borderRightColor": "rgba(126,126,126,1.00)",
70127012
"borderRightStyle": "solid",
7013-
"borderRightWidth": "4px",
7013+
"borderRightWidth": "3px",
70147014
"borderTopColor": "rgba(126,126,126,1.00)",
70157015
"borderTopLeftRadius": "4px",
70167016
"borderTopRightRadius": "4px",
70177017
"borderTopStyle": "solid",
7018-
"borderTopWidth": "4px",
7018+
"borderTopWidth": "3px",
70197019
"boxSizing": "border-box",
70207020
"cursor": "pointer",
70217021
"display": "flex",
@@ -7220,18 +7220,18 @@ exports[`Button_3 1`] = `
72207220
"borderBottomLeftRadius": "4px",
72217221
"borderBottomRightRadius": "4px",
72227222
"borderBottomStyle": "solid",
7223-
"borderBottomWidth": "4px",
7223+
"borderBottomWidth": "3px",
72247224
"borderLeftColor": "rgba(27,135,122,1.00)",
72257225
"borderLeftStyle": "solid",
7226-
"borderLeftWidth": "4px",
7226+
"borderLeftWidth": "3px",
72277227
"borderRightColor": "rgba(27,135,122,1.00)",
72287228
"borderRightStyle": "solid",
7229-
"borderRightWidth": "4px",
7229+
"borderRightWidth": "3px",
72307230
"borderTopColor": "rgba(27,135,122,1.00)",
72317231
"borderTopLeftRadius": "4px",
72327232
"borderTopRightRadius": "4px",
72337233
"borderTopStyle": "solid",
7234-
"borderTopWidth": "4px",
7234+
"borderTopWidth": "3px",
72357235
"boxSizing": "border-box",
72367236
"cursor": "pointer",
72377237
"display": "flex",
@@ -7436,18 +7436,18 @@ exports[`Button_3 1`] = `
74367436
"borderBottomLeftRadius": "4px",
74377437
"borderBottomRightRadius": "4px",
74387438
"borderBottomStyle": "solid",
7439-
"borderBottomWidth": "4px",
7439+
"borderBottomWidth": "3px",
74407440
"borderLeftColor": "rgba(178,101,0,1.00)",
74417441
"borderLeftStyle": "solid",
7442-
"borderLeftWidth": "4px",
7442+
"borderLeftWidth": "3px",
74437443
"borderRightColor": "rgba(178,101,0,1.00)",
74447444
"borderRightStyle": "solid",
7445-
"borderRightWidth": "4px",
7445+
"borderRightWidth": "3px",
74467446
"borderTopColor": "rgba(178,101,0,1.00)",
74477447
"borderTopLeftRadius": "4px",
74487448
"borderTopRightRadius": "4px",
74497449
"borderTopStyle": "solid",
7450-
"borderTopWidth": "4px",
7450+
"borderTopWidth": "3px",
74517451
"boxSizing": "border-box",
74527452
"cursor": "pointer",
74537453
"display": "flex",
@@ -7652,18 +7652,18 @@ exports[`Button_3 1`] = `
76527652
"borderBottomLeftRadius": "4px",
76537653
"borderBottomRightRadius": "4px",
76547654
"borderBottomStyle": "solid",
7655-
"borderBottomWidth": "4px",
7655+
"borderBottomWidth": "3px",
76567656
"borderLeftColor": "rgba(183,64,51,1.00)",
76577657
"borderLeftStyle": "solid",
7658-
"borderLeftWidth": "4px",
7658+
"borderLeftWidth": "3px",
76597659
"borderRightColor": "rgba(183,64,51,1.00)",
76607660
"borderRightStyle": "solid",
7661-
"borderRightWidth": "4px",
7661+
"borderRightWidth": "3px",
76627662
"borderTopColor": "rgba(183,64,51,1.00)",
76637663
"borderTopLeftRadius": "4px",
76647664
"borderTopRightRadius": "4px",
76657665
"borderTopStyle": "solid",
7666-
"borderTopWidth": "4px",
7666+
"borderTopWidth": "3px",
76677667
"boxSizing": "border-box",
76687668
"cursor": "pointer",
76697669
"display": "flex",
@@ -9097,18 +9097,18 @@ exports[`Button_7 1`] = `
90979097
"borderBottomLeftRadius": "4px",
90989098
"borderBottomRightRadius": "4px",
90999099
"borderBottomStyle": "solid",
9100-
"borderBottomWidth": "4px",
9100+
"borderBottomWidth": "3px",
91019101
"borderLeftColor": "rgba(27,135,122,1.00)",
91029102
"borderLeftStyle": "solid",
9103-
"borderLeftWidth": "4px",
9103+
"borderLeftWidth": "3px",
91049104
"borderRightColor": "rgba(27,135,122,1.00)",
91059105
"borderRightStyle": "solid",
9106-
"borderRightWidth": "4px",
9106+
"borderRightWidth": "3px",
91079107
"borderTopColor": "rgba(27,135,122,1.00)",
91089108
"borderTopLeftRadius": "4px",
91099109
"borderTopRightRadius": "4px",
91109110
"borderTopStyle": "solid",
9111-
"borderTopWidth": "4px",
9111+
"borderTopWidth": "3px",
91129112
"boxSizing": "border-box",
91139113
"display": "flex",
91149114
"flexBasis": "auto",
@@ -10188,18 +10188,18 @@ exports[`Button_9 1`] = `
1018810188
"borderBottomLeftRadius": "4px",
1018910189
"borderBottomRightRadius": "4px",
1019010190
"borderBottomStyle": "solid",
10191-
"borderBottomWidth": "4px",
10191+
"borderBottomWidth": "3px",
1019210192
"borderLeftColor": "rgba(178,101,0,1.00)",
1019310193
"borderLeftStyle": "solid",
10194-
"borderLeftWidth": "4px",
10194+
"borderLeftWidth": "3px",
1019510195
"borderRightColor": "rgba(178,101,0,1.00)",
1019610196
"borderRightStyle": "solid",
10197-
"borderRightWidth": "4px",
10197+
"borderRightWidth": "3px",
1019810198
"borderTopColor": "rgba(178,101,0,1.00)",
1019910199
"borderTopLeftRadius": "4px",
1020010200
"borderTopRightRadius": "4px",
1020110201
"borderTopStyle": "solid",
10202-
"borderTopWidth": "4px",
10202+
"borderTopWidth": "3px",
1020310203
"boxSizing": "border-box",
1020410204
"display": "flex",
1020510205
"flexBasis": "auto",
@@ -14206,18 +14206,18 @@ exports[`ButtonGroup_7 1`] = `
1420614206
"borderBottomLeftRadius": "4px",
1420714207
"borderBottomRightRadius": "0px",
1420814208
"borderBottomStyle": "solid",
14209-
"borderBottomWidth": "4px",
14209+
"borderBottomWidth": "3px",
1421014210
"borderLeftColor": "rgba(238,238,238,1.00)",
1421114211
"borderLeftStyle": "solid",
1421214212
"borderLeftWidth": "0px",
1421314213
"borderRightColor": "rgba(238,238,238,1.00)",
1421414214
"borderRightStyle": "solid",
14215-
"borderRightWidth": "4px",
14215+
"borderRightWidth": "3px",
1421614216
"borderTopColor": "rgba(238,238,238,1.00)",
1421714217
"borderTopLeftRadius": "4px",
1421814218
"borderTopRightRadius": "0px",
1421914219
"borderTopStyle": "solid",
14220-
"borderTopWidth": "4px",
14220+
"borderTopWidth": "3px",
1422114221
"boxSizing": "border-box",
1422214222
"cursor": "pointer",
1422314223
"display": "flex",
@@ -14422,18 +14422,18 @@ exports[`ButtonGroup_7 1`] = `
1442214422
"borderBottomLeftRadius": "0px",
1442314423
"borderBottomRightRadius": "0px",
1442414424
"borderBottomStyle": "solid",
14425-
"borderBottomWidth": "4px",
14425+
"borderBottomWidth": "3px",
1442614426
"borderLeftColor": "rgba(238,238,238,1.00)",
1442714427
"borderLeftStyle": "solid",
1442814428
"borderLeftWidth": "0px",
1442914429
"borderRightColor": "rgba(238,238,238,1.00)",
1443014430
"borderRightStyle": "solid",
14431-
"borderRightWidth": "4px",
14431+
"borderRightWidth": "3px",
1443214432
"borderTopColor": "rgba(238,238,238,1.00)",
1443314433
"borderTopLeftRadius": "0px",
1443414434
"borderTopRightRadius": "0px",
1443514435
"borderTopStyle": "solid",
14436-
"borderTopWidth": "4px",
14436+
"borderTopWidth": "3px",
1443714437
"boxSizing": "border-box",
1443814438
"cursor": "pointer",
1443914439
"display": "flex",
@@ -14638,18 +14638,18 @@ exports[`ButtonGroup_7 1`] = `
1463814638
"borderBottomLeftRadius": "0px",
1463914639
"borderBottomRightRadius": "0px",
1464014640
"borderBottomStyle": "solid",
14641-
"borderBottomWidth": "4px",
14641+
"borderBottomWidth": "3px",
1464214642
"borderLeftColor": "rgba(238,238,238,1.00)",
1464314643
"borderLeftStyle": "solid",
1464414644
"borderLeftWidth": "0px",
1464514645
"borderRightColor": "rgba(238,238,238,1.00)",
1464614646
"borderRightStyle": "solid",
14647-
"borderRightWidth": "4px",
14647+
"borderRightWidth": "3px",
1464814648
"borderTopColor": "rgba(238,238,238,1.00)",
1464914649
"borderTopLeftRadius": "0px",
1465014650
"borderTopRightRadius": "0px",
1465114651
"borderTopStyle": "solid",
14652-
"borderTopWidth": "4px",
14652+
"borderTopWidth": "3px",
1465314653
"boxSizing": "border-box",
1465414654
"cursor": "pointer",
1465514655
"display": "flex",
@@ -14854,18 +14854,18 @@ exports[`ButtonGroup_7 1`] = `
1485414854
"borderBottomLeftRadius": "0px",
1485514855
"borderBottomRightRadius": "4px",
1485614856
"borderBottomStyle": "solid",
14857-
"borderBottomWidth": "4px",
14857+
"borderBottomWidth": "3px",
1485814858
"borderLeftColor": "rgba(238,238,238,1.00)",
1485914859
"borderLeftStyle": "solid",
1486014860
"borderLeftWidth": "0px",
1486114861
"borderRightColor": "rgba(238,238,238,1.00)",
1486214862
"borderRightStyle": "solid",
14863-
"borderRightWidth": "4px",
14863+
"borderRightWidth": "3px",
1486414864
"borderTopColor": "rgba(238,238,238,1.00)",
1486514865
"borderTopLeftRadius": "0px",
1486614866
"borderTopRightRadius": "4px",
1486714867
"borderTopStyle": "solid",
14868-
"borderTopWidth": "4px",
14868+
"borderTopWidth": "3px",
1486914869
"boxSizing": "border-box",
1487014870
"cursor": "pointer",
1487114871
"display": "flex",

0 commit comments

Comments
 (0)