[RFC]: Add new prop to Button that describes its tone

[krzysztofzuraw]

Short description of the feature

Add a new tone property to the Button component. The tone can be one of the following: default, critical, info, success or warning.

Full description

Currently, I can't have a Button component with the critical or info state if it is also the secondary or tertiary variant. To fix that let's add new prop tone to Button component so new API will look like this:

type ButtonProps = {
  tone?: 'default' | 'critical' | 'info' | 'success' | 'warning'
  variant: 'primary' | 'secondary' | 'tertiary'
}

<Button variant="primary" /> // if not provided tone is `default`
<Button variant="secondary" />
<Button variant="tertiary" />

<Button variant="primary" tone="critical" />
<Button variant="secondary" tone="critical" />
<Button variant="tertiary" tone="critical" />

<Button variant="primary" tone="info" />
<Button variant="secondary" tone="info" />
<Button variant="tertiary" tone="info" />

<Button variant="primary" tone="success" />
<Button variant="secondary" tone="success" />
<Button variant="tertiary" tone="success" />

<Button variant="primary" tone="warning" />
<Button variant="secondary" tone="warning" />
<Button variant="tertiary" tone="warning" />

Adding those roles will require additional tokens to be created inside contract.

Acceptance Criteria

• Add new tokens to MacawUI:

buttonCriticalDisabled
buttonCriticalPrimary
buttonCriticalPrimaryFocused
buttonCriticalPrimaryHovered
buttonCriticalPrimaryPressed
buttonCriticalSecondary
buttonCriticalSecondaryFocused
buttonCriticalSecondaryHovered
buttonCriticalSecondaryPressed
buttonCriticalTertiary
buttonCriticalTertiaryFocused
buttonCriticalTertiaryHovered
buttonCriticalTertiaryPressed

buttonInfoDisabled
buttonInfoPrimary
buttonInfoPrimaryFocused
buttonInfoPrimaryHovered
buttonInfoPrimaryPressed
buttonInfoSecondary
buttonInfoSecondaryFocused
buttonInfoSecondaryHovered
buttonInfoSecondaryPressed
buttonInfoTertiary
buttonInfoTertiaryFocused
buttonInfoTertiaryHovered
buttonInfoTertiaryPressed

buttonSuccessDisabled
buttonSuccessPrimary
buttonSuccessPrimaryFocused
buttonSuccessPrimaryHovered
buttonSuccessPrimaryPressed
buttonSuccessSecondary
buttonSuccessSecondaryFocused
buttonSuccessSecondaryHovered
buttonSuccessSecondaryPressed
buttonSuccessTertiary
buttonSuccessTertiaryFocused
buttonSuccessTertiaryHovered
buttonSuccessTertiaryPressed

buttonWarningDisabled
buttonWarningPrimary
buttonWarningPrimaryFocused
buttonWarningPrimaryHovered
buttonWarningPrimaryPressed
buttonWarningSecondary
buttonWarningSecondaryFocused
buttonWarningSecondaryHovered
buttonWarningSecondaryPressed
buttonWarningTertiary
buttonWarningTertiaryFocused
buttonWarningTertiaryHovered
buttonWarningTertiaryPressed

• Use new tokens to create button component with tones: default, critical, warning, info and success

Additional notes

No response

[lkostrowski]

LGTM

[github-actions]

This issue is stale because it has been open 14 days with no activity.