@nowline/layout 0.0.0-dev.20260601071750.g04bdff9

package/src/themes/light.ts

@@ -0,0 +1,251 @@
+import type { EntityStyle, NamedColors, Theme } from './shape.js';
+
+// Named-color mapping for light theme. These are the DSL's `bg:blue`
+// style tokens translated to concrete palette values.
+export const lightNamed: NamedColors = {
+    red: '#e53935',
+    blue: '#1e88e5',
+    yellow: '#fdd835',
+    green: '#43a047',
+    orange: '#fb8c00',
+    purple: '#8e24aa',
+    gray: '#9e9e9e',
+    navy: '#0d47a1',
+    white: '#ffffff',
+};
+
+const baseEntity: EntityStyle = {
+    bg: 'none',
+    fg: '#0f172a',
+    text: '#0f172a',
+    border: 'solid',
+    icon: 'none',
+    shadow: 'none',
+    font: 'sans',
+    weight: 'normal',
+    italic: false,
+    textSize: 'md',
+    padding: 'sm',
+    spacing: 'sm',
+    headerHeight: 'sm',
+    cornerRadius: 'sm',
+    bracket: 'none',
+    capacityIcon: 'multiplier',
+};
+
+export const lightTheme: Theme = {
+    name: 'light',
+    surface: {
+        page: '#f8fafc',
+        chart: '#ffffff',
+        headerBox: '#ffffff',
+    },
+    entities: {
+        roadmap: {
+            ...baseEntity,
+            headerHeight: 'md',
+            padding: 'md',
+        },
+        swimlane: {
+            ...baseEntity,
+            fg: '#334155',
+            text: '#334155',
+            padding: 'sm',
+            spacing: 'none',
+            textSize: 'sm',
+        },
+        item: {
+            ...baseEntity,
+            // Status-aware tint applied during layout when bg stays white;
+            // see m2d handoff Resolution 3.
+            bg: '#ffffff',
+            fg: '#94a3b8',
+            text: '#0f172a',
+            shadow: 'subtle',
+            cornerRadius: 'sm',
+        },
+        parallel: {
+            ...baseEntity,
+            bracket: 'none',
+            padding: 'xs',
+        },
+        group: {
+            ...baseEntity,
+            bracket: 'solid',
+            padding: 'xs',
+            fg: '#475569',
+        },
+        anchor: {
+            ...baseEntity,
+            bg: '#0f172a',
+            fg: '#0f172a',
+            text: '#0f172a',
+            cornerRadius: 'sm',
+        },
+        milestone: {
+            ...baseEntity,
+            bg: '#312e81',
+            fg: '#312e81',
+            text: '#ffffff',
+            border: 'solid',
+        },
+        footnote: {
+            ...baseEntity,
+            bg: 'none',
+            fg: '#475569',
+            text: '#475569',
+            textSize: 'sm',
+        },
+        label: {
+            ...baseEntity,
+            bg: '#f1f5f9',
+            fg: '#475569',
+            text: '#475569',
+            textSize: 'xs',
+            padding: 'xs',
+            cornerRadius: 'full',
+        },
+    },
+    swimlane: {
+        bandEven: '#ffffff',
+        bandOdd: '#f8fafc',
+        separator: '#e2e8f0',
+        frameTabText: '#334155',
+        frameTabMuted: '#64748b',
+        border: '#e2e8f0',
+        tabFill: '#f1f5f9',
+        tabStroke: '#cbd5e1',
+        tabText: '#334155',
+        ownerText: '#64748b',
+        footnoteIndicator: '#dc2626',
+        rowTintEven: '#ffffff',
+        rowTintOdd: '#f8fafc',
+        utilizationOk: '#10b981',
+        utilizationWarn: '#f59e0b',
+        utilizationOver: '#ef4444',
+    },
+    timeline: {
+        gridLine: '#cbd5e1',
+        minorGridLine: '#e2e8f0',
+        tickMark: '#cbd5e1',
+        labelText: '#64748b',
+        panelFill: '#ffffff',
+        border: '#e2e8f0',
+    },
+    header: {
+        cardBorder: '#e2e8f0',
+        author: '#64748b',
+    },
+    item: {
+        overflowX: '#dc2626',
+        linkIconFg: '#0f172a',
+        overflowTailFill: '#fee2e2',
+        overflowTailStroke: '#ef4444',
+        overflowCaption: '#b91c1c',
+    },
+    parallel: {
+        bracketStroke: '#334155',
+    },
+    anchorDiamond: {
+        fill: '#ffffff',
+        stroke: '#334155',
+        label: '#334155',
+        cutLine: '#64748b',
+    },
+    milestoneDiamond: {
+        fill: '#0f172a',
+        label: '#0f172a',
+        cutLineNormal: '#1e1b4b',
+        cutLineOverrun: '#b91c1c',
+        slack: '#0f172a',
+    },
+    footnotePanel: {
+        fill: '#ffffff',
+        border: '#e2e8f0',
+        header: '#0f172a',
+        title: '#0f172a',
+        description: '#64748b',
+        number: '#dc2626',
+    },
+    nowline: {
+        stroke: '#e53e3e',
+        labelText: '#ffffff',
+        labelBg: '#e53e3e',
+    },
+    milestone: {
+        dashedInk: '#94a3b8',
+        overrun: '#ef4444',
+    },
+    anchor: {
+        predecessorLine: '#94a3b8',
+    },
+    dependency: {
+        edgeStroke: '#475569',
+        overflowStroke: '#d32f2f',
+    },
+    footnote: {
+        indicatorText: '#e53e3e',
+        descriptionMuted: '#64748b',
+    },
+    includeRegion: {
+        border: '#94a3b8',
+        label: '#334155',
+        badge: '#64748b',
+        fill: '#f8fafc',
+        tabFill: '#ffffff',
+        tabStroke: '#cbd5e1',
+        tabText: '#0f172a',
+        badgeFill: '#e2e8f0',
+        badgeStroke: '#cbd5e1',
+        badgeText: '#475569',
+    },
+    arrowhead: {
+        neutral: '#475569',
+        light: '#94a3b8',
+        dark: '#0f172a',
+    },
+    status: {
+        done: '#10b981',
+        inProgress: '#3b82f6',
+        atRisk: '#f59e0b',
+        blocked: '#ef4444',
+        planned: '#94a3b8',
+        neutral: '#94a3b8',
+    },
+    // Status-dot palettes — the renderer picks one based on the
+    // bar's effective bg luminance.
+    //
+    // `onLight`: deep / 800-900 level. Used when the bar bg is
+    // light (pale status tint OR a label-driven light hue). High
+    // contrast against either.
+    //
+    // `onDark`: pale / 100 level. Used when the bar bg is dark or
+    // saturated mid-tone (e.g. `bg:blue` → `#1e88e5`). Still
+    // hue-tinted so the status meaning carries.
+    statusDot: {
+        onLight: {
+            done: '#065f46',
+            inProgress: '#1e3a8a',
+            atRisk: '#92400e',
+            blocked: '#991b1b',
+            planned: '#334155',
+            neutral: '#334155',
+        },
+        onDark: {
+            done: '#d1fae5',
+            inProgress: '#dbeafe',
+            atRisk: '#fef3c7',
+            blocked: '#fee2e2',
+            planned: '#e2e8f0',
+            neutral: '#e2e8f0',
+        },
+    },
+    attribution: {
+        mark: '#94a3b8',
+        link: '#e53e3e',
+    },
+    diagnostic: {
+        overlayBg: '#fee2e2',
+        errorText: '#991b1b',
+    },
+};

package/src/themes/shape.ts

@@ -0,0 +1,230 @@
+// The `Theme` interface is the single place that enumerates every role a
+// theme must define. Every theme (light, dark, future custom) imports this
+// and declares `const <name>Theme: Theme = { ... }`. `tsc` refuses to compile
+// if any role is omitted — that's our primary drift-prevention mechanism.
+
+import type { BorderKind, BracketKind, FontFamily, FontWeight, ShadowKind } from '../types.js';
+
+// Per-entity DSL-style defaults. Every property from specs/dsl.md §
+// Style Properties appears here so tsc enforces parity across themes.
+// All color roles are concrete hex strings; `bg` may be 'none' (transparent).
+export interface EntityStyle {
+    bg: string;
+    fg: string;
+    text: string;
+    border: BorderKind;
+    icon: string;
+    shadow: ShadowKind;
+    font: FontFamily;
+    weight: FontWeight;
+    italic: boolean;
+    textSize: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    padding: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    spacing: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    headerHeight: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    cornerRadius: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    bracket: BracketKind;
+    // Glyph used as the suffix on capacity numbers (lane badge / item suffix).
+    // Holds whatever the author wrote (built-in name, custom glyph id, or an
+    // inline Unicode literal) — interpretation is the renderer's job. Default
+    // is `multiplier` so unannotated capacity values render as `5×`.
+    capacityIcon: string;
+}
+
+export interface Theme {
+    name: 'light' | 'dark' | string;
+    // Surfaces — base colors drawn under every entity.
+    surface: {
+        page: string; // overall background
+        chart: string; // content area background
+        headerBox: string; // header/title block background
+    };
+    // Per-entity DSL defaults. Mirrors the DSL's `default <entity>` level.
+    entities: {
+        roadmap: EntityStyle;
+        swimlane: EntityStyle;
+        item: EntityStyle;
+        parallel: EntityStyle;
+        group: EntityStyle;
+        anchor: EntityStyle;
+        milestone: EntityStyle;
+        footnote: EntityStyle;
+        label: EntityStyle;
+    };
+    // Alternating swimlane band tints (even/odd index).
+    swimlane: {
+        bandEven: string;
+        bandOdd: string;
+        separator: string;
+        frameTabText: string;
+        frameTabMuted: string;
+        // m2.5d: tokens lifted out of the renderer's inline `theme === 'dark'`
+        // branches in `renderSwimlane`.
+        border: string;
+        tabFill: string;
+        tabStroke: string;
+        tabText: string;
+        ownerText: string;
+        footnoteIndicator: string;
+        rowTintEven: string; // alternating row tint (even rows)
+        rowTintOdd: string; // alternating row tint (odd rows)
+        // m13: tri-state lane utilization underline. Each token paints one
+        // classification band along the bottom edge of the lane band when
+        // the lane has `capacity:` and at least one item contributing load.
+        // See specs/rendering.md § Lane utilization underline.
+        utilizationOk: string; // green; load below `warn-at` (incl. zero)
+        utilizationWarn: string; // yellow; load in `[warn-at, over-at)`
+        utilizationOver: string; // red; load >= `over-at`
+    };
+    timeline: {
+        gridLine: string;
+        // Faint dotted line drawn at every tick boundary (not just majors)
+        // when the roadmap's resolved `minor-grid` style is `true`. A step
+        // lighter than `gridLine` so the major lines still dominate.
+        minorGridLine: string;
+        tickMark: string;
+        labelText: string;
+        // m2.5d: lifted from renderTimeline.
+        panelFill: string;
+        border: string;
+    };
+    // m2.5d: all renderer-side palette tokens previously inlined as
+    // `theme === 'dark' ? darkColor : lightColor` ternaries. Each new
+    // token reads from one of the existing theme objects so the
+    // renderer becomes pure data → SVG.
+    header: {
+        cardBorder: string;
+        author: string;
+    };
+    item: {
+        overflowX: string; // red X mark on overrun tail
+        linkIconFg: string; // generic link icon color
+        overflowTailFill: string;
+        overflowTailStroke: string;
+        overflowCaption: string; // "past <id>" caption color
+    };
+    parallel: {
+        bracketStroke: string;
+    };
+    anchorDiamond: {
+        fill: string;
+        stroke: string;
+        label: string;
+        cutLine: string;
+    };
+    milestoneDiamond: {
+        fill: string;
+        label: string;
+        cutLineNormal: string;
+        cutLineOverrun: string;
+        slack: string;
+    };
+    footnotePanel: {
+        fill: string;
+        border: string;
+        header: string;
+        title: string;
+        description: string;
+        number: string;
+    };
+    nowline: {
+        stroke: string;
+        labelText: string;
+        labelBg: string;
+    };
+    milestone: {
+        dashedInk: string; // used on floating/overrun slack arrows
+        overrun: string; // accent for overrun highlight
+    };
+    anchor: {
+        predecessorLine: string; // non-binding slack arrow color
+    };
+    dependency: {
+        edgeStroke: string;
+        overflowStroke: string;
+    };
+    footnote: {
+        indicatorText: string;
+        descriptionMuted: string;
+    };
+    includeRegion: {
+        border: string;
+        label: string;
+        badge: string;
+        // m2.5d: lifted from renderIncludeRegion.
+        fill: string;
+        tabFill: string;
+        tabStroke: string;
+        tabText: string;
+        badgeFill: string;
+        badgeStroke: string;
+        badgeText: string;
+    };
+    // m2.5d: lifted from renderEdge marker defs.
+    arrowhead: {
+        neutral: string;
+        light: string;
+        dark: string;
+    };
+    // Five built-in statuses plus neutral fallback for custom statuses.
+    status: {
+        done: string;
+        inProgress: string;
+        atRisk: string;
+        blocked: string;
+        planned: string;
+        neutral: string;
+    };
+    /**
+     * Upper-right status-dot colors. Two palettes — the renderer
+     * picks `onLight` for bars whose effective bg is light/pale and
+     * `onDark` for bars whose bg is dark/saturated. This lets the
+     * dot stay recognizably status-hued on the pale status-tint
+     * bars used by default AND on the saturated mid-tone bars that
+     * a label's `style:` ref can paint (e.g. `bg:blue` →
+     * `#1e88e5` in light theme, `#60a5fa` in dark theme). Both
+     * palettes appear in both themes — bar luminance is independent
+     * of overall theme, since a label can tint a bar bright or dark
+     * regardless of whether the chart background is light or dark.
+     */
+    statusDot: {
+        onLight: {
+            done: string;
+            inProgress: string;
+            atRisk: string;
+            blocked: string;
+            planned: string;
+            neutral: string;
+        };
+        onDark: {
+            done: string;
+            inProgress: string;
+            atRisk: string;
+            blocked: string;
+            planned: string;
+            neutral: string;
+        };
+    };
+    attribution: {
+        mark: string;
+        link: string;
+    };
+    diagnostic: {
+        overlayBg: string;
+        errorText: string;
+    };
+}
+
+// Named-color resolver. DSL allows a named color like `blue`, a hex, or
+// `none`. Themes own the mapping from named → hex (different per theme).
+export interface NamedColors {
+    red: string;
+    blue: string;
+    yellow: string;
+    green: string;
+    orange: string;
+    purple: string;
+    gray: string;
+    navy: string;
+    white: string;
+}