@roblawn/devtool-runtime 0.1.0-alpha.0

package/dist/theme-contract/ops/op.config.js

@@ -0,0 +1,15 @@
+import { CORE_DESIGN_OP_CONFIG } from './coreOps.js';
+export const OP_CONFIG = CORE_DESIGN_OP_CONFIG;
+export const DESIGN_OPS = Object.keys(OP_CONFIG);
+export const AUTHORING_EFFECTS_BY_OP = Object.fromEntries(Object.entries(OP_CONFIG).flatMap(([op, config]) => 'authoringEffect' in config && config.authoringEffect ? [[op, config.authoringEffect]] : []));
+export const PUBLIC_DESIGN_OPS = DESIGN_OPS.filter((op) => {
+    const config = OP_CONFIG[op];
+    if (typeof config !== 'object' || config === null)
+        return true;
+    if (!('private' in config))
+        return true;
+    return config.private !== true;
+});
+export function getTokenFamilyForDesignOp(op) {
+    return OP_CONFIG[op].tokenFamily;
+}

package/dist/theme-contract/tokens/coreTokenFamilies.d.ts

@@ -0,0 +1,9 @@
+export declare const CORE_TOKEN_FAMILIES: {
+    readonly textAlign: readonly ["left", "center", "right", "justify"];
+    readonly textTransform: readonly ["uppercase", "lowercase", "capitalize", "normal-case"];
+    readonly align: readonly ["left", "center", "right"];
+    readonly inset: readonly ["0", "px", "1/2", "full"];
+};
+export type CoreTokenFamilies = typeof CORE_TOKEN_FAMILIES;
+export type CoreTokenFamilyName = keyof CoreTokenFamilies & string;
+export type CoreTokenKeysOfFamily<F extends CoreTokenFamilyName> = CoreTokenFamilies[F][number];

package/dist/theme-contract/tokens/coreTokenFamilies.js

@@ -0,0 +1,6 @@
+export const CORE_TOKEN_FAMILIES = {
+    textAlign: ['left', 'center', 'right', 'justify'],
+    textTransform: ['uppercase', 'lowercase', 'capitalize', 'normal-case'],
+    align: ['left', 'center', 'right'],
+    inset: ['0', 'px', '1/2', 'full'],
+};

package/dist/theme-contract/tokens/cssLengthConversion.d.ts

@@ -0,0 +1,2 @@
+export declare const THEME_SCALE_BASE_PX = 16;
+export declare function pxTokenToRemValue(tokenValue: string, basePx?: number): string;

package/dist/theme-contract/tokens/cssLengthConversion.js

@@ -0,0 +1,39 @@
+export const THEME_SCALE_BASE_PX = 16;
+const CSS_LENGTH_PATTERN = /^(-?\d+(?:\.\d+)?)(?:\s*(px|rem))?$/i;
+function roundLengthValue(value) {
+    if (!Number.isFinite(value))
+        return value;
+    return Math.round(value * 1_000_000) / 1_000_000;
+}
+function formatLengthValue(value) {
+    const normalized = Object.is(value, -0) ? 0 : roundLengthValue(value);
+    return `${normalized}`;
+}
+function parseLength(raw) {
+    const trimmed = raw.trim();
+    if (trimmed.length === 0)
+        return null;
+    const match = CSS_LENGTH_PATTERN.exec(trimmed);
+    if (!match)
+        return null;
+    const value = Number(match[1]);
+    if (!Number.isFinite(value))
+        return null;
+    return {
+        value,
+        unit: match[2]?.toLowerCase() ?? null,
+    };
+}
+export function pxTokenToRemValue(tokenValue, basePx = THEME_SCALE_BASE_PX) {
+    const trimmed = tokenValue.trim();
+    if (trimmed.length === 0)
+        return tokenValue;
+    const parsed = parseLength(trimmed);
+    if (!parsed)
+        return tokenValue;
+    if (parsed.unit === 'rem') {
+        return parsed.value === 0 ? '0' : `${formatLengthValue(parsed.value)}rem`;
+    }
+    const remValue = parsed.value / basePx;
+    return remValue === 0 ? '0' : `${formatLengthValue(remValue)}rem`;
+}

package/dist/theme-contract/tokens/defineProjectTokenFamilySchema.d.ts

@@ -0,0 +1 @@
+export { defineTokenFamilySchema, defineTokenFamilySchema as defineProjectTokenFamilySchema } from './defineTokenFamilySchema.js';

package/dist/theme-contract/tokens/defineProjectTokenFamilySchema.js

@@ -0,0 +1 @@
+export { defineTokenFamilySchema, defineTokenFamilySchema as defineProjectTokenFamilySchema } from './defineTokenFamilySchema.js';

package/dist/theme-contract/tokens/defineTokenFamilySchema.d.ts

@@ -0,0 +1,3 @@
+import type { TokenFamilySchema } from '../../design-system/tokens/TokenSchemas.types.js';
+export declare function defineTokenFamilySchema<const T extends TokenFamilySchema>(schema: T): T;
+export declare const defineProjectTokenFamilySchema: typeof defineTokenFamilySchema;

package/dist/theme-contract/tokens/defineTokenFamilySchema.js

@@ -0,0 +1,5 @@
+import { defineTokenFamilySchema as defineFrameworkTokenFamilySchema } from '../../design-system/tokens/TokenSchemas.types.js';
+export function defineTokenFamilySchema(schema) {
+    return defineFrameworkTokenFamilySchema(schema);
+}
+export const defineProjectTokenFamilySchema = defineTokenFamilySchema;

package/dist/theme-contract/tokens/runtimeTokenFamilies.types.d.ts

@@ -0,0 +1,5 @@
+import type { CoreTokenFamilyName } from './coreTokenFamilies.js';
+import { TOKEN_SCHEMAS } from './tokens.schema.js';
+type SchemaTokenFamily = (typeof TOKEN_SCHEMAS)[number]['name'];
+export type RuntimeTokenFamily = SchemaTokenFamily | CoreTokenFamilyName;
+export {};

package/dist/theme-contract/tokens/runtimeTokenFamilies.types.js

@@ -0,0 +1 @@
+import { TOKEN_SCHEMAS } from './tokens.schema.js';

package/dist/theme-contract/tokens/schemas/aspect.token.schema.d.ts

@@ -0,0 +1,20 @@
+export declare const aspectTokenSchema: {
+    readonly name: "aspect";
+    readonly description: "Aspect ratio presets.";
+    readonly semanticType: "aspect-ratio";
+    readonly responsive: false;
+    readonly order: {
+        readonly type: "custom";
+    };
+    readonly initialTokens: {
+        readonly auto: "auto";
+        readonly square: "1 / 1";
+        readonly video: "16 / 9";
+        readonly '16-9': "16 / 9";
+        readonly '4-3': "4 / 3";
+        readonly '3-2': "3 / 2";
+        readonly '1-1': "1 / 1";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

package/dist/theme-contract/tokens/schemas/aspect.token.schema.js

@@ -0,0 +1,19 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const aspectTokenSchema = defineTokenFamilySchema({
+    name: 'aspect',
+    description: 'Aspect ratio presets.',
+    semanticType: 'aspect-ratio',
+    responsive: false,
+    order: { type: 'custom' },
+    initialTokens: {
+        auto: 'auto',
+        square: '1 / 1',
+        video: '16 / 9',
+        '16-9': '16 / 9',
+        '4-3': '4 / 3',
+        '3-2': '3 / 2',
+        '1-1': '1 / 1',
+    },
+    toCssVarName: (tokenKey) => `--aspect-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => tokenValue,
+});

package/dist/theme-contract/tokens/schemas/blur.token.schema.d.ts

@@ -0,0 +1,21 @@
+export declare const blurTokenSchema: {
+    readonly name: "blur";
+    readonly description: "Blur radius tokens.";
+    readonly semanticType: "px";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "numeric";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly xs: "4px";
+        readonly sm: "8px";
+        readonly md: "12px";
+        readonly lg: "16px";
+        readonly xl: "24px";
+        readonly '2xl': "40px";
+        readonly '3xl': "64px";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

package/dist/theme-contract/tokens/schemas/blur.token.schema.js

@@ -0,0 +1,19 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const blurTokenSchema = defineTokenFamilySchema({
+    name: 'blur',
+    description: 'Blur radius tokens.',
+    semanticType: 'px',
+    responsive: true,
+    order: { type: 'numeric', direction: 'asc' },
+    initialTokens: {
+        xs: '4px',
+        sm: '8px',
+        md: '12px',
+        lg: '16px',
+        xl: '24px',
+        '2xl': '40px',
+        '3xl': '64px',
+    },
+    toCssVarName: (tokenKey) => `--blur-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => tokenValue,
+});

package/dist/theme-contract/tokens/schemas/border.token.schema.d.ts

@@ -0,0 +1,54 @@
+export declare const borderTokenSchema: {
+    readonly name: "border";
+    readonly description: "Border composite tokens (color + width + style).";
+    readonly semanticType: "composite";
+    readonly responsive: false;
+    readonly order: {
+        readonly type: "custom";
+    };
+    readonly fields: readonly [{
+        readonly key: "color";
+        readonly op: "borderColor";
+        readonly description: "Border color token";
+    }, {
+        readonly key: "width";
+        readonly op: "borderWidth";
+        readonly description: "Border width token";
+    }, {
+        readonly key: "style";
+        readonly op: "borderStyle";
+        readonly description: "Border style token";
+    }];
+    readonly defaults: {
+        readonly color: "primary";
+        readonly width: 2;
+        readonly style: "solid";
+    };
+    readonly initialTokens: {
+        readonly default: {
+            readonly color: "primary";
+            readonly width: 2;
+            readonly style: "solid";
+        };
+    };
+};
+export declare const borderStyleTokenSchema: {
+    readonly name: "borderStyle";
+    readonly description: "border style tokens.";
+    readonly semanticType: "string";
+    readonly responsive: false;
+    readonly editorVisible: false;
+    readonly order: {
+        readonly type: "custom";
+    };
+    readonly initialTokens: {
+        readonly none: "none";
+        readonly solid: "solid";
+        readonly dashed: "dashed";
+        readonly dotted: "dotted";
+        readonly double: "double";
+        readonly hidden: "hidden";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

package/dist/theme-contract/tokens/schemas/border.token.schema.js

@@ -0,0 +1,43 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const borderTokenSchema = defineTokenFamilySchema({
+    name: 'border',
+    description: 'Border composite tokens (color + width + style).',
+    semanticType: 'composite',
+    responsive: false,
+    order: { type: 'custom' },
+    fields: [
+        { key: 'color', op: 'borderColor', description: 'Border color token' },
+        { key: 'width', op: 'borderWidth', description: 'Border width token' },
+        { key: 'style', op: 'borderStyle', description: 'Border style token' },
+    ],
+    defaults: {
+        color: 'primary',
+        width: 2,
+        style: 'solid',
+    },
+    initialTokens: {
+        default: {
+            color: 'primary',
+            width: 2,
+            style: 'solid',
+        },
+    },
+});
+export const borderStyleTokenSchema = defineTokenFamilySchema({
+    name: 'borderStyle',
+    description: 'border style tokens.',
+    semanticType: 'string',
+    responsive: false,
+    editorVisible: false,
+    order: { type: 'custom' },
+    initialTokens: {
+        none: 'none',
+        solid: 'solid',
+        dashed: 'dashed',
+        dotted: 'dotted',
+        double: 'double',
+        hidden: 'hidden',
+    },
+    toCssVarName: (tokenKey) => `--border-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => tokenValue,
+});

package/dist/theme-contract/tokens/schemas/breakpoint.token.schema.d.ts

@@ -0,0 +1,19 @@
+export declare const breakpointTokenSchema: {
+    readonly name: "breakpoint";
+    readonly description: "Tailwind responsive breakpoints (min-width).";
+    readonly semanticType: "px";
+    readonly responsive: false;
+    readonly order: {
+        readonly type: "numeric";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly sm: "640px";
+        readonly md: "768px";
+        readonly lg: "1024px";
+        readonly xl: "1280px";
+        readonly '2xl': "1536px";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

package/dist/theme-contract/tokens/schemas/breakpoint.token.schema.js

@@ -0,0 +1,18 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+import { pxTokenToRemValue } from '../cssLengthConversion.js';
+export const breakpointTokenSchema = defineTokenFamilySchema({
+    name: 'breakpoint',
+    description: 'Tailwind responsive breakpoints (min-width).',
+    semanticType: 'px',
+    responsive: false,
+    order: { type: 'numeric', direction: 'asc' },
+    initialTokens: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px',
+    },
+    toCssVarName: (tokenKey) => `--breakpoint-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => pxTokenToRemValue(tokenValue),
+});

package/dist/theme-contract/tokens/schemas/color.token.schema.d.ts

@@ -0,0 +1,24 @@
+export declare const colorTokenSchema: {
+    readonly name: "color";
+    readonly description: "Design system color tokens.";
+    readonly semanticType: "css-color";
+    readonly responsive: false;
+    readonly tokenDescriptions: true;
+    readonly order: {
+        readonly type: "custom";
+    };
+    readonly initialTokens: {
+        readonly primary: "#000000";
+        readonly secondary: "#ffffff";
+        readonly muted: "#ffffff";
+        readonly accent: "#ffffff";
+        readonly success: "#ffffff";
+        readonly warning: "#fbf9f9";
+        readonly destructive: "#e63946";
+        readonly foreground: "#101010";
+        readonly background: "#ffffff";
+        readonly subtle: "#fcfcfd";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

package/dist/theme-contract/tokens/schemas/color.token.schema.js

@@ -0,0 +1,23 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const colorTokenSchema = defineTokenFamilySchema({
+    name: 'color',
+    description: 'Design system color tokens.',
+    semanticType: 'css-color',
+    responsive: false,
+    tokenDescriptions: true,
+    order: { type: 'custom' },
+    initialTokens: {
+        primary: '#000000',
+        secondary: '#ffffff',
+        muted: '#ffffff',
+        accent: '#ffffff',
+        success: '#ffffff',
+        warning: '#fbf9f9',
+        destructive: '#e63946',
+        foreground: '#101010',
+        background: '#ffffff',
+        subtle: '#fcfcfd',
+    },
+    toCssVarName: (tokenKey) => `--color-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => tokenValue,
+});

package/dist/theme-contract/tokens/schemas/container.token.schema.d.ts

@@ -0,0 +1,26 @@
+export declare const containerTokenSchema: {
+    readonly name: "container";
+    readonly description: "Named size tokens used for w/h/min*/max* (container scale + specials).";
+    readonly semanticType: "px";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "numeric";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly full: "full";
+        readonly screen: "screen";
+        readonly fit: "fit";
+        readonly min: "min";
+        readonly max: "max";
+        readonly xs: "320px";
+        readonly sm: "384px";
+        readonly md: "448px";
+        readonly lg: "512px";
+        readonly xl: "576px";
+        readonly '2xl': "672px";
+    };
+    readonly toCssVarName: (tokenKey: string) => string | null;
+    readonly toCssVarAliases: (tokenKey: string) => string[];
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

package/dist/theme-contract/tokens/schemas/container.token.schema.js

@@ -0,0 +1,30 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+import { pxTokenToRemValue } from '../cssLengthConversion.js';
+const SPECIAL_CONTAINER_KEYS = new Set(['full', 'screen', 'fit', 'min', 'max']);
+export const containerTokenSchema = defineTokenFamilySchema({
+    name: 'container',
+    description: 'Named size tokens used for w/h/min*/max* (container scale + specials).',
+    semanticType: 'px',
+    responsive: true,
+    order: { type: 'numeric', direction: 'asc' },
+    initialTokens: {
+        full: 'full',
+        screen: 'screen',
+        fit: 'fit',
+        min: 'min',
+        max: 'max',
+        xs: '320px',
+        sm: '384px',
+        md: '448px',
+        lg: '512px',
+        xl: '576px',
+        '2xl': '672px',
+    },
+    toCssVarName: (tokenKey) => {
+        if (SPECIAL_CONTAINER_KEYS.has(tokenKey))
+            return null;
+        return `--container-${tokenKey}`;
+    },
+    toCssVarAliases: (tokenKey) => [`--max-width-${tokenKey}`],
+    toCssVarValue: (_tokenKey, tokenValue) => pxTokenToRemValue(tokenValue),
+});

package/dist/theme-contract/tokens/schemas/font.token.schema.d.ts

@@ -0,0 +1,17 @@
+export declare const fontTokenSchema: {
+    readonly name: "font";
+    readonly description: "Font family tokens.";
+    readonly semanticType: "string";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "alpha";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly body: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif";
+        readonly display: "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif";
+        readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

package/dist/theme-contract/tokens/schemas/font.token.schema.js

@@ -0,0 +1,15 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const fontTokenSchema = defineTokenFamilySchema({
+    name: 'font',
+    description: 'Font family tokens.',
+    semanticType: 'string',
+    responsive: true,
+    order: { type: 'alpha', direction: 'asc' },
+    initialTokens: {
+        body: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+        display: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+        mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    },
+    toCssVarName: (tokenKey) => `--font-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => tokenValue,
+});

package/dist/theme-contract/tokens/schemas/fontWeight.token.schema.d.ts

@@ -0,0 +1,24 @@
+export declare const fontWeightTokenSchema: {
+    readonly name: "fontWeight";
+    readonly description: "Font weight scale.";
+    readonly semanticType: "number";
+    readonly responsive: true;
+    readonly editorVisible: false;
+    readonly order: {
+        readonly type: "numeric";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly thin: "100";
+        readonly extralight: "200";
+        readonly light: "300";
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+        readonly extrabold: "800";
+        readonly black: "900";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

package/dist/theme-contract/tokens/schemas/fontWeight.token.schema.js

@@ -0,0 +1,22 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const fontWeightTokenSchema = defineTokenFamilySchema({
+    name: 'fontWeight',
+    description: 'Font weight scale.',
+    semanticType: 'number',
+    responsive: true,
+    editorVisible: false,
+    order: { type: 'numeric', direction: 'asc' },
+    initialTokens: {
+        thin: '100',
+        extralight: '200',
+        light: '300',
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+        extrabold: '800',
+        black: '900',
+    },
+    toCssVarName: (tokenKey) => `--font-weight-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => tokenValue,
+});

package/dist/theme-contract/tokens/schemas/leading.token.schema.d.ts

@@ -0,0 +1,20 @@
+export declare const leadingTokenSchema: {
+    readonly name: "leading";
+    readonly description: "Line-height scale.";
+    readonly semanticType: "number";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "numeric";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly none: "1";
+        readonly tight: "1.25";
+        readonly snug: "1.375";
+        readonly normal: "1.5";
+        readonly relaxed: "1.625";
+        readonly loose: "2";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

package/dist/theme-contract/tokens/schemas/leading.token.schema.js

@@ -0,0 +1,18 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const leadingTokenSchema = defineTokenFamilySchema({
+    name: 'leading',
+    description: 'Line-height scale.',
+    semanticType: 'number',
+    responsive: true,
+    order: { type: 'numeric', direction: 'asc' },
+    initialTokens: {
+        none: '1',
+        tight: '1.25',
+        snug: '1.375',
+        normal: '1.5',
+        relaxed: '1.625',
+        loose: '2',
+    },
+    toCssVarName: (tokenKey) => `--leading-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => tokenValue,
+});

package/dist/theme-contract/tokens/schemas/radius.token.schema.d.ts

@@ -0,0 +1,23 @@
+export declare const radiusTokenSchema: {
+    readonly name: "radius";
+    readonly description: "Border radius tokens.";
+    readonly semanticType: "px";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "numeric";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly none: "0px";
+        readonly xs: "2px";
+        readonly sm: "4px";
+        readonly md: "6px";
+        readonly lg: "8px";
+        readonly xl: "12px";
+        readonly '2xl': "16px";
+        readonly '3xl': "24px";
+        readonly '4xl': "32px";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

package/dist/theme-contract/tokens/schemas/radius.token.schema.js

@@ -0,0 +1,22 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+import { pxTokenToRemValue } from '../cssLengthConversion.js';
+export const radiusTokenSchema = defineTokenFamilySchema({
+    name: 'radius',
+    description: 'Border radius tokens.',
+    semanticType: 'px',
+    responsive: true,
+    order: { type: 'numeric', direction: 'asc' },
+    initialTokens: {
+        none: '0px',
+        xs: '2px',
+        sm: '4px',
+        md: '6px',
+        lg: '8px',
+        xl: '12px',
+        '2xl': '16px',
+        '3xl': '24px',
+        '4xl': '32px',
+    },
+    toCssVarName: (tokenKey) => `--radius-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => pxTokenToRemValue(tokenValue),
+});