feat(ds-flow): Phase 1.1-1.2 — 原型单源目录 + tokens.css 迁为真源
- design/prototype/serve.mjs:零依赖热重载预览服务器(照搬 jiu,check-ds 存在性守护,Phase 5 前静默跳过) - design/prototype/tokens.css:token 真源(现结构已满足 ds-flow 的 base :root + [data-theme=dark],字节迁移保证 codegen 零 diff) - design/colors_and_type.css:退化为薄 @import 别名(供历史 preview/*.html 浏览器内引用;codegen 不再读它) - 三个 codegen(Flutter gen_flutter_tokens / website+usercenter build-tokens) + drift 检查全部重指向 prototype/tokens.css - 生成产物 diff 仅头注释源路径行,token 数值零变化(已验证) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangjia
@@ -1,7 +1,7 @@
|
||||
#!/usr/bin/env bash
|
||||
# check-codegen-drift.sh — codegen 漂移检查(支柱 2:契约单源 / token 单源)。
|
||||
#
|
||||
# design/colors_and_type.css 是唯一 token 真相源,client/lib/pangolin_tokens.gen.dart
|
||||
# design/prototype/tokens.css 是唯一 token 真相源,client/lib/pangolin_tokens.gen.dart
|
||||
# 由 design/codegen/gen_flutter_tokens.mjs 生成、勿手改(CLAUDE.md 铁律)。本检查重新
|
||||
# 生成一遍,若生成物与已提交版本不一致 → 漂移:要么改了 CSS 没重生成,要么手改了
|
||||
# 生成物。两者都会让"单源"失效、契约悄悄分叉。
|
||||
@@ -22,7 +22,7 @@ echo "→ 重新生成 Flutter token (design/codegen/gen_flutter_tokens.mjs) ...
|
||||
node design/codegen/gen_flutter_tokens.mjs
|
||||
|
||||
if ! git diff --quiet -- "$GEN"; then
|
||||
echo "❌ codegen 漂移：$GEN 与 design/colors_and_type.css 不一致。" >&2
|
||||
echo "❌ codegen 漂移：$GEN 与 design/prototype/tokens.css 不一致。" >&2
|
||||
echo " 原因:改了 CSS 真相源却没重生成,或手改了生成物(铁律:勿手改 *.gen.dart)。" >&2
|
||||
echo " 修复:node design/codegen/gen_flutter_tokens.mjs 后提交生成物。" >&2
|
||||
echo " ── diff(前 40 行)──" >&2
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// pangolin_tokens.gen.dart
|
||||
// AUTO-GENERATED — 勿手改。
|
||||
// 源: design/colors_and_type.css
|
||||
// 源: design/prototype/tokens.css
|
||||
// 生成器: design/codegen/gen_flutter_tokens.mjs
|
||||
//
|
||||
// 包含：PangolinColors · PangolinSpacing · PangolinRadius · PangolinMotion · PangolinShadow
|
||||
@@ -9,7 +9,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// ── Primitive color ramps ───────────────────────────────────────────
|
||||
/// Auto-generated from design/colors_and_type.css :root color ramps.
|
||||
/// Auto-generated from design/prototype/tokens.css :root color ramps.
|
||||
class PangolinColors {
|
||||
PangolinColors._();
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
/**
|
||||
* gen_flutter_tokens.mjs — CSS token → Dart codegen
|
||||
*
|
||||
* 唯一真相源：design/colors_and_type.css
|
||||
* 唯一真相源：design/prototype/tokens.css
|
||||
* 输出： client/lib/pangolin_tokens.gen.dart
|
||||
*
|
||||
* 生成内容（纯数据层，无 Flutter 实现逻辑）：
|
||||
@@ -20,7 +20,7 @@ import { fileURLToPath } from 'node:url';
|
||||
import { dirname, resolve } from 'node:path';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const SRC = resolve(__dirname, '../colors_and_type.css');
|
||||
const SRC = resolve(__dirname, '../prototype/tokens.css');
|
||||
const OUT = resolve(__dirname, '../../client/lib/pangolin_tokens.gen.dart');
|
||||
|
||||
if (!existsSync(SRC)) {
|
||||
@@ -125,7 +125,7 @@ const lines = [];
|
||||
|
||||
lines.push(`// pangolin_tokens.gen.dart`);
|
||||
lines.push(`// AUTO-GENERATED — 勿手改。`);
|
||||
lines.push(`// 源: design/colors_and_type.css`);
|
||||
lines.push(`// 源: design/prototype/tokens.css`);
|
||||
lines.push(`// 生成器: design/codegen/gen_flutter_tokens.mjs`);
|
||||
lines.push(`//`);
|
||||
lines.push(`// 包含：PangolinColors · PangolinSpacing · PangolinRadius · PangolinMotion · PangolinShadow`);
|
||||
@@ -136,7 +136,7 @@ lines.push(``);
|
||||
|
||||
// ── PangolinColors ──────────────────────────────────────────────────
|
||||
lines.push(`/// ── Primitive color ramps ───────────────────────────────────────────`);
|
||||
lines.push(`/// Auto-generated from design/colors_and_type.css :root color ramps.`);
|
||||
lines.push(`/// Auto-generated from design/prototype/tokens.css :root color ramps.`);
|
||||
lines.push(`class PangolinColors {`);
|
||||
lines.push(` PangolinColors._();`);
|
||||
lines.push(``);
|
||||
|
||||
+6
-216
@@ -1,218 +1,8 @@
|
||||
/* =============================================================
|
||||
穿山甲 VPN · Pangolin VPN — Design Tokens
|
||||
colors_and_type.css
|
||||
Single source of truth: color ramps, semantic colors (light + dark),
|
||||
typography, spacing, radii, shadows, motion.
|
||||
穿山甲 VPN · Pangolin VPN — Design Tokens (兼容别名)
|
||||
⚠️ 真源已迁至 design/prototype/tokens.css（ds-flow 原型单源）。
|
||||
本文件仅为浏览器内 @import 转发,供仍 <link> 此路径的历史 preview/*.html 使用。
|
||||
codegen（Flutter gen_flutter_tokens.mjs / Web build-tokens.mjs）已改读 prototype/tokens.css。
|
||||
改 token 只改 design/prototype/tokens.css,勿在此加变量（不会被 codegen 解析）。
|
||||
============================================================= */
|
||||
|
||||
/* ---- Webfonts (open-source; documented as the brand's chosen faces) ----
|
||||
Sora — display / headings (geometric, friendly)
|
||||
Manrope — body / UI (humanist geometric)
|
||||
Noto Sans SC — Chinese (CJK companion)
|
||||
JetBrains Mono — data readouts (IP, speed, keys) */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
/* ===========================================================
|
||||
1. PRIMITIVE COLOR RAMPS
|
||||
=========================================================== */
|
||||
|
||||
/* Clay / Copper — the pangolin-armor primary (warm earth) */
|
||||
--clay-50: #FAF3ED;
|
||||
--clay-100: #F2E2D4;
|
||||
--clay-200: #E6C7AC;
|
||||
--clay-300: #D9A982;
|
||||
--clay-400: #CC8B5C;
|
||||
--clay-500: #B96A3D; /* ← brand primary */
|
||||
--clay-600: #9E5630;
|
||||
--clay-700: #7E4426;
|
||||
--clay-800: #5E331D;
|
||||
--clay-900: #3D2213;
|
||||
|
||||
/* Sand / Taupe — warm neutral ramp */
|
||||
--sand-50: #FAF8F4;
|
||||
--sand-100: #F2EEE7;
|
||||
--sand-200: #E6DFD3;
|
||||
--sand-300: #D2C8B8;
|
||||
--sand-400: #B0A491;
|
||||
--sand-500: #8C8270;
|
||||
--sand-600: #6B6253;
|
||||
--sand-700: #4E4940;
|
||||
--sand-800: #2E2A24;
|
||||
--sand-900: #1F1C18;
|
||||
--sand-950: #14110E; /* warm espresso near-black */
|
||||
|
||||
/* Semantic hues (earth-tuned) */
|
||||
--green-400: #7FB07A;
|
||||
--green-500: #5B8C5A; /* connected / secure */
|
||||
--green-600: #467046;
|
||||
--amber-400: #E2B05A;
|
||||
--amber-500: #D69A3C; /* connecting / warning */
|
||||
--amber-600: #B47E29;
|
||||
--red-400: #D4715A;
|
||||
--red-500: #C0533B; /* error / disconnect */
|
||||
--red-600: #9E4230;
|
||||
|
||||
/* ===========================================================
|
||||
2. SEMANTIC TOKENS — LIGHT THEME (default)
|
||||
=========================================================== */
|
||||
|
||||
/* Backgrounds & surfaces */
|
||||
--bg: var(--sand-50); /* app canvas */
|
||||
--bg-subtle: var(--sand-100); /* striped / inset regions */
|
||||
--surface: #FFFFFF; /* cards, sheets */
|
||||
--surface-2: var(--sand-50); /* nested surface */
|
||||
--overlay: rgba(31, 28, 24, 0.45);
|
||||
|
||||
/* Foreground / text */
|
||||
--fg1: var(--sand-900); /* primary text */
|
||||
--fg2: var(--sand-600); /* secondary text */
|
||||
--fg3: var(--sand-500); /* tertiary / captions */
|
||||
--fg-on-accent: #FFFFFF; /* text on clay fills */
|
||||
|
||||
/* Brand / accent */
|
||||
--accent: var(--clay-500);
|
||||
--accent-hover: var(--clay-600);
|
||||
--accent-press: var(--clay-700);
|
||||
--accent-subtle: var(--clay-50);
|
||||
--accent-border: var(--clay-200);
|
||||
|
||||
/* Borders & lines */
|
||||
--border: var(--sand-200);
|
||||
--border-strong: var(--sand-300);
|
||||
--ring: rgba(185, 106, 61, 0.35); /* focus ring (clay) */
|
||||
|
||||
/* Status */
|
||||
--success: var(--green-500);
|
||||
--success-subtle: #E9F0E6;
|
||||
--warning: var(--amber-500);
|
||||
--warning-subtle: #F8EED6;
|
||||
--danger: var(--red-500);
|
||||
--danger-subtle: #F6E1DA;
|
||||
|
||||
/* ===========================================================
|
||||
3. TYPOGRAPHY
|
||||
=========================================================== */
|
||||
--font-display: 'Sora', 'Noto Sans SC', system-ui, sans-serif;
|
||||
--font-sans: 'Manrope', 'Noto Sans SC', system-ui, sans-serif;
|
||||
--font-cjk: 'Noto Sans SC', 'Manrope', system-ui, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
|
||||
|
||||
/* Type scale (root 16px) */
|
||||
--text-display-xl: 3rem; /* 48 */
|
||||
--text-display: 2.25rem; /* 36 */
|
||||
--text-h1: 1.875rem; /* 30 */
|
||||
--text-h2: 1.5rem; /* 24 */
|
||||
--text-h3: 1.25rem; /* 20 */
|
||||
--text-body-lg: 1.125rem; /* 18 */
|
||||
--text-body: 1rem; /* 16 */
|
||||
--text-sm: 0.875rem; /* 14 */
|
||||
--text-caption: 0.75rem; /* 12 */
|
||||
|
||||
--leading-tight: 1.15;
|
||||
--leading-snug: 1.3;
|
||||
--leading-normal:1.5;
|
||||
--leading-relaxed:1.65;
|
||||
|
||||
--tracking-tight: -0.02em;
|
||||
--tracking-snug: -0.01em;
|
||||
--tracking-wide: 0.04em;
|
||||
--tracking-caps: 0.08em;
|
||||
|
||||
/* ===========================================================
|
||||
4. SPACING (4px base)
|
||||
=========================================================== */
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem; /* 4 */
|
||||
--space-2: 0.5rem; /* 8 */
|
||||
--space-3: 0.75rem; /* 12 */
|
||||
--space-4: 1rem; /* 16 */
|
||||
--space-5: 1.25rem; /* 20 */
|
||||
--space-6: 1.5rem; /* 24 */
|
||||
--space-8: 2rem; /* 32 */
|
||||
--space-10: 2.5rem; /* 40 */
|
||||
--space-12: 3rem; /* 48 */
|
||||
--space-16: 4rem; /* 64 */
|
||||
|
||||
/* ===========================================================
|
||||
5. RADII (generous = friendly)
|
||||
=========================================================== */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
--radius-xl: 20px;
|
||||
--radius-2xl: 28px;
|
||||
--radius-full: 999px;
|
||||
|
||||
/* ===========================================================
|
||||
6. SHADOWS (warm-tinted, soft)
|
||||
=========================================================== */
|
||||
--shadow-sm: 0 1px 2px rgba(45, 30, 20, 0.06);
|
||||
--shadow-md: 0 4px 14px rgba(45, 30, 20, 0.08);
|
||||
--shadow-lg: 0 12px 32px rgba(45, 30, 20, 0.12);
|
||||
--shadow-xl: 0 24px 60px rgba(45, 30, 20, 0.16);
|
||||
--shadow-focus: 0 0 0 4px var(--ring);
|
||||
|
||||
/* ===========================================================
|
||||
7. MOTION
|
||||
=========================================================== */
|
||||
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
|
||||
--dur-fast: 140ms; /* @kind other */
|
||||
--dur-base: 220ms; /* @kind other */
|
||||
--dur-slow: 360ms; /* @kind other */
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
DARK THEME — warm espresso
|
||||
Apply via [data-theme="dark"] on <html> or any container.
|
||||
=========================================================== */
|
||||
[data-theme="dark"] {
|
||||
--bg: var(--sand-950);
|
||||
--bg-subtle: var(--sand-900);
|
||||
--surface: #221E19;
|
||||
--surface-2: #2A251F;
|
||||
--overlay: rgba(0, 0, 0, 0.6);
|
||||
|
||||
--fg1: #F4EFE8;
|
||||
--fg2: #B6AC9C;
|
||||
--fg3: #897F6F;
|
||||
--fg-on-accent: #1F1C18;
|
||||
|
||||
--accent: var(--clay-400);
|
||||
--accent-hover: var(--clay-300);
|
||||
--accent-press: var(--clay-500);
|
||||
--accent-subtle: rgba(204, 139, 92, 0.14);
|
||||
--accent-border: rgba(204, 139, 92, 0.30);
|
||||
|
||||
--border: rgba(242, 238, 231, 0.10);
|
||||
--border-strong: rgba(242, 238, 231, 0.18);
|
||||
--ring: rgba(204, 139, 92, 0.45);
|
||||
|
||||
--success: var(--green-400);
|
||||
--success-subtle: rgba(127, 176, 122, 0.16);
|
||||
--warning: var(--amber-400);
|
||||
--warning-subtle: rgba(226, 176, 90, 0.16);
|
||||
--danger: var(--red-400);
|
||||
--danger-subtle: rgba(212, 113, 90, 0.16);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
|
||||
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
|
||||
--shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
SEMANTIC TYPE CLASSES (use directly in markup)
|
||||
=========================================================== */
|
||||
.t-display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
|
||||
.t-display { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
|
||||
.t-h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
|
||||
.t-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
|
||||
.t-h3 { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug); }
|
||||
.t-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 400; line-height: var(--leading-relaxed); }
|
||||
.t-body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: var(--leading-normal); }
|
||||
.t-sm { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-normal); }
|
||||
.t-caption { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 500; line-height: var(--leading-normal); }
|
||||
.t-overline { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
|
||||
.t-mono { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; font-feature-settings: 'tnum' 1; }
|
||||
@import url('./prototype/tokens.css');
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
// 零依赖本地热重载静态服务器 — pangolin 原型单源预览
|
||||
// 用法: node design/prototype/serve.mjs [port] 默认 5180
|
||||
// 评审给 URL,不截图(ds-flow L3)。
|
||||
import http from 'node:http';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { spawn } from 'node:child_process';
|
||||
|
||||
const ROOT = path.dirname(fileURLToPath(import.meta.url));
|
||||
const PORT = Number(process.argv[2]) || 5180;
|
||||
|
||||
const MIME = {
|
||||
'.html': 'text/html; charset=utf-8',
|
||||
'.css': 'text/css; charset=utf-8',
|
||||
'.js': 'text/javascript; charset=utf-8',
|
||||
'.mjs': 'text/javascript; charset=utf-8',
|
||||
'.json': 'application/json; charset=utf-8',
|
||||
'.svg': 'image/svg+xml',
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.woff2': 'font/woff2',
|
||||
'.otf': 'font/otf',
|
||||
'.ttf': 'font/ttf',
|
||||
};
|
||||
|
||||
const clients = new Set();
|
||||
const RELOAD_SNIPPET = `\n<script>
|
||||
(function(){ try{
|
||||
var es=new EventSource('/__reload');
|
||||
es.onmessage=function(){ location.reload(); };
|
||||
}catch(e){} })();
|
||||
</script>\n`;
|
||||
|
||||
const server = http.createServer((req, res) => {
|
||||
if (req.url === '/__reload') {
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'text/event-stream',
|
||||
'Cache-Control': 'no-cache',
|
||||
Connection: 'keep-alive',
|
||||
});
|
||||
res.write('retry: 500\n\n');
|
||||
clients.add(res);
|
||||
req.on('close', () => clients.delete(res));
|
||||
return;
|
||||
}
|
||||
|
||||
let urlPath = decodeURIComponent(req.url.split('?')[0]);
|
||||
if (urlPath === '/') urlPath = '/index.html';
|
||||
const filePath = path.join(ROOT, urlPath);
|
||||
if (!filePath.startsWith(ROOT)) { res.writeHead(403); res.end('forbidden'); return; }
|
||||
|
||||
fs.readFile(filePath, (err, data) => {
|
||||
if (err) { res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' }); res.end('<h1>404</h1>'); return; }
|
||||
const ext = path.extname(filePath).toLowerCase();
|
||||
const mime = MIME[ext] || 'application/octet-stream';
|
||||
const noCache = { 'Cache-Control': 'no-store, no-cache, must-revalidate', 'Pragma': 'no-cache', 'Expires': '0' };
|
||||
if (ext === '.html') {
|
||||
const html = data.toString('utf8').replace('</body>', RELOAD_SNIPPET + '</body>');
|
||||
res.writeHead(200, { 'Content-Type': mime, ...noCache });
|
||||
res.end(html);
|
||||
} else {
|
||||
res.writeHead(200, { 'Content-Type': mime, ...noCache });
|
||||
res.end(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 设计系统守门:启动 + 每次改动自动跑 check-ds.mjs(Phase 5 建立后生效)。
|
||||
const CHECK_DS = path.join(ROOT, 'tools', 'check-ds.mjs');
|
||||
function runDsCheck() {
|
||||
if (!fs.existsSync(CHECK_DS)) return; // Phase 5 前无闸,静默跳过
|
||||
const p = spawn(process.execPath, [CHECK_DS], { cwd: ROOT });
|
||||
let out = '';
|
||||
p.stdout.on('data', d => out += d);
|
||||
p.stderr.on('data', d => out += d);
|
||||
p.on('close', code => {
|
||||
const t = new Date().toLocaleTimeString();
|
||||
if (code === 0) console.log(`\x1b[32m[设计系统 ✓ ${t}] 颜色全部走 token、变量均已定义\x1b[0m`);
|
||||
else console.log(`\x1b[31m[设计系统 ✗ ${t}] 存在违规 —— 运行 node tools/check-ds.mjs 看详情\x1b[0m`);
|
||||
});
|
||||
}
|
||||
|
||||
let debounce;
|
||||
fs.watch(ROOT, { recursive: true }, (_ev, file) => {
|
||||
if (file && file.endsWith('serve.mjs')) return;
|
||||
clearTimeout(debounce);
|
||||
debounce = setTimeout(() => {
|
||||
for (const c of clients) c.write('data: reload\n\n');
|
||||
if (file && /\.(html|css|js)$/.test(file)) runDsCheck();
|
||||
}, 80);
|
||||
});
|
||||
|
||||
server.listen(PORT, () => {
|
||||
console.log(`prototype live at http://localhost:${PORT}/ (watching ${ROOT})`);
|
||||
runDsCheck();
|
||||
});
|
||||
@@ -0,0 +1,218 @@
|
||||
/* =============================================================
|
||||
穿山甲 VPN · Pangolin VPN — Design Tokens
|
||||
colors_and_type.css
|
||||
Single source of truth: color ramps, semantic colors (light + dark),
|
||||
typography, spacing, radii, shadows, motion.
|
||||
============================================================= */
|
||||
|
||||
/* ---- Webfonts (open-source; documented as the brand's chosen faces) ----
|
||||
Sora — display / headings (geometric, friendly)
|
||||
Manrope — body / UI (humanist geometric)
|
||||
Noto Sans SC — Chinese (CJK companion)
|
||||
JetBrains Mono — data readouts (IP, speed, keys) */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
/* ===========================================================
|
||||
1. PRIMITIVE COLOR RAMPS
|
||||
=========================================================== */
|
||||
|
||||
/* Clay / Copper — the pangolin-armor primary (warm earth) */
|
||||
--clay-50: #FAF3ED;
|
||||
--clay-100: #F2E2D4;
|
||||
--clay-200: #E6C7AC;
|
||||
--clay-300: #D9A982;
|
||||
--clay-400: #CC8B5C;
|
||||
--clay-500: #B96A3D; /* ← brand primary */
|
||||
--clay-600: #9E5630;
|
||||
--clay-700: #7E4426;
|
||||
--clay-800: #5E331D;
|
||||
--clay-900: #3D2213;
|
||||
|
||||
/* Sand / Taupe — warm neutral ramp */
|
||||
--sand-50: #FAF8F4;
|
||||
--sand-100: #F2EEE7;
|
||||
--sand-200: #E6DFD3;
|
||||
--sand-300: #D2C8B8;
|
||||
--sand-400: #B0A491;
|
||||
--sand-500: #8C8270;
|
||||
--sand-600: #6B6253;
|
||||
--sand-700: #4E4940;
|
||||
--sand-800: #2E2A24;
|
||||
--sand-900: #1F1C18;
|
||||
--sand-950: #14110E; /* warm espresso near-black */
|
||||
|
||||
/* Semantic hues (earth-tuned) */
|
||||
--green-400: #7FB07A;
|
||||
--green-500: #5B8C5A; /* connected / secure */
|
||||
--green-600: #467046;
|
||||
--amber-400: #E2B05A;
|
||||
--amber-500: #D69A3C; /* connecting / warning */
|
||||
--amber-600: #B47E29;
|
||||
--red-400: #D4715A;
|
||||
--red-500: #C0533B; /* error / disconnect */
|
||||
--red-600: #9E4230;
|
||||
|
||||
/* ===========================================================
|
||||
2. SEMANTIC TOKENS — LIGHT THEME (default)
|
||||
=========================================================== */
|
||||
|
||||
/* Backgrounds & surfaces */
|
||||
--bg: var(--sand-50); /* app canvas */
|
||||
--bg-subtle: var(--sand-100); /* striped / inset regions */
|
||||
--surface: #FFFFFF; /* cards, sheets */
|
||||
--surface-2: var(--sand-50); /* nested surface */
|
||||
--overlay: rgba(31, 28, 24, 0.45);
|
||||
|
||||
/* Foreground / text */
|
||||
--fg1: var(--sand-900); /* primary text */
|
||||
--fg2: var(--sand-600); /* secondary text */
|
||||
--fg3: var(--sand-500); /* tertiary / captions */
|
||||
--fg-on-accent: #FFFFFF; /* text on clay fills */
|
||||
|
||||
/* Brand / accent */
|
||||
--accent: var(--clay-500);
|
||||
--accent-hover: var(--clay-600);
|
||||
--accent-press: var(--clay-700);
|
||||
--accent-subtle: var(--clay-50);
|
||||
--accent-border: var(--clay-200);
|
||||
|
||||
/* Borders & lines */
|
||||
--border: var(--sand-200);
|
||||
--border-strong: var(--sand-300);
|
||||
--ring: rgba(185, 106, 61, 0.35); /* focus ring (clay) */
|
||||
|
||||
/* Status */
|
||||
--success: var(--green-500);
|
||||
--success-subtle: #E9F0E6;
|
||||
--warning: var(--amber-500);
|
||||
--warning-subtle: #F8EED6;
|
||||
--danger: var(--red-500);
|
||||
--danger-subtle: #F6E1DA;
|
||||
|
||||
/* ===========================================================
|
||||
3. TYPOGRAPHY
|
||||
=========================================================== */
|
||||
--font-display: 'Sora', 'Noto Sans SC', system-ui, sans-serif;
|
||||
--font-sans: 'Manrope', 'Noto Sans SC', system-ui, sans-serif;
|
||||
--font-cjk: 'Noto Sans SC', 'Manrope', system-ui, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
|
||||
|
||||
/* Type scale (root 16px) */
|
||||
--text-display-xl: 3rem; /* 48 */
|
||||
--text-display: 2.25rem; /* 36 */
|
||||
--text-h1: 1.875rem; /* 30 */
|
||||
--text-h2: 1.5rem; /* 24 */
|
||||
--text-h3: 1.25rem; /* 20 */
|
||||
--text-body-lg: 1.125rem; /* 18 */
|
||||
--text-body: 1rem; /* 16 */
|
||||
--text-sm: 0.875rem; /* 14 */
|
||||
--text-caption: 0.75rem; /* 12 */
|
||||
|
||||
--leading-tight: 1.15;
|
||||
--leading-snug: 1.3;
|
||||
--leading-normal:1.5;
|
||||
--leading-relaxed:1.65;
|
||||
|
||||
--tracking-tight: -0.02em;
|
||||
--tracking-snug: -0.01em;
|
||||
--tracking-wide: 0.04em;
|
||||
--tracking-caps: 0.08em;
|
||||
|
||||
/* ===========================================================
|
||||
4. SPACING (4px base)
|
||||
=========================================================== */
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem; /* 4 */
|
||||
--space-2: 0.5rem; /* 8 */
|
||||
--space-3: 0.75rem; /* 12 */
|
||||
--space-4: 1rem; /* 16 */
|
||||
--space-5: 1.25rem; /* 20 */
|
||||
--space-6: 1.5rem; /* 24 */
|
||||
--space-8: 2rem; /* 32 */
|
||||
--space-10: 2.5rem; /* 40 */
|
||||
--space-12: 3rem; /* 48 */
|
||||
--space-16: 4rem; /* 64 */
|
||||
|
||||
/* ===========================================================
|
||||
5. RADII (generous = friendly)
|
||||
=========================================================== */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
--radius-xl: 20px;
|
||||
--radius-2xl: 28px;
|
||||
--radius-full: 999px;
|
||||
|
||||
/* ===========================================================
|
||||
6. SHADOWS (warm-tinted, soft)
|
||||
=========================================================== */
|
||||
--shadow-sm: 0 1px 2px rgba(45, 30, 20, 0.06);
|
||||
--shadow-md: 0 4px 14px rgba(45, 30, 20, 0.08);
|
||||
--shadow-lg: 0 12px 32px rgba(45, 30, 20, 0.12);
|
||||
--shadow-xl: 0 24px 60px rgba(45, 30, 20, 0.16);
|
||||
--shadow-focus: 0 0 0 4px var(--ring);
|
||||
|
||||
/* ===========================================================
|
||||
7. MOTION
|
||||
=========================================================== */
|
||||
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
|
||||
--dur-fast: 140ms; /* @kind other */
|
||||
--dur-base: 220ms; /* @kind other */
|
||||
--dur-slow: 360ms; /* @kind other */
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
DARK THEME — warm espresso
|
||||
Apply via [data-theme="dark"] on <html> or any container.
|
||||
=========================================================== */
|
||||
[data-theme="dark"] {
|
||||
--bg: var(--sand-950);
|
||||
--bg-subtle: var(--sand-900);
|
||||
--surface: #221E19;
|
||||
--surface-2: #2A251F;
|
||||
--overlay: rgba(0, 0, 0, 0.6);
|
||||
|
||||
--fg1: #F4EFE8;
|
||||
--fg2: #B6AC9C;
|
||||
--fg3: #897F6F;
|
||||
--fg-on-accent: #1F1C18;
|
||||
|
||||
--accent: var(--clay-400);
|
||||
--accent-hover: var(--clay-300);
|
||||
--accent-press: var(--clay-500);
|
||||
--accent-subtle: rgba(204, 139, 92, 0.14);
|
||||
--accent-border: rgba(204, 139, 92, 0.30);
|
||||
|
||||
--border: rgba(242, 238, 231, 0.10);
|
||||
--border-strong: rgba(242, 238, 231, 0.18);
|
||||
--ring: rgba(204, 139, 92, 0.45);
|
||||
|
||||
--success: var(--green-400);
|
||||
--success-subtle: rgba(127, 176, 122, 0.16);
|
||||
--warning: var(--amber-400);
|
||||
--warning-subtle: rgba(226, 176, 90, 0.16);
|
||||
--danger: var(--red-400);
|
||||
--danger-subtle: rgba(212, 113, 90, 0.16);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
|
||||
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
|
||||
--shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/* ===========================================================
|
||||
SEMANTIC TYPE CLASSES (use directly in markup)
|
||||
=========================================================== */
|
||||
.t-display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
|
||||
.t-display { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
|
||||
.t-h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
|
||||
.t-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
|
||||
.t-h3 { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug); }
|
||||
.t-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); font-weight: 400; line-height: var(--leading-relaxed); }
|
||||
.t-body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: var(--leading-normal); }
|
||||
.t-sm { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-normal); }
|
||||
.t-caption { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 500; line-height: var(--leading-normal); }
|
||||
.t-overline { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
|
||||
.t-mono { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; font-feature-settings: 'tnum' 1; }
|
||||
@@ -37,8 +37,8 @@
|
||||
把散在 `ui_kits/`（6 端 jsx/css 原型）+ `preview/`（20 规格 HTML）+ `_ds_manifest.json`（登记簿）
|
||||
的东西收敛成 ds-flow 标准三件套。
|
||||
|
||||
- [ ] 1.1 建 `design/prototype/` 目录；`serve.mjs` 照搬 jiu（零依赖热重载，默认端口按 jiu）
|
||||
- [ ] 1.2 `design/prototype/tokens.css`：从现有 `colors_and_type.css` 迁移/规整为
|
||||
- [x] 1.1 建 `design/prototype/` 目录；`serve.mjs` 照搬 jiu（零依赖热重载，默认端口按 jiu）
|
||||
- [x] 1.2 `design/prototype/tokens.css`：从现有 `colors_and_type.css` 迁移/规整为
|
||||
「基础 `:root`（主题无关标量：间距/圆角/字号/字体/阴影/动效）+ `[data-theme=dark]` 颜色覆盖块」结构。
|
||||
**保持数值不变**，只重排为 ds-flow 结构；`colors_and_type.css` 作为兼容别名或迁移为薄封装（不破坏现有 codegen）
|
||||
- [ ] 1.3 `design/prototype/atoms.css`：把按钮/卡片/输入/**语言下拉**/徽章/状态药丸等公用原子类沉淀为
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* AUTO-GENERATED — 勿手改。源: design/colors_and_type.css。生成器: web/usercenter/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */
|
||||
/* AUTO-GENERATED — 勿手改。源: design/prototype/tokens.css。生成器: web/usercenter/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */
|
||||
/* =============================================================
|
||||
穿山甲 VPN · Pangolin VPN — Design Tokens
|
||||
colors_and_type.css
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
/**
|
||||
* build-tokens.mjs — 设计令牌同源生成器（usercenter）
|
||||
*
|
||||
* 唯一真相来源是仓库根的 `design/colors_and_type.css`。
|
||||
* 唯一真相来源是仓库根的 `design/prototype/tokens.css`。
|
||||
* 本脚本把它原样读入，仅删除 Google Fonts @import 行后写入
|
||||
* `public/colors_and_type.css`（usercenter 通过 <link> 引入此文件）。
|
||||
*
|
||||
@@ -15,11 +15,11 @@ import { fileURLToPath } from 'node:url';
|
||||
import { dirname, resolve } from 'node:path';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const SRC = resolve(__dirname, '../../../design/colors_and_type.css');
|
||||
const SRC = resolve(__dirname, '../../../design/prototype/tokens.css');
|
||||
const OUT = resolve(__dirname, '../public/colors_and_type.css');
|
||||
|
||||
const BANNER =
|
||||
'/* AUTO-GENERATED — 勿手改。源: design/colors_and_type.css。' +
|
||||
'/* AUTO-GENERATED — 勿手改。源: design/prototype/tokens.css。' +
|
||||
'生成器: web/usercenter/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */\n';
|
||||
|
||||
if (!existsSync(SRC)) {
|
||||
@@ -39,4 +39,4 @@ const stripped = raw
|
||||
.join('\n');
|
||||
|
||||
writeFileSync(OUT, BANNER + stripped, 'utf8');
|
||||
console.log('[build-tokens] ✅ 已生成', OUT, `(${stripped.length} 字节，源自 design/colors_and_type.css)`);
|
||||
console.log('[build-tokens] ✅ 已生成', OUT, `(${stripped.length} 字节，源自 design/prototype/tokens.css)`);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
/**
|
||||
* build-tokens.mjs — 设计令牌同源生成器
|
||||
*
|
||||
* 唯一真相来源是仓库根的 `design/colors_and_type.css`（铁律 1：颜色只用语义 token）。
|
||||
* 唯一真相来源是仓库根的 `design/prototype/tokens.css`（铁律 1：颜色只用语义 token）。
|
||||
* 本脚本把它原样读入，仅做一处「必须的」改写后写入 `src/styles/tokens.gen.css`：
|
||||
*
|
||||
* 删除其中加载 Google Fonts 的 `@import url('https://fonts.googleapis.com/...')` 一行。
|
||||
@@ -20,11 +20,11 @@ import { fileURLToPath } from 'node:url';
|
||||
import { dirname, resolve } from 'node:path';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const SRC = resolve(__dirname, '../../../design/colors_and_type.css');
|
||||
const SRC = resolve(__dirname, '../../../design/prototype/tokens.css');
|
||||
const OUT = resolve(__dirname, '../src/styles/tokens.gen.css');
|
||||
|
||||
const BANNER =
|
||||
'/* AUTO-GENERATED — 勿手改。源: design/colors_and_type.css。' +
|
||||
'/* AUTO-GENERATED — 勿手改。源: design/prototype/tokens.css。' +
|
||||
'生成器: web/website/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */\n';
|
||||
|
||||
if (!existsSync(SRC)) {
|
||||
@@ -50,4 +50,4 @@ if (/fonts\.(googleapis|gstatic)\.com/i.test(stripped.replace(/^\s*(\/\/|\*|\/\*
|
||||
}
|
||||
|
||||
writeFileSync(OUT, BANNER + stripped, 'utf8');
|
||||
console.log('[build-tokens] 已生成', OUT, `(${stripped.length} 字节，源自 design/colors_and_type.css)`);
|
||||
console.log('[build-tokens] 已生成', OUT, `(${stripped.length} 字节，源自 design/prototype/tokens.css)`);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/* AUTO-GENERATED — 勿手改。源: design/colors_and_type.css。生成器: web/website/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */
|
||||
/* AUTO-GENERATED — 勿手改。源: design/prototype/tokens.css。生成器: web/website/scripts/build-tokens.mjs。仅移除第三方 Google Fonts @import。 */
|
||||
/* =============================================================
|
||||
穿山甲 VPN · Pangolin VPN — Design Tokens
|
||||
colors_and_type.css
|
||||
|
||||
Reference in New Issue
Block a user