vstockwell/dune-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Theme the page by selected house (Atreides green/black, Harkonnen blue/orange)

Browse source 
- Introduce body[data-house="atreides"] and body[data-house="harkonnen"]
  CSS blocks that override --sand / --sand-2 / --spice / --ember and the
  background gradient vars, so the whole UI (panels, progress bars, primary
  CTA, totals, allocated/maxed skill borders) recolors when the house is
  switched.
- Fix the previously-swapped house identity colors: Atreides is green,
  Harkonnen is orange. Both house-pick cards now always display in their
  identity color, so the unselected house remains visually tagged.
- App.vue applies the theme by setting document.body.dataset.house from a
  reactive watcher.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell 2026-05-23 07:52:38 -04:00
parent 84b3f6a061
commit 99259e64bf
2 changed files with 70 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
character-builder/frontend/src/App.vue
View file

@ -52,6 +52,17 @@ const shareLink = ref<string>('');
const shareStatus = ref<string>(''); const shareStatus = ref<string>('');
const saving = ref(false); const saving = ref(false);
// Apply the house theme to <body> so the page recolors when house changes.
watch(
() => build.house,
(h) => {
if (typeof document !== 'undefined') {
document.body.dataset.house = h;
}
},
{ immediate: true },
);
onMounted(async () => { onMounted(async () => {
await Promise.all([ await Promise.all([
loadCharacterXp().then((d) => (charXp.value = d)), loadCharacterXp().then((d) => (charXp.value = d)),

73
character-builder/frontend/src/styles.css
View file

@ -1,4 +1,5 @@
:root { :root {
/* Neutral surface palette (shared across houses) */
--bg: #1a1410; --bg: #1a1410;
--bg-2: #221a14; --bg-2: #221a14;
--panel: #2b2018; --panel: #2b2018;
@ -8,15 +9,63 @@
--ink: #f4e9d8; --ink: #f4e9d8;
--ink-dim: #c9b89c; --ink-dim: #c9b89c;
--ink-muted: #8a7560; --ink-muted: #8a7560;
/* Default accents — neutral sand/spice (Dune base). House themes below
override these. */
--sand: #e6c98a; --sand: #e6c98a;
--sand-2: #d4a85a; --sand-2: #d4a85a;
--ember: #c8643a; --ember: #c8643a;
--spice: #e08a3c; --spice: #e08a3c;
--green: #8fb87a; --green: #8fb87a;
--atreides: #4a86c5;
--harkonnen: #a93832; /* House identity colors — used on the house-pick cards even when the
opposing house's theme is active. */
--atreides: #6ec06a; /* forest green */
--harkonnen: #e08a3c; /* blood orange */
--shadow: 0 1px 0 rgba(255, 255, 255, 0.04), --shadow: 0 1px 0 rgba(255, 255, 255, 0.04),
0 12px 32px -16px rgba(0, 0, 0, 0.6); 0 12px 32px -16px rgba(0, 0, 0, 0.6);
--bg-gradient-a: rgba(224, 138, 60, 0.10);
--bg-gradient-b: rgba(212, 168, 90, 0.06);
}
/* ---------- House Atreides theme: green & black ---------- */
body[data-house='atreides'] {
--bg: #0f140f;
--bg-2: #161d15;
--panel: #1d271c;
--panel-2: #243023;
--line: #2f4a2c;
--line-soft: #243a22;
--sand: #9bd996; /* leaf green — headings, highlights */
--sand-2: #6ec06a; /* deeper green — borders / active */
--ember: #1d3a1d; /* near-black green — gradient start */
--spice: #4f9c4d; /* forest green — primary accent */
--green: #b8e8a8; /* lighter green — "good" status */
--bg-gradient-a: rgba(110, 192, 106, 0.10);
--bg-gradient-b: rgba(60, 110, 56, 0.08);
}
/* ---------- House Harkonnen theme: blue & orange ---------- */
body[data-house='harkonnen'] {
--bg: #10131a;
--bg-2: #161a23;
--panel: #1c2230;
--panel-2: #232a3a;
--line: #3a4b6a;
--line-soft: #2a3850;
--sand: #f0a460; /* warm orange — headings, highlights */
--sand-2: #5a9be0; /* steel blue — borders / active */
--ember: #2b5a8a; /* deep blue — gradient start */
--spice: #e08a3c; /* blood orange — primary accent */
--green: #9bd996; /* keep green for "good" status */
--bg-gradient-a: rgba(224, 138, 60, 0.10);
--bg-gradient-b: rgba(74, 134, 197, 0.10);
} }
* { * {
@ -33,18 +82,12 @@ body {
font-family: 'Inter', system-ui, sans-serif; font-family: 'Inter', system-ui, sans-serif;
font-size: 15px; font-size: 15px;
line-height: 1.5; line-height: 1.5;
background: radial-gradient( background:
1200px 600px at 80% -10%, radial-gradient(1200px 600px at 80% -10%, var(--bg-gradient-a), transparent 60%),
rgba(224, 138, 60, 0.1), radial-gradient(900px 500px at -10% 110%, var(--bg-gradient-b), transparent 60%),
transparent 60%
),
radial-gradient(
900px 500px at -10% 110%,
rgba(212, 168, 90, 0.06),
transparent 60%
),
var(--bg); var(--bg);
min-height: 100vh; min-height: 100vh;
transition: background-color 0.4s ease;
} }
a { color: var(--sand); } a { color: var(--sand); }
@ -256,14 +299,16 @@ input[type='number'] {
background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
border-color: var(--sand-2); border-color: var(--sand-2);
} }
.house-pick.active.atreides { border-color: var(--atreides); }
.house-pick.active.harkonnen { border-color: var(--harkonnen); }
.house-pick h3 { .house-pick h3 {
font-family: 'Cormorant Garamond', serif; font-family: 'Cormorant Garamond', serif;
font-size: 24px; font-size: 24px;
margin: 0; margin: 0;
font-weight: 500; font-weight: 500;
} }
.house-pick.active.atreides h3 { color: var(--atreides); } .house-pick.atreides h3 { color: var(--atreides); }
.house-pick.active.harkonnen h3 { color: var(--harkonnen); } .house-pick.harkonnen h3 { color: var(--harkonnen); }
.house-pick .meta { .house-pick .meta {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 10.5px; font-size: 10.5px;