Howlwind/TheriapolisV3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

M6.7: Parchment theme pass

Browse Source 
Lights up the M5 codex design system across the wizard. Default
palette swaps from dark leather to aged-parchment cream with
sealing-wax red selection emphasis, matching the React prototype's
default theme variant. CodexTheme.Build() is applied at the wizard
root so every step + Aside + popover cascades through it.

Theme additions:
- Parchment palette in CodexPalette (Dark retained as alt)
- Type variations registered for Card, CodexPopover, Pill,
  PillDetriment, AbilityToken, AbilitySlot, SkillRow — without
  SetTypeVariation, panel-stylebox lookup falls through to Godot's
  default dark slate, which is what was happening to every bare
  PanelContainer before this pass.
- panel_hover stylebox on Card (gild border) wired via CodexCard's
  MouseEntered/Exited helper; panel_selected bumped to 3px seal-red
  border + soft shadow so selection reads at a glance.

Card selection refactor:
- Replaced the warm-cream Modulate hint on cards with stylebox swaps
  via the new CodexCard.SetSelected helper. The Modulate approach
  was a no-op on cream-on-cream parchment; the stylebox swap looks
  the same on either palette.
- Step intros + Aside section headers now use the existing Eyebrow /
  H2 / H3 / CardName / CardMeta / CardBody label variations.
- Confirm button on Step VIII uses the PrimaryButton variation.

Popover + chip behaviour:
- PopoverLayer is now MouseFilter=Ignore so clicks/scroll/hover all
  pass through. Adjacent chips fire reliably even when the previous
  popover overlaps them spatially.
- Dropped the 80ms grace timer; chip MouseExited closes immediately.
- TraitChip MouseFilter Stop → Pass so clicks bubble up to the
  parent card's GuiInput (selecting the card).

Misc:
- Wizard._Ready inserts a backing Panel so the parchment Bg fills
  the canvas — Wizard root is a plain Control, which paints nothing.
- CodexTheme font lookup tries Cormorant-Medium before -Regular and
  globalizes res://Fonts/ for runtime FontFile load (the previous
  fallback used ContentPaths which points at a sibling data tree).
- StepStats final-score Label rendered at font_size 22 to match the
  AbilityToken die.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Christopher Wiebe
2026-05-03 22:04:24 -07:00
parent bb986d49f9
commit e3f0296e6f
17 changed files with 348 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Theriapolis.Godot/UI/CodexPalette.cs
+24 -5
View File
@@ -8,16 +8,35 @@ namespace Theriapolis.GodotHost.UI;
/// names mirror the React prototype's CSS custom properties so the audit
/// trail is readable: --bg, --ink, --gild, --seal, etc.
///
/// Single theme ships: Dark (leather + candlelight). The React prototype
/// shipped Parchment and Blood as alternates and Compact density as a dev
/// toggle; per user direction during M5, only Dark is needed for this
/// game and the rest are dropped from scope (port plan §10 resolved
/// decisions).
/// Two palettes ship today: <see cref="Parchment"/> (default — aged paper
/// + sealing-wax red) and <see cref="Dark"/> (leather + candlelight,
/// retained from the M5 design audit). The React prototype's "blood"
/// variant is dropped from scope.
/// </summary>
public struct CodexPalette
{
public Color Bg, Bg2, BgDeep, Ink, InkSoft, InkMute, Rule, Gild, Seal, Seal2, Accent;
/// <summary>
/// Aged-paper palette. Cream backgrounds with deep brown-black ink,
/// sealing-wax red for primary action / selection emphasis, and a
/// muted gold gild for accents. This is the default codex feel.
/// </summary>
public static readonly CodexPalette Parchment = new()
{
Bg = Hex("#e8dcc0"),
Bg2 = Hex("#d9c9a6"),
BgDeep = Hex("#c7b48b"),
Ink = Hex("#2b1d10"),
InkSoft = Hex("#5a4527"),
InkMute = Hex("#8a6f48"),
Rule = Hex("#8a6f48"),
Gild = Hex("#b48a3c"),
Seal = Hex("#7a1f12"),
Seal2 = Hex("#5a160c"),
Accent = Hex("#6b4a1e"),
};
public static readonly CodexPalette Dark = new()
{
Bg = Hex("#1c1410"),
Theriapolis.Godot/UI/CodexTheme.cs
+122 -28
View File
@@ -1,6 +1,5 @@
using Godot;
using System.IO;
using Theriapolis.GodotHost.Platform;
namespace Theriapolis.GodotHost.UI;
@@ -11,12 +10,12 @@ namespace Theriapolis.GodotHost.UI;
/// 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)
/// back to Godot's default sans if missing. Each role tries a list of
/// candidate filenames in priority order so the project can ship
/// Cormorant-Medium or Cormorant-Regular interchangeably.
/// Display serif: CormorantGaramond-{Medium,Regular}.ttf
/// Body serif: CrimsonPro-Regular.ttf
/// Mono: JetBrainsMono-Regular.ttf (optional; falls back to body)
///
/// Theme variations (.tres) aren't authored in the editor — the entire
/// theme tree is constructed in code so palette changes are atomic and
@@ -30,10 +29,11 @@ public static class CodexTheme
private static FontFile? _mono;
private static bool _fontsLoaded;
public static Theme Build()
public static Theme Build() => Build(CodexPalette.Parchment);
public static Theme Build(CodexPalette palette)
{
EnsureFonts();
var palette = CodexPalette.Dark;
var theme = new Theme();
// Defaults applied to every Control unless overridden.
@@ -69,6 +69,11 @@ public static class CodexTheme
// Card variant — slightly raised against the page background.
// Used by character-creation grid cards (Calling, History, etc.).
// SetTypeVariation registers the inheritance so a PanelContainer
// with ThemeTypeVariation="Card" actually resolves "panel" to the
// Card stylebox; without it, Godot's default PanelContainer panel
// (dark slate) wins and the parchment colours never land.
theme.SetTypeVariation("Card", "PanelContainer");
var card = new StyleBoxFlat
{
BgColor = p.Bg2,
@@ -85,15 +90,24 @@ public static class CodexTheme
card.SetBorderWidthAll(1);
theme.SetStylebox("panel", "Card", card);
// Hover — gild border so the affordance pops without committing
// the seal-red selection signal yet. CodexCard wires this in via
// MouseEntered/MouseExited.
var cardHover = (StyleBoxFlat)card.Duplicate();
cardHover.BorderColor = p.Gild;
cardHover.SetBorderWidthAll(2);
theme.SetStylebox("panel_hover", "Card", cardHover);
var cardSelected = (StyleBoxFlat)card.Duplicate();
cardSelected.BorderColor = p.Seal;
cardSelected.SetBorderWidthAll(1);
cardSelected.SetBorderWidthAll(3);
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.
theme.SetTypeVariation("CodexPopover", "PanelContainer");
var popover = new StyleBoxFlat
{
BgColor = p.Bg2,
@@ -112,6 +126,75 @@ public static class CodexTheme
var popoverDetriment = (StyleBoxFlat)popover.Duplicate();
popoverDetriment.BorderColor = p.Seal;
theme.SetStylebox("panel_detriment", "CodexPopover", popoverDetriment);
// Pill — small trait/skill chip. Mirrors .trait-chips .t-name from
// the React prototype: gild-tinted bg over the page bg with a
// translucent gild border. Detriment variant swaps to seal red.
// The page bg (p.Bg) is cream on parchment so the pill reads as
// a slightly warmer carved-into shape inside a card.
theme.SetTypeVariation("Pill", "PanelContainer");
var pill = new StyleBoxFlat
{
BgColor = p.Bg.Lerp(p.Gild, 0.07f),
BorderColor = WithAlpha(p.Gild, 0.55f),
CornerRadiusTopLeft = CodexSpacing.Radius,
CornerRadiusTopRight = CodexSpacing.Radius,
CornerRadiusBottomLeft = CodexSpacing.Radius,
CornerRadiusBottomRight = CodexSpacing.Radius,
ContentMarginLeft = 9,
ContentMarginRight = 9,
ContentMarginTop = 3,
ContentMarginBottom = 3,
};
pill.SetBorderWidthAll(1);
theme.SetStylebox("panel", "Pill", pill);
theme.SetTypeVariation("PillDetriment", "PanelContainer");
var pillDetriment = (StyleBoxFlat)pill.Duplicate();
pillDetriment.BgColor = p.Bg.Lerp(p.Seal, 0.08f);
pillDetriment.BorderColor = WithAlpha(p.Seal, 0.55f);
theme.SetStylebox("panel", "PillDetriment", pillDetriment);
// Ability tokens + slots — fixed-size 56×56 panels used by Step V.
// Token = the draggable die; slot = the drop target. Both use the
// page bg with a Rule border so they read as carved-into the page
// rather than floating cards. Mirrors .die / .slot in the React
// prototype's CSS (parchment block).
var dieBox = new StyleBoxFlat
{
BgColor = p.Bg,
BorderColor = p.Rule,
CornerRadiusTopLeft = CodexSpacing.Radius,
CornerRadiusTopRight = CodexSpacing.Radius,
CornerRadiusBottomLeft = CodexSpacing.Radius,
CornerRadiusBottomRight = CodexSpacing.Radius,
};
dieBox.SetBorderWidthAll(1);
theme.SetTypeVariation("AbilityToken", "PanelContainer");
theme.SetStylebox("panel", "AbilityToken", dieBox);
theme.SetTypeVariation("AbilitySlot", "PanelContainer");
theme.SetStylebox("panel", "AbilitySlot", dieBox);
// Skill row — sits inside an ability-group Card. Bg2 fill (matching
// the card so rows blend into the card bg by default); state tints
// applied per row via Modulate in StepSkills (background-granted →
// warm gild, chosen → pale green, unavailable → reduced alpha).
theme.SetTypeVariation("SkillRow", "PanelContainer");
var skillRow = new StyleBoxFlat
{
BgColor = p.Bg2,
CornerRadiusTopLeft = CodexSpacing.Radius,
CornerRadiusTopRight = CodexSpacing.Radius,
CornerRadiusBottomLeft = CodexSpacing.Radius,
CornerRadiusBottomRight = CodexSpacing.Radius,
ContentMarginLeft = 8,
ContentMarginRight = 8,
ContentMarginTop = 4,
ContentMarginBottom = 4,
};
theme.SetStylebox("panel", "SkillRow", skillRow);
}
private static void ApplyLabel(Theme theme, CodexPalette p)
@@ -273,34 +356,45 @@ public static class CodexTheme
if (_fontsLoaded) return;
_fontsLoaded = true;
_serifDisplay = LoadFontFromFonts("CormorantGaramond-Regular.ttf");
_serifDisplayItalic = LoadFontFromFonts("CormorantGaramond-Italic.ttf");
_serifDisplay = LoadFontFromFonts("CormorantGaramond-Medium.ttf",
"CormorantGaramond-Regular.ttf");
_serifDisplayItalic = LoadFontFromFonts("CormorantGaramond-MediumItalic.ttf",
"CormorantGaramond-Italic.ttf");
_serifBody = LoadFontFromFonts("CrimsonPro-Regular.ttf");
_mono = LoadFontFromFonts("JetBrainsMono-Regular.ttf");
if (_serifDisplay is null && _serifBody is null && _mono is null)
// Mono falls back to body so eyebrow/meta labels still render in a
// serif rather than collapsing to Godot's default sans.
if (_mono is null) _mono = _serifBody;
if (_serifDisplay is null && _serifBody 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.");
"Drop CormorantGaramond + CrimsonPro TTFs into res://Fonts/ " +
"for full design parity.");
}
}
private static FontFile? LoadFontFromFonts(string filename)
private static FontFile? LoadFontFromFonts(params string[] candidateFilenames)
{
// 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))
foreach (var filename in candidateFilenames)
{
var font = new FontFile();
font.LoadDynamicFont(fsPath);
return font;
// Try res://Fonts/ first (Godot-managed import).
string resPath = $"res://Fonts/{filename}";
if (ResourceLoader.Exists(resPath))
return ResourceLoader.Load<FontFile>(resPath);
// Fall back to globalized res://Fonts/ via runtime FontFile load.
// ContentPaths is for game data (Content/Data, Content/Gfx) which
// sits next to Theriapolis.Godot, not inside it — so it can't be
// used for fonts shipped under res://Fonts/.
string globalRes = ProjectSettings.GlobalizePath(resPath);
if (File.Exists(globalRes))
{
var font = new FontFile();
font.LoadDynamicFont(globalRes);
return font;
}
}
return null;
}