internetarchive / internetarchive/elements

Add shared dark-surface color tokens to theme-styles.ts

Open
#66 0 comments 0 reactions 1 assignee Claimed by @jbuckner View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.