twd-js 1.3.4 → 1.4.0

package/dist/index.d.ts

@@ -53,6 +53,8 @@ declare type AssertionName = "have.text" | "contain.text" | "be.empty" | "have.a
 
 export declare const configureScreenDom: typeof configure;
 
+export declare const defaultTheme: TWDTheme;
+
 export { expect }
 
 /**
@@ -60,18 +62,28 @@ export { expect }
  * @param testModules - The test modules to load.
  * @param component - The React component to render the sidebar.
  * @param createRoot - Function to create a React root.
+ * @param theme - Optional theme customization
  * @example
  * ```ts
  * if (import.meta.env.DEV) {
  *   const testModules = import.meta.glob("./example.twd.test.ts");
  *   const { initTests, TWDSidebar } = await import('twd-js');
- *   await initTests(testModules, <TWDSidebar open={true} position="left" />, createRoot);
+ *   await initTests(testModules, <TWDSidebar open={true} position="left" />, createRoot, {
+ *     primary: '#ff0000',
+ *     background: '#ffffff'
+ *   });
  * }
  * ```
  */
 export declare const initTests: (testModules: TestModule, Component: React.ReactNode, createRoot: (el: HTMLElement) => {
     render: (el: React.ReactNode) => void;
-}) => Promise<void>;
+}, theme?: Partial<TWDTheme>) => Promise<void>;
+
+/**
+ * Injects theme CSS variables into the document
+ * This should be called once when the sidebar is initialized
+ */
+export declare function injectTheme(theme?: Partial<TWDTheme>): void;
 
 /**
  * Negatable assertion names (e.g., 'not.have.text').
@@ -448,6 +460,68 @@ declare interface TWDSidebarProps {
     position?: "left" | "right";
 }
 
+/**
+ * TWD Theme Configuration
+ *
+ * This file defines CSS variables that can be customized by users
+ * to personalize their TWD UI experience.
+ *
+ * Users can override these variables by setting them in their CSS:
+ *
+ * ```css
+ * :root {
+ *   --twd-primary: #3b82f6;
+ *   --twd-background: #1e293b;
+ *    ... other variables
+ * }
+ *
+ */
+export declare interface TWDTheme {
+    primary: string;
+    background: string;
+    backgroundSecondary: string;
+    border: string;
+    borderLight: string;
+    text: string;
+    textSecondary: string;
+    textMuted: string;
+    success: string;
+    successBg: string;
+    error: string;
+    errorBg: string;
+    warning: string;
+    warningBg: string;
+    skip: string;
+    skipBg: string;
+    buttonPrimary: string;
+    buttonPrimaryText: string;
+    buttonSecondary: string;
+    buttonSecondaryText: string;
+    buttonBorder: string;
+    spacingXs: string;
+    spacingSm: string;
+    spacingMd: string;
+    spacingLg: string;
+    spacingXl: string;
+    fontSizeXs: string;
+    fontSizeSm: string;
+    fontSizeMd: string;
+    fontSizeLg: string;
+    fontWeightNormal: string;
+    fontWeightMedium: string;
+    fontWeightBold: string;
+    sidebarWidth: string;
+    borderRadius: string;
+    borderRadiusLg: string;
+    shadow: string;
+    shadowSm: string;
+    zIndexSidebar: string;
+    zIndexSticky: string;
+    animationDuration: string;
+    iconColor: string;
+    iconColorSecondary: string;
+}
+
 /**
  * All supported assertion names for the `should` function in url command
  *