Christopher Wiebe
e3f0296e6f
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>
107 lines
3.3 KiB
C#
107 lines
3.3 KiB
C#
using Godot;
|
|
|
|
namespace Theriapolis.GodotHost.UI;
|
|
|
|
/// <summary>
|
|
/// Color, font, and spacing tokens lifted from
|
|
/// <c>CharacterCreator.zip/index.html</c>'s <c>:root</c> block. Variable
|
|
/// names mirror the React prototype's CSS custom properties so the audit
|
|
/// trail is readable: --bg, --ink, --gild, --seal, etc.
|
|
///
|
|
/// 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"),
|
|
Bg2 = Hex("#261b14"),
|
|
BgDeep = Hex("#100a07"),
|
|
Ink = Hex("#f0e2c4"),
|
|
InkSoft = Hex("#d4be90"),
|
|
InkMute = Hex("#8c7651"),
|
|
Rule = Hex("#6b5635"),
|
|
Gild = Hex("#d8a84a"),
|
|
Seal = Hex("#b03021"),
|
|
Seal2 = Hex("#7a1f12"),
|
|
Accent = Hex("#d8a84a"),
|
|
};
|
|
|
|
private static Color Hex(string s) => new(s);
|
|
}
|
|
|
|
/// <summary>
|
|
/// Spacing + radius tokens. Density is locked at "normal" per port plan
|
|
/// §10 (compact mode dropped from scope).
|
|
/// </summary>
|
|
public static class CodexSpacing
|
|
{
|
|
public const int Gap = 24; // --gap
|
|
public const int Pad = 28; // --pad
|
|
public const int Radius = 2; // --radius
|
|
}
|
|
|
|
/// <summary>
|
|
/// Font-size + letter-spacing tokens. Sizes are in px, matching the CSS.
|
|
/// Letter-spacing values are in em multiplied by 1000 (em isn't a Godot
|
|
/// concept; we use it for documentation only — see CodexTheme for actual
|
|
/// Theme constant assignment).
|
|
/// </summary>
|
|
public static class CodexType
|
|
{
|
|
// Headings (h1..h4)
|
|
public const int H1Size = 38;
|
|
public const int H2Size = 28;
|
|
public const int H3Size = 20;
|
|
public const int H4Size = 14;
|
|
|
|
// Body / display
|
|
public const int BodySize = 14;
|
|
public const int BodyLargeSize = 15;
|
|
|
|
// Mono micro-text (eyebrows, meta lines, codex-sub)
|
|
public const int MonoEyebrowSize = 11;
|
|
public const int MonoSmallSize = 10;
|
|
public const int MonoXSmallSize = 9;
|
|
|
|
// Codex title (.codex-title)
|
|
public const int CodexTitleSize = 28;
|
|
|
|
// Card components
|
|
public const int CardNameSize = 22;
|
|
public const int CardBodySize = 14;
|
|
|
|
// Buttons
|
|
public const int BtnSize = 16;
|
|
public const int BtnSmallSize = 13;
|
|
|
|
// Stepper
|
|
public const int StepperNumSize = 22;
|
|
public const int StepperNameSize = 10;
|
|
}
|