@roblawn/devtool-runtime 0.1.0-alpha.0

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

@@ -0,0 +1,108 @@
+export declare const shadowTokenSchema: {
+    readonly name: "shadow";
+    readonly description: "Box-shadow presets.";
+    readonly semanticType: "composite";
+    readonly responsive: false;
+    readonly order: {
+        readonly type: "custom";
+    };
+    readonly fields: readonly [{
+        readonly key: "compose";
+        readonly op: "shadowCompose";
+        readonly description: "Shadow composition mode";
+    }, {
+        readonly key: "offsetX1";
+        readonly op: "shadowX1";
+        readonly description: "Layer 1 horizontal offset token";
+    }, {
+        readonly key: "offsetY1";
+        readonly op: "shadowY1";
+        readonly description: "Layer 1 vertical offset token";
+    }, {
+        readonly key: "blur1";
+        readonly op: "shadowBlur1";
+        readonly description: "Layer 1 blur token";
+    }, {
+        readonly key: "spread1";
+        readonly op: "shadowSpread1";
+        readonly description: "Layer 1 spread token";
+    }, {
+        readonly key: "opacity1";
+        readonly op: "shadowOpacity1";
+        readonly description: "Layer 1 opacity token";
+    }, {
+        readonly key: "offsetX2";
+        readonly op: "shadowX2";
+        readonly description: "Layer 2 horizontal offset token";
+    }, {
+        readonly key: "offsetY2";
+        readonly op: "shadowY2";
+        readonly description: "Layer 2 vertical offset token";
+    }, {
+        readonly key: "blur2";
+        readonly op: "shadowBlur2";
+        readonly description: "Layer 2 blur token";
+    }, {
+        readonly key: "spread2";
+        readonly op: "shadowSpread2";
+        readonly description: "Layer 2 spread token";
+    }, {
+        readonly key: "opacity2";
+        readonly op: "shadowOpacity2";
+        readonly description: "Layer 2 opacity token";
+    }];
+    readonly defaults: {
+        readonly compose: "single";
+        readonly offsetX1: 0;
+        readonly offsetY1: 1;
+        readonly blur1: 2;
+        readonly spread1: 0;
+        readonly opacity1: 10;
+        readonly offsetX2: 0;
+        readonly offsetY2: 0;
+        readonly blur2: 0;
+        readonly spread2: 0;
+        readonly opacity2: 0;
+    };
+    readonly initialTokens: {
+        readonly light: {
+            readonly compose: "double";
+            readonly offsetY1: 4;
+            readonly blur1: 6;
+            readonly spread1: -1;
+            readonly opacity1: 10;
+            readonly offsetY2: 2;
+            readonly blur2: 4;
+            readonly spread2: -2;
+            readonly opacity2: 10;
+        };
+        readonly strong: {
+            readonly compose: "double";
+            readonly offsetY1: 20;
+            readonly blur1: 25;
+            readonly spread1: -5;
+            readonly opacity1: 10;
+            readonly offsetY2: 8;
+            readonly blur2: 10;
+            readonly spread2: -6;
+            readonly opacity2: 10;
+        };
+    };
+};
+export declare const shadowComposeTokenSchema: {
+    readonly name: "shadowCompose";
+    readonly description: "Shadow composition mode tokens.";
+    readonly semanticType: "string";
+    readonly responsive: false;
+    readonly editorVisible: false;
+    readonly order: {
+        readonly type: "custom";
+    };
+    readonly initialTokens: {
+        readonly none: "none";
+        readonly single: "single";
+        readonly double: "double";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

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

@@ -0,0 +1,73 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const shadowTokenSchema = defineTokenFamilySchema({
+    name: 'shadow',
+    description: 'Box-shadow presets.',
+    semanticType: 'composite',
+    responsive: false,
+    order: { type: 'custom' },
+    fields: [
+        { key: 'compose', op: 'shadowCompose', description: 'Shadow composition mode' },
+        { key: 'offsetX1', op: 'shadowX1', description: 'Layer 1 horizontal offset token' },
+        { key: 'offsetY1', op: 'shadowY1', description: 'Layer 1 vertical offset token' },
+        { key: 'blur1', op: 'shadowBlur1', description: 'Layer 1 blur token' },
+        { key: 'spread1', op: 'shadowSpread1', description: 'Layer 1 spread token' },
+        { key: 'opacity1', op: 'shadowOpacity1', description: 'Layer 1 opacity token' },
+        { key: 'offsetX2', op: 'shadowX2', description: 'Layer 2 horizontal offset token' },
+        { key: 'offsetY2', op: 'shadowY2', description: 'Layer 2 vertical offset token' },
+        { key: 'blur2', op: 'shadowBlur2', description: 'Layer 2 blur token' },
+        { key: 'spread2', op: 'shadowSpread2', description: 'Layer 2 spread token' },
+        { key: 'opacity2', op: 'shadowOpacity2', description: 'Layer 2 opacity token' },
+    ],
+    defaults: {
+        compose: 'single',
+        offsetX1: 0,
+        offsetY1: 1,
+        blur1: 2,
+        spread1: 0,
+        opacity1: 10,
+        offsetX2: 0,
+        offsetY2: 0,
+        blur2: 0,
+        spread2: 0,
+        opacity2: 0,
+    },
+    initialTokens: {
+        light: {
+            compose: 'double',
+            offsetY1: 4,
+            blur1: 6,
+            spread1: -1,
+            opacity1: 10,
+            offsetY2: 2,
+            blur2: 4,
+            spread2: -2,
+            opacity2: 10,
+        },
+        strong: {
+            compose: 'double',
+            offsetY1: 20,
+            blur1: 25,
+            spread1: -5,
+            opacity1: 10,
+            offsetY2: 8,
+            blur2: 10,
+            spread2: -6,
+            opacity2: 10,
+        },
+    },
+});
+export const shadowComposeTokenSchema = defineTokenFamilySchema({
+    name: 'shadowCompose',
+    description: 'Shadow composition mode tokens.',
+    semanticType: 'string',
+    responsive: false,
+    editorVisible: false,
+    order: { type: 'custom' },
+    initialTokens: {
+        none: 'none',
+        single: 'single',
+        double: 'double',
+    },
+    toCssVarName: (tokenKey) => `--shadow-compose-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => tokenValue,
+});

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

@@ -0,0 +1,20 @@
+export declare const sizeTokenSchema: {
+    readonly name: "size";
+    readonly description: "Component sizing scale (used for width/height/min/max via CSS vars).";
+    readonly semanticType: "px";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "numeric";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly xs: "320px";
+        readonly sm: "384px";
+        readonly md: "448px";
+        readonly lg: "512px";
+        readonly xl: "576px";
+        readonly '2xl': "672px";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

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

@@ -0,0 +1,19 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+import { pxTokenToRemValue } from '../cssLengthConversion.js';
+export const sizeTokenSchema = defineTokenFamilySchema({
+    name: 'size',
+    description: 'Component sizing scale (used for width/height/min/max via CSS vars).',
+    semanticType: 'px',
+    responsive: true,
+    order: { type: 'numeric', direction: 'asc' },
+    initialTokens: {
+        xs: '320px',
+        sm: '384px',
+        md: '448px',
+        lg: '512px',
+        xl: '576px',
+        '2xl': '672px',
+    },
+    toCssVarName: (tokenKey) => `--size-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => pxTokenToRemValue(tokenValue),
+});

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

@@ -0,0 +1,21 @@
+export declare const spacingTokenSchema: {
+    readonly name: "spacing";
+    readonly description: "Spacing scale.";
+    readonly semanticType: "px";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "numeric";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly zero: "0px";
+        readonly '2xs': "2px";
+        readonly xs: "4px";
+        readonly sm: "8px";
+        readonly md: "12px";
+        readonly lg: "16px";
+        readonly xl: "24px";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

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

@@ -0,0 +1,20 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+import { pxTokenToRemValue } from '../cssLengthConversion.js';
+export const spacingTokenSchema = defineTokenFamilySchema({
+    name: 'spacing',
+    description: 'Spacing scale.',
+    semanticType: 'px',
+    responsive: true,
+    order: { type: 'numeric', direction: 'asc' },
+    initialTokens: {
+        zero: '0px',
+        '2xs': '2px',
+        xs: '4px',
+        sm: '8px',
+        md: '12px',
+        lg: '16px',
+        xl: '24px',
+    },
+    toCssVarName: (tokenKey) => `--spacing-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => pxTokenToRemValue(tokenValue),
+});

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

@@ -0,0 +1,87 @@
+export declare const textTokenSchema: {
+    readonly name: "text";
+    readonly description: "Text composite tokens (font family, size, weight, line height, and letter spacing).";
+    readonly semanticType: "composite";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "custom";
+    };
+    readonly fields: readonly [{
+        readonly key: "family";
+        readonly op: "fontFamily";
+        readonly description: "Font family token";
+    }, {
+        readonly key: "size";
+        readonly op: "textSize";
+        readonly description: "Font size value";
+    }, {
+        readonly key: "weight";
+        readonly op: "fontWeight";
+        readonly description: "Font weight token";
+    }, {
+        readonly key: "leading";
+        readonly op: "leading";
+        readonly description: "Line height value";
+    }, {
+        readonly key: "tracking";
+        readonly op: "tracking";
+        readonly description: "Letter spacing value";
+    }];
+    readonly defaults: {
+        readonly family: "body";
+        readonly weight: "normal";
+        readonly leading: 1.5;
+        readonly tracking: 0;
+    };
+    readonly initialTokens: {
+        readonly 'subtitle-1': {
+            readonly family: "body";
+            readonly size: 20;
+            readonly weight: "semibold";
+            readonly leading: 1.375;
+            readonly tracking: 0;
+        };
+        readonly 'subtitle-2': {
+            readonly family: "body";
+            readonly size: 18;
+            readonly weight: "semibold";
+            readonly leading: 1.375;
+            readonly tracking: 0;
+        };
+        readonly 'body-1': {
+            readonly family: "body";
+            readonly size: 16;
+            readonly weight: "normal";
+            readonly leading: 1.375;
+            readonly tracking: 0;
+        };
+        readonly 'body-2': {
+            readonly family: "body";
+            readonly size: 14;
+            readonly weight: "normal";
+            readonly leading: 1.375;
+            readonly tracking: 0;
+        };
+        readonly caption: {
+            readonly family: "body";
+            readonly size: 12;
+            readonly weight: "medium";
+            readonly leading: 1.375;
+            readonly tracking: 0;
+        };
+        readonly button: {
+            readonly family: "body";
+            readonly size: 12;
+            readonly weight: "medium";
+            readonly leading: 1.12;
+            readonly tracking: 0;
+        };
+        readonly tiny: {
+            readonly family: "body";
+            readonly size: 10;
+            readonly weight: "normal";
+            readonly leading: 1.12;
+            readonly tracking: 0;
+        };
+    };
+};

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

@@ -0,0 +1,30 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const textTokenSchema = defineTokenFamilySchema({
+    name: 'text',
+    description: 'Text composite tokens (font family, size, weight, line height, and letter spacing).',
+    semanticType: 'composite',
+    responsive: true,
+    order: { type: 'custom' },
+    fields: [
+        { key: 'family', op: 'fontFamily', description: 'Font family token' },
+        { key: 'size', op: 'textSize', description: 'Font size value' },
+        { key: 'weight', op: 'fontWeight', description: 'Font weight token' },
+        { key: 'leading', op: 'leading', description: 'Line height value' },
+        { key: 'tracking', op: 'tracking', description: 'Letter spacing value' },
+    ],
+    defaults: {
+        family: 'body',
+        weight: 'normal',
+        leading: 1.5,
+        tracking: 0,
+    },
+    initialTokens: {
+        'subtitle-1': { family: 'body', size: 20, weight: 'semibold', leading: 1.375, tracking: 0 },
+        'subtitle-2': { family: 'body', size: 18, weight: 'semibold', leading: 1.375, tracking: 0 },
+        'body-1': { family: 'body', size: 16, weight: 'normal', leading: 1.375, tracking: 0 },
+        'body-2': { family: 'body', size: 14, weight: 'normal', leading: 1.375, tracking: 0 },
+        caption: { family: 'body', size: 12, weight: 'medium', leading: 1.375, tracking: 0 },
+        button: { family: 'body', size: 12, weight: 'medium', leading: 1.12, tracking: 0 },
+        tiny: { family: 'body', size: 10, weight: 'normal', leading: 1.12, tracking: 0 },
+    },
+});

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

@@ -0,0 +1,28 @@
+export declare const textSizeTokenSchema: {
+    readonly name: "textSize";
+    readonly description: "Font size scale.";
+    readonly semanticType: "px";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "numeric";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly '2xs': "10px";
+        readonly xs: "12px";
+        readonly sm: "14px";
+        readonly base: "16px";
+        readonly lg: "18px";
+        readonly xl: "20px";
+        readonly '2xl': "24px";
+        readonly '3xl': "32px";
+        readonly '4xl': "36px";
+        readonly '5xl': "48px";
+        readonly '6xl': "56px";
+        readonly '7xl': "72px";
+        readonly '8xl': "96px";
+        readonly '9xl': "128px";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

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

@@ -0,0 +1,27 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+import { pxTokenToRemValue } from '../cssLengthConversion.js';
+export const textSizeTokenSchema = defineTokenFamilySchema({
+    name: 'textSize',
+    description: 'Font size scale.',
+    semanticType: 'px',
+    responsive: true,
+    order: { type: 'numeric', direction: 'asc' },
+    initialTokens: {
+        '2xs': '10px',
+        xs: '12px',
+        sm: '14px',
+        base: '16px',
+        lg: '18px',
+        xl: '20px',
+        '2xl': '24px',
+        '3xl': '32px',
+        '4xl': '36px',
+        '5xl': '48px',
+        '6xl': '56px',
+        '7xl': '72px',
+        '8xl': '96px',
+        '9xl': '128px',
+    },
+    toCssVarName: (tokenKey) => `--text-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => pxTokenToRemValue(tokenValue),
+});

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

@@ -0,0 +1,85 @@
+export declare const titleTokenSchema: {
+    readonly name: "title";
+    readonly description: "Title composite tokens (font family, size, weight, line height, and letter spacing).";
+    readonly semanticType: "composite";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "alpha";
+        readonly direction: "asc";
+    };
+    readonly fields: readonly [{
+        readonly key: "family";
+        readonly op: "fontFamily";
+        readonly description: "Font family token";
+    }, {
+        readonly key: "size";
+        readonly op: "textSize";
+        readonly description: "Font size value";
+    }, {
+        readonly key: "weight";
+        readonly op: "fontWeight";
+        readonly description: "Font weight token";
+    }, {
+        readonly key: "leading";
+        readonly op: "leading";
+        readonly description: "Line height value";
+    }, {
+        readonly key: "tracking";
+        readonly op: "tracking";
+        readonly description: "Letter spacing value";
+    }, {
+        readonly key: "transform";
+        readonly op: "textTransform";
+        readonly description: "Text capitalisation";
+    }];
+    readonly defaults: {
+        readonly family: "display";
+        readonly weight: "bold";
+        readonly leading: 1.375;
+        readonly tracking: -0.025;
+    };
+    readonly initialTokens: {
+        readonly h1: {
+            readonly family: "display";
+            readonly size: 56;
+            readonly weight: "bold";
+            readonly leading: 1;
+            readonly tracking: -0.025;
+        };
+        readonly h2: {
+            readonly family: "display";
+            readonly size: 48;
+            readonly weight: "semibold";
+            readonly leading: 1;
+            readonly tracking: -0.025;
+        };
+        readonly h3: {
+            readonly family: "display";
+            readonly size: 32;
+            readonly weight: "bold";
+            readonly leading: 1.12;
+            readonly tracking: -0.025;
+        };
+        readonly h4: {
+            readonly family: "display";
+            readonly size: 24;
+            readonly weight: "bold";
+            readonly leading: 1.12;
+            readonly tracking: 0;
+        };
+        readonly h5: {
+            readonly family: "display";
+            readonly size: 20;
+            readonly weight: "semibold";
+            readonly leading: 1.12;
+            readonly tracking: 0;
+        };
+        readonly h6: {
+            readonly family: "display";
+            readonly size: 18;
+            readonly weight: "semibold";
+            readonly leading: 1.12;
+            readonly tracking: 0;
+        };
+    };
+};

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

@@ -0,0 +1,30 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const titleTokenSchema = defineTokenFamilySchema({
+    name: 'title',
+    description: 'Title composite tokens (font family, size, weight, line height, and letter spacing).',
+    semanticType: 'composite',
+    responsive: true,
+    order: { type: 'alpha', direction: 'asc' },
+    fields: [
+        { key: 'family', op: 'fontFamily', description: 'Font family token' },
+        { key: 'size', op: 'textSize', description: 'Font size value' },
+        { key: 'weight', op: 'fontWeight', description: 'Font weight token' },
+        { key: 'leading', op: 'leading', description: 'Line height value' },
+        { key: 'tracking', op: 'tracking', description: 'Letter spacing value' },
+        { key: 'transform', op: 'textTransform', description: 'Text capitalisation' },
+    ],
+    defaults: {
+        family: 'display',
+        weight: 'bold',
+        leading: 1.375,
+        tracking: -0.025,
+    },
+    initialTokens: {
+        h1: { family: 'display', size: 56, weight: 'bold', leading: 1, tracking: -0.025 },
+        h2: { family: 'display', size: 48, weight: 'semibold', leading: 1, tracking: -0.025 },
+        h3: { family: 'display', size: 32, weight: 'bold', leading: 1.12, tracking: -0.025 },
+        h4: { family: 'display', size: 24, weight: 'bold', leading: 1.12, tracking: 0 },
+        h5: { family: 'display', size: 20, weight: 'semibold', leading: 1.12, tracking: 0 },
+        h6: { family: 'display', size: 18, weight: 'semibold', leading: 1.12, tracking: 0 },
+    },
+});

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

@@ -0,0 +1,20 @@
+export declare const trackingTokenSchema: {
+    readonly name: "tracking";
+    readonly description: "Letter-spacing scale.";
+    readonly semanticType: "em";
+    readonly responsive: true;
+    readonly order: {
+        readonly type: "numeric";
+        readonly direction: "asc";
+    };
+    readonly initialTokens: {
+        readonly tighter: "-0.05em";
+        readonly tight: "-0.025em";
+        readonly normal: "0em";
+        readonly wide: "0.025em";
+        readonly wider: "0.05em";
+        readonly widest: "0.1em";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

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

@@ -0,0 +1,18 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const trackingTokenSchema = defineTokenFamilySchema({
+    name: 'tracking',
+    description: 'Letter-spacing scale.',
+    semanticType: 'em',
+    responsive: true,
+    order: { type: 'numeric', direction: 'asc' },
+    initialTokens: {
+        tighter: '-0.05em',
+        tight: '-0.025em',
+        normal: '0em',
+        wide: '0.025em',
+        wider: '0.05em',
+        widest: '0.1em',
+    },
+    toCssVarName: (tokenKey) => `--tracking-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => tokenValue,
+});

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

@@ -0,0 +1,18 @@
+export declare const zIndexTokenSchema: {
+    readonly name: "zIndex";
+    readonly description: "Z-Index presets.";
+    readonly semanticType: "number";
+    readonly responsive: false;
+    readonly order: {
+        readonly type: "numeric";
+    };
+    readonly initialTokens: {
+        readonly default: "1";
+        readonly raised: "10";
+        readonly overlay: "100";
+        readonly modal: "200";
+        readonly topmost: "1000";
+    };
+    readonly toCssVarName: (tokenKey: string) => string;
+    readonly toCssVarValue: (_tokenKey: string, tokenValue: string) => string;
+};

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

@@ -0,0 +1,17 @@
+import { defineTokenFamilySchema } from '../defineTokenFamilySchema.js';
+export const zIndexTokenSchema = defineTokenFamilySchema({
+    name: 'zIndex',
+    description: 'Z-Index presets.',
+    semanticType: 'number',
+    responsive: false,
+    order: { type: 'numeric' },
+    initialTokens: {
+        default: '1',
+        raised: '10',
+        overlay: '100',
+        modal: '200',
+        topmost: '1000',
+    },
+    toCssVarName: (tokenKey) => `--z-${tokenKey}`,
+    toCssVarValue: (_tokenKey, tokenValue) => tokenValue,
+});