feat: background color css

demo/src/App.css

@@ -438,4 +438,50 @@ header {
     .header-nav {
         gap: 1.5rem;
     }
+}
+
+/* ===========================================
+   eSign Component Customization Example
+   =========================================== */
+
+/*
+ * The eSign component exposes CSS classes that you can target directly.
+ * No special CSS variables needed - just write standard CSS!
+ *
+ * Available classes:
+ *   .superdoc-esign-container          - Root container (also accepts className prop)
+ *   .superdoc-esign-document           - Document section wrapper
+ *   .superdoc-esign-document-toolbar   - Toolbar with download button
+ *   .superdoc-esign-document-controls  - Control buttons container
+ *   .superdoc-esign-document-viewer    - Scroll container (SuperDoc mounts inside)
+ *   .superdoc-esign-controls           - Bottom section with fields + submit
+ *   .superdoc-esign-fields             - Signer fields container
+ *   .superdoc-esign-actions            - Action buttons container
+ *   .superdoc-esign-form-actions       - Form submit button container
+ */
+
+/* Example: Card-like styling */
+.superdoc-esign-container {
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.superdoc-esign-document-viewer {
+    background: #f9fafb;
+}
+
+.superdoc-esign-controls {
+    margin-top: 0; /* Remove gap between viewer and controls */
+    padding: 16px 20px;
+    background: #f9fafb;
+    border-top: 1px solid #e5e7eb;
+}
+
+.superdoc-esign-fields {
+    margin-bottom: 16px;
+}
+
+.superdoc-esign-actions {
+    gap: 12px;
 }

package.json

@@ -11,10 +11,12 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./styles.css": "./src/styles.css"
   },
   "files": [
     "dist",
+    "src/styles.css",
     "README.md"
   ],
   "scripts": {

src/index.tsx

@@ -129,7 +129,7 @@
         });
 
         const discovered: Types.FieldInfo[] = tags
           .map(({ node }: any) => ({
             id: node.attrs.id,
             label: node.attrs.label,
             value: configValues.get(node.attrs.id) ?? node.textContent ?? '',
@@ -162,7 +162,7 @@
         ...event,
         timestamp: new Date().toISOString(),
       };
       const auditMock = (globalThis as any)?.__SUPERDOC_AUDIT_MOCK__;
       if (auditMock) {
         auditMock(auditEvent);
       }
@@ -390,10 +390,7 @@
       const SubmitButton = submit?.component || createSubmitButton(submit);
 
       return (
-        <div
-          className="superdoc-esign-actions superdoc-esign-form-actions"
-          style={{ display: 'flex', gap: '10px' }}
-        >
+        <div className="superdoc-esign-actions superdoc-esign-form-actions">
           <SubmitButton
             onClick={handleSubmit}
             isValid={isValid}
@@ -427,27 +424,10 @@
     return (
       <div className={`superdoc-esign-container ${className || ''}`} style={style}>
         {/* Document viewer section */}
-        <div
-          className="superdoc-esign-document"
-          data-testid="superdoc-esign-document"
-          style={{ display: 'flex', flexDirection: 'column' }}
-        >
+        <div className="superdoc-esign-document" data-testid="superdoc-esign-document">
           {documentControls && (
-            <div
-              className="superdoc-esign-document-toolbar"
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-                alignItems: 'center',
-                padding: '8px 12px',
-              }}
-            >
-              <div
-                className="superdoc-esign-document-controls"
-                style={{ display: 'flex', gap: '8px' }}
-              >
-                {documentControls}
-              </div>
+            <div className="superdoc-esign-document-toolbar">
+              <div className="superdoc-esign-document-controls">{documentControls}</div>
             </div>
           )}
           <div
@@ -459,18 +439,10 @@
         </div>
 
         {/* Controls section - separate from document */}
-        <div
-          className="superdoc-esign-controls"
-          style={{ marginTop: '20px' }}
-          data-testid="superdoc-esign-controls"
-        >
+        <div className="superdoc-esign-controls" data-testid="superdoc-esign-controls">
           {/* Signer fields */}
           {fields.signer && fields.signer.length > 0 && (
-            <div
-              className="superdoc-esign-fields"
-              style={{ marginBottom: '20px' }}
-              data-testid="superdoc-esign-fields"
-            >
+            <div className="superdoc-esign-fields" data-testid="superdoc-esign-fields">
               {fields.signer.map(renderField)}
             </div>
           )}

src/styles.css

@@ -0,0 +1,51 @@
+/**
+ * SuperDoc eSign - Default Styles
+ *
+ * These styles provide sensible defaults for the eSign component.
+ * Import this file to get a basic layout, or skip it and write your own CSS.
+ *
+ * Usage:
+ *   import '@superdoc-dev/esign/styles.css';
+ *
+ * All classes can be customized with standard CSS:
+ *
+ *   .superdoc-esign-container          - Root container (also accepts className prop)
+ *   .superdoc-esign-document           - Document section wrapper
+ *   .superdoc-esign-document-toolbar   - Toolbar with download button
+ *   .superdoc-esign-document-controls  - Control buttons container
+ *   .superdoc-esign-document-viewer    - Scroll container (SuperDoc mounts inside)
+ *   .superdoc-esign-controls           - Bottom section with fields + submit
+ *   .superdoc-esign-fields             - Signer fields container
+ *   .superdoc-esign-actions            - Action buttons container
+ *   .superdoc-esign-form-actions       - Form submit button container (alias for actions)
+ */
+
+.superdoc-esign-document {
+  display: flex;
+  flex-direction: column;
+}
+
+.superdoc-esign-document-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px 12px;
+}
+
+.superdoc-esign-document-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.superdoc-esign-controls {
+  margin-top: 20px;
+}
+
+.superdoc-esign-fields {
+  margin-bottom: 20px;
+}
+
+.superdoc-esign-actions {
+  display: flex;
+  gap: 10px;
+}

vite.config.ts

@@ -3,25 +3,22 @@ import dts from 'vite-plugin-dts';
 import react from '@vitejs/plugin-react';
 
 export default defineConfig({
-    build: {
-        lib: {
-            entry: 'src/index.tsx',
-            formats: ['es', 'cjs'],
-            fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.js'),
-        },
-        rollupOptions: {
-            external: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'superdoc'],
-        },
+  build: {
+    lib: {
+      entry: 'src/index.tsx',
+      formats: ['es', 'cjs'],
+      fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.js'),
     },
-    plugins: [
-        react(),
-        dts()
-    ],
-    test: {
-        environment: 'jsdom',
-        setupFiles: ['./src/test/setup.ts'],
-        globals: true,
-        clearMocks: true,
-        restoreMocks: true
-    }
-});
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'superdoc'],
+    },
+  },
+  plugins: [react(), dts()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    globals: true,
+    clearMocks: true,
+    restoreMocks: true,
+  },
+});