@adaptabletools/adaptable 24.0.0-canary.6 → 24.0.0-canary.7

package/src/View/StyledColumn/Wizard/StyledColumnWizardIconSection.js

@@ -161,7 +161,7 @@ export const isValidIconStyleMappings = (data) => {
     return true;
 };
 export const StyledColumnWizardIconSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+    const { data } = useOnePageAdaptableWizardContext();
     const iconStyle = data.IconStyle ?? {};
     const mappings = iconStyle.Mappings ?? [];
     const disabled = !data.ColumnId;
@@ -299,7 +299,7 @@ export const StyledColumnWizardIconSection = (props) => {
                                                     { value: 'After', label: 'After' },
                                                     { value: 'Above', label: 'Above' },
                                                     { value: 'Below', label: 'Below' },
-                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
+                                                ] }) }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { disabled: disabled || cellTextDisabled, value: iconStyle.Font, onChange: onFontChange }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether and how to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { checked: toolTipText.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { className: "twa:ml-3", checked: toolTipText.includes('IconDescription'), onChange: (checked) => toggleToolTipText('IconDescription', checked), children: "Description" })] }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell box styling (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { disabled: disabled, value: iconStyle.Cell, onChange: onCellChange }) })] })] }));
 };
 const ICON_KIND_OPTIONS = [
     { value: 'Emoji', label: 'Emoji' },

package/src/View/StyledColumn/Wizard/StyledColumnWizardRangeBarSection.js

@@ -5,10 +5,10 @@ import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
 import { InputGroup } from '../../../components/InputGroup';
-import { ColorPicker, OptionalColorPicker } from '../../../components/ColorPicker';
+import { ColorField } from '../../../components/ColorField';
 import { RangesComponent } from '../RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
-import { getDefaultRangeColor } from '../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor, themeColorVar } from '../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
@@ -419,18 +419,18 @@ export const StyledColumnWizardRangeBarSection = (props) => {
                                             field: 'Reference',
                                             optional: true,
                                             fallbackNumber: minMaxRangeValues?.max ?? 0,
-                                        })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Ranges" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-700px]", children: ["Optional coloured segments drawn ", _jsx("em", { children: "behind" }), " track to form qualitative scale;leave empty for a plain track"] })] }), _jsx(Card.Body, { children: _jsx(RangesComponent, { allowEmptyRanges: true, disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: range.CellRanges ?? [], rangeValueType: range.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: range.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] })] })), !isRangeVariant && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Drawn at the cell value's position along the track." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: valueMarker.Shape, onValueChange: (s) => updateValueMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: valueMarker.Color || undefined, onChange: (c) => updateValueMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: valueMarker.Size, onChange: (e) => updateValueMarker({ Size: Number(e.target.value) }) }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Reference Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: hasReference
+                                        })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Ranges" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-700px]", children: ["Optional coloured segments drawn ", _jsx("em", { children: "behind" }), " track to form qualitative scale;leave empty for a plain track"] })] }), _jsx(Card.Body, { children: _jsx(RangesComponent, { allowEmptyRanges: true, disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: range.CellRanges ?? [], rangeValueType: range.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: range.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] })] })), !isRangeVariant && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Drawn at the cell value's position along the track." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: valueMarker.Shape, onValueChange: (s) => updateValueMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { clearable: false, disabled: disabled, value: valueMarker.Color || undefined, onChange: (c) => updateValueMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: valueMarker.Size, onChange: (e) => updateValueMarker({ Size: Number(e.target.value) }) }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Reference Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: hasReference
                                             ? 'Drawn at the Reference value (e.g. previous close, target, midpoint).'
-                                            : 'Optional second marker when a Reference bound is set on the Style step.' })] }), _jsx(Card.Body, { children: hasReference ? (_jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Track" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
+                                            : 'Optional second marker when a Reference bound is set on the Style step.' })] }), _jsx(Card.Body, { children: hasReference ? (_jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { clearable: false, disabled: disabled, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Track" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                         { value: 'Horizontal', label: 'Horizontal' },
                                                         { value: 'Vertical', label: 'Vertical' },
-                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.Track?.Color, defaultColor: getDefaultRangeColor(), onChange: (c) => updateTrackProperties({ Color: c }) }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
+                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { disabled: disabled, value: range.Track?.Color, defaultColor: getDefaultRangeColor(), onChange: (c) => updateTrackProperties({ Color: c }) }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
                                                         Height: e.target.value === '' ? undefined : Number(e.target.value),
-                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: getDefaultRangeColor(), onChange: (c) => updateBackColor(c) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => updateOutOfRangeProperties({
+                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { disabled: disabled, value: range.BackColor ?? undefined, defaultColor: getDefaultRangeColor(), onChange: (c) => updateBackColor(c) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => updateOutOfRangeProperties({
                                                         Mode: v,
                                                     }), items: [
                                                         { value: 'Clamp', label: 'Clamp to edge' },
                                                         { value: 'Overflow', label: 'Show outside' },
                                                         { value: 'Hide', label: 'Hide marker' },
-                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { disabled: disabled, value: range.OutOfRange?.Color, defaultColor: themeColorVar('destructive'), onChange: (c) => updateOutOfRangeProperties({ Color: c }) }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardRatingSection.js

@@ -3,7 +3,7 @@ import { CheckBox } from '../../../components/CheckBox';
 import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
-import { ColorPicker } from '../../../components/ColorPicker';
+import { ColorField } from '../../../components/ColorField';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/Select';
@@ -112,7 +112,7 @@ export const isValidRatingStyle = (data) => {
     return true;
 };
 export const StyledColumnWizardRatingSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
+    const { data } = useOnePageAdaptableWizardContext();
     const rating = data.RatingStyle ?? {};
     const disabled = !data.ColumnId;
     if (!data.ColumnId) {
@@ -141,7 +141,7 @@ export const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Max: Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : undefined,
                                                     });
-                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Icon count and rating cap (no auto scaling is applied)" })] }) }), _jsx(FormRow, { label: "Icon:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: rating.Icon ?? DEFAULT_RATING_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), _jsx(FormRow, { label: "Filled Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), _jsx(FormRow, { label: "Empty Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), _jsx(FormRow, { label: "Icon Size (px):", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(DEFAULT_RATING_SIZE), style: { width: 80 }, onChange: (event) => {
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Icon count and rating cap (no auto scaling is applied)" })] }) }), _jsx(FormRow, { label: "Icon:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: rating.Icon ?? DEFAULT_RATING_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), _jsx(FormRow, { label: "Filled Colour:", children: _jsx(ColorField, { clearable: false, disabled: disabled, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), _jsx(FormRow, { label: "Empty Colour:", children: _jsx(ColorField, { clearable: false, disabled: disabled, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), _jsx(FormRow, { label: "Icon Size (px):", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(DEFAULT_RATING_SIZE), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Size: undefined });
@@ -161,7 +161,7 @@ export const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Gap: Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined,
                                                     });
-                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), _jsx(FormRow, { label: "Allow Half Icons:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.AllowHalf ?? true, onChange: (checked) => update({ AllowHalf: checked }), children: "Render fractional values as a partial icon (e.g. 3.5 \u2192 \u2605\u2605\u2605\u00BD\u2606)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Text" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Show Value:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), _jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: rating.Cell, onChange: (next) => {
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), _jsx(FormRow, { label: "Allow Half Icons:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.AllowHalf ?? true, onChange: (checked) => update({ AllowHalf: checked }), children: "Render fractional values as a partial icon (e.g. 3.5 \u2192 \u2605\u2605\u2605\u00BD\u2606)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Text" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Show Value:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), _jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { disabled: disabled, value: rating.Cell, onChange: (next) => {
                                 if (next) {
                                     update({ Cell: next });
                                 }

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection.js

@@ -5,7 +5,7 @@ import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { Tag } from '../../../../components/Tag';
 import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { BarStyleCellTextLayoutEditor } from './Components/BarStyleCellTextLayoutEditor';
-import { OptionalColorPicker } from '../../../../components/ColorPicker';
+import { ColorField } from '../../../../components/ColorField';
 import { getDefaultRangeColor } from '../../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../../components/Flex';
@@ -136,7 +136,7 @@ export const StyledColumnWizardStyleSection = (props) => {
     const currentOrigin = typeof pb.Origin === 'number'
         ? 'Min'
         : pb.Origin ?? 'Auto';
-    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: pb.Font, onChange: (next) => {
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { disabled: cellTextDisabled, value: pb.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }
@@ -145,5 +145,5 @@ export const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getDefaultRangeColor(), onChange: onBackColorChange }) })] }) })] })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorField, { disabled: disabled, value: pb.BackColor ?? undefined, defaultColor: getDefaultRangeColor(), onChange: onBackColorChange }) })] }) })] })] }));
 };

package/src/components/ColorField/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type ColorFieldProps as SharedColorFieldProps } from "../../../vendor/components/ColorField";
+export type ColorFieldProps = Omit<SharedColorFieldProps, 'onChange' | 'clearable' | 'data-name'> & {
+    'data-name'?: string;
+} & ({
+    clearable?: true;
+    onChange: (color: string | undefined) => void;
+} | {
+    /** The colour is required, so there is no clear button and `onChange` always gets one. */
+    clearable: false;
+    onChange: (color: string) => void;
+});
+/** The shared colour field with AdapTable's defaults. */
+export declare const ColorField: (props: ColorFieldProps) => React.JSX.Element;

package/src/components/ColorField/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ColorField as SharedColorField, } from "../../../vendor/components/ColorField";
+export const ColorField = (props) => {
+    const { onChange, 'data-name': dataName = 'color-field', ...rest } = props;
+    return (_jsx(SharedColorField, { ...rest, "data-name": dataName, onChange: onChange }));
+};

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1792067993639 || Date.now(),
-    VERSION: "24.0.0-canary.6" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1792496906928 || Date.now(),
+    VERSION: "24.0.0-canary.7" || '--current-version--',
 };

package/src/migration/VersionUpgrade24.d.ts

@@ -33,6 +33,8 @@ import type { MigrationLogger } from './AdaptableUpgradeHelper';
  *    `Type: 'Change'` when missing
  * 16. {@link migrateLayoutTagsToRegistry} — Layout extensions held in object Tags
  *    (`layoutTagOptions.autoCheckTagsForLayouts`) → `Layout.LayoutExtensions`
+ * 17. {@link VersionUpgrade24.migrateSwatchColorVars} — `--ab-color-swatch-N`
+ *    colours → `--ab-color-palette-{N+12}`
  */
 export declare class VersionUpgrade24 extends VersionUpgrade {
     private options;
@@ -40,6 +42,13 @@ export declare class VersionUpgrade24 extends VersionUpgrade {
         layoutTagOptions?: LayoutTagOptions;
     });
     migrateState(state: AdaptableState): AdaptableState;
+    /**
+     * Step 17. The 20 swatch colours were merged into the palette after its 12
+     * light / dark pairs, so `var(--ab-color-swatch-N)` in any saved style
+     * (Format Columns, Styled Columns, Alerts, Flashing Cells, shared entities…)
+     * becomes `var(--ab-color-palette-{N+12})` with the same colour.
+     */
+    private migrateSwatchColorVars;
     /**
      * Migrates Notes from a single `Timestamp` to explicit `CreatedAt` / `UpdatedAt`.
      *

package/src/migration/VersionUpgrade24.js

@@ -34,8 +34,35 @@ export class VersionUpgrade24 extends VersionUpgrade {
         this.retypeObservableCalculatedColumns(state);
         this.stampFlashingCellTypes(state);
         migrateLayoutTagsToRegistry(state, this.logger, this.options.layoutTagOptions);
+        this.migrateSwatchColorVars(state);
         return state;
     }
+    migrateSwatchColorVars(state) {
+        const swatchVar = /--ab-color-swatch-(\d+)\b/g;
+        let rewritten = 0;
+        const visit = (node) => {
+            if (!node || typeof node !== 'object') {
+                return;
+            }
+            const container = node;
+            for (const key of Object.keys(container)) {
+                const value = container[key];
+                if (typeof value !== 'string') {
+                    visit(value);
+                    continue;
+                }
+                const next = value.replace(swatchVar, (_, n) => `--ab-color-palette-${Number(n) + 12}`);
+                if (next !== value) {
+                    container[key] = next;
+                    rewritten++;
+                }
+            }
+        };
+        visit(state);
+        if (rewritten > 0) {
+            this.logger.info(`Rewrote ${rewritten} colour value(s) from --ab-color-swatch-N to --ab-color-palette-{N+12} (v24).`);
+        }
+    }
     migrateNoteTimestamps(state) {
         const notes = state.Note?.Notes;
         if (!notes?.length) {

package/src/setupDevTools.js

@@ -4,6 +4,7 @@ import { resolveVisibleSettingsPanelNavigationGroups } from './Utilities/Helpers
 import { isTransientReduxAction } from './Redux/Store/isTransientReduxAction';
 import { isPivotLayout } from './Utilities/Helpers/Layouts/LayoutHelper';
 import { debug } from '@infinite-table/infinite-react';
+import { colorSchemeDark, colorSchemeLight, themeQuartz } from 'ag-grid-enterprise';
 import { warnOnce } from './agGrid/AdaptableLogger';
 let DEV_TOOLS_LISTENING_STARTED = false;
 let DEV_TOOLS_READY = false;
@@ -204,39 +205,192 @@ function handleOpenSettingsPanelMessage(payload) {
         console.warn(error.message);
     }
 }
-function applyThemeToDocumentElement(payload) {
-    const style = document.documentElement.style;
+const THEME_PREVIEW_ATTR = 'data-ab-devtools-theme-preview';
+function clearInlineAbVars(el) {
+    const style = el.style;
     for (let i = style.length - 1; i >= 0; i--) {
         const prop = style[i];
-        if (prop.startsWith('--ab-')) {
+        if (prop?.startsWith('--ab-') && !prop.startsWith('--ab-qs-')) {
             style.removeProperty(prop);
         }
     }
+}
+let themeAliasMaps = null;
+let themeAliasSheetCount = -1;
+function collectThemeAliases() {
+    const sheetCount = document.styleSheets.length;
+    if (themeAliasMaps && themeAliasSheetCount === sheetCount) {
+        return themeAliasMaps;
+    }
+    const root = new Map();
+    const dark = new Map();
+    const visit = (rules) => {
+        for (let index = 0; index < rules.length; index++) {
+            const rule = rules[index];
+            const group = rule;
+            if (group.cssRules) {
+                visit(group.cssRules);
+            }
+            const styleRule = rule;
+            if (!styleRule.style || !styleRule.selectorText) {
+                continue;
+            }
+            const selector = styleRule.selectorText;
+            const isDark = selector.includes('ab--theme-dark');
+            const isRoot = selector.includes(':root') ||
+                selector.includes('ab--theme-light') ||
+                /(^|[^\w-])html([^\w-]|$)/.test(selector);
+            if (!isDark && !isRoot) {
+                continue;
+            }
+            const target = isDark ? dark : root;
+            for (let i = 0; i < styleRule.style.length; i++) {
+                const prop = styleRule.style[i];
+                if (!prop?.startsWith('--')) {
+                    continue;
+                }
+                const value = styleRule.style.getPropertyValue(prop).trim();
+                if (value.includes('var(')) {
+                    target.set(prop, value);
+                }
+            }
+        }
+    };
+    for (let index = 0; index < document.styleSheets.length; index++) {
+        const sheet = document.styleSheets[index];
+        try {
+            visit(sheet.cssRules);
+        }
+        catch {
+        }
+    }
+    themeAliasMaps = { root, dark };
+    themeAliasSheetCount = sheetCount;
+    return themeAliasMaps;
+}
+let darkThemeProbe = null;
+function themeDefaultStyle(variant) {
+    if (variant === 'light') {
+        return getComputedStyle(document.documentElement);
+    }
+    if (!darkThemeProbe) {
+        darkThemeProbe = document.createElement('div');
+        darkThemeProbe.className = 'ab--theme-dark';
+        darkThemeProbe.setAttribute('data-ab-devtools-theme-probe', '');
+        darkThemeProbe.style.cssText =
+            'position:absolute;width:0;height:0;overflow:hidden;pointer-events:none';
+        document.body.appendChild(darkThemeProbe);
+    }
+    return getComputedStyle(darkThemeProbe);
+}
+function installLiveAliases(el, variant) {
+    const { root, dark } = collectThemeAliases();
+    const defaults = themeDefaultStyle(variant);
+    const aliases = variant === 'dark' ? new Map([...root, ...dark]) : root;
+    for (const [name, raw] of aliases) {
+        const inline = el.style.getPropertyValue(name).trim();
+        const fallback = defaults.getPropertyValue(name).trim();
+        if (!inline || inline === raw || inline === fallback) {
+            el.style.setProperty(name, raw);
+        }
+    }
+}
+function clearDocumentThemePreview() {
+    clearInlineAbVars(document.documentElement);
+}
+function getInstanceThemeElements(adaptableId) {
+    const instance = getRegistration(adaptableId)?.instance;
+    if (!instance) {
+        return [];
+    }
+    const elements = [
+        instance.getAdaptableContainerElement(),
+        instance.getAgGridContainerElement(),
+    ].filter((el) => el instanceof HTMLElement);
+    return [...new Set(elements)];
+}
+const originalAgGridThemes = new Map();
+function applyAgGridPreviewTheme(adaptableId, variant) {
+    const instance = getRegistration(adaptableId)?.instance;
+    const gridApi = instance?.agGridAdapter.getAgGridApi();
+    if (!instance || instance.isDestroyed || !gridApi || gridApi.isDestroyed()) {
+        return;
+    }
+    if (instance.agGridThemeAdapter.getAgGridThemeMode() === 'legacy') {
+        return;
+    }
+    if (!originalAgGridThemes.has(adaptableId)) {
+        originalAgGridThemes.set(adaptableId, gridApi.getGridOption('theme'));
+    }
+    const original = originalAgGridThemes.get(adaptableId);
+    const base = original && original !== 'legacy' && typeof original.withPart === 'function'
+        ? original
+        : themeQuartz;
+    gridApi.setGridOption('theme', base.withPart(variant === 'dark' ? colorSchemeDark : colorSchemeLight));
+}
+function syncAgGridPreviewThemes(activeId, variant) {
+    applyAgGridPreviewTheme(activeId, variant);
+}
+function applyThemeVars(el, payload) {
+    clearInlineAbVars(el);
     for (const [name, value] of Object.entries(payload.light)) {
         if (value != null && value !== '') {
-            style.setProperty(name, String(value));
+            el.style.setProperty(name, String(value));
         }
     }
     if (payload.variant === 'dark') {
         for (const [name, value] of Object.entries(payload.dark)) {
             if (value != null && value !== '') {
-                style.setProperty(name, String(value));
+                el.style.setProperty(name, String(value));
             }
         }
+        el.classList.add('ab--theme-dark');
     }
+    else if (el.getAttribute(THEME_PREVIEW_ATTR) === 'dark') {
+        el.classList.remove('ab--theme-dark');
+    }
+    el.setAttribute(THEME_PREVIEW_ATTR, payload.variant);
+    installLiveAliases(el, payload.variant);
 }
 function handleThemeVarChangeMessage(payload) {
-    const { name, value } = payload ?? {};
-    if (!name) {
+    const { name, value, adaptableId } = payload ?? {};
+    if (!name || !adaptableId) {
         return;
     }
-    document.documentElement.style.setProperty(name, String(value ?? ''));
+    const targets = getInstanceThemeElements(adaptableId);
+    if (targets.length === 0) {
+        console.warn(`Adaptable DevTools: no theme container for "${adaptableId}"`);
+        return;
+    }
+    const variant = payload.variant === 'dark' ? 'dark' : 'light';
+    clearDocumentThemePreview();
+    for (const el of targets) {
+        if (!el.hasAttribute(THEME_PREVIEW_ATTR)) {
+            el.setAttribute(THEME_PREVIEW_ATTR, variant);
+        }
+        installLiveAliases(el, variant);
+        el.style.setProperty(name, String(value ?? ''));
+    }
 }
 function handleApplyThemeMessage(payload) {
     if (!payload || (payload.variant !== 'light' && payload.variant !== 'dark')) {
         return;
     }
-    applyThemeToDocumentElement(payload);
+    const { adaptableId } = payload;
+    if (!adaptableId) {
+        console.warn('Adaptable DevTools: apply-theme message missing adaptableId');
+        return;
+    }
+    const targets = getInstanceThemeElements(adaptableId);
+    if (targets.length === 0) {
+        console.warn(`Adaptable DevTools: no theme container for "${adaptableId}"`);
+        return;
+    }
+    clearDocumentThemePreview();
+    for (const el of targets) {
+        applyThemeVars(el, payload);
+    }
+    syncAgGridPreviewThemes(adaptableId, payload.variant);
 }
 function handleLoadVariantMessage(payload) {
     const { adaptableId, variant } = payload ?? {};