feat: support axis-specific padding component sub-tokens

README.md

@@ -166,7 +166,7 @@ components:
     backgroundColor: "{colors.tertiary-container}"
 ```
 
-Valid component properties: `backgroundColor`, `textColor`, `typography`, `rounded`, `padding`, `size`, `height`, `width`.
+Valid component properties: `backgroundColor`, `textColor`, `typography`, `rounded`, `padding`, `paddingX`, `paddingY`, `size`, `height`, `width`.
 
 Variants (hover, active, pressed) are expressed as separate component entries with a related key name.
 

docs/spec.md

@@ -336,6 +336,8 @@ Each component has a set of properties that are themselves design tokens:
 - typography: \<Typography\>
 - rounded: \<Dimension\>
 - padding: \<Dimension\>
+- paddingX: \<Dimension\>
+- paddingY: \<Dimension\>
 - size: \<Dimension\>
 - height: \<Dimension\>
 - width: \<Dimension\>

packages/cli/src/linter/linter/rules/broken-ref.test.ts

@@ -46,6 +46,16 @@ describe('brokenRef', () => {
     expect(subTokenDiag!.severity).toBe('warning');
   });
 
+  it('does not emit warning for paddingX and paddingY sub-tokens', () => {
+    const state = buildState({
+      colors: { primary: '#ff0000' },
+      components: { button: { paddingX: '12px', paddingY: '16px' } },
+    });
+    const findings = brokenRef(state);
+    const subTokenDiag = findings.filter(d => d.message.includes('not a recognized'));
+    expect(subTokenDiag.length).toBe(0);
+  });
+
   it('has a valid rule descriptor', () => {
     expect(brokenRefRule.name).toBe('broken-ref');
     expect(brokenRefRule.severity).toBe('error');

packages/cli/src/linter/spec-config.yaml

@@ -93,6 +93,10 @@ component_sub_tokens:
     type: Dimension
   - name: padding
     type: Dimension
+  - name: paddingX
+    type: Dimension
+  - name: paddingY
+    type: Dimension
   - name: size
     type: Dimension
   - name: height