entangle-ui 0.6.3 → 0.8.0

package/dist/types/theme/contract.css.d.ts

@@ -14,148 +14,155 @@
  * All property names follow the pattern: etui-{category}-{path}
  * These names are part of the PUBLIC API — do not rename without
  * a major version bump.
+ *
+ * The structural data lives in `themeContractData.ts` so build-time
+ * tooling (token export, docs) can import the same shape without
+ * pulling in the Vanilla Extract runtime.
  */
 declare const vars: {
-    colors: {
-        background: {
-            primary: `var(--${string})`;
-            secondary: `var(--${string})`;
-            tertiary: `var(--${string})`;
-            elevated: `var(--${string})`;
+    readonly colors: {
+        readonly background: {
+            readonly primary: `var(--${string})`;
+            readonly secondary: `var(--${string})`;
+            readonly tertiary: `var(--${string})`;
+            readonly elevated: `var(--${string})`;
+            readonly inset: `var(--${string})`;
         };
-        surface: {
-            default: `var(--${string})`;
-            hover: `var(--${string})`;
-            active: `var(--${string})`;
-            disabled: `var(--${string})`;
-            whiteOverlay: `var(--${string})`;
+        readonly surface: {
+            readonly default: `var(--${string})`;
+            readonly hover: `var(--${string})`;
+            readonly active: `var(--${string})`;
+            readonly disabled: `var(--${string})`;
+            readonly whiteOverlay: `var(--${string})`;
+            readonly row: `var(--${string})`;
+            readonly rowHover: `var(--${string})`;
         };
-        border: {
-            default: `var(--${string})`;
-            focus: `var(--${string})`;
-            error: `var(--${string})`;
-            success: `var(--${string})`;
+        readonly border: {
+            readonly default: `var(--${string})`;
+            readonly focus: `var(--${string})`;
+            readonly error: `var(--${string})`;
+            readonly success: `var(--${string})`;
         };
-        text: {
-            primary: `var(--${string})`;
-            secondary: `var(--${string})`;
-            muted: `var(--${string})`;
-            disabled: `var(--${string})`;
+        readonly text: {
+            readonly primary: `var(--${string})`;
+            readonly secondary: `var(--${string})`;
+            readonly muted: `var(--${string})`;
+            readonly disabled: `var(--${string})`;
         };
-        accent: {
-            primary: `var(--${string})`;
-            secondary: `var(--${string})`;
-            success: `var(--${string})`;
-            warning: `var(--${string})`;
-            error: `var(--${string})`;
+        readonly accent: {
+            readonly primary: `var(--${string})`;
+            readonly secondary: `var(--${string})`;
+            readonly success: `var(--${string})`;
+            readonly warning: `var(--${string})`;
+            readonly error: `var(--${string})`;
         };
-        backdrop: `var(--${string})`;
+        readonly backdrop: `var(--${string})`;
     };
-    spacing: {
-        xs: `var(--${string})`;
-        sm: `var(--${string})`;
-        md: `var(--${string})`;
-        lg: `var(--${string})`;
-        xl: `var(--${string})`;
-        xxl: `var(--${string})`;
-        xxxl: `var(--${string})`;
+    readonly spacing: {
+        readonly xs: `var(--${string})`;
+        readonly sm: `var(--${string})`;
+        readonly md: `var(--${string})`;
+        readonly lg: `var(--${string})`;
+        readonly xl: `var(--${string})`;
+        readonly xxl: `var(--${string})`;
+        readonly xxxl: `var(--${string})`;
     };
-    typography: {
-        fontSize: {
-            xxs: `var(--${string})`;
-            xs: `var(--${string})`;
-            sm: `var(--${string})`;
-            md: `var(--${string})`;
-            lg: `var(--${string})`;
-            xl: `var(--${string})`;
+    readonly typography: {
+        readonly fontSize: {
+            readonly xxs: `var(--${string})`;
+            readonly xs: `var(--${string})`;
+            readonly sm: `var(--${string})`;
+            readonly md: `var(--${string})`;
+            readonly lg: `var(--${string})`;
+            readonly xl: `var(--${string})`;
         };
-        fontWeight: {
-            normal: `var(--${string})`;
-            medium: `var(--${string})`;
-            semibold: `var(--${string})`;
+        readonly fontWeight: {
+            readonly normal: `var(--${string})`;
+            readonly medium: `var(--${string})`;
+            readonly semibold: `var(--${string})`;
         };
-        lineHeight: {
-            tight: `var(--${string})`;
-            normal: `var(--${string})`;
-            relaxed: `var(--${string})`;
+        readonly lineHeight: {
+            readonly tight: `var(--${string})`;
+            readonly normal: `var(--${string})`;
+            readonly relaxed: `var(--${string})`;
         };
-        fontFamily: {
-            mono: `var(--${string})`;
-            sans: `var(--${string})`;
+        readonly fontFamily: {
+            readonly mono: `var(--${string})`;
+            readonly sans: `var(--${string})`;
         };
     };
-    borderRadius: {
-        none: `var(--${string})`;
-        sm: `var(--${string})`;
-        md: `var(--${string})`;
-        lg: `var(--${string})`;
+    readonly borderRadius: {
+        readonly none: `var(--${string})`;
+        readonly sm: `var(--${string})`;
+        readonly md: `var(--${string})`;
+        readonly lg: `var(--${string})`;
     };
-    shadows: {
-        sm: `var(--${string})`;
-        md: `var(--${string})`;
-        lg: `var(--${string})`;
-        xl: `var(--${string})`;
-        focus: `var(--${string})`;
-        separatorBottom: `var(--${string})`;
-        separatorRight: `var(--${string})`;
-        separatorLeft: `var(--${string})`;
-        thumb: `var(--${string})`;
+    readonly shadows: {
+        readonly sm: `var(--${string})`;
+        readonly md: `var(--${string})`;
+        readonly lg: `var(--${string})`;
+        readonly xl: `var(--${string})`;
+        readonly focus: `var(--${string})`;
+        readonly separatorBottom: `var(--${string})`;
+        readonly separatorRight: `var(--${string})`;
+        readonly separatorLeft: `var(--${string})`;
+        readonly thumb: `var(--${string})`;
     };
-    transitions: {
-        fast: `var(--${string})`;
-        normal: `var(--${string})`;
-        slow: `var(--${string})`;
+    readonly transitions: {
+        readonly fast: `var(--${string})`;
+        readonly normal: `var(--${string})`;
+        readonly slow: `var(--${string})`;
     };
-    zIndex: {
-        base: `var(--${string})`;
-        dropdown: `var(--${string})`;
-        popover: `var(--${string})`;
-        tooltip: `var(--${string})`;
-        modal: `var(--${string})`;
+    readonly zIndex: {
+        readonly base: `var(--${string})`;
+        readonly dropdown: `var(--${string})`;
+        readonly popover: `var(--${string})`;
+        readonly tooltip: `var(--${string})`;
+        readonly modal: `var(--${string})`;
     };
-    shell: {
-        menuBar: {
-            height: `var(--${string})`;
-            bg: `var(--${string})`;
-            hoverBg: `var(--${string})`;
-            activeBg: `var(--${string})`;
-            text: `var(--${string})`;
-            shortcutText: `var(--${string})`;
+    readonly shell: {
+        readonly menuBar: {
+            readonly height: `var(--${string})`;
+            readonly bg: `var(--${string})`;
+            readonly hoverBg: `var(--${string})`;
+            readonly activeBg: `var(--${string})`;
+            readonly text: `var(--${string})`;
+            readonly shortcutText: `var(--${string})`;
         };
-        toolbar: {
-            height: {
-                sm: `var(--${string})`;
-                md: `var(--${string})`;
+        readonly toolbar: {
+            readonly height: {
+                readonly sm: `var(--${string})`;
+                readonly md: `var(--${string})`;
             };
-            bg: `var(--${string})`;
-            separator: `var(--${string})`;
+            readonly bg: `var(--${string})`;
+            readonly separator: `var(--${string})`;
         };
-        statusBar: {
-            height: `var(--${string})`;
-            heightMd: `var(--${string})`;
-            bg: `var(--${string})`;
-            text: `var(--${string})`;
+        readonly statusBar: {
+            readonly height: `var(--${string})`;
+            readonly heightMd: `var(--${string})`;
+            readonly bg: `var(--${string})`;
+            readonly text: `var(--${string})`;
         };
-        dock: {
-            tabHeight: `var(--${string})`;
-            tabBg: `var(--${string})`;
-            tabActiveBg: `var(--${string})`;
-            tabHoverBg: `var(--${string})`;
-            tabText: `var(--${string})`;
-            tabActiveText: `var(--${string})`;
-            splitterSize: `var(--${string})`;
-            splitterColor: `var(--${string})`;
-            splitterHoverColor: `var(--${string})`;
-            borderBarBg: `var(--${string})`;
-            borderBarSize: `var(--${string})`;
-            dropOverlay: `var(--${string})`;
+        readonly dock: {
+            readonly tabHeight: `var(--${string})`;
+            readonly tabBg: `var(--${string})`;
+            readonly tabActiveBg: `var(--${string})`;
+            readonly tabHoverBg: `var(--${string})`;
+            readonly tabText: `var(--${string})`;
+            readonly tabActiveText: `var(--${string})`;
+            readonly splitterSize: `var(--${string})`;
+            readonly splitterColor: `var(--${string})`;
+            readonly splitterHoverColor: `var(--${string})`;
+            readonly borderBarBg: `var(--${string})`;
+            readonly borderBarSize: `var(--${string})`;
+            readonly dropOverlay: `var(--${string})`;
         };
     };
-    storybook: {
-        canvas: {
-            gradientStart: `var(--${string})`;
-            gradientMid: `var(--${string})`;
-            gradientEnd: `var(--${string})`;
+    readonly storybook: {
+        readonly canvas: {
+            readonly gradientStart: `var(--${string})`;
+            readonly gradientMid: `var(--${string})`;
+            readonly gradientEnd: `var(--${string})`;
         };
     };
 };

package/dist/types/theme/createCustomTheme.d.ts

@@ -1,5 +1,5 @@
 import { DeepPartial } from '../types/utilities.js';
-import { DarkThemeValues } from './darkTheme.css.js';
+import { DarkThemeValues } from './darkThemeValues.js';
 
 type ThemeValues = DarkThemeValues;
 /**

package/dist/types/theme/createLightTheme.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Returns the light-theme CSS class. Apply the returned class to any
+ * subtree (typically via `VanillaThemeProvider`) to flip its tokens
+ * from the dark default to the light preset.
+ *
+ * The class is generated at build time inside `lightTheme.css.ts` (where
+ * Vanilla Extract's file scope is set), so this helper is safe to call
+ * from any `.ts`/`.tsx` file — no `.css.ts` wrapper required. Consumers
+ * who prefer can also import `lightThemeClass` directly from the package.
+ *
+ * @example
+ * ```tsx
+ * import { createLightTheme, VanillaThemeProvider } from 'entangle-ui';
+ *
+ * const lightThemeClass = createLightTheme();
+ *
+ * <VanillaThemeProvider className={lightThemeClass}>
+ *   <SettingsPanel />
+ * </VanillaThemeProvider>
+ * ```
+ */
+declare function createLightTheme(): string;
+
+export { createLightTheme };

package/dist/types/theme/{darkTheme.css.d.ts → darkThemeValues.d.ts}

@@ -1,6 +1,10 @@
 /**
- * Dark theme values — exported separately so the createCustomTheme helper
- * can deep-merge consumer overrides onto these defaults.
+ * Dark theme values — pure data, no `@vanilla-extract/css` calls.
+ *
+ * Lives in a plain `.ts` module so build-time tooling (token export,
+ * docs generation) can import the values without booting the Vanilla
+ * Extract runtime. `darkTheme.css.ts` re-exports this object and is
+ * the file that actually applies the values to `:root`.
  */
 declare const darkThemeValues: {
     readonly colors: {
@@ -9,6 +13,7 @@ declare const darkThemeValues: {
             readonly secondary: "#2d2d2d";
             readonly tertiary: "#3a3a3a";
             readonly elevated: "#404040";
+            readonly inset: "rgba(0, 0, 0, 0.2)";
         };
         readonly surface: {
             readonly default: "#2d2d2d";
@@ -16,6 +21,8 @@ declare const darkThemeValues: {
             readonly active: "#404040";
             readonly disabled: "#1f1f1f";
             readonly whiteOverlay: "rgba(255, 255, 255, 0.1)";
+            readonly row: "transparent";
+            readonly rowHover: "rgba(255, 255, 255, 0.03)";
         };
         readonly border: {
             readonly default: "#4a4a4a";

package/dist/types/theme/globalScrollbars.css.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Global scrollbar theming (opt-in).
+ *
+ * Emits scrollbar styling rules scoped under the `.etuiGlobalScrollbars`
+ * class. `ThemeProvider` (or consumers manually) can add this class to
+ * `document.body` via the `globalScrollbars` prop so that native
+ * scrollbars on overflowing elements blend with the dark editor theme.
+ *
+ * Scoped to a class (rather than `html`/`body`) so the default build
+ * of Entangle UI never forces scrollbar styling on hosts that embed
+ * the library alongside other UI frameworks.
+ */
+declare const GLOBAL_SCROLLBARS_CLASS = "etuiGlobalScrollbars";
+
+export { GLOBAL_SCROLLBARS_CLASS };

package/dist/types/theme/index.d.ts

@@ -0,0 +1,9 @@
+export { ThemeVars, vars } from './contract.css.js';
+export { DarkThemeValues, darkThemeValues } from './darkThemeValues.js';
+export { LightThemeValues, lightThemeValues } from './lightThemeValues.js';
+export { lightThemeClass } from './lightTheme.css.js';
+export { ThemeValues, createCustomTheme } from './createCustomTheme.js';
+export { createLightTheme } from './createLightTheme.js';
+export { VanillaThemeProvider, VanillaThemeProviderProps } from './VanillaThemeProvider.js';
+export { ThemeProvider, ThemeProviderProps } from './ThemeProvider.js';
+export { GLOBAL_SCROLLBARS_CLASS } from './globalScrollbars.css.js';

package/dist/types/theme/lightTheme.css.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Pre-generated light-theme class. The class is created at build time in
+ * this `.css.ts` module so Vanilla Extract's file scope is always set —
+ * importing or calling `createLightTheme()` from a regular `.ts` file
+ * is therefore safe. Apply this class to any subtree (typically via
+ * `VanillaThemeProvider`) to flip its tokens from the dark default to
+ * the light preset.
+ *
+ * The values themselves live in `lightThemeValues.ts` (a plain `.ts`
+ * module) so build-time tooling can import them without the Vanilla
+ * Extract runtime. We re-export both the value and the type here so
+ * existing `import ... from './lightTheme.css'` consumers keep working.
+ */
+
+declare const lightThemeClass: string;
+
+export { lightThemeClass };

package/dist/types/theme/lightThemeValues.d.ts

@@ -0,0 +1,168 @@
+/**
+ * Light theme values — pure data, no `@vanilla-extract/css` calls.
+ *
+ * Mirrors `darkThemeValues` shape exactly so `createCustomTheme` and
+ * `createLightTheme` can share the merge helper and so `LightThemeValues`
+ * stays structurally compatible with `DarkThemeValues`.
+ *
+ * Lives in a plain `.ts` module so build-time tooling (token export,
+ * docs generation) can import the values without booting the Vanilla
+ * Extract runtime. `lightTheme.css.ts` re-exports this object and is
+ * the file that actually creates the scoped theme class.
+ *
+ * Note on `colors.surface.whiteOverlay`: the token name is kept for
+ * contract compatibility, but in light mode it flips polarity to a
+ * subtle dark overlay (`rgba(0, 0, 0, 0.06)`) so it still reads as a
+ * "subtle tint over the underlying surface".
+ */
+declare const lightThemeValues: {
+    readonly colors: {
+        readonly background: {
+            readonly primary: "#ffffff";
+            readonly secondary: "#f5f5f7";
+            readonly tertiary: "#ebebee";
+            readonly elevated: "#ffffff";
+            readonly inset: "#f8f8fa";
+        };
+        readonly surface: {
+            readonly default: "#ffffff";
+            readonly hover: "#f0f0f3";
+            readonly active: "#e6e6ea";
+            readonly disabled: "#f5f5f7";
+            readonly whiteOverlay: "rgba(0, 0, 0, 0.06)";
+            readonly row: "#ffffff";
+            readonly rowHover: "#f5f5f7";
+        };
+        readonly border: {
+            readonly default: "#e0e0e3";
+            readonly focus: "#0066cc";
+            readonly error: "#d32f2f";
+            readonly success: "#2e7d32";
+        };
+        readonly text: {
+            readonly primary: "#1a1a1a";
+            readonly secondary: "#4a4a4a";
+            readonly muted: "#6b6b6b";
+            readonly disabled: "#b0b0b0";
+        };
+        readonly accent: {
+            readonly primary: "#0066cc";
+            readonly secondary: "#004a99";
+            readonly success: "#2e7d32";
+            readonly warning: "#a64500";
+            readonly error: "#d32f2f";
+        };
+        readonly backdrop: "rgba(0, 0, 0, 0.4)";
+    };
+    readonly spacing: {
+        readonly xs: "2px";
+        readonly sm: "4px";
+        readonly md: "8px";
+        readonly lg: "12px";
+        readonly xl: "16px";
+        readonly xxl: "24px";
+        readonly xxxl: "32px";
+    };
+    readonly typography: {
+        readonly fontSize: {
+            readonly xxs: "9px";
+            readonly xs: "10px";
+            readonly sm: "11px";
+            readonly md: "12px";
+            readonly lg: "14px";
+            readonly xl: "16px";
+        };
+        readonly fontWeight: {
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+        };
+        readonly lineHeight: {
+            readonly tight: "1.2";
+            readonly normal: "1.4";
+            readonly relaxed: "1.6";
+        };
+        readonly fontFamily: {
+            readonly mono: "SF Mono, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+            readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+        };
+    };
+    readonly borderRadius: {
+        readonly none: "0px";
+        readonly sm: "2px";
+        readonly md: "4px";
+        readonly lg: "6px";
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.06)";
+        readonly md: "0 2px 4px rgba(0, 0, 0, 0.08)";
+        readonly lg: "0 4px 12px rgba(0, 0, 0, 0.10)";
+        readonly xl: "0 8px 24px rgba(0, 0, 0, 0.12)";
+        readonly focus: "0 0 0 2px rgba(0, 102, 204, 0.3)";
+        readonly separatorBottom: "0 1px 2px rgba(0, 0, 0, 0.04)";
+        readonly separatorRight: "1px 0 2px rgba(0, 0, 0, 0.04)";
+        readonly separatorLeft: "-1px 0 2px rgba(0, 0, 0, 0.04)";
+        readonly thumb: "0 0 2px rgba(0, 0, 0, 0.15)";
+    };
+    readonly transitions: {
+        readonly fast: "100ms ease-out";
+        readonly normal: "200ms ease-out";
+        readonly slow: "300ms ease-out";
+    };
+    readonly zIndex: {
+        readonly base: "1";
+        readonly dropdown: "1000";
+        readonly popover: "1000";
+        readonly tooltip: "1000";
+        readonly modal: "1100";
+    };
+    readonly shell: {
+        readonly menuBar: {
+            readonly height: "28px";
+            readonly bg: "#f5f5f7";
+            readonly hoverBg: "#ebebee";
+            readonly activeBg: "#0066cc";
+            readonly text: "#1a1a1a";
+            readonly shortcutText: "#6b6b6b";
+        };
+        readonly toolbar: {
+            readonly height: {
+                readonly sm: "32px";
+                readonly md: "40px";
+            };
+            readonly bg: "#f5f5f7";
+            readonly separator: "#e0e0e3";
+        };
+        readonly statusBar: {
+            readonly height: "22px";
+            readonly heightMd: "26px";
+            readonly bg: "#0066cc";
+            readonly text: "#ffffff";
+        };
+        readonly dock: {
+            readonly tabHeight: "28px";
+            readonly tabBg: "#f5f5f7";
+            readonly tabActiveBg: "#ffffff";
+            readonly tabHoverBg: "#ebebee";
+            readonly tabText: "#4a4a4a";
+            readonly tabActiveText: "#1a1a1a";
+            readonly splitterSize: "4px";
+            readonly splitterColor: "#e0e0e3";
+            readonly splitterHoverColor: "#0066cc";
+            readonly borderBarBg: "#f5f5f7";
+            readonly borderBarSize: "28px";
+            readonly dropOverlay: "rgba(0, 102, 204, 0.15)";
+        };
+    };
+    readonly storybook: {
+        readonly canvas: {
+            readonly gradientStart: "#fafafa";
+            readonly gradientMid: "#f0f0f3";
+            readonly gradientEnd: "#ebebee";
+        };
+    };
+};
+type LightThemeValues = typeof lightThemeValues;
+
+export { lightThemeValues };
+export type { LightThemeValues };