impact-nova 2.0.9 → 2.1.0-alpha.2

package/dist/impact-nova-components.css

@@ -125,84 +125,17 @@
   flex-wrap: wrap;
 }
 
-/* Keyframes for gradient animation */
-@keyframes gradient {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-.impact-header-bot-container {
-  /* Fallback / Dark mode base */
-  background-color: #1f2937;
-  /* Main Gradient */
-  background: linear-gradient(-45deg, #2ac2aa, #6666ef, #f26922, #8863c0, #0f1937);
-  background-size: 400% 400%;
-  /* Animation */
-  animation: gradient 5s ease infinite;
-  /* Pseudo-element for border/glow effect */
-  /* This element is handled by ::before on the container itself in newer SCSS logic or Tailwind z-index layering */
-  /* We kept the ::before logic in the SCSS, but we need to ensure nesting is correct */
-  /* Hover state */
-}
-.impact-header-bot-container:hover:not(:disabled) {
-  background: linear-gradient(-45deg, #2ac2ee, #6962ef, #f26921);
+/* Header bot button — animated multi-stop gradient (tokens in impact-nova-tokens.scss) */
+.header-bot-button-gradient {
   background-size: 400% 400%;
-  animation: gradient 2s ease infinite;
-}
-.impact-header-bot-container:hover:not(:disabled)::before {
-  background: none;
-}
-
-/* Notification Indicator Styles - Moved OUTSIDE of bot container */
-.notification-indicator {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  width: 10px;
-  height: 10px;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.notification-pulse {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 10px;
-  height: 10px;
-  background-color: var(--color-error-surface);
-  border-radius: 50%;
-  animation: notification-waves 1.5s ease-out infinite;
-}
-
-.notification-dot {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 8px; /* Updated to 8px as requested */
-  height: 8px; /* Updated to 8px as requested */
-  background-color: var(--color-destructive);
-  border-radius: 50%;
-}
-
-@keyframes notification-waves {
-  0% {
-    width: 8px;
-    height: 8px;
-  }
-  100% {
-    width: 16px;
-    height: 16px;
-  }
+  background-image: linear-gradient(-45deg, var(--color-header-bot-gradient-teal), var(--color-header-bot-gradient-indigo), var(--color-header-bot-gradient-orange), var(--color-header-bot-gradient-purple), var(--color-header-bot-gradient-navy));
+}
+
+.header-bot-button-gradient:hover {
+  background-image: linear-gradient(-45deg, var(--color-header-bot-gradient-teal-hover), var(--color-header-bot-gradient-indigo-hover), var(--color-header-bot-gradient-orange-hover));
 }
+/* Custom AG Grid Styles — plain CSS (no SCSS nesting). */
+
 .ag-pinned-left-cols-container,
 .ag-pinned-right-cols-container,
 .ag-pinned-left-header,
@@ -211,6 +144,9 @@
   z-index: 1;
 }
 
+/* Multi-tier column groups reserve empty header rows in pinned regions for spanning
+   leaf headers. AG Grid assigns role="row" without columnheader children — hide
+   those placeholder rows from layout and the accessibility tree (no JS reconcile). */
 .ag-header-row:not(:has(.ag-header-cell, .ag-header-group-cell)) {
   display: none;
 }
@@ -221,7 +157,7 @@
 }
 
 .ag-header-cell:has(.ag-header-cell-search-active),
-.ag-header-cell:has([data-selection-column=true]) {
+.ag-header-cell:has([data-selection-column="true"]) {
   --ag-header-cell-horizontal-padding: 0;
   padding-left: 0;
   padding-right: 0;
@@ -231,9 +167,11 @@
   border-bottom-width: 2px;
   border-bottom-style: solid;
 }
+
 .ag-header-group-cell-with-group:nth-child(odd) {
   border-bottom-color: var(--color-border-grid-header-group-purple);
 }
+
 .ag-header-group-cell-with-group:nth-child(even) {
   border-bottom-color: var(--color-warning);
 }
@@ -241,13 +179,15 @@
 .ag-root-wrapper .ag-row.ag-row-pinned-manual,
 .ag-root-wrapper .ag-floating-top .ag-row.ag-row-pinned,
 .ag-root-wrapper .ag-floating-bottom .ag-row.ag-row-pinned {
-  background-color: #f4f1f9;
+  background-color: var(--color-grid-pinned-row-background);
 }
+
 .ag-root-wrapper .ag-row.ag-row-pinned-source {
-  background-color: #f4f1f9;
+  background-color: var(--color-grid-pinned-row-background);
 }
-.ag-root-wrapper .ag-row-pinned,
-.ag-root-wrapper .ag-row-pinned .ag-cell {
+
+.ag-row-pinned,
+.ag-row-pinned .ag-cell {
   box-shadow: none;
   font-weight: 600;
 }
@@ -269,8 +209,14 @@
   height: 100%;
 }
 
-.ag-header-cell[aria-sort=ascending] .ag-sort-indicator-container,
-.ag-header-cell[aria-sort=descending] .ag-sort-indicator-container,
+@media (prefers-reduced-motion: reduce) {
+  .ag-header-cell .ag-sort-indicator-container {
+    transition: none;
+  }
+}
+
+.ag-header-cell[aria-sort="ascending"] .ag-sort-indicator-container,
+.ag-header-cell[aria-sort="descending"] .ag-sort-indicator-container,
 .ag-header-cell:hover .ag-sort-indicator-container {
   opacity: 1;
   width: auto;
@@ -288,23 +234,23 @@
   justify-content: center;
 }
 
-.ag-header-cell[aria-sort=ascending] .sort-asc-icon {
+.ag-header-cell[aria-sort="ascending"] .sort-asc-icon {
   display: inline-flex;
 }
 
-.ag-header-cell[aria-sort=descending] .sort-desc-icon {
+.ag-header-cell[aria-sort="descending"] .sort-desc-icon {
   display: inline-flex;
 }
 
-.ag-header-cell[aria-sort=none]:hover .sort-none-icon {
+.ag-header-cell[aria-sort="none"]:hover .sort-none-icon {
   display: inline-flex;
 }
 
-.ag-header-cell[aria-sort=ascending] .checkmark-asc {
+.ag-header-cell[aria-sort="ascending"] .checkmark-asc {
   display: inline-flex;
 }
 
-.ag-header-cell[aria-sort=descending] .checkmark-desc {
+.ag-header-cell[aria-sort="descending"] .checkmark-desc {
   display: inline-flex;
 }
 
@@ -315,6 +261,7 @@
   line-height: 1;
   height: 100%;
 }
+
 .ag-sort-indicator-icon svg {
   display: block;
 }
@@ -344,6 +291,7 @@
   line-height: normal;
   overflow: visible;
 }
+
 .ag-cell-renderer-full-control .ag-cell-wrapper {
   padding: 0;
   overflow: visible;
@@ -365,6 +313,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .ag-cell:not(.ag-cell-no-padding):not(.ag-cell-renderer-full-control).ag-right-aligned-cell {
   justify-content: flex-end;
 }
@@ -374,6 +323,7 @@
   width: 100%;
   overflow: hidden;
 }
+
 .ag-cell:not(.ag-cell-renderer-full-control):not(.ag-cell-no-padding) > .ag-cell-wrapper > .ag-cell-value {
   min-width: 0;
   overflow: hidden;

package/dist/impact-nova-tokens.scss

@@ -51,6 +51,16 @@
     --color-foreground-icon: #7a8294;
     /* Header notification bell (default); hover uses --color-foreground via text-content */
     --color-header-notification-icon: #60697d;
+
+    /* Header bot button animated gradient stops */
+    --color-header-bot-gradient-teal: #2ac2aa;
+    --color-header-bot-gradient-indigo: #6666ef;
+    --color-header-bot-gradient-orange: #f26922;
+    --color-header-bot-gradient-purple: #8863c0;
+    --color-header-bot-gradient-navy: #0f1937;
+    --color-header-bot-gradient-teal-hover: #2ac2ee;
+    --color-header-bot-gradient-indigo-hover: #6962ef;
+    --color-header-bot-gradient-orange-hover: #f26921;
     // --color-secondary: #31416E;
 
     --color-neutral-charcoal: #41536c;
@@ -65,6 +75,8 @@
     --color-border-accent-muted: #b3bdf8;
     /* Figma purple scale 500 — AG Grid header group alternating border (odd) */
     --color-border-grid-header-group-purple: #ad97ce;
+    /* AG Grid pinned total / summary rows */
+    --color-grid-pinned-row-background: #f4f1f9;
     --color-input: #d9dde7;
     --color-ring: #1f2b4d;
 
@@ -163,14 +175,97 @@
   }
 
   .dark {
-    --color-sidebar-background: #0f1729;
+    /* —— Canvas & default content —— */
+    --color-background: #0f1729;
+    --color-foreground: #f8f9fb;
+
+    /* —— Surfaces —— */
+    --color-surface-elevated: #141f38;
+    --color-surface-elevated-foreground: #f8f9fb;
+    --color-surface-floating: #1b294b;
+    --color-surface-floating-foreground: #f8f9fb;
+    --color-surface-muted: #141f38;
+    --color-surface-canvas: #0f1729;
+    --color-surface-input-disabled: #1b294b;
+    --color-surface-readonly: #141f38;
+    --color-surface-tint-blue: #1b294b;
+    --color-surface-accordion: #29399f;
+    --color-surface-selection-tint: #1f2b4d;
+
+    /* —— Brand & interactive —— */
+    --color-primary: #5267f4;
+    --color-primary-foreground: #ffffff;
+    --color-primary-strong: #6b7ef7;
+    --color-primary-hover: #6b7ef7;
+    --color-primary-surface-subtle: #1b294b;
+    --color-primary-on-surface-subtle: #8b9af8;
+    --color-primary-selection: #1f2b4d;
+    --color-primary-soft: #1f2b4d;
+    --color-primary-soft-hover: #29399f;
+    --color-primary-variant: #5267f4;
+    --color-primary-variant-hover: #6b7ef7;
+
+    --color-secondary: #141f38;
+    --color-secondary-foreground: #b4bac7;
+    --color-secondary-hover-foreground: #8b9af8;
+
+    --color-accent: #1f2b4d;
+    --color-accent-foreground: #8b9af8;
+
+    --color-muted: #1b294b;
+    --color-muted-foreground: #8b9af8;
+
+    /* —— Content tone scale —— */
+    --color-foreground-secondary: #b4bac7;
+    --color-foreground-tertiary: #9aa3b5;
+    --color-foreground-placeholder: #60697d;
+    --color-foreground-empty: #41536c;
+    --color-foreground-icon: #9aa3b5;
+    --color-header-notification-icon: #b4bac7;
+
+    --color-neutral-charcoal: #b4bac7;
+    --color-neutral-badge: #9aa3b5;
+
+    /* —— Borders & focus —— */
+    --color-border: #1b294b;
+    --color-border-subtle: #141f38;
+    --color-border-tertiary: #29399f;
+    --color-border-hairline: #1b294b;
+    --color-border-strong: #29399f;
+    --color-border-accent-muted: #3649c6;
+    --color-border-grid-header-group-purple: #6b5a8a;
+    --color-grid-pinned-row-background: #1b294b;
+    --color-input: #1b294b;
+    --color-ring: #8b9af8;
+
+    /* —— Forms & validation —— */
+    --color-disabled-surface: #141f38;
+    --color-disabled-foreground: #60697d;
+    --color-disabled-border: #1b294b;
+    --color-danger-validation: #f87171;
+    --color-danger-bright: #ef4444;
+
+    /* —— Navigation (sidebar shell) —— */
+    --color-sidebar-background: #0a1020;
     --color-sidebar-foreground: #ffffff;
-    --color-sidebar-surface: #0f1729;
+    --color-sidebar-surface: #0a1020;
     --color-sidebar-on-surface: #ffffff;
     --color-sidebar-hover: #141f38;
     --color-sidebar-on-hover: #ffffff;
     --color-sidebar-border: #1b294b;
     --color-sidebar-ring: #3b82f6;
     --color-sidebar-indicator: #00ff00;
+    --color-sidebar-item-hover: #29399f;
+    --color-sidebar-item-active: #1f2b4d;
+    --color-sidebar-foreground-muted: #9aa3b5;
+    --color-sidebar-canvas: #0f1729;
+
+    /* —— Tabs —— */
+    --color-tab-hover-border: #3649c6;
+    --color-tab-hover-surface: #1b294b;
+    --color-tab-hover-foreground: #8b9af8;
+    --color-tab-active-border: #5267f4;
+    --color-tab-active-surface: #141f38;
+    --color-tab-active-foreground: #8b9af8;
   }
 }