chore: initialize tokens for belonging

Signed-off-by: Paul-Xavier Ceccaldi <[email protected]>
Signed-off-by: Camille Nairi<[email protected]>

Author: P1X3L

lib/package.json

@@ -29,7 +29,7 @@
     "start": "vite build --watch",
     "build": "vite build",
     "build:tokens": "style-dictionary build --config=style-dictionary.json --verbose",
-    "theme:generate": "yarn build:tokens && tsx src/theme/generate-theme.ts && yarn run -W prettier --write 'src/theme/theme.css'",
+    "theme:generate": "tsx src/theme/generate-theme.ts && yarn run -W prettier --write 'src/theme/theme.css'",
     "test": "vitest"
   },
   "repository": {

lib/src/theme/fontFaces.css

@@ -137,45 +137,45 @@
 
 @font-face {
   font-family: welcome-font;
-  font-weight: 400;
+  font-weight: 500;
   src: url('https://cdn.welcome-ui.com/fonts/welcome-font-regular.woff2') format('woff2');
 }
 
 @font-face {
   font-family: welcome-font;
-  font-weight: 400;
+  font-weight: 500;
   src: url('https://cdn.welcome-ui.com/fonts/welcome-font-regular.woff2') format('woff2');
 }
 
 @font-face {
   font-family: welcome-font;
-  font-weight: 500;
+  font-weight: 700;
   src: url('https://cdn.welcome-ui.com/fonts/welcome-font-medium.woff2') format('woff2');
 }
 
 @font-face {
   font-family: welcome-font;
-  font-weight: 600;
+  font-weight: 900;
   src: url('https://cdn.welcome-ui.com/fonts/welcome-font-bold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: welcome-font;
   font-style: italic;
-  font-weight: 400;
+  font-weight: 500;
   src: url('https://cdn.welcome-ui.com/fonts/welcome-font-regular-italic.woff2') format('woff2');
 }
 
 @font-face {
   font-family: welcome-font;
   font-style: italic;
-  font-weight: 500;
+  font-weight: 700;
   src: url('https://cdn.welcome-ui.com/fonts/welcome-font-medium-italic.woff2') format('woff2');
 }
 
 @font-face {
   font-family: welcome-font;
   font-style: italic;
-  font-weight: 600;
+  font-weight: 900;
   src: url('https://cdn.welcome-ui.com/fonts/welcome-font-bold-italic.woff2') format('woff2');
 }

lib/src/theme/generate-theme.ts

@@ -2,31 +2,32 @@ import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
-import tokens from './tokens.json' assert { type: 'json' }
+import primitives from './tokens/primitives.json' assert { type: 'json' }
 
-const indentation = '  ' // 2 spaces for indentation
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
 const fontFacesPath = path.join(__dirname, 'fontFaces.css')
 const basePath = path.join(__dirname, 'base.css')
 const resetPath = path.join(__dirname, 'resets.css')
 const themePath = path.join(__dirname, 'theme.css')
+const techTokensPath = path.join(__dirname, 'techTokens.css')
 const variablesPath = path.join(__dirname, 'variables.css')
 const breakpointsPath = path.join(__dirname, 'utils', 'breakpoints.scss')
 
 const fontFaces = fs.readFileSync(fontFacesPath, 'utf8')
 const baseStyles = fs.readFileSync(basePath, 'utf8')
+const techTokens = fs.readFileSync(techTokensPath, 'utf8')
 const resetStyles = fs.readFileSync(resetPath, 'utf8')
 const variableStyles = fs.readFileSync(variablesPath, 'utf8')
 
 const getStringFrom = (map: Record<string, string>) => `${map.property} {\n${map.value}}\n`
 
-const addedVariables = '--spacing: 0.0625rem;'
-const resetTailwindTokens = `${indentation}--*: initial;\n`
+const stringifiedTechTokens = `${techTokens}`
+
 const variablesStylesWithTailwindResets = variableStyles.replace(
   '@theme static {\n',
-  `@theme static {\n${resetTailwindTokens}\n${addedVariables}`
+  `@theme static {\n${stringifiedTechTokens}`
 )
 
 const baseLayer = { property: '@layer base', value: `${resetStyles}\n${baseStyles}` }
@@ -38,9 +39,9 @@ const generateThemeCss = () =>
 fs.writeFileSync(themePath, generateThemeCss(), 'utf8')
 
 // Generate scss breakpoints file
-const breakpointsContent = Object.entries(tokens.breakpoint).reduce((acc, [key, value]) => {
-  if (key !== '$type' && typeof value === 'object' && '$value' in value) {
-    return acc + `$breakpoint-${key}: ${value['$value']};\n`
+const breakpointsContent = Object.entries(primitives.breakpoints).reduce((acc, [key, value]) => {
+  if (key !== '$type' && typeof value === 'object' && 'value' in value) {
+    return acc + `$breakpoint-${key}: ${value['value']};\n`
   }
   return acc
 }, '/* screens - auto-generated from token.ts - do not edit directly */\n')

lib/src/theme/techTokens.css

@@ -0,0 +1,30 @@
+--*: initial;
+--spacing: 0.0625rem;
+--spacing-0: 0;
+--spacing-2: 0.125rem;
+--spacing-3: 0.1875rem;
+--spacing-4: 0.25rem;
+--spacing-8: 0.5rem;
+--spacing-12: 0.75rem;
+--spacing-16: 1rem;
+--spacing-24: 1.5rem;
+--spacing-28: 1.75rem;
+--spacing-32: 2rem;
+--spacing-36: 2.25rem;
+--spacing-48: 3rem;
+--spacing-64: 4rem;
+--spacing-96: 6rem;
+--spacing-128: 8rem;
+--spacing-192: 12rem;
+--font-size-11: 0.6875rem;
+--font-size-12: 0.75rem;
+--font-size-13: 0.8125rem;
+--font-size-14: 0.875rem;
+--font-size-16: 1rem;
+--font-size-18: 1.125rem;
+--font-size-20: 1.25rem;
+--font-size-24: 1.5rem;
+--font-size-26: 1.625rem;
+--font-size-36: 2.25rem;
+--font-size-45: 2.8125rem;
+--font-size-65: 4.0625rem;