machinaos 0.0.76 → 0.0.78

package/client/src/themes/plague.css

@@ -0,0 +1,253 @@
+/* ============================================================================
+ * themes/plague.css — quarantine notices nailed to bleached doors.
+ *
+ * Sickly green-yellow on cold blue, biohazard red, official red wax seals.
+ * Reads like the WHO in 1349. Ported from
+ * design_handoff_machinaos_themes/themes/plague.css.
+ * ============================================================================ */
+
+:root[data-theme="plague"] {
+  --bg-app: #d8d4c0;
+  --bg-panel: #e4dfc8;
+  --bg-canvas: #c8c4b0;
+  --bg-elevated: #efeacf;
+  --bg-input: #efeacf;
+  --bg-hover: rgba(120, 60, 40, 0.10);
+  --bg-active: rgba(120, 60, 40, 0.20);
+  --bg-overlay: rgba(40, 30, 24, 0.6);
+
+  --border-default: #a89478;
+  --border-strong: #2a1c14;
+  --border-focus: #783c28;
+  --ornament-frame: none;
+
+  --fg-default: #2a1c14;
+  --fg-muted: #6a5440;
+  --fg-faint: #98886a;
+  --fg-on-accent: #efeacf;
+  --fg-on-success: #efeacf;
+  --fg-on-danger: #efeacf;
+  --fg-on-warning: #2a1c14;
+
+  --bile: #98a838;
+  --crow: #1a1410;
+  --linen: #efeacf;
+  --dried-blood: #783c28;
+
+  --font-display: 'UnifrakturCook', 'UnifrakturMaguntia', serif;
+  --font-body: 'EB Garamond', 'Cormorant Garamond', serif;
+  --font-mono: 'Special Elite', monospace;
+  --type-scale-base: 14px;
+  --type-tracking-display: 0.06em;
+  --type-uppercase: uppercase;
+
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-pill: 0px;
+
+  --dur-fast: 100ms;
+  --dur-default: 220ms;
+  --dur-slow: 460ms;
+  --ease-default: cubic-bezier(0.4, 0, 0.6, 1);
+  --ease-emphasis: cubic-bezier(0.4, 0, 0.6, 1);
+  --motion-style: stiff;
+  --sound-pack: bell;
+
+  /* Wave 30: bile-red pulse — matches the broadsheet warning palette
+   * + reads against parchment. */
+  --node-pulse-color: hsl(var(--destructive));
+
+  --cursor-default: auto;
+  --cursor-pointer: pointer;
+  --scrollbar-track: #d8d4c0;
+  --scrollbar-thumb: #2a1c14;
+
+  /* Shadcn HSL bridge */
+  --background: 49 25% 80%;
+  --foreground: 24 35% 12%;
+  --card: 47 53% 88%;
+  --card-foreground: 24 35% 12%;
+  --popover: 47 53% 88%;
+  --popover-foreground: 24 35% 12%;
+
+  --primary: 14 50% 31%;           /* dried blood */
+  --primary-foreground: 47 53% 88%;
+  --secondary: 49 35% 84%;
+  --secondary-foreground: 24 35% 12%;
+  --muted: 49 35% 84%;
+  --muted-foreground: 28 26% 33%;
+  --accent: 65 49% 44%;            /* bile */
+  --accent-foreground: 24 35% 12%;
+
+  --destructive: 14 50% 31%;
+  --destructive-foreground: 47 53% 88%;
+  --success: 75 47% 30%;
+  --warning: 65 49% 44%;
+  --info: 213 17% 35%;
+
+  --border: 24 35% 12%;
+  --input: 33 30% 56%;
+  --ring: 14 50% 31%;
+
+  /* Action role bridge */
+  --action-run: 75 47% 30%;
+  --action-run-soft: 75 47% 30% / 0.20;
+  --action-run-hover: 75 47% 30% / 0.34;
+  --action-run-border: 75 47% 30% / 0.7;
+
+  --action-stop: 14 50% 31%;
+  --action-stop-soft: 14 50% 31% / 0.20;
+  --action-stop-hover: 14 50% 31% / 0.34;
+  --action-stop-border: 14 50% 31% / 0.7;
+
+  --action-save: 14 50% 31%;
+  --action-save-soft: 14 50% 31% / 0.18;
+  --action-save-hover: 14 50% 31% / 0.32;
+  --action-save-border: 14 50% 31% / 0.7;
+
+  --action-config: 65 49% 44%;
+  --action-config-soft: 65 49% 44% / 0.20;
+  --action-config-hover: 65 49% 44% / 0.34;
+  --action-config-border: 65 49% 44% / 0.6;
+
+  --action-secret: 213 17% 35%;
+  --action-secret-soft: 213 17% 35% / 0.16;
+  --action-secret-hover: 213 17% 35% / 0.30;
+  --action-secret-border: 213 17% 35% / 0.7;
+
+  --action-tools: 14 50% 31%;
+  --action-tools-soft: 14 50% 31% / 0.16;
+  --action-tools-hover: 14 50% 31% / 0.30;
+  --action-tools-border: 14 50% 31% / 0.6;
+
+  --tint-soft: 16%;
+  --tint-border: 40%;
+
+  /* Canvas backplane — broadsheet red X marks on 240x240 tile */
+  --canvas-grid:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><g stroke='%23783c28' stroke-width='1.6' fill='none' opacity='0.10' stroke-linecap='square'><path d='M40 40 L60 60 M60 40 L40 60'/><path d='M180 80 L200 100 M200 80 L180 100'/><path d='M80 180 L100 200 M100 180 L80 200'/></g></svg>");
+  --canvas-grid-opacity: 1;
+}
+
+/* Body — weathered parchment */
+:root[data-theme="plague"] body {
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence baseFrequency='0.4' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.50 0 0 0 0 0.40 0 0 0 0 0.25 0 0 0 0.18 0'/></filter><rect width='300' height='300' filter='url(%23p)'/></svg>"),
+    var(--bg-app);
+}
+
+:root[data-theme="plague"] ::selection {
+  background: rgba(120, 60, 40, 0.45);
+  color: #efeacf;
+}
+
+/* Plague scrollbars — charred thumb on bone track */
+:root[data-theme="plague"] ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+:root[data-theme="plague"] ::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+:root[data-theme="plague"] ::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: var(--radius-sm, 0);
+}
+:root[data-theme="plague"] ::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--scrollbar-thumb) 80%, white);
+}
+
+/* ── Per-component decorations (Wave 16 port from handoff) ─── */
+
+:root[data-theme="plague"] .toolbar,
+:root[data-theme="plague"] .sidebar,
+:root[data-theme="plague"] .palette,
+:root[data-theme="plague"] .chat { background: var(--bg-panel); }
+:root[data-theme="plague"] .toolbar { border-bottom: 3px solid var(--crow); }
+:root[data-theme="plague"] .sidebar { border-right: 3px solid var(--crow); }
+:root[data-theme="plague"] .palette { border-left: 3px solid var(--crow); }
+:root[data-theme="plague"] .chat    { border-top: 3px solid var(--crow); }
+
+/* CANVAS — broadsheet with red X marks */
+:root[data-theme="plague"] .canvas {
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><g stroke='%23783c28' stroke-width='1.6' fill='none' opacity='0.10' stroke-linecap='square'><path d='M40 40 L60 60 M60 40 L40 60'/><path d='M180 80 L200 100 M200 80 L180 100'/><path d='M80 180 L100 200 M100 180 L80 200'/></g></svg>"),
+    var(--bg-canvas);
+}
+
+/* TYPOGRAPHY — proclamation */
+:root[data-theme="plague"] body { font-family: var(--font-body); color: var(--fg-default); }
+:root[data-theme="plague"] h1, :root[data-theme="plague"] h2, :root[data-theme="plague"] h3,
+:root[data-theme="plague"] .v-display {
+  font-family: var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: hsl(var(--accent));
+}
+
+/* SQUARE NODE — quarantine notice nailed up */
+:root[data-theme="plague"] .sq-node-box {
+  background: var(--linen);
+  border: 2px solid var(--crow); border-radius: 0;
+  box-shadow: 3px 3px 0 var(--crow);
+  color: var(--crow);
+  position: relative;
+}
+:root[data-theme="plague"] .sq-node-box::after {
+  content: ''; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px;
+  background: var(--crow); transform: translateX(-50%);
+}
+/* Wave 29: outer halo so selection reads at any zoom level. */
+:root[data-theme="plague"] .sq-node.selected .sq-node-box {
+  border-color: hsl(var(--accent));
+  background: hsl(var(--destructive) / 0.2);
+  box-shadow: 0 0 0 2px hsl(var(--accent)), 0 0 14px hsl(var(--destructive) / 0.4);
+}
+:root[data-theme="plague"] .sq-node-gear { background: hsl(var(--accent)); color: var(--linen); border: none; border-radius: 0; }
+:root[data-theme="plague"] .sq-node-handle { border-radius: 0; }
+:root[data-theme="plague"] .sq-node-handle.out { background: hsl(var(--accent)); }
+:root[data-theme="plague"] .sq-node-label { font-family: var(--font-display); letter-spacing: 0.06em; color: hsl(var(--accent)); font-weight: 400; }
+
+/* ACTIONS — official stamps */
+:root[data-theme="plague"] .action-btn {
+  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase;
+  border-radius: 0; border-width: 2px; font-weight: 400;
+}
+:root[data-theme="plague"] .action-run { background: hsl(var(--success-soft)); color: hsl(var(--success)); border-color: hsl(var(--success)); }
+:root[data-theme="plague"] .action-deploy { background: hsl(var(--danger-soft)); color: hsl(var(--accent)); border-color: hsl(var(--accent)); }
+:root[data-theme="plague"] .action-save { background: hsl(var(--warning-soft)); color: var(--bile); border-color: var(--bile); }
+
+/* CARDS */
+:root[data-theme="plague"] .wf-card,
+:root[data-theme="plague"] .cat,
+:root[data-theme="plague"] .comp,
+:root[data-theme="plague"] .settings-section,
+:root[data-theme="plague"] .cred-card {
+  background: var(--linen); border: 1px solid var(--crow); border-radius: 0; box-shadow: 2px 2px 0 var(--border-default);
+}
+:root[data-theme="plague"] .wf-card.selected { background: hsl(var(--danger-soft)); border: 2px solid hsl(var(--accent)); }
+:root[data-theme="plague"] .cat-tile { background: var(--crow); color: var(--linen); border-radius: 0; }
+:root[data-theme="plague"] .cat-name { font-family: var(--font-display); }
+:root[data-theme="plague"] .comp-ico { background: var(--bg-panel); color: hsl(var(--accent)); border: 1px solid var(--crow); border-radius: 0; }
+
+/* CHAT */
+:root[data-theme="plague"] .chat-msg-user { background: hsl(var(--danger-soft)); border: 1px solid hsl(var(--accent)); border-radius: 0; }
+:root[data-theme="plague"] .chat-msg-bot { background: var(--linen); border: 1px solid var(--crow); border-radius: 0; }
+
+/* STATUS BAR */
+:root[data-theme="plague"] .statusbar {
+  background: var(--crow); color: var(--linen); border-top: 3px solid hsl(var(--accent));
+  font-family: var(--font-mono); letter-spacing: 0.08em;
+}
+:root[data-theme="plague"] .statusbar .pip { background: var(--bile); border-radius: 0; }
+
+/* MODAL */
+:root[data-theme="plague"] .modal {
+  background: var(--linen); border: 4px double var(--crow); border-radius: 0;
+  box-shadow: 8px 8px 0 hsl(var(--accent));
+}
+:root[data-theme="plague"] .modal-head { border-bottom: 3px double var(--crow); }
+:root[data-theme="plague"] .modal-title { font-family: var(--font-display); color: hsl(var(--accent)); }
+
+/* CMDK */
+:root[data-theme="plague"] .cmdk { background: var(--linen); border: 4px double var(--crow); border-radius: 0; }
+:root[data-theme="plague"] .cmdk-item.active { background: hsl(var(--danger-soft)); color: hsl(var(--accent)); }
+:root[data-theme="plague"] .cmdk-item.active::before { content: '† '; color: hsl(var(--accent)); }