diff --git a/README.md b/README.md index ed855c5..2b15383 100644 --- a/README.md +++ b/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. diff --git a/docs/spec.md b/docs/spec.md index 5995e54..cabb379 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -336,6 +336,8 @@ Each component has a set of properties that are themselves design tokens: - typography: \ - rounded: \ - padding: \ +- paddingX: \ +- paddingY: \ - size: \ - height: \ - width: \ diff --git a/packages/cli/src/linter/linter/rules/broken-ref.test.ts b/packages/cli/src/linter/linter/rules/broken-ref.test.ts index 13ac68a..4443294 100644 --- a/packages/cli/src/linter/linter/rules/broken-ref.test.ts +++ b/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'); diff --git a/packages/cli/src/linter/spec-config.yaml b/packages/cli/src/linter/spec-config.yaml index 6b1e90f..8aaa74a 100644 --- a/packages/cli/src/linter/spec-config.yaml +++ b/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