Update tokens to use text size scale (#1298)

* update tokens to use lineHeight scale

* schema fix

* Update .changeset/rare-zebras-refuse.md

* add tests

Author: lukasoppermann

.changeset/rare-zebras-refuse.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+Adding text size scale

src/schemas/dimensionToken.ts

@@ -13,7 +13,7 @@ export const dimensionToken = baseToken
     $extensions: z
       .object({
         'org.primer.figma': z.object({
-          collection: collection(['base/size', 'functional/size', 'pattern/size', 'typography']),
+          collection: collection(['base/size', 'base/typography', 'functional/size', 'pattern/size', 'typography']),
           scopes: scopes([
             'all',
             'size',

src/schemas/dimensionValue.ts

@@ -3,7 +3,7 @@ import {schemaErrorMessage} from '../utilities/index.js'
 
 export const dimensionValue = z.union([
   z.string().superRefine((dim, ctx) => {
-    if (!/(^-?[0-9]+(px|rem)$|^-?[0-9]+\.?[0-9]*em$)/.test(dim)) {
+    if (!/(^-?[0-9]+\.?[0-9]*(px|rem)$|^-?[0-9]+\.?[0-9]*em$)/.test(dim)) {
       ctx.addIssue({
         code: 'custom',
         message: schemaErrorMessage(

src/schemas/dimensionValueSchema.test.ts

@@ -10,6 +10,20 @@ describe('Schema: dimensionValue', () => {
     expect(dimensionValue.safeParse(0).success).toStrictEqual(true)
   })
 
+  it('passes on decimal rem values', () => {
+    expect(dimensionValue.safeParse('0.75rem').success).toStrictEqual(true)
+    expect(dimensionValue.safeParse('0.875rem').success).toStrictEqual(true)
+    expect(dimensionValue.safeParse('1.25rem').success).toStrictEqual(true)
+    expect(dimensionValue.safeParse('2.5rem').success).toStrictEqual(true)
+    expect(dimensionValue.safeParse('-0.5rem').success).toStrictEqual(true)
+  })
+
+  it('passes on decimal px values', () => {
+    expect(dimensionValue.safeParse('2.5px').success).toStrictEqual(true)
+    expect(dimensionValue.safeParse('0.5px').success).toStrictEqual(true)
+    expect(dimensionValue.safeParse('-1.5px').success).toStrictEqual(true)
+  })
+
   it('fails on invalid value', () => {
     expect(dimensionValue.safeParse('1%').success).toStrictEqual(false)
     expect(dimensionValue.safeParse(1).success).toStrictEqual(false)

src/tokens/base/typography/typography.json5

@@ -1,6 +1,74 @@
 {
   base: {
     text: {
+      size: {
+        xs: {
+          $value: '0.75rem',
+          $type: 'dimension',
+          $description: '12px - Smallest text size for captions and compact UI elements.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        sm: {
+          $value: '0.875rem',
+          $type: 'dimension',
+          $description: '14px - Default body text size for UI.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        md: {
+          $value: '1rem',
+          $type: 'dimension',
+          $description: '16px - Large body text and small titles.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        lg: {
+          $value: '1.25rem',
+          $type: 'dimension',
+          $description: '20px - Medium titles and subtitles.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        xl: {
+          $value: '2rem',
+          $type: 'dimension',
+          $description: '32px - Large titles and page headings.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        '2xl': {
+          $value: '2.5rem',
+          $type: 'dimension',
+          $description: '40px - Display text for hero sections.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+      },
       weight: {
         light: {
           $type: 'fontWeight',

src/tokens/functional/typography/typography.json5

@@ -58,7 +58,7 @@
         },
       },
       size: {
-        $value: '40px',
+        $value: '{base.text.size.2xl}',
         $type: 'dimension',
         $extensions: {
           'org.primer.figma': {
@@ -104,7 +104,7 @@
     title: {
       size: {
         large: {
-          $value: '32px',
+          $value: '{base.text.size.xl}',
           $type: 'dimension',
           $extensions: {
             'org.primer.figma': {
@@ -114,7 +114,7 @@
           },
         },
         medium: {
-          $value: '20px',
+          $value: '{base.text.size.lg}',
           $type: 'dimension',
           $extensions: {
             'org.primer.figma': {
@@ -124,7 +124,7 @@
           },
         },
         small: {
-          $value: '16px',
+          $value: '{base.text.size.md}',
           $type: 'dimension',
           $extensions: {
             'org.primer.figma': {
@@ -242,7 +242,7 @@
     },
     subtitle: {
       size: {
-        $value: '20px',
+        $value: '{base.text.size.lg}',
         $type: 'dimension',
         $extensions: {
           'org.primer.figma': {
@@ -288,7 +288,7 @@
     body: {
       size: {
         large: {
-          $value: '16px',
+          $value: '{base.text.size.md}',
           $type: 'dimension',
           $extensions: {
             'org.primer.figma': {
@@ -298,7 +298,7 @@
           },
         },
         medium: {
-          $value: '14px',
+          $value: '{base.text.size.sm}',
           $type: 'dimension',
           $extensions: {
             'org.primer.figma': {
@@ -308,7 +308,7 @@
           },
         },
         small: {
-          $value: '12px',
+          $value: '{base.text.size.xs}',
           $type: 'dimension',
           $extensions: {
             'org.primer.figma': {
@@ -404,7 +404,7 @@
     },
     caption: {
       size: {
-        $value: '12px',
+        $value: '{base.text.size.xs}',
         $type: 'dimension',
         $extensions: {
           'org.primer.figma': {