reshaped 3.8.2 → 3.8.4-canary.0

package/dist/cjs/cli/theming/index.js

@@ -1,40 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addTheme = exports.addThemeFragment = void 0;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
-const chalk_1 = __importDefault(require("chalk"));
-const mergeDefinitions_1 = __importDefault(require("../../themes/_generator/utilities/mergeDefinitions"));
-const transform_1 = __importDefault(require("../../themes/_generator/transform"));
-const reshaped_1 = __importDefault(require("../../themes/_generator/definitions/reshaped"));
-const tailwind_1 = require("./tailwind");
-const transformDefinition = (name, definition, options) => {
-    const { isFragment, outputPath } = options;
-    const code = (0, transform_1.default)(name, definition, options);
-    const themeFolderPath = isFragment
-        ? path_1.default.resolve(outputPath, "fragments", name)
-        : path_1.default.resolve(outputPath, name);
-    const themePath = path_1.default.resolve(themeFolderPath, "theme.css");
-    const themeMediaPath = path_1.default.resolve(themeFolderPath, "media.css");
-    const twPath = path_1.default.resolve(themeFolderPath, "tailwind.css");
-    const themeJsonPath = path_1.default.resolve(themeFolderPath, "theme.json");
-    fs_1.default.mkdirSync(themeFolderPath, { recursive: true });
-    fs_1.default.writeFileSync(themePath, code.variables);
-    fs_1.default.writeFileSync(themeJsonPath, JSON.stringify(code.theme, null, 2));
-    fs_1.default.writeFileSync(twPath, (0, tailwind_1.transformToTailwind)(code.theme));
-    if (code.media)
-        fs_1.default.writeFileSync(themeMediaPath, code.media);
-    const logOutput = `Compiled ${chalk_1.default.bold(name)} theme${isFragment ? " fragment" : ""}`;
-    console.log(chalk_1.default.green(logOutput));
-};
-const addThemeFragment = (name, definition, options) => {
-    transformDefinition(name, definition, { ...options, isFragment: true });
-};
-exports.addThemeFragment = addThemeFragment;
-const addTheme = (name, definition, options) => {
-    transformDefinition(name, (0, mergeDefinitions_1.default)(reshaped_1.default, definition), options);
-};
-exports.addTheme = addTheme;

package/dist/cjs/cli/theming/reshaped.config.d.ts

@@ -1,3 +0,0 @@
-import type { ReshapedConfig } from "../../types/config";
-declare const config: ReshapedConfig;
-export default config;

package/dist/cjs/cli/theming/reshaped.config.js

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const reshaped_1 = __importDefault(require("../../themes/_generator/definitions/reshaped"));
-const figma_1 = __importDefault(require("../../themes/_generator/definitions/figma"));
-const slate_1 = __importDefault(require("../../themes/_generator/definitions/slate"));
-const config = {
-    themes: {
-        reshaped: reshaped_1.default,
-        figma: figma_1.default,
-        slate: slate_1.default,
-    },
-    themeFragments: {
-        twitter: {
-            color: {
-                backgroundPrimary: { hex: "#1da1f2" },
-                backgroundPrimaryHighlighted: { hex: "#1a90da" },
-                onBackgroundPrimary: { hex: "#ffffff" },
-            },
-        },
-    },
-};
-exports.default = config;

package/dist/cjs/cli/theming/tailwind.d.ts

@@ -1,2 +0,0 @@
-import type { GeneratedThemeDefinition } from "../../themes/_generator/tokens/types";
-export declare const transformToTailwind: (theme?: GeneratedThemeDefinition) => string;

package/dist/cjs/cli/theming/tailwind.js

@@ -1,83 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformToTailwind = void 0;
-/**
- * Transform JS theme defintion to Tailwind 4 CSS definition
- */
-const reshaped_1 = __importDefault(require("../../themes/_generator/definitions/reshaped"));
-const mergeDefinitions_1 = __importDefault(require("../../themes/_generator/utilities/mergeDefinitions"));
-const string_1 = require("../../utilities/string");
-const transformToTailwind = (theme) => {
-    const variables = {};
-    const definition = theme
-        ? (0, mergeDefinitions_1.default)(reshaped_1.default, theme)
-        : reshaped_1.default;
-    Object.keys(definition.color).forEach((tokenName) => {
-        const cssTokenName = (0, string_1.camelToKebab)(tokenName);
-        const cssVariable = ["rs", "color", cssTokenName].join("-");
-        const configValue = `var(--${cssVariable})`;
-        if (cssTokenName.startsWith("rgb-"))
-            return;
-        if (cssTokenName.startsWith("background-")) {
-            const name = cssTokenName.replace("background-", "");
-            variables[`--background-color-${name}`] = configValue;
-            return;
-        }
-        if (cssTokenName.startsWith("on-")) {
-            // Replacing on- separately to support on-brand
-            const name = cssTokenName.replace("on-", "").replace("background-", "");
-            variables[`--text-color-on-${name}`] = configValue;
-            return;
-        }
-        if (cssTokenName.startsWith("foreground-")) {
-            const name = cssTokenName.replace("foreground-", "");
-            variables[`--text-color-${name}`] = configValue;
-            return;
-        }
-        if (cssTokenName.startsWith("border-")) {
-            const name = cssTokenName.replace("border-", "");
-            variables[`--border-color-${name}`] = configValue;
-            return;
-        }
-        variables[`--color-${cssTokenName}`] = configValue;
-    });
-    Object.keys(definition.radius).forEach((tokenName) => {
-        const cssTokenName = (0, string_1.camelToKebab)(tokenName);
-        variables[`--radius-${tokenName}`] = `var(--rs-radius-${cssTokenName})`;
-        return;
-    });
-    Object.keys(definition.unit).forEach((tokenName) => {
-        if (tokenName.startsWith("base")) {
-            [...Array(11).keys()].forEach((i) => {
-                if (i === 0) {
-                    variables[`--spacing-0`] = "0px";
-                }
-                else {
-                    variables[`--spacing-x${i}`] = `var(--rs-unit-x${i})`;
-                }
-            });
-        }
-    });
-    Object.keys(definition.shadow).forEach((tokenName) => {
-        const cssTokenName = (0, string_1.camelToKebab)(tokenName);
-        const cssVariable = ["rs", "shadow", cssTokenName].join("-");
-        const configValue = `var(--${cssVariable})`;
-        const name = cssTokenName.replace("shadow-", "");
-        variables[`--shadow-${name}`] = configValue;
-        return;
-    });
-    Object.entries(definition.viewport).forEach(([tokenName, tokenValue]) => {
-        if (!tokenValue.minPx)
-            return;
-        variables[`--breakpoint-${tokenName}`] = `${tokenValue.minPx}px`;
-    });
-    return `@theme inline {
-    ${Object.entries(variables)
-        .map(([key, value]) => `${key}: ${value};`)
-        .join("\n")}
-  }`;
-};
-exports.transformToTailwind = transformToTailwind;

package/dist/cjs/config/postcss.d.ts

@@ -1,28 +0,0 @@
-export declare const config: {
-    plugins: {
-        "@csstools/postcss-global-data": {
-            files: string[];
-        };
-        "postcss-custom-media": {};
-        cssnano: {
-            preset: (string | {
-                calc: boolean;
-            })[];
-        };
-    };
-};
-export declare const getConfig: (options: {
-    themeMediaCSSPath: string;
-}) => {
-    plugins: {
-        "@csstools/postcss-global-data": {
-            files: string[];
-        };
-        "postcss-custom-media": {};
-        cssnano: {
-            preset: (string | {
-                calc: boolean;
-            })[];
-        };
-    };
-};

package/dist/cjs/config/postcss.js

@@ -1,33 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getConfig = exports.config = void 0;
-const path_1 = __importDefault(require("path"));
-const defaultThemeMediaCSSPath = path_1.default.resolve(__dirname, "../themes/reshaped/media.css");
-// Using [plugin]: { ...options } format here because it's supported by the most frameworks
-// - require('plugin') is not supported by Next
-// - ['plugin', options] is not supported by Vite
-exports.config = {
-    plugins: {
-        "@csstools/postcss-global-data": {
-            files: [defaultThemeMediaCSSPath],
-        },
-        "postcss-custom-media": {},
-        cssnano: { preset: ["default", { calc: false }] },
-    },
-};
-const getConfig = (options) => {
-    const { themeMediaCSSPath = defaultThemeMediaCSSPath } = options;
-    return {
-        plugins: {
-            "@csstools/postcss-global-data": {
-                files: [themeMediaCSSPath],
-            },
-            "postcss-custom-media": {},
-            cssnano: { preset: ["default", { calc: false }] },
-        },
-    };
-};
-exports.getConfig = getConfig;

package/dist/cjs/config/tailwind.d.ts

@@ -1,2 +0,0 @@
-import type { ThemeDefinition } from "../themes/_generator/tokens/types";
-export declare const getTheme: (theme?: ThemeDefinition) => Record<"backgroundColor" | "textColor" | "borderColor" | "colors" | "borderRadius" | "spacing" | "boxShadow" | "screens", Record<string, string>>;

package/dist/cjs/config/tailwind.js

@@ -1,86 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTheme = void 0;
-const reshaped_1 = __importDefault(require("../themes/_generator/definitions/reshaped"));
-const string_1 = require("../utilities/string");
-const mergeDefinitions_1 = __importDefault(require("../themes/_generator/utilities/mergeDefinitions"));
-const constants_1 = require("../themes/_generator/constants");
-const getTheme = (theme) => {
-    const config = {
-        backgroundColor: {},
-        textColor: {},
-        borderColor: {},
-        colors: {},
-        borderRadius: {},
-        spacing: {},
-        boxShadow: {},
-        screens: {},
-    };
-    const definition = theme
-        ? (0, mergeDefinitions_1.default)(reshaped_1.default, theme)
-        : reshaped_1.default;
-    Object.keys(definition.color).forEach((tokenName) => {
-        const cssTokenName = (0, string_1.camelToKebab)(tokenName);
-        const cssVariable = ["rs", "color", cssTokenName].join("-");
-        const configValue = `var(--${cssVariable})`;
-        if (tokenName.startsWith("background")) {
-            const name = cssTokenName.replace("background-", "");
-            config.backgroundColor[name] = configValue;
-            if (constants_1.bgWithDynamicForeground.includes(tokenName)) {
-                const cssVariable = ["rs", "color", "on", cssTokenName].join("-");
-                const configValue = `var(--${cssVariable})`;
-                config.textColor[`on-${name}`] = configValue;
-            }
-            return;
-        }
-        if (tokenName.startsWith("foreground")) {
-            const name = cssTokenName.replace("foreground-", "");
-            config.textColor[name] = configValue;
-            return;
-        }
-        if (tokenName.startsWith("border")) {
-            const name = cssTokenName.replace("border-", "");
-            config.borderColor[name] = configValue;
-            return;
-        }
-        config.backgroundColor[cssTokenName] = configValue;
-        config.borderColor[cssTokenName] = configValue;
-        config.textColor[cssTokenName] = configValue;
-        config.colors[cssTokenName] = configValue;
-    });
-    Object.keys(definition.radius).forEach((tokenName) => {
-        const cssTokenName = (0, string_1.camelToKebab)(tokenName);
-        config.borderRadius[tokenName] = `var(--rs-radius-${cssTokenName})`;
-        return;
-    });
-    Object.keys(definition.unit).forEach((tokenName) => {
-        if (tokenName.startsWith("base")) {
-            [...Array(11).keys()].forEach((i) => {
-                if (i === 0) {
-                    config.spacing["0"] = "0px";
-                }
-                else {
-                    config.spacing[`x${i}`] = `var(--rs-unit-x${i})`;
-                }
-            });
-        }
-    });
-    Object.keys(definition.shadow).forEach((tokenName) => {
-        const cssTokenName = (0, string_1.camelToKebab)(tokenName);
-        const cssVariable = ["rs", "shadow", cssTokenName].join("-");
-        const configValue = `var(--${cssVariable})`;
-        const name = cssTokenName.replace("shadow-", "");
-        config.boxShadow[name] = configValue;
-        return;
-    });
-    Object.entries(definition.viewport).forEach(([tokenName, tokenValue]) => {
-        if (!tokenValue.minPx)
-            return;
-        config.screens[tokenName] = `${tokenValue.minPx}px`;
-    });
-    return config;
-};
-exports.getTheme = getTheme;

package/dist/cjs/constants/breakpoints.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    m: number;
-    l: number;
-    xl: number;
-};
-export default _default;

package/dist/cjs/constants/breakpoints.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    m: 660,
-    l: 900,
-    xl: 1280,
-};

package/dist/cjs/themes/_generator/constants.d.ts

@@ -1,2 +0,0 @@
-import type { Name } from "./tokens/color/color.types";
-export declare const bgWithDynamicForeground: Name[];

package/dist/cjs/themes/_generator/constants.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.bgWithDynamicForeground = void 0;
-exports.bgWithDynamicForeground = [
-    "backgroundNeutral",
-    "backgroundPrimary",
-    "backgroundCritical",
-    "backgroundWarning",
-    "backgroundPositive",
-    "brand",
-];

package/dist/cjs/themes/_generator/definitions/figma.d.ts

@@ -1,3 +0,0 @@
-import type { ThemeDefinition } from "../tokens/types";
-declare const theme: Partial<ThemeDefinition>;
-export default theme;

package/dist/cjs/themes/_generator/definitions/figma.js

@@ -1,197 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const theme = {
-    fontFamily: {
-        title: {
-            family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
-        },
-        body: {
-            family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
-        },
-        monospace: {
-            family: "SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
-        },
-    },
-    fontWeight: {
-        regular: { weight: 400 },
-        medium: { weight: 500 },
-        semibold: { weight: 600 },
-        bold: { weight: 700 },
-        extrabold: { weight: 800 },
-        black: { weight: 900 },
-    },
-    font: {
-        title1: {
-            fontSize: { px: 80 },
-            lineHeight: { px: 84 },
-            fontWeightToken: "semibold",
-            fontFamilyToken: "title",
-        },
-        title2: {
-            fontSize: { px: 64 },
-            lineHeight: { px: 68 },
-            fontWeightToken: "semibold",
-            fontFamilyToken: "title",
-        },
-        title3: {
-            fontSize: { px: 56 },
-            lineHeight: { px: 60 },
-            fontWeightToken: "semibold",
-            fontFamilyToken: "title",
-        },
-        title4: {
-            fontSize: { px: 40 },
-            lineHeight: { px: 44 },
-            fontWeightToken: "semibold",
-            fontFamilyToken: "title",
-        },
-        title5: {
-            fontSize: { px: 36 },
-            lineHeight: { px: 40 },
-            fontWeightToken: "semibold",
-            fontFamilyToken: "title",
-        },
-        title6: {
-            fontSize: { px: 24 },
-            lineHeight: { px: 28 },
-            fontWeightToken: "semibold",
-            fontFamilyToken: "title",
-        },
-        featured1: {
-            fontSize: { px: 22 },
-            lineHeight: { px: 28 },
-            fontFamilyToken: "body",
-        },
-        featured2: {
-            fontSize: { px: 20 },
-            lineHeight: { px: 28 },
-            fontFamilyToken: "body",
-        },
-        featured3: {
-            fontSize: { px: 18 },
-            lineHeight: { px: 24 },
-            fontFamilyToken: "body",
-        },
-        body1: {
-            fontSize: { px: 14 },
-            lineHeight: { px: 20 },
-            fontFamilyToken: "body",
-        },
-        body2: {
-            fontSize: { px: 13 },
-            lineHeight: { px: 20 },
-            fontFamilyToken: "body",
-        },
-        body3: {
-            fontSize: { px: 11 },
-            lineHeight: { px: 16 },
-            fontFamilyToken: "body",
-        },
-        caption1: {
-            fontSize: { px: 11 },
-            lineHeight: { px: 16 },
-            fontFamilyToken: "body",
-        },
-        caption2: {
-            fontSize: { px: 10 },
-            lineHeight: { px: 12 },
-            fontFamilyToken: "body",
-        },
-    },
-    unit: {
-        base: { px: 4 },
-        radiusSmall: { px: 4 },
-        radiusMedium: { px: 4 },
-        radiusLarge: { px: 4 },
-    },
-    color: {
-        foregroundNeutral: { hex: "#191919", hexDark: "#FFFFFF" },
-        foregroundNeutralFaded: { hex: "#474747", hexDark: "#B2B2B2" },
-        foregroundDisabled: { hex: "#B2B2B2", hexDark: "#656565" },
-        foregroundPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" },
-        foregroundPositive: { hex: "#009951", hexDark: "#79D297" },
-        foregroundCritical: { hex: "#DC3412", hexDark: "#FCA397" },
-        foregroundWarning: { hex: "#7b6305", hexDark: "#b4920c" },
-        backgroundNeutral: { hex: "#DFE2EA", hexDark: "#444444" },
-        backgroundNeutralFaded: { hex: "#F5F5F5", hexDark: "#383838" },
-        backgroundDisabled: { hex: "#e4e4e4", hexDark: "#474747" },
-        backgroundDisabledFaded: { hex: "#F5F5F5", hexDark: "#3A3A3A" },
-        backgroundPrimary: { hex: "#0D99FF", hexDark: "#0C8CE9" },
-        backgroundPrimaryFaded: { hex: "#E5F4FF", hexDark: "#394360" },
-        backgroundPositive: { hex: "#14AE5C", hexDark: "#198F51" },
-        backgroundPositiveFaded: { hex: "#DAECDF", hexDark: "#3d5749" },
-        backgroundCritical: { hex: "#F24822", hexDark: "#E03E1A" },
-        backgroundCriticalFaded: { hex: "#FFE2E0", hexDark: "#60332A" },
-        backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" },
-        backgroundWarningFaded: { hex: "#fffae9", hexDark: "#2c271f" },
-        borderNeutral: { hex: "#E6E6E6", hexDark: "#444444" },
-        borderNeutralFaded: { hex: "#E6E6E6", hexDark: "#444444" },
-        borderDisabled: { hex: "#E6E6E6", hexDark: "#3E3E3E" },
-        borderPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" },
-        borderPrimaryFaded: { hex: "#BDE3FF", hexDark: "#2A4D72" },
-        borderPositive: { hex: "#009951", hexDark: "#79D297" },
-        borderPositiveFaded: { hex: "#BBDDC6", hexDark: "#086338" },
-        borderCritical: { hex: "#DC3412", hexDark: "#FCA397" },
-        borderCriticalFaded: { hex: "#FFC7C2", hexDark: "#803226" },
-        borderWarning: { hex: "#cfa90f", hexDark: "#b4920a" },
-        borderWarningFaded: { hex: "#ece2c4", hexDark: "#453c1e" },
-        backgroundPage: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
-        backgroundPageFaded: { hex: "#FAFAFA", hexDark: "#1E1E1E" },
-        backgroundElevationBase: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
-        backgroundElevationRaised: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
-        backgroundElevationOverlay: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
-        onBackgroundPrimary: { hex: "#FFFFFF" },
-        brand: { hex: "#0D99FF" },
-        black: { hex: "#000000" },
-        white: { hex: "#FFFFFF" },
-    },
-    duration: {
-        rapid: { ms: 100 },
-        fast: { ms: 200 },
-        medium: { ms: 300 },
-        slow: { ms: 400 },
-    },
-    easing: {
-        standard: { x1: 0.4, y1: 0, x2: 0.2, y2: 1 },
-        accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 },
-        decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 },
-    },
-    shadow: {
-        raised: [
-            {
-                offsetX: 0,
-                offsetY: 1,
-                blurRadius: 3,
-                colorToken: "black",
-                opacity: 0.15,
-            },
-        ],
-        overlay: [
-            {
-                offsetX: 0,
-                offsetY: 10,
-                blurRadius: 24,
-                colorToken: "black",
-                opacity: 0.1,
-            },
-            {
-                offsetX: 0,
-                offsetY: 2,
-                blurRadius: 5,
-                colorToken: "black",
-                opacity: 0.04,
-            },
-        ],
-    },
-    viewport: {
-        m: { minPx: 660 },
-        l: { minPx: 900 },
-        xl: { minPx: 1280 },
-    },
-    zIndex: {
-        relative: { level: 10 },
-        absolute: { level: 100 },
-        fixed: { level: 200 },
-    },
-};
-exports.default = theme;

package/dist/cjs/themes/_generator/definitions/reshaped.d.ts

@@ -1,3 +0,0 @@
-import type { ThemeDefinition } from "../tokens/types";
-declare const theme: ThemeDefinition;
-export default theme;