@revolist/revogrid 4.24.2 → 4.25.0

package/dist/collection/components/revoGrid/revo-grid.js

@@ -7,7 +7,8 @@ import { DataProvider } from "../../services/data.provider";
 import { getVisibleSourceItem, rowTypes } from "../../store/index";
 import DimensionProvider from "../../services/dimension.provider";
 import ViewportProvider from "../../services/viewport.provider";
-import ThemeService from "../../themeManager/theme.service";
+import ThemeService, { getTheme } from "../../themeManager/theme.service";
+import { themeTokenCssVariables } from "../../types/theme";
 import { timeout } from "../../utils";
 import { AutoSizeColumnPlugin, } from "../../plugins/column.auto-size.plugin";
 import { FilterPlugin, } from "../../plugins/filter/filter.plugin";
@@ -28,6 +29,10 @@ import { getColumnByProp, getColumns } from "../../utils/column.utils";
 import { WCAGPlugin } from "../../plugins/wcag";
 import { PluginService } from "./plugin.service";
 import { RTLPlugin } from "../../plugins/rtl/rtl.plugin";
+const DEFAULT_COLUMN_SIZE = 100;
+function getColumnSize(size) {
+    return Number.isFinite(size) && size > 0 ? size : DEFAULT_COLUMN_SIZE;
+}
 /**
  * Revogrid - High-performance, customizable grid library for managing large datasets.
  * ### Events guide
@@ -119,6 +124,11 @@ export class RevoGridComponent {
         this.columnTypes = {};
         /** Theme name. */
         this.theme = 'default';
+        /**
+         * Per-grid custom theme definitions.
+         * Assign as a JavaScript property; complex values cannot be serialized as HTML attributes.
+         */
+        this.themeDefinitions = [];
         /**
          * Row class property mapping.
          * Map custom classes to rows from row object data.
@@ -218,6 +228,7 @@ export class RevoGridComponent {
         this.pluginService = new PluginService();
         this.viewport = null;
         this.isInited = false;
+        this.themeStyles = {};
     }
     // #endregion
     // #region Methods
@@ -716,29 +727,70 @@ export class RevoGridComponent {
         this.refreshColumnsOnConfigChange(newVal, prevVal);
     }
     rowSizeChanged(s) {
-        if (!this.dimensionProvider) {
+        if (!this.themeService || !this.dimensionProvider) {
+            return;
+        }
+        this.themeService.rowSize = s;
+        this.applyTheme(this.theme, false, false, 'rowSize');
+    }
+    colSizeChanged(s) {
+        if (!this.dimensionProvider || !this.columnProvider) {
             return;
         }
-        // clear existing data
-        this.dimensionProvider.setSettings({ originItemSize: s }, 'rgRow');
-        this.rowDefChanged(this.rowDefinitions, this.rowDefinitions, 'rowSize', true);
+        this.dimensionProvider.setSettings({ originItemSize: getColumnSize(s) }, 'rgCol');
+        this.columnChanged(this.columns);
     }
     themeChanged(t, _, __ = 'theme', init = false) {
-        if (!this.dimensionProvider) {
+        if (!this.themeService || !this.dimensionProvider) {
+            return;
+        }
+        if (this.pendingNormalizedTheme === t) {
+            this.pendingNormalizedTheme = undefined;
+            return;
+        }
+        const normalizedTheme = getTheme(t);
+        if (normalizedTheme !== t) {
+            this.pendingNormalizedTheme = normalizedTheme;
+            this.theme = normalizedTheme;
+        }
+        this.applyTheme(normalizedTheme, init, true, 'theme');
+    }
+    themeDefinitionsChanged(definitions = []) {
+        if (!this.themeService || !this.dimensionProvider) {
             return;
         }
-        this.themeService.register(t);
-        this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize }, 'rgRow');
-        this.dimensionProvider.setSettings({ originItemSize: this.colSize }, 'rgCol');
-        // if theme change we need to reapply row size and reset viewport
-        if (!init) {
-            // clear existing data
-            this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize }, 'rgRow');
-            this.rowDefChanged(
-            // for cases when some custom size present and not
-            this.rowDefinitions, this.rowDefinitions, 'theme', true);
+        this.themeService.setDefinitions(definitions);
+        this.applyTheme(this.theme, false, true, 'themeDefinitions');
+    }
+    applyTheme(theme, init, emitEvent, reason) {
+        var _a;
+        const resolvedTheme = this.themeService.register(theme);
+        const rowSize = this.themeService.rowSize;
+        const densityChanged = this.appliedThemeRowSize !== rowSize;
+        const hadAppliedTheme = this.appliedThemeRowSize !== undefined;
+        this.appliedThemeRowSize = rowSize;
+        this.themeStyles = this.getThemeStyles();
+        if (densityChanged) {
+            (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setSettings({ originItemSize: rowSize }, 'rgRow');
+            if (!init && hadAppliedTheme) {
+                this.rowDefChanged(this.rowDefinitions, this.rowDefinitions, reason, true);
+            }
+        }
+        if (emitEvent) {
+            this.afterthemechanged.emit(resolvedTheme.name);
+        }
+    }
+    getThemeStyles() {
+        const styles = {
+            '--rg-theme-row-size': `${this.themeService.rowSize}px`,
+        };
+        for (const [name, value] of Object.entries(this.themeService.theme.tokens)) {
+            const cssVariable = themeTokenCssVariables[name];
+            if (cssVariable && value) {
+                styles[cssVariable] = value;
+            }
         }
-        this.afterthemechanged.emit(t);
+        return styles;
     }
     dataSourceChanged(newVal = [], _, watchName) {
         if (!this.dataProvider) {
@@ -975,9 +1027,11 @@ export class RevoGridComponent {
         this.themeService = new ThemeService({
             rowSize: this.rowSize,
         });
+        this.themeService.setDefinitions(this.themeDefinitions);
         this.dimensionProvider = new DimensionProvider(this.viewportProvider, {
             realSizeChanged: (k) => this.contentsizechanged.emit(k),
         });
+        this.dimensionProvider.setSettings({ originItemSize: getColumnSize(this.colSize) }, 'rgCol');
         this.columnProvider = new ColumnDataProvider();
         this.selectionStoreConnector = new SelectionStoreConnector();
         this.dataProvider = new DataProvider(this.dimensionProvider);
@@ -1095,7 +1149,7 @@ export class RevoGridComponent {
         const dimensions = this.dimensionProvider.stores;
         const verticalScroll = (h("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, clientSize: viewports[typeRow].store.get('clientSize'), virtualSize: viewports[typeRow].store.get('virtualSize'), realSize: dimensions[typeRow].store.get('realSize'), ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }));
         const horizontalScroll = (h("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, clientSize: viewports[typeCol].store.get('clientSize'), virtualSize: viewports[typeCol].store.get('virtualSize'), realSize: dimensions[typeCol].store.get('realSize'), ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }));
-        return (h(Host, { dir: this.rtl ? 'rtl' : 'ltr' }, this.hideAttribution ? null : (h("revogr-attribution", { class: "attribution" })), h("slot", { name: "header" }), h("div", { class: "main-viewport", onClick: (e) => {
+        return (h(Host, { dir: this.rtl ? 'rtl' : 'ltr', "data-rg-theme-base": this.themeService.theme.base, "data-rg-theme-scheme": this.themeService.theme.colorScheme, style: this.themeStyles }, this.hideAttribution ? null : (h("revogr-attribution", { class: "attribution" })), h("slot", { name: "header" }), h("div", { class: "main-viewport", onClick: (e) => {
                 var _a;
                 if (e.currentTarget === e.target) {
                     (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();
@@ -1563,14 +1617,34 @@ export class RevoGridComponent {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "Theme",
+                    "original": "string",
                     "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "theme",
+                "defaultValue": "'default'"
+            },
+            "themeDefinitions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeDefinition[]",
+                    "resolved": "ThemeDefinition[]",
                     "references": {
-                        "Theme": {
+                        "ThemeDefinition": {
                             "location": "import",
                             "path": "@type",
-                            "id": "src/types/index.ts::Theme",
-                            "referenceLocation": "Theme"
+                            "id": "src/types/index.ts::ThemeDefinition",
+                            "referenceLocation": "ThemeDefinition"
                         }
                     }
                 },
@@ -1578,13 +1652,11 @@ export class RevoGridComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Theme name."
+                    "text": "Per-grid custom theme definitions.\nAssign as a JavaScript property; complex values cannot be serialized as HTML attributes."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "theme",
-                "defaultValue": "'default'"
+                "defaultValue": "[]"
             },
             "rowClass": {
                 "type": "string",
@@ -2936,16 +3008,9 @@ export class RevoGridComponent {
                     "text": "Emmited after the theme is changed"
                 },
                 "complexType": {
-                    "original": "Theme",
+                    "original": "string",
                     "resolved": "string",
-                    "references": {
-                        "Theme": {
-                            "location": "import",
-                            "path": "@type",
-                            "id": "src/types/index.ts::Theme",
-                            "referenceLocation": "Theme"
-                        }
-                    }
+                    "references": {}
                 }
             }, {
                 "method": "created",
@@ -3732,9 +3797,15 @@ export class RevoGridComponent {
             }, {
                 "propName": "rowSize",
                 "methodName": "rowSizeChanged"
+            }, {
+                "propName": "colSize",
+                "methodName": "colSizeChanged"
             }, {
                 "propName": "theme",
                 "methodName": "themeChanged"
+            }, {
+                "propName": "themeDefinitions",
+                "methodName": "themeDefinitionsChanged"
             }, {
                 "propName": "source",
                 "methodName": "dataSourceChanged"

package/dist/collection/components/scroll/revogr-viewport-scroll-style.css

@@ -17,6 +17,12 @@ revogr-viewport-scroll {
   -ms-overflow-style: none;
   scrollbar-width: none; /* Firefox */
   /* Hide scrollbar for Chrome, Safari and Opera */
+}
+revogr-viewport-scroll::-webkit-scrollbar {
+  display: none;
+  -webkit-appearance: none;
+}
+revogr-viewport-scroll {
   overflow-x: auto;
   overflow-y: hidden;
   overscroll-behavior-x: contain;
@@ -24,10 +30,6 @@ revogr-viewport-scroll {
   z-index: 1;
   height: 100%;
 }
-revogr-viewport-scroll::-webkit-scrollbar {
-  display: none;
-  -webkit-appearance: none;
-}
 revogr-viewport-scroll.colPinStart, revogr-viewport-scroll.colPinEnd {
   z-index: 2;
 }

package/dist/collection/components/selectionFocus/revogr-focus-style.css

@@ -1,5 +1,5 @@
 revogr-focus.focused-cell {
-  box-shadow: -1px 0 0 #0d63e8 inset, 1px 0 0 #0d63e8 inset, 0 -1px 0 #0d63e8 inset, 0 1px 0 #0d63e8 inset;
+  box-shadow: -1px 0 0 var(--rg-theme-selection-border) inset, 1px 0 0 var(--rg-theme-selection-border) inset, 0 -1px 0 var(--rg-theme-selection-border) inset, 0 1px 0 var(--rg-theme-selection-border) inset;
   position: absolute;
   pointer-events: none;
   z-index: 9;

package/dist/collection/components/selectionTempRange/revogr-temp-range-style.css

@@ -3,11 +3,11 @@
   position: absolute;
   pointer-events: none;
   z-index: 9;
-  border: 1px solid rgb(255, 94, 0);
+  border: 1px solid var(--rg-theme-temporary-range-border);
   box-sizing: border-box;
 }
 .temp-bg-range.Selection {
-  border: 1px dashed gray;
+  border: 1px dashed var(--rg-theme-temporary-selection-border);
 }
 .temp-bg-range > div {
   width: 1px;

package/dist/collection/index.js

@@ -2,6 +2,7 @@
  * Built by Revolist OU ❤️
  */
 export * from './types';
+export * from './themeManager/presets';
 export * from './store';
 export * from './plugins';
 export * from './components';

package/dist/collection/plugins/filter/filter.panel.js

@@ -50,6 +50,10 @@ export class FilterPanel {
          * If true, closes the filter panel when clicking outside
          */
         this.closeOnOutsideClick = true;
+        /**
+         * Whether the filter panel allows the same operator more than once per column.
+         */
+        this.allowDuplicateOperators = true;
         this.debouncedApplyFilter = debounce(() => {
             this.filterChange.emit(this.filterItems);
         }, 400);
@@ -363,11 +367,15 @@ export class FilterPanel {
         }
     }
     renderSelectOptions(type, isDefaultTypeRemoved = false) {
+        var _a;
         if (!this.changes) {
             return;
         }
         const options = [];
         const prop = this.changes.prop;
+        if (prop === undefined) {
+            return;
+        }
         const hidden = new Set();
         Object.keys(this.filterItems).forEach((prop) => {
             const values = this.filterItems[prop];
@@ -377,6 +385,9 @@ export class FilterPanel {
                 }
             });
         });
+        const selectedTypes = new Set(((_a = this.filterItems[prop]) !== null && _a !== void 0 ? _a : [])
+            .filter(filter => !filter.hidden)
+            .map(filter => filter.type));
         if (!isDefaultTypeRemoved) {
             const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
             options.push(h("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0
@@ -384,7 +395,9 @@ export class FilterPanel {
                 : this.filterNames[defaultType]));
         }
         for (let gIndex in this.changes.filterTypes) {
-            const group = this.changes.filterTypes[gIndex].filter(k => !hidden.has(k));
+            const group = this.changes.filterTypes[gIndex].filter(k => !hidden.has(k) && (this.allowDuplicateOperators ||
+                !selectedTypes.has(k) ||
+                (isDefaultTypeRemoved && type === k)));
             if (group.length) {
                 options.push(...group.map(k => (h("option", { value: k, selected: type === k }, this.filterNames[k]))));
                 options.push(h("option", { disabled: true }));
@@ -479,7 +492,7 @@ export class FilterPanel {
             top: `${(_d = (_c = this.changes) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0}px`,
         };
         const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
-        return (h(Host, { key: '2a19b35adb56fb7d23385fffebc768838edee162' }, h("dialog", { key: '94386d7cbc4bd9c631f72928938b1d1550a3de82', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
+        return (h(Host, { key: '8859c452eb08838f65f18efecbdde7f65fda2b49' }, h("dialog", { key: 'f603067ff0986a9f344cbbf816388d2bbac198bb', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
                 e.preventDefault();
                 this.onCancel();
             } }, this.changes && [
@@ -488,7 +501,7 @@ export class FilterPanel {
             ((_g = this.changes) === null || _g === void 0 ? void 0 : _g.hideDefaultFilters) !== true && [
                 h("label", { key: "filter-title" }, capts.title),
                 h("div", { key: "filter-holder", class: "filter-holder" }, this.getFilterItemsList()),
-                h("div", { key: "add-filter", class: "add-filter" }, h("select", { key: '4f7354e39d8e5cf9ae7b735290eff18d105ab87e', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+                h("div", { key: "add-filter", class: "add-filter" }, h("select", { key: '2ec0a66918edf91bdde3962b6ec84c89f6f1c8f1', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
             ],
             h("slot", { key: "default-slot" }),
             ((_j = (_h = this.changes).extraBottomContent) === null || _j === void 0 ? void 0 : _j.call(_h, this.changes)) || '',
@@ -634,6 +647,26 @@ export class FilterPanel {
                 "reflect": false,
                 "attribute": "close-on-outside-click",
                 "defaultValue": "true"
+            },
+            "allowDuplicateOperators": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the filter panel allows the same operator more than once per column."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-duplicate-operators",
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/plugins/filter/filter.plugin.js

@@ -52,13 +52,14 @@ export class FilterPlugin extends BasePlugin {
         this.filterNameIndexByType = Object.assign({}, filterNames);
         this.filterFunctionsIndexedByType = Object.assign({}, filterCoreFunctionsIndexedByType);
         this.filterProp = FILTER_PROP;
+        this.allowDuplicateOperators = true;
         if (config) {
             this.initConfig(config);
         }
         const existingNodes = this.revogrid.registerVNode.filter(n => typeof n === 'object' && n.$tag$ !== FILTE_PANEL);
         this.revogrid.registerVNode = [
             ...existingNodes,
-            h("revogr-filter-panel", { filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), onResetChange: e => this.onFilterReset(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, closeOnOutsideClick: config === null || config === void 0 ? void 0 : config.closeFilterPanelOnOutsideClick, ref: e => (this.pop = e) }, ' ', this.extraContent()),
+            h("revogr-filter-panel", { filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), onResetChange: e => this.onFilterReset(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, closeOnOutsideClick: config === null || config === void 0 ? void 0 : config.closeFilterPanelOnOutsideClick, allowDuplicateOperators: this.allowDuplicateOperators, ref: e => (this.pop = e) }, ' ', this.extraContent()),
         ];
         const aftersourceset = async () => {
             const filterCollectionProps = Object.keys(this.filterCollection);
@@ -85,15 +86,24 @@ export class FilterPlugin extends BasePlugin {
         };
         this.addEventListener('headerclick', e => this.headerclick(e));
         this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
-            if (!detail ||
-                (typeof detail === 'object' &&
-                    (!detail.multiFilterItems ||
-                        !Object.keys(detail.multiFilterItems).length))) {
+            if (!detail) {
                 this.clearFiltering();
                 return;
             }
             if (typeof detail === 'object') {
-                this.initConfig(detail);
+                const detailKeys = Object.keys(detail);
+                const preserveCurrentFilters = !detailKeys.includes('multiFilterItems') &&
+                    detailKeys.includes('allowDuplicateOperators');
+                this.initConfig(preserveCurrentFilters
+                    ? Object.assign(Object.assign({}, detail), { multiFilterItems: this.multiFilterItems }) : detail);
+                if (!detail.multiFilterItems || !Object.keys(detail.multiFilterItems).length) {
+                    if (preserveCurrentFilters) {
+                        aftersourceset();
+                        return;
+                    }
+                    this.clearFiltering();
+                    return;
+                }
             }
             aftersourceset();
         });
@@ -107,6 +117,11 @@ export class FilterPlugin extends BasePlugin {
         return null;
     }
     initConfig(config) {
+        var _a;
+        this.allowDuplicateOperators = (_a = config.allowDuplicateOperators) !== null && _a !== void 0 ? _a : true;
+        if (this.pop) {
+            this.pop.allowDuplicateOperators = this.allowDuplicateOperators;
+        }
         if (config.multiFilterItems) {
             this.multiFilterItems = Object.assign({}, config.multiFilterItems);
         }

package/dist/collection/plugins/filter/filter.style.css

@@ -1,8 +1,8 @@
 .revo-button {
   position: relative;
   overflow: hidden;
-  color: #fff;
-  background-color: #4545ff;
+  color: var(--rg-theme-button-text);
+  background-color: var(--rg-theme-button-bg);
   height: 32px;
   line-height: 32px;
   padding: 0 15px;
@@ -13,28 +13,23 @@
   cursor: pointer;
 }
 .revo-button.green {
-  background-color: #009037;
+  background-color: var(--rg-theme-button-success-bg);
 }
 .revo-button.red {
-  background-color: #E0662E;
+  background-color: var(--rg-theme-button-danger-bg);
 }
 .revo-button:disabled, .revo-button[disabled] {
   cursor: not-allowed !important;
   filter: opacity(0.35) !important;
 }
 .revo-button.outline {
-  border: 1px solid #dbdbdb;
+  border: 1px solid var(--rg-theme-button-outline-border);
   line-height: 30px;
   background: none;
-  color: #000;
+  color: var(--rg-theme-button-outline-text);
   box-shadow: none;
 }
 
-revo-grid[theme^=dark] .revo-button.outline {
-  border: 1px solid #404040;
-  color: #d8d8d8;
-}
-
 revogr-filter-panel {
   display: block;
 }
@@ -48,10 +43,11 @@ revogr-filter-panel .filter-panel-dialog {
   overflow: auto;
   opacity: 1;
   transform: none;
-  background-color: var(--revo-grid-filter-panel-bg, #fff);
-  border: 1px solid var(--revo-grid-filter-panel-border, #cecece);
+  color: var(--rg-theme-filter-panel-text);
+  background-color: var(--rg-theme-filter-panel-bg);
+  border: 1px solid var(--rg-theme-filter-panel-border);
   transform-origin: 62px 0px;
-  box-shadow: 0 5px 18px -2px var(--revo-grid-filter-panel-shadow, rgba(0, 0, 0, 0.15));
+  box-shadow: 0 5px 18px -2px var(--rg-theme-filter-panel-shadow);
   box-sizing: border-box;
   padding: 10px;
   border-radius: 8px;
@@ -76,7 +72,8 @@ revogr-filter-panel .filter-panel-dialog input[type=text] {
   border: 0;
   min-height: 34px;
   margin: 5px 0;
-  background: var(--revo-grid-filter-panel-input-bg, #f3f3f3);
+  color: var(--rg-theme-filter-panel-text);
+  background: var(--rg-theme-filter-panel-input-bg);
   border-radius: 5px;
   padding: 0 10px;
   box-sizing: border-box;
@@ -91,8 +88,8 @@ revogr-filter-panel .filter-panel-dialog .filter-actions {
   text-align: right;
   margin: 10px -10px -10px;
   padding: 0 5px 10px 10px;
-  background: var(--revo-grid-filter-panel-bg, #fff);
-  border-top: 1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);
+  background: var(--rg-theme-filter-panel-bg);
+  border-top: 1px solid var(--rg-theme-filter-panel-divider);
 }
 revogr-filter-panel .filter-panel-dialog .filter-actions button {
   margin-top: 10px;
@@ -132,10 +129,10 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
   border-radius: 4px;
 }
 .rgHeaderCell .rv-filter.active {
-  color: #10224a;
+  color: var(--rg-theme-filter-panel-icon-active);
 }
 .rgHeaderCell .rv-filter .filter-img {
-  color: gray;
+  color: var(--rg-theme-filter-panel-icon);
   width: 11px;
 }
 
@@ -148,44 +145,52 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
   max-width: 100%; /* useful when width is set to anything other than 100% */
   box-sizing: border-box;
   margin: 0;
-  border: 1px solid var(--revo-grid-filter-panel-select-border, #d9d9d9);
+  color: var(--rg-theme-filter-panel-text);
+  border: 1px solid var(--rg-theme-filter-panel-select-border);
   box-shadow: transparent;
   border-radius: 0.5em;
   appearance: none;
-  background-color: var(--revo-grid-filter-panel-input-bg, #f3f3f3);
-  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+  background-color: var(--rg-theme-filter-panel-input-bg);
+  background-image: var(--revo-grid-filter-panel-select-arrow, url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"));
   background-repeat: no-repeat, repeat;
   /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
   background-position: right 0.7em top 50%, 0 0;
   /* icon size, then gradient */
   background-size: 0.65em auto, 100%;
   /* Hide arrow icon in IE browsers */
-  /* Hover style */
-  /* Focus style */
-  /* Set options to normal weight */
-  /* Disabled styles */
 }
 .select-css::-ms-expand {
   display: none;
 }
+.select-css {
+  /* Hover style */
+}
 .select-css:hover {
-  border-color: var(--revo-grid-filter-panel-select-border, #d9d9d9);
+  border-color: var(--rg-theme-filter-panel-select-border);
+}
+.select-css {
+  /* Focus style */
 }
 .select-css:focus {
-  border-color: var(--revo-grid-filter-panel-select-border-hover, #d9d9d9);
-  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
-  box-shadow: 0 0 0 3px -moz-mac-focusring;
+  border-color: var(--rg-theme-filter-panel-select-border-hover);
+  box-shadow: var(--rg-theme-filter-panel-focus-ring);
   outline: none;
 }
+.select-css {
+  /* Set options to normal weight */
+}
 .select-css option {
   font-weight: normal;
 }
+.select-css {
+  /* Disabled styles */
+}
 .select-css:disabled, .select-css[aria-disabled=true] {
-  color: gray;
-  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
+  color: var(--rg-theme-filter-panel-muted-text);
+  background-image: var(--revo-grid-filter-panel-select-arrow-disabled, url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"));
 }
 .select-css:disabled:hover, .select-css[aria-disabled=true] {
-  border-color: var(--revo-grid-filter-panel-select-border, #d9d9d9);
+  border-color: var(--rg-theme-filter-panel-select-border);
 }
 
 .multi-filter-list {
@@ -212,9 +217,9 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
   left: 0;
   z-index: 2;
   height: 2px;
-  background: var(--revo-grid-filter-panel-reorder-accent, #007cb2);
+  background: var(--rg-theme-filter-panel-reorder-accent);
   border-radius: 999px;
-  box-shadow: 0 0 0 2px var(--revo-grid-filter-panel-bg, #fff);
+  box-shadow: 0 0 0 2px var(--rg-theme-filter-panel-bg);
 }
 .multi-filter-list .multi-filter-list-row.filter-row-drop-active .filter-row-drop-target {
   pointer-events: auto;
@@ -257,7 +262,7 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
 .multi-filter-list .reorder-button {
   border: 0;
   background: transparent;
-  color: var(--revo-grid-filter-panel-reorder-color, #6b7280);
+  color: var(--rg-theme-filter-panel-reorder-color);
   cursor: grab;
   font-family: monospace;
   font-size: 12px;
@@ -268,7 +273,7 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
   width: 16px;
 }
 .multi-filter-list .reorder-button.filter-row-drag-over {
-  color: var(--revo-grid-filter-panel-reorder-accent, #007cb2);
+  color: var(--rg-theme-filter-panel-reorder-accent);
 }
 .multi-filter-list .reorder-button:active {
   cursor: grabbing;
@@ -283,7 +288,7 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
 .add-filter-divider {
   display: block;
   margin: 0 -10px 10px -10px;
-  border-bottom: 1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);
+  border-bottom: 1px solid var(--rg-theme-filter-panel-divider);
   height: 10px;
 }