internetarchive / internetarchive/elements
Add shared dark-surface color tokens to theme-styles.ts
- Dominant language
- TypeScript
- Stars
- 12
- Forks
- 3
- Avg merge
- 7d 21h
- Merged PRs (30d)
- 25
Description
## Problem
The house palette in `src/themes/theme-styles.ts` is light-theme oriented — `--primary-text-color` (dark-gray) sits on `--primary-background-color` (off-white), and the darkest base color is `--dark-gray` (#2c2c2c). Dark-surface components can't consume the semantic tokens without inverting them, so they carry local hex defaults instead.
Surfaced during the item-navigator migration (PR #64). `ia-item-navigator` is a dark UI (white text/icons on near-black) and currently re-declares these hexes because the palette has no equivalent:
- near-blacks `#000`, `#151515`, `#212121` (theater / embed field / drawer)
- border `#4b4b4b` — sits between `--mid-gray` (#333) and `--light-gray` (#666)
- active-file highlight `#538bc5` — neither `--navy-blue` (#194880) nor `--bright-blue` (#4b64ff)
- translucent overlays `rgba(255,255,255,.1)` / `rgba(255,255,255,.05)`, scrim `rgba(0,0,0,.7)`
Sibling elements components (`ia-button`, `ia-otp`, `ia-status-indicator`) all consume the *semantic* tokens; none reference raw base names. Dark components have no such path today.
## Proposal
- Add a small set of shared **dark-surface base tokens** to `theme-styles.ts` (e.g. `--surface-dark-1/2/3` for the near-black ladder, `--border-dark`, a `--scrim`, and an overlay-hover token for the translucent whites).
- Optionally expose matching semantic/adjustable tokens (`--ia-theme-*` fallbacks) consistent with the existing convention.
- Re-point `ia-item-navigator`'s `--item-navigator-*` fallbacks at the new tokens, replacing the local hexes.
## Out of scope
- `ia-item-navigator` behavior or layout — this is palette infrastructure only.
- The `#538bc5` active-file blue can be revisited here (fold into a shared accent) or left as a component knob; call it out during design.
## Tracking
- Jira: [WEBDEV-8796](https://webarchive.jira.com/browse/WEBDEV-8796)
- Surfaced by: item-navigator migration — [WEBDEV-8458](https://webarchive.jira.com/browse/WEBDEV-8458) / #64
[WEBDEV-8796]: https://webarchive.jira.com/browse/WEBDEV-8796?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.