feat: add letter spacing (#21)

ogcio · May 30, 2024 · 21abb1e · 21abb1e
1 parent fb78625
commit 21abb1e
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 0 deletions.
diff --git a/packages/design/theme-builder/validation/schema/font-schema.ts b/packages/design/theme-builder/validation/schema/font-schema.ts
@@ -4,6 +4,7 @@ import {
   createTokenSchema,
   createIntegerSchema,
   createNumberSchema,
+  createRemSchema,
 } from "./shared.js";
 
 function createFontSizeSchema(name: string) {
@@ -81,12 +82,33 @@ const fontLineHeightSchema = z
   })
   .strict();
 
+function createLetterSpacingSchema(name: string) {
+  return createTokenSchema({
+    type: "dimension",
+    valueSchema: createRemSchema("Letter spacing"),
+    name,
+  });
+}
+
+const letterSpacingSchema = z.object({
+  "100": createLetterSpacingSchema("100"),
+  "200": createLetterSpacingSchema("200"),
+  "300": createLetterSpacingSchema("300"),
+  "400": createLetterSpacingSchema("400"),
+  "500": createLetterSpacingSchema("500"),
+  "600": createLetterSpacingSchema("600"),
+  "700": createLetterSpacingSchema("700"),
+  "800": createLetterSpacingSchema("800"),
+  "900": createLetterSpacingSchema("900"),
+});
+
 export const fontSchema = z
   .object(
     {
       size: fontSizeSchema,
       weight: fontWeightSchema,
       lineHeight: fontLineHeightSchema,
+      letterSpacing: letterSpacingSchema,
     },
     {
       required_error: "Color is required.",

diff --git a/packages/design/theme-builder/validation/schema/shared.ts b/packages/design/theme-builder/validation/schema/shared.ts
@@ -42,6 +42,14 @@ export function createPixelSchema(name: string) {
     .regex(/^(-?\d+px|0)$/, `${name} must be a dimension in pixels.`);
 }
 
+export function createRemSchema(name: string) {
+  return z
+    .string({
+      required_error: `${name} is required.`,
+    })
+    .regex(/^(-?\d+(\.\d+)?rem)$/, `${name} must be a dimension in rems.`);
+}
+
 export function createIntegerSchema(name: string) {
   return z
     .number({

diff --git a/packages/design/tokens-builder/src/tokens-builder.ts b/packages/design/tokens-builder/src/tokens-builder.ts
@@ -268,6 +268,30 @@ async function build({ source, tokens, platforms }: TokenBuilderOptions) {
     },
   });
 
+  styleDictionary.registerTransform({
+    name: "letterSpacing/em",
+    type: "value",
+    filter: function (token) {
+      return token.attributes?.item === "letterSpacing";
+    },
+    transform: function (token) {
+      const parsed = Number(token.$value.replace("rem", ""));
+      return `${parsed}em`;
+    },
+  });
+
+  styleDictionary.registerTransform({
+    name: "letterSpacing/percentage",
+    type: "value",
+    filter: function (token) {
+      return token.attributes?.item === "letterSpacing";
+    },
+    transform: function (token) {
+      const parsed = Number(token.$value.replace("rem", ""));
+      return `${parsed * 100}%`;
+    },
+  });
+
   styleDictionary.registerTransformGroup({
     name: "css/custom",
     transforms: [
@@ -286,6 +310,7 @@ async function build({ source, tokens, platforms }: TokenBuilderOptions) {
       // "transition/css/shorthand",
       "shadow/css/shorthand",
       "name/remove-tier-kebab",
+      "letterSpacing/em",
     ],
   });
 
@@ -315,6 +340,7 @@ async function build({ source, tokens, platforms }: TokenBuilderOptions) {
       "lineHeight/px",
       "color/hex", // TODO: review,
       "shadow/css/shorthand",
+      "letterSpacing/percentage",
     ],
   });
 

diff --git a/tokens/tokens/light/primitive/font.json b/tokens/tokens/light/primitive/font.json
@@ -42,6 +42,17 @@
         "1100": { "$type": "number", "$value": 4 },
         "1200": { "$type": "number", "$value": 4.5 },
         "1300": { "$type": "number", "$value": 5.5 }
+      },
+      "letterSpacing": {
+        "100": { "$type": "dimension", "$value": "-0.05rem" },
+        "200": { "$type": "dimension", "$value": "-0.025rem" },
+        "300": { "$type": "dimension", "$value": "0rem" },
+        "400": { "$type": "dimension", "$value": "0.025rem" },
+        "500": { "$type": "dimension", "$value": "0.05rem" },
+        "600": { "$type": "dimension", "$value": "0.1rem" },
+        "700": { "$type": "dimension", "$value": "0.15rem" },
+        "800": { "$type": "dimension", "$value": "0.2rem" },
+        "900": { "$type": "dimension", "$value": "0.3rem" }
       }
     }
   }