leefer/xiaobaifupan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rebuild(stage-4): deliver shared shell and account interfaces

Browse Source
This commit is contained in:
leefer
2026-07-30 02:08:20 +08:00
parent d1c658d8ef
commit 3b75bf2d63
47 changed files with 3042 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
next/frontend/src/shared/styles/tokens.css
+182 -28
View File
@@ -1,37 +1,191 @@
:root {
color-scheme: light;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 13px;
color: #1f2937;
background: #f4f5f7;
--canvas: #f4f5f7;
--surface: #ffffff;
--border: #e5e7eb;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--primary: #2563eb;
--warning: #b45309;
/* Primitive color tokens */
--c-blue-600: #2563eb;
--c-blue-700: #1d4ed8;
--c-blue-050: #eff4ff;
--c-blue-200: #c7d8fb;
--c-red-600: #e04536;
--c-red-050: #fdecea;
--c-green-600: #16a34a;
--c-green-050: #e9f7ee;
--c-amber-700: #b45309;
--c-amber-050: #fdf3e3;
--c-gray-950: #121416;
--c-gray-900: #1b1e21;
--c-gray-850: #202428;
--c-gray-800: #24282d;
--c-gray-700: #343a40;
--c-gray-650: #474f57;
--c-gray-100: #f4f5f7;
--c-gray-075: #f8fafc;
--c-gray-050: #ffffff;
--c-text-900: #1f2937;
--c-text-700: #374151;
--c-text-600: #4b5563;
--c-text-500: #6b7280;
--c-text-400: #9ca3af;
--c-line-200: #e5e7eb;
--c-line-100: #eef0f3;
--c-night-text-900: #e8eaed;
--c-night-text-600: #adb5bd;
--c-night-text-400: #7f8993;
--c-night-blue: #6ca8e8;
--c-night-blue-hover: #8bbcf0;
--c-night-blue-soft: #23364a;
--c-night-red: #f06d73;
--c-night-red-soft: #40262a;
--c-night-green: #43bc8a;
--c-night-green-soft: #1d382f;
--c-night-amber: #e2ad58;
--c-night-amber-soft: #3d3220;
--c-transparent: transparent;
--space-8: 8px;
--space-16: 16px;
--space-22: 22px;
--radius-card: 10px;
--font-page-title: 17px;
--shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
/* Primitive dimensions */
--s-1: 1px;
--s-2: 2px;
--s-4: 4px;
--s-6: 6px;
--s-7: 7px;
--s-8: 8px;
--s-9: 9px;
--s-10: 10px;
--s-11: 11px;
--s-12: 12px;
--s-13: 13px;
--s-14: 14px;
--s-16: 16px;
--s-18: 18px;
--s-20: 20px;
--s-22: 22px;
--s-24: 24px;
--s-26: 26px;
--s-28: 28px;
--s-30: 30px;
--s-32: 32px;
--s-34: 34px;
--s-36: 36px;
--s-40: 40px;
--s-44: 44px;
--s-46: 46px;
--s-56: 56px;
--s-64: 64px;
--s-200: 200px;
--s-260: 260px;
--s-320: 320px;
--s-360: 360px;
--s-400: 400px;
--s-dialog: 512px;
--s-dialog-wide: 768px;
--s-content-max: 2200px;
--s-field: 340px;
/* Primitive typography */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Kaiti SC", "STKaiti", "KaiTi", "STSong", "SimSun", serif;
--font-10-5: 10.5px;
--font-11: 11px;
--font-11-5: 11.5px;
--font-12: 12px;
--font-12-5: 12.5px;
--font-13: 13px;
--font-14: 14px;
--font-15: 15px;
--font-17: 17px;
--font-18: 18px;
--weight-400: 400;
--weight-500: 500;
--weight-600: 600;
--weight-700: 700;
--weight-800: 800;
/* Primitive effects */
--radius-4: 4px;
--radius-5: 5px;
--radius-6: 6px;
--radius-7: 7px;
--radius-10: 10px;
--radius-round: 999px;
--shadow-card-light: 0 1px 2px rgba(16, 24, 40, 0.05);
--shadow-card-dark: 0 1px 2px rgba(0, 0, 0, 0.28);
--shadow-float: 0 12px 32px rgba(0, 0, 0, 0.18);
--duration-fast: 160ms;
--duration-normal: 220ms;
--ease-standard: ease;
--opacity-disabled: 0.52;
--opacity-muted: 0.72;
--scale-pulse: 0.84;
--z-table: 2;
--z-topbar: 50;
--z-status: 55;
--z-sidebar: 60;
--z-mobile-nav: 70;
--z-popover: 100;
--z-dialog: 200;
--z-toast: 240;
/* Semantic tokens */
--color-canvas: var(--c-gray-100);
--color-surface: var(--c-gray-050);
--color-surface-muted: var(--c-gray-075);
--color-surface-raised: var(--c-gray-050);
--color-text: var(--c-text-900);
--color-text-secondary: var(--c-text-500);
--color-text-faint: var(--c-text-400);
--color-border: var(--c-line-200);
--color-divider: var(--c-line-100);
--color-primary: var(--c-blue-600);
--color-primary-hover: var(--c-blue-700);
--color-primary-soft: var(--c-blue-050);
--color-primary-border: var(--c-blue-200);
--color-up: var(--c-red-600);
--color-up-soft: var(--c-red-050);
--color-down: var(--c-green-600);
--color-down-soft: var(--c-green-050);
--color-warning: var(--c-amber-700);
--color-warning-soft: var(--c-amber-050);
--color-overlay: rgba(18, 20, 22, 0.46);
--shadow-card: var(--shadow-card-light);
/* Component tokens */
--shell-sidebar-width: var(--s-200);
--shell-topbar-height: var(--s-46);
--shell-summary-height: var(--s-36);
--shell-status-height: var(--s-30);
--shell-mobile-nav-height: var(--s-56);
--page-padding-y: var(--s-14);
--page-padding-x: var(--s-16);
--layout-gap: var(--s-12);
--control-height: var(--s-32);
--touch-height: var(--s-44);
--card-radius: var(--radius-10);
--control-radius: var(--radius-7);
--tag-radius: var(--radius-5);
--focus-ring: 0 0 0 var(--s-2) var(--color-canvas), 0 0 0 var(--s-4) var(--color-primary);
}
:root[data-theme="dark"] {
color-scheme: dark;
color: #e8eaed;
background: #121416;
--canvas: #121416;
--surface: #1b1e21;
--border: #343a40;
--text-primary: #e8eaed;
--text-secondary: #adb5bd;
--primary: #6ca8e8;
--warning: #e2ad58;
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28);
--color-canvas: var(--c-gray-950);
--color-surface: var(--c-gray-900);
--color-surface-muted: var(--c-gray-850);
--color-surface-raised: var(--c-gray-800);
--color-text: var(--c-night-text-900);
--color-text-secondary: var(--c-night-text-600);
--color-text-faint: var(--c-night-text-400);
--color-border: var(--c-gray-700);
--color-divider: var(--c-gray-700);
--color-primary: var(--c-night-blue);
--color-primary-hover: var(--c-night-blue-hover);
--color-primary-soft: var(--c-night-blue-soft);
--color-primary-border: var(--c-gray-650);
--color-up: var(--c-night-red);
--color-up-soft: var(--c-night-red-soft);
--color-down: var(--c-night-green);
--color-down-soft: var(--c-night-green-soft);
--color-warning: var(--c-night-amber);
--color-warning-soft: var(--c-night-amber-soft);
--color-overlay: rgba(0, 0, 0, 0.64);
--shadow-card: var(--shadow-card-dark);
}