Skip to content

Commit

Permalink
fix(button): remove color variant of button link and outline, add col…
Browse files Browse the repository at this point in the history 
…or variant of button ghost
  • Loading branch information
Afriq Yasin Ramadhan authored and Afriq Yasin Ramadhan committed Sep 5, 2024
1 parent 6133d85 commit 0309783
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 88 deletions.
30 changes: 18 additions & 12 deletions packages/tailwind-preset/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,25 +92,31 @@ module.exports = {
],
},
textColor: {
'DEFAULT' : theme.colors.gray[100],
'default' : theme.colors.gray[100],
'subtle' : theme.colors.gray[60],
'subtlest' : theme.colors.gray[35],
'muted' : theme.colors.gray[25],
'link' : theme.colors.blue[50],
'DEFAULT' : theme.colors.gray[100],
'default' : theme.colors.gray[100],
'subtle' : theme.colors.gray[60],
'subtlest': theme.colors.gray[35],
'muted' : theme.colors.gray[25],
'link' : {
'DEFAULT' : theme.colors.blue[50],
'on-emphasis': theme.colors.blue[20],
},
'on-emphasis' : theme.colors.gray[0],
'state-emphasis': theme.colors.gray[0],
'info' : theme.colors.blue[60],
'success' : theme.colors.green[60],
'warning' : theme.colors.orange[60],
'danger' : theme.colors.red[60],
'dark' : {
'DEFAULT' : theme.colors.gray[0],
'default' : theme.colors.gray[0],
'subtle' : theme.colors.gray[40],
'subtlest' : theme.colors.gray[60],
'muted' : theme.colors.gray[75],
'link' : theme.colors.blue[30],
'DEFAULT' : theme.colors.gray[0],
'default' : theme.colors.gray[0],
'subtle' : theme.colors.gray[40],
'subtlest': theme.colors.gray[60],
'muted' : theme.colors.gray[75],
'link' : {
'DEFAULT' : theme.colors.blue[30],
'on-emphasis': theme.colors.blue[20],
},
'on-emphasis' : theme.colors.gray[100],
'state-emphasis': theme.colors.gray[0],
'info' : theme.colors.blue[20],
Expand Down
87 changes: 49 additions & 38 deletions src/components/button/Button.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,10 +150,15 @@ defineSlots<{
--p-color-danger-focus: darken(theme(backgroundColor.danger.emphasis), 10%);
--p-color-dark-danger-focus: darken(theme(backgroundColor.dark.danger.emphasis), 10%);
--p-text-link-hover: darken(theme(textColor.link), 5%);
--p-text-dark-link-hover: darken(theme(textColor.dark.link), 5%);
--p-text-link-focus: darken(theme(textColor.link), 10%);
--p-text-dark-link-focus: darken(theme(textColor.dark.link), 10%);
--p-text-link-hover: darken(theme(textColor.link.DEFAULT), 5%);
--p-text-dark-link-hover: darken(theme(textColor.dark.link.DEFAULT), 5%);
--p-text-link-focus: darken(theme(textColor.link.DEFAULT), 10%);
--p-text-dark-link-focus: darken(theme(textColor.dark.link.DEFAULT), 10%);
--p-text-link-emphasis-hover: darken(theme(textColor.link.on-emphasis), 5%);
--p-text-dark-link-emphasis-hover: darken(theme(textColor.dark.link.on-emphasis), 5%);
--p-text-link-emphasis-focus: darken(theme(textColor.link.on-emphasis), 10%);
--p-text-dark-link-emphasis-focus: darken(theme(textColor.dark.link.on-emphasis), 10%);
--p-button-xs-padding-x: theme(spacing.2);
--p-button-sm-padding-x: theme(spacing.4);
Expand Down Expand Up @@ -238,16 +243,15 @@ defineSlots<{
}
/**
* Provide colors in
* button outline variant
* and border colors for
* Provide border
* colors for
* solid variant
*/
&&--variant-solid {

Check warning on line 250 in src/components/button/Button.vue

View check run for this annotation

codefactor.io / CodeFactor

src/components/button/Button.vue#L250 

Unexpected duplicate selector "&&--variant-solid", first used at line 202. (no-duplicate-selectors)
&.btn {

Check warning on line 251 in src/components/button/Button.vue

View check run for this annotation

codefactor.io / CodeFactor

src/components/button/Button.vue#L251 

Unexpected duplicate selector "&.btn", first used at line 206. (no-duplicate-selectors)
&--default {

Check warning on line 252 in src/components/button/Button.vue

View check run for this annotation

codefactor.io / CodeFactor

src/components/button/Button.vue#L252 

Unexpected duplicate selector "&--default", first used at line 207. (no-duplicate-selectors)
@apply text-default;
@apply dark:text-dark-default;
@apply text-default border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
@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;
}
&--primary {

Check warning on line 257 in src/components/button/Button.vue

View check run for this annotation

codefactor.io / CodeFactor

src/components/button/Button.vue#L257 

Unexpected duplicate selector "&--primary", first used at line 212. (no-duplicate-selectors)
Expand Down Expand Up @@ -277,76 +281,83 @@ defineSlots<{
}
}
&&--variant-solid {
&.btn--default {
@apply border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
@apply dark:border-dark-default-alpha dark:hover:border-dark-subtle-alpha dark:active:border-dark-subtle-alpha dark:focus:border-dark-subtle-alpha;
}
}
/**
* Button outline variant
*/
&&--variant-outline {
@apply border-default hover:border-subtle active:border-subtle focus:border-subtle;
@apply dark:border-dark-default dark:hover:border-dark-subtle dark:focus:border-dark-subtle dark:active:border-dark-subtle;
&.btn--emphasis {
@apply border-default text-on-emphasis hover:text-on-emphasis;
@apply dark:border-dark-default dark:text-dark-on-emphasis;
}
}
/**
* Button ghost variant
*/
&&--variant-ghost {
@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 ;
@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 ;
@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;
}
/**
* Provide text colors
* in button link variant
* Provide colors
* of button ghost variant
*/
/* &&--variant-link, */
&&--variant-ghost {

Check warning on line 309 in src/components/button/Button.vue

View check run for this annotation

codefactor.io / CodeFactor

src/components/button/Button.vue#L309 

Unexpected duplicate selector "&&--variant-ghost", first used at line 300. (no-duplicate-selectors)
@apply border border-transparent;
&.btn {
&--primary {
@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)];
@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)];
@apply text-brand-action hover:text-brand-action focus:text-brand-action active:text-brand-action;
@apply dark:text-dark-brand-action hover:dark:text-dark-brand-action focus:dark:text-dark-brand-action active:dark:text-dark-brand-action;
}
&--info {
@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)];
@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)];
@apply text-info hover:text-info focus:text-info active:text-info;
@apply dark:text-dark-info hover:dark:text-dark-info focus:dark:text-dark-info active:dark:text-dark-info;
}
&--success {
@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)];
@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)];
@apply text-success hover:text-success focus:text-success active:text-success;
@apply dark:text-dark-success hover:dark:text-success focus:dark:text-success active:dark:text-success;
}
&--warning {
@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)];
@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)];
@apply text-warning hover:text-warning focus:text-warning active:text-warning;
@apply dark:text-dark-warning hover:dark:text-warning focus:dark:text-warning active:dark:text-warning;
}
&--danger {
@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)];
@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)];
@apply text-danger hover:text-danger focus:text-danger active:text-danger;
@apply dark:text-dark-danger hover:dark:text-dark-danger focus:dark:text-dark-danger active:dark:text-dark-danger;
}
}
}
/**
* Button link variant
*/
&&--variant-link {
&.btn {
/* &--default { */
@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)];
@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)];
/* } */
@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)];
@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)];
&--primary {
@apply text-brand-action hover:text-[color:var(--p-color-primary-hover)];
@apply dark:text-dark-brand-action dark:hover:text-[color:var(--p-color-dark-primary-hover)];
}
&--emphasis {
@apply text-state-emphasis hover:text-state-emphasis;
@apply dark:text-dark-state-emphasis;
@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)];
@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)];
}
}
}
/**
* Button input variant
*/
&&--variant-input {
@apply border border-solid border-muted text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
@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;
Expand Down
78 changes: 42 additions & 36 deletions src/components/button/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ description: Base button component

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

### Without Color
### Default color

<preview>
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
Expand All @@ -93,22 +93,22 @@ Button has 4 variants, `solid`, `outline`, `ghost`, `link`. Default is `solid`
<p-button color="info" variant="solid">Click me</p-button>
<p-button variant="outline">Click me</p-button>
<p-button color="info" variant="ghost">Click me</p-button>
<p-button color="info" variant="link">Click me</p-button>
<p-button variant="link">Click me</p-button>
</div>
</preview>

```vue
<template>
<p-button color="info" variant="solid">Click me</p-button>
<p-button color="info" variant="outline">Click me</p-button>
<p-button variant="ghost">Click me</p-button>
<p-button color="info" variant="link">Click me</p-button>
<p-button variant="outline">Click me</p-button>
<p-button color="info" variant="ghost">Click me</p-button>
<p-button variant="link">Click me</p-button>
</template>
```

## Colors

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

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

It's also work with other variants (except `outline`).

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

<preview label="link variant">
<div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5">
<p-button variant="link" color="primary">Click me</p-button>
<p-button variant="link" color="info">Click me</p-button>
<p-button variant="link" color="success">Click me</p-button>
<p-button variant="link" color="warning">Click me</p-button>
<p-button variant="link" color="danger">Click me</p-button>
</div>
</preview>

```vue
<template>
<p-button variant="ghost" color="primary">Click me</p-button>
<p-button variant="ghost" color="info">Click me</p-button>
<p-button variant="ghost" color="success">Click me</p-button>
<p-button variant="ghost" color="warning">Click me</p-button>
<p-button variant="ghost" color="danger">Click me</p-button>
</template>
```

<p-button variant="link" color="primary">Click me</p-button>
<p-button variant="link" color="info">Click me</p-button>
<p-button variant="link" color="success">Click me</p-button>
<p-button variant="link" color="warning">Click me</p-button>
<p-button variant="link" color="danger">Click me</p-button>
Button link and button outline are available in emphasis color to accommodate dark background (inverse).
<preview label="link variant">
<div class="flex items-center space-x-4">
<p-button variant="outline">Click me</p-button>
<div class="px-4 py-3 bg-inverse dark:bg-dark-inverse">
<p-button variant="outline" color="emphasis">Click me</p-button>
</div>
<p-button variant="link">Click me</p-button>
<div class="px-4 py-3 bg-inverse dark:bg-dark-inverse">
<p-button variant="link" color="emphasis">Click me</p-button>
</div>
</div>
</preview>

```vue
<template>
<p-button variant="outline">Click me</p-button>
<p-button variant="outline" color="emphasis">Click me</p-button>
<p-button variant="link">Click me</p-button>
<p-button variant="link" color="emphasis">Click me</p-button>
</template>
```

Expand Down Expand Up @@ -251,18 +257,18 @@ You can also combine with `pill` mode to make round button
<preview label="link variant">
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
<p-button color="info" variant="solid" disabled>Click me</p-button>
<p-button color="info" variant="outline" disabled>Click me</p-button>
<p-button variant="ghost" disabled>Click me</p-button>
<p-button color="info" variant="link" disabled>Click me</p-button>
<p-button variant="outline" disabled>Click me</p-button>
<p-button variant="ghost" color="info" disabled>Click me</p-button>
<p-button variant="link" disabled>Click me</p-button>
</div>
</preview>

```vue
<template>
<p-button color="info" variant="solid" disabled>Click me</p-button>
<p-button color="info" variant="outline" disabled>Click me</p-button>
<p-button variant="ghost" disabled>Click me</p-button>
<p-button color="info" variant="link" disabled>Click me</p-button>
<p-button variant="outline" disabled>Click me</p-button>
<p-button variant="ghost" color="info" disabled>Click me</p-button>
<p-button variant="link" disabled>Click me</p-button>
</template>
```

Expand All @@ -271,18 +277,18 @@ You can also combine with `pill` mode to make round button
<preview label="link variant">
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
<p-button color="info" variant="solid" loading>Click me</p-button>
<p-button color="info" variant="outline" loading>Click me</p-button>
<p-button variant="ghost" loading>Click me</p-button>
<p-button color="info" variant="link" loading>Click me</p-button>
<p-button variant="outline" loading>Click me</p-button>
<p-button variant="ghost" color="info" loading>Click me</p-button>
<p-button variant="link" loading>Click me</p-button>
</div>
</preview>

```vue
<template>
<p-button color="info" variant="solid" loading>Click me</p-button>
<p-button color="info" variant="outline" loading>Click me</p-button>
<p-button variant="ghost" loading>Click me</p-button>
<p-button color="info" variant="link" loading>Click me</p-button>
<p-button variant="outline" loading>Click me</p-button>
<p-button variant="ghost" color="info" loading>Click me</p-button>
<p-button variant="link" loading>Click me</p-button>
</template>
```

Expand Down
18 changes: 16 additions & 2 deletions src/foundation/colors/Colors.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -974,13 +974,20 @@
},
{
"id" : 6,
"token" : "fg.linkOnEmphasis",
"figma" : "main/blue/20",
"hex" : "#70A9E5",
"parentToken" : "$blue.20"
},
{
"id" : 7,
"token" : "fg.onEmphasis",
"figma" : "main/gray/0",
"hex" : "#FDFDFD",
"parentToken" : "$gray.0"
},
{
"id" : 7,
"id" : 8,
"token" : "fg.stateEmphasis",
"figma" : "main/gray/0",
"hex" : "#FDFDFD",
Expand Down Expand Up @@ -1066,13 +1073,20 @@
},
{
"id" : 6,
"token" : "fg.linkOnEmphasis",
"figma" : "main/blue/40",
"hex" : "#0065D1",
"parentToken" : "$blue.40"
},
{
"id" : 7,
"token" : "fg.onEmphasis",
"figma" : "main/gray/100",
"hex" : "#0D1117",
"parentToken" : "$gray.100"
},
{
"id" : 7,
"id" : 8,
"token" : "fg.stateEmphasis",
"figma" : "main/gray/0",
"hex" : "#FDFDFD",
Expand Down

0 comments on commit 0309783

Please sign in to comment.