@forwardimpact/pathway 0.22.0 → 0.23.0

package/src/css/components/nav.css

@@ -1,206 +0,0 @@
-/**
- * Navigation Drawer
- *
- * Left-hand drawer with vertically stacked links, toggled by top bar button.
- * Open by default on desktop, overlays on mobile.
- */
-
-@layer components {
-  /* --------------------------------------------------------------------------
-   Drawer Panel
-   -------------------------------------------------------------------------- */
-  #app-drawer {
-    position: fixed;
-    top: var(--top-bar-height);
-    left: 0;
-    bottom: 0;
-    width: var(--drawer-width);
-    background: var(--color-surface);
-    border-right: 1px solid var(--color-border);
-    z-index: 100;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    transform: translateX(calc(-1 * var(--drawer-width)));
-    transition: transform 0.3s ease;
-  }
-
-  .drawer-open #app-drawer {
-    transform: translateX(0);
-  }
-
-  /* --------------------------------------------------------------------------
-   Drawer Header - brand area
-   -------------------------------------------------------------------------- */
-  .drawer-header {
-    padding: var(--space-lg) var(--space-md);
-    border-bottom: 1px solid var(--color-border);
-    flex-shrink: 0;
-  }
-
-  .nav-brand {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-xs);
-    text-decoration: none;
-    color: var(--color-text);
-  }
-
-  .brand-emoji {
-    font-size: 2.5rem;
-    line-height: 1;
-  }
-
-  .nav-brand:hover {
-    text-decoration: none;
-  }
-
-  .brand-title {
-    font-size: var(--font-size-lg);
-    font-weight: 700;
-    color: var(--color-text);
-  }
-
-  .nav-brand:hover .brand-title {
-    color: var(--color-primary);
-  }
-
-  .brand-tag {
-    display: inline-block;
-    font-size: var(--font-size-xs);
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    padding: 2px 8px;
-    border-radius: 9999px;
-    background: linear-gradient(135deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%);
-    background-size: 200% 200%;
-    color: white;
-    animation: gradient-shift 6s ease infinite;
-    opacity: 0.9;
-    transition:
-      opacity 0.2s,
-      transform 0.2s;
-    cursor: default;
-  }
-
-  .brand-tag:hover {
-    opacity: 1;
-    transform: scale(1.05);
-  }
-
-  @keyframes gradient-shift {
-    0%,
-    100% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-  }
-
-  /* --------------------------------------------------------------------------
-   Drawer Navigation - sections and links
-   -------------------------------------------------------------------------- */
-  .drawer-nav {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--space-sm) 0;
-  }
-
-  .drawer-section {
-    display: flex;
-    flex-direction: column;
-    padding: var(--space-sm) 0;
-  }
-
-  .drawer-section + .drawer-section {
-    border-top: 1px solid var(--color-border);
-  }
-
-  .drawer-section-label {
-    font-size: var(--font-size-xs);
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--color-text-light);
-    padding: var(--space-xs) var(--space-md);
-    margin-bottom: var(--space-xs);
-  }
-
-  .drawer-nav a {
-    display: block;
-    color: var(--color-text-muted);
-    font-weight: 500;
-    font-size: var(--font-size-sm);
-    padding: var(--space-xs) var(--space-md);
-    text-decoration: none;
-    transition: all 0.15s;
-    border-left: 3px solid transparent;
-  }
-
-  .drawer-nav a:hover {
-    color: var(--color-primary);
-    background: rgba(59, 130, 246, 0.06);
-    border-left-color: var(--color-primary-light);
-    text-decoration: none;
-  }
-
-  .drawer-nav a.active {
-    color: var(--color-primary);
-    background: rgba(59, 130, 246, 0.1);
-    border-left-color: var(--color-primary);
-    font-weight: 600;
-  }
-
-  /* CTA links in drawer */
-  .drawer-cta {
-    color: var(--color-primary) !important;
-    font-weight: 600 !important;
-  }
-
-  .drawer-cta:hover {
-    background: rgba(59, 130, 246, 0.1) !important;
-  }
-
-  /* --------------------------------------------------------------------------
-   App Body - content area that shifts with drawer
-   -------------------------------------------------------------------------- */
-  .app-body {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    transition: margin-left 0.3s ease;
-  }
-
-  .drawer-open .app-body {
-    margin-left: var(--drawer-width);
-  }
-
-  /* --------------------------------------------------------------------------
-   Drawer Overlay - backdrop on mobile when drawer is open
-   -------------------------------------------------------------------------- */
-  .drawer-overlay {
-    display: none;
-    position: fixed;
-    top: var(--top-bar-height);
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.3);
-    z-index: 90;
-  }
-
-  /* --------------------------------------------------------------------------
-   Mobile - overlay instead of push
-   -------------------------------------------------------------------------- */
-  @media (max-width: 768px) {
-    .drawer-open .app-body {
-      margin-left: 0;
-    }
-
-    .drawer-open .drawer-overlay {
-      display: block;
-    }
-  }
-}

package/src/css/components/progress.css

@@ -1,166 +0,0 @@
-/**
- * Progress Indicators
- *
- * Level dots, bars, and progress indicators - consolidated definition.
- */
-
-@layer components {
-  /* Level bar */
-  .level-bar {
-    display: flex;
-    gap: 6px;
-    align-items: center;
-  }
-
-  /* Level dot base */
-  .level-dot {
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background: rgba(226, 232, 240, 0.5);
-    border: 2px solid rgba(203, 213, 225, 0.8);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-  }
-
-  .level-dot:hover {
-    transform: scale(1.2);
-  }
-
-  .level-dot.filled {
-    background: var(--color-primary);
-  }
-
-  /* Level dot colors by level */
-  .level-dot.filled.level-1 {
-    background: linear-gradient(135deg, #fecaca, #fca5a5);
-    border-color: #f87171;
-    box-shadow:
-      0 2px 8px rgba(239, 68, 68, 0.4),
-      inset 0 1px 2px rgba(255, 255, 255, 0.5);
-  }
-
-  .level-dot.filled.level-2 {
-    background: linear-gradient(135deg, #fde68a, #fcd34d);
-    border-color: #fbbf24;
-    box-shadow:
-      0 2px 8px rgba(245, 158, 11, 0.4),
-      inset 0 1px 2px rgba(255, 255, 255, 0.5);
-  }
-
-  .level-dot.filled.level-3 {
-    background: linear-gradient(135deg, #bbf7d0, #86efac);
-    border-color: #34d399;
-    box-shadow:
-      0 2px 8px rgba(16, 185, 129, 0.4),
-      inset 0 1px 2px rgba(255, 255, 255, 0.5);
-  }
-
-  .level-dot.filled.level-4 {
-    background: linear-gradient(135deg, #a5f3fc, #67e8f9);
-    border-color: #22d3ee;
-    box-shadow:
-      0 2px 8px rgba(6, 182, 212, 0.4),
-      inset 0 1px 2px rgba(255, 255, 255, 0.5);
-  }
-
-  .level-dot.filled.level-5 {
-    background: linear-gradient(135deg, #c4b5fd, #a78bfa);
-    border-color: #a78bfa;
-    box-shadow:
-      0 2px 8px rgba(139, 92, 246, 0.4),
-      inset 0 1px 2px rgba(255, 255, 255, 0.5);
-  }
-
-  /* Level dots for compact display (no animation) */
-  .level-dots {
-    display: inline-flex;
-    gap: var(--space-xs);
-  }
-
-  .level-dots .level-dot {
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background: var(--color-border);
-  }
-
-  .level-dots .level-dot.filled {
-    background: var(--color-primary);
-  }
-
-  /* Level cell */
-  .level-cell {
-    position: relative;
-  }
-
-  .level-label {
-    display: block;
-    margin-top: 4px;
-    font-size: var(--font-size-xs);
-    font-weight: 500;
-    color: var(--color-text-muted);
-    transition: color 0.3s;
-  }
-
-  .level-cell:hover .level-label {
-    background: linear-gradient(135deg, #3b82f6, #9333ea);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  /* Progress bar */
-  .progress-bar {
-    height: 8px;
-    background: var(--color-border);
-    border-radius: var(--radius-sm);
-    overflow: hidden;
-  }
-
-  .progress-bar-fill {
-    height: 100%;
-    background: var(--color-primary);
-    border-radius: var(--radius-sm);
-    transition: width 0.3s;
-  }
-
-  /* Stats */
-  .stat-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: var(--space-md);
-  }
-
-  .stat-item {
-    background: var(--color-bg);
-    padding: var(--space-md);
-    border-radius: var(--radius-md);
-    text-align: center;
-  }
-
-  .stats {
-    display: flex;
-    gap: var(--space-lg);
-    margin-bottom: var(--space-xl);
-    flex-wrap: wrap;
-  }
-
-  .stat {
-    flex: 1;
-    min-width: 120px;
-    text-align: center;
-    padding: var(--space-md);
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: 1px solid var(--color-border);
-  }
-
-  .stat-value {
-    font-size: var(--font-size-3xl);
-    font-weight: 700;
-    color: var(--color-primary);
-    display: block;
-    margin-bottom: var(--space-xs);
-  }
-}

package/src/css/components/states.css

@@ -1,82 +0,0 @@
-/**
- * State Components
- *
- * Loading, error, and empty states.
- */
-
-@layer components {
-  /* Loading state */
-  .loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: var(--space-2xl);
-    color: var(--color-text-muted);
-  }
-
-  .loading-spinner {
-    width: 40px;
-    height: 40px;
-    border: 3px solid var(--color-border);
-    border-top-color: var(--color-primary);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-    margin-bottom: var(--space-md);
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  /* Error state */
-  .error-message {
-    background: #fef2f2;
-    border: 1px solid #fecaca;
-    border-radius: var(--radius-lg);
-    padding: var(--space-xl);
-    text-align: center;
-    color: var(--color-error);
-  }
-
-  /* Empty state */
-  .empty-state {
-    text-align: center;
-    padding: var(--space-2xl);
-    color: var(--color-text-muted);
-  }
-
-  .empty-state-icon {
-    font-size: 3rem;
-    margin-bottom: var(--space-md);
-    opacity: 0.5;
-  }
-
-  .empty-state-title {
-    font-size: var(--font-size-lg);
-    font-weight: 600;
-    margin-bottom: var(--space-sm);
-    color: var(--color-text);
-  }
-
-  .empty-state-message {
-    margin: 0;
-  }
-
-  /* Not found state */
-  .not-found {
-    text-align: center;
-    padding: var(--space-2xl);
-  }
-
-  .not-found h1 {
-    font-size: var(--font-size-3xl);
-    color: var(--color-text-muted);
-  }
-
-  .not-found-actions {
-    margin-top: var(--space-xl);
-  }
-}