reshaped 1.0.1 → 2.1.0

package/cli/theming/index.js

@@ -0,0 +1,140 @@
+"use strict";
+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;
+};
+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 transforms = __importStar(require("./tokens/transforms"));
+const mergeDefinitions_1 = __importDefault(require("./utilities/mergeDefinitions"));
+const color_1 = require("../utilities/color");
+const string_1 = require("../utilities/string");
+const css_1 = require("./utilities/css");
+const reshaped_1 = __importDefault(require("./definitions/reshaped"));
+const base_1 = __importDefault(require("./definitions/base"));
+const generateBackgroundColors = (definition, themeOptions) => {
+    if (!definition.color)
+        return;
+    Object.keys(definition.color).forEach((tokenName) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const bgToken = (_a = definition.color) === null || _a === void 0 ? void 0 : _a[tokenName];
+        const generatedForegroundName = `on${(0, string_1.capitalize)(tokenName)}`;
+        const generatedRGBName = `rgb${(0, string_1.capitalize)(tokenName)}`;
+        const needsDynamicForeground = (_b = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.generateOnColorsFor) === null || _b === void 0 ? void 0 : _b.includes(tokenName);
+        const needsRGB = tokenName.startsWith("background") ||
+            tokenName.endsWith("black") ||
+            tokenName.endsWith("white");
+        if (!bgToken)
+            return;
+        if (needsDynamicForeground) {
+            const hex = (0, color_1.getOnColor)({
+                bgHexColor: bgToken.hex,
+                mode: "light",
+                lightHexColor: (_d = (_c = definition === null || definition === void 0 ? void 0 : definition.color) === null || _c === void 0 ? void 0 : _c.white) === null || _d === void 0 ? void 0 : _d.hex,
+                darkHexColor: (_f = (_e = definition === null || definition === void 0 ? void 0 : definition.color) === null || _e === void 0 ? void 0 : _e.black) === null || _f === void 0 ? void 0 : _f.hex,
+            });
+            const hexDark = (0, color_1.getOnColor)({
+                bgHexColor: bgToken.hexDark || bgToken.hex,
+                mode: "dark",
+                lightHexColor: (_h = (_g = definition === null || definition === void 0 ? void 0 : definition.color) === null || _g === void 0 ? void 0 : _g.white) === null || _h === void 0 ? void 0 : _h.hex,
+                darkHexColor: (_k = (_j = definition === null || definition === void 0 ? void 0 : definition.color) === null || _j === void 0 ? void 0 : _j.black) === null || _k === void 0 ? void 0 : _k.hex,
+            });
+            // eslint-disable-next-line no-param-reassign
+            definition.color[generatedForegroundName] = {
+                hex,
+                hexDark: hex !== hexDark ? hexDark : undefined,
+            };
+        }
+        if (needsRGB) {
+            // eslint-disable-next-line no-param-reassign
+            definition.color[generatedRGBName] = {
+                hex: (0, color_1.hexToRgbString)(bgToken.hex),
+                hexDark: bgToken.hexDark && (0, color_1.hexToRgbString)(bgToken.hexDark),
+            };
+        }
+    });
+};
+const generateUnits = (definition) => {
+    var _a, _b;
+    const baseValue = (_b = (_a = definition.unit) === null || _a === void 0 ? void 0 : _a.base) === null || _b === void 0 ? void 0 : _b.px;
+    // If base value hasn't changed, we don't need to regenerate tokens
+    if (!baseValue)
+        return;
+    for (let i = 1; i <= 10; i += 1) {
+        const generatedName = `x${i}`;
+        // eslint-disable-next-line no-param-reassign
+        definition.unit[generatedName] = {
+            px: baseValue * i,
+        };
+    }
+};
+const transformDefinition = (name, definition, options) => {
+    const { outputPath, isPrivate, isFragment } = options;
+    generateBackgroundColors(definition, options.themeOptions);
+    generateUnits(definition);
+    const transformedStorage = {
+        variable: [],
+        media: [],
+    };
+    Object.entries(definition).forEach(([tokenType, tokenValues]) => {
+        if (!tokenValues)
+            return;
+        const transform = transforms.css[tokenType];
+        Object.entries(tokenValues).forEach(([tokenName, token]) => {
+            const transformedTokens = transform(tokenName, token, definition);
+            transformedTokens.forEach((transformedToken) => {
+                transformedStorage[transformedToken.type].push(transformedToken);
+            });
+        });
+    });
+    const variablesCode = (0, css_1.variablesTemplate)(name, transformedStorage.variable);
+    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");
+    fs_1.default.mkdirSync(themeFolderPath, { recursive: true });
+    fs_1.default.writeFileSync(themePath, variablesCode);
+    if (isPrivate && !isFragment) {
+        const mediaCode = (0, css_1.mediaTemplate)(transformedStorage.media);
+        const mediaPath = path_1.default.resolve(outputPath, "media.css");
+        fs_1.default.writeFileSync(mediaPath, mediaCode);
+    }
+    const logOutput = `Compiled ${chalk_1.default.bold(name)} theme${isFragment ? " fragment" : ""}`;
+    // eslint-disable-next-line no-console
+    console.log(chalk_1.default.green(logOutput));
+};
+const addThemeFragment = (name, definition, options) => {
+    transformDefinition(name, definition, Object.assign(Object.assign({}, options), { isFragment: true }));
+};
+exports.addThemeFragment = addThemeFragment;
+const addTheme = (name, definition, options) => {
+    const withReshaped = (0, mergeDefinitions_1.default)(reshaped_1.default, definition);
+    const withBase = (0, mergeDefinitions_1.default)(withReshaped, base_1.default);
+    transformDefinition(name, withBase, options);
+};
+exports.addTheme = addTheme;

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

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

package/cli/theming/reshaped.config.js

@@ -0,0 +1,25 @@
+"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("./definitions/reshaped"));
+const figma_1 = __importDefault(require("./definitions/figma"));
+const slate_1 = __importDefault(require("./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" },
+            },
+        },
+    },
+    themeOptions: {},
+};
+exports.default = config;

package/cli/theming/tokens/color/color.transforms.d.ts

@@ -0,0 +1,4 @@
+import type * as T from "./color.types";
+import { Transformer } from "../types";
+declare const transformedToken: Transformer<T.Token>;
+export default transformedToken;

package/cli/theming/tokens/color/color.transforms.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const transformedToken = (name, token) => {
+    const hasDarkMode = !!token.hexDark;
+    const defaultMode = hasDarkMode ? "light" : undefined;
+    const result = [
+        { name, tokenType: "color", type: "variable", value: token.hex, mode: defaultMode },
+    ];
+    if (token.hexDark) {
+        result.push({
+            name,
+            tokenType: "color",
+            type: "variable",
+            value: token.hexDark,
+            mode: "dark",
+        });
+    }
+    return result;
+};
+exports.default = transformedToken;

package/cli/theming/tokens/color/color.types.d.ts

@@ -0,0 +1,7 @@
+export type Name = "foregroundNeutral" | "foregroundNeutralFaded" | "foregroundDisabled" | "foregroundPrimary" | "foregroundCritical" | "foregroundPositive" | "borderNeutral" | "borderNeutralFaded" | "borderDisabled" | "borderPrimary" | "borderPrimaryFaded" | "borderCritical" | "borderCriticalFaded" | "borderPositive" | "borderPositiveFaded" | "backgroundNeutral" | "backgroundNeutralFaded" | "backgroundNeutralHighlighted" | "backgroundDisabled" | "backgroundDisabledFaded" | "backgroundPrimary" | "backgroundPrimaryFaded" | "backgroundPrimaryHighlighted" | "backgroundCritical" | "backgroundCriticalFaded" | "backgroundCriticalHighlighted" | "backgroundPositive" | "backgroundPositiveFaded" | "backgroundPositiveHighlighted" | "backgroundPage" | "backgroundPageFaded" | "backgroundElevationBase" | "backgroundElevationRaised" | "backgroundElevationOverlay" | "white" | "black";
+export type GeneratedOnName = "onBackgroundNeutral" | "onBackgroundPrimary" | "onBackgroundPositive" | "onBackgroundCritical";
+export type GeneratedRGBName = "rgbBackgroundNeutral" | "rgbBackgroundNeutralFaded" | "rgbBackgroundNeutralHighlighted" | "rgbBackgroundDisabled" | "rgbBackgroundDisabledFaded" | "rgbBackgroundPrimary" | "rgbBackgroundPrimaryFaded" | "rgbBackgroundPrimaryHighlighted" | "rgbBackgroundCritical" | "rgbBackgroundCriticalFaded" | "rgbBackgroundCriticalHighlighted" | "rgbBackgroundPositive" | "rgbBackgroundPositiveFaded" | "rgbBackgroundPositiveHighlighted" | "rgbBackgroundPage" | "rgbBackgroundPageFaded" | "rgbBackgroundElevationBase" | "rgbBackgroundElevationRaised" | "rgbBackgroundElevationOverlay";
+export type Token = {
+    hex: string;
+    hexDark?: string;
+};

package/cli/theming/tokens/color/color.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/tokens/duration/duration.transforms.d.ts

@@ -0,0 +1,4 @@
+import type * as T from "./duration.types";
+import { Transformer } from "../types";
+declare const transformedToken: Transformer<T.Token>;
+export default transformedToken;

package/cli/theming/tokens/duration/duration.transforms.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "duration",
+        type: "variable",
+        value: `${token.ms}ms`,
+    },
+];
+exports.default = transformedToken;

package/cli/theming/tokens/duration/duration.types.d.ts

@@ -0,0 +1,4 @@
+export type Name = "fast" | "medium" | "slow";
+export type Token = {
+    ms: number;
+};

package/cli/theming/tokens/duration/duration.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/tokens/easing/easing.transforms.d.ts

@@ -0,0 +1,4 @@
+import type * as T from "./easing.types";
+import { Transformer } from "../types";
+declare const transformedToken: Transformer<T.Token>;
+export default transformedToken;

package/cli/theming/tokens/easing/easing.transforms.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "easing",
+        type: "variable",
+        value: `cubic-bezier(${token.x1}, ${token.y1}, ${token.x2}, ${token.y2})`,
+    },
+];
+exports.default = transformedToken;

package/cli/theming/tokens/easing/easing.types.d.ts

@@ -0,0 +1,7 @@
+export type Name = "standard" | "accelerate" | "decelerate";
+export type Token = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};

package/cli/theming/tokens/easing/easing.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/tokens/font/font.transforms.d.ts

@@ -0,0 +1,4 @@
+import type * as T from "./font.types";
+import { Transformer } from "../types";
+declare const transformedToken: Transformer<T.Token>;
+export default transformedToken;

package/cli/theming/tokens/font/font.transforms.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_1 = require("../../utilities/css");
+const transformedToken = (name, token) => {
+    const result = [];
+    result.push({
+        name,
+        tokenType: "fontSize",
+        type: "variable",
+        value: `${token.fontSize.px}px`,
+    });
+    result.push({
+        name,
+        tokenType: "lineHeight",
+        type: "variable",
+        value: `${token.lineHeight.px}px`,
+    });
+    if (token.fontFamilyToken) {
+        result.push({
+            name,
+            tokenType: "fontFamily",
+            type: "variable",
+            value: `var(${(0, css_1.getVariableName)(token.fontFamilyToken, "fontFamily")})`,
+        });
+    }
+    if (token.fontWeightToken) {
+        result.push({
+            name,
+            tokenType: "fontWeight",
+            type: "variable",
+            value: `var(${(0, css_1.getVariableName)(token.fontWeightToken, "fontWeight")})`,
+        });
+    }
+    return result;
+};
+exports.default = transformedToken;

package/cli/theming/tokens/font/font.types.d.ts

@@ -0,0 +1,10 @@
+import type * as TUnit from "../unit/unit.types";
+import type * as TFontWeight from "../fontWeight/fontWeight.types";
+import type * as TFontFamily from "../fontFamily/fontFamily.types";
+export type Name = "title1" | "title2" | "title3" | "title4" | "title5" | "title6" | "featured1" | "featured2" | "featured3" | "body1" | "body2" | "body3" | "caption1" | "caption2";
+export type Token = {
+    fontSize: TUnit.Token;
+    lineHeight: TUnit.Token;
+    fontFamilyToken?: TFontFamily.Name;
+    fontWeightToken?: TFontWeight.Name;
+};

package/cli/theming/tokens/font/font.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/tokens/fontFamily/fontFamily.transforms.d.ts

@@ -0,0 +1,4 @@
+import type * as T from "./fontFamily.types";
+import { Transformer } from "../types";
+declare const transformedToken: Transformer<T.Token>;
+export default transformedToken;

package/cli/theming/tokens/fontFamily/fontFamily.transforms.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "fontFamily",
+        type: "variable",
+        value: `${token.family}`,
+    },
+];
+exports.default = transformedToken;

package/cli/theming/tokens/fontFamily/fontFamily.types.d.ts

@@ -0,0 +1,4 @@
+export type Name = "title" | "body";
+export type Token = {
+    family: string;
+};

package/cli/theming/tokens/fontFamily/fontFamily.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/tokens/fontWeight/fontWeight.transforms.d.ts

@@ -0,0 +1,4 @@
+import type * as T from "./fontWeight.types";
+import { Transformer } from "../types";
+declare const transformedToken: Transformer<T.Token>;
+export default transformedToken;

package/cli/theming/tokens/fontWeight/fontWeight.transforms.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "fontWeight",
+        type: "variable",
+        value: token.weight.toString(),
+    },
+];
+exports.default = transformedToken;

package/cli/theming/tokens/fontWeight/fontWeight.types.d.ts

@@ -0,0 +1,4 @@
+export type Name = "regular" | "medium" | "semibold" | "bold" | "heavy" | "black";
+export type Token = {
+    weight: number;
+};

package/cli/theming/tokens/fontWeight/fontWeight.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/tokens/shadow/shadow.transforms.d.ts

@@ -0,0 +1,4 @@
+import type * as T from "./shadow.types";
+import { Transformer } from "../types";
+declare const transformedToken: Transformer<T.Token>;
+export default transformedToken;

package/cli/theming/tokens/shadow/shadow.transforms.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const color_1 = require("../../../utilities/color");
+const transformedToken = (name, token, theme) => [
+    {
+        name,
+        tokenType: "shadow",
+        type: "variable",
+        value: token
+            .map((value) => {
+            const blur = value.blurRadius ? ` ${value.blurRadius}px` : "";
+            const spread = value.spreadRadius ? ` ${value.spreadRadius}px` : "";
+            const colorRef = theme.color[value.colorToken];
+            const color = `rgba(${(0, color_1.hexToRgbString)(colorRef.hex)}, ${value.opacity || 1})`;
+            return `${value.offsetX}px ${value.offsetY}px${blur}${spread} ${color}`;
+        })
+            .join(", "),
+    },
+];
+exports.default = transformedToken;

package/cli/theming/tokens/shadow/shadow.types.d.ts

@@ -0,0 +1,13 @@
+import type * as TColor from "../color/color.types";
+export type Name = "raised" | "overlay";
+export type Token = Array<{
+    offsetX: number;
+    offsetY: number;
+    blurRadius?: number;
+    spreadRadius?: number;
+    colorToken: TColor.Name;
+    opacity: number;
+}>;
+export type ResolvedToken = Array<Omit<Token[0], "colorToken"> & {
+    color: TColor.Token;
+}>;

package/cli/theming/tokens/shadow/shadow.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/tokens/transforms.d.ts

@@ -0,0 +1,11 @@
+export declare const css: {
+    color: import("./types").Transformer<import("./color/color.types").Token>;
+    duration: import("./types").Transformer<import("./duration/duration.types").Token>;
+    easing: import("./types").Transformer<import("./easing/easing.types").Token>;
+    font: import("./types").Transformer<import("./font/font.types").Token>;
+    fontFamily: import("./types").Transformer<import("./fontFamily/fontFamily.types").Token>;
+    fontWeight: import("./types").Transformer<import("./fontWeight/fontWeight.types").Token>;
+    shadow: import("./types").Transformer<import("./shadow/shadow.types").Token>;
+    unit: import("./types").Transformer<import("./unit/unit.types").Token>;
+    viewport: import("./types").Transformer<import("./viewport/viewport.types").Token>;
+};

package/cli/theming/tokens/transforms.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.css = void 0;
+const color_transforms_1 = __importDefault(require("./color/color.transforms"));
+const duration_transforms_1 = __importDefault(require("./duration/duration.transforms"));
+const easing_transforms_1 = __importDefault(require("./easing/easing.transforms"));
+const font_transforms_1 = __importDefault(require("./font/font.transforms"));
+const fontFamily_transforms_1 = __importDefault(require("./fontFamily/fontFamily.transforms"));
+const fontWeight_transforms_1 = __importDefault(require("./fontWeight/fontWeight.transforms"));
+const shadow_transforms_1 = __importDefault(require("./shadow/shadow.transforms"));
+const unit_transforms_1 = __importDefault(require("./unit/unit.transforms"));
+const viewport_transforms_1 = __importDefault(require("./viewport/viewport.transforms"));
+exports.css = {
+    color: color_transforms_1.default,
+    duration: duration_transforms_1.default,
+    easing: easing_transforms_1.default,
+    font: font_transforms_1.default,
+    fontFamily: fontFamily_transforms_1.default,
+    fontWeight: fontWeight_transforms_1.default,
+    shadow: shadow_transforms_1.default,
+    unit: unit_transforms_1.default,
+    viewport: viewport_transforms_1.default,
+};

package/cli/theming/tokens/types.d.ts

@@ -0,0 +1,52 @@
+import type * as TColor from "./color/color.types";
+import type * as TDuration from "./duration/duration.types";
+import type * as TEasing from "./easing/easing.types";
+import type * as TFont from "./font/font.types";
+import type * as TFontFamily from "./fontFamily/fontFamily.types";
+import type * as TFontWeight from "./fontWeight/fontWeight.types";
+import type * as TShadow from "./shadow/shadow.types";
+import type * as TUnit from "./unit/unit.types";
+import type * as TViewport from "./viewport/viewport.types";
+export type TokenType = "fontFamily" | "fontWeight" | "unit" | "viewport" | "font" | "color" | "duration" | "easing" | "shadow";
+export type BaseThemeDefinition = {
+    viewport: Record<TViewport.Name, TViewport.Token>;
+};
+type TokenSet<Name extends string, Token> = Record<Name, Token> & {
+    [tokenName: string]: Token;
+};
+export type UserThemeDefinition = {
+    unit: TokenSet<TUnit.Name, TUnit.Token>;
+    fontFamily: TokenSet<TFontFamily.Name, TFontFamily.Token>;
+    fontWeight: TokenSet<TFontWeight.Name, TFontWeight.Token>;
+    font: TokenSet<TFont.Name, TFont.Token>;
+    color: TokenSet<TColor.Name, TColor.Token>;
+    duration: TokenSet<TDuration.Name, TDuration.Token>;
+    easing: TokenSet<TEasing.Name, TEasing.Token>;
+    shadow: TokenSet<TShadow.Name, TShadow.Token>;
+};
+export type PartialUserThemeDefinition = {
+    unit?: Partial<UserThemeDefinition["unit"]>;
+    fontFamily?: Partial<UserThemeDefinition["fontFamily"]>;
+    fontWeight?: Partial<UserThemeDefinition["fontWeight"]>;
+    font?: Partial<UserThemeDefinition["font"]>;
+    color?: Partial<UserThemeDefinition["color"]>;
+    duration?: Partial<UserThemeDefinition["duration"]>;
+    easing?: Partial<UserThemeDefinition["easing"]>;
+    shadow?: Partial<UserThemeDefinition["shadow"]>;
+};
+export type ThemeDefinition = BaseThemeDefinition & UserThemeDefinition;
+export type FullThemeDefinition = ThemeDefinition & {
+    color: Record<TColor.GeneratedOnName | TColor.GeneratedRGBName | TColor.Name, TColor.Token>;
+    unit: Record<TUnit.GeneratedName | TUnit.Name, TUnit.Token>;
+};
+export type TransformedToken = {
+    name: string;
+    tokenType: TokenType | "fontSize" | "lineHeight";
+    value: string;
+    type: "variable" | "media";
+    mode?: "light" | "dark";
+    private?: boolean;
+    viewport?: string;
+};
+export type Transformer<Token> = (name: string, token: Token, theme: FullThemeDefinition) => TransformedToken[];
+export {};

package/cli/theming/tokens/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/tokens/unit/unit.transforms.d.ts

@@ -0,0 +1,4 @@
+import type * as T from "./unit.types";
+import { Transformer } from "../types";
+declare const transformedToken: Transformer<T.Token>;
+export default transformedToken;

package/cli/theming/tokens/unit/unit.transforms.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "unit",
+        type: "variable",
+        value: `${token.px}px`,
+    },
+];
+exports.default = transformedToken;

package/cli/theming/tokens/unit/unit.types.d.ts

@@ -0,0 +1,7 @@
+type SemanticRadiusName = "radiusSmall" | "radiusMedium" | "radiusLarge";
+export type Name = "base" | SemanticRadiusName;
+export type GeneratedName = "x1" | "x2" | "x3" | "x4" | "x5" | "x6" | "x7" | "x8" | "x9" | "x10";
+export type Token = {
+    px: number;
+};
+export {};

package/cli/theming/tokens/unit/unit.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/tokens/viewport/viewport.transforms.d.ts

@@ -0,0 +1,4 @@
+import type * as T from "./viewport.types";
+import { Transformer } from "../types";
+declare const transformedToken: Transformer<T.Token>;
+export default transformedToken;

package/cli/theming/tokens/viewport/viewport.transforms.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const transformedToken = (name, token) => {
+    const value = [];
+    if (token.minPx)
+        value.push(`(min-width: ${token.minPx}px)`);
+    if (token.maxPx)
+        value.push(`(max-width: ${token.maxPx}px)`);
+    return [
+        {
+            name,
+            tokenType: "viewport",
+            type: "media",
+            value: value.join(" and "),
+        },
+    ];
+};
+exports.default = transformedToken;

package/cli/theming/tokens/viewport/viewport.types.d.ts

@@ -0,0 +1,5 @@
+export type Name = "s" | "m" | "l" | "xl";
+export type Token = {
+    minPx?: number;
+    maxPx?: number;
+};

package/cli/theming/tokens/viewport/viewport.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/types.d.ts

@@ -0,0 +1,14 @@
+import { ReshapedConfig } from "../../types/config";
+type Primitive = string | number | boolean;
+export type PartialDeep<T> = T extends Primitive ? Partial<T> : {
+    [Key in keyof T]?: PartialDeep<T[Key]>;
+};
+export type PublicOptions = {
+    isPrivate?: boolean;
+    outputPath: string;
+    themeOptions?: ReshapedConfig["themeOptions"];
+};
+export type PrivateOptions = PublicOptions & {
+    isFragment?: boolean;
+};
+export {};

package/cli/theming/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cli/theming/utilities/css.d.ts

@@ -0,0 +1,6 @@
+import type * as T from "../tokens/types";
+export declare const getVariableName: (tokenName: string, tokenType?: string) => string;
+export declare const createVariable: (token: T.TransformedToken) => string;
+export declare const createMedia: (token: T.TransformedToken) => string;
+export declare const variablesTemplate: (themeName: string, tokens: T.TransformedToken[]) => string;
+export declare const mediaTemplate: (tokens: T.TransformedToken[]) => string;