/* ============================================================ FloorCanvas — Style Library ------------------------------------------------------------ Each style is a CSS class applied to as data-viz-style. Override any of these CSS custom properties to define a new style. To add your own, copy a block, rename the selector (e.g. [data-viz-style="brutalist"]), and tweak the values. Token reference: --paper page / wall fill background --paper-2 soft surface (sofas, mid panels) --paper-3 deeper surface (counters, tables) --paper-4 darkest surface tier --ink primary line + type color --ink-4..6 secondary type / dimension tints --floor-1 primary floor fill (tile) --floor-2 secondary floor (wood) --floor-3 accent floor (rug / patio) --water pool / water fill --foliage landscaping fill --accent single attention color --line-weight global stroke multiplier (1 = baseline) --line-style "solid" | "sketch" — toggles a wobble filter on shapes --paper-tex url() pattern overlay applied to body ============================================================ */ :root { --floor-1: transparent; --floor-2: transparent; --floor-3: transparent; --water: transparent; --foliage: transparent; --accent: var(--yellow); --line-weight: 1; --line-style: solid; --paper-tex: none; } /* ---------- BAUHAUS — primary triad on cream ---------- */ [data-viz-style="bauhaus"] { --paper: #f1ebe1; --paper-2: #e7dfd2; --paper-3: #dccfba; --paper-4: #c8b99c; --ink: #0a0a0a; --ink-4: #4d4538; --ink-5: #6f6450; --ink-6: #8a7d65; --accent: #f5d800; } /* ---------- BLUEPRINT — classic cyan-on-navy ---------- */ [data-viz-style="blueprint"] { --paper: #0a2347; --paper-2: #0f2d5c; --paper-3: #163b73; --paper-4: #1d4a8c; --ink: #f0f4ff; --ink-4: #cfd9ee; --ink-5: #9eb1d4; --ink-6: #6b85b8; --accent: #ffd700; } /* ---------- HAND SKETCH — graphite + kraft paper ---------- */ [data-viz-style="sketch"] { --paper: #f7f1e3; --paper-2: #ede4c9; --paper-3: #e0d3ad; --paper-4: #cab98a; --ink: #2b2418; --ink-4: #5a4c33; --ink-5: #7c6a4a; --ink-6: #9a8866; --accent: #c75a2a; --line-style: sketch; } /* ---------- TECHNICAL MONO — pure CAD ---------- */ [data-viz-style="mono"] { --paper: #ffffff; --paper-2: #f4f4f4; --paper-3: #e8e8e8; --paper-4: #cccccc; --ink: #0a0a0a; --ink-4: #444444; --ink-5: #666666; --ink-6: #888888; --accent: #ff3b30; } /* ---------- WATERCOLOR — soft wash ---------- */ [data-viz-style="watercolor"] { --paper: #faf6ef; --paper-2: #f0e6d9; --paper-3: #e1d2bd; --paper-4: #c9b59a; --ink: #3a3128; --ink-4: #6b5d4f; --ink-5: #8c7d6c; --ink-6: #a89888; --accent: #a85d4a; } /* ---------- MIDCENTURY — warm tan + brown ink ---------- */ [data-viz-style="midcentury"] { --paper: #e8dcc4; --paper-2: #d9c9a8; --paper-3: #c4b18a; --paper-4: #a89673; --ink: #2a1e10; --ink-4: #5c4525; --ink-5: #7a623a; --ink-6: #9a8254; --accent: #c75a2a; } /* ---------- REALISTIC COLOR — magazine renderings ---------- */ [data-viz-style="realistic"] { --paper: #f5e9d4; /* primary tile floor (warm beige) */ --paper-2: #ead9b8; /* secondary tile shade */ --paper-3: #d9be8a; /* deeper tile / wood plank */ --paper-4: #b8966a; /* shadow tier */ --ink: #1a1a1a; /* wall ink */ --ink-4: #3d3326; --ink-5: #5a4a35; --ink-6: #7d6b50; --floor-1: #f0dfbe; /* main floor */ --floor-2: #c69968; /* wood floor */ --floor-3: #e4d4ae; /* lanai / patio */ --water: #5fb3e3; /* pool water */ --foliage: #6b9a4a; /* greenery */ --accent: #b85a2e; } /* ============================================================ EXAMPLE — copy this block to add a new style. Then add it to the dropdown list in fc-ui.jsx > TopBar > STYLES. ============================================================ */ /* [data-viz-style="my-style"] { --paper: #....; --paper-2: #....; --paper-3: #....; --paper-4: #....; --ink: #....; --ink-4: #....; --ink-5: #....; --ink-6: #....; --accent: #....; } */