Skip to content

Commit 430232f

Browse files
tenphitenphi
committed
fix(Button): optimize styles * 3
1 parent 5297881 commit 430232f

File tree

1 file changed

+27
-86
lines changed

1 file changed

+27
-86
lines changed

‎src/components/actions/Button/Button.tsx‎

Lines changed: 27 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,7 @@ export const DEFAULT_BUTTON_STYLES = {
6464
position: 'relative',
6565
margin: 0,
6666
boxSizing: 'border-box',
67-
outline: {
68-
'': '#purple-03.0',
69-
focused: '#purple-03',
70-
},
67+
outline: 0,
7168
cursor: 'pointer',
7269
gap: {
7370
'': '.75x',
@@ -132,10 +129,7 @@ export const DEFAULT_PRIMARY_STYLES = {
132129
} as const;
133130

134131
export const DEFAULT_SECONDARY_STYLES = {
135-
outline: {
136-
'': '0 #purple-text.0',
137-
focused: '1bw #purple-text',
138-
},
132+
// No outline for secondary
139133
border: {
140134
'': '#purple.15',
141135
pressed: '#purple.3',
@@ -154,10 +148,7 @@ export const DEFAULT_SECONDARY_STYLES = {
154148
} as const;
155149

156150
export const DEFAULT_OUTLINE_STYLES = {
157-
outline: {
158-
'': '0 #purple-text.0',
159-
focused: '1bw #purple-text',
160-
},
151+
// No outline for outline type
161152
border: {
162153
'': '#dark.12',
163154
focused: '#purple-text',
@@ -177,10 +168,7 @@ export const DEFAULT_OUTLINE_STYLES = {
177168
} as const;
178169

179170
export const DEFAULT_NEUTRAL_STYLES = {
180-
outline: {
181-
'': '0 #purple-text.0',
182-
focused: '1bw #purple-text',
183-
},
171+
// No outline for neutral
184172
border: {
185173
'': '#clear',
186174
focused: '#purple-text',
@@ -200,10 +188,7 @@ export const DEFAULT_NEUTRAL_STYLES = {
200188
} as const;
201189

202190
export const DEFAULT_CLEAR_STYLES = {
203-
outline: {
204-
'': '0 #purple-text.0',
205-
focused: '1bw #purple-text',
206-
},
191+
// No outline for clear
207192
border: {
208193
'': '#clear',
209194
pressed: '#purple-text.10',
@@ -226,10 +211,7 @@ export const DEFAULT_LINK_STYLES = {
226211
'': '0 #purple-text.0',
227212
focused: '1bw #purple-text',
228213
},
229-
border: {
230-
'': '0',
231-
focused: '#purple-text',
232-
},
214+
border: '0',
233215
fill: {
234216
'': '#clear',
235217
},
@@ -264,10 +246,7 @@ export const DANGER_PRIMARY_STYLES = {
264246
} as const;
265247

266248
export const DANGER_SECONDARY_STYLES = {
267-
outline: {
268-
'': '0 #danger-text.0',
269-
focused: '1bw #danger-text',
270-
},
249+
// No outline for secondary
271250
border: {
272251
'': '#danger.15',
273252
pressed: '#danger.3',
@@ -280,16 +259,13 @@ export const DANGER_SECONDARY_STYLES = {
280259
'[disabled]': '#dark.04',
281260
},
282261
color: {
283-
'': '#white',
262+
'': '#danger', // Added color
284263
'[disabled]': '#dark.30',
285264
},
286265
} as const;
287266

288267
export const DANGER_OUTLINE_STYLES = {
289-
outline: {
290-
'': '0 #danger-text.0',
291-
focused: '1bw #danger-text',
292-
},
268+
// No outline for outline type
293269
border: {
294270
'': '#danger.15',
295271
pressed: '#danger.3',
@@ -302,16 +278,13 @@ export const DANGER_OUTLINE_STYLES = {
302278
'[disabled]': '#danger.0',
303279
},
304280
color: {
305-
'': '#white',
281+
'': '#danger-text', // Added color
306282
'[disabled]': '#dark.30',
307283
},
308284
} as const;
309285

310286
export const DANGER_NEUTRAL_STYLES = {
311-
outline: {
312-
'': '0 #danger-text.0',
313-
focused: '1bw #danger-text',
314-
},
287+
// No outline for neutral
315288
border: {
316289
'': '#clear',
317290
focused: '#danger-text',
@@ -323,16 +296,13 @@ export const DANGER_NEUTRAL_STYLES = {
323296
'[disabled]': '#dark.04',
324297
},
325298
color: {
326-
'': '#white',
299+
'': '#danger-text', // Added color
327300
'[disabled]': '#dark.30',
328301
},
329302
} as const;
330303

331304
export const DANGER_CLEAR_STYLES = {
332-
outline: {
333-
'': '0 #danger-text.0',
334-
focused: '1bw #danger-text',
335-
},
305+
// No outline for clear
336306
border: {
337307
'': '#clear',
338308
focused: '#danger-text',
@@ -344,7 +314,7 @@ export const DANGER_CLEAR_STYLES = {
344314
'[disabled]': '#danger.0',
345315
},
346316
color: {
347-
'': '#white',
317+
'': '#danger-text', // Added color
348318
'[disabled]': '#dark.30',
349319
},
350320
} as const;
@@ -354,16 +324,14 @@ export const DANGER_LINK_STYLES = {
354324
'': '0 #danger-text.0',
355325
focused: '1bw #danger-text',
356326
},
357-
border: {
358-
'': '#clear',
359-
focused: '#danger-text',
360-
},
327+
border: '0',
361328
fill: {
362329
'': '#clear',
363330
'[disabled]': '#dark.04',
364331
},
365332
color: {
366-
'': '#white',
333+
'': '#danger-text', // Added color
334+
pressed: '#danger',
367335
'[disabled]': '#dark.30',
368336
},
369337
} as const;
@@ -392,10 +360,7 @@ export const SUCCESS_PRIMARY_STYLES = {
392360
} as const;
393361

394362
export const SUCCESS_SECONDARY_STYLES = {
395-
outline: {
396-
'': '0 #success-text.0',
397-
focused: '1bw #success-text',
398-
},
363+
// No outline for secondary
399364
border: {
400365
'': '#success.15',
401366
pressed: '#success.3',
@@ -414,10 +379,7 @@ export const SUCCESS_SECONDARY_STYLES = {
414379
} as const;
415380

416381
export const SUCCESS_OUTLINE_STYLES = {
417-
outline: {
418-
'': '0 #success-text.0',
419-
focused: '1bw #success-text',
420-
},
382+
// No outline for outline type
421383
border: {
422384
'': '#success.15',
423385
pressed: '#success.3',
@@ -436,10 +398,7 @@ export const SUCCESS_OUTLINE_STYLES = {
436398
} as const;
437399

438400
export const SUCCESS_NEUTRAL_STYLES = {
439-
outline: {
440-
'': '0 #success-text.0',
441-
focused: '1bw #success-text',
442-
},
401+
// No outline for neutral
443402
border: {
444403
'': '#clear',
445404
focused: '#success-text',
@@ -459,10 +418,7 @@ export const SUCCESS_NEUTRAL_STYLES = {
459418
} as const;
460419

461420
export const SUCCESS_CLEAR_STYLES = {
462-
outline: {
463-
'': '0 #success-text.0',
464-
focused: '1bw #success-text',
465-
},
421+
// No outline for clear
466422
border: {
467423
'': '#clear',
468424
focused: '#success-text',
@@ -484,10 +440,7 @@ export const SUCCESS_LINK_STYLES = {
484440
'': '0 #success-text.0',
485441
focused: '1bw #success-text',
486442
},
487-
border: {
488-
'': '#clear',
489-
focused: '#success-text',
490-
},
443+
border: '0',
491444
fill: {
492445
'': '#clear',
493446
'[disabled]': '#dark.04',
@@ -522,10 +475,7 @@ export const SPECIAL_PRIMARY_STYLES = {
522475
} as const;
523476

524477
export const SPECIAL_SECONDARY_STYLES = {
525-
outline: {
526-
'': '0 #white.0',
527-
focused: '1bw #white',
528-
},
478+
// No outline for secondary
529479
border: {
530480
'': '#white.3',
531481
pressed: '#white.4',
@@ -544,10 +494,7 @@ export const SPECIAL_SECONDARY_STYLES = {
544494
} as const;
545495

546496
export const SPECIAL_OUTLINE_STYLES = {
547-
outline: {
548-
'': '0 #white.0',
549-
focused: '1bw #white',
550-
},
497+
// No outline for outline type
551498
border: {
552499
'': '#white.3',
553500
'!pressed': '#white.3',
@@ -567,10 +514,7 @@ export const SPECIAL_OUTLINE_STYLES = {
567514
} as const;
568515

569516
export const SPECIAL_NEUTRAL_STYLES = {
570-
outline: {
571-
'': '0 #white.0',
572-
focused: '1bw #white',
573-
},
517+
// No outline for neutral
574518
border: {
575519
'': '#clear',
576520
'!pressed': 0,
@@ -591,6 +535,7 @@ export const SPECIAL_NEUTRAL_STYLES = {
591535

592536
export const SPECIAL_CLEAR_STYLES = {
593537
outline: {
538+
// Special case: outline for clear type in special theme
594539
'': '0 #white.0',
595540
focused: '1bw #white',
596541
},
@@ -616,11 +561,7 @@ export const SPECIAL_LINK_STYLES = {
616561
'': '0 #white.0',
617562
focused: '1bw #white',
618563
},
619-
border: {
620-
'': 0,
621-
focused: '#white',
622-
'[disabled]': '#white.3',
623-
},
564+
border: '0',
624565
fill: {
625566
'': '#clear',
626567
'[disabled]': '#white.12',

0 commit comments

Comments
 (0)