fix: pass themeConfig to StatusBar in static embeds, use color names

- BuckarooStaticWidget now passes themeConfig to StatusBar so the
  status bar picks up the same theme as the main grid
- MultiIndex demo uses CSS color names instead of hex for readability

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: paddymul

docs/source/articles/theme-customization.rst

@@ -546,14 +546,14 @@ exactly what it controls:
 
     component_config = {'theme': {
         'colorScheme': 'dark',
-        'accentColor': '#ff00ff',          # purple — column selection highlight
-        'accentHoverColor': '#ff6600',     # orange — hover state
-        'backgroundColor': '#0000cc',      # blue — main table background
-        'foregroundColor': '#00ffcc',       # teal — text color
-        'oddRowBackgroundColor': '#cc0000', # red — alternating row stripe
-        'borderColor': '#ff69b4',          # pink — ALL grid borders
-        'headerBorderColor': '#00ff00',    # green — column header dividers only
-        'headerBackgroundColor': '#8b4513', # brown — header row background
+        'accentColor': 'purple',
+        'accentHoverColor': 'orange',
+        'backgroundColor': 'blue',
+        'foregroundColor': 'teal',
+        'oddRowBackgroundColor': 'red',
+        'borderColor': 'pink',
+        'headerBorderColor': 'green',
+        'headerBackgroundColor': 'brown',
     }}
 
 .. raw:: html

packages/buckaroo-js-core/src/components/BuckarooStaticTable.tsx

@@ -113,6 +113,7 @@ function BuckarooStaticWidget({
                     buckarooState={buckarooState}
                     setBuckarooState={setBuckarooState}
                     buckarooOptions={artifact.buckaroo_options!}
+                    themeConfig={cDisp.df_viewer_config?.component_config?.theme}
                 />
                 <DFViewerInfinite
                     data_wrapper={dataWrapper}

scripts/generate_theme_static_html.py

@@ -323,14 +323,14 @@ def themed_html(df, title, theme_config):
         "MultiIndex Headers",
         {
             "colorScheme": "dark",
-            "accentColor": "#ff00ff",  # purple/magenta — column selection
-            "accentHoverColor": "#ff6600",  # orange — hover state
-            "backgroundColor": "#0000cc",  # blue — main table background
-            "foregroundColor": "#00ffcc",  # teal — text color
-            "oddRowBackgroundColor": "#cc0000",  # red — alternating row stripe
-            "borderColor": "#ff69b4",  # pink — all grid borders
-            "headerBorderColor": "#00ff00",  # green — column header dividers
-            "headerBackgroundColor": "#8b4513",  # brown — header row background
+            "accentColor": "purple",
+            "accentHoverColor": "orange",
+            "backgroundColor": "blue",
+            "foregroundColor": "teal",
+            "oddRowBackgroundColor": "red",
+            "borderColor": "pink",
+            "headerBorderColor": "green",
+            "headerBackgroundColor": "brown",
         },
         "Garish colors so you can see exactly which property targets which piece.",
         "multiindex",