Files
cozsweet-frontend-nextjs/src/tokens/colors.css
T
admin 674df49e24 style(sidebar): align /sidebar screen with Flutter original
Match the Dart lib/ui/sidebar/sidebar_screen.dart + profile_view.dart
exactly:
- White inner shell with 24px padding
- Back button row (arrow icon + "Back" text, no "Profile" header)
- Single "Other" section with one "Log out" row
- Drop profile card, Account/Data/Session sections, and Sign-in CTA

Match Flutter row visuals in the shared SettingsSection:
- Gray (#f5f5f5) rounded row pill on a white card
- 20px chevron, 1px rgba(61,49,74,0.5) divider
- Destructive color #ff6b6b, 14px/600 black section title

Add tokens: --color-settings-card-background, --color-settings-row-background,
--color-settings-divider, --color-chevron-icon, --color-destructive.

Wire the BlocConsumer listener equivalent: on currentUser transitioning to
null, dispatch ChatAuthStatusChanged + AuthReset and router.replace("/chat").

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-11 14:02:52 +08:00

94 lines
3.0 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* 颜色 token
* 原始 Dart: lib/design/colors.dart (light 主题)
*
* 使用 `@theme` 直接声明,Tailwind 4 自动生成 utility 类:
* - bg-accent / text-primary / border-error
*
* 对应组件用法(CSS Module / Tailwind class):
* - `var(--color-accent)` 或 `className="bg-accent"`
*/
@theme {
/* ==================== 文字颜色 ==================== */
--color-text-primary: #ffffff;
--color-text-secondary: #9e9e9e;
--color-text-hint: #757575;
--color-text-banner: #8c8b8b;
--color-text-light: #e0e0e0;
--color-text-foreground: #171717;
/* ==================== 品牌色 ==================== */
--color-accent: #f84d96;
--color-primary: #1677ff;
--color-success: #52c41a;
--color-error: #ff4d4f;
--color-warning: #ffa940;
--color-button-gradient-start: #ff67e0;
--color-button-gradient-end: #ff52a2;
/* ==================== 页面背景(body 用) ==================== */
--color-page-background: #ffffff;
/* ==================== 扩展令牌(迁移自 Flutter UI ==================== */
/* 侧边栏/Profile 深色背景 */
--color-sidebar-background: #0d0b14;
--color-dark-background: #0d0b14;
--color-dark-gray: #2a2a2a;
--color-bubble-background: #1a1625;
--color-bubble-transparent: rgba(255, 255, 255, 0);
/* 聊天输入框 */
--color-chat-input-border: rgba(255, 255, 255, 0.1);
--color-input-box-shadow: rgba(0, 0, 0, 0.1);
--color-input-placeholder: #757575;
--color-pwa-button-text: #ffffff;
/* Facebook 蓝 */
--color-facebook-blue: #1877f2;
/* Dialog 通用 */
--color-dialog-background: #1f1a2e;
--color-dialog-border: rgba(255, 255, 255, 0.1);
/* 半透明 / 模糊 */
--color-blur-background: rgba(13, 11, 20, 0.85);
/* ==================== Auth 页专用(与 Dart auth_screen.dart 对齐) ==================== */
/* 浅色表面(Auth 页内容卡片 / 弹层背景) */
--color-auth-surface: #ffffff;
/* 弹层内第三方登录按钮边框 */
--color-auth-border: #d5d7db;
/* Auth 页输入框占位符 */
--color-auth-input-placeholder: #999999;
/* Auth 页文字主色(深色,区别于全局白字) */
--color-auth-text-primary: #333333;
--color-auth-text-secondary: #9e9e9e;
/* Auth 输入框阴影(accent #f759a8 10% 透明) */
--color-auth-input-shadow: rgba(247, 89, 168, 0.10);
/* Auth 主按钮阴影(#d00c41 20% 透明) */
--color-auth-primary-button-shadow: rgba(208, 12, 65, 0.20);
/* Auth 主按钮渐变(与 Dart primaryGradient 对齐) */
--color-auth-primary-gradient-start: #f96ade;
--color-auth-primary-gradient-end: #f657a0;
/* Legal 复选框选中点 */
--color-auth-legal-check: #f657a0;
/* 底部弹层 drag handle */
--color-auth-drag-handle: #3a3a3a;
/* Settings section (对齐 Flutter lib/ui/core/settings_section.dart) */
--color-settings-card-background: #ffffff;
--color-settings-row-background: #f5f5f5;
--color-settings-divider: #3d314a;
--color-chevron-icon: #000000;
--color-destructive: #ff6b6b;
}