reshaped 2.11.12 → 3.0.0

package/dist/themes/_generator/tests/themes.stories.js

@@ -0,0 +1,242 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import View from "../../../components/View/index.js";
+import Button from "../../../components/Button/index.js";
+import Badge from "../../../components/Badge/index.js";
+import Alert from "../../../components/Alert/index.js";
+import Card from "../../../components/Card/index.js";
+import Avatar from "../../../components/Avatar/index.js";
+import DropdownMenu from "../../../components/DropdownMenu/index.js";
+import TextField from "../../../components/TextField/index.js";
+import Theme from "../../../components/Theme/index.js";
+import IconZap from "../../../icons/Mic.js";
+import Link from "../../../components/Link/index.js";
+import Text from "../../../components/Text/index.js";
+import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
+export default {
+    title: "Themes",
+    parameters: {
+        iframe: { url: "https://reshaped.so/docs/tokens/theming/runtime-theming" },
+    },
+};
+const css = getThemeCSS("green", {
+    color: {
+        backgroundPrimary: { hex: "#1abc9c", hexDark: "#00E5C4" },
+        backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#00E5C4" },
+    },
+});
+const css2 = getThemeCSS("peach", {
+    color: {
+        backgroundPrimary: { hex: "#ffbe76" },
+        backgroundPrimaryHighlighted: { hex: "#ffbe76" },
+    },
+});
+const cssGenerated = getThemeCSS("generated", Object.assign(Object.assign({}, baseThemeDefinition), { color: generateThemeColors({
+        primary: "#0369a1" /*"#5a58f2"*/ /* "#2563eb" */,
+    }) }));
+const cssGenerated2 = getThemeCSS("generated2", Object.assign(Object.assign({}, baseThemeDefinition), { color: generateThemeColors({ primary: "#2383e2" }) }));
+const componentExamples = (<View gap={4} padding={6} backgroundColor="page">
+		<Text variant="featured-2">Hello world</Text>
+		<Text color="neutral-faded" variant="featured-2">
+			Hello world faded
+		</Text>
+		<Text color="disabled" variant="featured-2">
+			Hello world disabled
+		</Text>
+
+		<View gap={2} direction="row">
+			<Button color="primary" onClick={() => { }}>
+				Primary button
+			</Button>
+			<Button color="critical" onClick={() => { }}>
+				Critical button
+			</Button>
+			<Button color="positive" onClick={() => { }}>
+				Positive button
+			</Button>
+			<View height={9} width={20} borderRadius="small" backgroundColor="warning"/>
+			<Button color="neutral" onClick={() => { }}>
+				Neutral button
+			</Button>
+			<Button color="neutral" disabled onClick={() => { }}>
+				Disabled button
+			</Button>
+		</View>
+		<View gap={2} direction="row">
+			<Button color="primary" variant="outline" onClick={() => { }}>
+				Primary button
+			</Button>
+			<Button color="critical" variant="outline" onClick={() => { }}>
+				Critical button
+			</Button>
+			<Button color="positive" variant="outline" onClick={() => { }}>
+				Positive button
+			</Button>
+			<Button color="neutral" variant="outline" onClick={() => { }}>
+				Neutral button
+			</Button>
+		</View>
+		<View direction="row" gap={4}>
+			<View.Item columns={6}>
+				<Alert color="primary" title="Hello" icon={IconZap} actionsSlot={<Link color="primary">Action</Link>}>
+					Primary
+				</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="critical" title="Hello" icon={IconZap} actionsSlot={<Link color="critical">Action</Link>}>
+					Critical
+				</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="warning" title="Hello" icon={IconZap} actionsSlot={<Text color="warning">
+							<Link color="inherit">Action</Link>
+						</Text>}>
+					Warning
+				</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="positive" title="Hello" icon={IconZap} actionsSlot={<Link color="positive">Action</Link>}>
+					Positive
+				</Alert>
+			</View.Item>
+			<View.Item columns={6}>
+				<Alert color="neutral" title="Hello" icon={IconZap} actionsSlot={<Link color="primary">Action</Link>}>
+					Neutral
+				</Alert>
+			</View.Item>
+			<View.Item columns={12}>
+				<View direction="row" gap={2}>
+					<View backgroundColor="neutral" width={10} height={10}/>
+					<View backgroundColor="neutral-faded" width={10} height={10}/>
+					<View backgroundColor="primary" width={10} height={10}/>
+					<View backgroundColor="primary-faded" width={10} height={10}/>
+					<View backgroundColor="critical" width={10} height={10}/>
+					<View backgroundColor="critical-faded" width={10} height={10}/>
+					<View backgroundColor="warning" width={10} height={10}/>
+					<View backgroundColor="warning-faded" width={10} height={10}/>
+					<View backgroundColor="positive" width={10} height={10}/>
+					<View backgroundColor="positive-faded" width={10} height={10}/>
+				</View>
+			</View.Item>
+			<View.Item columns={12}>
+				<View direction="row" gap={2}>
+					<Avatar initials="RS" color="warning" variant="faded"/>
+					<Badge color="warning">Warning</Badge>
+				</View>
+			</View.Item>
+			<View.Item columns={12}>
+				<View direction="row">
+					<View padding={4} gap={4} backgroundColor="page">
+						Page
+						<View backgroundColor="neutral" padding={4}>
+							Neutral
+						</View>
+						<View backgroundColor="neutral-faded" padding={4}>
+							Neutral faded
+						</View>
+					</View>
+
+					<View padding={4} gap={4} backgroundColor="page-faded">
+						Page faded
+						<View backgroundColor="neutral" padding={4}>
+							Neutral
+						</View>
+						<View backgroundColor="neutral-faded" padding={4}>
+							Neutral faded
+						</View>
+					</View>
+				</View>
+			</View.Item>
+			<View.Item columns={6}>
+				<Card>
+					<View gap={2} align="start">
+						<Badge variant="outline" color="primary">
+							Badge
+						</Badge>
+						<View gap={2} direction="row">
+							<DropdownMenu>
+								<DropdownMenu.Trigger>
+									{(attributes) => (<Button variant="faded" attributes={attributes}>
+											Menu
+										</Button>)}
+								</DropdownMenu.Trigger>
+								<DropdownMenu.Content>
+									<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+									<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+									<br />
+									<View backgroundColor="neutral-faded" padding={4}>
+										Hello
+									</View>
+								</DropdownMenu.Content>
+							</DropdownMenu>
+							<Button variant="outline">Button</Button>
+						</View>
+
+						<TextField name="h" placeholder="hello" disabled/>
+						<TextField name="h" placeholder="hello" value="2323"/>
+					</View>
+				</Card>
+			</View.Item>
+			<View.Item columns={6}>
+				<Card elevated>
+					<View gap={2} align="start">
+						<Badge variant="outline" color="primary">
+							Badge
+						</Badge>
+
+						<TextField name="h" placeholder="hello" value="2323" disabled/>
+						<TextField name="h" placeholder="hello" value="2323"/>
+
+						<Button color="neutral" disabled onClick={() => { }}>
+							Disabled button
+						</Button>
+					</View>
+				</Card>
+			</View.Item>
+		</View>
+	</View>);
+export const base = () => (<Example>
+		<Example.Item title="custom runtime theme">
+			<style>{css}</style>
+			<Theme name="green">
+				<Button color="primary">Primary button</Button>
+			</Theme>
+		</Example.Item>
+		<Example.Item title="on colors generation">
+			<style>{css2}</style>
+			<Theme name="peach">
+				<Button color="primary">Primary button</Button>
+			</Theme>
+		</Example.Item>
+	</Example>);
+export const generation = () => (<>
+		<style>
+			{cssGenerated}
+			{cssGenerated2}
+		</style>
+		<Theme name="generated">{componentExamples}</Theme>
+		{/* <Theme name="generated2">{componentExamples}</Theme> */}
+	</>);
+const onColorsCss = getThemeCSS("on-color", {
+    color: {
+        backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" },
+        backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#1abc9c" },
+    },
+}, {
+    onColorValues: {
+        primary: {
+            hexLight: "#d1fae5",
+            hexDark: "#022c22",
+        },
+    },
+});
+export const onColors = () => (<Example>
+		<Example.Item title="custom on color values">
+			<style>{onColorsCss}</style>
+			<Theme name="on-color">
+				<View gap={2} direction="row">
+					<Button color="primary">Primary button</Button>
+					<Button color="critical">Critical button</Button>
+				</View>
+			</Theme>
+		</Example.Item>
+	</Example>);

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

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

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

@@ -0,0 +1,18 @@
+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;
+};
+export default transformedToken;

package/dist/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/themes/_generator/tokens/duration/duration.transforms.d.ts

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

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

@@ -0,0 +1,9 @@
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "duration",
+        type: "variable",
+        value: `${token.ms}ms`,
+    },
+];
+export default transformedToken;

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

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

package/dist/themes/_generator/tokens/duration/duration.types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,9 @@
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "easing",
+        type: "variable",
+        value: `cubic-bezier(${token.x1}, ${token.y1}, ${token.x2}, ${token.y2})`,
+    },
+];
+export default transformedToken;

package/dist/themes/_generator/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/dist/themes/_generator/tokens/easing/easing.types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,35 @@
+import { getVariableName } from "../../utilities/css.js";
+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(${getVariableName(token.fontFamilyToken, "fontFamily")})`,
+        });
+    }
+    if (token.fontWeightToken) {
+        result.push({
+            name,
+            tokenType: "fontWeight",
+            type: "variable",
+            value: `var(${getVariableName(token.fontWeightToken, "fontWeight")})`,
+        });
+    }
+    return result;
+};
+export default transformedToken;

package/dist/themes/_generator/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/dist/themes/_generator/tokens/font/font.types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,9 @@
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "fontFamily",
+        type: "variable",
+        value: `${token.family}`,
+    },
+];
+export default transformedToken;

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

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

package/dist/themes/_generator/tokens/fontFamily/fontFamily.types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,9 @@
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "fontWeight",
+        type: "variable",
+        value: token.weight.toString(),
+    },
+];
+export default transformedToken;

package/dist/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/themes/_generator/tokens/fontWeight/fontWeight.types.js

@@ -0,0 +1 @@
+export {};

package/dist/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/themes/_generator/tokens/radius/radius.transforms.js

@@ -0,0 +1,9 @@
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "radius",
+        type: "variable",
+        value: `${token.px}px`,
+    },
+];
+export default transformedToken;

package/dist/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/themes/_generator/tokens/radius/radius.types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,20 @@
+import { hexToRgb } from "../../utilities/color.js";
+const transformedToken = (name, token, theme) => [
+    {
+        name,
+        tokenType: "shadow",
+        type: "variable",
+        value: token
+            .map((value) => {
+            const blur = ` ${value.blurRadius || 0}px`;
+            const spread = ` ${value.spreadRadius || 0}px`;
+            const colorRef = theme.color[value.colorToken];
+            const rgb = hexToRgb(colorRef.hex);
+            const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
+            const color = `rgba(${rgbString}, ${value.opacity || 1})`;
+            return `${value.offsetX}px ${value.offsetY}px${blur}${spread} ${color}`;
+        })
+            .join(", "),
+    },
+];
+export default transformedToken;

package/dist/themes/_generator/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/dist/themes/_generator/tokens/shadow/shadow.types.js

@@ -0,0 +1 @@
+export {};

package/dist/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/themes/_generator/tokens/transforms.js

@@ -0,0 +1,22 @@
+import color from "./color/color.transforms.js";
+import duration from "./duration/duration.transforms.js";
+import easing from "./easing/easing.transforms.js";
+import font from "./font/font.transforms.js";
+import fontFamily from "./fontFamily/fontFamily.transforms.js";
+import fontWeight from "./fontWeight/fontWeight.transforms.js";
+import shadow from "./shadow/shadow.transforms.js";
+import unit from "./unit/unit.transforms.js";
+import radius from "./radius/radius.transforms.js";
+import viewport from "./viewport/viewport.transforms.js";
+export const css = {
+    color,
+    duration,
+    easing,
+    font,
+    fontFamily,
+    fontWeight,
+    shadow,
+    unit,
+    radius,
+    viewport,
+};

package/dist/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/themes/_generator/tokens/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,9 @@
+const transformedToken = (name, token) => [
+    {
+        name,
+        tokenType: "unit",
+        type: "variable",
+        value: `${token.px}px`,
+    },
+];
+export default transformedToken;

package/dist/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/themes/_generator/tokens/unit/unit.types.js

@@ -0,0 +1 @@
+export {};

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

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