Add new concept for CSS variables within styles

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte

@@ -2,6 +2,7 @@
   import StyleSection from "./StyleSection.svelte"
   import * as ComponentStyles from "./componentStyles"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
+  import ColorPicker from "@/components/design/settings/controls/ColorPicker.svelte"
 
   export let componentDefinition
   export let componentInstance
@@ -18,6 +19,19 @@
         styles.push(ComponentStyles[style])
       }
     })
+
+    // Add section for CSS variables if present
+    if (def?.cssVariables?.length) {
+      styles.push({
+        label: "Customization",
+        settings: def.cssVariables.map(variable => ({
+          label: variable.label,
+          key: variable.variable,
+          control: ColorPicker,
+        })),
+      })
+    }
+
     return styles
   }
 

packages/client/manifest.json

@@ -7584,6 +7584,15 @@
     "name": "Table",
     "icon": "Table",
     "styles": ["size"],
+    "cssVariables": [{
+      "label": "Header color",
+      "variable": "--custom-header-cell-background",
+      "type": "color"
+    }, {
+      "label": "Stripe color",
+      "variable": "--custom-stripe-cell-background",
+      "type": "color"
+    }],
     "size": {
       "width": 600,
       "height": 400

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -434,7 +434,7 @@
   .header-cell :global(.cell) {
     padding: 0 var(--cell-padding);
     gap: calc(2 * var(--cell-spacing));
-    background: var(--grid-background-alt);
+    background: var(--header-cell-background);
   }
 
   /* Icon colors */

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -217,6 +217,10 @@
     --accent-color: var(--primaryColor, var(--spectrum-global-color-blue-400));
     --grid-background: var(--spectrum-global-color-gray-50);
     --grid-background-alt: var(--spectrum-global-color-gray-100);
+    --header-cell-background: var(
+      --custom-header-cell-background,
+      var(--grid-background-alt)
+    );
     --cell-background: var(--grid-background);
     --cell-background-hover: var(--grid-background-alt);
     --cell-background-alt: var(--cell-background);
@@ -246,7 +250,10 @@
     cursor: grabbing !important;
   }
   .grid.stripe {
-    --cell-background-alt: var(--spectrum-global-color-gray-75);
+    --cell-background-alt: var(
+      --custom-stripe-cell-background,
+      var(--spectrum-global-color-gray-75)
+    );
   }
 
   /* Data layers */
@@ -360,8 +367,10 @@
   .grid.quiet :global(.sticky-column:before) {
     display: none;
   }
-  .grid.quiet :global(.header),
-  .grid.quiet :global(.header .cell) {
-    background: var(--grid-background);
+  .grid.quiet:not(.stripe) {
+    --header-cell-background: var(
+      --custom-header-cell-background,
+      var(--grid-background)
+    );
   }
 </style>

packages/frontend-core/src/components/grid/layout/StickyColumn.svelte

@@ -169,7 +169,7 @@
     z-index: 1;
   }
   .header :global(.cell) {
-    background: var(--grid-background-alt);
+    background: var(--header-cell-background);
   }
   .header :global(.cell::before) {
     display: none;