@forwardimpact/pathway 0.22.0 → 0.23.0

package/src/css/components/top-bar.css

@@ -1,180 +0,0 @@
-/**
- * Top Bar
- *
- * Fixed bar across the top of the viewport with sidebar toggle and
- * CLI command display. Inspired by Safari's URL bar + sidebar layout.
- */
-
-@layer components {
-  /* --------------------------------------------------------------------------
-   Bar container - fixed across top
-   -------------------------------------------------------------------------- */
-  .top-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--top-bar-height);
-    z-index: 200;
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-    padding: 0 var(--space-sm);
-    background: var(--color-surface);
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  /* --------------------------------------------------------------------------
-   Sidebar toggle button
-   -------------------------------------------------------------------------- */
-  .top-bar__toggle {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    border: none;
-    border-radius: var(--radius-md);
-    background: transparent;
-    color: var(--color-text-muted);
-    cursor: pointer;
-    transition:
-      background 0.15s,
-      color 0.15s;
-  }
-
-  .top-bar__toggle:hover {
-    background: var(--color-bg-secondary);
-    color: var(--color-text);
-  }
-
-  .top-bar__toggle:active {
-    background: var(--color-border);
-  }
-
-  /* Sidebar icon: simple sidebar SVG */
-  .top-bar__toggle svg {
-    width: 18px;
-    height: 18px;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  /* Highlight toggle when drawer is open */
-  .drawer-open .top-bar__toggle {
-    color: var(--color-primary);
-    background: rgba(59, 130, 246, 0.08);
-  }
-
-  /* --------------------------------------------------------------------------
-   Command bar (mimics Safari-style URL bar)
-   -------------------------------------------------------------------------- */
-  .top-bar__command {
-    width: 100%;
-    max-width: 800px;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    height: 36px;
-    padding: 0 var(--space-sm) 0 var(--space-md);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    transition:
-      border-color 0.15s,
-      box-shadow 0.15s;
-    gap: var(--space-xs);
-  }
-
-  .top-bar__command:hover {
-    border-color: var(--color-text-light);
-  }
-
-  .top-bar__command:focus-within {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
-  }
-
-  /* Terminal prompt icon */
-  .top-bar__prompt {
-    flex-shrink: 0;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-light);
-    user-select: none;
-  }
-
-  /* CLI command text */
-  .top-bar__command-text {
-    flex: 1;
-    min-width: 0;
-    font-family: var(--font-family-mono);
-    font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    user-select: all;
-    line-height: 36px;
-  }
-
-  /* Copy button inside the command bar */
-  .top-bar__copy {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: none;
-    border-radius: var(--radius-sm);
-    background: transparent;
-    color: var(--color-text-light);
-    cursor: pointer;
-    transition:
-      background 0.15s,
-      color 0.15s;
-  }
-
-  .top-bar__copy:hover {
-    background: var(--color-border);
-    color: var(--color-text);
-  }
-
-  .top-bar__copy svg {
-    width: 14px;
-    height: 14px;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  /* Copied state */
-  .top-bar__copy.copied {
-    color: var(--color-success);
-  }
-
-  .top-bar__copy.copied svg {
-    /* Swap from copy icon to checkmark via CSS — JS swaps the class */
-  }
-
-  /* --------------------------------------------------------------------------
-   Layout adjustments - push content below the top bar
-   -------------------------------------------------------------------------- */
-  .app-body {
-    padding-top: var(--top-bar-height);
-  }
-
-  /* --------------------------------------------------------------------------
-   Mobile tweaks
-   -------------------------------------------------------------------------- */
-  @media (max-width: 768px) {
-    .top-bar__prompt {
-      display: none;
-    }
-  }
-}

package/src/css/components/typography.css

@@ -1,121 +0,0 @@
-/**
- * Typography Utilities
- *
- * Text styles, labels, and typography utilities.
- */
-
-@layer components {
-  /* Labels - small uppercase text (consolidated definition) */
-  .label,
-  .detail-item-label,
-  .stat-label,
-  .expectation-label,
-  .filter-title {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-  }
-
-  .label-xs {
-    font-size: var(--font-size-xs);
-  }
-
-  /* Match score label uses smaller font */
-  .score-label {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-muted);
-    text-transform: uppercase;
-  }
-
-  /* Labels with bottom margin */
-  .detail-item-label,
-  .expectation-label {
-    margin-bottom: var(--space-xs);
-  }
-
-  /* Filter title has bold weight and wider letter-spacing */
-  .filter-title {
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    letter-spacing: 0.05em;
-  }
-
-  /* Text colors */
-  .text-muted {
-    color: var(--color-text-muted);
-  }
-
-  .text-light {
-    color: var(--color-text-light);
-  }
-
-  .text-primary {
-    color: var(--color-primary);
-  }
-
-  .text-success {
-    color: var(--color-success);
-  }
-
-  .text-warning {
-    color: var(--color-warning);
-  }
-
-  .text-error {
-    color: var(--color-error);
-  }
-
-  /* Text alignment */
-  .text-center {
-    text-align: center;
-  }
-
-  .text-right {
-    text-align: right;
-  }
-
-  /* Font sizes */
-  .text-xs {
-    font-size: var(--font-size-xs);
-  }
-
-  .text-sm {
-    font-size: var(--font-size-sm);
-  }
-
-  .text-lg {
-    font-size: var(--font-size-lg);
-  }
-
-  .text-xl {
-    font-size: var(--font-size-xl);
-  }
-
-  .text-2xl {
-    font-size: var(--font-size-2xl);
-  }
-
-  /* Font weight */
-  .font-medium {
-    font-weight: 500;
-  }
-
-  .font-semibold {
-    font-weight: 600;
-  }
-
-  .font-bold {
-    font-weight: 700;
-  }
-
-  /* Code inline */
-  .code-inline {
-    font-family: var(--font-family-mono);
-    font-size: 0.9em;
-    background: var(--color-bg);
-    padding: 0.1em 0.4em;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--color-border);
-  }
-}

package/src/css/components/utilities.css

@@ -1,41 +0,0 @@
-/**
- * Utility Classes
- *
- * Spacing utilities and helper classes.
- */
-
-@layer utilities {
-  /* Margin top */
-  .mt-sm {
-    margin-top: var(--space-sm);
-  }
-
-  .mt-md {
-    margin-top: var(--space-md);
-  }
-
-  .mt-lg {
-    margin-top: var(--space-lg);
-  }
-
-  .mt-xl {
-    margin-top: var(--space-xl);
-  }
-
-  /* Margin bottom */
-  .mb-sm {
-    margin-bottom: var(--space-sm);
-  }
-
-  .mb-md {
-    margin-bottom: var(--space-md);
-  }
-
-  .mb-lg {
-    margin-bottom: var(--space-lg);
-  }
-
-  .mb-xl {
-    margin-bottom: var(--space-xl);
-  }
-}

package/src/css/pages/detail.css

@@ -1,119 +0,0 @@
-/**
- * Detail Page Styles
- *
- * Shared styles for entity detail pages.
- */
-
-@layer pages {
-  /* Expectation items */
-  .expectation-item {
-    background: var(--color-bg);
-    padding: var(--space-md);
-    border-radius: var(--radius-md);
-    border-left: 4px solid var(--color-primary);
-  }
-
-  .expectation-value {
-    font-weight: 500;
-  }
-
-  /* Question groups */
-  .question-group {
-    margin-bottom: var(--space-lg);
-    padding: var(--space-md);
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: 1px solid var(--color-border);
-  }
-
-  .question-group-title {
-    font-weight: 600;
-    margin-bottom: var(--space-sm);
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-  }
-
-  .question-list {
-    margin-top: var(--space-md);
-  }
-
-  .question-text {
-    padding: var(--space-sm) 0;
-    color: var(--color-text-secondary);
-    margin: 0;
-  }
-
-  /* Links list */
-  .links-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-sm);
-  }
-
-  .links-list a {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-xs);
-  }
-
-  /* Tools table (for skill detail page) */
-  .tools-table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    margin-top: var(--space-md);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    background: var(--color-surface);
-  }
-
-  /*
-   * Table cells: 60px row height = 16px padding-top + 28px content + 16px padding-bottom
-   * Matches list-item height for visual consistency
-   */
-  .tools-table th,
-  .tools-table td {
-    padding: var(--space-md) var(--space-lg);
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-    height: 60px;
-  }
-
-  .tools-table th {
-    font-weight: 600;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-    background: var(--color-bg);
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-  }
-
-  .tools-table th:first-child {
-    width: 260px;
-    white-space: nowrap;
-  }
-
-  .tools-table td:first-child {
-    white-space: nowrap;
-  }
-
-  .tools-table tbody tr:last-child td {
-    border-bottom: none;
-  }
-
-  .tools-table tbody tr:hover {
-    background: var(--color-bg);
-  }
-
-  /* See all link */
-  .see-all-link {
-    margin-top: var(--space-md);
-  }
-
-  .see-all-link a {
-    color: var(--color-primary);
-    font-size: var(--font-size-sm);
-  }
-}

package/src/css/reset.css

@@ -1,50 +0,0 @@
-/**
- * CSS Reset
- *
- * Browser normalization and box-sizing reset.
- * This layer provides a consistent baseline across browsers.
- */
-
-@layer reset {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  html {
-    font-size: 16px;
-    scroll-behavior: smooth;
-  }
-
-  body {
-    margin: 0;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0;
-    line-height: 1;
-    font-weight: 600;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  ul,
-  ol {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-}

package/src/css/tokens.css

@@ -1,162 +0,0 @@
-/**
- * Design Tokens
- *
- * Single source of truth for colors, spacing, typography, and other
- * design decisions.
- */
-
-@layer tokens {
-  :root {
-    /* --------------------------------------------------------------------------
-     Colors - Primary
-     -------------------------------------------------------------------------- */
-    --color-primary: #3b82f6;
-    --color-primary-dark: #2563eb;
-    --color-primary-light: #93c5fd;
-
-    /* --------------------------------------------------------------------------
-     Colors - Skill Types
-     -------------------------------------------------------------------------- */
-    --color-primary-skill: #ef4444;
-    --color-primary-skill-light: #fecaca;
-    --color-secondary: #f59e0b;
-    --color-secondary-light: #fde68a;
-    --color-broad: #10b981;
-    --color-broad-light: #a7f3d0;
-
-    /* --------------------------------------------------------------------------
-     Colors - Skill Levels (1-5)
-     -------------------------------------------------------------------------- */
-    --color-level-1: #fecaca;
-    --color-level-2: #fde68a;
-    --color-level-3: #bbf7d0;
-    --color-level-4: #a5f3fc;
-    --color-level-5: #c4b5fd;
-
-    /* --------------------------------------------------------------------------
-     Colors - Behaviour Maturities (1-5)
-     -------------------------------------------------------------------------- */
-    --color-maturity-1: #fecaca;
-    --color-maturity-2: #fde68a;
-    --color-maturity-3: #bbf7d0;
-    --color-maturity-4: #a5f3fc;
-    --color-maturity-5: #c4b5fd;
-
-    /* --------------------------------------------------------------------------
-     Colors - Capabilities (text) - matches data/capabilities/*.yaml IDs
-     -------------------------------------------------------------------------- */
-    --color-cap-ai: #7c3aed; /* violet */
-    --color-cap-business: #b45309; /* amber */
-    --color-cap-data: #0f766e; /* teal */
-    --color-cap-delivery: #dc2626; /* red */
-    --color-cap-documentation: #15803d; /* green */
-    --color-cap-ml: #9333ea; /* purple */
-    --color-cap-people: #be185d; /* pink */
-    --color-cap-process: #c2410c; /* orange */
-    --color-cap-product: #4f46e5; /* indigo */
-    --color-cap-reliability: #0891b2; /* cyan */
-    --color-cap-scale: #1d4ed8; /* blue */
-
-    /* --------------------------------------------------------------------------
-     Colors - Capabilities (backgrounds)
-     -------------------------------------------------------------------------- */
-    --color-cap-ai-light: #ede9fe; /* violet */
-    --color-cap-business-light: #fef3c7; /* amber */
-    --color-cap-data-light: #ccfbf1; /* teal */
-    --color-cap-delivery-light: #fecaca; /* red */
-    --color-cap-documentation-light: #dcfce7; /* green */
-    --color-cap-ml-light: #f3e8ff; /* purple */
-    --color-cap-people-light: #fce7f3; /* pink */
-    --color-cap-process-light: #ffedd5; /* orange */
-    --color-cap-product-light: #e0e7ff; /* indigo */
-    --color-cap-reliability-light: #cffafe; /* cyan */
-    --color-cap-scale-light: #dbeafe; /* blue */
-
-    /* --------------------------------------------------------------------------
-     Colors - Neutrals
-     -------------------------------------------------------------------------- */
-    --color-bg: #f8fafc;
-    --color-bg-secondary: #f1f5f9;
-    --color-surface: #ffffff;
-    --color-border: #e2e8f0;
-    --color-text: #1e293b;
-    --color-text-muted: #64748b;
-    --color-text-secondary: #475569;
-    --color-text-light: #94a3b8;
-
-    /* --------------------------------------------------------------------------
-     Colors - Status
-     -------------------------------------------------------------------------- */
-    --color-success: #10b981;
-    --color-warning: #f59e0b;
-    --color-error: #ef4444;
-    --color-info: #3b82f6;
-
-    /* --------------------------------------------------------------------------
-     Colors - Graph Nodes (entity types)
-     -------------------------------------------------------------------------- */
-    --color-node-driver: #4caf50;
-    --color-node-skill: #2196f3;
-    --color-node-behaviour: #9c27b0;
-    --color-node-discipline: #ff9800;
-    --color-node-track: #00bcd4;
-
-    /* --------------------------------------------------------------------------
-     Spacing
-     -------------------------------------------------------------------------- */
-    --space-xs: 0.25rem;
-    --space-sm: 0.5rem;
-    --space-md: 1rem;
-    --space-lg: 1.5rem;
-    --space-xl: 2rem;
-    --space-2xl: 3rem;
-
-    /* --------------------------------------------------------------------------
-     Border Radius
-     -------------------------------------------------------------------------- */
-    --radius-sm: 0.25rem;
-    --radius-md: 0.5rem;
-    --radius-lg: 0.75rem;
-    --radius-xl: 1rem;
-
-    /* --------------------------------------------------------------------------
-     Shadows
-     -------------------------------------------------------------------------- */
-    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-md:
-      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --shadow-lg:
-      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-
-    /* --------------------------------------------------------------------------
-     Typography
-     -------------------------------------------------------------------------- */
-    --font-family:
-      system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      sans-serif;
-    --font-family-mono:
-      "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
-      Consolas, monospace;
-    --font-size-xs: 0.75rem;
-    --font-size-sm: 0.875rem;
-    --font-size-base: 1rem;
-    --font-size-lg: 1.125rem;
-    --font-size-xl: 1.25rem;
-    --font-size-2xl: 1.5rem;
-    --font-size-3xl: 2rem;
-
-    /* --------------------------------------------------------------------------
-     Layout
-     -------------------------------------------------------------------------- */
-    --max-width: 1400px;
-    --drawer-width: 240px;
-    --top-bar-height: 48px;
-
-    /*
-   * Responsive breakpoints (used in @media queries):
-   * - 1280px: Tablet/laptop - layout stacking
-   * - 768px: Mobile - drawer overlays instead of pushing content
-   * - 640px: Mobile - full-width buttons, simplified layouts
-   */
-  }
-}

package/src/css/views/handout.css

@@ -1,30 +0,0 @@
-/**
- * Handout View Styles
- *
- * Handout-specific styles that override slide view.
- */
-
-@layer handout {
-  .handout-view {
-    padding: var(--space-lg);
-  }
-
-  .handout-view .detail-page {
-    margin-bottom: var(--space-xl);
-    padding-bottom: var(--space-xl);
-    border-bottom: 3px solid var(--color-border);
-  }
-
-  .handout-view .detail-page:last-child {
-    border-bottom: none;
-    margin-bottom: 0;
-    padding-bottom: 0;
-  }
-
-  .handout-section-title {
-    font-size: var(--font-size-xl);
-    margin-bottom: var(--space-lg);
-    padding-bottom: var(--space-sm);
-    border-bottom: 2px solid var(--color-primary);
-  }
-}