c4c5ce3c2d
* fix(ui): make the light theme a real light theme The web shell hardcoded dark surfaces (panel hex, white/black alphas, white text), so switching to light left the sidebar, chat, composer and side panel dark with ink text on top. Shell surfaces now use the shared tokens: light gets a warm paper frame with white panels, hairline borders and short soft shadows; dark keeps its look via dark: variants. - Light palette: visible borders (border was equal to muted), white primary-foreground, lighter user bubble, readable warning/success. - Selected sidebar row lives in one place (roster-row-style). - Markdown, inline code, code blocks, quotes and scrollbars follow tokens. - cn() now knows the text-ui-* scale is a font size; tailwind-merge treated it as a color and dropped labels' color on resized buttons (sign-up submit rendered ink on ink). - Stage bloom was offset left by a double translateX. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016or6oqCqP8wbNafvhnbLQT * refactor(ui-web): leave the cn() fix to #115 #115 fixes the same tailwind-merge bug more completely (text, control, icon and spacing scales, guarded against styles.css) and adds the same two files, so this branch drops its narrower copy to avoid the overlap. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016or6oqCqP8wbNafvhnbLQT --------- Co-authored-by: Claude <noreply@anthropic.com>
127 lines
3.3 KiB
CSS
127 lines
3.3 KiB
CSS
/* Generated by `pnpm --filter @rakazo/ui-tokens generate`. Edit src/index.ts instead. */
|
|
|
|
:root,
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--background: #07080a;
|
|
--foreground: #f3f4f6;
|
|
--card: #0f1115;
|
|
--card-foreground: #f3f4f6;
|
|
--popover: #12151b;
|
|
--popover-foreground: #f3f4f6;
|
|
--primary: #ffffff;
|
|
--primary-foreground: #07080a;
|
|
--secondary: #151820;
|
|
--secondary-foreground: #f3f4f6;
|
|
--chat-user: #161b26;
|
|
--chat-user-foreground: #f9fafb;
|
|
--muted: #12151b;
|
|
--muted-foreground: #a1a8b5;
|
|
--accent: #1a1e29;
|
|
--accent-foreground: #ffffff;
|
|
--destructive: #ff453a;
|
|
--destructive-foreground: #ffffff;
|
|
--border: #1c202b;
|
|
--input: #13161d;
|
|
--ring: #0a84ff;
|
|
--sidebar: #0b0c10;
|
|
--sidebar-foreground: #f3f4f6;
|
|
--sidebar-border: #161820;
|
|
--sidebar-accent: #171a23;
|
|
--sidebar-accent-foreground: #ffffff;
|
|
--link: #0a84ff;
|
|
--success: #30d158;
|
|
--warning: #ffd60a;
|
|
--overlay: rgba(3, 4, 6, 0.78);
|
|
--scrollbar: #1c202b;
|
|
--scrollbar-hover: #2c3242;
|
|
--radius: 0.75rem;
|
|
--font-size-caption: 0.75rem;
|
|
--font-size-label: 0.84375rem;
|
|
--font-size-body-sm: 0.875rem;
|
|
--font-size-body: 0.96875rem;
|
|
--font-size-reading: 1.0625rem;
|
|
--font-size-title-sm: 1.125rem;
|
|
--font-size-title: 1.25rem;
|
|
--line-height-body: 1.5;
|
|
--line-height-reading: 1.65;
|
|
--line-height-tight: 1.3;
|
|
--icon-sm: 1rem;
|
|
--icon-md: 1.125rem;
|
|
--icon-lg: 1.25rem;
|
|
--control-height-xs: 1.75rem;
|
|
--control-height-sm: 2.25rem;
|
|
--control-height-md: 2.5rem;
|
|
--control-height-lg: 2.75rem;
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 0.75rem;
|
|
--spacing-lg: 1rem;
|
|
--spacing-xl: 1.25rem;
|
|
--spacing-shell: 0.625rem;
|
|
--spacing-sidebar-row-x: 0.75rem;
|
|
--spacing-sidebar-row-y: 0.625rem;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
color-scheme: light;
|
|
--background: #ffffff;
|
|
--foreground: #1a1a1a;
|
|
--card: #ffffff;
|
|
--card-foreground: #1a1a1a;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #1a1a1a;
|
|
--primary: #1a1a1a;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #f4f4f1;
|
|
--secondary-foreground: #1a1a1a;
|
|
--chat-user: #efefeb;
|
|
--chat-user-foreground: #1a1a1a;
|
|
--muted: #f4f4f1;
|
|
--muted-foreground: #67676c;
|
|
--accent: #ecece8;
|
|
--accent-foreground: #1a1a1a;
|
|
--destructive: #dc2626;
|
|
--destructive-foreground: #ffffff;
|
|
--border: #e5e5e0;
|
|
--input: #dadad4;
|
|
--ring: #9c9c97;
|
|
--sidebar: #f5f5f2;
|
|
--sidebar-foreground: #1a1a1a;
|
|
--sidebar-border: #e8e8e3;
|
|
--sidebar-accent: #ffffff;
|
|
--sidebar-accent-foreground: #1a1a1a;
|
|
--link: #2563eb;
|
|
--success: #1e7f37;
|
|
--warning: #a16207;
|
|
--overlay: rgba(24, 24, 22, 0.28);
|
|
--scrollbar: #d3d3cd;
|
|
--scrollbar-hover: #b3b3ac;
|
|
--radius: 0.75rem;
|
|
--font-size-caption: 0.75rem;
|
|
--font-size-label: 0.84375rem;
|
|
--font-size-body-sm: 0.875rem;
|
|
--font-size-body: 0.96875rem;
|
|
--font-size-reading: 1.0625rem;
|
|
--font-size-title-sm: 1.125rem;
|
|
--font-size-title: 1.25rem;
|
|
--line-height-body: 1.5;
|
|
--line-height-reading: 1.65;
|
|
--line-height-tight: 1.3;
|
|
--icon-sm: 1rem;
|
|
--icon-md: 1.125rem;
|
|
--icon-lg: 1.25rem;
|
|
--control-height-xs: 1.75rem;
|
|
--control-height-sm: 2.25rem;
|
|
--control-height-md: 2.5rem;
|
|
--control-height-lg: 2.75rem;
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 0.75rem;
|
|
--spacing-lg: 1rem;
|
|
--spacing-xl: 1.25rem;
|
|
--spacing-shell: 0.625rem;
|
|
--spacing-sidebar-row-x: 0.75rem;
|
|
--spacing-sidebar-row-y: 0.625rem;
|
|
}
|