Ronni Baslund
c71e782dc0
- CommandPalette + useCommandPalette: ⌘K opens a search-and-jump panel over real tenants/partners + fixture flags + nav + actions. Arrow keys + Enter navigate, Escape/backdrop close. Recents are intentionally omitted for now; add when there's something to recent over. - Impersonation stub: useImpersonation + ImpersonationModal + ImpersonationBanner. Modal opens from tenant detail and from the palette. Banner stays at the top of the shell until exited. No real OBO token is minted — wiring OAuth Token Exchange is tracked as a follow-up. - IncidentModal + useIncidentModal: opened from the Overview and Infrastructure incident banners, renders the mock INCIDENT data with metrics, timeline and draft composer. - TweaksPanel + useTweaks: floating bottom-right panel for theme (dark/light), density (comfy/compact), env badge (prod/staging/dev). Saved to localStorage. - Theme/density apply via [data-theme] + [data-density] overrides in tokens.css. Topbar env badge now reads from useTweaks instead of a prop. - Layout wires ⌘K + ⌘[ at the document level and mounts the palette + modals + banner + tweaks panel once for all pages.
84 lines
2.4 KiB
CSS
84 lines
2.4 KiB
CSS
/* Dezky operator design tokens — dark/carbon surface by default.
|
|
Mirrors the customer portal's tokens.css palette but swaps the defaults
|
|
to the dark variant. operator.dezky.local always renders carbon. */
|
|
|
|
:root {
|
|
--bg: #0A0A0A;
|
|
--surface: #141413;
|
|
--elevated: #1C1C1A;
|
|
--border: #262622;
|
|
--border-hi: #33332E;
|
|
|
|
--text: #F4F3EE;
|
|
--text-dim: rgba(244, 243, 238, 0.72);
|
|
--text-mute: rgba(244, 243, 238, 0.45);
|
|
|
|
/* Sidebar uses surface-level dark (same as the global one for operator) */
|
|
--side-bg: #0A0A0A;
|
|
--side-surf: #141413;
|
|
--side-border: #1F1F1C;
|
|
--side-text: #F4F3EE;
|
|
--side-dim: rgba(244, 243, 238, 0.55);
|
|
--side-mute: rgba(244, 243, 238, 0.35);
|
|
--side-hover: rgba(244, 243, 238, 0.06);
|
|
--side-active: rgba(244, 243, 238, 0.1);
|
|
|
|
--accent: #D4FF3A;
|
|
--accent-fg: #0A0A0A;
|
|
--signal: #D4FF3A;
|
|
|
|
--ok: #34C77B;
|
|
--warn: #F0B14A;
|
|
--bad: #F05858;
|
|
--info: #4D8BE8;
|
|
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--font-display: 'Inter Tight', 'Inter', sans-serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
|
|
|
|
--input-bg: rgba(244, 243, 238, 0.04);
|
|
|
|
/* Cosmetic density. comfy=1, compact≈0.78. Used by page chrome that opts in
|
|
(PageHeader / table cells). Reading via calc() keeps layouts in one place. */
|
|
--density-scale: 1;
|
|
}
|
|
|
|
/* Tweaks: density overrides */
|
|
:root[data-density='compact'] { --density-scale: 0.78; }
|
|
|
|
/* Tweaks: light theme (warm cream, charcoal text). Overrides every surface
|
|
token so any component that uses var(--bg / --surface / --text / ...) flips
|
|
without code changes. Components that hard-code rgba(244,243,238,...) will
|
|
not flip — those should switch to tokens if they care about light mode. */
|
|
:root[data-theme='light'] {
|
|
--bg: #F6F4EF;
|
|
--surface: #FAF8F2;
|
|
--elevated: #FFFFFF;
|
|
--border: #E2DED2;
|
|
--border-hi: #D0CBBC;
|
|
|
|
--text: #1C1B17;
|
|
--text-dim: rgba(28, 27, 23, 0.72);
|
|
--text-mute: rgba(28, 27, 23, 0.50);
|
|
|
|
--side-bg: #F0EDE4;
|
|
--side-surf: #FAF8F2;
|
|
--side-border: #E2DED2;
|
|
--side-text: #1C1B17;
|
|
--side-dim: rgba(28, 27, 23, 0.62);
|
|
--side-mute: rgba(28, 27, 23, 0.42);
|
|
--side-hover: rgba(28, 27, 23, 0.05);
|
|
--side-active: rgba(28, 27, 23, 0.08);
|
|
|
|
--accent: #1F8A5B;
|
|
--accent-fg: #FAF8F2;
|
|
--signal: #1F8A5B;
|
|
|
|
--ok: #1F8A5B;
|
|
--warn: #C97F1F;
|
|
--bad: #C03A3A;
|
|
--info: #2A6FDB;
|
|
|
|
--input-bg: rgba(28, 27, 23, 0.04);
|
|
}
|