seas-computing / seas-computing/mark-one
Replace BLACK, WHITE, and polish functions
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
Description
Within the MarkOneTheme, we need to replace the BLACK and WHITE constants with true white (#FFFFFF) and true black (#000000), as they currently use colors that are slightly off from those. We also need to replace any colors that use the polish library functions lighten and darken with hex codes. These changes will make our theme more straightforward, so it's easier to determine accessible color combinations moving forward.
The hex code equivalents for the lighten and darken functions are approximately as follows (worth checking the styleguide as these updates are made, to see if the hex code is actually equivalent to the previous function output):
| color name | function | hex code |
|---|---|---|
| background.darker | darken(0.75, WHITE) | #3f3f3f |
| background.base.medium | darken(0.175, WHITE) | #d1d1d1 |
| text.light | lighten(0.9, BLACK) | #fefefe |
| font.note | lighten(0.35, BLACK) | #717171 |
| font.title | lighten(0.35, BLACK) | #717171 |
| border.light | lighten(0.5, BLACK) | #979797 |
| border.heavy | lighten(0.3, BLACK) | #646464 |
Acceptance Criteria
- the BLACK and WHITE constants use
#000000and#FFFFFFrespectively instead of the current colors - the 7
polishfunctions are replaced with hex codes that approximately match the current colors
Related Issues
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Locate the MarkOneTheme definition and review the styleguide before changing its color values. Replace BLACK and WHITE with #000000 and #FFFFFF, convert the seven polish lighten/darken uses to approximately equivalent hex codes, and confirm the resulting theme colors match the styleguide.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Refactor
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100