@sumup-oss/design-tokens 8.0.0-next.0

package/dist/cjs/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+import type { Theme } from './types/index.js';
+export { schema } from './themes/schema.js';
+export { themePropType } from './utils/theme-prop-type.js';
+/**
+ * @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.
+ */
+declare const light: Theme;
+export type { Theme };
+export { light };

package/dist/cjs/index.js

@@ -0,0 +1,55 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.light = exports.themePropType = 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; } });
+var theme_prop_type_js_1 = require("./utils/theme-prop-type.js");
+Object.defineProperty(exports, "themePropType", { enumerable: true, get: function () { return theme_prop_type_js_1.themePropType; } });
+/**
+ * @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.d.ts

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+/**
+ * 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.
+ */
+import type { ColorScheme, Token } from '../types/index.js';
+type StyleGroup = {
+    selectors: string[];
+    colorScheme: ColorScheme;
+    tokens: Token[];
+};
+type Theme = {
+    name: string;
+    groups: StyleGroup[];
+};
+/**
+ * Validates that the theme includes all expected tokens
+ * and that the token values match the expected type.
+ */
+export declare function validateTheme(theme: Theme): void;
+export declare function createStyles(group: StyleGroup): string;
+/**
+ * Generates CSS custom properties from the tokens
+ */
+export declare function createCSSCustomProperties(tokens: Token[]): string;
+export {};

package/dist/cjs/scripts/build.js

@@ -0,0 +1,182 @@
+#!/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.validateTheme = validateTheme;
+exports.createStyles = createStyles;
+exports.createCSSCustomProperties = createCSSCustomProperties;
+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");
+function main() {
+    const themes = [
+        {
+            name: 'light',
+            groups: [
+                {
+                    tokens: [...light_js_1.light, ...shared_js_1.shared],
+                    selectors: [':root'],
+                    colorScheme: 'light',
+                },
+            ],
+        },
+        {
+            name: 'dark',
+            groups: [
+                {
+                    tokens: [...dark_js_1.dark, ...shared_js_1.shared],
+                    selectors: [':root'],
+                    colorScheme: 'dark',
+                },
+            ],
+        },
+        {
+            name: 'light-scoped',
+            groups: [
+                {
+                    tokens: light_js_1.light,
+                    selectors: ['[data-color-scheme="light"]'],
+                    colorScheme: 'light',
+                },
+            ],
+        },
+        {
+            name: 'dark-scoped',
+            groups: [
+                {
+                    tokens: dark_js_1.dark,
+                    selectors: ['[data-color-scheme="dark"]'],
+                    colorScheme: 'dark',
+                },
+            ],
+        },
+        {
+            name: 'dynamic',
+            groups: [
+                {
+                    tokens: [...light_js_1.light, ...shared_js_1.shared],
+                    selectors: [':root'],
+                    colorScheme: 'light',
+                },
+                {
+                    tokens: dark_js_1.dark,
+                    selectors: ['@media (prefers-color-scheme: dark)', ':root'],
+                    colorScheme: 'dark',
+                },
+                {
+                    tokens: light_js_1.light,
+                    selectors: ['[data-color-scheme="light"]'],
+                    colorScheme: 'light',
+                },
+                {
+                    tokens: dark_js_1.dark,
+                    selectors: ['[data-color-scheme="dark"]'],
+                    colorScheme: 'dark',
+                },
+            ],
+        },
+    ];
+    const targets = (0, lightningcss_1.browserslistToTargets)((0, browserslist_1.default)());
+    themes.forEach((theme) => {
+        validateTheme(theme);
+        const filename = `${theme.name}.css`;
+        const filepath = node_path_1.default.join(__dirname, '../', filename);
+        const styles = theme.groups.map(createStyles).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 theme includes all expected tokens
+ * and that the token values match the expected type.
+ */
+function validateTheme(theme) {
+    // Validate the token types
+    theme.groups.forEach(({ tokens }) => {
+        tokens.forEach(({ name, type }) => {
+            const token = schema_js_1.schema.find((t) => t.name === name);
+            if (!token) {
+                return;
+                // throw new Error(`The theme is missing the required "${name}" token.`);
+            }
+            if (token.type !== type) {
+                throw new Error([
+                    `The "${name}" token does not match the expected type.`,
+                    `Expected "${token.type}". Received "${type}."`,
+                ].join(' '));
+            }
+        });
+    });
+    // Validate that the tokens at the root are complete
+    const rootGroup = theme.groups.find((group) => group.selectors.length === 1 && group.selectors[0] === ':root');
+    if (!rootGroup) {
+        return;
+    }
+    if (rootGroup.tokens.length !== schema_js_1.schema.length) {
+        schema_js_1.schema.forEach(({ name }) => {
+            const token = rootGroup.tokens.find((t) => t.name === name);
+            if (!token) {
+                throw new Error(`The "${theme.name}" theme does not globally define the required "${name}" token. Add it to the ":root" selector.`);
+            }
+        });
+    }
+}
+function createStyles(group) {
+    const selectorStart = group.selectors
+        .map((selector) => `${selector} {`)
+        .join('');
+    const selectorEnd = group.selectors.map(() => '}').join('');
+    const customProperties = createCSSCustomProperties(group.tokens);
+    return `${selectorStart}
+    color-scheme: ${group.colorScheme};
+    ${customProperties}
+  ${selectorEnd}`;
+}
+/**
+ * Generates CSS custom properties from the tokens
+ */
+function createCSSCustomProperties(tokens) {
+    return tokens
+        .flatMap((token) => {
+        const { description, name, value } = token;
+        const lines = [];
+        if (description) {
+            lines.push(`/* ${description} */`);
+        }
+        lines.push(`${name}: ${value.toString()};`);
+        return lines;
+    })
+        .join(' ');
+}
+try {
+    main();
+}
+catch (error) {
+    console.error(error.message);
+    process.exit(1);
+}