Autodesk / Autodesk/hig

Enable setting color of Typography components

Open
#1,390 0 comments 0 reactions 0 assignees View on GitHub
type
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.