reshaped 2.11.12 → 3.0.0

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

@@ -0,0 +1,187 @@
+"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",
+        },
+    },
+    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 },
+    },
+    // @ts-ignore
+    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" },
+        backgroundNeutral: { hex: "#DFE2EA", hexDark: "#444444" },
+        backgroundNeutralFaded: { hex: "#F5F5F5", hexDark: "#383838" },
+        backgroundNeutralHighlighted: { hex: "#D4D8E3", hexDark: "#525252" },
+        backgroundDisabled: { hex: "#e4e4e4", hexDark: "#474747" },
+        backgroundDisabledFaded: { hex: "#F5F5F5", hexDark: "#3A3A3A" },
+        backgroundPrimary: { hex: "#0D99FF", hexDark: "#0C8CE9" },
+        backgroundPrimaryHighlighted: { hex: "#007BE5", hexDark: "#0A6DC2" },
+        backgroundPrimaryFaded: { hex: "#E5F4FF", hexDark: "#394360" },
+        backgroundPositive: { hex: "#14AE5C", hexDark: "#198F51" },
+        backgroundPositiveFaded: { hex: "#DAECDF", hexDark: "#3d5749" },
+        backgroundPositiveHighlighted: { hex: "#009951", hexDark: "#078348" },
+        backgroundCritical: { hex: "#F24822", hexDark: "#E03E1A" },
+        backgroundCriticalFaded: { hex: "#FFE2E0", hexDark: "#60332A" },
+        backgroundCriticalHighlighted: { hex: "#DC3412", hexDark: "#C4381C" },
+        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" },
+        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" },
+        black: { hex: "#000000" },
+        white: { hex: "#FFFFFF" },
+    },
+    duration: {
+        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 },
+    },
+};
+exports.default = theme;

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

@@ -0,0 +1,197 @@
+"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",
+        },
+    },
+    fontWeight: {
+        regular: { weight: 400 },
+        medium: { weight: 500 },
+        semibold: { weight: 600 },
+        bold: { weight: 700 },
+        extrabold: { weight: 800 },
+        black: { weight: 900 },
+    },
+    font: {
+        title1: {
+            fontSize: { px: 96 },
+            lineHeight: { px: 100 },
+            fontWeightToken: "extrabold",
+            fontFamilyToken: "title",
+        },
+        title2: {
+            fontSize: { px: 80 },
+            lineHeight: { px: 84 },
+            fontWeightToken: "extrabold",
+            fontFamilyToken: "title",
+        },
+        title3: {
+            fontSize: { px: 64 },
+            lineHeight: { px: 68 },
+            fontWeightToken: "extrabold",
+            fontFamilyToken: "title",
+        },
+        title4: {
+            fontSize: { px: 56 },
+            lineHeight: { px: 60 },
+            fontWeightToken: "bold",
+            fontFamilyToken: "title",
+        },
+        title5: {
+            fontSize: { px: 48 },
+            lineHeight: { px: 52 },
+            fontWeightToken: "bold",
+            fontFamilyToken: "title",
+        },
+        title6: {
+            fontSize: { px: 36 },
+            lineHeight: { px: 40 },
+            fontWeightToken: "bold",
+            fontFamilyToken: "title",
+        },
+        featured1: {
+            fontSize: { px: 32 },
+            lineHeight: { px: 40 },
+            fontFamilyToken: "body",
+        },
+        featured2: {
+            fontSize: { px: 24 },
+            lineHeight: { px: 32 },
+            fontFamilyToken: "body",
+        },
+        featured3: {
+            fontSize: { px: 20 },
+            lineHeight: { px: 28 },
+            fontFamilyToken: "body",
+        },
+        body1: {
+            fontSize: { px: 18 },
+            lineHeight: { px: 28 },
+            fontFamilyToken: "body",
+        },
+        body2: {
+            fontSize: { px: 16 },
+            lineHeight: { px: 24 },
+            fontFamilyToken: "body",
+        },
+        body3: {
+            fontSize: { px: 14 },
+            lineHeight: { px: 20 },
+            fontFamilyToken: "body",
+        },
+        caption1: {
+            fontSize: { px: 12 },
+            lineHeight: { px: 16 },
+            fontFamilyToken: "body",
+        },
+        caption2: {
+            fontSize: { px: 10 },
+            lineHeight: { px: 12 },
+            fontFamilyToken: "body",
+        },
+    },
+    unit: {
+        base: { px: 4 },
+    },
+    radius: {
+        small: { px: 4 },
+        medium: { px: 8 },
+        large: { px: 12 },
+    },
+    color: {
+        backgroundPrimary: { hex: "#5a58f2", hexDark: "#524fea" },
+        backgroundPrimaryFaded: { hex: "#ecebfe", hexDark: "#252544" },
+        borderPrimary: { hex: "#3b38ed", hexDark: "#8c8bf3" },
+        borderPrimaryFaded: { hex: "#dedcfb", hexDark: "#323164" },
+        foregroundPrimary: { hex: "#4f4cf0", hexDark: "#8b8af7" },
+        backgroundCritical: { hex: "#e22c2c", hexDark: "#d02626" },
+        backgroundCriticalFaded: { hex: "#fdeded", hexDark: "#3e1f1f" },
+        borderCritical: { hex: "#bf2424", hexDark: "#f46969" },
+        borderCriticalFaded: { hex: "#fadbdb", hexDark: "#582929" },
+        foregroundCritical: { hex: "#c42525", hexDark: "#f36a6a" },
+        backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" },
+        backgroundWarningFaded: { hex: "#fffae9", hexDark: "#2c271f" },
+        borderWarning: { hex: "#cfa90f", hexDark: "#b4920a" },
+        borderWarningFaded: { hex: "#faedbb", hexDark: "#3d3628" },
+        foregroundWarning: { hex: "#7b6305", hexDark: "#b4920c" },
+        backgroundPositive: { hex: "#118850", hexDark: "#14784a" },
+        backgroundPositiveFaded: { hex: "#edfdf5", hexDark: "#1f2a23" },
+        borderPositive: { hex: "#0c6e40", hexDark: "#21ab6b" },
+        borderPositiveFaded: { hex: "#d0f3e2", hexDark: "#293b2f" },
+        foregroundPositive: { hex: "#0d7544", hexDark: "#18ab66" },
+        backgroundNeutral: { hex: "#dfe2ea", hexDark: "#494f60" },
+        backgroundNeutralFaded: { hex: "#f1f2f6", hexDark: "#222835" },
+        borderNeutral: { hex: "#0000001f", hexDark: "#ffffff24" },
+        borderNeutralFaded: { hex: "#0000001a", hexDark: "#ffffff17" },
+        foregroundNeutral: { hex: "#14181f", hexDark: "#eff1f5" },
+        foregroundNeutralFaded: { hex: "#5b667e", hexDark: "#c0c6d6" },
+        backgroundDisabled: { hex: "#eceef2", hexDark: "#1e212a" },
+        backgroundDisabledFaded: { hex: "#f5f6f9", hexDark: "#171921" },
+        borderDisabled: { hex: "#dfe2ea", hexDark: "#262a34" },
+        foregroundDisabled: { hex: "#c6ccda", hexDark: "#434959" },
+        backgroundElevationBase: { hex: "#ffffff", hexDark: "#15171e" },
+        backgroundElevationRaised: { hex: "#ffffff", hexDark: "#191b23" },
+        backgroundElevationOverlay: { hex: "#ffffff", hexDark: "#1c1f28" },
+        backgroundPage: { hex: "#ffffff", hexDark: "#0f1116" },
+        backgroundPageFaded: { hex: "#f9f9fb", hexDark: "#111319" },
+        brand: { hex: "#5a58f2" },
+        white: { hex: "#ffffff" },
+        black: { hex: "#000000" },
+    },
+    duration: {
+        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: 5,
+                spreadRadius: -4,
+                colorToken: "black",
+                opacity: 0.5,
+            },
+            {
+                offsetX: 0,
+                offsetY: 4,
+                blurRadius: 8,
+                colorToken: "black",
+                opacity: 0.05,
+            },
+        ],
+        overlay: [
+            {
+                offsetX: 0,
+                offsetY: 5,
+                blurRadius: 10,
+                colorToken: "black",
+                opacity: 0.05,
+            },
+            {
+                offsetX: 0,
+                offsetY: 15,
+                blurRadius: 25,
+                colorToken: "black",
+                opacity: 0.07,
+            },
+        ],
+    },
+    viewport: {
+        m: { minPx: 660 },
+        l: { minPx: 900 },
+        xl: { minPx: 1280 },
+    },
+};
+exports.default = theme;

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

@@ -0,0 +1,13 @@
+"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("./reshaped"));
+const generateColors_1 = __importDefault(require("../utilities/generateColors"));
+const theme = {
+    ...reshaped_1.default,
+    color: (0, generateColors_1.default)(),
+    unit: reshaped_1.default.unit,
+};
+exports.default = theme;

package/dist/cjs/themes/_generator/tokens/color/color.types.d.ts

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

package/dist/cjs/themes/_generator/tokens/font/font.transforms.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_1 = require("../../utilities/css");
+const BASE_REM_SIZE = 14;
+const transformedToken = (name, token) => {
+    const result = [];
+    result.push({
+        name,
+        tokenType: "fontSize",
+        type: "variable",
+        value: `${token.fontSize.px / BASE_REM_SIZE}rem`,
+    });
+    result.push({
+        name,
+        tokenType: "lineHeight",
+        type: "variable",
+        value: `${token.lineHeight.px / BASE_REM_SIZE}rem`,
+    });
+    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/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.types.d.ts

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

package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.d.ts

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

package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.js

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

package/dist/cjs/themes/_generator/tokens/radius/radius.types.d.ts

@@ -0,0 +1,4 @@
+export type Name = "small" | "medium" | "large";
+export type Token = {
+    px: number;
+};

package/dist/cjs/themes/_generator/tokens/transforms.d.ts

@@ -0,0 +1,12 @@
+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>;
+    radius: import("./types").Transformer<import("./radius/radius.types").Token>;
+    viewport: import("./types").Transformer<import("./viewport/viewport.types").Token | import("./viewport/viewport.types").SToken>;
+};

package/dist/cjs/themes/_generator/tokens/transforms.js

@@ -0,0 +1,28 @@
+"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 radius_transforms_1 = __importDefault(require("./radius/radius.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,
+    radius: radius_transforms_1.default,
+    viewport: viewport_transforms_1.default,
+};

package/dist/cjs/themes/_generator/tokens/types.d.ts

@@ -0,0 +1,55 @@
+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 TRadius from "./radius/radius.types";
+import type * as TViewport from "./viewport/viewport.types";
+export type TokenType = "fontFamily" | "fontWeight" | "unit" | "radius" | "viewport" | "font" | "color" | "duration" | "easing" | "shadow";
+export type ColorHue = "primary" | "positive" | "critical" | "neutral";
+type TokenSet<Name extends string, Token> = Record<Name, Token> & {
+    [tokenName: string]: Token;
+};
+export type ThemeDefinition = {
+    unit: TokenSet<TUnit.Name, TUnit.Token>;
+    radius: TokenSet<TRadius.Name, TRadius.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>;
+    viewport: Record<Exclude<TViewport.Name, "s">, TViewport.Token>;
+};
+export type PartialThemeDefinition = {
+    unit?: Partial<ThemeDefinition["unit"]>;
+    radius?: Partial<ThemeDefinition["radius"]>;
+    fontFamily?: Partial<ThemeDefinition["fontFamily"]>;
+    fontWeight?: Partial<ThemeDefinition["fontWeight"]>;
+    font?: Partial<ThemeDefinition["font"]>;
+    color?: Partial<ThemeDefinition["color"]>;
+    duration?: Partial<ThemeDefinition["duration"]>;
+    easing?: Partial<ThemeDefinition["easing"]>;
+    shadow?: Partial<ThemeDefinition["shadow"]>;
+    viewport?: Partial<ThemeDefinition["viewport"]>;
+};
+export type FullThemeDefinition = ThemeDefinition & {
+    color: Record<TColor.GeneratedOnName | TColor.GeneratedRGBName | TColor.Name, TColor.Token>;
+    unit: Record<TUnit.GeneratedName | TUnit.Name, TUnit.Token>;
+    viewport: Record<TViewport.Name, TViewport.Token | TViewport.SToken>;
+};
+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/dist/cjs/themes/_generator/tokens/unit/unit.types.d.ts

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

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

@@ -0,0 +1,61 @@
+"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 });
+const transforms = __importStar(require("./tokens/transforms"));
+const css_1 = require("./utilities/css");
+const generateBackgroundColors_1 = __importDefault(require("./utilities/generateBackgroundColors"));
+const generateUnits_1 = __importDefault(require("./utilities/generateUnits"));
+const transform = (name, definition, options) => {
+    const { isFragment, themeOptions } = options;
+    (0, generateBackgroundColors_1.default)(definition, themeOptions);
+    (0, generateUnits_1.default)(definition);
+    // Generate s viewport
+    if (definition.viewport?.m?.minPx) {
+        definition.viewport.s = { maxPx: definition.viewport.m.minPx - 1 };
+    }
+    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);
+            });
+        });
+    });
+    return {
+        variables: (0, css_1.variablesTemplate)(name, transformedStorage.variable),
+        media: !isFragment ? (0, css_1.mediaTemplate)(transformedStorage.media) : undefined,
+    };
+};
+exports.default = transform;

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

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