@nowline/layout 0.2.0

package/src/themes/dark.ts

@@ -0,0 +1,244 @@
+import type { EntityStyle, NamedColors, Theme } from './shape.js';
+
+// Named-color mapping for dark theme. Tailwind's slate-on-near-black tints.
+export const darkNamed: NamedColors = {
+    red: '#f87171',
+    blue: '#60a5fa',
+    yellow: '#facc15',
+    green: '#34d399',
+    orange: '#fb923c',
+    purple: '#a78bfa',
+    gray: '#94a3b8',
+    navy: '#818cf8',
+    white: '#e2e8f0',
+};
+
+const baseEntity: EntityStyle = {
+    bg: 'none',
+    fg: '#e2e8f0',
+    text: '#e2e8f0',
+    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 darkTheme: Theme = {
+    name: 'dark',
+    surface: {
+        page: '#0b1220',
+        chart: '#111827',
+        headerBox: '#1e293b',
+    },
+    entities: {
+        roadmap: {
+            ...baseEntity,
+            headerHeight: 'md',
+            padding: 'md',
+        },
+        swimlane: {
+            ...baseEntity,
+            fg: '#e2e8f0',
+            text: '#e2e8f0',
+            padding: 'sm',
+            spacing: 'none',
+            textSize: 'sm',
+        },
+        item: {
+            ...baseEntity,
+            // Status-aware tint applied during layout when bg stays #0f172a.
+            bg: '#0f172a',
+            fg: '#94a3b8',
+            text: '#e2e8f0',
+            shadow: 'subtle',
+            cornerRadius: 'sm',
+        },
+        parallel: {
+            ...baseEntity,
+            bracket: 'none',
+            padding: 'xs',
+        },
+        group: {
+            ...baseEntity,
+            bracket: 'solid',
+            padding: 'xs',
+            fg: '#94a3b8',
+        },
+        anchor: {
+            ...baseEntity,
+            bg: '#0b1220',
+            fg: '#cbd5e1',
+            text: '#cbd5e1',
+            cornerRadius: 'sm',
+        },
+        milestone: {
+            ...baseEntity,
+            bg: '#e2e8f0',
+            fg: '#e2e8f0',
+            text: '#0b1220',
+            border: 'solid',
+        },
+        footnote: {
+            ...baseEntity,
+            bg: 'none',
+            fg: '#94a3b8',
+            text: '#e2e8f0',
+            textSize: 'sm',
+        },
+        label: {
+            ...baseEntity,
+            bg: '#1e293b',
+            fg: '#94a3b8',
+            text: '#e2e8f0',
+            textSize: 'xs',
+            padding: 'xs',
+            cornerRadius: 'full',
+        },
+    },
+    swimlane: {
+        bandEven: '#111827',
+        bandOdd: '#0f172a',
+        separator: '#1f2937',
+        frameTabText: '#e2e8f0',
+        frameTabMuted: '#94a3b8',
+        border: '#334155',
+        tabFill: '#1e293b',
+        tabStroke: '#475569',
+        tabText: '#e2e8f0',
+        ownerText: '#94a3b8',
+        footnoteIndicator: '#f87171',
+        rowTintEven: '#0f172a',
+        rowTintOdd: '#1e293b',
+        utilizationOk: '#34d399',
+        utilizationWarn: '#fbbf24',
+        utilizationOver: '#f87171',
+    },
+    timeline: {
+        gridLine: '#475569',
+        minorGridLine: '#334155',
+        tickMark: '#334155',
+        labelText: '#cbd5e1',
+        panelFill: '#0f172a',
+        border: '#334155',
+    },
+    header: {
+        cardBorder: '#475569',
+        author: '#94a3b8',
+    },
+    item: {
+        overflowX: '#f87171',
+        linkIconFg: '#94a3b8',
+        overflowTailFill: '#7f1d1d',
+        overflowTailStroke: '#f87171',
+        overflowCaption: '#fecaca',
+    },
+    parallel: {
+        bracketStroke: '#cbd5e1',
+    },
+    anchorDiamond: {
+        fill: '#0f172a',
+        stroke: '#cbd5e1',
+        label: '#cbd5e1',
+        cutLine: '#94a3b8',
+    },
+    milestoneDiamond: {
+        fill: '#e2e8f0',
+        label: '#e2e8f0',
+        cutLineNormal: '#a5b4fc',
+        cutLineOverrun: '#ef4444',
+        slack: '#cbd5e1',
+    },
+    footnotePanel: {
+        fill: '#0f172a',
+        border: '#334155',
+        header: '#e2e8f0',
+        title: '#e2e8f0',
+        description: '#94a3b8',
+        number: '#f87171',
+    },
+    nowline: {
+        stroke: '#f87171',
+        labelText: '#0b1220',
+        labelBg: '#f87171',
+    },
+    milestone: {
+        dashedInk: '#a5b4fc',
+        overrun: '#ef4444',
+    },
+    anchor: {
+        predecessorLine: '#94a3b8',
+    },
+    dependency: {
+        edgeStroke: '#cbd5e1',
+        overflowStroke: '#ef5350',
+    },
+    footnote: {
+        indicatorText: '#f87171',
+        descriptionMuted: '#94a3b8',
+    },
+    includeRegion: {
+        border: '#475569',
+        label: '#cbd5e1',
+        badge: '#94a3b8',
+        fill: '#0b1220',
+        tabFill: '#111827',
+        tabStroke: '#475569',
+        tabText: '#e2e8f0',
+        badgeFill: '#1e293b',
+        badgeStroke: '#475569',
+        badgeText: '#94a3b8',
+    },
+    arrowhead: {
+        neutral: '#94a3b8',
+        light: '#64748b',
+        dark: '#e2e8f0',
+    },
+    status: {
+        done: '#34d399',
+        inProgress: '#60a5fa',
+        atRisk: '#facc15',
+        blocked: '#ef4444',
+        planned: '#94a3b8',
+        neutral: '#94a3b8',
+    },
+    // Status-dot palettes — see `light.ts` for the contract. Same
+    // two palettes both themes; dark-theme bars come in BOTH dark
+    // (status-tint) and bright (label-driven) flavors, so a single
+    // palette can never satisfy both. The renderer picks per-bar
+    // based on the bar bg's relative luminance.
+    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: '#cbd5e1',
+        link: '#f87171',
+    },
+    diagnostic: {
+        overlayBg: '#7f1d1d',
+        errorText: '#fecaca',
+    },
+};

package/src/themes/index.ts

@@ -0,0 +1,36 @@
+export { darkNamed, darkTheme } from './dark.js';
+export { lightNamed, lightTheme } from './light.js';
+export type { EntityStyle, NamedColors, Theme } from './shape.js';
+
+import { darkNamed, darkTheme } from './dark.js';
+import { lightNamed, lightTheme } from './light.js';
+import type { NamedColors, Theme } from './shape.js';
+
+export type ThemeName = 'light' | 'dark';
+
+export const themes: { light: Theme; dark: Theme } = {
+    light: lightTheme,
+    dark: darkTheme,
+};
+
+export const namedColors: { light: NamedColors; dark: NamedColors } = {
+    light: lightNamed,
+    dark: darkNamed,
+};
+
+// Aliases collapse internationally-friendlier spellings onto the canonical
+// keys before lookup so themes only need to define each color once.
+const COLOR_ALIASES: Record<string, string> = {
+    grey: 'gray',
+    violet: 'purple',
+};
+
+// Resolve a DSL color token (`blue`, `#ff00aa`, or `none`) against a theme.
+export function resolveColor(token: string, theme: Theme): string {
+    if (token === 'none') return 'none';
+    if (token.startsWith('#')) return token;
+    const named = theme.name === 'dark' ? darkNamed : lightNamed;
+    const canonical = COLOR_ALIASES[token] ?? token;
+    const hit = (named as unknown as Record<string, string>)[canonical];
+    return typeof hit === 'string' ? hit : token;
+}

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',
+    },
+};