@fromsko/chat-ui 0.0.0-stage → 0.1.6

package/src/styles/index.css

@@ -0,0 +1,3 @@
+
+@import "../tokens/theme.css";
+@import "./blocks.css";

package/src/tokens/theme.css

@@ -0,0 +1,464 @@
+
+@import "tailwindcss" source(none);
+@source "../../src/**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: var(--font-ui);
+  --font-mono: var(--font-code);
+
+
+  --text-micro: var(--text-micro);
+  --text-micro--line-height: var(--text-micro--line-height);
+  --text-meta: var(--text-meta);
+  --text-meta--line-height: var(--text-meta--line-height);
+  --text-body: var(--text-body);
+  --text-body--line-height: var(--text-body--line-height);
+  --text-label: var(--text-label);
+  --text-label--line-height: var(--text-label--line-height);
+  --text-title: var(--text-title);
+  --text-title--line-height: var(--text-title--line-height);
+  --text-heading: var(--text-heading);
+  --text-heading--line-height: var(--text-heading--line-height);
+
+
+  --text-xs: var(--text-meta);
+  --text-xs--line-height: var(--text-meta--line-height);
+  --text-sm: var(--text-title);
+  --text-sm--line-height: var(--text-title--line-height);
+  --text-base: var(--text-heading);
+  --text-base--line-height: var(--text-heading--line-height);
+  --text-lg: var(--text-heading);
+  --text-lg--line-height: var(--text-heading--line-height);
+
+
+  --color-slate-950: var(--surface-950);
+  --color-slate-900: var(--surface-900);
+  --color-slate-800: var(--surface-800);
+  --color-slate-700: var(--surface-700);
+  --color-slate-600: var(--surface-600);
+  --color-slate-500: var(--surface-500);
+  --color-slate-100: var(--text-100);
+  --color-slate-200: var(--text-200);
+  --color-slate-300: var(--text-300);
+  --color-slate-400: var(--text-400);
+
+
+  --color-background: var(--app-bg);
+  --color-foreground: var(--text-200);
+  --color-card: var(--surface-900);
+  --color-card-foreground: var(--text-200);
+  --color-popover: var(--surface-overlay);
+  --color-popover-foreground: var(--text-200);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--surface-800);
+  --color-secondary-foreground: var(--text-200);
+  --color-muted: var(--surface-800);
+  --color-muted-foreground: var(--text-400);
+  --color-accent: var(--surface-700);
+  --color-accent-foreground: var(--text-100);
+  --color-destructive: var(--accent-danger);
+  --color-destructive-foreground: #ffffff;
+  --color-success: var(--accent-success);
+  --color-success-foreground: #ffffff;
+  --color-warning: var(--accent-warning);
+  --color-warning-foreground: #ffffff;
+  --color-border: var(--border-700);
+  --color-input: var(--border-700);
+  --color-ring: var(--accent-primary-border);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+
+
+  --z-index-under-canvas: var(--z-under-canvas);
+  --z-index-canvas-overlay: var(--z-canvas-overlay);
+  --z-index-sticky: var(--z-sticky);
+  --z-index-panel: var(--z-panel);
+  --z-index-tooltip: var(--z-tooltip);
+  --z-index-modal: var(--z-modal);
+  --z-index-top: var(--z-top);
+
+  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
+
+  @keyframes shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+}
+
+@theme {
+  --shadow-md: var(--elev-shadow-md);
+  --shadow-lg: var(--elev-shadow-lg);
+}
+
+
+:root {
+  --radius: 0.625rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: 1.25rem;
+  --radius-pill: 9999px;
+  --shadow-strong: rgb(0 0 0 / 0.45);
+
+  --font-ui:
+    Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
+    "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC",
+    sans-serif;
+  --font-code:
+    "JetBrains Mono", "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace,
+    monospace;
+
+
+  --control-xs: 22px;
+  --control-sm: 28px;
+  --control-md: 32px;
+  --control-lg: 40px;
+
+  --border: var(--border-700);
+  --card: var(--surface-900);
+
+
+  --press-scale: 0.97;
+  --press-scale-sm: 0.985;
+  --transition-press: 110ms cubic-bezier(0.2, 0, 0, 1);
+  --transition-feedback: 180ms ease-out;
+
+
+  --z-under-canvas: 0;
+  --z-sticky: 1;
+  --z-canvas-overlay: 10;
+  --z-panel: 20;
+  --z-tooltip: 40;
+  --z-modal: 50;
+  --z-top: 60;
+
+  --app-bg: #0a0a0b;
+  --primary: #f5f5f4;
+  --primary-foreground: #1c1917;
+
+  --surface-950: #0a0a0b;
+  --surface-900: #101012;
+  --surface-800: #18181b;
+  --surface-700: #212124;
+  --surface-600: #2b2b30;
+  --surface-500: #3a3a41;
+  --surface-overlay: var(--surface-800);
+  --surface-sheet: var(--app-bg);
+
+  --elev-shadow-md:
+    0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.45);
+  --elev-shadow-lg:
+    0 18px 40px -12px rgb(0 0 0 / 0.7), 0 4px 12px -4px rgb(0 0 0 / 0.5);
+
+  --text-100: #fafafa;
+  --text-200: #ededf0;
+  --text-300: #d4d4d8;
+  --text-400: #a1a1aa;
+  --text-500: #a1a1aa;
+  --text-600: #71717a;
+  --text-700: #52525b;
+
+  --text-micro: 11px;
+  --text-micro--line-height: 16px;
+  --text-meta: 12px;
+  --text-meta--line-height: 18px;
+  --text-body: 13px;
+  --text-body--line-height: 20px;
+  --text-label: 13px;
+  --text-label--line-height: 20px;
+  --text-title: 14px;
+  --text-title--line-height: 22px;
+  --font-emphasis: 600;
+  --font-medium: 500;
+  --text-heading: 16px;
+  --text-heading--line-height: 24px;
+
+  --border-800: #1d1d21;
+  --border-700: #27272b;
+  --border-600: #323237;
+  --border-500: #42424a;
+
+  --border-control: #646470;
+  --border-rule: #2a2a30;
+
+  --accent-primary: #f59e0b;
+  --accent-primary-hover: #d97706;
+  --accent-primary-light: rgba(245, 158, 11, 0.14);
+  --accent-primary-border: rgba(245, 158, 11, 0.4);
+
+  --focus-ring: #f59e0b;
+  --accent-success: #22c55e;
+  --accent-warning: #eab308;
+  --accent-danger: #ef4444;
+
+
+  --diff-add-bg: rgba(34, 197, 94, 0.12);
+  --diff-add-fg: #4ade80;
+  --diff-del-bg: rgba(239, 68, 68, 0.12);
+  --diff-del-fg: #f87171;
+}
+
+
+:root[data-theme="light"] {
+  --app-bg: #f7f5ef;
+  --primary: #292524;
+  --primary-foreground: #fafaf9;
+
+
+  --surface-950: #fbf9f4;
+  --surface-900: #f4f1ea;
+  --surface-800: #ece8df;
+  --surface-700: #e2ddd1;
+  --surface-600: #d2cbb9;
+  --surface-500: #bcb39e;
+
+  --surface-overlay: #f9f7f1;
+  --surface-sheet: var(--app-bg);
+
+  --elev-shadow-md:
+    0 8px 24px -8px rgb(28 25 23 / 0.18), 0 2px 6px -2px rgb(28 25 23 / 0.12);
+  --elev-shadow-lg:
+    0 18px 40px -12px rgb(28 25 23 / 0.24), 0 4px 12px -4px rgb(28 25 23 / 0.16);
+
+  --text-100: #1c1917;
+  --text-200: #292524;
+  --text-300: #44403c;
+  --text-400: #6b655f;
+  --text-500: #6b655f;
+  --text-600: #98928b;
+  --text-700: #c2b8a6;
+
+  --border-800: #e4dfd2;
+  --border-700: #d5cdbb;
+  --border-600: #c1b69f;
+  --border-500: #a89a80;
+
+  --border-control: #95856d;
+  --border-rule: #e8e3d6;
+
+  --accent-primary: #d97706;
+  --accent-primary-hover: #b45309;
+  --accent-primary-light: rgba(217, 119, 6, 0.12);
+  --accent-primary-border: rgba(217, 119, 6, 0.55);
+
+  --focus-ring: #92400e;
+  --shadow-strong: rgb(28 25 23 / 0.18);
+  --accent-success: #16a34a;
+  --accent-warning: #ca8a04;
+  --accent-danger: #dc2626;
+
+  --diff-add-bg: rgba(22, 163, 74, 0.1);
+  --diff-add-fg: #15803d;
+  --diff-del-bg: rgba(220, 38, 38, 0.1);
+  --diff-del-fg: #b91c1c;
+}
+
+
+:root[data-theme="glass"] {
+  --app-bg: #14100c;
+  --glass-gradient: radial-gradient(
+    circle at top,
+    rgba(245, 158, 11, 0.1),
+    rgba(18, 13, 9, 0.98)
+  );
+
+  --primary: #f5f0e8;
+  --primary-foreground: #1c1917;
+
+  --surface-950: rgba(24, 19, 14, 0.92);
+  --surface-900: rgba(33, 27, 20, 0.94);
+  --surface-800: rgba(48, 39, 29, 0.92);
+  --surface-700: rgba(66, 54, 41, 0.92);
+  --surface-600: rgba(88, 73, 57, 0.92);
+  --surface-500: rgba(118, 100, 79, 0.92);
+  --surface-overlay: var(--surface-800);
+  --surface-sheet: var(--app-bg);
+
+  --elev-shadow-md:
+    0 8px 24px -8px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.4);
+  --elev-shadow-lg:
+    0 18px 40px -12px rgb(0 0 0 / 0.65), 0 4px 12px -4px rgb(0 0 0 / 0.45);
+
+  --text-100: #faf5ee;
+  --text-200: #efe7da;
+  --text-300: #ded2bf;
+  --text-400: #c3b39c;
+  --text-500: #c3b39c;
+  --text-600: #a08e75;
+  --text-700: #7f6f5b;
+
+  --border-800: rgba(224, 185, 130, 0.14);
+  --border-700: rgba(224, 185, 130, 0.22);
+  --border-600: rgba(224, 185, 130, 0.32);
+  --border-500: rgba(224, 185, 130, 0.44);
+  --border-control: rgba(224, 185, 130, 0.66);
+  --border-rule: rgba(224, 185, 130, 0.12);
+
+  --accent-primary: #f5b04c;
+  --accent-primary-hover: #e09a33;
+  --accent-primary-light: rgba(245, 176, 76, 0.14);
+  --accent-primary-border: rgba(245, 176, 76, 0.4);
+  --focus-ring: #f5b04c;
+  --shadow-strong: rgb(0 0 0 / 0.5);
+  --accent-success: #34d399;
+  --accent-warning: #fbbf24;
+  --accent-danger: #f87171;
+
+  --diff-add-bg: rgba(52, 211, 153, 0.12);
+  --diff-add-fg: #6ee7b7;
+  --diff-del-bg: rgba(248, 113, 113, 0.12);
+  --diff-del-fg: #fca5a5;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 1px;
+  }
+  body {
+    @apply bg-background text-foreground;
+    margin: 0;
+    font-family: var(--font-ui);
+  }
+  b,
+  strong {
+    font-weight: var(--font-emphasis);
+  }
+  html {
+    @apply bg-background;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-synthesis: none;
+  }
+  html[data-theme="glass"] {
+    background: var(--glass-gradient), var(--app-bg);
+  }
+
+
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  *::-webkit-scrollbar-track,
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--surface-700);
+    border-radius: 999px;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--surface-600);
+  }
+  @supports not selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: var(--surface-700) transparent;
+    }
+  }
+}
+
+
+[data-slot="dialog-content"] {
+  background-color: var(--surface-overlay);
+}
+
+
+@utility press {
+  transition: transform var(--transition-press);
+  &:active {
+    transform: scale(var(--press-scale));
+  }
+}
+@utility press-sm {
+  transition: transform var(--transition-press);
+  &:active {
+    transform: scale(var(--press-scale-sm));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .press:active,
+  .press-sm:active {
+    transform: none;
+  }
+}
+
+
+.thin_scroll {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+.thin_scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.thin_scroll::-webkit-scrollbar-thumb {
+  background-color: var(--border);
+  border-radius: 9999px;
+}
+
+
+@keyframes shimmer-slide {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.shimmer {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--text-100) 12%, transparent) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer-slide 2.4s ease-in-out infinite;
+}
+
+
+.t-strong {
+  color: color-mix(in srgb, var(--text-100) 95%, transparent);
+}
+.t-default {
+  color: color-mix(in srgb, var(--text-100) 80%, transparent);
+}
+.t-muted {
+  color: color-mix(in srgb, var(--text-100) 55%, transparent);
+}
+.t-subtle {
+  color: color-mix(in srgb, var(--text-100) 40%, transparent);
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer,
+  .gradient-text-animated {
+    animation: none !important;
+  }
+}
+
+
+[data-theme="glass"] {
+  --radius-md: 10px;
+  --radius-lg: 14px;
+}
+[data-theme="light"] {
+  --radius-md: 6px;
+  --radius-lg: 10px;
+}