Skip to content

Button warning and warning solid variants as only colour difference? #21

Description

@microbit-grace

Similar to Button toolbar variants only varies the focus ring colour issue, I wonder if the warning variants should be variants. For example, in Chakra, they seem to not count it as a separate variant.

A warning solid button is pretty much a button with "brand" colour replaced with "danger".

But for a warning button, there is a bit more difference when compared with a secondary button (see numbers for color and _active borderColor):

secondary: {
borderWidth: "2px",
borderColor: "brand.500",
color: "brand.700",
bg: "transparent",
_hover: { borderColor: "brand.600" },
_active: { bg: "brand.50", borderColor: "brand.700" },
},

warning: {
borderWidth: "2px",
borderColor: "danger.500",
color: "danger.500",
bg: "transparent",
_hover: { borderColor: "danger.600" },
_active: { bg: "danger.50", borderColor: "danger.500" },
},

Current warning button
Image

Secondary button with danger color
Image

We tend to use a darker colour text colour in secondary buttons to satisfy text colour contrast. The current warning button doesn't do that. This might explain why the current warning button text appear to not have sufficient text colour contrast (potentially a separate issue), or perhaps it is to do with colour selection (also potentially a separate issue).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions