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

package/dist/cjs/utils/theme-prop-type.js

@@ -0,0 +1,162 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themePropType = void 0;
+const prop_types_1 = __importDefault(require("prop-types"));
+const typePropType = prop_types_1.default.shape({
+    fontSize: prop_types_1.default.string,
+    lineHeight: prop_types_1.default.string,
+}).isRequired;
+const gridPropType = prop_types_1.default.shape({
+    priority: prop_types_1.default.number.isRequired,
+    breakpoint: prop_types_1.default.oneOf([
+        'default',
+        'untilKilo',
+        'kilo',
+        'mega',
+        'giga',
+        'tera',
+    ]).isRequired,
+    cols: prop_types_1.default.number.isRequired,
+    maxWidth: prop_types_1.default.string.isRequired,
+    gutter: prop_types_1.default.string.isRequired,
+}).isRequired;
+/**
+ * @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.
+ */
+exports.themePropType = prop_types_1.default.shape({
+    spacings: prop_types_1.default.shape({
+        bit: prop_types_1.default.string.isRequired,
+        byte: prop_types_1.default.string.isRequired,
+        kilo: prop_types_1.default.string.isRequired,
+        mega: prop_types_1.default.string.isRequired,
+        giga: prop_types_1.default.string.isRequired,
+        tera: prop_types_1.default.string.isRequired,
+        peta: prop_types_1.default.string.isRequired,
+        exa: prop_types_1.default.string.isRequired,
+        zetta: prop_types_1.default.string.isRequired,
+    })
+        .isRequired,
+    iconSizes: prop_types_1.default.shape({
+        kilo: prop_types_1.default.string.isRequired,
+        mega: prop_types_1.default.string.isRequired,
+        giga: prop_types_1.default.string.isRequired,
+        tera: prop_types_1.default.string.isRequired,
+    })
+        .isRequired,
+    borderRadius: prop_types_1.default.shape({
+        bit: prop_types_1.default.string.isRequired,
+        byte: prop_types_1.default.string.isRequired,
+        kilo: prop_types_1.default.string.isRequired,
+        mega: prop_types_1.default.string.isRequired,
+        circle: prop_types_1.default.string.isRequired,
+        pill: prop_types_1.default.string.isRequired,
+    })
+        .isRequired,
+    borderWidth: prop_types_1.default.shape({
+        kilo: prop_types_1.default.string.isRequired,
+        mega: prop_types_1.default.string.isRequired,
+    })
+        .isRequired,
+    typography: prop_types_1.default.shape({
+        headline: prop_types_1.default.shape({
+            one: typePropType,
+            two: typePropType,
+            three: typePropType,
+            four: typePropType,
+        }).isRequired,
+        title: prop_types_1.default.shape({
+            one: typePropType,
+            two: typePropType,
+            three: typePropType,
+            four: typePropType,
+        }).isRequired,
+        subHeadline: typePropType,
+        body: prop_types_1.default.shape({
+            one: typePropType,
+            two: typePropType,
+        }).isRequired,
+        bodyLarge: typePropType,
+    }).isRequired,
+    fontStack: prop_types_1.default.shape({
+        default: prop_types_1.default.string,
+        mono: prop_types_1.default.string,
+    }).isRequired,
+    fontWeight: prop_types_1.default.shape({
+        regular: prop_types_1.default.string.isRequired,
+        bold: prop_types_1.default.string.isRequired,
+    })
+        .isRequired,
+    breakpoints: prop_types_1.default.shape({
+        untilKilo: prop_types_1.default.string.isRequired,
+        kilo: prop_types_1.default.string.isRequired,
+        kiloToMega: prop_types_1.default.string.isRequired,
+        mega: prop_types_1.default.string.isRequired,
+        untilMega: prop_types_1.default.string.isRequired,
+        megaToGiga: prop_types_1.default.string.isRequired,
+        giga: prop_types_1.default.string.isRequired,
+        untilGiga: prop_types_1.default.string.isRequired,
+        gigaToTera: prop_types_1.default.string.isRequired,
+        tera: prop_types_1.default.string.isRequired,
+        untilTera: prop_types_1.default.string.isRequired,
+    })
+        .isRequired,
+    mq: prop_types_1.default.shape({
+        untilKilo: prop_types_1.default.string.isRequired,
+        kilo: prop_types_1.default.string.isRequired,
+        kiloToMega: prop_types_1.default.string.isRequired,
+        mega: prop_types_1.default.string.isRequired,
+        untilMega: prop_types_1.default.string.isRequired,
+        megaToGiga: prop_types_1.default.string.isRequired,
+        giga: prop_types_1.default.string.isRequired,
+        gigaToTera: prop_types_1.default.string.isRequired,
+        tera: prop_types_1.default.string.isRequired,
+        untilTera: prop_types_1.default.string.isRequired,
+    })
+        .isRequired,
+    grid: prop_types_1.default.shape({
+        default: gridPropType,
+        untilKilo: gridPropType,
+        kilo: gridPropType,
+        mega: gridPropType,
+        giga: gridPropType,
+        tera: gridPropType,
+    }).isRequired,
+    transitions: prop_types_1.default.shape({
+        default: prop_types_1.default.string.isRequired,
+        slow: prop_types_1.default.string.isRequired,
+    })
+        .isRequired,
+    zIndex: prop_types_1.default.shape({
+        default: prop_types_1.default.number.isRequired,
+        absolute: prop_types_1.default.number.isRequired,
+        input: prop_types_1.default.number.isRequired,
+        popover: prop_types_1.default.number.isRequired,
+        tooltip: prop_types_1.default.number.isRequired,
+        header: prop_types_1.default.number.isRequired,
+        backdrop: prop_types_1.default.number.isRequired,
+        navigation: prop_types_1.default.number.isRequired,
+        modal: prop_types_1.default.number.isRequired,
+        toast: prop_types_1.default.number.isRequired,
+    }).isRequired,
+});

package/dist/es/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/es/index.js

@@ -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 * as legacy from './themes/legacy/light.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.
+ */
+// HACK: Copy the theme, otherwise, it gets exported as 'module'.
+const light = { ...legacy };
+export { light };

package/dist/es/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/es/scripts/build.js

@@ -0,0 +1,174 @@
+#!/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 fs from 'node:fs';
+import path from 'node:path';
+import browserslist from 'browserslist';
+import { transform, browserslistToTargets } from 'lightningcss';
+import { schema } from '../themes/schema.js';
+import { shared } from '../themes/shared.js';
+import { light } from '../themes/light.js';
+import { dark } from '../themes/dark.js';
+function main() {
+    const themes = [
+        {
+            name: 'light',
+            groups: [
+                {
+                    tokens: [...light, ...shared],
+                    selectors: [':root'],
+                    colorScheme: 'light',
+                },
+            ],
+        },
+        {
+            name: 'dark',
+            groups: [
+                {
+                    tokens: [...dark, ...shared],
+                    selectors: [':root'],
+                    colorScheme: 'dark',
+                },
+            ],
+        },
+        {
+            name: 'light-scoped',
+            groups: [
+                {
+                    tokens: light,
+                    selectors: ['[data-color-scheme="light"]'],
+                    colorScheme: 'light',
+                },
+            ],
+        },
+        {
+            name: 'dark-scoped',
+            groups: [
+                {
+                    tokens: dark,
+                    selectors: ['[data-color-scheme="dark"]'],
+                    colorScheme: 'dark',
+                },
+            ],
+        },
+        {
+            name: 'dynamic',
+            groups: [
+                {
+                    tokens: [...light, ...shared],
+                    selectors: [':root'],
+                    colorScheme: 'light',
+                },
+                {
+                    tokens: dark,
+                    selectors: ['@media (prefers-color-scheme: dark)', ':root'],
+                    colorScheme: 'dark',
+                },
+                {
+                    tokens: light,
+                    selectors: ['[data-color-scheme="light"]'],
+                    colorScheme: 'light',
+                },
+                {
+                    tokens: dark,
+                    selectors: ['[data-color-scheme="dark"]'],
+                    colorScheme: 'dark',
+                },
+            ],
+        },
+    ];
+    const targets = browserslistToTargets(browserslist());
+    themes.forEach((theme) => {
+        validateTheme(theme);
+        const filename = `${theme.name}.css`;
+        const filepath = path.join(__dirname, '../', filename);
+        const styles = theme.groups.map(createStyles).join('\n');
+        const { code } = transform({
+            filename,
+            code: Buffer.from(styles),
+            targets,
+        });
+        fs.writeFileSync(filepath, code, { flag: 'w' });
+    });
+}
+/**
+ * Validates that the theme includes all expected tokens
+ * and that the token values match the expected type.
+ */
+export function validateTheme(theme) {
+    // Validate the token types
+    theme.groups.forEach(({ tokens }) => {
+        tokens.forEach(({ name, type }) => {
+            const token = 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.length) {
+        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.`);
+            }
+        });
+    }
+}
+export 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
+ */
+export 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);
+}