@kitn.ai/chat/theme.css

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

/* @kitn.ai/chat design system — import after `@import "tailwindcss"`.
   Defines ONLY namespaced (--color-*) tokens, component keyframes, animation
   utilities, and the .chat-markdown styles. Contains NO global base/reset rules,
   so importing it restyles nothing on its own — a host opts in via the kit's
   components + classes. Rebrand by overriding the --color-* values (optionally
   scoped to a subtree). */
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme {
  --color-background: var(--kc-color-background, hsl(0 0% 100%));
  --color-foreground: var(--kc-color-foreground, hsl(240 10% 3.9%));
  --color-card: var(--kc-color-card, hsl(0 0% 100%));
  --color-card-foreground: var(--kc-color-card-foreground, hsl(240 10% 3.9%));
  --color-popover: var(--kc-color-popover, hsl(0 0% 100%));
  --color-popover-foreground: var(--kc-color-popover-foreground, hsl(240 10% 3.9%));
  --color-primary: var(--kc-color-primary, hsl(240 5.9% 10%));
  --color-primary-foreground: var(--kc-color-primary-foreground, hsl(0 0% 98%));
  --color-secondary: var(--kc-color-secondary, hsl(240 4.8% 95.9%));
  --color-secondary-foreground: var(--kc-color-secondary-foreground, hsl(240 5.9% 10%));
  --color-muted: var(--kc-color-muted, hsl(240 4.8% 95.9%));
  --color-muted-foreground: var(--kc-color-muted-foreground, hsl(240 3.8% 43%));
  --color-accent: var(--kc-color-accent, hsl(240 4.8% 95.9%));
  --color-accent-foreground: var(--kc-color-accent-foreground, hsl(240 5.9% 10%));
  --color-destructive: var(--kc-color-destructive, hsl(0 72% 45%));
  --color-destructive-foreground: var(--kc-color-destructive-foreground, hsl(0 0% 98%));
  --color-border: var(--kc-color-border, hsl(240 5.9% 90%));
  --color-input: var(--kc-color-input, hsl(240 5.9% 90%));
  /* Focus ring — a deliberate blue (not a neutral) so keyboard focus is always
     obvious and on-brand in both modes. Light uses a strong blue; dark uses a
     brighter one for contrast on dark surfaces. Both clear WCAG 2.1 non-text
     contrast (≥3:1) against the kit's backgrounds. Override via --kc-color-ring. */
  --color-ring: var(--kc-color-ring, hsl(217 91% 53%));
  /* Custom scrollbars — thin, rounded, subtle; thumb strengthens on hover. A
     consistent cross-platform look (the kit styles its OWN scroll regions inside
     the shadow root; the track stays transparent so nothing is forced where no
     scrollbar is needed). Override via --kc-color-scrollbar-thumb(-hover). */
  --color-scrollbar-thumb: var(--kc-color-scrollbar-thumb, hsl(240 5% 80%));
  --color-scrollbar-thumb-hover: var(--kc-color-scrollbar-thumb-hover, hsl(240 4% 64%));
  --color-sidebar: var(--kc-color-sidebar, hsl(0 0% 100%));

  /* Inline `code` accent. Blue text on a translucent blue chip. */
  --color-code-foreground: var(--kc-color-code-foreground, hsl(224.3 76.3% 48%));

  /* Tool/status chip hues. Each chip is hue text over a 15% translucent fill of
     the SAME hue (set in tool.tsx). The bare hue is too light to reach WCAG AA
     (4.5:1) on the faint fill in LIGHT mode, so the light values are darkened;
     dark mode keeps brighter hues for AA on the dark fill. Override via
     --kc-color-tool-* to retheme. */
  --color-tool-blue: var(--kc-color-tool-blue, hsl(217 91% 38%));
  --color-tool-amber: var(--kc-color-tool-amber, hsl(38 92% 28%));
  --color-tool-green: var(--kc-color-tool-green, hsl(142 71% 26%));
  --color-tool-red: var(--kc-color-tool-red, hsl(0 72% 42%));

  --radius: var(--kc-radius, 0.6rem);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Typography scale — semantic sizes shared by all components. Each generates a
     Tailwind utility (text-caption / text-meta / text-body / text-title). To
     restyle the kit's typography, override the namespaced --kc-text-* token on
     :root (e.g. `--kc-text-body: 0.9375rem`) — it pierces the Shadow DOM via the
     var() fallback, exactly like the --kc-color-* tokens. The bare --text-*
     names stay internal so a host's own --text-* can't collide. (Message/markdown/
     input reading size also scales with the `proseSize` prop; these tokens cover
     the fixed chrome & controls.) */
  --text-caption: var(--kc-text-caption, 0.6875rem);  --text-caption--line-height: 1rem;      /* 11px — micro labels, badges, sub-counts */
  --text-meta: var(--kc-text-meta, 0.75rem);     --text-meta--line-height: 1.1rem;       /* 12px — controls, toggles, switchers, captions */
  --text-body: var(--kc-text-body, 0.875rem);    --text-body--line-height: 1.45rem;      /* 14px — primary reading text */
  --text-title: var(--kc-text-title, 1rem);        --text-title--line-height: 1.5rem;      /* 16px — emphasis / headers */

  @keyframes typing { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-2px); opacity: 1 } }
  @keyframes loading-dots { 0%,100% { opacity: 0 } 50% { opacity: 1 } }
  @keyframes wave { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.6) } }
  @keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
  @keyframes text-blink { 0%,100% { color: var(--color-primary) } 50% { color: var(--color-muted-foreground) } }
  @keyframes bounce-dots { 0%,100% { transform: scale(.8); opacity: .5 } 50% { transform: scale(1.2); opacity: 1 } }
  @keyframes thin-pulse { 0%,100% { transform: scale(.95); opacity: .8 } 50% { transform: scale(1.05); opacity: .4 } }
  @keyframes pulse-dot { 0%,100% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.5); opacity: 1 } }
  @keyframes shimmer-text { 0% { background-position: 150% center } 100% { background-position: -150% center } }
  @keyframes wave-bars { 0%,100% { transform: scaleY(1); opacity: .5 } 50% { transform: scaleY(.6); opacity: 1 } }
  @keyframes shimmer { 0% { background-position: 200% 50% } 100% { background-position: -200% 50% } }
  @keyframes spinner-fade { 0% { opacity: 0 } 100% { opacity: 1 } }
  @keyframes collapsible-down { from { height: 0; opacity: 0 } to { height: var(--kb-collapsible-content-height); opacity: 1 } }
  @keyframes collapsible-up { from { height: var(--kb-collapsible-content-height); opacity: 1 } to { height: 0; opacity: 0 } }
}

.dark {
  --color-background: var(--kc-color-background, hsl(50 2% 9%));
  --color-foreground: var(--kc-color-foreground, hsl(0 0% 98%));
  --color-card: var(--kc-color-card, hsl(45 4% 12%));
  --color-card-foreground: var(--kc-color-card-foreground, hsl(0 0% 98%));
  --color-popover: var(--kc-color-popover, hsl(45 4% 12%));
  --color-popover-foreground: var(--kc-color-popover-foreground, hsl(0 0% 98%));
  --color-primary: var(--kc-color-primary, hsl(0 0% 98%));
  --color-primary-foreground: var(--kc-color-primary-foreground, hsl(45 4% 11%));
  --color-secondary: var(--kc-color-secondary, hsl(45 4% 17%));
  --color-secondary-foreground: var(--kc-color-secondary-foreground, hsl(0 0% 98%));
  --color-muted: var(--kc-color-muted, hsl(45 4% 17%));
  --color-muted-foreground: var(--kc-color-muted-foreground, hsl(45 4% 64%));
  --color-accent: var(--kc-color-accent, hsl(45 4% 17%));
  --color-accent-foreground: var(--kc-color-accent-foreground, hsl(0 0% 98%));
  --color-destructive: var(--kc-color-destructive, hsl(0 62.8% 30.6%));
  --color-destructive-foreground: var(--kc-color-destructive-foreground, hsl(0 0% 98%));
  --color-border: var(--kc-color-border, hsl(45 4% 17%));
  --color-input: var(--kc-color-input, hsl(45 4% 17%));
  --color-ring: var(--kc-color-ring, hsl(217 91% 68%));
  --color-scrollbar-thumb: var(--kc-color-scrollbar-thumb, hsl(45 3% 30%));
  --color-scrollbar-thumb-hover: var(--kc-color-scrollbar-thumb-hover, hsl(45 3% 42%));
  --color-sidebar: var(--kc-color-sidebar, hsl(50 2% 7%));
  --color-code-foreground: var(--kc-color-code-foreground, hsl(213 94% 78%));

  /* Tool/status chip hues — dark mode. Brighter hues reach AA on the dark fill. */
  --color-tool-blue: var(--kc-color-tool-blue, hsl(217 91% 70%));
  --color-tool-amber: var(--kc-color-tool-amber, hsl(38 92% 50%));
  --color-tool-green: var(--kc-color-tool-green, hsl(142 71% 45%));
  --color-tool-red: var(--kc-color-tool-red, hsl(0 84% 70%));
}

/* Self-contained markdown styling — replaces the typography plugin's `prose`.
   Keyed on --color-* tokens so it themes with the rest of the kit. */
.chat-markdown { color: var(--color-foreground); line-height: 1.6; }
.chat-markdown > div:first-child > :first-child { margin-top: 0; }
.chat-markdown > div:last-child > :last-child { margin-bottom: 0; }
.chat-markdown p { margin: 0 0 0.75em; }
.chat-markdown p:last-child { margin-bottom: 0; }
.chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4 {
  margin: 1.2em 0 0.5em; font-weight: 600; line-height: 1.3; color: var(--color-foreground);
}
.chat-markdown h1 { font-size: 1.4em; } .chat-markdown h2 { font-size: 1.25em; }
.chat-markdown h3 { font-size: 1.1em; } .chat-markdown h4 { font-size: 1em; }
.chat-markdown ul, .chat-markdown ol { margin: 0 0 0.75em; padding-left: 1.4em; }
.chat-markdown li { margin: 0.2em 0; }
.chat-markdown ul { list-style: disc; } .chat-markdown ol { list-style: decimal; }
.chat-markdown a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.chat-markdown strong { font-weight: 600; color: var(--color-foreground); }
.chat-markdown em { font-style: italic; }
.chat-markdown blockquote {
  margin: 0 0 0.75em; padding-left: 0.9em; border-left: 2px solid var(--color-border);
  color: var(--color-muted-foreground);
}
.chat-markdown hr { margin: 1em 0; border: 0; border-top: 1px solid var(--color-border); }
.chat-markdown code:not(pre code) {
  background: color-mix(in oklab, var(--color-code-foreground) 15%, transparent);
  color: var(--color-code-foreground);
  border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.875em;
  font-family: var(--kc-font-code, ui-monospace, "SF Mono", Menlo, monospace);
}
.chat-markdown table { width: 100%; border-collapse: collapse; margin: 0 0 0.75em; font-size: 0.9em; }
.chat-markdown th, .chat-markdown td { border: 1px solid var(--color-border); padding: 0.4em 0.6em; text-align: left; }
.chat-markdown th { font-weight: 600; background: color-mix(in oklab, var(--color-muted-foreground) 8%, transparent); }

/* Themeable elevation. The kit is mostly flat (borders), but a few surfaces lift
   off the page — popovers, dropdowns, hover cards, cards. The shadow COLOR is a
   token (--kc-shadow-color, default near-black); set it transparent for a fully
   flat look, or tint it to match a theme. Defined here (not as a Tailwind shadow
   utility) so the color stays overridable and works in both the web-component and
   SolidJS layers. */
.kc-elevation {
  box-shadow:
    0 4px 12px -2px color-mix(in oklab, var(--kc-shadow-color, oklch(0 0 0)) 14%, transparent),
    0 2px 6px -2px color-mix(in oklab, var(--kc-shadow-color, oklch(0 0 0)) 10%, transparent);
}
.kc-elevation-sm {
  box-shadow: 0 1px 2px 0 color-mix(in oklab, var(--kc-shadow-color, oklch(0 0 0)) 8%, transparent);
}

/* Cross-platform thin scrollbar utility (Firefox + WebKit). Used by ScrollArea
   and any scroll region in the SolidJS-component build (web components also get
   this globally inside their shadow root — see src/elements/styles.css). */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}
.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); }
.scrollbar-thin::-webkit-scrollbar-corner { background: transparent; }