diff options
| -rw-r--r-- | README.md | 39 | ||||
| -rw-r--r-- | css/starsector-dark.controls.css | 130 | ||||
| -rw-r--r-- | tokens/starsector-dark.controls.tokens.json | 40 |
3 files changed, 209 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..306dfa0 --- /dev/null +++ b/README.md @@ -0,0 +1,39 @@ +# swarm.moe design-language + +Conservative Starsector-derived baseline for shared UI language. + +## Scope (v0.1) + +- frame geometry and material vocabulary +- frame palette (background, edges, glow, zero roundedness) +- typography families (`Remnant UI`, `Remnant Mono`) +- control skin primitives (range slider, checkbox, scrollbar) +- lightweight layout helpers for control rows (`.range-field`, `.range-value`, `.check-control`) + +## Explicitly Out Of Scope (v0.1) + +- product-specific spacing and layout systems +- semantic status channels (success/warn/error) +- app-specific color-picking UIs and interaction models + +## Artifacts + +- `tokens/starsector-dark.frame-font.tokens.json` +- `tokens/starsector-dark.controls.tokens.json` +- `css/starsector-dark.frame-font.css` +- `css/starsector-dark.controls.css` +- `examples/frame-font-preview.html` +- `assets/fonts/*.woff2` + +## Consumption + +1. Copy or import `css/starsector-dark.frame-font.css`. +2. Optionally add `css/starsector-dark.controls.css` for control theming. +3. Apply `.swarm-frame`, `.swarm-surface`, `.swarm-surface-elevated`, `.swarm-frame-header` where needed. +4. Use `--swarm-font-ui` and `--swarm-font-mono` or helper classes. +5. For control rows, use `.range-field`, `.range-value`, and `.check-control`. + +## Notes + +Token values are derived from the Starsector dark baseline in `/home/main/swarm-ui`. +Control styling values are tuned to stay palette-compatible with that baseline. diff --git a/css/starsector-dark.controls.css b/css/starsector-dark.controls.css new file mode 100644 index 0000000..5aaa03a --- /dev/null +++ b/css/starsector-dark.controls.css @@ -0,0 +1,130 @@ +/* + Starsector dark control primitives. + Intended to be used with starsector-dark.frame-font.css. +*/ + +:root { + --swarm-control-bg: rgba(4, 12, 18, 0.82); + --swarm-control-border: rgba(68, 152, 176, 0.36); + --swarm-control-thumb: #9fd7ea; + --swarm-control-thumb-edge: #0b1a25; + --swarm-control-check-bg: linear-gradient(180deg, rgba(6, 20, 28, 0.95), rgba(2, 9, 14, 0.9)); + --swarm-control-check-bg-checked: linear-gradient(180deg, rgba(11, 42, 56, 0.95), rgba(4, 18, 28, 0.9)); + --swarm-control-scroll-track: rgba(3, 10, 15, 0.75); + --swarm-control-scroll-thumb: linear-gradient(180deg, rgba(68, 152, 176, 0.9), rgba(22, 82, 106, 0.95)); + --swarm-control-text-muted: #9fb4ca; +} + +* { + scrollbar-width: thin; + scrollbar-color: var(--swarm-frame-edge-strong, rgba(68, 152, 176, 0.86)) var(--swarm-control-scroll-track); +} + +*::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +*::-webkit-scrollbar-track { + background: var(--swarm-control-scroll-track); +} + +*::-webkit-scrollbar-thumb { + background: var(--swarm-control-scroll-thumb); + border: 1px solid rgba(0, 0, 0, 0.65); +} + +input[type="range"] { + width: 100%; + appearance: none; + height: 0.56rem; + border: 1px solid var(--swarm-control-border); + background: linear-gradient(180deg, rgba(6, 26, 38, 0.95), rgba(2, 10, 16, 0.9)); + padding: 0; + cursor: ew-resize; + touch-action: none; +} + +input[type="range"]::-webkit-slider-thumb { + appearance: none; + width: 0.58rem; + height: 0.95rem; + background: var(--swarm-control-thumb); + border: 1px solid var(--swarm-control-thumb-edge); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset; + cursor: ew-resize; +} + +input[type="range"]::-moz-range-thumb { + width: 0.58rem; + height: 0.95rem; + background: var(--swarm-control-thumb); + border: 1px solid var(--swarm-control-thumb-edge); + border-radius: 0; + cursor: ew-resize; +} + +input[type="range"]::-moz-range-track { + height: 0.56rem; + border: 1px solid var(--swarm-control-border); + border-radius: 0; + background: linear-gradient(180deg, rgba(6, 26, 38, 0.95), rgba(2, 10, 16, 0.9)); +} + +input[type="checkbox"] { + appearance: none; + width: 1.03rem; + height: 1.03rem; + margin: 0; + border: 1px solid var(--swarm-control-border); + background: var(--swarm-control-check-bg); + display: grid; + place-content: center; +} + +input[type="checkbox"]::before { + content: ""; + width: 0.58rem; + height: 0.58rem; + transform: scale(0); + clip-path: polygon(14% 53%, 28% 67%, 74% 21%, 84% 31%, 28% 87%, 4% 63%); + background: var(--swarm-control-thumb); + transition: transform 120ms ease-out; +} + +input[type="checkbox"]:checked { + border-color: var(--swarm-frame-edge-strong, rgba(68, 152, 176, 0.86)); + background: var(--swarm-control-check-bg-checked); +} + +input[type="checkbox"]:checked::before { + transform: scale(1); +} + +.range-field { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 0.45rem; +} + +.range-value { + min-width: 3.2rem; + text-align: right; + color: var(--swarm-control-text-muted); + font-size: 0.72rem; + user-select: none; + pointer-events: none; +} + +.check-control { + display: inline-flex; + align-items: center; + justify-content: flex-start; + gap: 0.5rem; + white-space: nowrap; +} + +.check-control span { + line-height: 1.2; +} diff --git a/tokens/starsector-dark.controls.tokens.json b/tokens/starsector-dark.controls.tokens.json new file mode 100644 index 0000000..ce1f60f --- /dev/null +++ b/tokens/starsector-dark.controls.tokens.json @@ -0,0 +1,40 @@ +{ + "meta": { + "name": "Starsector Dark Control Primitives", + "source": "Extracted from hyperkiki control skin", + "scope": [ + "range slider", + "checkbox", + "scrollbar", + "control helper classes" + ] + }, + "control": { + "palette": { + "bg": "rgba(4,12,18,0.82)", + "border": "rgba(68,152,176,0.36)", + "thumb": "#9fd7ea", + "thumb_edge": "#0b1a25", + "text_muted": "#9fb4ca" + }, + "checkbox": { + "size": "1.03rem", + "bg": "linear-gradient(180deg, rgba(6,20,28,0.95), rgba(2,9,14,0.9))", + "bg_checked": "linear-gradient(180deg, rgba(11,42,56,0.95), rgba(4,18,28,0.9))" + }, + "range": { + "track_height": "0.56rem", + "thumb_width": "0.58rem", + "thumb_height": "0.95rem" + }, + "scrollbar": { + "size": "10px", + "track": "rgba(3,10,15,0.75)", + "thumb": "linear-gradient(180deg, rgba(68,152,176,0.9), rgba(22,82,106,0.95))" + }, + "helpers": { + "range_field_gap": "0.45rem", + "check_control_gap": "0.5rem" + } + } +} |