feat: add shared Toolbox header and themes

src/components/ActionDialog.tsx

@@ -21,18 +21,18 @@ const backgroundByVariant: Record<
   NonNullable<ActionDialogAction['variant']>,
   string
 > = {
-  primary: '#2563eb',
-  secondary: '#e5e7eb',
-  danger: '#dc2626',
+  primary: 'var(--pdf-primary)',
+  secondary: 'var(--pdf-control)',
+  danger: 'var(--pdf-danger-text)',
 };
 
 const colorByVariant: Record<
   NonNullable<ActionDialogAction['variant']>,
   string
 > = {
-  primary: 'white',
-  secondary: '#111827',
-  danger: 'white',
+  primary: 'var(--pdf-on-primary)',
+  secondary: 'var(--pdf-control-text)',
+  danger: 'var(--pdf-on-primary)',
 };
 
 const ActionDialog: React.FC<ActionDialogProps> = ({
@@ -75,7 +75,7 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
         position: 'fixed',
         inset: 0,
         zIndex: 70,
-        background: 'rgba(15, 23, 42, 0.55)',
+        background: 'var(--pdf-overlay)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -86,9 +86,10 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
         style={{
           width: '100%',
           maxWidth: '440px',
-          background: 'white',
+          background: 'var(--pdf-surface-raised)',
+          color: 'var(--pdf-text)',
           borderRadius: '0.75rem',
-          boxShadow: '0 20px 40px rgba(15, 23, 42, 0.35)',
+          boxShadow: 'var(--pdf-dialog-shadow)',
           padding: '1rem',
           display: 'flex',
           flexDirection: 'column',
@@ -121,8 +122,8 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
               borderRadius: '999px',
               width: '1.8rem',
               height: '1.8rem',
-              background: '#e5e7eb',
-              color: '#111827',
+              background: 'var(--pdf-control)',
+              color: 'var(--pdf-control-text)',
               cursor: 'pointer',
               fontSize: '1.1rem',
               lineHeight: 1,
@@ -139,7 +140,7 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
         <div
           style={{
             fontSize: '0.9rem',
-            color: '#4b5563',
+            color: 'var(--pdf-muted)',
             lineHeight: 1.45,
           }}
         >
@@ -173,9 +174,11 @@ const ActionDialog: React.FC<ActionDialogProps> = ({
                   borderRadius: '0.5rem',
                   padding: '0.45rem 0.8rem',
                   background: action.disabled
-                    ? '#e5e7eb'
+                    ? 'var(--pdf-control)'
                     : backgroundByVariant[variant],
-                  color: action.disabled ? '#6b7280' : colorByVariant[variant],
+                  color: action.disabled
+                    ? 'var(--pdf-muted-soft)'
+                    : colorByVariant[variant],
                   cursor: action.disabled ? 'default' : 'pointer',
                   fontSize: '0.9rem',
                 }}