@openkfw/design-tokens 0.1.0 → 0.1.2

package/README.md

@@ -4,7 +4,7 @@ KfW Design Tokens is the source of truth for designing KfW-branded digital produ
 The tokens follow a template that complies with the <a href="https://tr.designtokens.org/">W3C DTCG format</a>.
 The documentation for how to using design tokens is accessible only <a href="https://brand-guide.kfw.de/document/85/de#/user-interface/user-interface">internally</a>.
 
-![Design Tokens badge](https://img.shields.io/badge/openkfw-design--tokens-005a8c) [![License: MPL-2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen)](./LICENSE)
+![Design Tokens badge](https://img.shields.io/badge/openkfw-design--tokens-005a8c) [![License: MPL-2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen)](./LICENSE) ![GitHub repo size](https://img.shields.io/github/repo-size/openkfw/design-tokens.svg?style=flat-square) ![GitHub package.json version ](https://img.shields.io/github/package-json/v/openkfw/design-tokens) [![NPM package](https://img.shields.io/npm/v/@openkfw/design-tokens.svg)](https://www.npmjs.com/package/@openkfw/design-tokens)
 
 # Customizing KfW Design Tokens for open source
 

package/output/README.md

@@ -13,20 +13,10 @@ This document describes the structure of the `/output` directory and provides an
 ├── /web_stable_10px
 └── /web_next_16px
 ```
+In the /output directory, you will find all available output formats for Figma, Penpot, JSON, and Web (CSS, SCSS, JS).
 
-### /figma and /penpot
-
-These folders contain design specifications for Figma and Penpot, respectively. All tokens are specified with pixel values.
-
-### /json
-
-This folder contains specifications for documentation. All tokens are specified with pixel values.
-
-### /web_stable_10px
-
-This folder contains styles (CSS, SCSS, JS) for applications that adhere to the KfW standard of 10px = 1rem, such as MeineKfW, KfW.de, and the Online Credit Portal.
-
-
-### /web_next_16px
-
-This folder contains styles for applications that use 16px = 1rem (the default browser font size), such as third-party systems like Storybook and Frontify.
+In the Web, we differentiate between `/web_stable_10px` and `/web_next_16px`, which use different REM root values. 
+For KfW.de, MeineKfW, education, and other KfW applications, we use 62.5% (16px = 1.6rem) by default for readability 
+reasons, meaning that 1rem equals 10px. In third-party systems where we cannot influence the REM root value and it 
+corresponds to the standard browser font size of 16px (100%), /web_next_16px should be used instead. 
+Please note that a font size of 10px should never be used. Therefore, it is advisable to set the font size in the to 1.6rem.

package/output/figma/kfw-design-tokens.light.json

@@ -706,7 +706,7 @@
         "$type": "dimension"
       },
       "Heading-6": {
-        "$value": "20px",
+        "$value": "10px",
         "$type": "dimension"
       }
     },

package/output/json/kfw-design-tokens.light.json

@@ -6460,13 +6460,13 @@
         "key": "{semantic.fontspace.heading-6}",
         "$value": {
           "unit": "px",
-          "value": 20
+          "value": 10
         },
         "filePath": "tokens/tokens.json",
         "isSource": true,
         "$type": "dimension",
         "original": {
-          "$value": "{base.space.static.20}",
+          "$value": "{base.space.static.10}",
           "$type": "dimension",
           "key": "{semantic.fontspace.heading-6}"
         },

package/output/penpot/kfw-design-tokens.light.json

@@ -706,7 +706,7 @@
         "$type": "dimension"
       },
       "Heading-6": {
-        "$value": "20px",
+        "$value": "10px",
         "$type": "dimension"
       }
     },

package/output/web_next_16px/css/kfw-design-tokens.light.css

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.0
+ * KfW Design Tokens v0.1.1
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -222,7 +222,7 @@
   --kfw-fontspace-heading-3: 0.625rem;
   --kfw-fontspace-heading-4: 0.625rem;
   --kfw-fontspace-heading-5: 0.625rem;
-  --kfw-fontspace-heading-6: 1.25rem;
+  --kfw-fontspace-heading-6: 0.625rem;
   --kfw-fontsize: 1rem;
   --kfw-fontsize-introduction: 1.25rem;
   --kfw-fontsize-small: 0.875rem;

package/output/web_next_16px/js/kfw-design-tokens.light.d.ts

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.0
+ * KfW Design Tokens v0.1.1
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */

package/output/web_next_16px/js/kfw-design-tokens.light.js

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.0
+ * KfW Design Tokens v0.1.1
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -521,7 +521,7 @@ export const KfwFontspaceHeading2 = "1.25rem";
 export const KfwFontspaceHeading3 = "0.625rem";
 export const KfwFontspaceHeading4 = "0.625rem";
 export const KfwFontspaceHeading5 = "0.625rem";
-export const KfwFontspaceHeading6 = "1.25rem";
+export const KfwFontspaceHeading6 = "0.625rem";
 export const KfwFontsize = "1rem";
 export const KfwFontsizeIntroduction = "1.25rem";
 export const KfwFontsizeSmall = "0.875rem";

package/output/web_next_16px/scss/kfw-design-tokens.light.scss

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.1.0
+// KfW Design Tokens v0.1.1
 // Copyright 2025
 // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
 
@@ -218,7 +218,7 @@ $kfw-fontspace-heading-2: 1.25rem;
 $kfw-fontspace-heading-3: 0.625rem;
 $kfw-fontspace-heading-4: 0.625rem;
 $kfw-fontspace-heading-5: 0.625rem;
-$kfw-fontspace-heading-6: 1.25rem;
+$kfw-fontspace-heading-6: 0.625rem;
 $kfw-fontsize: 1rem;
 $kfw-fontsize-introduction: 1.25rem;
 $kfw-fontsize-small: 0.875rem;

package/output/web_stable_10px/css/kfw-design-tokens.light.css

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.0
+ * KfW Design Tokens v0.1.1
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -222,7 +222,7 @@
   --kfw-fontspace-heading-3: 1rem;
   --kfw-fontspace-heading-4: 1rem;
   --kfw-fontspace-heading-5: 1rem;
-  --kfw-fontspace-heading-6: 2rem;
+  --kfw-fontspace-heading-6: 1rem;
   --kfw-fontsize: 1.6rem;
   --kfw-fontsize-introduction: 2rem;
   --kfw-fontsize-small: 1.4rem;

package/output/web_stable_10px/js/kfw-design-tokens.light.d.ts

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.0
+ * KfW Design Tokens v0.1.1
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */

package/output/web_stable_10px/js/kfw-design-tokens.light.js

@@ -1,5 +1,5 @@
 /**
- * KfW Design Tokens v0.1.0
+ * KfW Design Tokens v0.1.1
  * Copyright 2025
  * Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
  */
@@ -521,7 +521,7 @@ export const KfwFontspaceHeading2 = "2rem";
 export const KfwFontspaceHeading3 = "1rem";
 export const KfwFontspaceHeading4 = "1rem";
 export const KfwFontspaceHeading5 = "1rem";
-export const KfwFontspaceHeading6 = "2rem";
+export const KfwFontspaceHeading6 = "1rem";
 export const KfwFontsize = "1.6rem";
 export const KfwFontsizeIntroduction = "2rem";
 export const KfwFontsizeSmall = "1.4rem";

package/output/web_stable_10px/scss/kfw-design-tokens.light.scss

@@ -1,5 +1,5 @@
 
-// KfW Design Tokens v0.1.0
+// KfW Design Tokens v0.1.1
 // Copyright 2025
 // Licensed under MPL-2.0 (https://github.com/openkfw/design-tokens/blob/main/LICENSE)
 
@@ -218,7 +218,7 @@ $kfw-fontspace-heading-2: 2rem;
 $kfw-fontspace-heading-3: 1rem;
 $kfw-fontspace-heading-4: 1rem;
 $kfw-fontspace-heading-5: 1rem;
-$kfw-fontspace-heading-6: 2rem;
+$kfw-fontspace-heading-6: 1rem;
 $kfw-fontsize: 1.6rem;
 $kfw-fontsize-introduction: 2rem;
 $kfw-fontsize-small: 1.4rem;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "The source of truth for KfW-branded digital products.",
-  "main": "sd.config.ts",
   "files": [
     "output",
-    "tokens",
+    "tokens/tokens.json",
+    "tokens/gen-tokens.dark.json5",
     "README.md"
   ],
   "scripts": {
@@ -50,7 +50,7 @@
     "jsoneditor-cli": "^1.1.0",
     "lodash": "4.17.21",
     "prettier": "^3.6.2",
-    "style-dictionary": "^5.0.1",
+    "style-dictionary": "^5.0.2",
     "tsx": "^4.20.4",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.40.0"

package/tokens/gen-tokens.dark.json5

@@ -1313,7 +1313,7 @@
         $value: "{base.space.static.10}",
       },
       "heading-6": {
-        $value: "{base.space.static.20}",
+        $value: "{base.space.static.10}",
       },
     },
     fontsize: {

package/tokens/tokens.json

@@ -370,7 +370,7 @@
       "heading-3": { "$value": "{base.space.static.10}" },
       "heading-4": { "$value": "{base.space.static.10}" },
       "heading-5": { "$value": "{base.space.static.10}" },
-      "heading-6": { "$value": "{base.space.static.20}" }
+      "heading-6": { "$value": "{base.space.static.10}" }
     },
     "fontsize": {
       "$type": "dimension",

package/sd.config.ts

@@ -1,162 +0,0 @@
-/**
- * KfW Design Tokens https://github.com/openkfw/design-tokens
- *
- * Copyright (c) 2025 Artur Sopelnik and contributors, KfW
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-import StyleDictionary from "style-dictionary"
-import { Config } from "style-dictionary/types"
-import { formats, logBrokenReferenceLevels, logVerbosityLevels } from "style-dictionary/enums"
-import { RegisterCustom } from "./config"
-
-const THEMES = ["light"]
-const PREFIX = "kfw"
-const BASE_PX = {
-  next: 16,
-  stable: 10
-}
-const CONFIG: Config = {
-  usesDtcg: true,
-  expand: false,
-  log: {
-    warnings: "disabled",
-    verbosity: logVerbosityLevels.verbose,
-    errors: {
-      brokenReferences: logBrokenReferenceLevels.throw
-    }
-  }
-}
-const DEFAULT_SELECTOR = `!(*.${THEMES.join("|*.")})`
-
-RegisterCustom(PREFIX)
-
-const BUILD_PATH_PREFIX = "output"
-
-const createStyleDictionaryConfig = (theme: string, basePxFontSize: number): Config => {
-  const isLight = theme === "light"
-  const src = isLight ? DEFAULT_SELECTOR : `*.${theme}`
-  const isStable = basePxFontSize === 10
-
-  return {
-    ...CONFIG,
-    source: [`tokens/${src}.{json,json5}`],
-    platforms: {
-      css: {
-        basePxFontSize,
-        buildPath: `${BUILD_PATH_PREFIX}${isStable ? "/web_stable_10px" : "/web_next_16px"}/css`,
-        options: { fileHeader: "kfw-file-header" },
-        transformGroup: "custom/css-extended",
-        prefix: PREFIX,
-        files: [
-          {
-            destination: `kfw-design-tokens.${theme}.css`,
-            format: formats.cssVariables,
-            options: {
-              selector: (() => {
-                // For convenience, the light theme is scoped to :root and will be activated by default when imported.
-                const SELECTOR = isLight ? `:root, :host, .${PREFIX}-theme--${theme}` : `:host, .${PREFIX}-theme--${theme}`
-                return `${SELECTOR} { color-scheme: ${theme}; }\n\n${SELECTOR}`
-              })(),
-              outputReferences: false
-            }
-          }
-        ]
-      },
-      scss: {
-        basePxFontSize,
-        buildPath: `${BUILD_PATH_PREFIX}${isStable ? "/web_stable_10px" : "/web_next_16px"}/scss`,
-        options: { fileHeader: "kfw-file-header" },
-        transformGroup: "custom/scss-extended",
-        prefix: PREFIX,
-        files: [
-          {
-            destination: `kfw-design-tokens.${theme}.scss`,
-            format: formats.scssVariables,
-            options: {
-              selector: (() => {
-                // For convenience, the light theme is scoped to :root and will be activated by default when imported.
-                const SELECTOR = isLight ? `:root, :host, .${PREFIX}-theme--${theme}` : `:host, .${PREFIX}-theme--${theme}`
-                return `${SELECTOR} { color-scheme: ${theme}; }\n\n${SELECTOR}`
-              })(),
-              outputReferences: false
-            }
-          }
-        ]
-      },
-      js: {
-        basePxFontSize,
-        buildPath: `${BUILD_PATH_PREFIX}${isStable ? "/web_stable_10px" : "/web_next_16px"}/js`,
-        options: { fileHeader: "kfw-file-header" },
-        transformGroup: "custom/js-extended",
-        prefix: PREFIX,
-        files: [
-          {
-            destination: `kfw-design-tokens.${theme}.js`,
-            format: formats.javascriptEs6
-          },
-          {
-            destination: `kfw-design-tokens.${theme}.d.ts`,
-            format: formats.typescriptEs6Declarations
-          }
-        ]
-      },
-      ...(!isStable && {
-        json: {
-          basePxFontSize,
-          buildPath: `${BUILD_PATH_PREFIX}/json`,
-          transformGroup: "custom/web-extended",
-          prefix: PREFIX,
-          files: [
-            {
-              destination: `kfw-design-tokens.${theme}.json`,
-              format: formats.json
-            }
-          ]
-        },
-        figma: {
-          basePxFontSize,
-          buildPath: `${BUILD_PATH_PREFIX}/figma`,
-          transformGroup: "custom/figma-penpot",
-          files: [
-            {
-              destination: `kfw-design-tokens.${theme}.json`,
-              format: "json/figma"
-            }
-          ]
-        },
-        penpot: {
-          basePxFontSize,
-          buildPath: `${BUILD_PATH_PREFIX}/penpot`,
-          transformGroup: "custom/figma-penpot",
-          files: [
-            {
-              destination: `kfw-design-tokens.${theme}.json`,
-              format: "json/penpot"
-            }
-          ]
-        }
-      })
-    }
-  }
-}
-
-export default (async function buildThemes() {
-  console.log("Build started...")
-  console.log("\n==============================================")
-
-  for (const theme of THEMES) {
-    for (const key in BASE_PX) {
-      if (Object.prototype.hasOwnProperty.call(BASE_PX, key)) {
-        const basePxFontSize = BASE_PX[key as keyof typeof BASE_PX]
-        const sd = new StyleDictionary(createStyleDictionaryConfig(theme, basePxFontSize))
-        await sd.buildAllPlatforms()
-      }
-    }
-  }
-  console.log("\n==============================================")
-  console.log("\nBuild completed!")
-})()

package/tokens/extended/README.md

@@ -1,15 +0,0 @@
-# Style-Dictionary Extended Design Tokens
-
-The script `build.ts` generates design tokens (JSON files) based on your reference and the object to be extended. It uses the lodash library to merge the data and json5 to read and write JSON5 files. By using extends, the light version is set as the baseline, as deviating themes like "dark" only change minimally.
-
-## 💡 System Requirements
-
-- Node.js 22
-- Git
-
-## 🚀 Setup
-
-1. Select the compatible Node version: `nvm use`
-2. Install dependencies: `npm install`
-3. Build the project: `npm run build`
-   - (optional) Build the project with watch: `npm run start`

package/tokens/extended/build.ts

@@ -1,79 +0,0 @@
-import { promises as fs } from "fs"
-import * as path from "path"
-import JSON5 from "json5"
-import merge from "lodash/merge"
-
-const SOURCE_DIRECTORY = path.join(__dirname, "./tokens")
-const OUTPUT_DIRECTORY = path.join(__dirname, "../")
-
-const MAPPING: Record<string, string> = {
-  "tokens.dark.json": "tokens.json"
-}
-
-const OUTPUT_FILE_PREFIX = "gen"
-
-;(async () => {
-  try {
-    // Read the files in the directory
-    const files = await fs.readdir(SOURCE_DIRECTORY)
-
-    // Map the files to full paths as JSON
-    const jsons = files.map((file) => path.join(SOURCE_DIRECTORY, file)).filter((str) => str.includes(".json"))
-
-    jsons.map((inputFile) => {
-      const fileName = path.basename(inputFile)
-
-      const mappedValue = getMappedValue(fileName)
-
-      if (!mappedValue) {
-        console.error("Error finding the file to extend. Please check the MAPPING object.")
-        return
-      }
-
-      const extendedFile = path.join(OUTPUT_DIRECTORY, mappedValue)
-
-      const fileNameWithoutExtension = path.basename(inputFile, path.extname(inputFile))
-
-      const outputFile = path.join(OUTPUT_DIRECTORY, `${OUTPUT_FILE_PREFIX ? OUTPUT_FILE_PREFIX + "-" : ""}${fileNameWithoutExtension}.json5`)
-
-      combineJsonFiles(extendedFile, inputFile, outputFile)
-    })
-  } catch (err) {
-    console.error("Error scanning the directory:", err)
-  }
-})()
-
-function getMappedValue(key: string): string | undefined {
-  if (key in MAPPING) {
-    return MAPPING[key]
-  }
-  return undefined
-}
-
-async function combineJsonFiles(extendedFile: string, inputFile: string, outputFile: string): Promise<void> {
-  try {
-    const data1 = JSON5.parse(await fs.readFile(extendedFile, "utf8"))
-    const data2 = JSON5.parse(await fs.readFile(inputFile, "utf8"))
-
-    const combinedData = merge({}, data1, data2)
-
-    const comment = `/**
- * Do not edit directly, this file was auto-generated.
- * By ${inputFile}
- */\n\n`
-
-    // Write the combined data to a new JSON5 file
-    await fs.writeFile(
-      outputFile,
-      `${comment}${JSON5.stringify(combinedData, {
-        space: 2,
-        quote: '"'
-      })}\n`,
-      "utf8"
-    )
-
-    console.log(`The file ${outputFile} was successfully created.`)
-  } catch (error) {
-    console.error(`Error processing the files`, error)
-  }
-}

package/tokens/extended/tokens/tokens.dark.json

@@ -1,21 +0,0 @@
-{
-  "semantic": {
-    "color": {
-      "$type": "color",
-      "fn": {
-        "default": { "$value": "{base.color.white.default}" },
-        "active": { "$value": "{base.color.white.default}" },
-        "border": { "$value": "{base.color.gray.100}" },
-        "label": { "$value": "{base.color.gray.100}" }
-      },
-      "text": {
-        "default": { "$value": "{base.color.gray.100}" },
-        "on-dark-bg": { "$value": "{base.color.blue.700}" }
-      },
-      "background": {
-        "default": { "$value": "{base.color.black}" },
-        "subtle": { "$value": "{base.color.gray.600}" }
-      }
-    }
-  }
-}