@forwardimpact/pathway 0.21.0 → 0.23.0

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);
-  }
-}

package/src/css/components/surfaces.css

@@ -1,347 +0,0 @@
-/**
- * Surface Components
- *
- * Cards, sections, and surface styles.
- */
-
-@layer components {
-  /* Cards */
-  .card {
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-md);
-    padding: var(--space-lg);
-    transition:
-      box-shadow 0.2s,
-      transform 0.2s;
-  }
-
-  .card:hover {
-    box-shadow: var(--shadow-lg);
-  }
-
-  .card-clickable {
-    cursor: pointer;
-  }
-
-  .card-clickable:hover {
-    transform: translateY(-2px);
-  }
-
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: var(--space-md);
-  }
-
-  .card-title {
-    margin: 0;
-    font-size: var(--font-size-lg);
-  }
-
-  .card-title-with-icon {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-  }
-
-  .card-title-with-icon .card-title {
-    margin: 0;
-  }
-
-  /* Tool icons */
-  .tool-icon {
-    width: 28px;
-    height: 28px;
-    flex-shrink: 0;
-  }
-
-  /* Tool name cell with icon */
-  .tool-name-cell {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-  }
-
-  .card-description {
-    color: var(--color-text-muted);
-    margin: 0;
-    font-size: var(--font-size-sm);
-  }
-
-  .card-meta {
-    display: flex;
-    gap: var(--space-sm);
-    flex-wrap: wrap;
-    margin-top: var(--space-md);
-  }
-
-  /* Tool skills list (inside cards) */
-  .tool-skills-list {
-    list-style: none;
-    padding: 0;
-    margin: var(--space-sm) 0 0 0;
-    font-size: var(--font-size-sm);
-  }
-
-  .tool-skills-list li {
-    padding: var(--space-xs) 0;
-  }
-
-  .tool-skills-list a {
-    color: var(--color-text-secondary);
-    text-decoration: none;
-  }
-
-  .tool-skills-list a:hover {
-    color: var(--color-primary);
-    text-decoration: underline;
-  }
-
-  /* Stat cards */
-  .stat-card {
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-    padding: var(--space-lg);
-    text-align: center;
-    box-shadow: var(--shadow-md);
-    transition:
-      transform 0.2s,
-      box-shadow 0.2s;
-  }
-
-  .stat-card:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-  }
-
-  /* Surface utilities */
-  .surface {
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-  }
-
-  .surface-elevated {
-    box-shadow: var(--shadow-md);
-  }
-
-  .surface-bordered {
-    border: 1px solid var(--color-border);
-  }
-
-  .surface-padded {
-    padding: var(--space-lg);
-  }
-
-  .surface-padded-sm {
-    padding: var(--space-md);
-  }
-
-  /* Section headers */
-  .section-header {
-    margin-bottom: var(--space-lg);
-  }
-
-  .section-title {
-    font-size: var(--font-size-xl);
-    font-weight: 600;
-    margin: 0 0 var(--space-md);
-    color: var(--color-text);
-  }
-
-  .section-title-bordered {
-    padding-bottom: var(--space-sm);
-    border-bottom: 2px solid var(--color-border);
-  }
-
-  .section-description {
-    color: var(--color-text-muted);
-    margin: 0;
-  }
-
-  /* Page headers */
-  .page-header {
-    margin-bottom: var(--space-xl);
-  }
-
-  .page-title {
-    font-size: var(--font-size-3xl);
-    font-weight: 700;
-    margin: 0 0 var(--space-md);
-  }
-
-  .page-description {
-    font-size: var(--font-size-lg);
-    color: var(--color-text-muted);
-    margin: 0;
-    max-width: 80ch;
-  }
-
-  .page-meta {
-    display: flex;
-    gap: var(--space-sm);
-    flex-wrap: wrap;
-    margin-top: var(--space-sm);
-  }
-
-  .page-actions {
-    display: flex;
-    gap: var(--space-md);
-    margin-top: var(--space-md);
-    flex-wrap: wrap;
-  }
-
-  @media (max-width: 640px) {
-    .page-actions {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    .page-actions .btn {
-      text-align: center;
-    }
-  }
-
-  /* Sections */
-  .section {
-    margin-top: var(--space-xl);
-    margin-bottom: var(--space-xl);
-  }
-
-  /* Detail pages */
-  .detail-page {
-    max-width: var(--max-width);
-    margin: 0 auto;
-  }
-
-  .detail-section {
-    margin-bottom: var(--space-2xl);
-  }
-
-  .detail-section:last-child {
-    margin-bottom: 0;
-  }
-
-  .detail-item {
-    background: var(--color-bg);
-    padding: var(--space-md);
-    border-radius: var(--radius-md);
-  }
-
-  .detail-item-value {
-    font-weight: 500;
-  }
-
-  /*
-   * List items: 60px row height = 16px padding-top + 28px content + 16px padding-bottom
-   * Uses bottom-border only for 1px gaps between items (like table rows)
-   * Left/right borders and rounded corners on first/last items match table styling
-   */
-  .list-item {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-    min-height: 60px;
-    padding: var(--space-md) var(--space-lg);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-top: none;
-  }
-
-  /* First list-item in a sequence (handles heading before list items) */
-  .list-item:first-child,
-  :not(.list-item) + .list-item {
-    border-top: 1px solid var(--color-border);
-    border-top-left-radius: var(--radius-lg);
-    border-top-right-radius: var(--radius-lg);
-  }
-
-  .list-item:last-child {
-    border-bottom-left-radius: var(--radius-lg);
-    border-bottom-right-radius: var(--radius-lg);
-  }
-
-  /* Accent borders */
-  .accent-left {
-    border-left: 4px solid var(--color-border);
-  }
-
-  .accent-primary {
-    border-left-color: var(--color-primary);
-  }
-
-  .accent-success {
-    border-left-color: var(--color-success);
-  }
-
-  .accent-warning {
-    border-left-color: var(--color-warning);
-  }
-
-  .accent-error {
-    border-left-color: var(--color-error);
-  }
-
-  .accent-skill-primary {
-    border-left-color: var(--color-primary-skill);
-  }
-
-  .accent-skill-secondary {
-    border-left-color: var(--color-secondary);
-  }
-
-  .accent-skill-broad {
-    border-left-color: var(--color-broad);
-  }
-
-  /* Footer */
-  #app-footer {
-    background: var(--color-surface);
-    border-top: 1px solid var(--color-border);
-    padding: var(--space-lg);
-    text-align: center;
-    color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
-  }
-
-  #app-footer p {
-    margin: 0 0 var(--space-sm) 0;
-  }
-
-  .footer-links {
-    display: flex;
-    gap: var(--space-md);
-    justify-content: center;
-  }
-
-  .footer-links a {
-    color: var(--color-text-muted);
-    text-decoration: none;
-  }
-
-  .footer-links a:hover {
-    color: var(--color-primary);
-    text-decoration: underline;
-  }
-
-  .footer-quote {
-    margin: var(--space-lg) auto 0;
-    max-width: 50em;
-    font-style: italic;
-    color: var(--color-text-muted);
-    border: none;
-    padding: 0;
-  }
-
-  .footer-quote p {
-    margin: 0 0 var(--space-xs) 0;
-    font-size: var(--font-size-sm);
-    line-height: 1.5;
-  }
-
-  .footer-quote cite {
-    font-size: var(--font-size-xs);
-    font-style: normal;
-  }
-}