impact-nova 2.5.16 → 2.6.0-alpha.0

package/dist/impact-nova-components.css

@@ -1068,3 +1068,252 @@
     transition: none;
   }
 }
+
+/* ponytail: Indicator knobs inherit. Defaults are fallbacks so unused grids pay no React theming.
+   Do not assign these on [data-iv-comments] — that would block ancestor overrides. */
+[data-iv-comments] .iv-has-cell-comment:not(.ag-has-cell-notes)::after {
+  content: "Has comment";
+  overflow: hidden;
+  color: transparent;
+  font-size: 0;
+  line-height: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--iv-comment-indicator-size, 12px);
+  height: var(--iv-comment-indicator-size, 12px);
+  box-sizing: border-box;
+  pointer-events: none;
+  border: 0;
+  background-color: var(--iv-comment-indicator-color, var(--color-primary));
+  clip-path: path("M 1 0 H 10 A 2 2 0 0 1 12 2 V 11 Q 12 12 11 11 L 1 1 Q 0 0 1 0 Z");
+}
+
+/* ponytail: AG Grid NotesModule owns note presence and popup. Yellow is the Nova default. */
+[data-iv-notes] {
+  --ag-note-indicator-color: var(--iv-note-indicator-color, var(--color-warning));
+  --ag-note-indicator-size: var(--iv-note-indicator-size, 12px);
+  --ag-note-popup-background-color: var(--iv-note-popup-background, var(--color-warning-surface));
+  --ag-note-popup-text-color: var(--iv-note-popup-text, var(--color-foreground));
+  --ag-note-popup-input-text-color: var(--iv-note-popup-text, var(--color-foreground));
+  --ag-note-popup-input-background-color: var(--iv-note-popup-input-background, var(--color-background));
+  --ag-note-popup-border: var(--iv-note-popup-border, 1px solid var(--color-warning-border));
+}
+
+[data-iv-notes] .ag-has-cell-notes:not(.iv-has-cell-comment)::after {
+  content: "Has note";
+  overflow: hidden;
+  color: transparent;
+  font-size: 0;
+  line-height: 0;
+  top: 0;
+  right: 0;
+  width: var(--ag-note-indicator-size);
+  height: var(--ag-note-indicator-size);
+  box-sizing: border-box;
+  border: 0;
+  background-color: var(--iv-note-indicator-color, var(--color-warning));
+  clip-path: path("M 1 0 H 10 A 2 2 0 0 1 12 2 V 11 Q 12 12 11 11 L 1 1 Q 0 0 1 0 Z");
+}
+
+[data-iv-comments][data-iv-notes] .iv-has-cell-comment.ag-has-cell-notes::after {
+  content: "Has comment and note";
+  overflow: hidden;
+  color: transparent;
+  font-size: 0;
+  line-height: 0;
+  top: 0;
+  right: 0;
+  width: var(--iv-comment-indicator-size, var(--iv-note-indicator-size, 12px));
+  height: var(--iv-comment-indicator-size, var(--iv-note-indicator-size, 12px));
+  box-sizing: border-box;
+  border: 0;
+  background-color: transparent;
+  background-image: linear-gradient(
+    135deg,
+    var(--iv-comment-indicator-color, var(--color-primary)) 0 50%,
+    var(--iv-note-indicator-color, var(--color-warning)) 50% 100%
+  );
+  clip-path: path("M 1 0 H 10 A 2 2 0 0 1 12 2 V 11 Q 12 12 11 11 L 1 1 Q 0 0 1 0 Z");
+}
+
+/* ponytail: Figma 4222:61663 comment-mode cursor. Data-URI fill uses %23 so token scan stays clean. Hotspot is the square TL. */
+[data-iv-comments][data-iv-comment-mode] .ag-cell {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 4H12C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12V4Z' fill='%234259EE'/%3E%3C/svg%3E") 4 4, cell;
+}
+
+/* ponytail: Figma 4364:63475 — square TL (cell-adjacent). Extra Large 0/0/30/6 at 10% fg. Longhands beat Popover rounded-xl. */
+[data-component="popover-content"][data-iv-comments-popover] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+  border-bottom-left-radius: 16px;
+  box-shadow: 0px 0px 30px 6px color-mix(in srgb, var(--color-foreground) 10%, transparent);
+}
+
+[data-iv-chat] {
+  --iv-chat-column-width: 69px;
+  --iv-chat-unread-bg: var(--color-destructive);
+  --iv-chat-unread-fg: var(--color-destructive-foreground);
+  --iv-chat-icon-size: 21px;
+  --iv-chat-badge-size: 16px;
+}
+
+[data-iv-chat] .ag-cell[col-id="iv-chat"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  padding: 0;
+}
+
+.iv-chat-cell-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 100%;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.iv-chat-cell-button::before,
+.iv-chat-cell-button::after {
+  content: none;
+  display: none;
+}
+
+.iv-chat-cell-icon {
+  position: relative;
+  display: inline-flex;
+  width: var(--iv-chat-icon-size);
+  height: var(--iv-chat-icon-size);
+  overflow: visible;
+}
+
+.iv-chat-cell-icon img {
+  display: block;
+  width: var(--iv-chat-icon-size);
+  height: var(--iv-chat-icon-size);
+}
+
+.iv-chat-unread {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--iv-chat-badge-size);
+  height: var(--iv-chat-badge-size);
+  padding: 0 3px;
+  border-radius: 999px;
+  background: var(--iv-chat-unread-bg);
+  color: var(--iv-chat-unread-fg);
+  font-size: 9px;
+  font-weight: 800;
+  line-height: 1;
+  text-align: center;
+  pointer-events: none;
+  transform: translate(40%, -50%);
+}
+
+[data-iv-chat-workspace] {
+  --iv-chat-list-width: 340px;
+  --iv-chat-thread-min-width: 640px;
+}
+
+.iv-chat-html b,
+.iv-chat-html strong {
+  font-weight: 700;
+}
+
+.iv-chat-html i,
+.iv-chat-html em {
+  font-style: italic;
+}
+
+.iv-chat-html a {
+  color: var(--color-brand, var(--color-primary));
+  text-decoration: underline;
+}
+
+.iv-chat-day {
+  margin: 0 auto 12px;
+  width: fit-content;
+  border-radius: 1000px;
+  border: 1px solid var(--color-border);
+  background: var(--gradient-chat-day);
+  padding: 4px 12px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--color-header-notification-icon, var(--color-foreground-secondary));
+}
+
+.iv-chat-bubble {
+  border-radius: 12px;
+  padding: 12px 16px;
+}
+
+[data-iv-chat-message]:not([data-iv-chat-mine]) .iv-chat-bubble {
+  background: var(--gradient-chat-theirs);
+}
+
+[data-iv-chat-message][data-iv-chat-mine] .iv-chat-bubble {
+  background: var(--gradient-chat-mine);
+}
+
+.iv-chat-quote {
+  margin: 0 0 8px;
+  border-radius: 8px;
+  background: var(--color-background);
+  padding: 8px 12px;
+}
+
+.iv-chat-quote-author {
+  color: var(--color-foreground);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 22px;
+}
+
+.iv-chat-quote-text {
+  color: var(--color-header-notification-icon, var(--color-foreground-secondary));
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.iv-chat-stamp {
+  margin-top: 8px;
+  align-self: flex-end;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--color-header-notification-icon, var(--color-foreground-secondary));
+}
+
+.iv-chat-reply-curve {
+  flex-shrink: 0;
+  color: var(--color-foreground-icon);
+}
+
+/* ponytail: inset shadow follows border-radius. Mixed 1px+3px borders miter square
+   corners; ::before rails also square off unless they are the border itself. */
+[data-iv-chat-summary][data-selected] {
+  box-shadow: inset 3px 0 0 var(--color-primary);
+}
+
+[data-iv-chat-summary][data-iv-chat-priority="high"] {
+  box-shadow: inset 3px 0 0 var(--color-destructive);
+}
+
+[data-iv-chat-summary][data-iv-chat-priority="medium"] {
+  box-shadow: inset 3px 0 0 var(--color-warning);
+}
+
+[data-iv-chat-summary][data-iv-chat-priority="low"] {
+  box-shadow: inset 3px 0 0 var(--color-success);
+}
+

package/dist/impact-nova-tokens.scss

@@ -107,6 +107,9 @@
     --color-tab-hover-border: #c6ccf1;
     --color-tab-hover-foreground: #7a83b8;
     --color-tab-hover-surface: #f2f3fd;
+    --gradient-chat-day: linear-gradient(90deg, #f5f5f5 6%, rgba(245, 245, 245, 0) 120%);
+    --gradient-chat-mine: linear-gradient(91deg, rgba(223, 231, 255, 0.40) 0.67%, rgba(228, 216, 255, 0.32) 56.16%, rgba(255, 203, 204, 0.27) 111.65%);
+    --gradient-chat-theirs: linear-gradient(92deg, #f8f9fb -0.92%, #f6f7fa 98.11%);
     --gradient-file-upload-drag: radial-gradient(circle at center, #fafbff 0%, #f4f6ff 60%, #eef1ff 100%);
     --gradient-file-upload-error: radial-gradient(circle at center, #ffffff 0%, #fffcfc 65%, #fdf5f4 100%);
 
@@ -332,6 +335,9 @@
     --color-tab-hover-border: #737373;
     --color-tab-hover-foreground: #fafafa;
     --color-tab-hover-surface: #404040;
+    --gradient-chat-day: linear-gradient(90deg, #262626 6%, rgba(38, 38, 38, 0) 120%);
+    --gradient-chat-mine: linear-gradient(91deg, rgba(82, 103, 244, 0.22) 0.67%, rgba(174, 87, 234, 0.16) 56.16%, rgba(236, 75, 88, 0.14) 111.65%);
+    --gradient-chat-theirs: linear-gradient(92deg, #171717 -0.92%, #1f1f1f 98.11%);
     --gradient-file-upload-drag: radial-gradient(circle at center, #fafbff 0%, #f4f6ff 60%, #eef1ff 100%);
     --gradient-file-upload-error: radial-gradient(circle at center, #ffffff 0%, #fffcfc 65%, #fdf5f4 100%);