refactor(colors)!: merge color props under common prop

This MR merges primary, secondary and destructive colors under one color prop. Same with pastel colors.

Currently, to make a secondary button we've been using:

<fw-button secondary>
  Secondary button
</fw-button>

This is fine for modifiers like outline or shadow that can be only boolean values but for colors it can cause errors and could be hard to understand. Think about what would happen if we applied both secondary and destructive at the same time?

What if we wanted to change button color from secondary to destructive? That would create a logic overhead that would need to be handled.

<fw-button
  :secondary="buttonColor === 'secondary'"
  :destructive="buttonColor === 'destructive'"
>
  Button
</fw-button>

This MR makes it so the logic handling is much easier:

<fw-button :color="buttonColor">
  Button
</fw-button>

---

Color props (primary, secondary and destructive) and Pastel props (blue, red, purple, green and yellow) are mutualy exclusive as they're merged under the same color prop. To use the color prop, one should do:

// Support only colors:
const props = defineProps<ColorProps>()
const color = useColor(() => props.color /* , 'primary' */) // default value (last argument) is optional

// Support only pastels:
const props = defineProps<PastelProps>()
const pastel = usePastel(() => props.color /* , 'blue' */) // default value (last argument) is optional

// Support both colors and pastels:
const props = defineProps<ColorProps | PastelProps>()
const colorOrPastel = useColorOrPastel(() => props.color, 'blue') // default value (last argument) is required

docs/components/button/basic.md

@@ -6,17 +6,15 @@ const click = () => new Promise(resolve => setTimeout(resolve, 1000))
 
 Buttons are UI elements that users can interact with to perform actions. Funkwhale uses buttons in many contexts.
 
-| Prop          | Data type | Required? | Description                                        |
-| ------------- | --------- | --------- | -------------------------------------------------- |
-| `outline`     | Boolean   | No        | Whether to render the button as an outline button. |
-| `shadow`      | Boolean   | No        | Whether to render the button with a shadow         |
-| `round`       | Boolean   | No        | Whether to render the button as a round button     |
-| `icon`        | String    | No        | The icon attached to the button                    |
-| `is-active`   | Boolean   | No        | Whether the button is in an active state           |
-| `is-loading`  | Boolean   | No        | Whether the button is in a loading state           |
-| `primary`     | Boolean   | No        | Renders a primary button                           |
-| `secondary`   | Boolean   | No        | Renders a secondary button                         |
-| `destructive` | Boolean   | No        | Renders a destructive button                       |
+| Prop          | Data type                                 | Required? | Default   | Description                                        |
+| ------------- | ----------------------------------------- | --------- | --------- | -------------------------------------------------- |
+| `outline`     | Boolean                                   | No        | `false`   | Whether to render the button as an outline button. |
+| `shadow`      | Boolean                                   | No        | `false`   | Whether to render the button with a shadow         |
+| `round`       | Boolean                                   | No        | `false`   | Whether to render the button as a round button     |
+| `icon`        | String                                    | No        |           | The icon attached to the button                    |
+| `is-active`   | Boolean                                   | No        | `false`   | Whether the button is in an active state           |
+| `is-loading`  | Boolean                                   | No        | `false`   | Whether the button is in a loading state           |
+| `color`       | `primary` \| `secondary` \| `destructive` | No        | `primary` | Renders a colored button                           |
 
 ## Button types
 
@@ -45,12 +43,12 @@ This is the default type. If you don't specify a type, a primary button is rende
 Secondary buttons represent **neutral** actions such as cancelling a change or dismissing a notification.
 
 ```vue-html
-<fw-button secondary>
+<fw-button color="secondary">
   Secondary button
 </fw-button>
 ```
 
-<fw-button secondary>
+<fw-button color="secondary">
   Secondary button
 </fw-button>
 
@@ -59,12 +57,12 @@ Secondary buttons represent **neutral** actions such as cancelling a change or d
 Desctrutive buttons represent **dangerous** actions including deleting items or purging domain information.
 
 ```vue-html
-<fw-button destructive>
+<fw-button color="destructive">
   Destructive button
 </fw-button>
 ```
 
-<fw-button destructive>
+<fw-button color="destructive">
   Destructive button
 </fw-button>
 
@@ -243,20 +241,20 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
 :::
 
 ```vue-html
-<fw-button secondary icon="bi-three-dots-vertical" />
+<fw-button color="secondary" icon="bi-three-dots-vertical" />
 
-<fw-button secondary is-round icon="bi-x" />
+<fw-button color="secondary" is-round icon="bi-x" />
 
 <fw-button icon="bi-save">&nbsp;</fw-button>
 
-<fw-button destructive icon="bi-trash">
+<fw-button color="destructive" icon="bi-trash">
   Delete
 </fw-button>
 ```
 
-<fw-button secondary icon="bi-three-dots-vertical" />
-<fw-button secondary round icon="bi-x" />
+<fw-button color="secondary" icon="bi-three-dots-vertical" />
+<fw-button color="secondary" round icon="bi-x" />
 <fw-button icon="bi-save">&nbsp;</fw-button>
-<fw-button destructive icon="bi-trash">
+<fw-button color="destructive" icon="bi-trash">
   Delete
 </fw-button>