Melvin StroblandClaude Fable 5
8c82549cf6
The browser half of M3. Flows open on a full-bleed canvas with their chrome floating over it: flow tabs top, dock bottom, node settings in a panel on the right that leaves the graph visible and running behind it. - Connections are derived, not stored. A node declares the messages it reads and publishes; every matching pair draws an edge, so two producers of one message converge on their consumer. Dragging output to input is shorthand for pointing that input at the producer's message, and asks before it replaces an existing one. - Values land on the edges as they flow, over a websocket that feeds a store outside React, so a value arriving re-renders its own chip and nothing else. Clicking an edge shows the last payload and when it arrived. - Node source is edited in Monaco, loaded only when a panel opens and themed from the design tokens. - Edits autosave; identical documents are skipped server-side, so a quiet canvas writes nothing. - Validation from the API shows on the node it belongs to and is summarised in the dock, where each entry pans to its node. - Works on a phone: touch-connect, 44px dock targets, and the node panel becomes a full-screen sheet. Two new tokens (--status-success, --font-mono) are mirrored in the website repo and recorded in DESIGN-GUIDELINES.md. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016WzrvW7rjQbynnhF6pxh6i
166 lines
5.5 KiB
CSS
166 lines
5.5 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/*
|
|
* Self-hosted font, duplicated verbatim across the fluksio and website repos (a
|
|
* sync point like `lib/motion.ts`; see the root DESIGN-GUIDELINES.md,
|
|
* Typography). Kept OUT of the byte-identical `@theme inline` / `:root` /
|
|
* `.dark` blocks. Inter is used for both body (set on `body` in `@layer base`)
|
|
* and the display face applied via the `.font-display` class below.
|
|
*/
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("/fonts/inter-latin-variable.woff2") format("woff2");
|
|
}
|
|
|
|
@theme inline {
|
|
--radius: 1rem; /* base: surface radius (16px) */
|
|
--radius-sm: 0.5rem; /* 8px: checkbox, small chips, nested items */
|
|
--radius-md: 0.75rem; /* 12px: menus, popovers, dropdowns, tooltips, textarea */
|
|
--radius-lg: 1rem; /* 16px: cards, panels, dialogs, alerts, sidebar */
|
|
--radius-xl: 1.75rem; /* 28px: large / hero containers */
|
|
/* Controls (button/input/toggle/chip) use the `rounded-full` utility (pill). */
|
|
|
|
/* Two-layer elevation: cards rest low (e1); floating surfaces e2; modals e3. */
|
|
--shadow-e1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.1);
|
|
--shadow-e2: 0 2px 6px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.12);
|
|
--shadow-e3: 0 8px 24px rgb(0 0 0 / 0.18), 0 2px 8px rgb(0 0 0 / 0.12);
|
|
|
|
/* Shared motion timing, consumed by CSS transitions and the lib/motion.ts presets. */
|
|
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
|
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--duration-fast: 150ms;
|
|
--duration-base: 200ms;
|
|
--duration-slow: 300ms;
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-brand-secondary: var(--brand-secondary);
|
|
--color-brand-secondary-foreground: var(--brand-secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-status-success: var(--status-success);
|
|
--font-mono:
|
|
ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas,
|
|
monospace;
|
|
}
|
|
|
|
/*
|
|
* Fluksio palette. Neutral surfaces, brand on controls only.
|
|
*
|
|
* `--primary` is #4a7189, not the identity blue #59849b: the latter measures
|
|
* 4.04:1 against white, below AA for the label sitting on a bg-primary fill.
|
|
* #59849b remains the wordmark colour (index/src/assets/fluksio-*.svg). See the root
|
|
* DESIGN-GUIDELINES.md → Colour tokens.
|
|
*/
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #333232;
|
|
--card: #ffffff;
|
|
--card-foreground: #333232;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #333232;
|
|
--primary: #4a7189;
|
|
--primary-foreground: #ffffff;
|
|
--brand-secondary: #de8f6e;
|
|
--brand-secondary-foreground: #333232;
|
|
--secondary: #f2f2f2;
|
|
--secondary-foreground: #333232;
|
|
--muted: #f2f2f2;
|
|
--muted-foreground: #6b6b6b;
|
|
--accent: #f5f5f5;
|
|
--accent-foreground: #333232;
|
|
--destructive: #b94d4d;
|
|
--border: #e4e4e4;
|
|
--input: #e4e4e4;
|
|
--ring: #4a7189;
|
|
--sidebar: #ffffff;
|
|
--sidebar-foreground: #333232;
|
|
--sidebar-primary: #4a7189;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #f5f5f5;
|
|
--sidebar-accent-foreground: #333232;
|
|
--sidebar-border: #e4e4e4;
|
|
--sidebar-ring: #4a7189;
|
|
--status-success: #5e8b6d;
|
|
}
|
|
|
|
.dark {
|
|
--background: #0a0a0a;
|
|
--foreground: #f5f5f5;
|
|
--card: #1a1a1a;
|
|
--card-foreground: #f5f5f5;
|
|
--popover: #1a1a1a;
|
|
--popover-foreground: #f5f5f5;
|
|
--primary: #7ba3b8;
|
|
--primary-foreground: #0a0a0a;
|
|
--brand-secondary: #e5a184;
|
|
--brand-secondary-foreground: #0a0a0a;
|
|
--secondary: #232323;
|
|
--secondary-foreground: #f5f5f5;
|
|
--muted: #232323;
|
|
--muted-foreground: #a3a3a3;
|
|
--accent: #262626;
|
|
--accent-foreground: #f5f5f5;
|
|
--destructive: #cf6666;
|
|
--border: #2a2a2a;
|
|
--input: #2a2a2a;
|
|
--ring: #7ba3b8;
|
|
--sidebar: #1a1a1a;
|
|
--sidebar-foreground: #f5f5f5;
|
|
--sidebar-primary: #7ba3b8;
|
|
--sidebar-primary-foreground: #0a0a0a;
|
|
--sidebar-accent: #262626;
|
|
--sidebar-accent-foreground: #f5f5f5;
|
|
--sidebar-border: #2a2a2a;
|
|
--sidebar-ring: #7ba3b8;
|
|
--status-success: #87b596;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
button,
|
|
[role="button"] {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
/* Display face for headings / wordmarks. Plain class so it stays outside the
|
|
byte-identical token blocks; falls back to the body stack. */
|
|
.font-display {
|
|
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
|
|
letter-spacing: -0.01em;
|
|
}
|