diff --git a/README.md b/README.md index c7d9f0b..fd8793d 100644 --- a/README.md +++ b/README.md @@ -125,7 +125,7 @@ components: | Color | `#` + hex (sRGB) | `"#1A1C1E"` | | Dimension | number + unit (`px`, `em`, `rem`) | `48px`, `-0.02em` | | Token Reference | `{path.to.token}` | `{colors.primary}` | -| Typography | object with `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`, `fontFeature`, `fontVariation` | See example above | +| Typography | object with `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`, `fontFeature`, `fontVariation`, `textTransform` | See example above | ### Section Order diff --git a/docs/spec.md b/docs/spec.md index 874f300..f3c833a 100644 --- a/docs/spec.md +++ b/docs/spec.md @@ -70,6 +70,7 @@ The `` placeholder represents a named level in a sizing or spacing [`font-feature-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-feature-settings). - `fontVariation` (string) - configures [`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variation-settings). +- `textTransform` (string) - Controls text casing. Maps to CSS [`text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-transform). **Dimension**: A dimension value is a string with a unit suffix. Valid units are: px, em, rem. @@ -189,6 +190,7 @@ typography: fontWeight: 500 lineHeight: 1 letterSpacing: 0.1em + textTransform: uppercase ``` ## Layout diff --git a/packages/cli/src/linter/model/handler.test.ts b/packages/cli/src/linter/model/handler.test.ts index 2b64515..3daf31d 100644 --- a/packages/cli/src/linter/model/handler.test.ts +++ b/packages/cli/src/linter/model/handler.test.ts @@ -207,6 +207,16 @@ describe('ModelHandler', () => { const headline = result.designSystem.typography.get('headline'); expect(headline?.fontWeight).toBe(700); }); + + it('accepts textTransform values', () => { + const result = handler.execute(makeParsed({ + typography: { + caps: { textTransform: 'uppercase' }, + }, + })); + expect(result.findings.length).toBe(0); + expect(result.designSystem.typography.get('caps')?.textTransform).toBe('uppercase'); + }); }); describe('rounded validation', () => { diff --git a/packages/cli/src/linter/model/handler.ts b/packages/cli/src/linter/model/handler.ts index f801a25..b668711 100644 --- a/packages/cli/src/linter/model/handler.ts +++ b/packages/cli/src/linter/model/handler.ts @@ -338,6 +338,8 @@ function parseTypography(props: Record, path: string, f if (typeof props['fontFeature'] === 'string') result.fontFeature = props['fontFeature']; if (typeof props['fontVariation'] === 'string') result.fontVariation = props['fontVariation']; + if (typeof props['textTransform'] === 'string') result.textTransform = props['textTransform']; + const dimensionProps = ['fontSize', 'lineHeight', 'letterSpacing'] as const; for (const prop of dimensionProps) { const raw = props[prop]; diff --git a/packages/cli/src/linter/model/spec.ts b/packages/cli/src/linter/model/spec.ts index ce83711..2562092 100644 --- a/packages/cli/src/linter/model/spec.ts +++ b/packages/cli/src/linter/model/spec.ts @@ -58,6 +58,7 @@ export interface ResolvedTypography { letterSpacing?: ResolvedDimension | undefined; fontFeature?: string | undefined; fontVariation?: string | undefined; + textTransform?: string | undefined; } export type ResolvedValue = ResolvedColor | ResolvedDimension | ResolvedTypography | string; diff --git a/packages/cli/src/linter/spec-config.yaml b/packages/cli/src/linter/spec-config.yaml index d00c233..32c8c7a 100644 --- a/packages/cli/src/linter/spec-config.yaml +++ b/packages/cli/src/linter/spec-config.yaml @@ -58,6 +58,9 @@ typography_properties: - name: fontVariation type: string description: "configures\n [`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variation-settings)." + - name: textTransform + type: string + description: "Controls text casing. Maps to CSS [`text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-transform)." component_sub_tokens: - name: backgroundColor @@ -134,6 +137,7 @@ examples: fontWeight: 500 lineHeight: 1.0 letterSpacing: "0.1em" + textTransform: uppercase components: button-primary: backgroundColor: "{colors.primary-60}"