@aleph-alpha/config-css 0.7.0

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@aleph-alpha/config-css",
+  "license": "Apache-2.0",
+  "version": "0.7.0",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "prettier": "@aleph-alpha/prettier-config-frontend",
+  "type": "module",
+  "author": "Aleph Alpha GmbH",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.aleph-alpha.de/engineering/frontend-hub"
+  },
+  "typedocOptions": {
+    "entryPoints": [
+      "./src/index.ts"
+    ]
+  },
+  "dependencies": {
+    "@tokens-studio/sd-transforms": "1.2.9",
+    "token-transformer": "0.0.33",
+    "unocss": "^0.61.3",
+    "unocss-preset-animations": "1.1.1",
+    "unocss-preset-theme": "0.14.1"
+  },
+  "devDependencies": {
+    "style-dictionary": "^4.0.1",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "scripts": {
+    "transform:global": "npx token-transformer ./tokens.json ./transformed-tokens/global.json global,\"Spark Border Radius/Mode 1\",\"Spark Spacings/Mode 1\" \"Spark Colors/Light mode/primitives\" --throwErrorWhenNotResolved",
+    "transform:dark-mode": "npx token-transformer ./tokens.json ./transformed-tokens/dark-mode.json \"Spark Colors/Dark mode\" --throwErrorWhenNotResolved",
+    "transform:light-mode": "npx token-transformer ./tokens.json ./transformed-tokens/light-mode.json \"Spark Colors/Light mode\" --throwErrorWhenNotResolved",
+    "transform:all": "pnpm run transform:global && pnpm run transform:dark-mode && pnpm run transform:light-mode",
+    "build:sd": "node ./sd.config.js",
+    "build:uno": "vite build",
+    "build": "pnpm run transform:all && pnpm run build:sd && pnpm run build:uno"
+  }
+}

package/project.json

@@ -0,0 +1,15 @@
+{
+  "name": "config-css-preset",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/config-css-preset/src",
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "echo \"No tests\""
+      }
+    }
+  },
+  "tags": []
+}

package/sd-output/box-shadows.json

@@ -0,0 +1,7 @@
+{
+  "pop-ups-and-modals": "0px 1px 20px 0px #0000001f",
+  "dropdowns": "0px 1px 6px 0px #0000001f",
+  "banner-and-snackbars": "0px 4px 24px 0px #00000033",
+  "left-elevated-card": "5px 5px 6px 0px #0000001f",
+  "right-elevated-card": "-5px 5px 6px 0px #0000001f"
+}

package/sd-output/dark-mode.json

@@ -0,0 +1,148 @@
+{
+  "core-content-primary": "#f2f2f8",
+  "core-content-secondary": "#b9b9ce",
+  "core-content-tertiary": "#9595ac",
+  "core-content-placeholder": "#9595ac",
+  "core-content-on-bg-inverse": "#1e1e23",
+  "core-content-always-white": "#fbfbfd",
+  "core-content-accent-soft": "#b2bfff",
+  "core-content-always-black": "#0f0f12",
+  "core-content-link-visited": "#b2bfff",
+  "core-bg-primary": "#0f0f12",
+  "core-bg-secondary": "#17171c",
+  "core-bg-tertiary": "#1e1e23",
+  "core-bg-tertiary-hover": "#33333c",
+  "core-bg-accent": "#9397fe",
+  "core-bg-accent-soft": "#2b1ca3",
+  "core-bg-accent-soft-hover": "#3421c7",
+  "core-bg-on-color-inverse": "#fbfbfd",
+  "core-bg-loading": "#4841f2",
+  "core-bg-modal-overlay": "#0f0f12bf",
+  "core-bg-gradient-0": "#0f0f1200",
+  "core-bg-accent-hover": "#b2bfff",
+  "core-bg-text-mark-soft": "#1b125c",
+  "core-bg-text-mark-soft-hover": "#231780",
+  "core-bg-text-mark": "#2b1ca3",
+  "core-bg-text-mark-hover": "#3421c7",
+  "core-border-default": "#33333c",
+  "core-border-focus": "#9397fe",
+  "core-border-hover": "#9595ac",
+  "core-border-contrast": "#7f7f94",
+  "core-border-contrast-hover": "#ebebf4",
+  "core-border-text-mark": "#9397fe",
+  "core-border-text-mark-hover": "#b2bfff",
+  "brand-content-default": "#0f0f12",
+  "brand-content-brand-soft": "#dcf706",
+  "brand-bg-brand": "#dcf706",
+  "brand-bg-brand-hover": "#bcd902",
+  "brand-bg-brand-soft": "#3c4301",
+  "brand-border-default": "#bcd902",
+  "semantic-content-success": "#fbfbfd",
+  "semantic-content-success-soft": "#4ade80",
+  "semantic-content-error": "#fbfbfd",
+  "semantic-content-error-soft": "#fe8c8c",
+  "semantic-content-warning": "#0f0f12",
+  "semantic-content-warning-soft": "#facc15",
+  "semantic-content-info": "#fbfbfd",
+  "semantic-content-info-soft": "#b2bfff",
+  "semantic-content-error-label": "#fe8c8c",
+  "semantic-content-success-label": "#4ade80",
+  "semantic-bg-success": "#166534",
+  "semantic-bg-success-soft": "#052e16",
+  "semantic-bg-success-action": "#15803d",
+  "semantic-bg-success-soft-action": "#0a4d25",
+  "semantic-bg-error": "#991b1b",
+  "semantic-bg-error-action": "#b91c1c",
+  "semantic-bg-error-soft": "#450a0a",
+  "semantic-bg-error-soft-action": "#6f1313",
+  "semantic-bg-warning": "#eab308",
+  "semantic-bg-warning-action": "#facc15",
+  "semantic-bg-warning-soft": "#422006",
+  "semantic-bg-warning-soft-action": "#64370a",
+  "semantic-bg-info": "#3c26eb",
+  "semantic-bg-info-action": "#4841f2",
+  "semantic-bg-info-soft": "#1b125c",
+  "semantic-bg-info-soft-action": "#3421c7",
+  "semantic-bg-error-action-hover": "#6f1313",
+  "semantic-bg-success-action-hover": "#0a4d25",
+  "semantic-border-success": "#15803d",
+  "semantic-border-success-soft": "#0a4d25",
+  "semantic-border-error": "#b91c1c",
+  "semantic-border-error-soft": "#6f1313",
+  "semantic-border-warning": "#facc15",
+  "semantic-border-warning-soft": "#64370a",
+  "semantic-border-info": "#4841f2",
+  "semantic-border-info-soft": "#2b1ca3",
+  "primitives-neutral-25": "#fbfbfd",
+  "primitives-neutral-50": "#f2f2f8",
+  "primitives-neutral-100": "#ebebf4",
+  "primitives-neutral-150": "#dbdbe9",
+  "primitives-neutral-200": "#ccccde",
+  "primitives-neutral-300": "#b9b9ce",
+  "primitives-neutral-400": "#9595ac",
+  "primitives-neutral-450": "#7f7f94",
+  "primitives-neutral-500": "#646474",
+  "primitives-neutral-600": "#484851",
+  "primitives-neutral-700": "#33333c",
+  "primitives-neutral-800": "#1e1e23",
+  "primitives-neutral-900": "#17171c",
+  "primitives-neutral-950": "#0f0f12",
+  "primitives-neutral-950-0": "#0f0f1200",
+  "primitives-neutral-25-0": "#fbfbfd00",
+  "primitives-neutral-950-75": "#0f0f12bf",
+  "primitives-brand-25": "#fdffee",
+  "primitives-brand-50": "#fbffdc",
+  "primitives-brand-100": "#f8ffbf",
+  "primitives-brand-200": "#f3ff92",
+  "primitives-brand-250": "#e9f781",
+  "primitives-brand-300": "#e6f668",
+  "primitives-brand-400": "#e0f538",
+  "primitives-brand-500": "#dcf706",
+  "primitives-brand-550": "#cce804",
+  "primitives-brand-600": "#bcd902",
+  "primitives-brand-700": "#a5b900",
+  "primitives-brand-800": "#798800",
+  "primitives-brand-900": "#576200",
+  "primitives-brand-950": "#3c4301",
+  "primitives-ultramarine-25": "#f4f5ff",
+  "primitives-ultramarine-50": "#e5ebff",
+  "primitives-ultramarine-100": "#d0daff",
+  "primitives-ultramarine-200": "#b2bfff",
+  "primitives-ultramarine-300": "#9397fe",
+  "primitives-ultramarine-400": "#555cf9",
+  "primitives-ultramarine-450": "#4841f2",
+  "primitives-ultramarine-500": "#433de2",
+  "primitives-ultramarine-600": "#3c26eb",
+  "primitives-ultramarine-700": "#3421c7",
+  "primitives-ultramarine-800": "#2b1ca3",
+  "primitives-ultramarine-900": "#231780",
+  "primitives-ultramarine-950": "#1b125c",
+  "primitives-green-100": "#dcfce7",
+  "primitives-green-200": "#bbf7d0",
+  "primitives-green-300": "#70f3a0",
+  "primitives-green-400": "#4ade80",
+  "primitives-green-700": "#15803d",
+  "primitives-green-800": "#166534",
+  "primitives-green-900": "#0a4d25",
+  "primitives-green-950": "#052e16",
+  "primitives-red-100": "#fee2e2",
+  "primitives-red-200": "#fecaca",
+  "primitives-red-300": "#fe8c8c",
+  "primitives-red-400": "#f87171",
+  "primitives-red-600": "#dc2626",
+  "primitives-red-700": "#b91c1c",
+  "primitives-red-800": "#991b1b",
+  "primitives-red-900": "#6f1313",
+  "primitives-red-950": "#450a0a",
+  "primitives-yellow-50": "#fefacf",
+  "primitives-yellow-100": "#fef9c3",
+  "primitives-yellow-200": "#fef08a",
+  "primitives-yellow-300": "#feeb62",
+  "primitives-yellow-400": "#fcdc3c",
+  "primitives-yellow-500": "#facc15",
+  "primitives-yellow-550": "#f2bf0f",
+  "primitives-yellow-600": "#eab308",
+  "primitives-yellow-800": "#854d0e",
+  "primitives-yellow-900": "#64370a",
+  "primitives-yellow-950": "#422006"
+}

package/sd-output/global.json

@@ -0,0 +1,4 @@
+{
+  "linear-gradient-top": "linear-gradient(180deg, #0f0f12 0%, #0f0f1200 100%)",
+  "linear-gradient-bottom": "linear-gradient(180deg, #0f0f1200 0%, #0f0f12 100%)"
+}

package/sd-output/light-mode.json

@@ -0,0 +1,148 @@
+{
+  "core-content-primary": "#1e1e23",
+  "core-content-secondary": "#484851",
+  "core-content-tertiary": "#646474",
+  "core-content-placeholder": "#646474",
+  "core-content-on-bg-inverse": "#fbfbfd",
+  "core-content-always-white": "#f2f2f8",
+  "core-content-accent-soft": "#3c26eb",
+  "core-content-always-black": "#0f0f12",
+  "core-content-link-visited": "#2b1ca3",
+  "core-bg-primary": "#fbfbfd",
+  "core-bg-secondary": "#f2f2f8",
+  "core-bg-tertiary": "#fbfbfd",
+  "core-bg-tertiary-hover": "#dbdbe9",
+  "core-bg-accent": "#555cf9",
+  "core-bg-accent-soft": "#d0daff",
+  "core-bg-accent-soft-hover": "#b2bfff",
+  "core-bg-on-color-inverse": "#1e1e23",
+  "core-bg-loading": "#4841f2",
+  "core-bg-modal-overlay": "#0f0f12bf",
+  "core-bg-gradient-0": "#fbfbfd00",
+  "core-bg-accent-hover": "#433de2",
+  "core-bg-text-mark-soft": "#e5ebff",
+  "core-bg-text-mark-soft-hover": "#d0daff",
+  "core-bg-text-mark": "#b2bfff",
+  "core-bg-text-mark-hover": "#9397fe",
+  "core-border-default": "#dbdbe9",
+  "core-border-focus": "#555cf9",
+  "core-border-hover": "#9595ac",
+  "core-border-contrast": "#7f7f94",
+  "core-border-contrast-hover": "#33333c",
+  "core-border-text-mark": "#555cf9",
+  "core-border-text-mark-hover": "#433de2",
+  "brand-content-default": "#0f0f12",
+  "brand-content-brand-soft": "#576200",
+  "brand-bg-brand": "#cce804",
+  "brand-bg-brand-hover": "#dcf706",
+  "brand-bg-brand-soft": "#e9f781",
+  "brand-border-default": "#bcd902",
+  "semantic-content-success": "#fbfbfd",
+  "semantic-content-success-soft": "#166534",
+  "semantic-content-error": "#fbfbfd",
+  "semantic-content-error-soft": "#991b1b",
+  "semantic-content-warning": "#0f0f12",
+  "semantic-content-warning-soft": "#854d0e",
+  "semantic-content-info": "#fbfbfd",
+  "semantic-content-info-soft": "#2b1ca3",
+  "semantic-content-error-label": "#dc2626",
+  "semantic-content-success-label": "#15803d",
+  "semantic-bg-success": "#15803d",
+  "semantic-bg-success-soft": "#dcfce7",
+  "semantic-bg-success-action": "#166534",
+  "semantic-bg-success-soft-action": "#bbf7d0",
+  "semantic-bg-error": "#dc2626",
+  "semantic-bg-error-action": "#b91c1c",
+  "semantic-bg-error-soft": "#fee2e2",
+  "semantic-bg-error-soft-action": "#fecaca",
+  "semantic-bg-warning": "#fcdc3c",
+  "semantic-bg-warning-action": "#f2bf0f",
+  "semantic-bg-warning-soft": "#fefacf",
+  "semantic-bg-warning-soft-action": "#fef08a",
+  "semantic-bg-info": "#433de2",
+  "semantic-bg-info-action": "#3421c7",
+  "semantic-bg-info-soft": "#e5ebff",
+  "semantic-bg-info-soft-action": "#d0daff",
+  "semantic-bg-error-action-hover": "#991b1b",
+  "semantic-bg-success-action-hover": "#0a4d25",
+  "semantic-border-success": "#166534",
+  "semantic-border-success-soft": "#bbf7d0",
+  "semantic-border-error": "#991b1b",
+  "semantic-border-error-soft": "#fecaca",
+  "semantic-border-warning": "#facc15",
+  "semantic-border-warning-soft": "#fef08a",
+  "semantic-border-info": "#3c26eb",
+  "semantic-border-info-soft": "#d0daff",
+  "primitives-neutral-25": "#fbfbfd",
+  "primitives-neutral-50": "#f2f2f8",
+  "primitives-neutral-100": "#ebebf4",
+  "primitives-neutral-150": "#dbdbe9",
+  "primitives-neutral-200": "#ccccde",
+  "primitives-neutral-300": "#b9b9ce",
+  "primitives-neutral-400": "#9595ac",
+  "primitives-neutral-450": "#7f7f94",
+  "primitives-neutral-500": "#646474",
+  "primitives-neutral-600": "#484851",
+  "primitives-neutral-700": "#33333c",
+  "primitives-neutral-800": "#1e1e23",
+  "primitives-neutral-900": "#17171c",
+  "primitives-neutral-950": "#0f0f12",
+  "primitives-neutral-950-0": "#0f0f1200",
+  "primitives-neutral-25-0": "#fbfbfd00",
+  "primitives-neutral-950-75": "#0f0f12bf",
+  "primitives-brand-25": "#fdffee",
+  "primitives-brand-50": "#fbffdc",
+  "primitives-brand-100": "#f8ffbf",
+  "primitives-brand-200": "#f3ff92",
+  "primitives-brand-250": "#e9f781",
+  "primitives-brand-300": "#e6f668",
+  "primitives-brand-400": "#e0f538",
+  "primitives-brand-500": "#dcf706",
+  "primitives-brand-550": "#cce804",
+  "primitives-brand-600": "#bcd902",
+  "primitives-brand-700": "#a5b900",
+  "primitives-brand-800": "#798800",
+  "primitives-brand-900": "#576200",
+  "primitives-brand-950": "#3c4301",
+  "primitives-ultramarine-25": "#f4f5ff",
+  "primitives-ultramarine-50": "#e5ebff",
+  "primitives-ultramarine-100": "#d0daff",
+  "primitives-ultramarine-200": "#b2bfff",
+  "primitives-ultramarine-300": "#9397fe",
+  "primitives-ultramarine-400": "#555cf9",
+  "primitives-ultramarine-450": "#4841f2",
+  "primitives-ultramarine-500": "#433de2",
+  "primitives-ultramarine-600": "#3c26eb",
+  "primitives-ultramarine-700": "#3421c7",
+  "primitives-ultramarine-800": "#2b1ca3",
+  "primitives-ultramarine-900": "#231780",
+  "primitives-ultramarine-950": "#1b125c",
+  "primitives-green-100": "#dcfce7",
+  "primitives-green-200": "#bbf7d0",
+  "primitives-green-300": "#70f3a0",
+  "primitives-green-400": "#4ade80",
+  "primitives-green-700": "#15803d",
+  "primitives-green-800": "#166534",
+  "primitives-green-900": "#0a4d25",
+  "primitives-green-950": "#052e16",
+  "primitives-red-100": "#fee2e2",
+  "primitives-red-200": "#fecaca",
+  "primitives-red-300": "#fe8c8c",
+  "primitives-red-400": "#f87171",
+  "primitives-red-600": "#dc2626",
+  "primitives-red-700": "#b91c1c",
+  "primitives-red-800": "#991b1b",
+  "primitives-red-900": "#6f1313",
+  "primitives-red-950": "#450a0a",
+  "primitives-yellow-50": "#fefacf",
+  "primitives-yellow-100": "#fef9c3",
+  "primitives-yellow-200": "#fef08a",
+  "primitives-yellow-300": "#feeb62",
+  "primitives-yellow-400": "#fcdc3c",
+  "primitives-yellow-500": "#facc15",
+  "primitives-yellow-550": "#f2bf0f",
+  "primitives-yellow-600": "#eab308",
+  "primitives-yellow-800": "#854d0e",
+  "primitives-yellow-900": "#64370a",
+  "primitives-yellow-950": "#422006"
+}

package/sd-output/spacings.json

@@ -0,0 +1,21 @@
+{
+  "NONE": "0rem",
+  "DEFAULT": "0.25rem",
+  "MODAL": "0.5rem",
+  "CHIPS": "2.75rem",
+  "3XS": "0.25rem",
+  "XS": "0.5rem",
+  "M": "0.75rem",
+  "L": "1rem",
+  "XL": "1.25rem",
+  "XXL": "1.5rem",
+  "3XL": "2rem",
+  "4XL": "3rem",
+  "5XL": "4rem",
+  "4XS": "0.125rem",
+  "XXS": "0.25rem",
+  "S": "0.5rem",
+  "LETTERSPACING-0": "0em",
+  "PARAGRAPHSPACING-0": "0",
+  "PARAGRAPHINDENT-0": "0px"
+}

package/sd-output/typography.json

@@ -0,0 +1,14 @@
+{
+  "heading-30": {"font-family":"Raleway","font-weight":700,"line-height":"normal","font-size":"30px","letter-spacing":"0em","text-decoration":"none"},
+  "heading-20": {"font-family":"Raleway","font-weight":700,"line-height":"normal","font-size":"20px","letter-spacing":"0em","text-decoration":"none"},
+  "heading-18": {"font-family":"Raleway","font-weight":700,"line-height":"normal","font-size":"18px","letter-spacing":"0em","text-decoration":"none"},
+  "heading-16": {"font-family":"Raleway","font-weight":700,"line-height":"24px","font-size":"16px","letter-spacing":"0em","text-decoration":"none"},
+  "heading-14": {"font-family":"Raleway","font-weight":600,"line-height":"16px","font-size":"14px","letter-spacing":"0em","text-decoration":"none"},
+  "body-16-bold": {"font-family":"Raleway","font-weight":700,"line-height":"24px","font-size":"16px","letter-spacing":"0em","text-decoration":"none"},
+  "body-16": {"font-family":"Raleway","font-weight":500,"line-height":"24px","font-size":"16px","letter-spacing":"0em","text-decoration":"none"},
+  "body-16-compact": {"font-family":"Raleway","font-weight":500,"line-height":"20px","font-size":"16px","letter-spacing":"0em","text-decoration":"none"},
+  "label-14-bold": {"font-family":"Raleway","font-weight":700,"line-height":"normal","font-size":"14px","letter-spacing":"0em","text-decoration":"none"},
+  "label-14": {"font-family":"Raleway","font-weight":500,"line-height":"16px","font-size":"14px","letter-spacing":"0em","text-decoration":"none"},
+  "label-12-bold": {"font-family":"Raleway","font-weight":700,"line-height":"normal","font-size":"12px","letter-spacing":"0em","text-decoration":"none"},
+  "label-12": {"font-family":"Raleway","font-weight":500,"line-height":"normal","font-size":"12px","letter-spacing":"0em","text-decoration":"none"}
+}

package/sd.config.js

@@ -0,0 +1,190 @@
+import { register } from '@tokens-studio/sd-transforms';
+import StyleDictionary from 'style-dictionary';
+
+register(StyleDictionary);
+
+/**
+ * This is a custom transform that will take a dimension key name and convert it to uppercase, we need to do this to be backwards compabitle with the old utility classes
+ * e.g. p-3XL, m-2XL, etc.
+ */
+StyleDictionary.registerTransform({
+  name: 'custom/name/uppercase-dimensions',
+  type: 'name',
+  filter: function (token) {
+    return token.type === 'dimension';
+  },
+  transform: function (token) {
+    return token.name.toUpperCase().replace('-', '');
+  },
+});
+
+/**
+ * Removes first part of the name and returns the rest due to the naming of the tokens
+ * ```json
+ * {
+ *  "heading": {
+ *   "heading-30": {
+ *    "value": {...}
+ * }
+ * ```
+ * turns to `heading-30` instead of `heading-heading-30
+ */
+StyleDictionary.registerTransform({
+  name: 'custom/name/typography',
+  type: 'name',
+  filter: function (token) {
+    return token.type === 'typography';
+  },
+  transform: function (token) {
+    return token.name.split('-').splice(1, token.name.split('-').length).join('-');
+  },
+});
+
+/**
+ * Transforms box shadow tokens to a css box-shadow string
+ */
+
+StyleDictionary.registerTransform({
+  name: 'custom/shadow/css',
+  type: 'value',
+  filter: function (token) {
+    return token.type === 'shadow';
+  },
+  transform: function (prop) {
+    const { offsetX, offsetY, blur, spread, color } = prop.original.value;
+
+    return `${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`;
+  },
+});
+
+/**
+ * This transforms the object keys of a typography token to kebab-case
+ * and only allows certain keys to be included in the final output which can be used in css
+ */
+StyleDictionary.registerTransform({
+  name: 'custom/typography/keys/css',
+  type: `value`,
+  transitive: true,
+  filter: function (token) {
+    return token.type === 'typography';
+  },
+  transform: ({ value }) => {
+    if (!value) return;
+
+    const keys = Object.keys(value);
+    const allowedKeys = [
+      'font-family',
+      'font-weight',
+      'line-height',
+      'font-size',
+      'letter-spacing',
+      'text-decoration',
+    ];
+
+    const css = {};
+    keys.forEach((key) => {
+      const newKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+
+      if (allowedKeys.includes(newKey)) {
+        css[newKey] = value[key];
+      }
+    });
+
+    return css;
+  },
+});
+
+/**
+ * This transform will convert the line-height value of a typography token to 'normal' if it is 'AUTO' and set numbers without units to pixels
+ * This is because 'normal' is the default value for line-height in css and AUTO can not be interpreted by CSS
+ */
+StyleDictionary.registerTransform({
+  name: 'custom/typography/line-height',
+  type: `value`,
+  transitive: true,
+  filter: function (token) {
+    return token.type === 'typography';
+  },
+  transform: ({ value }) => {
+    if (!value) return;
+
+    if (value['line-height'] === 'AUTO') {
+      value['line-height'] = 'normal';
+    } else if (!isNaN(Number(value['line-height']))) {
+      value['line-height'] = `${value['line-height']}px`;
+    }
+
+    return value;
+  },
+});
+
+function getStyleDictionaryConfig(theme) {
+  return {
+    source: [`./transformed-tokens/${theme}.json`],
+    preprocessors: ['tokens-studio'],
+    platforms: {
+      web: {
+        transforms: [
+          'name/kebab',
+          'custom/name/uppercase-dimensions',
+          'ts/size/px',
+          'ts/size/lineheight',
+          'ts/typography/fontWeight',
+          'ts/size/css/letterspacing',
+          'custom/typography/keys/css',
+          'custom/name/typography',
+          'custom/shadow/css',
+          'custom/typography/line-height',
+        ],
+        buildPath: `./sd-output/`,
+        files: [
+          {
+            destination: `${theme}.json`,
+            format: 'json/flat',
+            filter: function (token) {
+              return token.type === 'color';
+            },
+          },
+          {
+            destination: 'spacings.json',
+            format: 'json/flat',
+            filter: function (token) {
+              return token.type === 'dimension';
+            },
+          },
+          {
+            destination: 'box-shadows.json',
+            format: 'json/flat',
+            filter: function (token) {
+              return token.type === 'shadow';
+            },
+          },
+          {
+            destination: 'typography.json',
+            format: 'json/flat',
+            filter: function (token) {
+              return token.type === 'typography';
+            },
+          },
+        ],
+      },
+    },
+  };
+}
+
+console.log('Build started...');
+
+['global', 'dark-mode', 'light-mode'].map(async function (set) {
+  console.log('\n==============================================');
+  console.log(`\nProcessing: [${set}]`);
+
+  const sd = new StyleDictionary(getStyleDictionaryConfig(set));
+
+  await sd.cleanAllPlatforms();
+  await sd.buildAllPlatforms();
+
+  console.log('\nEnd processing');
+});
+
+console.log('\n==============================================');
+console.log('\nBuild completed!');