refactor(eds-tokens): tokens build sync setup (#3993)

* refactor (eds-tokens-build): Move eds specific build scripts to eds-tokens
* refactor (eds-tokens): Move eds specific build scripts to eds-tokens

* feat(eds-tokens-build): Add README support for light/dark CSS color variables and remove unused dependency

* refactor: remove the eds-tokens-sync dependency from the docker files and build script

* fix: update pnpm lock after removing dependency to tokens-sync in tokens-build.

Author: torleifhalseth

DockerfileColorPaletteGenerator

@@ -21,7 +21,6 @@ COPY packages/eds-color-palette-generator/package.json ./packages/eds-color-pale
 COPY packages/eds-tailwind/package.json ./packages/eds-tailwind/
 COPY packages/eds-tokens/package.json ./packages/eds-tokens/
 COPY packages/eds-tokens-build/package.json ./packages/eds-tokens-build/
-COPY packages/eds-tokens-sync/package.json ./packages/eds-tokens-sync/
 
 # Install dependencies with frozen lockfile and clean cache
 RUN pnpm install --frozen-lockfile && \

DockerfileEdsDemo

@@ -20,7 +20,6 @@ COPY package.json pnpm-lock.yaml pnpm-workspace.yaml babel.config.cjs tsconfig.b
 COPY packages/eds-demo/package.json ./packages/eds-demo/
 COPY packages/eds-tokens/package.json ./packages/eds-tokens/
 COPY packages/eds-tokens-build/package.json ./packages/eds-tokens-build/
-COPY packages/eds-tokens-sync/package.json ./packages/eds-tokens-sync/
 
 # Install dependencies with frozen lockfile and clean cache
 RUN pnpm install --frozen-lockfile && \

DockerfileEdsDocs

@@ -17,8 +17,7 @@ COPY . ./
 RUN pnpm install --frozen-lockfile
 
 # Build all necessary dependencies and docs
-RUN pnpm run build:token-sync && \
-    pnpm run build:tokens-build && \
+RUN pnpm run build:tokens-build && \
     pnpm run build:tokens && \
     pnpm run build:utils && \
     pnpm run build:icons && \

package.json

@@ -18,7 +18,7 @@
     "build:tokens": "pnpm --filter @equinor/eds-tokens run build",
     "build:tokens-build": "pnpm --filter @equinor/eds-tokens-build run build",
     "build:token-sync": "pnpm --filter @equinor/eds-tokens-sync run build",
-    "build:variables": "pnpm --filter @equinor/eds-tokens-sync run build && pnpm --filter @equinor/eds-tokens-build run build && pnpm --filter @equinor/eds-tokens run build:variables",
+    "build:variables": "pnpm --filter @equinor/eds-tokens-build run build && pnpm --filter @equinor/eds-tokens run build:variables",
     "update:tokens": "pnpm --filter @equinor/eds-tokens-sync run build && pnpm --filter @equinor/eds-tokens run update-tokens",
     "update:figma": "pnpm --filter @equinor/eds-tokens-sync run build && pnpm --filter @equinor/eds-tokens run update-figma",
     "build:icons": "pnpm --filter @equinor/eds-icons run build",

packages/eds-tokens-build/README.md

@@ -33,43 +33,57 @@ const config = _extend({
 await config.buildAllPlatforms();
 ```
 
-### Color Tokens with Light/Dark Mode
+### Creating Light/Dark CSS colour variables
+
+Generate separate CSS files for light and dark themes using the color scheme pattern:
 
 ```typescript
 import { 
   _extend, 
-  createLightDarkTransform, 
-  includeTokenFilter 
+  includeTokenFilter,
+  mergeLightDarkFoundation 
 } from '@equinor/eds-tokens-build';
-import { readJsonFiles } from '@equinor/eds-tokens-sync';
-import { StyleDictionary } from 'style-dictionary-utils';
-
-// Read dark mode tokens
-const darkTokens = readJsonFiles(['tokens/dark-theme.json']);
 
-// Create and register light/dark transform
-const lightDarkTransform = createLightDarkTransform({
-  name: 'lightDarkMatrix',
-  darkTokensObject: darkTokens['dark-theme.json']
+// Build light color scheme CSS variables
+const lightColorScheme = _extend({
+  source: ['tokens/light-color-scheme.json'],
+  include: ['tokens/light-colors.json'], // Core light colors
+  filter: (token) => includeTokenFilter(token, ['Color scheme']),
+  buildPath: 'build/css/',
+  fileName: 'light-color-scheme',
+  selector: '[data-color-scheme="light"]',
+  prefix: 'eds-color',
+  outputReferences: false,
 });
 
-StyleDictionary.registerTransform(lightDarkTransform);
-
-// Build color tokens with light/dark support
-const colorConfig = _extend({
-  source: ['tokens/light-theme.json'],
-  include: ['tokens/core.json'],
+// Build dark color scheme CSS variables
+const darkColorScheme = _extend({
+  source: ['tokens/dark-color-scheme.json'],
+  include: ['tokens/dark-colors.json'], // Core dark colors
+  filter: (token) => includeTokenFilter(token, ['Color scheme']),
   buildPath: 'build/css/',
-  fileName: 'colors',
-  selector: ':root',
-  filter: (token) => includeTokenFilter(token, ['Color']),
-  transforms: ['name/kebab', 'color/css', 'lightDarkMatrix'],
-  outputReferences: true
+  fileName: 'dark-color-scheme',
+  selector: '[data-color-scheme="dark"]',
+  prefix: 'eds-color',
+  outputReferences: false,
 });
 
-await colorConfig.buildAllPlatforms();
+await lightColorScheme.buildAllPlatforms();
+await darkColorScheme.buildAllPlatforms();
+
+// Merge into a single file using light-dark() CSS function
+mergeLightDarkFoundation({
+  prefix: 'eds-color',
+});
 ```
 
+This approach:
+- Uses `source` for the color scheme tokens (semantic colors like primary, secondary)
+- Uses `include` for the base color definitions (hex values, etc.)
+- Filters specifically for `['Color scheme']` tokens to avoid outputting all colors
+- Generates separate files for each theme with appropriate selectors
+- Merges them into a modern CSS file using the `light-dark()` function
+
 ### Typography Tokens
 
 ```typescript

packages/eds-tokens-build/package.json

@@ -37,7 +37,6 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
-    "@equinor/eds-tokens-sync": "workspace:*",
     "@types/node": "^22.18.0",
     "prettier": "3.6.2",
     "style-dictionary": "^5.0.3",

packages/eds-tokens-build/src/main.ts

@@ -6,11 +6,11 @@ export { PX_TO_REM_NAME } from './transform/pxToRem'
 export { _extend } from './utils'
 export { createLightDarkTransform } from './transform/lightDark'
 export { PX_TRANSFORM_NAME } from './transform/pxTransform'
-export { createSpacingAndTypographyVariables } from './createSpacingAndTypographyVariables'
-export { createColorVariablesStatic } from './createColorVariablesStatic'
-export { createColorVariablesDynamic } from './createColorVariablesDynamic'
-export { createColorVariablesFoundation } from './createColorVariablesFoundation'
 export { fontQuote } from './transform/fontQuote'
 export { pxFormatted } from './transform/pxFormatted'
 export { pxToRem } from './transform/pxToRem'
 export { pxTransform } from './transform/pxTransform'
+export {
+  mergeLightDarkFoundation,
+  type MergeLightDarkOptions,
+} from './utils/mergeLightDarkFoundation'

packages/eds-tokens-build/src/utils/mergeLightDarkFoundation.ts

@@ -1,18 +1,43 @@
 import { readFileSync, writeFileSync } from 'fs'
 import path from 'path'
 
-export function mergeLightDarkFoundation({ prefix }: { prefix: string }) {
-  const outputDirectory = `${process.cwd()}/build/css/color`
+export interface MergeLightDarkOptions {
+  /** CSS variable prefix to match (e.g., 'eds-color') */
+  prefix: string
+  /** Path to the light theme CSS file */
+  lightFilePath?: string
+  /** Path to the dark theme CSS file */
+  darkFilePath?: string
+  /** Output path for the merged CSS file */
+  outputFilePath?: string
+  /** Base output directory (used if specific file paths are not provided) */
+  outputDirectory?: string
+  /** Light file name pattern (used if lightFilePath is not provided) */
+  lightFileName?: string
+  /** Dark file name pattern (used if darkFilePath is not provided) */
+  darkFileName?: string
+  /** Output file name (used if outputFilePath is not provided) */
+  outputFileName?: string
+}
+
+export function mergeLightDarkFoundation(options: MergeLightDarkOptions) {
+  const {
+    prefix,
+    lightFilePath,
+    darkFilePath,
+    outputFilePath,
+    outputDirectory = `${process.cwd()}/build/css/color`,
+    lightFileName = 'light-color-scheme-trimmed.css',
+    darkFileName = 'dark-color-scheme-trimmed.css',
+    outputFileName = 'foundation.css',
+  } = options
 
-  const lightFoundationPath = path.join(
-    outputDirectory,
-    'light-color-scheme-trimmed.css',
-  )
-  const darkFoundationPath = path.join(
-    outputDirectory,
-    'dark-color-scheme-trimmed.css',
-  )
-  const mergedFoundationPath = path.join(outputDirectory, 'foundation.css')
+  const lightFoundationPath =
+    lightFilePath || path.join(outputDirectory, lightFileName)
+  const darkFoundationPath =
+    darkFilePath || path.join(outputDirectory, darkFileName)
+  const mergedFoundationPath =
+    outputFilePath || path.join(outputDirectory, outputFileName)
 
   try {
     const lightContent = readFileSync(lightFoundationPath, 'utf-8')

packages/eds-tokens-build/vite.config.ts

@@ -18,7 +18,6 @@ export default defineConfig({
         'crypto',
         'style-dictionary',
         'style-dictionary-utils',
-        '@equinor/eds-tokens-sync',
       ],
     },
   },