npm - @openkfw/design-tokens - Versions diffs - 0.1.0 → 0.1.1 - Mend

@openkfw/design-tokens 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

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

@@ -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.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/scss/kfw-design-tokens.light.scss CHANGED Viewed

@@ -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/css/kfw-design-tokens.light.css CHANGED Viewed

@@ -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.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/scss/kfw-design-tokens.light.scss CHANGED Viewed

@@ -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/package.json CHANGED Viewed

@@ -1,11 +1,11 @@
 {
   "name": "@openkfw/design-tokens",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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": {

package/sd.config.ts DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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}" }
-      }
-    }
-  }
-}