/* 由 scripts/sync-tutorial-theme.mjs 从 ui/src/theme.css 同步生成——不要直接改这个文件。 改令牌请改 ui/src/theme.css，然后跑 npm run sync:tutorial */ /* ============================================================ @socialsim/ui · 设计令牌系统（编辑器与 studio 共用一份） ------------------------------------------------------------ 一个主题 = 一组「色槽」。四套主题都走「全五色画布」：每套用其配色的原始 5 支色映射到色角，并让 CANVAS 渐变铺满外壳做主体表面，面板磨砂玻璃透出底色。 两轴：palette（accent + 色调）× mode（浅/深）。useTheme() 在 上 打 data-palette / data-mode，复合选择器（更高特异性）压过通用回退。 令牌词汇：--accent --accent-2 --c3 --tint --grad-accent / --page --canvas --surface --elev --card --glass --glass-2 --border --border-2 / --text --text-dim --text-faint / --good --warn --crit。 （迁移期的临时旧令牌兼容层已于编辑器+studio 全量迁移后删除，2026-07-13。） 换主题 = 换其色块。 ============================================================ */ :root { /* ---- 与主题无关的设计常量 ---- */ --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-num: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 32px; --dur: 0.42s; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --good: #3fb27f; --warn: #e0a53a; --crit: #e05a52; --accent-ink: #ffffff; /* 面板玻璃表面不透明度（0..1）——固定，不再由用户拉杆调（避免只变亮暗）。 */ --glass-alpha: 0.82; /* 面板磨砂模糊半径（px；GlassSlider 写到 覆盖，默认比最低略多一点）。越小越通透，越大越磨砂。 */ --glass-blur: 4px; /* ---- 默认色槽（Slate；[data-palette=slate] 会再写一遍，此处供无属性时兜底） ---- */ --accent: #ef8354; --accent-2: #5f7093; --c3: #bfc0c0; --tint: #4f5d75; --grad-accent: linear-gradient(135deg, var(--accent), var(--accent-2)); /* ---- 通用中性回退（LIGHT，未指定 palette 时；大容器半透明透出 canvas） ---- */ --page: #e9ebef; --card: color-mix(in oklab, var(--tint) 5%, rgba(255, 255, 255, 0.9)); --elev: color-mix(in oklab, var(--tint) 9%, rgba(255, 255, 255, 0.82)); --surface: color-mix(in oklab, var(--tint) 4%, rgba(255, 255, 255, 0.58)); --glass: color-mix(in oklab, var(--tint) 7%, rgba(255, 255, 255, 0.4)); --glass-2: color-mix(in oklab, var(--tint) 12%, rgba(255, 255, 255, 0.3)); --border: color-mix(in oklab, var(--tint) 20%, transparent); --border-2: color-mix(in oklab, var(--tint) 34%, transparent); --text: color-mix(in oklab, var(--tint) 82%, #05070a); --text-dim: color-mix(in oklab, var(--tint) 46%, #05070a); --text-faint: color-mix(in oklab, var(--tint) 30%, #05070a); --shadow-sm: 0 1px 2px rgba(20, 26, 40, 0.06), 0 2px 8px rgba(20, 26, 40, 0.06); --shadow-md: 0 4px 16px rgba(20, 26, 40, 0.1), 0 14px 34px rgba(20, 26, 40, 0.1); --shadow-lg: 0 14px 34px rgba(20, 26, 40, 0.14), 0 34px 76px rgba(20, 26, 40, 0.18); --ring: color-mix(in oklab, var(--accent) 55%, transparent); --canvas: radial-gradient(85% 75% at 100% -12%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 55%), radial-gradient(75% 70% at -12% 112%, color-mix(in oklab, var(--tint) 12%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in oklab, var(--tint) 4%, #fff), color-mix(in oklab, var(--tint) 9%, #fff)); color-scheme: light; } /* 固定磨砂玻璃工具类（外壳/rail/弹出层）：磨砂半径写死，不受面板虚实拉杆影响—— 弹出栏、顶栏这类覆盖层始终该有稳定的磨砂，不能被调没了。 */ /* 禁手写 -webkit-backdrop-filter：生产构建的 lightningcss 会把「标准+前缀」合并成只剩前缀版， 而 Chromium(Electron) 不认该前缀 → 打包后磨砂全灭。只写标准属性，前缀由构建器按需自动补。 */ .glass-blur { backdrop-filter: blur(18px) saturate(1.2); } /* 可调磨砂的面板表面（dockview 分组等）：表面不透明度固定（--glass-alpha），磨砂半径由拉杆调。 拉杆调 --glass-blur → 面板"通透↔磨砂"（背后画布看得清/糊）实时变。 */ .glass-panel { background: color-mix(in srgb, var(--surface) calc(var(--glass-alpha) * 100%), transparent); backdrop-filter: blur(var(--glass-blur)) saturate(1.3); } /* 通用深色回退（OS 偏好；JS 上来会用 [data-mode] 覆盖） */ @media (prefers-color-scheme: dark) { :root { --page: #14161c; --card: color-mix(in oklab, var(--tint) 16%, rgba(12, 15, 22, 0.88)); --elev: color-mix(in oklab, var(--tint) 22%, rgba(12, 15, 22, 0.8)); --surface: color-mix(in oklab, var(--tint) 22%, rgba(20, 24, 32, 0.52)); --glass: color-mix(in oklab, var(--tint) 26%, rgba(14, 18, 26, 0.4)); --glass-2: color-mix(in oklab, var(--tint) 34%, rgba(20, 24, 33, 0.3)); --border: color-mix(in oklab, var(--tint) 42%, transparent); --border-2: color-mix(in oklab, var(--tint) 60%, transparent); --text: color-mix(in oklab, var(--tint) 16%, #f3f6fb); --text-dim: color-mix(in oklab, var(--tint) 42%, #eef2f8); --text-faint: color-mix(in oklab, var(--tint) 58%, #dfe6f0); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.45), 0 16px 44px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55), 0 40px 94px rgba(0, 0, 0, 0.5); --canvas: radial-gradient(85% 75% at 100% -12%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 55%), radial-gradient(75% 70% at -12% 112%, color-mix(in oklab, var(--tint) 28%, transparent), transparent 60%), linear-gradient(180deg, #0a0c11, #0d1017); color-scheme: dark; } } /* ============================================================ PALETTE × MODE — 四套主题各自的全五色画布 + 中性阶。 ============================================================ */ /* ---------- Slate（枪灰/银/石板蓝 + 珊瑚橙）2d3142·bfc0c0·ffffff·ef8354·4f5d75 ---------- */ :root[data-palette='slate'] { --accent: #ef8354; --accent-2: #5f7093; --c3: #bfc0c0; --tint: #4f5d75; } :root[data-palette='slate'][data-mode='light'] { --page: #e9ebef; --card: rgba(255, 255, 255, 0.9); --elev: rgba(246, 247, 249, 0.82); --surface: rgba(255, 255, 255, 0.56); --glass: rgba(252, 253, 255, 0.4); --glass-2: rgba(236, 238, 242, 0.3); --border: #d7dbe2; --border-2: #b6bcc7; --text: #2d3142; --text-dim: #565f73; --text-faint: #8890a0; --canvas: radial-gradient(66% 62% at 100% -2%, color-mix(in oklab, #ef8354 44%, transparent), transparent 58%), radial-gradient(64% 66% at 0% 4%, color-mix(in oklab, #4f5d75 42%, transparent), transparent 58%), radial-gradient(70% 72% at 80% 108%, color-mix(in oklab, #bfc0c0 74%, transparent), transparent 62%), radial-gradient(84% 72% at 46% 48%, color-mix(in oklab, #8a94a8 30%, transparent), transparent 72%), linear-gradient(158deg, #f3f4f7, #e4e7ec); } :root[data-palette='slate'][data-mode='dark'] { --accent: #f2925f; --accent-2: #8593b3; --c3: #bfc0c0; --page: #1a1e28; --card: rgba(30, 34, 45, 0.86); --elev: rgba(36, 41, 54, 0.78); --surface: rgba(44, 50, 66, 0.5); --glass: rgba(26, 30, 41, 0.4); --glass-2: rgba(38, 44, 58, 0.3); --border: #3a4056; --border-2: #525a72; --text: #eef0f5; --text-dim: #b8bfd0; --text-faint: #8791a6; --canvas: radial-gradient(66% 62% at 100% -2%, color-mix(in oklab, #ef8354 40%, transparent), transparent 58%), radial-gradient(64% 66% at 0% 4%, color-mix(in oklab, #4f5d75 80%, transparent), transparent 58%), radial-gradient(72% 74% at 82% 108%, color-mix(in oklab, #2d3142 92%, transparent), transparent 62%), linear-gradient(158deg, #242838, #1a1e28); } /* ---------- Cyan（近黑 + 青 & 橙红）30bced·303036·fffaff·fc5130·050401 ---------- */ :root[data-palette='cyan'] { --accent: #30bced; --accent-2: #fc5130; --c3: #63cef2; --tint: #303036; } :root[data-palette='cyan'][data-mode='light'] { --page: #eef0f4; --card: rgba(255, 255, 255, 0.9); --elev: rgba(247, 246, 249, 0.82); --surface: rgba(255, 255, 255, 0.56); --glass: rgba(253, 252, 255, 0.4); --glass-2: rgba(238, 238, 242, 0.3); --border: #d9dade; --border-2: #b8b9c0; --text: #161619; --text-dim: #4a4a52; --text-faint: #84848e; --canvas: radial-gradient(64% 62% at 0% 0%, color-mix(in oklab, #30bced 56%, transparent), transparent 58%), radial-gradient(60% 58% at 100% 2%, color-mix(in oklab, #fc5130 50%, transparent), transparent 58%), radial-gradient(84% 74% at 50% 50%, color-mix(in oklab, #30bced 26%, transparent), transparent 72%), linear-gradient(160deg, #fbfaff, #eef0f4); } :root[data-palette='cyan'][data-mode='dark'] { --accent: #30bced; --accent-2: #fc5130; --c3: #63cef2; --page: #0a0a0c; --card: rgba(20, 20, 23, 0.88); --elev: rgba(28, 28, 32, 0.8); --surface: rgba(36, 36, 42, 0.5); --glass: rgba(12, 12, 14, 0.42); --glass-2: rgba(28, 28, 33, 0.3); --border: #2c2c34; --border-2: #44444e; --text: #fffaff; --text-dim: #c2c2ca; --text-faint: #82828c; --canvas: radial-gradient(64% 62% at 0% 0%, color-mix(in oklab, #30bced 54%, transparent), transparent 58%), radial-gradient(60% 58% at 100% 2%, color-mix(in oklab, #fc5130 44%, transparent), transparent 58%), radial-gradient(80% 72% at 55% 106%, color-mix(in oklab, #303036 90%, transparent), transparent 66%), linear-gradient(160deg, #050401, #141416); } /* ---------- Azure（蓝色阶）04080f·507dbc·a1c6ea·bbd1ea·dae3e5 ---------- */ :root[data-palette='azure'] { --accent: #507dbc; --accent-2: #7fb2e6; --c3: #a1c6ea; --tint: #3a5a82; } :root[data-palette='azure'][data-mode='light'] { --page: #dce8f2; --card: rgba(250, 252, 254, 0.9); --elev: rgba(238, 244, 250, 0.82); --surface: rgba(252, 254, 255, 0.56); --glass: rgba(250, 253, 255, 0.4); --glass-2: rgba(226, 236, 247, 0.32); --border: #c3d5e6; --border-2: #9db9d6; --text: #081524; --text-dim: #3c587a; --text-faint: #6f8aa8; --canvas: radial-gradient(64% 62% at 2% 0%, color-mix(in oklab, #a1c6ea 88%, transparent), transparent 60%), radial-gradient(78% 74% at 100% 4%, color-mix(in oklab, #507dbc 60%, transparent), transparent 60%), radial-gradient(72% 80% at 76% 108%, color-mix(in oklab, #bbd1ea 92%, transparent), transparent 64%), radial-gradient(88% 74% at 48% 46%, color-mix(in oklab, #8fb8e2 40%, transparent), transparent 72%), linear-gradient(158deg, #dfeaf4, #cbdcec); } :root[data-palette='azure'][data-mode='dark'] { --accent: #5f97d6; --accent-2: #a1c6ea; --c3: #7c9fc4; --page: #06101c; --card: rgba(9, 17, 30, 0.86); --elev: rgba(12, 22, 38, 0.78); --surface: rgba(16, 29, 48, 0.5); --glass: rgba(9, 18, 32, 0.4); --glass-2: rgba(15, 27, 46, 0.3); --border: #20395a; --border-2: #39597f; --text: #dae3e5; --text-dim: #a1c6ea; --text-faint: #6d90b6; --canvas: radial-gradient(64% 62% at 2% 0%, color-mix(in oklab, #507dbc 50%, transparent), transparent 55%), radial-gradient(78% 72% at 100% 6%, color-mix(in oklab, #12365f 88%, transparent), transparent 55%), radial-gradient(72% 80% at 72% 108%, #0d2947, transparent 60%), linear-gradient(158deg, #04080f, #0a1524); } /* ---------- Pastel（马卡龙极光）79addc·ffc09f·ffee93·fcf5c7·adf7b6 ---------- */ :root[data-palette='pastel'] { --accent: #5b93cf; --accent-2: #f0a878; --c3: #6fc593; --tint: #79addc; --good: #57c489; --warn: #d3a02f; } :root[data-palette='pastel'][data-mode='light'] { --page: #fce6c8; --card: rgba(255, 253, 247, 0.9); --elev: rgba(253, 248, 235, 0.82); --surface: rgba(255, 254, 250, 0.54); --glass: rgba(255, 254, 249, 0.38); --glass-2: rgba(252, 246, 224, 0.3); --border: #ecdcb8; --border-2: #d3bf8e; --text: #38454e; --text-dim: #6a7873; --text-faint: #9aa596; --canvas: radial-gradient(58% 56% at 0% -2%, color-mix(in oklab, #79addc 70%, transparent), transparent 58%), radial-gradient(56% 54% at 100% 0%, color-mix(in oklab, #ffc09f 78%, transparent), transparent 58%), radial-gradient(60% 60% at 90% 108%, color-mix(in oklab, #adf7b6 70%, transparent), transparent 60%), radial-gradient(64% 58% at 8% 108%, color-mix(in oklab, #ffee93 66%, transparent), transparent 60%), radial-gradient(86% 72% at 50% 48%, color-mix(in oklab, #ffcdad 42%, transparent), transparent 70%), linear-gradient(160deg, #fdf3df, #fce7c9); } :root[data-palette='pastel'][data-mode='dark'] { --accent: #79addc; --accent-2: #ffc09f; --c3: #adf7b6; --good: #8ee3ad; --warn: #ffee93; --page: #191c20; --card: rgba(29, 34, 40, 0.86); --elev: rgba(34, 39, 46, 0.78); --surface: rgba(38, 44, 52, 0.5); --glass: rgba(24, 28, 34, 0.4); --glass-2: rgba(34, 39, 46, 0.3); --border: #353c45; --border-2: #4c5661; --text: #eef2ec; --text-dim: #bac3b6; --text-faint: #8b9488; --canvas: radial-gradient(56% 54% at 4% 0%, color-mix(in oklab, #79addc 40%, transparent), transparent 55%), radial-gradient(54% 52% at 98% 2%, color-mix(in oklab, #ffc09f 34%, transparent), transparent 55%), radial-gradient(56% 56% at 84% 106%, color-mix(in oklab, #adf7b6 30%, transparent), transparent 55%), linear-gradient(160deg, #16191d, #1e2329); } /* ============================================================ 组件库 — 薄 React 包装（ui.tsx）消费这些类。样式全走令牌，换主题即联动。 ============================================================ */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-ui); font-size: 13px; font-weight: 560; padding: 8px 15px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: transform 0.18s var(--ease-spring), background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .ui-btn:active { transform: scale(0.96); } .ui-btn:disabled { opacity: 0.5; pointer-events: none; } .ui-btn i { font-size: 15px; line-height: 1; } .ui-btn--sm { padding: 5px 11px; font-size: 12px; gap: 5px; } .ui-btn--sm i { font-size: 14px; } .ui-btn--primary { background: var(--grad-accent); color: var(--accent-ink); box-shadow: 0 3px 12px color-mix(in oklab, var(--accent) 40%, transparent); } .ui-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 48%, transparent); } /* ghost = 次级按钮：用近实的 card 底从玻璃面板上浮出来（不再与背景一致），hover 点亮 accent 描边+文字。 */ .ui-btn--ghost { background: var(--card); color: var(--text); border-color: var(--border-2); backdrop-filter: blur(8px); } .ui-btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .ui-btn--danger { background: color-mix(in oklab, var(--crit) 13%, transparent); color: var(--crit); border-color: color-mix(in oklab, var(--crit) 30%, transparent); } .ui-btn--danger:hover { background: color-mix(in oklab, var(--crit) 22%, transparent); } .ui-iconbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--border-2); background: var(--card); color: var(--text-dim); cursor: pointer; transition: 0.2s var(--ease); } .ui-iconbtn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); } .ui-iconbtn i { font-size: 16px; } .ui-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 560; padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); } .ui-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ui-chip--good { color: var(--good); background: color-mix(in oklab, var(--good) 14%, transparent); border-color: transparent; } .ui-chip--warn { color: var(--warn); background: color-mix(in oklab, var(--warn) 16%, transparent); border-color: transparent; } .ui-chip--crit { color: var(--crit); background: color-mix(in oklab, var(--crit) 14%, transparent); border-color: transparent; } .ui-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); } .ui-toggle { position: relative; width: 42px; height: 24px; border-radius: var(--r-pill); border: 0; background: var(--border-2); cursor: pointer; transition: background 0.25s var(--ease); flex: none; } .ui-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left 0.28s var(--ease-spring); } .ui-toggle[aria-checked='true'] { background: var(--accent); } .ui-toggle[aria-checked='true']::after { left: 21px; } .ui-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 3px; gap: 2px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--glass-2); backdrop-filter: blur(12px); } .ui-seg button { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 560; padding: 5px 13px; border-radius: var(--r-pill); cursor: pointer; transition: color 0.2s, transform 0.2s var(--ease-spring); } .ui-seg button:active { transform: scale(0.94); } .ui-seg button:hover:not([aria-pressed='true']) { color: var(--text); } /* 选中态用配色高亮：accent 淡填充 + accent 文字 + accent 描边，一眼看出选了哪个。 */ .ui-seg button[aria-pressed='true'] { background: color-mix(in oklab, var(--accent) 20%, var(--card)); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 42%, transparent), var(--shadow-sm); } .ui-input { font: inherit; font-size: 12px; line-height: 1.4; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 9px; outline: none; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .ui-input::placeholder { color: var(--text-faint); } .ui-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }