feat: generate tokens-tailwind.css for design tokens (#7225)

Author: tujoworker

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling.mdx

@@ -187,6 +187,9 @@ You can import the pre-generated `properties-tailwind.css` files that contain al
 
 /* Import Eufemia properties in Tailwind format */
 @import '@dnb/eufemia/style/themes/ui/properties-tailwind.css' layer(utilities);
+
+/* Import Eufemia design tokens in Tailwind format */
+@import '@dnb/eufemia/style/themes/ui/tokens-tailwind.css' layer(utilities);
 ```
 
 ### Tailwind-Compatible CSS Variables
@@ -225,6 +228,29 @@ For Sbanken, the following namespaces are available:
 
 This makes Eufemia properties directly usable with Tailwind's utility classes while maintaining brand-specific variants.
 
+### Semantic Design Tokens
+
+In addition to the theme properties above, Eufemia provides semantic design tokens via `tokens-tailwind.css`. These tokens represent higher-level design decisions (e.g., "background for an action element") rather than raw values, and reference foundation color variables.
+
+The `--token-` prefix from `tokens.scss` is stripped, so the variables map directly to Tailwind's `--color-*` namespace:
+
+- **`--color-background-*`** - Background colors (e.g., `--color-background-action`, `--color-background-error-subtle`)
+- **`--color-text-*`** - Text colors (e.g., `--color-text-neutral`, `--color-text-action`)
+- **`--color-icon-*`** - Icon colors (e.g., `--color-icon-neutral`, `--color-icon-action`)
+- **`--color-stroke-*`** - Border/stroke colors (e.g., `--color-stroke-action`, `--color-stroke-error`)
+- **`--color-decorative-*`** - Decorative colors (e.g., `--color-decorative-first-base`, `--color-decorative-second-muted`)
+- **`--color-component-*`** - Component-specific tokens (e.g., `--color-component-button-background-action`)
+
+This allows usage like:
+
+```html
+<div class="bg-background-action text-text-neutral border-stroke-action">
+  Styled with semantic tokens
+</div>
+```
+
+The `tokens-tailwind.css` files are available for all themes: `ui`, `sbanken`, and `carnegie`.
+
 ## Known styling and CSS issues
 
 - Safari, both on mobile and desktop, has a problem where we combine `border-radius` with the usage of `inset` in a `box-shadow`. The solution for now is to not use `inset`, which results in an outer border. This is not ideal as we don't follow the UX guidelines for these browsers. We have a SASS function handling this for us: `@mixin fakeBorder`.

packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makePropertiesFile.test.ts

@@ -1,5 +1,3 @@
-import { convertVariablesToTailwindFormat } from '../tailwindTransform'
-
 import makePropertiesFile, {
   extractReferencedCssVariables,
   transformFigmaAlias,
@@ -18,6 +16,9 @@ describe('makePropertiesFile', () => {
     uiFoundation: null,
     sbankenFoundation: null,
     carnegieFoundation: null,
+    uiTokensTailwind: null,
+    sbankenTokensTailwind: null,
+    carnegieTokensTailwind: null,
   }
 
   beforeAll(async () => {
@@ -59,6 +60,19 @@ describe('makePropertiesFile', () => {
       path.resolve('src/style/themes/carnegie/foundation.scss'),
       'utf-8'
     )
+
+    global.uiTokensTailwind = fs.readFileSync(
+      path.resolve('src/style/themes/ui/tokens-tailwind.css'),
+      'utf-8'
+    )
+    global.sbankenTokensTailwind = fs.readFileSync(
+      path.resolve('src/style/themes/sbanken/tokens-tailwind.css'),
+      'utf-8'
+    )
+    global.carnegieTokensTailwind = fs.readFileSync(
+      path.resolve('src/style/themes/carnegie/tokens-tailwind.css'),
+      'utf-8'
+    )
   })
   describe('Tokens snapshots for', () => {
     it('ui', () => {
@@ -77,6 +91,60 @@ describe('makePropertiesFile', () => {
     })
   })
 
+  describe('Tokens Tailwind CSS Generation', () => {
+    describe('CSS File Structure', () => {
+      it('should contain proper CSS file header', () => {
+        expect(global.uiTokensTailwind).toContain(
+          '/* This file is auto generated by makePropertiesFile.ts */'
+        )
+        expect(global.uiTokensTailwind).toContain(
+          '/* stylelint-disable-next-line scss/at-rule-no-unknown */'
+        )
+        expect(global.uiTokensTailwind).toContain('@theme {')
+      })
+
+      it('should have proper CSS formatting', () => {
+        expect(global.uiTokensTailwind).toMatch(/}\s*$/)
+      })
+    })
+
+    describe('Variable Transformation', () => {
+      it('should strip --token- prefix from variable names', () => {
+        expect(global.uiTokensTailwind).toContain(
+          '--color-background-action:'
+        )
+        expect(global.uiTokensTailwind).toContain('--color-text-neutral:')
+        expect(global.uiTokensTailwind).not.toMatch(
+          /--token-color-[a-zA-Z-]+:/
+        )
+      })
+
+      it('should preserve var() references to foundation variables', () => {
+        expect(global.uiTokensTailwind).toContain('var(--dnb-')
+      })
+    })
+
+    describe('Theme-Specific Content', () => {
+      it('should generate tokens-tailwind.css for all themes', () => {
+        expect(global.uiTokensTailwind).toBeTruthy()
+        expect(global.sbankenTokensTailwind).toBeTruthy()
+        expect(global.carnegieTokensTailwind).toBeTruthy()
+      })
+
+      it('should contain semantic color tokens', () => {
+        for (const tailwind of [
+          global.uiTokensTailwind,
+          global.sbankenTokensTailwind,
+          global.carnegieTokensTailwind,
+        ]) {
+          expect(tailwind).toContain('--color-background-')
+          expect(tailwind).toContain('--color-text-')
+          expect(tailwind).toContain('--color-stroke-')
+        }
+      })
+    })
+  })
+
   describe('Figma file generation', () => {
     describe('extractReferencedCssVariables', () => {
       it('extracts css variables from var() usage', () => {
@@ -306,47 +374,6 @@ describe('makePropertiesFile', () => {
     })
   })
 
-  describe('convertVariablesToTailwindFormat Function', () => {
-    it('should convert --sb-* variables to --*-sb-* format', () => {
-      const input = {
-        '--sb-color-black': '#000',
-        '--sb-font-size-small': '0.875rem',
-        '--sb-line-height-medium': '2rem',
-      }
-      const result = convertVariablesToTailwindFormat(input)
-
-      expect(result).toEqual({
-        '--color-sb-black': '#000',
-        '--text-sb-small': '0.875rem',
-        '--leading-sb-medium': '2rem',
-      })
-    })
-
-    it('should handle var() references correctly', () => {
-      const input = {
-        '--font-size-lead': 'var(--sb-font-size-medium)',
-      }
-      const result = convertVariablesToTailwindFormat(input)
-
-      expect(result).toEqual({
-        '--text-lead': 'var(--text-sb-medium)',
-      })
-    })
-
-    it('should preserve non-sb variables unchanged', () => {
-      const input = {
-        '--color-white': '#fff',
-        '--font-size-large': '2rem',
-      }
-      const result = convertVariablesToTailwindFormat(input)
-
-      expect(result).toEqual({
-        '--color-white': '#fff',
-        '--text-large': '2rem',
-      })
-    })
-  })
-
   describe('Tailwind CSS Properties Generation', () => {
     let uiTailwindResult, sbankenTailwindResult, eiendomTailwindResult
 

packages/dnb-eufemia/scripts/prebuild/tasks/makePropertiesFile.ts

@@ -384,6 +384,72 @@ const generateCSSVariablesFromFigmaExport = (
   }
 }
 
+const makeDesignTokenTailwindCSS = async (
+  /** Root path to the generated tokens.scss file */
+  tokensScssPath: string,
+  /** Root path for the generated Tailwind CSS file */
+  outputPath: string,
+  /** prefix to strip from variable names (e.g. 'token') */
+  prefix: string
+) => {
+  try {
+    const content = await promises.readFile(tokensScssPath, 'utf-8')
+
+    // Extract complete CSS declarations (which may span multiple lines)
+    const prefixPattern = `--${prefix}-`
+    const declarations: string[] = []
+    const lines = content.split('\n')
+    let currentDeclaration = ''
+    let collecting = false
+
+    for (const line of lines) {
+      const trimmed = line.trim()
+
+      if (trimmed.startsWith(prefixPattern)) {
+        collecting = true
+        currentDeclaration = trimmed
+      } else if (collecting) {
+        currentDeclaration += '\n' + line
+      }
+
+      if (collecting && currentDeclaration.includes(';')) {
+        // Strip the prefix from the variable name
+        const strippedDeclaration = currentDeclaration.replace(
+          new RegExp(`${prefixPattern}`),
+          '--'
+        )
+        declarations.push(`  ${strippedDeclaration.trim()}`)
+        collecting = false
+        currentDeclaration = ''
+      }
+    }
+
+    const cssContent = declarations.join('\n')
+
+    const tailwindContent = `/* This file is auto generated by makePropertiesFile.ts */
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown */
+@theme {
+${cssContent}
+}\n`
+
+    const prettierResult =
+      String(
+        await prettier.format(tailwindContent, {
+          filepath: 'file.css',
+          ...prettierrc,
+        })
+      ).trim() + '\n'
+
+    await promises.writeFile(outputPath, prettierResult)
+
+    log.info(`Generated Tailwind CSS file: ${outputPath}`)
+  } catch (e) {
+    log.fail(`Failed to generate Tailwind CSS file: ${outputPath}`)
+    throw e
+  }
+}
+
 const makeDesignTokenSCSS = async (
   /** Root path to Figma JSON export file */
   inputPath: string,
@@ -528,4 +594,18 @@ const runDesignTokenFactory = async () => {
       })
     )
   )
+
+  await Promise.all(
+    tokenFiles.map(async (file) => {
+      const tailwindOutPath = file.out.replace(
+        'tokens.scss',
+        'tokens-tailwind.css'
+      )
+      return makeDesignTokenTailwindCSS(
+        file.out,
+        tailwindOutPath,
+        file.prefix
+      )
+    })
+  )
 }