Figma type token scope (#965)

* added scopes to zod and zod scope test * implemeny figma type scoping * adding type token scopes for figma
primer · Jun 6, 2024 · 43ddc91 · 43ddc91
1 parent d553741
commit 43ddc91
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 48 deletions.
diff --git a/.changeset/modern-clouds-battle.md b/.changeset/modern-clouds-battle.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Adding scope to type tokens
diff --git a/src/schemas/dimensionToken.ts b/src/schemas/dimensionToken.ts
@@ -14,7 +14,18 @@ export const dimensionToken = baseToken
       .object({
         'org.primer.figma': z.object({
           collection: collection(['base/size', 'functional/size', 'pattern/size', 'typography']),
-          scopes: scopes(['all', 'size', 'gap', 'radius', 'borderColor']),
+          scopes: scopes([
+            'all',
+            'size',
+            'gap',
+            'radius',
+            'borderColor',
+            'fontSize',
+            'letterSpacing',
+            'lineHeight',
+            'paragraphSpacing',
+            'paragraphIndent',
+          ]),
         }),
       })
       .optional(),

diff --git a/src/schemas/fontFamilyToken.ts b/src/schemas/fontFamilyToken.ts
@@ -13,7 +13,7 @@ export const fontFamilyToken = baseToken
       .object({
         'org.primer.figma': z.object({
           collection: collection(['base/typography', 'typography']).optional(),
-          scopes: scopes(['all']).optional(),
+          scopes: scopes(['fontFamily']).optional(),
         }),
       })
       .optional(),

diff --git a/src/schemas/fontWeightToken.ts b/src/schemas/fontWeightToken.ts
@@ -14,7 +14,7 @@ export const fontWeightToken = baseToken
       .object({
         'org.primer.figma': z.object({
           collection: collection(['base/typography', 'typography']).optional(),
-          scopes: scopes(['all']).optional(),
+          scopes: scopes(['fontWeight']).optional(),
         }),
       })
       .optional(),

diff --git a/src/schemas/numberToken.ts b/src/schemas/numberToken.ts
@@ -19,7 +19,7 @@ export const numberToken = baseToken
         'org.primer.figma': z
           .object({
             collection: collection(['typography']).optional(),
-            scopes: scopes(['all']).optional(),
+            scopes: scopes(['fontWeight', 'lineHeight']).optional(),
           })
           .optional(),
       })

diff --git a/src/schemas/numberTokenSchema.test.ts b/src/schemas/numberTokenSchema.test.ts
@@ -11,7 +11,7 @@ describe('Schema: numberToken', () => {
       },
       'org.primer.figma': {
         collection: 'typography',
-        scopes: ['all'],
+        scopes: ['fontWeight'],
       },
     },
   }

diff --git a/src/schemas/scopeTokenSchema.test.ts b/src/schemas/scopeTokenSchema.test.ts
@@ -1,7 +1,25 @@
 import type {ValidScope} from './scopes'
 import {scopes} from './scopes'
 
-const validScopes: ValidScope[] = ['all', 'bgColor', 'fgColor', 'borderColor', 'size', 'gap', 'radius']
+const validScopes: ValidScope[] = [
+  'all',
+  'bgColor',
+  'fgColor',
+  'borderColor',
+  'size',
+  'gap',
+  'radius',
+  'effectColor',
+  'opacity',
+  'fontFamily',
+  'fontStyle',
+  'fontWeight',
+  'fontSize',
+  'lineHeight',
+  'letterSpacing',
+  'paragraphSpacing',
+  'paragraphIndent',
+]
 const scopeSchema = scopes(validScopes)
 
 describe('Schema: scopes', () => {
@@ -13,8 +31,36 @@ describe('Schema: scopes', () => {
     expect(scopeSchema.safeParse(['size']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['gap']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['radius']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['effectColor']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['opacity']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['fontFamily']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['fontStyle']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['fontWeight']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['fontSize']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['lineHeight']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['letterSpacing']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['paragraphSpacing']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['paragraphIndent']).success).toStrictEqual(true)
     expect(
-      scopeSchema.safeParse(['all', 'bgColor', 'fgColor', 'borderColor', 'size', 'gap', 'radius']).success,
+      scopeSchema.safeParse([
+        'all',
+        'bgColor',
+        'fgColor',
+        'borderColor',
+        'size',
+        'gap',
+        'radius',
+        'effectColor',
+        'opacity',
+        'fontFamily',
+        'fontStyle',
+        'fontWeight',
+        'fontSize',
+        'lineHeight',
+        'letterSpacing',
+        'paragraphSpacing',
+        'paragraphIndent',
+      ]).success,
     ).toStrictEqual(true)
     expect(scopeSchema.safeParse([]).success).toStrictEqual(true)
   })

diff --git a/src/schemas/scopes.ts b/src/schemas/scopes.ts
@@ -2,8 +2,43 @@ import {z} from 'zod'
 import {joinFriendly} from '../utilities/joinFriendly'
 import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
 
-export type ValidScope = 'all' | 'bgColor' | 'fgColor' | 'borderColor' | 'size' | 'gap' | 'radius' | 'effectColor'
-const validScopes: ValidScope[] = ['all', 'bgColor', 'fgColor', 'borderColor', 'size', 'gap', 'radius', 'effectColor']
+export type ValidScope =
+  | 'all'
+  | 'bgColor'
+  | 'fgColor'
+  | 'borderColor'
+  | 'size'
+  | 'gap'
+  | 'radius'
+  | 'effectColor'
+  | 'opacity'
+  | 'fontFamily'
+  | 'fontStyle'
+  | 'fontWeight'
+  | 'fontSize'
+  | 'lineHeight'
+  | 'letterSpacing'
+  | 'paragraphSpacing'
+  | 'paragraphIndent'
+const validScopes: ValidScope[] = [
+  'all',
+  'bgColor',
+  'fgColor',
+  'borderColor',
+  'size',
+  'gap',
+  'radius',
+  'effectColor',
+  'opacity',
+  'fontFamily',
+  'fontStyle',
+  'fontWeight',
+  'fontSize',
+  'lineHeight',
+  'letterSpacing',
+  'paragraphSpacing',
+  'paragraphIndent',
+]
 
 export const scopes = (scopeSubset?: ValidScope[]) => {
   const scopeArray = scopeSubset ?? validScopes

diff --git a/src/tokens/base/typography/typography.json b/src/tokens/base/typography/typography.json
@@ -8,7 +8,7 @@
           "$extensions": {
             "org.primer.figma": {
               "collection": "base/typography",
-              "scopes": ["all"]
+              "scopes": ["fontWeight"]
             }
           }
         },
@@ -18,7 +18,7 @@
           "$extensions": {
             "org.primer.figma": {
               "collection": "base/typography",
-              "scopes": ["all"]
+              "scopes": ["fontWeight"]
             }
           }
         },
@@ -28,7 +28,7 @@
           "$extensions": {
             "org.primer.figma": {
               "collection": "base/typography",
-              "scopes": ["all"]
+              "scopes": ["fontWeight"]
             }
           }
         },
@@ -38,7 +38,7 @@
           "$extensions": {
             "org.primer.figma": {
               "collection": "base/typography",
-              "scopes": ["all"]
+              "scopes": ["fontWeight"]
             }
           }
         }