From eb14bada88e496c19d0c1db975e66eef8b51d222 Mon Sep 17 00:00:00 2001
From: Fini <fini.yang@gmail.com>
Date: Wed, 29 Apr 2026 09:50:09 +0800
Subject: [PATCH] feat(types): add 5 spacing tokens to semantic-palette (P1.4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

spacing-1..5 = 4/8/12/16/24 px — a 4-point base scale covering xs through xl.
All tokens use type="number" with plain scalar values. Palette total grows to 57.
---
 .../src/__tests__/semantic-palette.test.ts    | 42 ++++++++++++++++++-
 .../src/variables/semantic-palette.ts         |  7 ++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/pen-core/src/__tests__/semantic-palette.test.ts b/packages/pen-core/src/__tests__/semantic-palette.test.ts
index f8d3bf159..a678a6c29 100644
--- a/packages/pen-core/src/__tests__/semantic-palette.test.ts
+++ b/packages/pen-core/src/__tests__/semantic-palette.test.ts
@@ -510,6 +510,46 @@ describe('letterSpacing tokens (2 sparse numeric)', () => {
 
   it('palette total grows to 52 (50 + 2 letterSpacing)', () => {
     const p = getSemanticPalette();
-    expect(Object.keys(p.variables).length).toBe(52);
+    expect(Object.keys(p.variables).length).toBeGreaterThanOrEqual(52);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Task 1.4 — Spacing tokens (5: spacing-1…5 = 4/8/12/16/24)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('spacing tokens (5 numeric)', () => {
+  const SPACING: Record<string, number> = {
+    'spacing-1': 4,
+    'spacing-2': 8,
+    'spacing-3': 12,
+    'spacing-4': 16,
+    'spacing-5': 24,
+  };
+
+  it('all 5 spacing tokens present', () => {
+    const p = getSemanticPalette();
+    for (const name of Object.keys(SPACING)) {
+      expect(p.variables[name], `missing: ${name}`).toBeDefined();
+    }
+  });
+
+  it('spacing tokens are type="number"', () => {
+    const p = getSemanticPalette();
+    for (const name of Object.keys(SPACING)) {
+      expect((p.variables[name] as VariableDefinition).type, `${name} type`).toBe('number');
+    }
+  });
+
+  it('spacing token values match spec (4/8/12/16/24)', () => {
+    const p = getSemanticPalette();
+    for (const [name, expected] of Object.entries(SPACING)) {
+      expect((p.variables[name] as VariableDefinition).value, name).toBe(expected);
+    }
+  });
+
+  it('palette total grows to 57 (52 + 5 spacing)', () => {
+    const p = getSemanticPalette();
+    expect(Object.keys(p.variables).length).toBe(57);
   });
 });
diff --git a/packages/pen-core/src/variables/semantic-palette.ts b/packages/pen-core/src/variables/semantic-palette.ts
index 1146dd96d..c0531c38d 100644
--- a/packages/pen-core/src/variables/semantic-palette.ts
+++ b/packages/pen-core/src/variables/semantic-palette.ts
@@ -227,6 +227,13 @@ const PALETTE: Record<string, PaletteEntry> = {
   'type-caption-weight': { single: 400, description: 'Caption / helper text — font weight' },
   'type-caption-line-height': { single: 1.4, description: 'Caption / helper text — line height multiplier' },
 
+  // ── Spacing scale (5 numeric, 4-point base) ──────────────────────────────
+  'spacing-1': { single: 4, description: 'Spacing step 1 — 4 px (xs)' },
+  'spacing-2': { single: 8, description: 'Spacing step 2 — 8 px (sm)' },
+  'spacing-3': { single: 12, description: 'Spacing step 3 — 12 px (md)' },
+  'spacing-4': { single: 16, description: 'Spacing step 4 — 16 px (lg)' },
+  'spacing-5': { single: 24, description: 'Spacing step 5 — 24 px (xl)' },
+
   // ── Sparse letterSpacing (2 numeric) ─────────────────────────────────────
   'type-display-letter-spacing': {
     single: -0.5,