cloudfoundry / cloudfoundry/stratos
stb: generate a library theme from a single seed color (scheme math + dark derivation)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 267
- Forks
- 137
- Avg merge
- 5h 14m
- Merged PRs (30d)
- 77
Description
Summary
Add a generator to the stb theming tool that builds a full paired light/dark theme from one seed brand color, instead of hand-authoring every token. Composes two pieces of well-known OKLCH color math.
How it works
1. Seed → harmonious light palette (pure hue rotation in OKLCH, keep L/C):
- Complementary:
H + 180 - Analogous:
H ± 30 - Triadic:
H ± 120 - Split-complementary:
H + 150,H + 210
Pick a scheme, rotate the seed hue to fill primary + accent/secondary tokens.
2. Light → dark via perceptual lightness inversion: L → 1−L, C × 0.5, small hue shift. (Same derivation as the stb peer-dark-model work.)
Result: one seed color → a complete, coherent light + dark theme, addable to stb's built-in preset library.
Why
- stb presets (
loadBuiltInPreset+ preset menu) are hand-authored today — slow and inconsistent. A generator makes new library themes cheap and coherent by construction. - Lowers the barrier for contributors/operators to brand Stratos: choose a brand color, get a usable theme.
Dependencies / relationships
- Requires OKLCH on the token path — rides #5515 (RGB→OKLCH migration).
- Reuses the light→dark derivation helper from the stb peer-dark-model + dual-field-editor work.
- Enhancement / future work — not blocking current stb facet work.
Related: #5515 (RGB→OKLCH), theming/branding (stb) workstream.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing stb's loadBuiltInPreset and preset menu, then inspect the OKLCH migration in #5515 and the peer-dark-model and dual-field-editor work for the existing light-to-dark derivation. Done means a seed-color generator produces paired light/dark themes and integrates them into stb's built-in preset library.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100