@forwardimpact/pathway 0.1.0

package/app/css/components/badges.css

@@ -0,0 +1,215 @@
+/**
+ * Badge Components
+ *
+ * All badge variants consolidated: type badges, level badges, capability badges, modifiers.
+ */
+
+@layer components {
+  /* Base badge */
+  .badge {
+    display: inline-block;
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-xs);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  .badge-default {
+    background: var(--color-primary-light);
+    color: var(--color-primary-dark);
+  }
+
+  .badge-human-only {
+    background: #fef3c7;
+    color: #92400e;
+  }
+
+  /* Skill type badges */
+  .badge-primary {
+    background: var(--color-primary-skill-light);
+    color: var(--color-primary-skill);
+  }
+
+  .badge-secondary {
+    background: var(--color-secondary-light);
+    color: #92400e;
+  }
+
+  .badge-broad {
+    background: var(--color-broad-light);
+    color: #047857;
+  }
+
+  .badge-negative {
+    background: var(--color-primary-skill-light);
+    color: var(--color-primary-skill);
+  }
+
+  /* Level badges (1-5) - consolidated definition */
+  .badge-1,
+  .level-badge-1 {
+    background: var(--color-level-1);
+    color: #991b1b;
+  }
+
+  .badge-2,
+  .level-badge-2 {
+    background: var(--color-level-2);
+    color: #92400e;
+  }
+
+  .badge-3,
+  .level-badge-3 {
+    background: var(--color-level-3);
+    color: #166534;
+  }
+
+  .badge-4,
+  .level-badge-4 {
+    background: var(--color-level-4);
+    color: #0e7490;
+  }
+
+  .badge-5,
+  .level-badge-5 {
+    background: var(--color-level-5);
+    color: #5b21b6;
+  }
+
+  /* Level badge base style */
+  .level-badge {
+    display: inline-block;
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+  }
+
+  /* Capability badges */
+  .badge-delivery {
+    background: var(--color-cat-delivery-light);
+    color: var(--color-cat-delivery);
+  }
+
+  .badge-scale {
+    background: var(--color-cat-scale-light);
+    color: var(--color-cat-scale);
+  }
+
+  .badge-reliability {
+    background: var(--color-cat-reliability-light);
+    color: var(--color-cat-reliability);
+  }
+
+  .badge-data {
+    background: var(--color-cat-data-light);
+    color: var(--color-cat-data);
+  }
+
+  .badge-ai {
+    background: var(--color-cat-ai-light);
+    color: var(--color-cat-ai);
+  }
+
+  .badge-process {
+    background: var(--color-cat-process-light);
+    color: var(--color-cat-process);
+  }
+
+  .badge-business {
+    background: var(--color-cat-business-light);
+    color: var(--color-cat-business);
+  }
+
+  .badge-people {
+    background: var(--color-cat-people-light);
+    color: var(--color-cat-people);
+  }
+
+  .badge-documentation {
+    background: var(--color-cat-documentation-light);
+    color: var(--color-cat-documentation);
+  }
+
+  /* Tool badge */
+  .badge-tool {
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    font-size: 0.9rem;
+    padding: var(--space-xs) var(--space-sm);
+  }
+
+  /* Modifier tags - consolidated definition */
+  .modifier {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .modifier-positive {
+    background: var(--color-level-3);
+    color: #166534;
+  }
+
+  .modifier-negative {
+    background: var(--color-level-1);
+    color: #991b1b;
+  }
+
+  .modifier-neutral {
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    border: 1px solid var(--color-border);
+  }
+
+  /* Tags */
+  .tags {
+    display: flex;
+    gap: var(--space-sm);
+    flex-wrap: wrap;
+  }
+
+  .tag {
+    display: inline-block;
+    padding: var(--space-xs) var(--space-sm);
+    background: var(--color-bg);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+  }
+
+  /* Tool/skill badges container */
+  .tool-badges,
+  .skill-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+  }
+
+  /* Change indicators */
+  .change-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    font-weight: 500;
+  }
+
+  .change-up {
+    color: var(--color-success);
+  }
+
+  .change-down {
+    color: var(--color-error);
+  }
+
+  .change-same {
+    color: var(--color-text-muted);
+  }
+}

package/app/css/components/buttons.css

@@ -0,0 +1,101 @@
+/**
+ * Button Components
+ *
+ * Button styles for all button variants.
+ */
+
+@layer components {
+  .btn {
+    display: inline-block;
+    padding: var(--space-sm) var(--space-lg);
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-base);
+    font-weight: 500;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.2s;
+    text-align: center;
+  }
+
+  .btn:hover {
+    text-decoration: none;
+  }
+
+  .btn-primary {
+    background: var(--color-primary);
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background: var(--color-primary-dark);
+    color: white;
+  }
+
+  .btn-secondary {
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+  }
+
+  .btn-secondary:hover {
+    background: var(--color-border);
+  }
+
+  .btn-sm {
+    padding: var(--space-xs) var(--space-md);
+    font-size: var(--font-size-sm);
+  }
+
+  .btn-lg {
+    padding: var(--space-md) var(--space-xl);
+    font-size: var(--font-size-lg);
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Button groups */
+  .button-group {
+    display: flex;
+    gap: var(--space-sm);
+    flex-wrap: wrap;
+  }
+
+  /* Copy button */
+  .copy-btn {
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    transition: all 0.2s ease;
+  }
+
+  .copy-btn.copied {
+    background-color: var(--color-success);
+    border-color: var(--color-success);
+  }
+
+  /* Download all button */
+  .download-all-btn {
+    width: 100%;
+    padding: var(--space-md);
+    font-size: var(--font-size-lg);
+  }
+
+  /* Back link */
+  .back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--space-md);
+  }
+
+  .back-link:hover {
+    color: var(--color-primary);
+  }
+}

package/app/css/components/forms.css

@@ -0,0 +1,105 @@
+/**
+ * Form Components
+ *
+ * Form inputs, selects, and form groups.
+ */
+
+@layer components {
+  .form-group {
+    margin-bottom: var(--space-md);
+  }
+
+  .form-label {
+    display: block;
+    margin-bottom: var(--space-xs);
+    font-weight: 500;
+    color: var(--color-text);
+  }
+
+  .form-input,
+  .form-select {
+    width: 100%;
+    padding: var(--space-sm) var(--space-md);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-base);
+    font-family: inherit;
+    background: var(--color-surface);
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+  }
+
+  .form-input:focus,
+  .form-select:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  .form-select {
+    cursor: pointer;
+  }
+
+  /* Search bar */
+  .search-bar {
+    display: flex;
+    gap: var(--space-md);
+    margin-bottom: var(--space-xl);
+    flex-wrap: wrap;
+  }
+
+  .search-bar .form-input {
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .search-bar .form-select {
+    min-width: 150px;
+  }
+
+  /* Stage radio buttons */
+  .stage-radio-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+  }
+
+  .stage-radio-item {
+    display: flex;
+    align-items: center;
+  }
+
+  .stage-radio-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .stage-radio-label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-sm) var(--space-md);
+    background: var(--color-surface);
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    font-weight: 500;
+    transition:
+      border-color 0.2s ease,
+      background-color 0.2s ease;
+  }
+
+  .stage-radio-label:hover {
+    border-color: var(--color-primary);
+    background: var(--color-bg);
+  }
+
+  .stage-radio-label.active {
+    border-color: var(--color-primary);
+    background: var(--color-primary-light, rgba(37, 99, 235, 0.1));
+    color: var(--color-primary);
+  }
+}

package/app/css/components/layout.css

@@ -0,0 +1,209 @@
+/**
+ * Layout Utilities
+ *
+ * Stack, flex, and grid utilities for consistent layouts.
+ */
+
+@layer components {
+  /* App container */
+  #app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #app-content {
+    flex: 1;
+    max-width: var(--max-width);
+    width: 100%;
+    margin: 0 auto;
+    padding: var(--space-lg);
+    padding-top: calc(var(--nav-height) + var(--space-lg));
+  }
+
+  /* Stack - vertical flex container with gap */
+  .stack {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .stack-xs {
+    gap: var(--space-xs);
+  }
+
+  .stack-sm {
+    gap: var(--space-sm);
+  }
+
+  .stack-md {
+    gap: var(--space-md);
+  }
+
+  .stack-lg {
+    gap: var(--space-lg);
+  }
+
+  .stack-xl {
+    gap: var(--space-xl);
+  }
+
+  /* Flex utilities */
+  .flex-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .flex-start {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .flex-gap-sm {
+    gap: var(--space-sm);
+  }
+
+  .flex-gap-md {
+    gap: var(--space-md);
+  }
+
+  .flex-gap-lg {
+    gap: var(--space-lg);
+  }
+
+  /* Fixed column grids */
+  .grid {
+    display: grid;
+    gap: var(--space-lg);
+  }
+
+  .grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .grid-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  /* Auto-fit grids - responsive grids that automatically adjust column count */
+  .auto-grid-xs {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: var(--space-md);
+  }
+
+  .auto-grid-sm {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--space-md);
+  }
+
+  .auto-grid-md {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--space-lg);
+  }
+
+  .auto-grid-lg {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: var(--space-xl);
+  }
+
+  /* Gap modifiers */
+  .gap-sm {
+    gap: var(--space-sm);
+  }
+
+  .gap-md {
+    gap: var(--space-md);
+  }
+
+  .gap-lg {
+    gap: var(--space-lg);
+  }
+
+  .gap-xl {
+    gap: var(--space-xl);
+  }
+
+  /* Two-column layout */
+  .two-columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-xl);
+  }
+
+  /* Content columns */
+  .content-columns {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--space-md);
+  }
+
+  /* Print-optimized two-column layout */
+  .print-columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-lg);
+    align-items: start;
+  }
+
+  .print-columns > .section-detail,
+  .print-columns > .section {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  @media (max-width: 1280px) {
+    .grid-3 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .grid-6 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .two-columns {
+      grid-template-columns: 1fr;
+    }
+
+    .print-columns {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .grid-2 {
+      grid-template-columns: 1fr;
+    }
+
+    .grid-3 {
+      grid-template-columns: 1fr;
+    }
+
+    .grid-6 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .auto-grid-lg {
+      grid-template-columns: 1fr;
+    }
+  }
+}