Apply gruvbox dark theme to design tokens #1

New issue

Closed

opened 2026-05-19 02:22:40 +00:00 by ldraney · 0 comments

ldraney commented

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

Owner

Type

Feature

Lineage

Project: mdview
Plan: n/a (standalone cosmetic pass)
Phase: n/a

Repo

ldraney/mdview

User Story

As a user, I want the markdown viewer to render in gruvbox dark so it matches my terminal/editor aesthetic.

Context

The initial scaffold shipped with a light-mode token set copied from ror-css-guide defaults. This is a personal CLI tool -- dark theme should be the baseline.

Description

Replace all :root color tokens with gruvbox dark palette values. Switch mermaid.js to dark theme. No CSS rule changes -- token swap only per ror-css-guide principle: "Projects override tokens, not rules."

File Targets

app/assets/stylesheets/application.css -- :root block
app/javascript/controllers/mermaid_controller.js -- theme param

Acceptance Criteria

All :root color tokens map to gruvbox dark palette
Mermaid diagrams use dark theme
No CSS rules changed -- token swap only
Zero hardcoded hex outside :root

Test Expectations

Render a markdown file with headings, code blocks, tables, blockquotes
Mermaid diagrams render with dark background
All text has sufficient contrast against dark bg

Constraints

Zero hardcoded hex outside :root
No CSS rule changes

Checklist

Token swap in application.css
Mermaid dark theme
Visual check

First feature issue on this repo.

### Type Feature ### Lineage - Project: mdview - Plan: n/a (standalone cosmetic pass) - Phase: n/a ### Repo ldraney/mdview ### User Story As a user, I want the markdown viewer to render in gruvbox dark so it matches my terminal/editor aesthetic. ### Context The initial scaffold shipped with a light-mode token set copied from ror-css-guide defaults. This is a personal CLI tool -- dark theme should be the baseline. ### Description Replace all `:root` color tokens with gruvbox dark palette values. Switch mermaid.js to dark theme. No CSS rule changes -- token swap only per ror-css-guide principle: "Projects override tokens, not rules." ### File Targets - `app/assets/stylesheets/application.css` -- `:root` block - `app/javascript/controllers/mermaid_controller.js` -- theme param ### Acceptance Criteria - All `:root` color tokens map to gruvbox dark palette - Mermaid diagrams use dark theme - No CSS rules changed -- token swap only - Zero hardcoded hex outside `:root` ### Test Expectations - Render a markdown file with headings, code blocks, tables, blockquotes - Mermaid diagrams render with dark background - All text has sufficient contrast against dark bg ### Constraints - Zero hardcoded hex outside `:root` - No CSS rule changes ### Checklist - [ ] Token swap in application.css - [ ] Mermaid dark theme - [ ] Visual check ### Related First feature issue on this repo.