diff --git a/apps/design-lab/e2e/pages.spec.ts b/apps/design-lab/e2e/pages.spec.ts index cf7d179..b53f08b 100644 --- a/apps/design-lab/e2e/pages.spec.ts +++ b/apps/design-lab/e2e/pages.spec.ts @@ -38,7 +38,7 @@ test.describe('全局画布', () => { test.describe('CourseCard 规格契约', () => { test.beforeEach(async ({ page }) => await page.goto('/components.html')) - test('2px ink 描边 + 硬投影 + 纸叠三层边', async ({ page }) => { + test('2px ink 描边 + 统一硬投影(单层 ink,无纸叠)', async ({ page }) => { const card = page.locator('a[href="#ch1"]').first() await expect(card).toBeVisible() const s = await card.evaluate((el) => { @@ -47,8 +47,23 @@ test.describe('CourseCard 规格契约', () => { }) expect(s.bw).toBe('2px') expect(s.bc).toBe('rgb(17, 17, 17)') - expect((s.shadow.match(/rgb|#/g) ?? []).length).toBeGreaterThanOrEqual(4) // 三层纸叠+硬投影(按色值计数) - expect(s.shadow).toContain('rgb(17, 17, 17)') + // 唯一配方 --shadow-hard:恰好一层 ink 硬投影(tw 变体层均为透明占位),无纸叠多层 + expect(s.shadow.split('rgb(17, 17, 17)').length - 1).toBe(1) + expect(s.shadow).toContain('rgb(17, 17, 17) 5px 5px 0px 0px') + }) + + test('基础组件投影统一:同一 token 复用,不得各写各的', async ({ page }) => { + const { kinds, shadows } = await page.evaluate(() => { + const els = [...document.querySelectorAll('[data-comp]')] + return { + kinds: [...new Set(els.map((el) => el.dataset.comp))].sort(), + shadows: els.map((el) => getComputedStyle(el).boxShadow), + } + }) + expect(kinds).toEqual(['assign', 'course-card', 'entry-card', 'ticket']) // 四类基础组件都有钩子 + expect(shadows.length).toBeGreaterThanOrEqual(6) + expect(new Set(shadows).size).toBe(1) // 计算值完全一致=样式复用 + expect(shadows[0]).toContain('rgb(17, 17, 17) 5px 5px 0px 0px') }) test('16:9 相框:比例、3px 黑边、内阴影、章节撞色', async ({ page }) => { diff --git a/apps/design-lab/e2e/visual.spec.ts-snapshots/colors-chromium-linux.png b/apps/design-lab/e2e/visual.spec.ts-snapshots/colors-chromium-linux.png index a2e1e10..cd995c0 100644 Binary files a/apps/design-lab/e2e/visual.spec.ts-snapshots/colors-chromium-linux.png and b/apps/design-lab/e2e/visual.spec.ts-snapshots/colors-chromium-linux.png differ diff --git a/apps/design-lab/e2e/visual.spec.ts-snapshots/components-chromium-linux.png b/apps/design-lab/e2e/visual.spec.ts-snapshots/components-chromium-linux.png index 26bfd82..4dc7ac4 100644 Binary files a/apps/design-lab/e2e/visual.spec.ts-snapshots/components-chromium-linux.png and b/apps/design-lab/e2e/visual.spec.ts-snapshots/components-chromium-linux.png differ diff --git a/apps/design-lab/e2e/visual.spec.ts-snapshots/index-chromium-linux.png b/apps/design-lab/e2e/visual.spec.ts-snapshots/index-chromium-linux.png index c5da908..2cb8031 100644 Binary files a/apps/design-lab/e2e/visual.spec.ts-snapshots/index-chromium-linux.png and b/apps/design-lab/e2e/visual.spec.ts-snapshots/index-chromium-linux.png differ diff --git a/apps/design-lab/e2e/visual.spec.ts-snapshots/shelf-chromium-linux.png b/apps/design-lab/e2e/visual.spec.ts-snapshots/shelf-chromium-linux.png index 9b27718..7f5d1e3 100644 Binary files a/apps/design-lab/e2e/visual.spec.ts-snapshots/shelf-chromium-linux.png and b/apps/design-lab/e2e/visual.spec.ts-snapshots/shelf-chromium-linux.png differ diff --git a/apps/design-lab/e2e/visual.spec.ts-snapshots/symbols-chromium-linux.png b/apps/design-lab/e2e/visual.spec.ts-snapshots/symbols-chromium-linux.png index b70f66a..472843a 100644 Binary files a/apps/design-lab/e2e/visual.spec.ts-snapshots/symbols-chromium-linux.png and b/apps/design-lab/e2e/visual.spec.ts-snapshots/symbols-chromium-linux.png differ diff --git a/apps/design-lab/src/components/EntryGuide.tsx b/apps/design-lab/src/components/EntryGuide.tsx index 96dd45a..ca33615 100644 --- a/apps/design-lab/src/components/EntryGuide.tsx +++ b/apps/design-lab/src/components/EntryGuide.tsx @@ -5,7 +5,7 @@ export function EntryGuide() { return (
{p.desc}
diff --git a/apps/design-lab/src/styles/tokens.css b/apps/design-lab/src/styles/tokens.css index cacddaf..2ae6ce8 100644 --- a/apps/design-lab/src/styles/tokens.css +++ b/apps/design-lab/src/styles/tokens.css @@ -13,11 +13,13 @@ /* 中性阶(纸的世界) */ --color-ink: #111111; --color-paper: #fff9f0; - --color-stack1: #ffffff; - --color-stack2: #eadfc4; --color-mute: #8a7a5c; --color-body: #3d3d3d; + /* 统一硬投影——唯一投影配方,所有基础组件复用(rest / 拿起) */ + --shadow-hard: 5px 5px 0 var(--color-ink); + --shadow-hard-lift: 8px 8px 0 var(--color-ink); + /* 章节色别名 */ --color-ch1: #ff6b6b; --color-ch2: #ff8fab; @@ -27,11 +29,6 @@ --color-ch6: #a78bfa; } -/* 语义形状通用 */ -.sem-shadow { - filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9)); -} - /* 票券打孔:两端各以 1/4 圆做差集(完成票专用)。 * mask 硬停只做形状剪切(非色彩渐变):孔真正穿透票体——露出页面底色, * 描边与硬投影在孔处真实断开,无需伪元素盖色近似。 */ diff --git a/docs/screenshots/design-lab/pr_colors.png b/docs/screenshots/design-lab/pr_colors.png index a2e1e10..cd995c0 100644 Binary files a/docs/screenshots/design-lab/pr_colors.png and b/docs/screenshots/design-lab/pr_colors.png differ diff --git a/docs/screenshots/design-lab/pr_components.png b/docs/screenshots/design-lab/pr_components.png index 26bfd82..4dc7ac4 100644 Binary files a/docs/screenshots/design-lab/pr_components.png and b/docs/screenshots/design-lab/pr_components.png differ diff --git a/docs/screenshots/design-lab/pr_index.png b/docs/screenshots/design-lab/pr_index.png index c5da908..2cb8031 100644 Binary files a/docs/screenshots/design-lab/pr_index.png and b/docs/screenshots/design-lab/pr_index.png differ diff --git a/docs/screenshots/design-lab/pr_shelf.png b/docs/screenshots/design-lab/pr_shelf.png index 9b27718..7f5d1e3 100644 Binary files a/docs/screenshots/design-lab/pr_shelf.png and b/docs/screenshots/design-lab/pr_shelf.png differ diff --git a/docs/screenshots/design-lab/pr_symbols.png b/docs/screenshots/design-lab/pr_symbols.png index b70f66a..472843a 100644 Binary files a/docs/screenshots/design-lab/pr_symbols.png and b/docs/screenshots/design-lab/pr_symbols.png differ