feat(spec): add textTransform typography token

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
 

docs/spec.md

@@ -70,6 +70,7 @@ The `<scale-level>` 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

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', () => {

packages/cli/src/linter/model/handler.ts

@@ -338,6 +338,8 @@ function parseTypography(props: Record<string, string | number>, 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];

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;

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}"