From 85df86eb82e5a86e7d9eefbf76447ae0c9fa6a51 Mon Sep 17 00:00:00 2001
From: Thomas Neil <12561498+tn819@users.noreply.github.com>
Date: Mon, 25 May 2026 17:31:17 +0200
Subject: [PATCH] feat(spec): add 9 standard CSS component sub-tokens

Extend the component_sub_tokens vocabulary from 8 to 17 entries to
support real-world design systems that use standard CSS properties
within component definitions.

Added sub-tokens (with usage examples):
- minHeight / minWidth: touch-target compliance (44px, 56px buttons)
- fontFamily / fontWeight / fontStyle: per-component type overrides
  (serif CTAs, italic margin-notes)
- borderColor: card, chip, and container borders
- borderLeftColor / borderLeftWidth: directional border patterns
  (left-edge accent for margin-note components)
- paddingLeft: directional padding (margin-note inset pattern)
- elevation: shadow classes (floating SOS button)

All follow existing spec patterns: Color for colour references,
Dimension for px/rem values, string for named values.
Directional variants use CSS box-model naming conventions.
---
 packages/cli/src/linter/spec-config.yaml | 30 ++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/cli/src/linter/spec-config.yaml b/packages/cli/src/linter/spec-config.yaml
index d00c233..93264c8 100644
--- a/packages/cli/src/linter/spec-config.yaml
+++ b/packages/cli/src/linter/spec-config.yaml
@@ -70,12 +70,42 @@ component_sub_tokens:
     type: Dimension
   - name: padding
     type: Dimension
+  - name: paddingLeft
+    type: Dimension
+    description: "CSS logical directional padding, e.g. for margin-note inset patterns."
   - name: size
     type: Dimension
   - name: height
     type: Dimension
   - name: width
     type: Dimension
+  - name: minHeight
+    type: Dimension
+    description: "Minimum height (commonly 44px for touch-target compliance)."
+  - name: minWidth
+    type: Dimension
+    description: "Minimum width (e.g. circular buttons, touch-target compliance)."
+  - name: fontFamily
+    type: string
+    description: "Font family override per component (e.g. serif for CTAs, sans for chips)."
+  - name: fontWeight
+    type: "number | string"
+    description: "Font weight override per component."
+  - name: fontStyle
+    type: string
+    description: "CSS font-style value (e.g. 'italic' for margin-note patterns)."
+  - name: borderColor
+    type: Color
+    description: "Border color for card, chip, and container edges."
+  - name: borderLeftColor
+    type: Color
+    description: "Directional border color (e.g. accent left-edge for margin-notes)."
+  - name: borderLeftWidth
+    type: Dimension
+    description: "Directional border width. Follows CSS box-model naming."
+  - name: elevation
+    type: string
+    description: "Shadow/elevation class (e.g. 'shadow-lg'). Use sparingly; most components reject digital shadows in favor of tonal layers."
 
 color_roles:
   - primary