feat(BOOK-59): Fixes some issues related to css variables from the design system

Approved-by: Linus Flood

packages/design-system/generate/generate.ts

@@ -1,14 +1,14 @@
-import fs from 'node:fs'
 import { colord, extend } from 'colord'
 import mixPlugin from 'colord/plugins/mix'
+import fs from 'node:fs'
 
-import json from './variables.json' assert { type: 'json' }
 import {
   FALLBACK_THEME,
   getThemeForToken,
   ignoreStyles,
   kebabify,
 } from './utils'
+import json from './variables.json' assert { type: 'json' }
 
 extend([mixPlugin])
 
@@ -68,7 +68,7 @@ json.collections.forEach((collection) => {
                   /text transform/i,
                   'Text-Transform'
                 )
-                value = variable.value ? 'uppercase' : 'unset'
+                value = variable.value ? 'uppercase' : 'none'
               }
               // Handle text decoration
               else if (/text decoration/i.test(variable.name)) {
@@ -76,7 +76,7 @@ json.collections.forEach((collection) => {
                   /text decoration/i,
                   'Text-Decoration'
                 )
-                value = variable.value ? 'underline' : 'unset'
+                value = variable.value ? 'underline' : 'none'
               }
             } else {
               throw new Error(
@@ -352,12 +352,15 @@ themes.forEach((themeTokenValues, themeKey) => {
   const resolvedJsOutput = [
     '/* This file is generated, do not edit manually! */',
     `export const theme = ${JSON.stringify(
-      Array.from(themeTokenValues).reduce((acc, [token, value]) => {
-        if (value.resolved) {
-          acc[token] = value.resolved
-        }
-        return acc
-      }, {}),
+      Array.from(themeTokenValues).reduce(
+        (acc, [token, value]) => {
+          if (value.resolved) {
+            acc[token] = value.resolved
+          }
+          return acc
+        },
+        {} as Record<string, string | number>
+      ),
       null,
       2
     )}`,