@tolle_/tolle-ui 21.1.1 → 21.2.0

package/theme.css

@@ -34,14 +34,37 @@
   /* #ef4444 in RGB */
   --destructive-foreground: 250 250 250;
 
+  /* --- Status colors (success / warning / info) --- */
+  --success: 22 163 74;
+  /* green-600 */
+  --success-foreground: 255 255 255;
+  --warning: 217 119 6;
+  /* amber-600 */
+  --warning-foreground: 255 255 255;
+  --info: 37 99 235;
+  /* blue-600 */
+  --info-foreground: 255 255 255;
+
   /* --- UI Elements --- */
   --border: 228 228 231;
   /* #e4e4e7 in RGB */
   --input: 228 228 231;
-  --ring: 96 165 250;
-  /* #60a5fa in RGB - lighter blue */
+  --ring: var(--primary);
+  /* derives from primary color */
   --radius: 0.5rem;
 
+  /* --- Typography (themeable via the theme generator / ThemeService) --- */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  /* --- Charts (themeable via the theme generator / ThemeService) --- */
+  --chart-1: 37 99 235;
+  --chart-2: 20 184 166;
+  --chart-3: 234 88 12;
+  --chart-4: 139 92 246;
+  --chart-5: 236 72 153;
+
   /* --- Shadows --- */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
@@ -75,10 +98,33 @@
   /* #7f1d1d in RGB */
   --destructive-foreground: 254 242 242;
 
+  /* --- Status colors (brighter for dark surfaces) --- */
+  --success: 74 222 128;
+  /* green-400 */
+  --success-foreground: 5 46 22;
+  --warning: 251 191 36;
+  /* amber-400 */
+  --warning-foreground: 66 32 6;
+  --info: 96 165 250;
+  /* blue-400 */
+  --info-foreground: 23 37 84;
+
   --border: 39 39 42;
   --input: 39 39 42;
-  --ring: 147 197 253;
-  /* #93c5fd in RGB - even lighter blue */
+  --ring: var(--primary);
+  /* derives from primary color */
+
+  /* Dark chart steps are SELECTED, not a lightened flip of the light ones: the
+     Tailwind-400 steps previously used here sat at OKLCH L 0.71–0.79, too bright
+     to read as distinct marks on a dark surface. These keep each series' hue
+     (blue, teal, orange, violet, pink) so a series holds its identity across
+     themes, re-stepped into the dark lightness band. Validated for lightness,
+     chroma, CVD separation and contrast. */
+  --chart-1: 85 140 255;
+  --chart-2: 14 169 152;
+  --chart-3: 235 97 36;
+  --chart-4: 153 115 254;
+  --chart-5: 234 79 154;
 
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
@@ -96,7 +142,41 @@
 
 /* Base text color inheritance - THIS IS KEY */
 * {
-  border-color: var(--border, #e4e4e7);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
+}
+
+/*
+ * Default border color for every element that uses a bare `border` utility.
+ * Two bugs made bare borders render as a near-white `currentColor` line on dark
+ * overlays (calendars, popovers, dropdowns…):
+ *   1. `--border` is an RGB triplet ("39 39 42"), so it must be wrapped in rgb();
+ *      used raw the declaration is invalid and silently dropped.
+ *   2. The docs pipeline emits `@tailwind base` a second time AFTER this file, so
+ *      a plain `*` selector loses to preflight's gray-200 default by source order.
+ * The `html *` selector (specificity 0,0,1) beats preflight's `*` (0,0,0)
+ * regardless of order, while still yielding to any `border-<color>` utility (0,1,0).
+ */
+html * {
+  border-color: rgb(var(--border, 228 228 231));
+}
+
+*::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.3);
+  border-radius: 20px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.5);
 }
 
 html {
@@ -104,8 +184,9 @@ html {
 }
 
 body {
-  background-color: var(--background, #ffffff);
-  color: var(--foreground, #0a0a0a);
+  background-color: rgb(var(--background));
+  color: rgb(var(--foreground));
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "rlig" 1, "calt" 1;
@@ -113,7 +194,7 @@ body {
 
 /* Links */
 a {
-  color: var(--primary, #2563eb);
+  color: rgb(var(--primary));
   text-underline-offset: 4px;
 }
 
@@ -122,8 +203,7 @@ a:hover {
 }
 
 /* Remix Icons */
-i[class^="ri-"],
-i[class*=" ri-"] {
+:where(i[class^="ri-"], i[class*=" ri-"]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -310,6 +390,113 @@ i[class*=" ri-"] {
   }
 }
 
+/* -------------------------------------------------------------------------- */
+/* 5b. CHAT / TRANSCRIPT UTILITIES                                            */
+/* -------------------------------------------------------------------------- */
+/*
+ * Deliberately OUTSIDE `@layer utilities`. Anything inside that layer is subject
+ * to Tailwind's content scan, and these classes are applied from library source
+ * (or by consumers in their own markup) that a consuming app's `content` globs
+ * may not cover — inside the layer they would be silently purged.
+ */
+
+/*
+ * Scroll-aware edge fades.
+ *
+ * The fade is a `mask-image` on the scroll container itself, so the container's
+ * own pixels dissolve as they approach its padding-box edge. Long transcripts
+ * and chip rows therefore hint at more content with no overlay elements, no
+ * gradient pseudo-elements sitting on top of the background, and no scroll
+ * listeners to keep in sync. Because the mask travels with the scroller, it
+ * works the same in light and dark, and over any backdrop.
+ *
+ * Tune the fade depth per-element with `--scroll-fade-size`.
+ */
+.scroll-fade,
+.scroll-fade-y {
+  --scroll-fade-size: 1.5rem;
+  -webkit-mask-image: linear-gradient(to bottom,
+      transparent 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      transparent 100%);
+  mask-image: linear-gradient(to bottom,
+      transparent 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      transparent 100%);
+}
+
+.scroll-fade-x {
+  --scroll-fade-size: 1.5rem;
+  -webkit-mask-image: linear-gradient(to right,
+      transparent 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      transparent 100%);
+  mask-image: linear-gradient(to right,
+      transparent 0,
+      #000 var(--scroll-fade-size),
+      #000 calc(100% - var(--scroll-fade-size)),
+      transparent 100%);
+}
+
+/*
+ * Text shimmer for live status — "Thinking…", "Searching…".
+ *
+ * A gradient sweeps across the text itself via `background-clip: text`, rather
+ * than animating opacity, so the wording stays legible throughout. The gradient
+ * is built from the theme's own foreground tokens, so it tracks light and dark.
+ */
+.shimmer {
+  background-image: linear-gradient(90deg,
+      rgb(var(--muted-foreground)) 0%,
+      rgb(var(--muted-foreground)) 40%,
+      rgb(var(--foreground)) 50%,
+      rgb(var(--muted-foreground)) 60%,
+      rgb(var(--muted-foreground)) 100%);
+  background-size: 200% 100%;
+  /*
+   * `no-repeat` was the actual bug: the gradient image is only 200% wide, so
+   * as `background-position` swept it across the text, whatever fraction of
+   * the text the (finite) image no longer reached had nothing behind the
+   * transparent fill — not dimmed, genuinely invisible. That showed up two
+   * ways: fully blank for a stretch once the image swept completely past
+   * the text, and, on every sweep, part of the text (whichever side the
+   * image had already vacated) rendering as if cut off. The gradient's
+   * first and last stops both resolve to the same muted-foreground colour,
+   * so tiling it seamlessly loops — repeating keeps the text fully covered,
+   * always at least muted, for the entire animation.
+   */
+  background-repeat: repeat;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: tolle-shimmer 2.4s linear infinite;
+}
+
+@keyframes tolle-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: -100% 0;
+  }
+}
+
+/* A sweeping highlight is exactly the motion this query exists to suppress: fall
+   back to flat muted text rather than a paused, half-transparent gradient. */
+@media (prefers-reduced-motion: reduce) {
+  .shimmer {
+    animation: none;
+    background-image: none;
+    color: rgb(var(--muted-foreground));
+    -webkit-text-fill-color: currentColor;
+  }
+}
+
 /* Remove default browser focus styles */
 tolle-textarea textarea:focus {
   outline: none !important;
@@ -411,4 +598,37 @@ tolle-input:focus-within {
 /* Error state ring color */
 .ring-destructive {
   --tw-ring-color: var(--destructive) !important;
+}
+
+/* In your global styles.css or tailwind.config.js if using Tailwind */
+.rounded-sm {
+  border-radius: var(--radius-sm, 0.125rem);
+}
+
+.rounded {
+  border-radius: var(--radius, 0.25rem);
+}
+
+.rounded-md {
+  border-radius: var(--radius-md, 0.375rem);
+}
+
+.rounded-lg {
+  border-radius: var(--radius-lg, 0.5rem);
+}
+
+.rounded-xl {
+  border-radius: var(--radius-xl, 0.75rem);
+}
+
+.rounded-2xl {
+  border-radius: var(--radius-2xl, 1rem);
+}
+
+.rounded-3xl {
+  border-radius: var(--radius-3xl, 1.5rem);
+}
+
+.rounded-full {
+  border-radius: var(--radius-full, 9999px);
 }