[Box] Property 'outline' should accept theme colors

Describe the bug A clear and concise description of what the bug is.

Using eg. outline="red.500" it’s left as-is instead of transforming it to correct color.

Expected Behavior A clear and concise description of what you expected to happen.

Color should be transformed.

@chakra-ui/core: 0.8.0

[segunadebayo]

Hi @FredyC,

I agree with @with-heart. outline is a shorthand property for outline-width, outline-color, and outline-style. It depends on what you want to achieve.

• If you really need to set the outline color, I’d recommend you pass outline: 2px solid, and then outlineColor: red.500,
• If you wanted to change the outline around most Chakra components, I’d recommend you do so from theme.shadows.outline
• Finally, you can also try borderColor

As regards accessibility, the goal of an outline is to indicate where the user’s focus is at any point in time. You can achieve that with any of the 3 options above.

Hope this helps.

Cheers.

[danielkcz]

Well, so outlineColor and others are part of the upcoming 1.x only as it seems. I don’t feel like upgrading just because of that and deal with other changes.

The theme.shadows.outline would be lovely as a unified way, but it only sets box-shadow property, not the outline.

And the border is not that great option either because sometimes I used it for a different thing.

I will cope somehow, just stating how it is.