Gruvbox dark theme -- token swap only

ldraney commented

2026-05-19 02:22:49 +00:00

Owner

Summary

Swap all :root design tokens from light mode to gruvbox dark palette. Zero CSS rule changes -- follows ror-css-guide principle: "Projects override tokens, not rules."

Changes

Replace 10 color tokens in application.css :root block with gruvbox dark values
Add --color-danger and --color-success tokens
Switch mermaid.js from default to dark theme

Gruvbox mapping

Token	Old (light)	New (gruvbox)	Gruvbox name
`--color-bg`	`#fafafa`	`#282828`	dark0
`--color-surface`	`#ffffff`	`#3c3836`	dark1
`--color-text`	`#1a1a1a`	`#ebdbb2`	light0
`--color-muted`	`#57606a`	`#a89984`	light4
`--color-link`	`#0366d6`	`#8ec07c`	aqua
`--color-link-hover`	`#024ea4`	`#b8bb26`	green
`--color-border`	`#d0d7de`	`#504945`	dark2
`--color-accent`	`#0366d6`	`#d79921`	yellow
`--color-code-bg`	`#f6f8fa`	`#1d2021`	dark0_hard

Test Plan

mdview a markdown file with headings, code, tables, blockquotes
Verify mermaid diagrams render with dark theme
Check contrast is readable on all element types

Review Checklist

All colors use var(--token) -- zero hardcoded hex outside :root
No CSS rules changed -- token swap only
Follows ror-css-guide conventions

Closes #1

## Summary Swap all `:root` design tokens from light mode to gruvbox dark palette. Zero CSS rule changes -- follows `ror-css-guide` principle: "Projects override tokens, not rules." ## Changes - Replace 10 color tokens in `application.css` `:root` block with gruvbox dark values - Add `--color-danger` and `--color-success` tokens - Switch mermaid.js from `default` to `dark` theme ### Gruvbox mapping | Token | Old (light) | New (gruvbox) | Gruvbox name | |---|---|---|---| | `--color-bg` | `#fafafa` | `#282828` | dark0 | | `--color-surface` | `#ffffff` | `#3c3836` | dark1 | | `--color-text` | `#1a1a1a` | `#ebdbb2` | light0 | | `--color-muted` | `#57606a` | `#a89984` | light4 | | `--color-link` | `#0366d6` | `#8ec07c` | aqua | | `--color-link-hover` | `#024ea4` | `#b8bb26` | green | | `--color-border` | `#d0d7de` | `#504945` | dark2 | | `--color-accent` | `#0366d6` | `#d79921` | yellow | | `--color-code-bg` | `#f6f8fa` | `#1d2021` | dark0_hard | ## Test Plan - [ ] `mdview` a markdown file with headings, code, tables, blockquotes - [ ] Verify mermaid diagrams render with dark theme - [ ] Check contrast is readable on all element types ## Review Checklist - [x] All colors use `var(--token)` -- zero hardcoded hex outside `:root` - [x] No CSS rules changed -- token swap only - [x] Follows ror-css-guide conventions ## Related Notes Closes #1

ldraney added 1 commit

2026-05-19 02:22:49 +00:00

style: gruvbox dark theme -- token swap only

CI / scan_ruby (pull_request) Waiting to run

Details

CI / scan_js (pull_request) Waiting to run

Details

CI / lint (pull_request) Waiting to run

Details

3d8ad442e9

Replace the light-mode design tokens with gruvbox dark palette.
No CSS rules changed -- following ror-css-guide principle:
"Projects override tokens, not rules."

Gruvbox mapping:
- bg: #282828 (dark0), surface: #3c3836 (dark1)
- text: #ebdbb2 (light0), muted: #a89984 (light4)
- links: aqua #8ec07c, hover: green #b8bb26
- accent: yellow #d79921, code-bg: #1d2021 (dark0_hard)
- borders: #504945 (dark2)

Also switches mermaid.js to dark theme.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ldraney commented

2026-05-19 02:23:56 +00:00

Author

Owner

PR #2 Review

DOMAIN REVIEW

Tech stack: Rails 8 + Hotwire, CSS custom properties (design tokens), Stimulus controller, mermaid.js.

CSS token swap (application.css): All 10 existing :root tokens replaced with gruvbox dark palette values. Two new tokens added (--color-danger: #fb4934, --color-success: #b8bb26). This follows the ror-css-guide convention of "override tokens, not rules" -- zero CSS rule changes, only :root values swapped. Correct approach.

Mermaid theme (mermaid_controller.js): Single-line change from theme: "default" to theme: "dark". Consistent with the dark palette shift. Clean.

Contrast check (WCAG):

--color-text (#ebdbb2) on --color-bg (#282828): ~10.5:1 -- passes AAA
--color-muted (#a89984) on --color-bg (#282828): ~5.2:1 -- passes AA
--color-link (#8ec07c) on --color-bg (#282828): ~7.4:1 -- passes AAA
--color-link (#8ec07c) vs --color-text (#ebdbb2): visually distinguishable

All color pairings pass WCAG AA minimum. Good accessibility.

BLOCKERS

None. This is a pure design token swap with no new functionality, no user input handling, no auth changes, and no secrets. The BLOCKER criteria (missing tests for new functionality, unvalidated input, credentials in code, duplicated auth logic) do not apply.

NITS

--color-accent-light duplicates --color-surface: Both are now #3c3836. The accent-light token semantically implies "a lighter variant of the accent color" -- in gruvbox dark context, consider using #504945 (dark2) or #665c54 (dark3) to maintain semantic distinction. If no rule currently consumes --color-accent-light, this is cosmetic, but it could cause confusion when the token is eventually used. Non-blocking.
New tokens --color-danger / --color-success are additive: These are not consumed anywhere in the current diff. Presumably they will be used by future features. This is fine -- pre-seeding tokens is reasonable -- but note they are currently dead declarations. Non-blocking.

SOP COMPLIANCE

Branch named after issue: Branch is feat/gruvbox-dark-theme -- convention requires {issue-number}-{kebab-case-purpose} (expected: 1-gruvbox-dark-theme or similar). Non-blocking for this repo/PR, but noted.
PR body follows template: Has Summary, Changes, Test Plan, Review Checklist, Related Notes. Well-structured with a gruvbox mapping table.
Related Notes references plan slug: No plan slug exists for this work. Acceptable given scope (single-issue cosmetic change).
Closes #1 present: Yes, in the Related Notes section.
No secrets committed: Clean -- only CSS hex values and a mermaid theme string.
No scope creep: Two files changed, both directly related to the theme swap.
Commit messages: N/A (single-commit PR, title is descriptive).

PROCESS OBSERVATIONS

Change failure risk: Very low. Pure token swap, no logic changes, no new dependencies. Easily reversible.
Test plan: The PR lists manual test steps (render markdown, verify mermaid, check contrast). For a CSS-only change in a CLI tool, manual verification is appropriate -- automated visual regression testing would be overkill here.
Branch naming: The feat/ prefix convention diverges from the {issue-number}-slug standard. For a small repo this is minor, but worth aligning if the project adopts the full SOP set.

VERDICT: APPROVED

## PR #2 Review ### DOMAIN REVIEW **Tech stack**: Rails 8 + Hotwire, CSS custom properties (design tokens), Stimulus controller, mermaid.js. **CSS token swap** (application.css): All 10 existing `:root` tokens replaced with gruvbox dark palette values. Two new tokens added (`--color-danger: #fb4934`, `--color-success: #b8bb26`). This follows the `ror-css-guide` convention of "override tokens, not rules" -- zero CSS rule changes, only `:root` values swapped. Correct approach. **Mermaid theme** (mermaid_controller.js): Single-line change from `theme: "default"` to `theme: "dark"`. Consistent with the dark palette shift. Clean. **Contrast check (WCAG)**: - `--color-text` (#ebdbb2) on `--color-bg` (#282828): ~10.5:1 -- passes AAA - `--color-muted` (#a89984) on `--color-bg` (#282828): ~5.2:1 -- passes AA - `--color-link` (#8ec07c) on `--color-bg` (#282828): ~7.4:1 -- passes AAA - `--color-link` (#8ec07c) vs `--color-text` (#ebdbb2): visually distinguishable All color pairings pass WCAG AA minimum. Good accessibility. ### BLOCKERS None. This is a pure design token swap with no new functionality, no user input handling, no auth changes, and no secrets. The BLOCKER criteria (missing tests for new functionality, unvalidated input, credentials in code, duplicated auth logic) do not apply. ### NITS 1. **`--color-accent-light` duplicates `--color-surface`**: Both are now `#3c3836`. The `accent-light` token semantically implies "a lighter variant of the accent color" -- in gruvbox dark context, consider using `#504945` (dark2) or `#665c54` (dark3) to maintain semantic distinction. If no rule currently consumes `--color-accent-light`, this is cosmetic, but it could cause confusion when the token is eventually used. Non-blocking. 2. **New tokens `--color-danger` / `--color-success` are additive**: These are not consumed anywhere in the current diff. Presumably they will be used by future features. This is fine -- pre-seeding tokens is reasonable -- but note they are currently dead declarations. Non-blocking. ### SOP COMPLIANCE - [ ] **Branch named after issue**: Branch is `feat/gruvbox-dark-theme` -- convention requires `{issue-number}-{kebab-case-purpose}` (expected: `1-gruvbox-dark-theme` or similar). Non-blocking for this repo/PR, but noted. - [x] **PR body follows template**: Has Summary, Changes, Test Plan, Review Checklist, Related Notes. Well-structured with a gruvbox mapping table. - [ ] **Related Notes references plan slug**: No plan slug exists for this work. Acceptable given scope (single-issue cosmetic change). - [x] **`Closes #1` present**: Yes, in the Related Notes section. - [x] **No secrets committed**: Clean -- only CSS hex values and a mermaid theme string. - [x] **No scope creep**: Two files changed, both directly related to the theme swap. - [x] **Commit messages**: N/A (single-commit PR, title is descriptive). ### PROCESS OBSERVATIONS - **Change failure risk**: Very low. Pure token swap, no logic changes, no new dependencies. Easily reversible. - **Test plan**: The PR lists manual test steps (render markdown, verify mermaid, check contrast). For a CSS-only change in a CLI tool, manual verification is appropriate -- automated visual regression testing would be overkill here. - **Branch naming**: The `feat/` prefix convention diverges from the `{issue-number}-slug` standard. For a small repo this is minor, but worth aligning if the project adopts the full SOP set. ### VERDICT: APPROVED