Enable setting color of Typography components
- Dominant language
- JavaScript
- Stars
- 193
- Forks
- 112
- PR merge metrics
- No merged PRs in 30d
Description
### Typical use
```
Import Typography from '@hig/typography';
function MySpecialMessage() {
return (
Hello, world!
Hello, world!
Hello, world!
Hello, world!
Hello, world!
)
}
```
```
Typography.propTypes = {
variant: PropTypes.oneOf(AVAILABLE_VARIANTS),
fontWeight: PropTypes.oneOf(AVAILABLE_FONT_WEIGHTS)
align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
color: PropTypes.string // Any string value CSS would accept
colorName: PropTypes.oneOf(COLOR_NAMES)
}
```
**Dev notes**
- `COLOR_NAMES` should come from the `@hig/theme-data` package;
- When both `color` and `colorName` are defined, `color` takes precedence
- `AVAILABLE_VARIANTS`, `AVAILABLE_FONT_WEIGHTS`, and `AVAILABLE_ALIGNMENTS` should be defined in the `@hig/typography` package, and exported for use elsewhere.
- Text color defaults to `colorScheme.textColor`
Contributor guide
Research direction
Start by locating the @hig/typography package and its Typography component, then inspect how @hig/theme-data exposes color names and how existing component tests cover props. The work is done when color and colorName are supported with the stated precedence and default, and the available typography constants are exported for reuse.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100