Transform text tokens to rem in CSS variables (#1944)

* Tokens: Transform text tokens to rem * Create healthy-dragons-bathe.md
seb-oss · Jan 24, 2025 · 33788ef · 33788ef
1 parent 4933535
commit 33788ef
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/.changeset/healthy-dragons-bathe.md b/.changeset/healthy-dragons-bathe.md
@@ -0,0 +1,5 @@
+---
+'@sebgroup/green-core': minor
+---
+
+**Text:** Font-sizes are now defined as rem units
diff --git a/libs/tokens/src/formats.ts b/libs/tokens/src/formats.ts
@@ -211,8 +211,8 @@ const formats: Record<string, Format> = {
             .replace('typography-', 'text-')
           return Object.assign({}, token, {
             name: adjustedName,
-            value: `${token.value}px`,
-            original: { value: `${token.value}px` },
+            value: `${token.value / 16}rem`,
+            original: { value: `${token.value / 16}rem` },
           })
         } else if (
           token.path[0] === 'sys' &&
@@ -378,10 +378,7 @@ const formats: Record<string, Format> = {
     name: 'scss/variables',
     formatter: function (args) {
       const dictionary = Object.assign({}, args.dictionary)
-      const options = Object.assign(
-        { colorScheme: 'light' },
-        args.options,
-      )
+      const options = Object.assign({ colorScheme: 'light' }, args.options)
 
       const { colorScheme, name, outputReferences } = options