@sumup-oss/design-tokens 11.0.0-next.0 → 11.0.0-next.2

package/dist/{es/scripts → scripts}/build.js

@@ -23,6 +23,7 @@ import { light } from '../themes/light.js';
 import { dark } from '../themes/dark.js';
 import { consumer } from '../themes/consumer.js';
 import { sumup } from '../themes/fonts.js';
+import { fileURLToPath } from 'node:url';
 function main() {
     const files = {
         'light': [
@@ -134,7 +135,11 @@ function main() {
     const targets = browserslistToTargets(browserslist());
     Object.entries(files).forEach(([name, configs]) => {
         const filename = `${name}.css`;
-        const filepath = path.join(__dirname, '../', filename);
+        /* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */
+        const __filename = fileURLToPath(import.meta.url);
+        const __dirname = path.dirname(__filename);
+        /* eslint-enable no-underscore-dangle, @typescript-eslint/naming-convention */
+        const filepath = path.join(__dirname, '../dist/', filename);
         const styles = configs
             .map((config) => {
             switch (config.type) {

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@sumup-oss/design-tokens",
-  "version": "11.0.0-next.0",
+  "version": "11.0.0-next.2",
   "description": "Visual primitives such as typography, color, and spacing that are shared across platforms.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/es/index.js",
-  "types": "dist/es/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*.css": "./dist/*.css"
+  },
   "sideEffects": false,
   "files": [
     "dist",
@@ -25,9 +29,7 @@
   "homepage": "https://github.com/sumup-oss/circuit-ui/tree/main/packages/design-tokens/README.md",
   "scripts": {
     "start": "tsc --watch",
-    "build": "npm run build:es && npm run build:cjs && npm run build:styles",
-    "build:es": "tsc",
-    "build:cjs": "tsc --project tsconfig.cjs.json",
+    "build": "tsc && npm run build:styles",
     "build:styles": "tsx ./scripts/build.ts",
     "lint": "foundry run eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "npm run lint -- --fix",

package/dist/cjs/index.js

@@ -1,63 +0,0 @@
-"use strict";
-/**
- * Copyright 2020, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.light = exports.schema = void 0;
-const legacy = __importStar(require("./themes/legacy/light.js"));
-var schema_js_1 = require("./themes/schema.js");
-Object.defineProperty(exports, "schema", { enumerable: true, get: function () { return schema_js_1.schema; } });
-/**
- * @deprecated
- *
- * Use the CSS custom properties from `@sumup-oss/design-tokens` instead.
- * Use the [`circuit-ui/prefer-custom-properties`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/prefer-custom-properties)
- * ESLint rule to automatically migrate your code.
- */
-// HACK: Copy the theme, otherwise, it gets exported as 'module'.
-const light = { ...legacy };
-exports.light = light;

package/dist/cjs/scripts/build.js

@@ -1,233 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-/**
- * Copyright 2023, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateTokens = validateTokens;
-exports.createCSSCustomProperties = createCSSCustomProperties;
-exports.createFontFaceDeclarations = createFontFaceDeclarations;
-const node_fs_1 = __importDefault(require("node:fs"));
-const node_path_1 = __importDefault(require("node:path"));
-const browserslist_1 = __importDefault(require("browserslist"));
-const lightningcss_1 = require("lightningcss");
-const schema_js_1 = require("../themes/schema.js");
-const shared_js_1 = require("../themes/shared.js");
-const light_js_1 = require("../themes/light.js");
-const dark_js_1 = require("../themes/dark.js");
-const consumer_js_1 = require("../themes/consumer.js");
-const fonts_js_1 = require("../themes/fonts.js");
-function main() {
-    const files = {
-        'light': [
-            {
-                type: 'tokens',
-                tokens: [...light_js_1.light, ...shared_js_1.shared],
-                selectors: [':root, ::backdrop'],
-                colorScheme: 'light',
-            },
-            {
-                type: 'tokens',
-                tokens: shared_js_1.sharedUntilGiga,
-                selectors: ['@media (max-width: 959px)', ':root, ::backdrop'],
-            },
-        ],
-        'dark': [
-            {
-                type: 'tokens',
-                tokens: [...dark_js_1.dark, ...shared_js_1.shared],
-                selectors: [':root, ::backdrop'],
-                colorScheme: 'dark',
-            },
-            {
-                type: 'tokens',
-                tokens: shared_js_1.sharedUntilGiga,
-                selectors: ['@media (max-width: 959px)', ':root, ::backdrop'],
-            },
-        ],
-        'light-scoped': [
-            {
-                type: 'tokens',
-                tokens: light_js_1.light,
-                selectors: ['[data-color-scheme="light"]'],
-                colorScheme: 'light',
-            },
-            {
-                type: 'tokens',
-                tokens: shared_js_1.sharedUntilGiga,
-                selectors: ['@media (max-width: 959px)', '[data-color-scheme="light"]'],
-            },
-        ],
-        'dark-scoped': [
-            {
-                type: 'tokens',
-                tokens: dark_js_1.dark,
-                selectors: ['[data-color-scheme="dark"]'],
-                colorScheme: 'dark',
-            },
-            {
-                type: 'tokens',
-                tokens: shared_js_1.sharedUntilGiga,
-                selectors: ['@media (max-width: 959px)', '[data-color-scheme="dark"]'],
-            },
-        ],
-        'dynamic': [
-            {
-                type: 'tokens',
-                tokens: [...light_js_1.light, ...shared_js_1.shared],
-                selectors: [':root, ::backdrop'],
-                colorScheme: 'light',
-            },
-            {
-                type: 'tokens',
-                tokens: shared_js_1.sharedUntilGiga,
-                selectors: ['@media (max-width: 959px)', ':root, ::backdrop'],
-            },
-            {
-                type: 'tokens',
-                tokens: dark_js_1.dark,
-                selectors: ['@media (prefers-color-scheme: dark)', ':root, ::backdrop'],
-                colorScheme: 'dark',
-            },
-            {
-                type: 'tokens',
-                tokens: light_js_1.light,
-                selectors: ['[data-color-scheme="light"]'],
-                colorScheme: 'light',
-            },
-            {
-                type: 'tokens',
-                tokens: dark_js_1.dark,
-                selectors: ['[data-color-scheme="dark"]'],
-                colorScheme: 'dark',
-            },
-        ],
-        'consumer': [
-            {
-                type: 'tokens',
-                tokens: [...consumer_js_1.consumer, ...shared_js_1.shared],
-                selectors: [':root, ::backdrop'],
-                colorScheme: 'dark',
-            },
-        ],
-        'consumer-scoped': [
-            {
-                type: 'tokens',
-                tokens: [...consumer_js_1.consumer, ...shared_js_1.shared],
-                selectors: ['[data-color-scheme="consumer"]'],
-                colorScheme: 'dark',
-            },
-        ],
-        'fonts': [
-            {
-                type: 'font-faces',
-                fontFaces: fonts_js_1.sumup,
-            },
-        ],
-    };
-    const targets = (0, lightningcss_1.browserslistToTargets)((0, browserslist_1.default)());
-    Object.entries(files).forEach(([name, configs]) => {
-        const filename = `${name}.css`;
-        const filepath = node_path_1.default.join(__dirname, '../', filename);
-        const styles = configs
-            .map((config) => {
-            switch (config.type) {
-                case 'tokens': {
-                    validateTokens(config.tokens);
-                    return createCSSCustomProperties(config);
-                }
-                case 'font-faces': {
-                    return createFontFaceDeclarations(config);
-                }
-                default: {
-                    throw new Error('Unsupported config type');
-                }
-            }
-        })
-            .join('\n');
-        const { code } = (0, lightningcss_1.transform)({
-            filename,
-            code: Buffer.from(styles),
-            targets,
-        });
-        node_fs_1.default.writeFileSync(filepath, code, { flag: 'w' });
-    });
-}
-/**
- * Validates that the token values match the expected type.
- */
-function validateTokens(tokens) {
-    tokens.forEach(({ name, type }) => {
-        const token = schema_js_1.schema.find((t) => t.name === name);
-        if (!token) {
-            return;
-        }
-        if (token.type !== type) {
-            throw new Error([
-                `The "${name}" token does not match the expected type.`,
-                `Expected "${token.type}". Received "${type}."`,
-            ].join(' '));
-        }
-    });
-}
-/**
- * Generates CSS custom properties from the tokens
- */
-function createCSSCustomProperties(config) {
-    const selectorStart = config.selectors
-        .map((selector) => `${selector} {`)
-        .join('');
-    const selectorEnd = config.selectors.map(() => '}').join('');
-    const colorScheme = config.colorScheme
-        ? `color-scheme: ${config.colorScheme};`
-        : '';
-    const customProperties = config.tokens
-        .flatMap((token) => {
-        const { description, name, value } = token;
-        const lines = [];
-        if (description) {
-            lines.push(`/* ${description} */`);
-        }
-        lines.push(`${name}: ${value.toString()};`);
-        return lines;
-    })
-        .join(' ');
-    return `${selectorStart}
-    ${colorScheme}
-    ${customProperties}
-  ${selectorEnd}`;
-}
-/**
- * Generates font face declarations from the font faces
- */
-function createFontFaceDeclarations(config) {
-    return config.fontFaces
-        .map((fontFace) => {
-        const properties = Object.entries(fontFace)
-            .map(([name, value]) => `${name}: ${value};`)
-            .join('');
-        return `@font-face { ${properties} }`;
-    })
-        .join(' ');
-}
-try {
-    main();
-}
-catch (error) {
-    console.error(error.message);
-    process.exit(1);
-}