seas-computing / seas-computing/mark-one

Replace BLACK, WHITE, and polish functions

Open
#216 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

a11y Frontend refactor
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 #000000 and #FFFFFF respectively instead of the current colors
  • the 7 polish functions are replaced with hex codes that approximately match the current colors

Related Issues

dev-team-notes #29

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.