@qtalo/qt-ui-library 0.3.4 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qtalo/qt-ui-library",
-  "version": "0.3.4",
+  "version": "0.4.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
+    "@fontsource-variable/material-symbols-outlined": "^5.3.9",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@ladle/react": "^5.1.1",
     "@tailwindcss/vite": "^4.1.18",

package/src/styles/styles.css

@@ -139,6 +139,70 @@
   --color-search-suggestion-client-text: var(--color-primary-500-variant-1);
   --color-search-suggestion-member-bg: #ecfdf5;
   --color-search-suggestion-member-text: #047857;
+  --color-search-suggestion-panel-border: #f5f5f8;
+  --color-search-suggestion-close-hover: color-mix(
+    in oklab,
+    #000000 10%,
+    transparent
+  );
+
+  --color-group-header-hover-bg: color-mix(in oklab, #000000 2%, transparent);
+  --color-group-header-text-strong: #1f1f1f;
+  --color-group-header-initial-bg: #e8e5ff;
+  --color-group-header-initial-text: #4f3ed0;
+
+  --color-pulse-card-border: #f5f5f8;
+  --color-pulse-card-text: #1f1f1f;
+  --color-pulse-card-review-hover-bg: #fffbeb;
+  --color-pulse-card-spark-hover-bg: #f5f3ff;
+  --color-pulse-card-tag-respond-text: #cc3d2a;
+  --color-pulse-card-tag-respond-border: #ff8578;
+  --color-pulse-card-tag-decide-text: #4f3ed0;
+  --color-pulse-card-tag-decide-border: #abaaff;
+  --color-pulse-card-action-hover-bg: #f5f5f8;
+  --color-pulse-card-action-hover-text: #46454a;
+
+  --color-evidence-border: #f3f2f8;
+  --color-signal-summary-border: #f3f2f8;
+  --color-signal-summary-avatar-bg: #f5f5f8;
+  --color-signal-summary-avatar-text: #82818e;
+  --color-signal-summary-close-hover-bg: #fafafc;
+  --color-signal-summary-divider: #eae9f0;
+  --color-signal-summary-guardrail-hover: #1f1f1f;
+  --color-signal-summary-action-border: #eae9f0;
+  --color-signal-summary-action-hover-bg: #fafafc;
+  --color-signal-summary-chip-bg: #ffffff;
+  --color-signal-summary-chip-border: #f5f5f8;
+  --color-signal-summary-chip-selected-bg: #46454a;
+  --color-signal-summary-chip-selected-text: #ffffff;
+  --color-signal-summary-confirm-bg: #46454a;
+  --color-signal-summary-confirm-text: #ffffff;
+  --color-signal-summary-confirm-hover-bg: #82818e;
+  --color-signal-summary-instead-text: #82818e;
+  --color-signal-summary-instead-hover-text: #15803d;
+  --color-signal-summary-sla-track: #fafafc;
+  --color-signal-summary-sla-good-bar: #4ade80;
+  --color-signal-summary-sla-good-badge-bg: #f0fdf4;
+  --color-signal-summary-sla-good-badge-text: #15803d;
+  --color-signal-summary-sla-approaching-bar: #fde047;
+  --color-signal-summary-sla-approaching-badge-bg: #fefce8;
+  --color-signal-summary-sla-approaching-badge-text: #a16207;
+  --color-signal-summary-sla-overdue-bar: #fbbf24;
+  --color-signal-summary-sla-overdue-badge-bg: #fffbeb;
+  --color-signal-summary-sla-overdue-badge-text: #b45309;
+  --color-signal-summary-sla-way-overdue-bar: #ef4444;
+  --color-signal-summary-sla-way-overdue-badge-bg: #fef2f2;
+  --color-signal-summary-sla-way-overdue-badge-text: #b91c1c;
+  --color-cursor-tooltip-bg: #46454a;
+  --color-evidence-empty-bg: #fafafa;
+  --color-thread-avatar-email-bg: #fafafc;
+  --color-thread-date-pill-border: #eae9f0;
+  --color-toolbar-border: #f5f5f8;
+  --color-toolbar-button-active-text: #4f3ed0;
+  --color-toolbar-text-strong: #1f1f1f;
+  --color-toolbar-button-hover-border: #cbcad5;
+  --color-toolbar-button-menu-border: #abaaff;
+  --color-toolbar-badge-idle-bg: color-mix(in oklab, #000000 4%, transparent);
 
   --color-red-400: #f87171;
   --color-red-500: #ef4444;
@@ -414,6 +478,86 @@
       transparent
     );
     --color-search-suggestion-member-text: #34d399;
+    --color-search-suggestion-panel-border: #222222;
+    --color-search-suggestion-close-hover: color-mix(
+      in oklab,
+      #ffffff 10%,
+      transparent
+    );
+
+    --color-group-header-hover-bg: color-mix(in oklab, #ffffff 3%, transparent);
+    --color-group-header-text-strong: #f5f5f5;
+    --color-group-header-initial-bg: #2a2540;
+    --color-group-header-initial-text: #aba4ff;
+
+    --color-pulse-card-border: #82818e;
+    --color-pulse-card-text: #f5f5f5;
+    --color-pulse-card-review-hover-bg: color-mix(
+      in oklab,
+      #451a03 20%,
+      transparent
+    );
+    --color-pulse-card-spark-hover-bg: #2d2650;
+    --color-pulse-card-tag-respond-text: #ff8a7a;
+    --color-pulse-card-tag-respond-border: #ff8578;
+    --color-pulse-card-tag-decide-text: #aba4ff;
+    --color-pulse-card-tag-decide-border: #aba4ff;
+    --color-pulse-card-action-hover-bg: #2a2a2a;
+    --color-pulse-card-action-hover-text: #fafafc;
+
+    --color-evidence-border: #3a3a3a;
+    --color-signal-summary-border: #3a3a3a;
+    --color-signal-summary-avatar-bg: #82818e;
+    --color-signal-summary-avatar-text: #f5f5f8;
+    --color-signal-summary-close-hover-bg: #222222;
+    --color-signal-summary-divider: #4a4a4a;
+    --color-signal-summary-guardrail-hover: #f5f5f8;
+    --color-signal-summary-action-border: #cbcad5;
+    --color-signal-summary-action-hover-bg: #46454a;
+    --color-signal-summary-chip-bg: #222222;
+    --color-signal-summary-chip-border: #333333;
+    --color-signal-summary-chip-selected-bg: #ffffff;
+    --color-signal-summary-chip-selected-text: #1f1f1f;
+    --color-signal-summary-confirm-bg: #f5f5f8;
+    --color-signal-summary-confirm-text: #1f1f1f;
+    --color-signal-summary-confirm-hover-bg: #ffffff;
+    --color-signal-summary-instead-text: #cbcad5;
+    --color-signal-summary-instead-hover-text: #4ade80;
+    --color-signal-summary-sla-track: #2a2a2a;
+    --color-signal-summary-sla-good-badge-bg: color-mix(
+      in oklab,
+      #052e16 40%,
+      transparent
+    );
+    --color-signal-summary-sla-good-badge-text: #4ade80;
+    --color-signal-summary-sla-approaching-badge-bg: color-mix(
+      in oklab,
+      #422006 40%,
+      transparent
+    );
+    --color-signal-summary-sla-approaching-badge-text: #facc15;
+    --color-signal-summary-sla-overdue-badge-bg: color-mix(
+      in oklab,
+      #451a03 40%,
+      transparent
+    );
+    --color-signal-summary-sla-overdue-badge-text: #fbbf24;
+    --color-signal-summary-sla-way-overdue-badge-bg: color-mix(
+      in oklab,
+      #450a0a 40%,
+      transparent
+    );
+    --color-signal-summary-sla-way-overdue-badge-text: #f87171;
+    --color-cursor-tooltip-bg: #82818e;
+    --color-evidence-empty-bg: #151515;
+    --color-thread-avatar-email-bg: #46454a;
+    --color-thread-date-pill-border: #4a4a4a;
+    --color-toolbar-border: #222222;
+    --color-toolbar-button-active-text: #aba4ff;
+    --color-toolbar-text-strong: #f5f5f5;
+    --color-toolbar-button-hover-border: #3f3f46;
+    --color-toolbar-button-menu-border: #aba4ff;
+    --color-toolbar-badge-idle-bg: color-mix(in oklab, #ffffff 6%, transparent);
 
     --color-yellow-50: color-mix(
       in oklab,
@@ -487,6 +631,36 @@ body {
   animation: tourFadeInUp 0.25s ease-out forwards;
 }
 
+/* Crossfade between two skeletons in the same place: a generic one fades out
+   while the specific one fades in, so the swap does not jump. */
+
+@keyframes skeletonCrossfadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes skeletonCrossfadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.skeleton-crossfade-in {
+  animation: skeletonCrossfadeIn 0.4s ease-in-out;
+}
+
+.skeleton-crossfade-out {
+  pointer-events: none;
+  animation: skeletonCrossfadeOut 0.4s ease-in-out forwards;
+}
+
 /* Skeleton block */
 
 .skeleton {
@@ -517,6 +691,15 @@ body {
     animation: none;
     background-image: none;
   }
+
+  .skeleton-crossfade-in {
+    animation: none;
+  }
+
+  .skeleton-crossfade-out {
+    animation: none;
+    opacity: 0;
+  }
 }
 
 /* Normalized content */