Skip to content

Commit 0309783

Browse files
Afriq Yasin RamadhanAfriq Yasin Ramadhan
Afriq Yasin Ramadhan
authored and
Afriq Yasin Ramadhan
committed
fix(button): remove color variant of button link and outline, add color variant of button ghost
1 parent 6133d85 commit 0309783

File tree

4 files changed

+125
-88
lines changed

4 files changed

+125
-88
lines changed

‎packages/tailwind-preset/index.js

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -92,25 +92,31 @@ module.exports = {
9292
],
9393
},
9494
textColor: {
95-
'DEFAULT' : theme.colors.gray[100],
96-
'default' : theme.colors.gray[100],
97-
'subtle' : theme.colors.gray[60],
98-
'subtlest' : theme.colors.gray[35],
99-
'muted' : theme.colors.gray[25],
100-
'link' : theme.colors.blue[50],
95+
'DEFAULT' : theme.colors.gray[100],
96+
'default' : theme.colors.gray[100],
97+
'subtle' : theme.colors.gray[60],
98+
'subtlest': theme.colors.gray[35],
99+
'muted' : theme.colors.gray[25],
100+
'link' : {
101+
'DEFAULT' : theme.colors.blue[50],
102+
'on-emphasis': theme.colors.blue[20],
103+
},
101104
'on-emphasis' : theme.colors.gray[0],
102105
'state-emphasis': theme.colors.gray[0],
103106
'info' : theme.colors.blue[60],
104107
'success' : theme.colors.green[60],
105108
'warning' : theme.colors.orange[60],
106109
'danger' : theme.colors.red[60],
107110
'dark' : {
108-
'DEFAULT' : theme.colors.gray[0],
109-
'default' : theme.colors.gray[0],
110-
'subtle' : theme.colors.gray[40],
111-
'subtlest' : theme.colors.gray[60],
112-
'muted' : theme.colors.gray[75],
113-
'link' : theme.colors.blue[30],
111+
'DEFAULT' : theme.colors.gray[0],
112+
'default' : theme.colors.gray[0],
113+
'subtle' : theme.colors.gray[40],
114+
'subtlest': theme.colors.gray[60],
115+
'muted' : theme.colors.gray[75],
116+
'link' : {
117+
'DEFAULT' : theme.colors.blue[30],
118+
'on-emphasis': theme.colors.blue[20],
119+
},
114120
'on-emphasis' : theme.colors.gray[100],
115121
'state-emphasis': theme.colors.gray[0],
116122
'info' : theme.colors.blue[20],

‎src/components/button/Button.vue

Lines changed: 49 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -150,10 +150,15 @@ defineSlots<{
150150
--p-color-danger-focus: darken(theme(backgroundColor.danger.emphasis), 10%);
151151
--p-color-dark-danger-focus: darken(theme(backgroundColor.dark.danger.emphasis), 10%);
152152
153-
--p-text-link-hover: darken(theme(textColor.link), 5%);
154-
--p-text-dark-link-hover: darken(theme(textColor.dark.link), 5%);
155-
--p-text-link-focus: darken(theme(textColor.link), 10%);
156-
--p-text-dark-link-focus: darken(theme(textColor.dark.link), 10%);
153+
--p-text-link-hover: darken(theme(textColor.link.DEFAULT), 5%);
154+
--p-text-dark-link-hover: darken(theme(textColor.dark.link.DEFAULT), 5%);
155+
--p-text-link-focus: darken(theme(textColor.link.DEFAULT), 10%);
156+
--p-text-dark-link-focus: darken(theme(textColor.dark.link.DEFAULT), 10%);
157+
158+
--p-text-link-emphasis-hover: darken(theme(textColor.link.on-emphasis), 5%);
159+
--p-text-dark-link-emphasis-hover: darken(theme(textColor.dark.link.on-emphasis), 5%);
160+
--p-text-link-emphasis-focus: darken(theme(textColor.link.on-emphasis), 10%);
161+
--p-text-dark-link-emphasis-focus: darken(theme(textColor.dark.link.on-emphasis), 10%);
157162
158163
--p-button-xs-padding-x: theme(spacing.2);
159164
--p-button-sm-padding-x: theme(spacing.4);
@@ -238,16 +243,15 @@ defineSlots<{
238243
}
239244
240245
/**
241-
* Provide colors in
242-
* button outline variant
243-
* and border colors for
246+
* Provide border
247+
* colors for
244248
* solid variant
245249
*/
246250
&&--variant-solid {
247251
&.btn {
248252
&--default {
249-
@apply text-default;
250-
@apply dark:text-dark-default;
253+
@apply text-default border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
254+
@apply dark:text-dark-default dark:border-dark-default-alpha dark:hover:border-dark-subtle-alpha dark:active:border-dark-subtle-alpha dark:focus:border-dark-subtle-alpha;
251255
}
252256
253257
&--primary {
@@ -277,76 +281,83 @@ defineSlots<{
277281
}
278282
}
279283
280-
&&--variant-solid {
281-
&.btn--default {
282-
@apply border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
283-
@apply dark:border-dark-default-alpha dark:hover:border-dark-subtle-alpha dark:active:border-dark-subtle-alpha dark:focus:border-dark-subtle-alpha;
284-
}
285-
}
286-
284+
/**
285+
* Button outline variant
286+
*/
287287
&&--variant-outline {
288288
@apply border-default hover:border-subtle active:border-subtle focus:border-subtle;
289289
@apply dark:border-dark-default dark:hover:border-dark-subtle dark:focus:border-dark-subtle dark:active:border-dark-subtle;
290+
291+
&.btn--emphasis {
292+
@apply border-default text-on-emphasis hover:text-on-emphasis;
293+
@apply dark:border-dark-default dark:text-dark-on-emphasis;
294+
}
290295
}
291296
292297
/**
293298
* Button ghost variant
294299
*/
295300
&&--variant-ghost {
296-
@apply border-transparent bg-transparent hover:border-default-alpha hover:bg-default-alpha active:bg-default-alpha focus:bg-default-alpha active:border-default-alpha focus:border-default-alpha ;
301+
@apply border border-transparent bg-transparent hover:border-default-alpha hover:bg-default-alpha active:bg-default-alpha focus:bg-default-alpha active:border-default-alpha focus:border-default-alpha ;
297302
@apply dark:border-transparent dark:bg-transparent hover:dark:border-dark-default-alpha hover:dark:bg-dark-default-alpha active:dark:bg-dark-default-alpha focus:dark:bg-dark-default-alpha active:dark:border-dark-default-alpha focus:dark:border-dark-default-alpha;
298303
}
299304
300305
/**
301-
* Provide text colors
302-
* in button link variant
306+
* Provide colors
307+
* of button ghost variant
303308
*/
304-
/* &&--variant-link, */
305309
&&--variant-ghost {
306-
@apply border border-transparent;
307-
308310
&.btn {
309311
&--primary {
310-
@apply text-brand-action hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
311-
@apply dark:text-dark-brand-action hover:dark:text-[color:var(--p-color-dark-primary-hover)] focus:dark:text-[color:var(--p-color-dark-primary-focus)] active:dark:text-[color:var(--p-color-dark-primary-focus)];
312+
@apply text-brand-action hover:text-brand-action focus:text-brand-action active:text-brand-action;
313+
@apply dark:text-dark-brand-action hover:dark:text-dark-brand-action focus:dark:text-dark-brand-action active:dark:text-dark-brand-action;
312314
}
313315
314316
&--info {
315-
@apply text-info hover:text-[color:var(--p-color-info-hover)] focus:text-[color:var(--p-color-info-focus)] active:text-[color:var(--p-color-info-focus)];
316-
@apply dark:text-dark-info hover:dark:text-[color:var(--p-color-dark-info-hover)] focus:dark:text-[color:var(--p-color-dark-info-focus)] active:dark:text-[color:var(--p-color-dark-info-focus)];
317+
@apply text-info hover:text-info focus:text-info active:text-info;
318+
@apply dark:text-dark-info hover:dark:text-dark-info focus:dark:text-dark-info active:dark:text-dark-info;
317319
}
318320
319321
&--success {
320-
@apply text-success hover:text-[color:var(--p-color-success-hover)] focus:text-[color:var(--p-color-success-focus)] active:text-[color:var(--p-color-success-focus)];
321-
@apply dark:text-dark-success hover:dark:text-[color:var(--p-color-dark-success-hover)] focus:dark:text-[color:var(--p-color-dark-success-focus)] active:dark:text-[color:var(--p-color-dark-success-focus)];
322+
@apply text-success hover:text-success focus:text-success active:text-success;
323+
@apply dark:text-dark-success hover:dark:text-success focus:dark:text-success active:dark:text-success;
322324
}
323325
324326
&--warning {
325-
@apply text-warning hover:text-[color:var(--p-color-warning-hover)] focus:text-[color:var(--p-color-warning-focus)] active:text-[color:var(--p-color-warning-focus)];
326-
@apply dark:text-dark-warning hover:dark:text-[color:var(--p-color-dark-warning-hover)] focus:dark:text-[color:var(--p-color-dark-warning-focus)] active:dark:text-[color:var(--p-color-dark-warning-focus)];
327+
@apply text-warning hover:text-warning focus:text-warning active:text-warning;
328+
@apply dark:text-dark-warning hover:dark:text-warning focus:dark:text-warning active:dark:text-warning;
327329
}
328330
329331
&--danger {
330-
@apply text-danger hover:text-[color:var(--p-color-danger-hover)] focus:text-[color:var(--p-color-danger-focus)] active:text-[color:var(--p-color-danger-focus)];
331-
@apply dark:text-dark-danger hover:dark:text-[color:var(--p-color-dark-danger-hover)] focus:dark:text-[color:var(--p-color-dark-danger-focus)] active:dark:text-[color:var(--p-color-dark-danger-focus)];
332+
@apply text-danger hover:text-danger focus:text-danger active:text-danger;
333+
@apply dark:text-dark-danger hover:dark:text-dark-danger focus:dark:text-dark-danger active:dark:text-dark-danger;
332334
}
333335
}
334336
}
335337
338+
/**
339+
* Button link variant
340+
*/
336341
&&--variant-link {
337342
&.btn {
338-
/* &--default { */
339-
@apply text-link hover:text-[color:var(--p-text-link-hover)] focus:text-[color:var(--p-text-link-focus)] active:text-[color:var(--p-text-link-focus)];
340-
@apply dark:text-dark-link dark:hover:text-[color:var(--p-text-dark-link-hover)] dark:focus:text-[color:var(--p-text-dark-link-focus)] dark:active:text-[color:var(--p-text-dark-link-focus)];
341-
/* } */
343+
@apply text-link hover:text-[color:var(--p-text-link-hover)] focus:text-[color:var(--p-text-link-focus)] active:text-[color:var(--p-text-link-focus)];
344+
@apply dark:text-dark-link dark:hover:text-[color:var(--p-text-dark-link-hover)] dark:focus:text-[color:var(--p-text-dark-link-focus)] dark:active:text-[color:var(--p-text-dark-link-focus)];
345+
346+
&--primary {
347+
@apply text-brand-action hover:text-[color:var(--p-color-primary-hover)];
348+
@apply dark:text-dark-brand-action dark:hover:text-[color:var(--p-color-dark-primary-hover)];
349+
}
342350
343351
&--emphasis {
344-
@apply text-state-emphasis hover:text-state-emphasis;
345-
@apply dark:text-dark-state-emphasis;
352+
@apply text-link-on-emphasis hover:text-[color:var(--p-text-link-emphasis-hover)] focus:text-[color:var(--p-text-link-emphasis-focus)] active:text-[color:var(--p-text-link-emphasis-focus)];
353+
@apply dark:text-dark-link dark:hover:text-[color:var(--p-text-dark-link-emphasis-hover)] dark:focus:text-[color:var(--p-text-dark-link-emphasis-focus)] dark:active:text-[color:var(--p-text-dark-link-emphasis-focus)];
346354
}
347355
}
348356
}
349357
358+
/**
359+
* Button input variant
360+
*/
350361
&&--variant-input {
351362
@apply border border-solid border-muted text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
352363
@apply dark:border-dark-muted dark:text-dark-subtle dark:bg-dark-default hover:dark:border-dark-subtle focus:dark:border-dark-subtle active:dark:outline-dark-default;

‎src/components/button/index.md

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ description: Base button component
6767

6868
Button has 4 variants, `solid`, `outline`, `ghost`, `link`. Default is `solid`
6969

70-
### Without Color
70+
### Default color
7171

7272
<preview>
7373
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
@@ -93,22 +93,22 @@ Button has 4 variants, `solid`, `outline`, `ghost`, `link`. Default is `solid`
9393
<p-button color="info" variant="solid">Click me</p-button>
9494
<p-button variant="outline">Click me</p-button>
9595
<p-button color="info" variant="ghost">Click me</p-button>
96-
<p-button color="info" variant="link">Click me</p-button>
96+
<p-button variant="link">Click me</p-button>
9797
</div>
9898
</preview>
9999

100100
```vue
101101
<template>
102102
<p-button color="info" variant="solid">Click me</p-button>
103-
<p-button color="info" variant="outline">Click me</p-button>
104-
<p-button variant="ghost">Click me</p-button>
105-
<p-button color="info" variant="link">Click me</p-button>
103+
<p-button variant="outline">Click me</p-button>
104+
<p-button color="info" variant="ghost">Click me</p-button>
105+
<p-button variant="link">Click me</p-button>
106106
</template>
107107
```
108108

109109
## Colors
110110

111-
Button available in 5 different colors `primary`, `info`, `success`, `warning` and `danger`.
111+
Button solid and ghost available in 5 different colors `primary`, `info`, `success`, `warning` and `danger`.
112112

113113
<preview>
114114
<div class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-5">
@@ -130,9 +130,8 @@ Button available in 5 different colors `primary`, `info`, `success`, `warning` a
130130
</template>
131131
```
132132

133-
It's also work with other variants (except `outline`).
134-
135-
<preview label="outline variant">
133+
<!-- It's also available in ghost variants. -->
134+
<preview label="ghost variant">
136135
<div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5">
137136
<p-button variant="ghost" color="primary">Click me</p-button>
138137
<p-button variant="ghost" color="info">Click me</p-button>
@@ -142,29 +141,36 @@ It's also work with other variants (except `outline`).
142141
</div>
143142
</preview>
144143

145-
<preview label="link variant">
146-
<div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5">
147-
<p-button variant="link" color="primary">Click me</p-button>
148-
<p-button variant="link" color="info">Click me</p-button>
149-
<p-button variant="link" color="success">Click me</p-button>
150-
<p-button variant="link" color="warning">Click me</p-button>
151-
<p-button variant="link" color="danger">Click me</p-button>
152-
</div>
153-
</preview>
154-
155144
```vue
156145
<template>
157146
<p-button variant="ghost" color="primary">Click me</p-button>
158147
<p-button variant="ghost" color="info">Click me</p-button>
159148
<p-button variant="ghost" color="success">Click me</p-button>
160149
<p-button variant="ghost" color="warning">Click me</p-button>
161150
<p-button variant="ghost" color="danger">Click me</p-button>
151+
</template>
152+
```
162153

163-
<p-button variant="link" color="primary">Click me</p-button>
164-
<p-button variant="link" color="info">Click me</p-button>
165-
<p-button variant="link" color="success">Click me</p-button>
166-
<p-button variant="link" color="warning">Click me</p-button>
167-
<p-button variant="link" color="danger">Click me</p-button>
154+
Button link and button outline are available in emphasis color to accommodate dark background (inverse).
155+
<preview label="link variant">
156+
<div class="flex items-center space-x-4">
157+
<p-button variant="outline">Click me</p-button>
158+
<div class="px-4 py-3 bg-inverse dark:bg-dark-inverse">
159+
<p-button variant="outline" color="emphasis">Click me</p-button>
160+
</div>
161+
<p-button variant="link">Click me</p-button>
162+
<div class="px-4 py-3 bg-inverse dark:bg-dark-inverse">
163+
<p-button variant="link" color="emphasis">Click me</p-button>
164+
</div>
165+
</div>
166+
</preview>
167+
168+
```vue
169+
<template>
170+
<p-button variant="outline">Click me</p-button>
171+
<p-button variant="outline" color="emphasis">Click me</p-button>
172+
<p-button variant="link">Click me</p-button>
173+
<p-button variant="link" color="emphasis">Click me</p-button>
168174
</template>
169175
```
170176

@@ -251,18 +257,18 @@ You can also combine with `pill` mode to make round button
251257
<preview label="link variant">
252258
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
253259
<p-button color="info" variant="solid" disabled>Click me</p-button>
254-
<p-button color="info" variant="outline" disabled>Click me</p-button>
255-
<p-button variant="ghost" disabled>Click me</p-button>
256-
<p-button color="info" variant="link" disabled>Click me</p-button>
260+
<p-button variant="outline" disabled>Click me</p-button>
261+
<p-button variant="ghost" color="info" disabled>Click me</p-button>
262+
<p-button variant="link" disabled>Click me</p-button>
257263
</div>
258264
</preview>
259265

260266
```vue
261267
<template>
262268
<p-button color="info" variant="solid" disabled>Click me</p-button>
263-
<p-button color="info" variant="outline" disabled>Click me</p-button>
264-
<p-button variant="ghost" disabled>Click me</p-button>
265-
<p-button color="info" variant="link" disabled>Click me</p-button>
269+
<p-button variant="outline" disabled>Click me</p-button>
270+
<p-button variant="ghost" color="info" disabled>Click me</p-button>
271+
<p-button variant="link" disabled>Click me</p-button>
266272
</template>
267273
```
268274

@@ -271,18 +277,18 @@ You can also combine with `pill` mode to make round button
271277
<preview label="link variant">
272278
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
273279
<p-button color="info" variant="solid" loading>Click me</p-button>
274-
<p-button color="info" variant="outline" loading>Click me</p-button>
275-
<p-button variant="ghost" loading>Click me</p-button>
276-
<p-button color="info" variant="link" loading>Click me</p-button>
280+
<p-button variant="outline" loading>Click me</p-button>
281+
<p-button variant="ghost" color="info" loading>Click me</p-button>
282+
<p-button variant="link" loading>Click me</p-button>
277283
</div>
278284
</preview>
279285

280286
```vue
281287
<template>
282288
<p-button color="info" variant="solid" loading>Click me</p-button>
283-
<p-button color="info" variant="outline" loading>Click me</p-button>
284-
<p-button variant="ghost" loading>Click me</p-button>
285-
<p-button color="info" variant="link" loading>Click me</p-button>
289+
<p-button variant="outline" loading>Click me</p-button>
290+
<p-button variant="ghost" color="info" loading>Click me</p-button>
291+
<p-button variant="link" loading>Click me</p-button>
286292
</template>
287293
```
288294

‎src/foundation/colors/Colors.json

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -974,13 +974,20 @@
974974
},
975975
{
976976
"id" : 6,
977+
"token" : "fg.linkOnEmphasis",
978+
"figma" : "main/blue/20",
979+
"hex" : "#70A9E5",
980+
"parentToken" : "$blue.20"
981+
},
982+
{
983+
"id" : 7,
977984
"token" : "fg.onEmphasis",
978985
"figma" : "main/gray/0",
979986
"hex" : "#FDFDFD",
980987
"parentToken" : "$gray.0"
981988
},
982989
{
983-
"id" : 7,
990+
"id" : 8,
984991
"token" : "fg.stateEmphasis",
985992
"figma" : "main/gray/0",
986993
"hex" : "#FDFDFD",
@@ -1066,13 +1073,20 @@
10661073
},
10671074
{
10681075
"id" : 6,
1076+
"token" : "fg.linkOnEmphasis",
1077+
"figma" : "main/blue/40",
1078+
"hex" : "#0065D1",
1079+
"parentToken" : "$blue.40"
1080+
},
1081+
{
1082+
"id" : 7,
10691083
"token" : "fg.onEmphasis",
10701084
"figma" : "main/gray/100",
10711085
"hex" : "#0D1117",
10721086
"parentToken" : "$gray.100"
10731087
},
10741088
{
1075-
"id" : 7,
1089+
"id" : 8,
10761090
"token" : "fg.stateEmphasis",
10771091
"figma" : "main/gray/0",
10781092
"hex" : "#FDFDFD",

0 commit comments

Comments
 (0)