search

segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.39k stars 832 forks source link

color property in Heading component not working properly #1242

Closed MohdAhmad1 closed 2 years ago

MohdAhmad1 commented 3 years ago

Color names are not working properly in Heading Component, but working fine when using color values or Text Component

// NOT WORKING
<Heading size={600} color="Blue500">
  Lorem Ipsum
</Heading>
// WORKING
<Heading size={600} color="#3366FF">
  Lorem Ipsum
</Heading>

<Text color="muted">
  Lorem Ipsum
</Text>
akleiner2 commented 3 years ago

This is a byproduct of the way our props system works at the moment. A couple of things to get around it: 

const { colors } = useTheme()

<Heading size={600} color={colors.blue600} />

or -- feel free to make color a "theme"-able value for heading - we do this already for Text if you want to look for an example implementation. PRs welcome!

darkknight20032001 commented 2 years ago

@zakiAzfar is this issue still open???

MohdAhmad1 commented 2 years ago

@zakiAzfar is this issue still open???

Don't know, haven't used it since a very long time