@utrecht/design-tokens 2.1.0 → 2.2.0

package/src/css-property-formatter.js

@@ -1,35 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-
-const stringSort = (a, b) => (a === b ? 0 : a > b ? 1 : -1);
-
-module.exports = {
-  'css/property': function ({ dictionary }) {
-    let { allTokens } = dictionary;
-
-    // https://drafts.css-houdini.org/css-properties-values-api/#the-css-property-rule-interface
-    return allTokens
-      .sort((tokenA, tokenB) => stringSort(tokenA.name, tokenB.name))
-      .filter(
-        (token) => token.css && token.css.syntax && token.css.syntax !== '*' && typeof token.css.inherits === 'boolean',
-      )
-      .map((token) => {
-        let str = `@property --${token.name} { `;
-
-        str += `syntax: '${token.css.syntax}'; `;
-
-        str += `inherits: ${token.css.inherits}; `;
-
-        if (token.css.initialValue) {
-          str += `initial-value: ${token.css.initialValue}; `;
-        }
-
-        str += `}`;
-
-        return str;
-      })
-      .join('\n');
-  },
-};

package/src/style-dictionary-config-dark.js

@@ -1,56 +0,0 @@
-const config = require('./style-dictionary-config.js');
-
-module.exports = {
-  ...config,
-  source: [
-    ...config.source,
-    './src/dark/tokens.json',
-    './src/dark/*.tokens.json',
-    './src/dark/**/tokens.json',
-    './src/dark/**.tokens.json',
-  ],
-  platforms: {
-    css: {
-      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
-      buildPath: 'dist/dark/',
-      files: [
-        {
-          destination: 'root.css',
-          format: 'css/variables',
-          options: {
-            selector: ':root, ::backdrop',
-            outputReferences: true,
-          },
-        },
-      ],
-    },
-    'css-theme': {
-      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
-      buildPath: 'dist/dark/',
-      files: [
-        {
-          destination: 'index.css',
-          format: 'css/variables',
-          options: {
-            selector: '.utrecht-theme--dark, .utrecht-theme--dark ::backdrop',
-            outputReferences: true,
-          },
-        },
-      ],
-    },
-    'scss-theme-mixin': {
-      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
-      buildPath: 'dist/dark/',
-      files: [
-        {
-          destination: '_mixin-theme.scss',
-          format: 'css/variables',
-          options: {
-            selector: '@mixin utrecht-theme--dark',
-            outputReferences: true,
-          },
-        },
-      ],
-    },
-  },
-};

package/src/style-dictionary-config.js

@@ -1,63 +0,0 @@
-const { transform } = require('@divriots/style-dictionary-to-figma');
-const mergeWith = require('lodash.mergewith');
-const cssPropertyFormat = require('./css-property-formatter.js');
-const jsonListFormat = require('./json-list-formatter.js');
-const config = require('../style-dictionary.config.json');
-const stringSort = (a, b) => (a === b ? 0 : a > b ? 1 : -1);
-const destinationSort = (a, b) => stringSort(a.destination, b.destination);
-
-const figmaTokensConfig = {
-  format: {
-    figmaTokensPlugin: ({ dictionary }) => {
-      const transformedTokens = transform(dictionary.tokens);
-      return JSON.stringify(transformedTokens, null, 2);
-    },
-  },
-  platforms: {
-    jsonx: {
-      transformGroup: 'js',
-      files: [
-        {
-          destination: 'dist/figma-tokens.json',
-          format: 'figmaTokensPlugin',
-        },
-      ],
-    },
-  },
-};
-
-const cssPropertyConfig = {
-  format: {
-    ...cssPropertyFormat,
-  },
-  platforms: {
-    css: {
-      files: [
-        {
-          destination: 'property.css',
-          format: 'css/property',
-        },
-      ].sort(destinationSort),
-    },
-  },
-};
-
-const jsonConfig = {
-  format: {
-    ...jsonListFormat,
-  },
-  platforms: {
-    json: {
-      files: [
-        {
-          destination: 'index.json',
-          format: 'json/list',
-        },
-      ].sort(destinationSort),
-    },
-  },
-};
-
-module.exports = mergeWith({}, config, cssPropertyConfig, jsonConfig, figmaTokensConfig, (objValue, srcValue) =>
-  Array.isArray(objValue) && Array.isArray(srcValue) ? [...objValue, ...srcValue] : undefined,
-);

package/style-dictionary.config.json

@@ -1,143 +0,0 @@
-{
-  "source": [
-    "../../components/**/tokens.json",
-    "../../components/**/*.tokens.json",
-    "./src/brand/tokens.json",
-    "./src/brand/**/*.tokens.json",
-    "./src/common/tokens.json",
-    "./src/common/**/*.tokens.json",
-    "./src/component/tokens.json",
-    "./src/component/**/*.tokens.json"
-  ],
-  "platforms": {
-    "js": {
-      "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "index.cjs",
-          "format": "javascript/module-flat"
-        },
-        {
-          "destination": "index.mjs",
-          "format": "javascript/es6"
-        },
-        {
-          "format": "javascript/module",
-          "destination": "tokens.cjs"
-        }
-      ]
-    },
-    "json": {
-      "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "index.tokens.json",
-          "format": "json/nested"
-        },
-        {
-          "destination": "index.flat.json",
-          "format": "json/flat"
-        }
-      ]
-    },
-    "css": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "root.css",
-          "format": "css/variables",
-          "options": {
-            "selector": ":root, ::backdrop",
-            "outputReferences": true
-          }
-        }
-      ]
-    },
-    "css-theme": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "theme.css",
-          "format": "css/variables",
-          "options": {
-            "selector": ".utrecht-theme, .utrecht-theme ::backdrop",
-            "outputReferences": true
-          }
-        }
-      ]
-    },
-    "css-theme-prince-xml": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "theme-prince-xml.css",
-          "format": "css/variables",
-          "options": {
-            "selector": ".utrecht-theme",
-            "outputReferences": true
-          }
-        }
-      ]
-    },
-    "scss": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "_variables.scss",
-          "format": "scss/variables",
-          "options": {
-            "outputReferences": true
-          }
-        }
-      ]
-    },
-    "scss-theme-mixin": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "_mixin-theme.scss",
-          "format": "css/variables",
-          "options": {
-            "selector": "@mixin utrecht-theme",
-            "outputReferences": true
-          }
-        }
-      ]
-    },
-    "typescript": {
-      "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"],
-      "transformGroup": "js",
-      "buildPath": "dist/",
-      "files": [
-        {
-          "format": "typescript/es6-declarations",
-          "destination": "index.d.ts"
-        },
-        {
-          "format": "typescript/module-declarations",
-          "destination": "tokens.d.ts"
-        }
-      ]
-    },
-    "less": {
-      "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"],
-      "buildPath": "dist/",
-      "files": [
-        {
-          "destination": "variables.less",
-          "format": "less/variables",
-          "options": {
-            "outputReferences": true
-          }
-        }
-      ]
-    }
-  }
-}