/* ========================================================================== * Floor Forge - Assets + Export panel styles (V1.01) * -------------------------------------------------------------------------- * Palette: Lakshan DevStudio suite tokens. Every colour resolves through a * --lds-* suite variable first (so the merged page can feed in the exact * suite tokens) and falls back to the values below, which follow the house * rules: warm cream light mode (never plain white), a matching deep-slate * dark mode, red = error, green = success/implemented, blue = holding. * Dark mode activates three ways, whichever the host page uses: * 1. [data-theme="dark"] on or (suite toggle hook) * 2. .ff-theme-dark on any ancestor (manual hook) * 3. prefers-color-scheme: dark (OS fallback) * English-only UI. Commented code. * ======================================================================== */ /* ---- Token layer ------------------------------------------------------- */ /* MERGE SEAM 4: alias the --lds-* suite variables to Builder A's real token names (A defines --bg/--surface/--surface-2/--ink/--muted/--line/--accent/ --red/--green/--blue on :root, with an html.dark override). B's panel colours then follow A's palette exactly in both themes. When these tokens are undefined (dev/dev-preview.html standalone), var() is invalid at computed-value time and B's built-in fallbacks below apply unchanged. */ :root { --lds-bg: var(--surface); /* panel bg blends into A's panel card */ --lds-surface: var(--surface-2); /* raised wells inside the module */ --lds-surface-2: var(--bg); /* sunken wells (atlas canvas wraps) */ --lds-text: var(--ink); --lds-text-dim: var(--muted); --lds-border: var(--line); --lds-accent: var(--accent); --lds-accent-ink: #10261f; /* A's ink-on-accent in both themes */ --lds-error: var(--red); --lds-success: var(--green); --lds-holding: var(--blue); } .ff-panel { /* Light mode (default): warm cream family */ --ff-bg: var(--lds-bg, #faf6ec); /* warm cream page bg */ --ff-surface: var(--lds-surface, #f3ecdc); /* raised panel surface */ --ff-surface-2: var(--lds-surface-2, #ece3cf); /* sunken wells */ --ff-text: var(--lds-text, #2e2820); /* primary text */ --ff-text-dim: var(--lds-text-dim, #6f6655); /* secondary text */ --ff-border: var(--lds-border, #ddd2ba); /* hairlines */ --ff-accent: var(--lds-accent, #0e9f7e); /* emerald mint accent */ --ff-accent-ink:var(--lds-accent-ink,#ffffff); /* text on accent */ /* Semantic colours (house rule: red error / green success / blue hold) */ --ff-error: var(--lds-error, #c9342c); --ff-success: var(--lds-success, #1d8a4e); --ff-holding: var(--lds-holding, #2563c9); --ff-radius: 10px; --ff-gap: 10px; background: var(--ff-bg); color: var(--ff-text); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; border: 1px solid var(--ff-border); border-radius: var(--ff-radius); padding: 12px; margin-bottom: 12px; box-sizing: border-box; } /* Dark mode: deep slate family that re-themes (no inversion) */ [data-theme="dark"] .ff-panel, .ff-theme-dark .ff-panel { --ff-bg: var(--lds-bg, #16212b); --ff-surface: var(--lds-surface, #1e2c38); --ff-surface-2: var(--lds-surface-2, #25374a); --ff-text: var(--lds-text, #ece5d5); --ff-text-dim: var(--lds-text-dim, #9aa89f); --ff-border: var(--lds-border, #33485c); --ff-accent: var(--lds-accent, #2fd3a7); --ff-accent-ink:var(--lds-accent-ink,#0b1512); --ff-error: var(--lds-error, #ff6b5e); --ff-success: var(--lds-success, #4fd08a); --ff-holding: var(--lds-holding, #6ea8ff); } @media (prefers-color-scheme: dark) { .ff-panel:not(.ff-force-light) { --ff-bg: var(--lds-bg, #16212b); --ff-surface: var(--lds-surface, #1e2c38); --ff-surface-2: var(--lds-surface-2, #25374a); --ff-text: var(--lds-text, #ece5d5); --ff-text-dim: var(--lds-text-dim, #9aa89f); --ff-border: var(--lds-border, #33485c); --ff-accent: var(--lds-accent, #2fd3a7); --ff-accent-ink:var(--lds-accent-ink,#0b1512); --ff-error: var(--lds-error, #ff6b5e); --ff-success: var(--lds-success, #4fd08a); --ff-holding: var(--lds-holding, #6ea8ff); } } /* ---- Shared bits ------------------------------------------------------- */ .ff-panel h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--ff-gap); color: var(--ff-text-dim); } .ff-panel h3 { font-size: 12px; margin: 14px 0 6px; color: var(--ff-text-dim); } .ff-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ff-spacer { height: var(--ff-gap); } .ff-btn { appearance: none; border: 1px solid var(--ff-border); background: var(--ff-surface); color: var(--ff-text); border-radius: 8px; padding: 7px 12px; font: inherit; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .ff-btn:hover { background: var(--ff-surface-2); } .ff-btn:disabled { opacity: 0.45; cursor: not-allowed; } .ff-btn.ff-primary { background: var(--ff-accent); border-color: var(--ff-accent); color: var(--ff-accent-ink); font-weight: 600; } .ff-btn.ff-primary:hover { filter: brightness(1.06); } /* Status pill: blue while loading, green when ready, red on error */ .ff-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--ff-border); color: var(--ff-text-dim); } .ff-pill.ff-ok { color: var(--ff-success); border-color: var(--ff-success); } .ff-pill.ff-warn { color: var(--ff-holding); border-color: var(--ff-holding); } .ff-pill.ff-error { color: var(--ff-error); border-color: var(--ff-error); } .ff-note { font-size: 12px; color: var(--ff-text-dim); } .ff-note.ff-error { color: var(--ff-error); } .ff-note.ff-ok { color: var(--ff-success); } /* ---- Atlas empty state + load slots ------------------------------------ */ .ff-empty { background: var(--ff-surface); border: 1px dashed var(--ff-border); border-radius: 8px; padding: 12px; font-size: 13px; } .ff-empty code { background: var(--ff-surface-2); border-radius: 4px; padding: 1px 5px; font-size: 12px; } .ff-slot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--ff-border); border-radius: 8px; background: var(--ff-surface); margin-top: 6px; } .ff-slot .ff-slot-name { flex: 1; font-size: 12px; } .ff-slot .ff-slot-name small { display: block; color: var(--ff-text-dim); } /* ---- Atlas browser ------------------------------------------------------ */ .ff-mode-toggle { display: inline-flex; border: 1px solid var(--ff-border); border-radius: 8px; overflow: hidden; } .ff-mode-toggle button { appearance: none; border: 0; background: var(--ff-surface); color: var(--ff-text); padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; } .ff-mode-toggle button.ff-active { background: var(--ff-accent); color: var(--ff-accent-ink); } .ff-atlas-block { margin-top: 12px; } .ff-atlas-canvas-wrap { position: relative; background: var(--ff-surface-2); border: 1px solid var(--ff-border); border-radius: 8px; padding: 6px; overflow: auto; max-height: 320px; } .ff-atlas-canvas-wrap canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; /* crisp pixel-art thumbnails */ cursor: crosshair; } .ff-selection-caption { font-size: 12px; color: var(--ff-text-dim); margin-top: 4px; min-height: 1.2em; } /* ---- Recolour ----------------------------------------------------------- */ .ff-recolour select { background: var(--ff-surface); color: var(--ff-text); border: 1px solid var(--ff-border); border-radius: 8px; padding: 6px 8px; font: inherit; max-width: 100%; } .ff-recolour input[type="range"] { flex: 1; accent-color: var(--ff-accent); min-width: 120px; } .ff-hue-readout { font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; } /* ---- Export -------------------------------------------------------------- */ .ff-export-status { font-size: 12px; margin-top: 6px; min-height: 1.2em; } .ff-export-status.ff-ok { color: var(--ff-success); } .ff-export-status.ff-error { color: var(--ff-error); } .ff-export-status.ff-warn { color: var(--ff-holding); } .ff-check { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ff-text-dim); }