@vireo-ai/trellis-ui 0.1.43 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireo-ai/trellis-ui",
-  "version": "0.1.43",
+  "version": "0.1.46",
   "type": "module",
   "description": "Django-native UI toolkit for building realtime and interactive web apps.",
   "license": "MIT",
@@ -111,7 +111,7 @@
     "test:watch": "pnpm run generate:component-entries && vitest",
     "prek": "uv run prek",
     "clean:types": "node -e \"require('node:fs').rmSync('packages/client/types', { recursive: true, force: true })\"",
-    "build:theme": "pnpm --filter @vireo-ai/trellis-theme-engine run build && node packages/theme-engine/scripts/generate-default-css.mjs",
+    "build:theme": "pnpm --filter @vireo-ai/trellis-theme-engine run build && node packages/theme-engine/scripts/generate-default-css.mjs && node packages/theme-engine/scripts/generate-theme-knobs.mjs",
     "build:sources": "pnpm run build:theme && pnpm run build:manifests",
     "build:manifests": "vite build --config vite.manifests.config.ts && python3 scripts/generate_ui_events.py",
     "build:runtime-docs": "pnpm run build:manifests && pnpm run build:types && pnpm run generate:runtime-docs",

package/packages/client/src/components/toast/styles.css

@@ -11,7 +11,6 @@
   display: block;
   height: var(--ui-toast-stack-height);
   pointer-events: auto;
-  transition: height 160ms cubic-bezier(0.77, 0, 0.175, 1);
 }
 
 [data-ui-toast-outlet][data-stack="collapsed"][data-stack-expanded="true"] {

package/packages/client/src/styles/generated/theme-fonts.css

@@ -1,5 +1,5 @@
 /* Generated by packages/theme-engine/scripts/generate-default-css.mjs. */
-/* Theme df3d56b092a0a62a; CSS 9bd56c40eb5861dd. */
+/* Theme 4c13b5894d8c7c6a; CSS 9bd56c40eb5861dd. */
 @import url("https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap");
 
 @import url("https://fonts.bunny.net/css?family=fira-code:400,500,600,700&display=swap");

package/packages/client/src/styles/generated/theme-palette.css

@@ -1,5 +1,5 @@
 /* Generated by packages/theme-engine/scripts/generate-default-css.mjs. */
-/* Theme df3d56b092a0a62a; CSS 88a6d9cece077ad3. */
+/* Theme 4c13b5894d8c7c6a; CSS c3362e588265232d. */
 @theme {
   --color-canvas: transparent;
   --color-accent-1: transparent;
@@ -334,30 +334,30 @@
   --radius-full: 9999px;
   --radius-circle: 50%;
   --spacing-0: 0px;
-  --spacing-0\.5: 2px;
   --spacing-1: 4px;
-  --spacing-1\.5: 6px;
   --spacing-2: 8px;
-  --spacing-2\.5: 10px;
   --spacing-3: 12px;
-  --spacing-3\.5: 14px;
   --spacing-4: 16px;
-  --spacing-4\.5: clamp(18px, calc(17.8571px + 0.0446vw), 18.5px);
   --spacing-5: clamp(20px, calc(19.7143px + 0.0893vw), 21px);
-  --spacing-5\.5: clamp(22px, calc(21.5714px + 0.1339vw), 23.5px);
   --spacing-6: clamp(24px, calc(23.4286px + 0.1786vw), 26px);
-  --spacing-6\.5: clamp(26px, calc(25.2857px + 0.2232vw), 28.5px);
   --spacing-7: clamp(28px, calc(27.1429px + 0.2679vw), 31px);
-  --spacing-7\.5: clamp(30px, calc(29px + 0.3125vw), 33.5px);
   --spacing-8: clamp(32px, calc(30.8571px + 0.3571vw), 36px);
-  --spacing-8\.5: clamp(34px, calc(32.7143px + 0.4018vw), 38.5px);
   --spacing-9: clamp(36px, calc(34.5714px + 0.4464vw), 41px);
-  --spacing-9\.5: clamp(38px, calc(36.4286px + 0.4911vw), 43.5px);
   --spacing-10: clamp(40px, calc(38.2857px + 0.5357vw), 46px);
-  --spacing-10\.5: clamp(42px, calc(40.1429px + 0.5804vw), 48.5px);
   --spacing-11: clamp(44px, calc(42px + 0.625vw), 51px);
-  --spacing-11\.5: clamp(46px, calc(43.8571px + 0.6696vw), 53.5px);
   --spacing-12: clamp(48px, calc(45.7143px + 0.7143vw), 56px);
+  --spacing-0\.5: 2px;
+  --spacing-1\.5: 6px;
+  --spacing-2\.5: 10px;
+  --spacing-3\.5: 14px;
+  --spacing-4\.5: clamp(18px, calc(17.8571px + 0.0446vw), 18.5px);
+  --spacing-5\.5: clamp(22px, calc(21.5714px + 0.1339vw), 23.5px);
+  --spacing-6\.5: clamp(26px, calc(25.2857px + 0.2232vw), 28.5px);
+  --spacing-7\.5: clamp(30px, calc(29px + 0.3125vw), 33.5px);
+  --spacing-8\.5: clamp(34px, calc(32.7143px + 0.4018vw), 38.5px);
+  --spacing-9\.5: clamp(38px, calc(36.4286px + 0.4911vw), 43.5px);
+  --spacing-10\.5: clamp(42px, calc(40.1429px + 0.5804vw), 48.5px);
+  --spacing-11\.5: clamp(46px, calc(43.8571px + 0.6696vw), 53.5px);
   --spacing-control-gap: var(--spacing-2);
   --spacing-control-padding-xs: var(--spacing-2);
   --spacing-control-padding-sm: var(--spacing-2);
@@ -382,107 +382,116 @@
   --spacing-sidebar-content-padding-block: var(--spacing-2);
   --font-mono: "Fira Code", ui-monospace, monospace;
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-body: var(--font-sans);
+  --font-heading: var(--font-sans);
+  --font-code: var(--font-mono);
+  --font-control: var(--font-sans);
+  --font-badge: var(--font-sans);
+  --font-label: var(--font-sans);
+  --font-description: var(--font-sans);
+  --font-metadata: var(--font-sans);
+  --font-menu-item: var(--font-sans);
   --text-1: 12px;
   --text-1--line-height: 16px;
   --text-1--letter-spacing: 0em;
-  --leading-type-1: var(--text-1--line-height);
-  --tracking-type-1: var(--text-1--letter-spacing);
-  --text-xs: var(--text-1);
-  --text-xs--line-height: var(--text-1--line-height);
-  --text-xs--letter-spacing: var(--text-1--letter-spacing);
   --text-2: 14px;
   --text-2--line-height: 20px;
   --text-2--letter-spacing: 0em;
-  --leading-type-2: var(--text-2--line-height);
-  --tracking-type-2: var(--text-2--letter-spacing);
-  --text-sm: var(--text-2);
-  --text-sm--line-height: var(--text-2--line-height);
-  --text-sm--letter-spacing: var(--text-2--letter-spacing);
   --text-3: 16px;
   --text-3--line-height: 24px;
   --text-3--letter-spacing: 0em;
-  --leading-type-3: var(--text-3--line-height);
-  --tracking-type-3: var(--text-3--letter-spacing);
-  --text-base: var(--text-3);
-  --text-base--line-height: var(--text-3--line-height);
-  --text-base--letter-spacing: var(--text-3--letter-spacing);
   --text-4: 18px;
   --text-4--line-height: 26px;
   --text-4--letter-spacing: 0em;
-  --leading-type-4: var(--text-4--line-height);
-  --tracking-type-4: var(--text-4--letter-spacing);
-  --text-lg: var(--text-4);
-  --text-lg--line-height: var(--text-4--line-height);
-  --text-lg--letter-spacing: var(--text-4--letter-spacing);
   --text-5: 20px;
   --text-5--line-height: 28px;
   --text-5--letter-spacing: 0em;
-  --leading-type-5: var(--text-5--line-height);
-  --tracking-type-5: var(--text-5--letter-spacing);
-  --text-xl: var(--text-5);
-  --text-xl--line-height: var(--text-5--line-height);
-  --text-xl--letter-spacing: var(--text-5--letter-spacing);
   --text-6: 30px;
   --text-6--line-height: 38px;
   --text-6--letter-spacing: -0.01em;
-  --leading-type-6: var(--text-6--line-height);
-  --tracking-type-6: var(--text-6--letter-spacing);
-  --text-2xl: var(--text-6);
-  --text-2xl--line-height: var(--text-6--line-height);
-  --text-2xl--letter-spacing: var(--text-6--letter-spacing);
   --text-7: 36px;
   --text-7--line-height: 44px;
   --text-7--letter-spacing: -0.015em;
-  --leading-type-7: var(--text-7--line-height);
-  --tracking-type-7: var(--text-7--letter-spacing);
-  --text-3xl: var(--text-7);
-  --text-3xl--line-height: var(--text-7--line-height);
-  --text-3xl--letter-spacing: var(--text-7--letter-spacing);
   --text-8: 48px;
   --text-8--line-height: 56px;
   --text-8--letter-spacing: -0.02em;
-  --leading-type-8: var(--text-8--line-height);
-  --tracking-type-8: var(--text-8--letter-spacing);
-  --text-4xl: var(--text-8);
-  --text-4xl--line-height: var(--text-8--line-height);
-  --text-4xl--letter-spacing: var(--text-8--letter-spacing);
   --text-9: 60px;
   --text-9--line-height: 64px;
   --text-9--letter-spacing: -0.025em;
-  --leading-type-9: var(--text-9--line-height);
-  --tracking-type-9: var(--text-9--letter-spacing);
-  --text-5xl: var(--text-9);
-  --text-5xl--line-height: var(--text-9--line-height);
-  --text-5xl--letter-spacing: var(--text-9--letter-spacing);
   --text-10: 72px;
   --text-10--line-height: 76px;
   --text-10--letter-spacing: -0.03em;
-  --leading-type-10: var(--text-10--line-height);
-  --tracking-type-10: var(--text-10--letter-spacing);
-  --text-6xl: var(--text-10);
-  --text-6xl--line-height: var(--text-10--line-height);
-  --text-6xl--letter-spacing: var(--text-10--letter-spacing);
   --text-11: 84px;
   --text-11--line-height: 88px;
   --text-11--letter-spacing: -0.035em;
-  --leading-type-11: var(--text-11--line-height);
-  --tracking-type-11: var(--text-11--letter-spacing);
-  --text-7xl: var(--text-11);
-  --text-7xl--line-height: var(--text-11--line-height);
-  --text-7xl--letter-spacing: var(--text-11--letter-spacing);
   --text-12: 96px;
   --text-12--line-height: 100px;
   --text-12--letter-spacing: -0.04em;
-  --leading-type-12: var(--text-12--line-height);
-  --tracking-type-12: var(--text-12--letter-spacing);
-  --text-8xl: var(--text-12);
-  --text-8xl--line-height: var(--text-12--line-height);
-  --text-8xl--letter-spacing: var(--text-12--letter-spacing);
   --text-13: 128px;
   --text-13--line-height: 132px;
   --text-13--letter-spacing: -0.045em;
+  --leading-type-1: var(--text-1--line-height);
+  --leading-type-2: var(--text-2--line-height);
+  --leading-type-3: var(--text-3--line-height);
+  --leading-type-4: var(--text-4--line-height);
+  --leading-type-5: var(--text-5--line-height);
+  --leading-type-6: var(--text-6--line-height);
+  --leading-type-7: var(--text-7--line-height);
+  --leading-type-8: var(--text-8--line-height);
+  --leading-type-9: var(--text-9--line-height);
+  --leading-type-10: var(--text-10--line-height);
+  --leading-type-11: var(--text-11--line-height);
+  --leading-type-12: var(--text-12--line-height);
   --leading-type-13: var(--text-13--line-height);
+  --tracking-type-1: var(--text-1--letter-spacing);
+  --tracking-type-2: var(--text-2--letter-spacing);
+  --tracking-type-3: var(--text-3--letter-spacing);
+  --tracking-type-4: var(--text-4--letter-spacing);
+  --tracking-type-5: var(--text-5--letter-spacing);
+  --tracking-type-6: var(--text-6--letter-spacing);
+  --tracking-type-7: var(--text-7--letter-spacing);
+  --tracking-type-8: var(--text-8--letter-spacing);
+  --tracking-type-9: var(--text-9--letter-spacing);
+  --tracking-type-10: var(--text-10--letter-spacing);
+  --tracking-type-11: var(--text-11--letter-spacing);
+  --tracking-type-12: var(--text-12--letter-spacing);
   --tracking-type-13: var(--text-13--letter-spacing);
+  --text-xs: var(--text-1);
+  --text-xs--line-height: var(--text-1--line-height);
+  --text-xs--letter-spacing: var(--text-1--letter-spacing);
+  --text-sm: var(--text-2);
+  --text-sm--line-height: var(--text-2--line-height);
+  --text-sm--letter-spacing: var(--text-2--letter-spacing);
+  --text-base: var(--text-3);
+  --text-base--line-height: var(--text-3--line-height);
+  --text-base--letter-spacing: var(--text-3--letter-spacing);
+  --text-lg: var(--text-4);
+  --text-lg--line-height: var(--text-4--line-height);
+  --text-lg--letter-spacing: var(--text-4--letter-spacing);
+  --text-xl: var(--text-5);
+  --text-xl--line-height: var(--text-5--line-height);
+  --text-xl--letter-spacing: var(--text-5--letter-spacing);
+  --text-2xl: var(--text-6);
+  --text-2xl--line-height: var(--text-6--line-height);
+  --text-2xl--letter-spacing: var(--text-6--letter-spacing);
+  --text-3xl: var(--text-7);
+  --text-3xl--line-height: var(--text-7--line-height);
+  --text-3xl--letter-spacing: var(--text-7--letter-spacing);
+  --text-4xl: var(--text-8);
+  --text-4xl--line-height: var(--text-8--line-height);
+  --text-4xl--letter-spacing: var(--text-8--letter-spacing);
+  --text-5xl: var(--text-9);
+  --text-5xl--line-height: var(--text-9--line-height);
+  --text-5xl--letter-spacing: var(--text-9--letter-spacing);
+  --text-6xl: var(--text-10);
+  --text-6xl--line-height: var(--text-10--line-height);
+  --text-6xl--letter-spacing: var(--text-10--letter-spacing);
+  --text-7xl: var(--text-11);
+  --text-7xl--line-height: var(--text-11--line-height);
+  --text-7xl--letter-spacing: var(--text-11--letter-spacing);
+  --text-8xl: var(--text-12);
+  --text-8xl--line-height: var(--text-12--line-height);
+  --text-8xl--letter-spacing: var(--text-12--letter-spacing);
   --text-9xl: var(--text-13);
   --text-9xl--line-height: var(--text-13--line-height);
   --text-9xl--letter-spacing: var(--text-13--letter-spacing);
@@ -490,84 +499,75 @@
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
+  --font-weight-body: var(--font-weight-normal);
+  --font-weight-heading: var(--font-weight-medium);
+  --font-weight-code: var(--font-weight-normal);
+  --font-weight-control-xs: var(--font-weight-normal);
+  --font-weight-control-sm: var(--font-weight-normal);
+  --font-weight-control-md: var(--font-weight-normal);
+  --font-weight-control-lg: var(--font-weight-normal);
+  --font-weight-control-xlg: var(--font-weight-normal);
+  --font-weight-badge-xs: var(--font-weight-medium);
+  --font-weight-badge-sm: var(--font-weight-medium);
+  --font-weight-badge-md: var(--font-weight-medium);
+  --font-weight-badge-lg: var(--font-weight-medium);
+  --font-weight-badge-xlg: var(--font-weight-medium);
+  --font-weight-label: var(--font-weight-normal);
+  --font-weight-description: var(--font-weight-normal);
+  --font-weight-metadata: var(--font-weight-normal);
+  --font-weight-menu-item: var(--font-weight-normal);
   --label-ink-emphasis: 35%;
   --text-body: var(--text-2);
   --text-body--line-height: var(--text-2--line-height);
   --text-body--letter-spacing: var(--text-2--letter-spacing);
-  --font-body: var(--font-sans);
-  --font-weight-body: var(--font-weight-normal);
   --text-heading: var(--text-2);
   --text-heading--line-height: var(--text-2--line-height);
   --text-heading--letter-spacing: var(--text-2--letter-spacing);
-  --font-heading: var(--font-sans);
-  --font-weight-heading: var(--font-weight-medium);
   --text-code: var(--text-2);
   --text-code--line-height: var(--text-2--line-height);
   --text-code--letter-spacing: var(--text-2--letter-spacing);
-  --font-code: var(--font-mono);
-  --font-weight-code: var(--font-weight-normal);
   --text-control-xs: var(--text-1);
   --text-control-xs--line-height: var(--text-1--line-height);
   --text-control-xs--letter-spacing: var(--text-1--letter-spacing);
-  --font-control: var(--font-sans);
-  --font-weight-control-xs: var(--font-weight-normal);
   --text-control-sm: var(--text-1);
   --text-control-sm--line-height: var(--text-1--line-height);
   --text-control-sm--letter-spacing: var(--text-1--letter-spacing);
-  --font-weight-control-sm: var(--font-weight-normal);
   --text-control-md: var(--text-2);
   --text-control-md--line-height: var(--text-2--line-height);
   --text-control-md--letter-spacing: var(--text-2--letter-spacing);
-  --font-weight-control-md: var(--font-weight-normal);
   --text-control-lg: var(--text-2);
   --text-control-lg--line-height: var(--text-2--line-height);
   --text-control-lg--letter-spacing: var(--text-2--letter-spacing);
-  --font-weight-control-lg: var(--font-weight-normal);
   --text-control-xlg: var(--text-2);
   --text-control-xlg--line-height: var(--text-2--line-height);
   --text-control-xlg--letter-spacing: var(--text-2--letter-spacing);
-  --font-weight-control-xlg: var(--font-weight-normal);
   --text-badge-xs: var(--text-1);
   --text-badge-xs--line-height: var(--text-1--line-height);
   --text-badge-xs--letter-spacing: var(--text-1--letter-spacing);
-  --font-badge: var(--font-sans);
-  --font-weight-badge-xs: var(--font-weight-medium);
   --text-badge-sm: var(--text-1);
   --text-badge-sm--line-height: var(--text-1--line-height);
   --text-badge-sm--letter-spacing: var(--text-1--letter-spacing);
-  --font-weight-badge-sm: var(--font-weight-medium);
   --text-badge-md: var(--text-2);
   --text-badge-md--line-height: var(--text-2--line-height);
   --text-badge-md--letter-spacing: var(--text-2--letter-spacing);
-  --font-weight-badge-md: var(--font-weight-medium);
   --text-badge-lg: var(--text-2);
   --text-badge-lg--line-height: var(--text-2--line-height);
   --text-badge-lg--letter-spacing: var(--text-2--letter-spacing);
-  --font-weight-badge-lg: var(--font-weight-medium);
   --text-badge-xlg: var(--text-2);
   --text-badge-xlg--line-height: var(--text-2--line-height);
   --text-badge-xlg--letter-spacing: var(--text-2--letter-spacing);
-  --font-weight-badge-xlg: var(--font-weight-medium);
   --text-label: var(--text-2);
   --text-label--line-height: var(--text-2--line-height);
   --text-label--letter-spacing: var(--text-2--letter-spacing);
-  --font-label: var(--font-sans);
-  --font-weight-label: var(--font-weight-normal);
   --text-description: var(--text-2);
   --text-description--line-height: var(--text-2--line-height);
   --text-description--letter-spacing: var(--text-2--letter-spacing);
-  --font-description: var(--font-sans);
-  --font-weight-description: var(--font-weight-normal);
   --text-metadata: var(--text-1);
   --text-metadata--line-height: var(--text-1--line-height);
   --text-metadata--letter-spacing: var(--text-1--letter-spacing);
-  --font-metadata: var(--font-sans);
-  --font-weight-metadata: var(--font-weight-normal);
   --text-menu-item: var(--text-2);
   --text-menu-item--line-height: var(--text-2--line-height);
   --text-menu-item--letter-spacing: var(--text-2--letter-spacing);
-  --font-menu-item: var(--font-sans);
-  --font-weight-menu-item: var(--font-weight-normal);
   --spacing-control-xs: 20px;
   --spacing-control-sm: 24px;
   --spacing-control-md: 28px;