holsee / holsee/cherry

0.6.0 theme catalog: five clinical, five cutting edge

Open
#112 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
CSS
Stars
1
Forks
0
Avg merge
26m
Merged PRs (30d)
62

Description

Ten new official themes for the 0.6.0 cycle, in two lanes. The clinical lane proves the token system: pure CSS over the shared contract templates, every one a showcase for `cherry config tokens.*` overrides. The cutting-edge lane proves a static site generator can ship the ThreeUI/DesignCode class of visual world - shaders, glass, spatial motion - without breaking a single house rule.

Reference point for the second lane: [MengTo/threeui](https://github.com/MengTo/threeui) - WebGL/shader components, gradient meshes, glass materials, spatial depth.

## Non-negotiables (every theme, both lanes)

- Full token manifest, colours as `light-dark()` pairs; `cherry config tokens.NAME` overrides work everywhere - the manifest is the styling API.
- All gates pass: no colour literals outside token definitions, byte-deterministic builds, goldens, `theme.tokens` docs on every token.
- Print-clean CV. The employer one-pager comes out of every theme, however wild the screen rendition.
- `prefers-reduced-motion` honoured: cutting-edge themes freeze to their first frame, never blank.
- Zero third-party requests. Fonts and JS self-hosted in theme assets (the Noto Sans Mono precedent); three.js vendored where used (MIT).
- Progressive enhancement: content renders complete with JS off; islands only decorate.

## Lane one - clinical typography

**1. porcelain** - the one the landing page already teases. Serif body (self-hosted text face), muted sage accent as a light-dark pair, generous whitespace, hairline understatement. The "make it mine" reference theme: the theme a user restyles first.

**2. monograph** - the academic. Dense 68ch measure, sidenotes in the margin at wide viewports (footnotes reflow inline on mobile), small-caps section labels, numbered headings, table-heavy styling. For RFC-style long-form and technical writing.

**3. teletype** - all-mono, everywhere. Prompt-glyph heading markers, status-line footer, box-drawing hairlines, code blocks indistinguishable from prose by design. The devlog theme for CLI-tool authors; Noto Sans Mono carries the whole page.

**4. broadsheet** - print journalism. Display serif masthead, drop caps on posts, dateline metadata row, multi-column blog index at wide viewports (CSS columns, no JS). Light-first with a true-black night edition.

**5. paperback** - the reading theme. Warm ivory ground, ink foreground, justified text with hyphenation, chapter-mark post openers, oldstyle numerals. The closest to a book a blog gets; print rendition nearly free.

## Lane two - cutting edge

**6. prism** - the ThreeUI homage proper. Gradient-mesh hero painted by a ~5 KB hand-written WebGL fragment shader island (canvas, no three.js), glass surface language (backdrop-filter, layered translucency) for cards and nav, accent hue driving the mesh via CSS custom property → shader uniform. Static poster fallback baked at build.

**7. wireframe** - the blueprint world. Isometric SVG line art, CSS 3D card tilt on hover (transform-only, no JS), grid-paper ground, dimension-line hairlines with measurement labels. Technical-drawing aesthetic; zero canvas.

**8. signal** - kinetic typography, zero JavaScript. CSS scroll-driven animations (with static fallback where unsupported): headings that track-tighten into place, animated gradient strokes on links and rules, a progress beam. Proof that the motion lane doesn't require a runtime.

**9. holo** - iridescent foil. Conic-gradient holography on surfaces, a pointer-tracking island (~1 KB: two CSS variables from mousemove) so light sweeps across cards as the cursor moves, dark-first with a silvered light rendition. Touch devices get a slow ambient sweep instead.

**10. orbit** - the full three.js scene. A lazy-loaded hero island (vendored three, ~45 KB gz, loads after content paints) rendering the site's tags/posts as orbiting bodies; click a body, go to the story page. Everything below the hero is static and severe, so the scene carries the whole budget. Static poster fallback, `--orbit-*` tokens feed scene colours.

## Architecture this forces (the real 0.6.0 work)

- **Template packs.** The clinical five stay on byte-identical shared contract templates (the default/cherrybomb rule, extended). The cutting-edge five may own templates, `components.exs`, and theme-local islands - which means the theme contract grows a documented `assets/js` island convention.
- **Distribution.** Ten more built-in themes is real binary weight. Proposal: clinical five built in (CSS-only, cheap); cutting-edge five in a `holsee/cherry-themes` repo installed by a new `cherry theme.install NAME` verb (checksum-verified, same trust model as `cherry upgrade`). Open decision.
- **Gallery.** A `/themes/` page on cherrybomb.dev: screenshot pairs (light/dark) per theme, generated by a screenshot harness in CI so the gallery can never lie.
- **Shader/token bridge.** A tiny convention for islands reading theme tokens (`getComputedStyle` → uniforms) so `cherry config tokens.--color-accent` restyles even the WebGL themes.

## Proposed sequencing

- **0.6.0:** infrastructure (template packs, island convention, gallery page) + one theme per lane to prove each: **porcelain** and **prism**, plus **teletype** (cheap, high demand).
- **0.6.x:** remaining seven, roughly one per point release, each with its gallery entry.

One issue per theme to follow once the lane infrastructure lands; this issue tracks the catalog and the architecture decisions.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the Architecture and Proposed sequencing sections, then inspect the shared contract templates, components.exs, and assets/js convention mentioned in the issue. Review the gallery screenshot harness and token-to-island requirements; done means the open architecture decisions are resolved and the selected 0.6.0 infrastructure and proof themes are defined well enough for separate implementation issues.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, three.js
Domain
frontend, tooling, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.