WORK-228
Setting up your dashboard 0 entities found · 8/33 branches scanned
ID:WORK-228Status:done

One Dark preset module + doc page

Ship Atom's One Dark as an integrated refrakt preset. Phase 1 ships dark only — the "One Light" sibling is deferred to Phase 2 since it's a separate published theme rather than a modes overlay on the same hue family. Important historical: Atom was the first widely-adopted editor with custom theme APIs, and One Dark is the palette that defined the "blue-grey + warm-accent" aesthetic now common across modern editors.

Priority:mediumComplexity:smallMilestone:v0.14.2Source:SPEC-057
main View source

Criteria completion

Criteria completion: 9 of 9 (100%) checked; history from May 20 to May 200%25%50%75%100%May 20May 20

Relationships

Implements 1
Related 4
Branches 2
main current done
claude/spec-057-v0-14-2-implementation doneclaude/spec-057-curated-syntax-presets ready
History 4
  1. cce476b
    • ☑ `packages/lumina/src/presets/one-dark.ts` exports a `ThemeTokensConfig` with chrome accents, `color.code.*`, and `syntax.*` for dark mode only (via `modes.dark`, like Dracula)
    • ☑ Canvas `#282c34`, text `#abb2bf`. Accents: red `#e06c75`, green `#98c379`, yellow `#e5c07b`, blue `#61afef`, purple `#c678dd`, cyan `#56b6c2`
    • ☑ Role mapping follows Atom's One Dark syntax: keyword (Purple), function (Blue), type (Yellow), string (Green), constant (Orange `#d19a66`), comment (Grey `#5c6370`), variable (Light Foreground)
    • ☑ Sets at least three SPEC-056 extended roles distinctly
    • ☑ Each hue in the file references its One Dark variable name
    • ☑ File header includes attribution: "Derived from One Dark by GitHub / Atom contributors, MIT licensed. https://github.com/atom/atom/tree/master/packages/one-dark-syntax"
    • ☑ `packages/lumina/test/one-dark-preset.test.ts` mirrors `nord-preset.test.ts`
    • ☑ `site/content/themes/one-dark.md` follows the Nord doc page structure (dark-only palette; intro notes One Light is deferred to Phase 2)
    • ☑ No regressions in CSS coverage tests; full suite green
    by bjornolofandersson
  2. 9c10763
    Content editedby Claude
    WORK-228: One Dark preset (SPEC-057 phase 1)
  3. 79e0534
    Created (ready)by bjornolofandersson
  4. 2aeb773
    Content editedby Claude
    Plan v0.14.2 milestone: SPEC-057 work breakdown

Acceptance Criteria

  • packages/lumina/src/presets/one-dark.ts exports a ThemeTokensConfig with chrome accents, color.code.*, and syntax.* for dark mode only (via modes.dark, like Dracula)
  • Canvas #282c34, text #abb2bf. Accents: red #e06c75, green #98c379, yellow #e5c07b, blue #61afef, purple #c678dd, cyan #56b6c2
  • Role mapping follows Atom's One Dark syntax: keyword (Purple), function (Blue), type (Yellow), string (Green), constant (Orange #d19a66), comment (Grey #5c6370), variable (Light Foreground)
  • Sets at least three SPEC-056 extended roles distinctly
  • Each hue in the file references its One Dark variable name
  • File header includes attribution: "Derived from One Dark by GitHub / Atom contributors, MIT licensed. https://github.com/atom/atom/tree/master/packages/one-dark-syntax"
  • packages/lumina/test/one-dark-preset.test.ts mirrors nord-preset.test.ts
  • site/content/themes/one-dark.md follows the Nord doc page structure (dark-only palette; intro notes One Light is deferred to Phase 2)
  • No regressions in CSS coverage tests; full suite green

Approach

Atom's one-dark-syntax package publishes its colour variables in styles/colors.less (https://github.com/atom/atom/blob/master/packages/one-dark-syntax/styles/colors.less). Read the variables, translate to refrakt's role vocabulary.

The doc page intro can briefly note One Dark's historical importance — it's one of the most-cloned palettes in the modern editor era, and many palette designs (Tokyo Night, Catppuccin Mocha) borrowed its blue-grey-canvas + warm-accent approach. This is worth saying once in the lineup; readers don't need to hear it on every preset page.

Dependencies

  • WORK-220, WORK-221 — Nord structural references

References

  • SPEC-057 — "One Dark" subsection
  • Atom one-dark-syntax: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
  • Colour variables: https://github.com/atom/atom/blob/master/packages/one-dark-syntax/styles/colors.less

Resolution

Completed: 2026-05-20

Branch: `claude/spec-057-v0-14-2-implementation`

What was done

One Dark shipped as dark-only per SPEC-057. Atom's signature theme — the palette that defined the blue-grey-canvas + warm-accent aesthetic now common in modern editors (Tokyo Night and Catppuccin Mocha both trace lineage here).

SPEC-056 extended-role exercise

4 of 7 extended roles distinct: `type` (Yellow #e5c07b) ≠ `function` (Blue #61afef), `regex` (Cyan) ≠ `string` (Green), `operator` (Cyan) ≠ `punctuation`, `tag` (Red) ≠ `keyword` (Purple). `number` and `attribute` collapse with `constant` (all orange) — Atom's intent.

Test results

  • 9/9 One Dark preset tests pass.
  • Full suite passes; site builds clean.

Files touched

  • `packages/lumina/src/presets/one-dark.ts` (new)
  • `packages/lumina/package.json` (added export)
  • `packages/lumina/test/one-dark-preset.test.ts` (new, 9 tests)
  • `site/content/themes/one-dark.md` (new)
  • `site/content/themes/_layout.md` (One Dark in nav)
  • `refrakt.config.json` (One Dark in tints)