@nowline/layout 0.0.0-dev.20260601071750.g04bdff9

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/grayscale.ts

@@ -0,0 +1,240 @@
+import type { EntityStyle, NamedColors, Theme } from './shape.js';
+
+// Named-color mapping for grayscale theme. Each named color maps to a
+// distinct grey by lightness so `bg:blue` etc. remain differentiable
+// in black-and-white print without relying on automatic colour conversion.
+export const grayscaleNamed: NamedColors = {
+    red: '#4a4a4a',
+    blue: '#6b6b6b',
+    green: '#8a8a8a',
+    yellow: '#c8c8c8',
+    orange: '#5c5c5c',
+    purple: '#3a3a3a',
+    gray: '#9e9e9e',
+    navy: '#2a2a2a',
+    white: '#ffffff',
+};
+
+const baseEntity: EntityStyle = {
+    bg: 'none',
+    fg: '#1a1a1a',
+    text: '#1a1a1a',
+    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 grayscaleTheme: Theme = {
+    name: 'grayscale',
+    surface: {
+        page: '#f5f5f5',
+        chart: '#ffffff',
+        headerBox: '#ffffff',
+    },
+    entities: {
+        roadmap: {
+            ...baseEntity,
+            headerHeight: 'md',
+            padding: 'md',
+        },
+        swimlane: {
+            ...baseEntity,
+            fg: '#3a3a3a',
+            text: '#3a3a3a',
+            padding: 'sm',
+            spacing: 'none',
+            textSize: 'sm',
+        },
+        item: {
+            ...baseEntity,
+            bg: '#ffffff',
+            fg: '#9e9e9e',
+            text: '#1a1a1a',
+            shadow: 'subtle',
+            cornerRadius: 'sm',
+        },
+        parallel: {
+            ...baseEntity,
+            bracket: 'none',
+            padding: 'xs',
+        },
+        group: {
+            ...baseEntity,
+            bracket: 'solid',
+            padding: 'xs',
+            fg: '#595959',
+        },
+        anchor: {
+            ...baseEntity,
+            bg: '#1a1a1a',
+            fg: '#1a1a1a',
+            text: '#1a1a1a',
+            cornerRadius: 'sm',
+        },
+        milestone: {
+            ...baseEntity,
+            bg: '#2a2a2a',
+            fg: '#2a2a2a',
+            text: '#ffffff',
+            border: 'solid',
+        },
+        footnote: {
+            ...baseEntity,
+            bg: 'none',
+            fg: '#595959',
+            text: '#595959',
+            textSize: 'sm',
+        },
+        label: {
+            ...baseEntity,
+            bg: '#e8e8e8',
+            fg: '#595959',
+            text: '#595959',
+            textSize: 'xs',
+            padding: 'xs',
+            cornerRadius: 'full',
+        },
+    },
+    swimlane: {
+        bandEven: '#ffffff',
+        bandOdd: '#f5f5f5',
+        separator: '#d4d4d4',
+        frameTabText: '#3a3a3a',
+        frameTabMuted: '#737373',
+        border: '#d4d4d4',
+        tabFill: '#e8e8e8',
+        tabStroke: '#bdbdbd',
+        tabText: '#3a3a3a',
+        ownerText: '#737373',
+        footnoteIndicator: '#4a4a4a',
+        rowTintEven: '#ffffff',
+        rowTintOdd: '#f5f5f5',
+        utilizationOk: '#8a8a8a',
+        utilizationWarn: '#595959',
+        utilizationOver: '#1a1a1a',
+    },
+    timeline: {
+        gridLine: '#bdbdbd',
+        minorGridLine: '#d4d4d4',
+        tickMark: '#bdbdbd',
+        labelText: '#737373',
+        panelFill: '#ffffff',
+        border: '#d4d4d4',
+    },
+    header: {
+        cardBorder: '#d4d4d4',
+        author: '#737373',
+    },
+    item: {
+        overflowX: '#1a1a1a',
+        linkIconFg: '#1a1a1a',
+        overflowTailFill: '#e8e8e8',
+        overflowTailStroke: '#4a4a4a',
+        overflowCaption: '#3a3a3a',
+    },
+    parallel: {
+        bracketStroke: '#3a3a3a',
+    },
+    anchorDiamond: {
+        fill: '#ffffff',
+        stroke: '#3a3a3a',
+        label: '#3a3a3a',
+        cutLine: '#737373',
+    },
+    milestoneDiamond: {
+        fill: '#1a1a1a',
+        label: '#1a1a1a',
+        cutLineNormal: '#2a2a2a',
+        cutLineOverrun: '#4a4a4a',
+        slack: '#1a1a1a',
+    },
+    footnotePanel: {
+        fill: '#ffffff',
+        border: '#d4d4d4',
+        header: '#1a1a1a',
+        title: '#1a1a1a',
+        description: '#737373',
+        number: '#4a4a4a',
+    },
+    nowline: {
+        stroke: '#1a1a1a',
+        labelText: '#ffffff',
+        labelBg: '#1a1a1a',
+    },
+    milestone: {
+        dashedInk: '#9e9e9e',
+        overrun: '#4a4a4a',
+    },
+    anchor: {
+        predecessorLine: '#9e9e9e',
+    },
+    dependency: {
+        edgeStroke: '#595959',
+        overflowStroke: '#1a1a1a',
+    },
+    footnote: {
+        indicatorText: '#4a4a4a',
+        descriptionMuted: '#737373',
+    },
+    includeRegion: {
+        border: '#9e9e9e',
+        label: '#3a3a3a',
+        badge: '#737373',
+        fill: '#f5f5f5',
+        tabFill: '#ffffff',
+        tabStroke: '#bdbdbd',
+        tabText: '#1a1a1a',
+        badgeFill: '#e8e8e8',
+        badgeStroke: '#bdbdbd',
+        badgeText: '#595959',
+    },
+    arrowhead: {
+        neutral: '#595959',
+        light: '#9e9e9e',
+        dark: '#1a1a1a',
+    },
+    status: {
+        done: '#8a8a8a',
+        inProgress: '#595959',
+        atRisk: '#737373',
+        blocked: '#3a3a3a',
+        planned: '#bdbdbd',
+        neutral: '#bdbdbd',
+    },
+    statusDot: {
+        onLight: {
+            done: '#3a3a3a',
+            inProgress: '#2a2a2a',
+            atRisk: '#4a4a4a',
+            blocked: '#1a1a1a',
+            planned: '#595959',
+            neutral: '#595959',
+        },
+        onDark: {
+            done: '#d4d4d4',
+            inProgress: '#e8e8e8',
+            atRisk: '#c8c8c8',
+            blocked: '#f0f0f0',
+            planned: '#d4d4d4',
+            neutral: '#d4d4d4',
+        },
+    },
+    attribution: {
+        mark: '#9e9e9e',
+        link: '#1a1a1a',
+    },
+    diagnostic: {
+        overlayBg: '#e8e8e8',
+        errorText: '#1a1a1a',
+    },
+};

package/src/themes/index.ts

@@ -0,0 +1,66 @@
+export { darkNamed, darkTheme } from './dark.js';
+export { grayscaleNamed, grayscaleTheme } from './grayscale.js';
+export { lightNamed, lightTheme } from './light.js';
+export type { EntityStyle, NamedColors, Theme } from './shape.js';
+
+import { darkNamed, darkTheme } from './dark.js';
+import { grayscaleNamed, grayscaleTheme } from './grayscale.js';
+import { lightNamed, lightTheme } from './light.js';
+import type { NamedColors, Theme } from './shape.js';
+
+export type ThemeName = 'light' | 'dark' | 'grayscale';
+
+export const themes: { light: Theme; dark: Theme; grayscale: Theme } = {
+    light: lightTheme,
+    dark: darkTheme,
+    grayscale: grayscaleTheme,
+};
+
+export const namedColors: { light: NamedColors; dark: NamedColors; grayscale: NamedColors } = {
+    light: lightNamed,
+    dark: darkNamed,
+    grayscale: grayscaleNamed,
+};
+
+// Theme-name aliases mirror the COLOR_ALIASES policy below: the US spelling
+// `grayscale` is canonical (matching the `gray` color token), and the UK
+// `greyscale` is accepted as input. Every surface that turns user-typed text
+// into a ThemeName (CLI `--theme`, embed config) runs it through this so the
+// canonical token stays single while both spellings resolve.
+const THEME_ALIASES: Record<string, ThemeName> = {
+    greyscale: 'grayscale',
+};
+
+// Normalize a user-supplied theme token to its canonical ThemeName, or
+// `undefined` when it is not a recognized theme (callers decide how to
+// report the error). Lowercases first so `Grayscale` / `GREYSCALE` resolve.
+export function normalizeThemeName(raw: string): ThemeName | undefined {
+    const lower = raw.toLowerCase();
+    const canonical = THEME_ALIASES[lower] ?? lower;
+    if (canonical === 'light' || canonical === 'dark' || canonical === 'grayscale') {
+        return canonical;
+    }
+    return undefined;
+}
+
+// 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
+            : theme.name === 'grayscale'
+              ? grayscaleNamed
+              : lightNamed;
+    const canonical = COLOR_ALIASES[token] ?? token;
+    const hit = (named as unknown as Record<string, string>)[canonical];
+    return typeof hit === 'string' ? hit : token;
+}