M5: Codex design system (dark theme) + kitchen-sink
Programmatic Theme builder + reusable popover and stepper widgets, ported from CharacterCreator.zip's :root design tokens. Kitchen-sink scene exercises every primitive for visual eyeballing. CodexPalette.cs: Color tokens lifted verbatim from the React prototype's `:root` block (--bg, --ink, --gild, --seal, etc.). Variable names mirror the CSS so the audit trail stays readable. Spacing locked at the prototype's normal density (--gap=24, --pad=28, --radius=2). Scope cut: only the Dark theme ships. The React prototype designed Parchment, Dark, and Blood as switchable variations — user direction during M5 is that only Dark (leather + candlelight) is wanted for this game. Parchment/Blood code dropped, plan doc updated to match (§1 goal #5, §4.5 UI map, §5 M5 scope, §10 resolved decisions #4). No runtime theme switcher. CodexTheme.Build(): Programmatically constructs a Godot Theme from CodexPalette.Dark plus CodexSpacing/CodexType tokens. Configures Panel, Card, CodexPopover styleboxes; Label variations for H1..H4, CodexTitle, Eyebrow, Meta, ValidationOk/Error, CardName/Body/Meta, StepperNum/ Name; Button + PrimaryButton + GhostButton variants; LineEdit, CheckBox, scrollbar styling. Fonts: looks for CormorantGaramond / CrimsonPro / JetBrainsMono TTFs in res://Fonts/ (or Content/Fonts/) and graceful-falls-back to Godot defaults if missing. M5 ships with no fonts in repo; user can drop them in later for typography parity with the React prototype. CodexPopover.cs: Hoverable text trigger + floating PanelContainer, mirrors src/trait-hint.jsx. Viewport-clamps horizontally and vertically; flips above the trigger if there's no room below; 80 ms grace period when moving cursor from trigger to popover. Detriment variant uses the seal-coloured stylebox. Future TraitName / SkillChip / BonusPill widgets layer className differences on top. CodexStepper.cs: Roman-numeral horizontal stepper with Pending / Active / Complete / Locked states. Active step gets a 2-px gild underline, Complete shows a ✓ in seal-red, Locked shows ✕ + 0.45 modulate. Emits StepClicked(int) for non-locked rows. M5 is decorative — M6 wires the signal to the character-creation state machine. KitchenSink.cs + Main.cs --codex-test: Verification scene rendering every primitive (header, stepper, buttons, inputs, cards, trait popovers). Clicks log to console. Fonts default to Godot's Noto Sans until res://Fonts/ is populated. Closes M5 of theriapolis-rpg-implementation-plan-godot-port.md. Next: M6 (title + character creation). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Christopher Wiebe
@@ -0,0 +1,311 @@
|
||||
using Godot;
|
||||
using System.IO;
|
||||
using Theriapolis.GodotHost.Platform;
|
||||
|
||||
namespace Theriapolis.GodotHost.UI;
|
||||
|
||||
/// <summary>
|
||||
/// Programmatic Theme builder for the codex design system. Builds a Godot
|
||||
/// <see cref="Theme"/> from a <see cref="CodexPalette"/> and the shared
|
||||
/// CodexSpacing / CodexType tokens; the result is applied to a root
|
||||
/// Control to cascade through all descendants.
|
||||
///
|
||||
/// Fonts: looks for FontFile assets under <c>res://Fonts/</c> and falls
|
||||
/// back to Godot's default sans if missing. Drop these in to fully match
|
||||
/// the React prototype's typography:
|
||||
/// res://Fonts/CormorantGaramond-Regular.ttf (serif-display)
|
||||
/// res://Fonts/CormorantGaramond-Italic.ttf
|
||||
/// res://Fonts/CrimsonPro-Regular.ttf (serif-body)
|
||||
/// res://Fonts/JetBrainsMono-Regular.ttf (mono)
|
||||
///
|
||||
/// Theme variations (.tres) aren't authored in the editor — the entire
|
||||
/// theme tree is constructed in code so palette changes are atomic and
|
||||
/// reviewable as code diffs.
|
||||
/// </summary>
|
||||
public static class CodexTheme
|
||||
{
|
||||
private static FontFile? _serifDisplay;
|
||||
private static FontFile? _serifDisplayItalic;
|
||||
private static FontFile? _serifBody;
|
||||
private static FontFile? _mono;
|
||||
private static bool _fontsLoaded;
|
||||
|
||||
public static Theme Build()
|
||||
{
|
||||
EnsureFonts();
|
||||
var palette = CodexPalette.Dark;
|
||||
var theme = new Theme();
|
||||
|
||||
// Defaults applied to every Control unless overridden.
|
||||
if (_serifBody is not null) theme.DefaultFont = _serifBody;
|
||||
theme.DefaultFontSize = CodexType.BodySize;
|
||||
|
||||
ApplyPanel(theme, palette);
|
||||
ApplyLabel(theme, palette);
|
||||
ApplyButton(theme, palette);
|
||||
ApplyLineEdit(theme, palette);
|
||||
ApplyCheckBox(theme, palette);
|
||||
ApplyScrollContainer(theme, palette);
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
private static void ApplyPanel(Theme theme, CodexPalette p)
|
||||
{
|
||||
// Default Panel (used as background frame). Mirrors .app-frame's
|
||||
// border + bg-with-overlay treatment, simplified to a single
|
||||
// StyleBoxFlat with border.
|
||||
var box = new StyleBoxFlat
|
||||
{
|
||||
BgColor = p.Bg,
|
||||
BorderColor = p.Rule,
|
||||
CornerRadiusTopLeft = CodexSpacing.Radius,
|
||||
CornerRadiusTopRight = CodexSpacing.Radius,
|
||||
CornerRadiusBottomLeft = CodexSpacing.Radius,
|
||||
CornerRadiusBottomRight = CodexSpacing.Radius,
|
||||
};
|
||||
box.SetBorderWidthAll(1);
|
||||
theme.SetStylebox("panel", "Panel", box);
|
||||
|
||||
// Card variant — slightly raised against the page background.
|
||||
// Used by character-creation grid cards (Calling, History, etc.).
|
||||
var card = new StyleBoxFlat
|
||||
{
|
||||
BgColor = p.Bg2,
|
||||
BorderColor = p.Rule,
|
||||
CornerRadiusTopLeft = CodexSpacing.Radius,
|
||||
CornerRadiusTopRight = CodexSpacing.Radius,
|
||||
CornerRadiusBottomLeft = CodexSpacing.Radius,
|
||||
CornerRadiusBottomRight = CodexSpacing.Radius,
|
||||
ContentMarginLeft = 18,
|
||||
ContentMarginRight = 18,
|
||||
ContentMarginTop = 18,
|
||||
ContentMarginBottom = 16,
|
||||
};
|
||||
card.SetBorderWidthAll(1);
|
||||
theme.SetStylebox("panel", "Card", card);
|
||||
|
||||
var cardSelected = (StyleBoxFlat)card.Duplicate();
|
||||
cardSelected.BorderColor = p.Seal;
|
||||
cardSelected.SetBorderWidthAll(1);
|
||||
cardSelected.ShadowColor = WithAlpha(p.Seal, 0.6f);
|
||||
cardSelected.ShadowSize = 14;
|
||||
cardSelected.ShadowOffset = new Vector2(0, 14);
|
||||
theme.SetStylebox("panel_selected", "Card", cardSelected);
|
||||
|
||||
// Popover frame — gild border + soft shadow. Matches .trait-hint.
|
||||
var popover = new StyleBoxFlat
|
||||
{
|
||||
BgColor = p.Bg2,
|
||||
BorderColor = p.Gild,
|
||||
ContentMarginLeft = 16,
|
||||
ContentMarginRight = 16,
|
||||
ContentMarginTop = 14,
|
||||
ContentMarginBottom = 12,
|
||||
ShadowColor = new Color(0, 0, 0, 0.45f),
|
||||
ShadowSize = 18,
|
||||
ShadowOffset = new Vector2(0, 12),
|
||||
};
|
||||
popover.SetBorderWidthAll(1);
|
||||
theme.SetStylebox("panel", "CodexPopover", popover);
|
||||
|
||||
var popoverDetriment = (StyleBoxFlat)popover.Duplicate();
|
||||
popoverDetriment.BorderColor = p.Seal;
|
||||
theme.SetStylebox("panel_detriment", "CodexPopover", popoverDetriment);
|
||||
}
|
||||
|
||||
private static void ApplyLabel(Theme theme, CodexPalette p)
|
||||
{
|
||||
// Default Label — body type, soft ink.
|
||||
theme.SetColor("font_color", "Label", p.Ink);
|
||||
theme.SetFontSize("font_size", "Label", CodexType.BodySize);
|
||||
if (_serifBody is not null) theme.SetFont("font", "Label", _serifBody);
|
||||
|
||||
// h1..h4 variations applied via SetTypeVariation in code (Godot 4
|
||||
// type variations work by setting a control's ThemeTypeVariation).
|
||||
AddLabelVariation(theme, "H1", p.Ink, CodexType.H1Size, _serifDisplay);
|
||||
AddLabelVariation(theme, "H2", p.Ink, CodexType.H2Size, _serifDisplay);
|
||||
AddLabelVariation(theme, "H3", p.Ink, CodexType.H3Size, _serifDisplay);
|
||||
AddLabelVariation(theme, "H4", p.InkMute, CodexType.H4Size, _serifDisplay);
|
||||
|
||||
// .codex-title — uppercased, wide tracking.
|
||||
AddLabelVariation(theme, "CodexTitle", p.Ink, CodexType.CodexTitleSize, _serifDisplay);
|
||||
|
||||
// .codex-sub / .eyebrow / .meta — mono micro-text in muted ink.
|
||||
AddLabelVariation(theme, "Eyebrow", p.InkMute, CodexType.MonoEyebrowSize, _mono);
|
||||
|
||||
// .nav-progress — same mono micro-text style.
|
||||
AddLabelVariation(theme, "Meta", p.InkMute, CodexType.MonoSmallSize, _mono);
|
||||
|
||||
// .validation — italicised seal-red when error, mono-mute when ok.
|
||||
AddLabelVariation(theme, "ValidationError", p.Seal, CodexType.BodySize, _serifDisplay);
|
||||
AddLabelVariation(theme, "ValidationOk", p.InkMute, CodexType.MonoEyebrowSize, _mono);
|
||||
|
||||
// Card name + body
|
||||
AddLabelVariation(theme, "CardName", p.Ink, CodexType.CardNameSize, _serifDisplay);
|
||||
AddLabelVariation(theme, "CardBody", p.InkSoft, CodexType.CardBodySize, _serifBody);
|
||||
AddLabelVariation(theme, "CardMeta", p.InkMute, CodexType.MonoSmallSize, _mono);
|
||||
|
||||
// Stepper labels
|
||||
AddLabelVariation(theme, "StepperNum", p.InkMute, CodexType.StepperNumSize, _serifDisplay);
|
||||
AddLabelVariation(theme, "StepperName", p.InkMute, CodexType.StepperNameSize, _mono);
|
||||
}
|
||||
|
||||
private static void AddLabelVariation(Theme theme, string variation, Color color, int size, FontFile? font)
|
||||
{
|
||||
theme.SetTypeVariation(variation, "Label");
|
||||
theme.SetColor("font_color", variation, color);
|
||||
theme.SetFontSize("font_size", variation, size);
|
||||
if (font is not null) theme.SetFont("font", variation, font);
|
||||
}
|
||||
|
||||
private static void ApplyButton(Theme theme, CodexPalette p)
|
||||
{
|
||||
if (_serifDisplay is not null) theme.SetFont("font", "Button", _serifDisplay);
|
||||
theme.SetFontSize("font_size", "Button", CodexType.BtnSize);
|
||||
theme.SetColor("font_color", "Button", p.Ink);
|
||||
theme.SetColor("font_hover_color", "Button", p.Bg);
|
||||
theme.SetColor("font_pressed_color", "Button", p.Bg);
|
||||
theme.SetColor("font_disabled_color","Button", WithAlpha(p.Ink, 0.4f));
|
||||
|
||||
var normal = MakeButtonBox(p.Bg, p.Ink);
|
||||
var hover = MakeButtonBox(p.Ink, p.Ink);
|
||||
var pressed = MakeButtonBox(p.InkSoft, p.Ink);
|
||||
var disabled = MakeButtonBox(p.Bg, WithAlpha(p.Ink, 0.4f));
|
||||
theme.SetStylebox("normal", "Button", normal);
|
||||
theme.SetStylebox("hover", "Button", hover);
|
||||
theme.SetStylebox("pressed", "Button", pressed);
|
||||
theme.SetStylebox("disabled", "Button", disabled);
|
||||
|
||||
// Primary variant — seal-red fill.
|
||||
theme.SetTypeVariation("PrimaryButton", "Button");
|
||||
theme.SetColor("font_color", "PrimaryButton", p.Bg);
|
||||
theme.SetColor("font_hover_color", "PrimaryButton", p.Bg);
|
||||
theme.SetStylebox("normal", "PrimaryButton", MakeButtonBox(p.Seal, p.Seal));
|
||||
theme.SetStylebox("hover", "PrimaryButton", MakeButtonBox(p.Seal2, p.Seal2));
|
||||
theme.SetStylebox("pressed", "PrimaryButton", MakeButtonBox(p.Seal2, p.Seal2));
|
||||
|
||||
// Ghost variant — transparent background, rule-coloured border.
|
||||
theme.SetTypeVariation("GhostButton", "Button");
|
||||
theme.SetColor("font_color", "GhostButton", p.InkSoft);
|
||||
theme.SetColor("font_hover_color", "GhostButton", p.Ink);
|
||||
theme.SetStylebox("normal", "GhostButton", MakeButtonBox(new Color(0, 0, 0, 0), p.Rule));
|
||||
theme.SetStylebox("hover", "GhostButton", MakeButtonBox(WithAlpha(p.Ink, 0.06f), p.Rule));
|
||||
theme.SetStylebox("pressed", "GhostButton", MakeButtonBox(WithAlpha(p.Ink, 0.12f), p.Rule));
|
||||
}
|
||||
|
||||
private static StyleBoxFlat MakeButtonBox(Color bg, Color border)
|
||||
{
|
||||
var box = new StyleBoxFlat
|
||||
{
|
||||
BgColor = bg,
|
||||
BorderColor = border,
|
||||
CornerRadiusTopLeft = CodexSpacing.Radius,
|
||||
CornerRadiusTopRight = CodexSpacing.Radius,
|
||||
CornerRadiusBottomLeft = CodexSpacing.Radius,
|
||||
CornerRadiusBottomRight = CodexSpacing.Radius,
|
||||
ContentMarginLeft = 22,
|
||||
ContentMarginRight = 22,
|
||||
ContentMarginTop = 10,
|
||||
ContentMarginBottom = 10,
|
||||
};
|
||||
box.SetBorderWidthAll(1);
|
||||
return box;
|
||||
}
|
||||
|
||||
private static void ApplyLineEdit(Theme theme, CodexPalette p)
|
||||
{
|
||||
if (_serifBody is not null) theme.SetFont("font", "LineEdit", _serifBody);
|
||||
theme.SetFontSize("font_size", "LineEdit", CodexType.BodySize);
|
||||
theme.SetColor("font_color", "LineEdit", p.Ink);
|
||||
theme.SetColor("caret_color", "LineEdit", p.Seal);
|
||||
theme.SetColor("selection_color", "LineEdit", WithAlpha(p.Gild, 0.5f));
|
||||
|
||||
var normal = new StyleBoxFlat
|
||||
{
|
||||
BgColor = p.Bg,
|
||||
BorderColor = p.Rule,
|
||||
ContentMarginLeft = 12,
|
||||
ContentMarginRight = 12,
|
||||
ContentMarginTop = 8,
|
||||
ContentMarginBottom = 8,
|
||||
};
|
||||
normal.SetBorderWidthAll(1);
|
||||
theme.SetStylebox("normal", "LineEdit", normal);
|
||||
|
||||
var focus = (StyleBoxFlat)normal.Duplicate();
|
||||
focus.BorderColor = p.Gild;
|
||||
focus.SetBorderWidthAll(1);
|
||||
theme.SetStylebox("focus", "LineEdit", focus);
|
||||
}
|
||||
|
||||
private static void ApplyCheckBox(Theme theme, CodexPalette p)
|
||||
{
|
||||
if (_serifBody is not null) theme.SetFont("font", "CheckBox", _serifBody);
|
||||
theme.SetFontSize("font_size", "CheckBox", CodexType.BodySize);
|
||||
theme.SetColor("font_color", "CheckBox", p.Ink);
|
||||
}
|
||||
|
||||
private static void ApplyScrollContainer(Theme theme, CodexPalette p)
|
||||
{
|
||||
// Scroll bar pieces — keep subtle so they don't dominate the codex feel.
|
||||
var bg = new StyleBoxFlat { BgColor = WithAlpha(p.Rule, 0.15f) };
|
||||
var grabber = new StyleBoxFlat
|
||||
{
|
||||
BgColor = WithAlpha(p.InkMute, 0.7f),
|
||||
CornerRadiusTopLeft = CodexSpacing.Radius,
|
||||
CornerRadiusTopRight = CodexSpacing.Radius,
|
||||
CornerRadiusBottomLeft = CodexSpacing.Radius,
|
||||
CornerRadiusBottomRight = CodexSpacing.Radius,
|
||||
};
|
||||
theme.SetStylebox("scroll", "VScrollBar", bg);
|
||||
theme.SetStylebox("grabber", "VScrollBar", grabber);
|
||||
theme.SetStylebox("grabber_highlight", "VScrollBar",
|
||||
(StyleBoxFlat)grabber.Duplicate(true));
|
||||
theme.SetStylebox("scroll", "HScrollBar", bg);
|
||||
theme.SetStylebox("grabber", "HScrollBar", grabber);
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
private static void EnsureFonts()
|
||||
{
|
||||
if (_fontsLoaded) return;
|
||||
_fontsLoaded = true;
|
||||
|
||||
_serifDisplay = LoadFontFromFonts("CormorantGaramond-Regular.ttf");
|
||||
_serifDisplayItalic = LoadFontFromFonts("CormorantGaramond-Italic.ttf");
|
||||
_serifBody = LoadFontFromFonts("CrimsonPro-Regular.ttf");
|
||||
_mono = LoadFontFromFonts("JetBrainsMono-Regular.ttf");
|
||||
|
||||
if (_serifDisplay is null && _serifBody is null && _mono is null)
|
||||
{
|
||||
GD.Print("[codex-theme] No fonts in res://Fonts/. Using Godot defaults. " +
|
||||
"Drop CormorantGaramond, CrimsonPro, JetBrainsMono TTFs into " +
|
||||
"res://Fonts/ for full design parity.");
|
||||
}
|
||||
}
|
||||
|
||||
private static FontFile? LoadFontFromFonts(string filename)
|
||||
{
|
||||
// Try res://Fonts/ first (Godot-managed).
|
||||
string resPath = $"res://Fonts/{filename}";
|
||||
if (ResourceLoader.Exists(resPath))
|
||||
return ResourceLoader.Load<FontFile>(resPath);
|
||||
|
||||
// Fall back to Content/Fonts/ via filesystem load (sibling of Gfx,
|
||||
// mirrors how MonoGame's CodexFonts loader walks).
|
||||
string fsPath = Path.Combine(ContentPaths.ContentRoot, "Fonts", filename);
|
||||
if (File.Exists(fsPath))
|
||||
{
|
||||
var font = new FontFile();
|
||||
font.LoadDynamicFont(fsPath);
|
||||
return font;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
public static Color WithAlpha(Color c, float a) => new(c.R, c.G, c.B, a);
|
||||
}
|
||||
Reference in New Issue
Block a user