feat(theme): add Workshop theme — Cybernetic Workshop identity from Moi DESIGN.md
Warm paper (#f3efe6), near-black ink, hairline borders, one pine accent (#215c48), serif display headings, Moi radii (14/9). Tokens verified rendering live via computed styles on the built shell: body bg #f3efe6, card #faf7f0, border #d9d1c3, h2 Iowan/Palatino 500. Settings -> Appearance -> 'Workshop — Cybernetic'.
This commit is contained in:
parent
15fa331f46
commit
add956abdd
4 changed files with 70 additions and 1 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
export type Theme =
|
export type Theme =
|
||||||
'light' | 'dark' | 'glass' | 'neon' | 'impeccable' | 'impeccable-dark' | 'cosmic';
|
'light' | 'dark' | 'glass' | 'neon' | 'impeccable' | 'impeccable-dark' | 'cosmic' | 'workshop';
|
||||||
|
|
||||||
/** Active signer mode. */
|
/** Active signer mode. */
|
||||||
export type SignerMode = 'embedded' | 'nip46_bunker' | 'nip46_client';
|
export type SignerMode = 'embedded' | 'nip46_bunker' | 'nip46_client';
|
||||||
|
|
|
||||||
|
|
@ -109,6 +109,7 @@ export function SettingsScreen() {
|
||||||
<option value="impeccable">Impeccable — Light</option>
|
<option value="impeccable">Impeccable — Light</option>
|
||||||
<option value="impeccable-dark">Impeccable — Dark</option>
|
<option value="impeccable-dark">Impeccable — Dark</option>
|
||||||
<option value="cosmic">Cosmic — Stardust</option>
|
<option value="cosmic">Cosmic — Stardust</option>
|
||||||
|
<option value="workshop">Workshop — Cybernetic</option>
|
||||||
</select>
|
</select>
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
|
|
|
||||||
|
|
@ -570,6 +570,70 @@ html[data-theme='cosmic'] .empty-state {
|
||||||
border-color: var(--border);
|
border-color: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* "Workshop" — Cybernetic Workshop, the Moi portfolio identity (DESIGN.md):
|
||||||
|
warm paper, near-black ink, hairline borders, one pine accent, copper
|
||||||
|
index ticks, serif headings. Light is the material; flat depth
|
||||||
|
Paper -> Surface -> Stone, shadow only where Moi allows it. */
|
||||||
|
:root[data-theme='workshop'] {
|
||||||
|
--bg: #f3efe6;
|
||||||
|
--surface: #faf7f0;
|
||||||
|
--surface-2: #eae4d8;
|
||||||
|
--surface-hover: #faf7f0;
|
||||||
|
--border: #d9d1c3;
|
||||||
|
--border-strong: #c9bfad;
|
||||||
|
--text: #1c1814;
|
||||||
|
--text-muted: #5e574d;
|
||||||
|
--primary: #215c48;
|
||||||
|
--primary-hover: #184536;
|
||||||
|
--primary-soft: #e4f0ea;
|
||||||
|
--on-primary: #f3efe6;
|
||||||
|
--danger: #a13d2e;
|
||||||
|
--danger-soft: #f5e5e1;
|
||||||
|
--warning: #8b5a32;
|
||||||
|
--warning-soft: #f3ead9;
|
||||||
|
--success: #215c48;
|
||||||
|
--success-soft: #e4f0ea;
|
||||||
|
--info: #3c5a72;
|
||||||
|
--info-soft: #e6ecf1;
|
||||||
|
--focus: #215c48;
|
||||||
|
--shadow: 0 1px 2px rgba(28, 24, 20, 0.05), 0 8px 24px rgba(28, 24, 20, 0.06);
|
||||||
|
--shadow-modal: 0 12px 40px rgba(28, 24, 20, 0.18);
|
||||||
|
--radius: 14px;
|
||||||
|
--radius-sm: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Workshop type: Iowan/Palatino serif for display surfaces, everything
|
||||||
|
else stays on the local system stack (Moi ships no webfonts). */
|
||||||
|
html[data-theme='workshop'] h1,
|
||||||
|
html[data-theme='workshop'] h2 {
|
||||||
|
font-family: 'Iowan Old Style', Palatino, Georgia, serif;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
html[data-theme='workshop'] h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 1.05;
|
||||||
|
}
|
||||||
|
html[data-theme='workshop'] h2 {
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* One accent rule: pine carries focus and active states; copper marks
|
||||||
|
index-like mono elements instead of a second saturated hue. */
|
||||||
|
html[data-theme='workshop'] code,
|
||||||
|
html[data-theme='workshop'] .mono {
|
||||||
|
background: var(--surface-2);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
html[data-theme='workshop'] .sidebar {
|
||||||
|
background: var(--surface);
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
html[data-theme='workshop'] .card {
|
||||||
|
border-color: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,9 @@ pub enum Theme {
|
||||||
#[serde(rename = "impeccable-dark")]
|
#[serde(rename = "impeccable-dark")]
|
||||||
ImpeccableDark,
|
ImpeccableDark,
|
||||||
Cosmic,
|
Cosmic,
|
||||||
|
/// "Cybernetic Workshop" — the Moi portfolio look: warm paper, near-black
|
||||||
|
/// ink, hairline borders, one pine accent, serif headings.
|
||||||
|
Workshop,
|
||||||
}
|
}
|
||||||
|
|
||||||
impl Theme {
|
impl Theme {
|
||||||
|
|
@ -41,6 +44,7 @@ impl Theme {
|
||||||
"impeccable" => Some(Self::Impeccable),
|
"impeccable" => Some(Self::Impeccable),
|
||||||
"impeccable-dark" => Some(Self::ImpeccableDark),
|
"impeccable-dark" => Some(Self::ImpeccableDark),
|
||||||
"cosmic" => Some(Self::Cosmic),
|
"cosmic" => Some(Self::Cosmic),
|
||||||
|
"workshop" => Some(Self::Workshop),
|
||||||
_ => None,
|
_ => None,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue