@revolist/revogrid 4.24.3 → 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.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;
 }
 

package/dist/collection/serve/controller.js

@@ -1,4 +1,5 @@
 import { generateFakeDataObjectAsync } from './data.js';
+import { modernThemeDefinitions } from './build/index.esm.js';
 
 /**
  * Map of prevented events
@@ -296,12 +297,16 @@ globalThis.timerUpdate = function (checked, inteval = 3) {
  */
 globalThis.theme = function (theme) {
   const grid = document.querySelector('revo-grid');
-  if (theme?.includes('dark')) {
+  const selectedTheme = theme || 'default';
+  const definition = modernThemeDefinitions.find(
+    item => item.name === selectedTheme,
+  );
+  if (definition?.colorScheme === 'dark' || selectedTheme.includes('dark')) {
     document.documentElement.setAttribute('data-bs-theme', 'dark');
   } else {
     document.documentElement.removeAttribute('data-bs-theme');
   }
-  grid.theme = theme || 'default';
+  grid.theme = selectedTheme;
 };
 
 globalThis.onload = onLoad;
@@ -426,6 +431,7 @@ globalThis.setColumnGroupOffsetBugDemo = () => {
 function onLoad() {
   const grid = document.querySelector('revo-grid');
 
+  grid.themeDefinitions = modernThemeDefinitions;
   grid.readonly = false;
   grid.range = true;
   grid.useClipboard = { rangeFill: true };
@@ -434,6 +440,16 @@ function onLoad() {
 
   grid.exporting = true;
   grid.rowHeaders = true;
+  const initialTheme = new URLSearchParams(location.search).get('theme');
+  if (initialTheme) {
+    globalThis.theme(initialTheme);
+    const themeOption = Array.from(
+      document.querySelectorAll('input[name="theme"]'),
+    ).find(option => option.value === initialTheme);
+    if (themeOption) {
+      themeOption.checked = true;
+    }
+  }
   // grid.rowDefinitions = [{
   //   size: 200,
   //   type: 'rgRow',

package/dist/collection/themeManager/presets/aurora.js

@@ -0,0 +1,89 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { defineTheme } from "../../types/theme";
+import { createPresetTokens } from "./shared";
+const auroraFoundation = [
+    '#34d399',
+    'rgba(52, 211, 153, 0.88)',
+    '#071714',
+    '#ecfdf5',
+    '#285047',
+    'rgba(0, 0, 0, 0.5)',
+    '#d1fae5',
+    '#1c3d36',
+];
+const auroraGrid = [
+    '#0c2420',
+    '#ecfdf5',
+    '#245047',
+    null,
+    null,
+    '#17352f',
+    null,
+    '#103d34',
+    '#0d2e28',
+    '#0a201c',
+    '#86cbb8',
+    'rgba(110, 231, 183, 0.08)',
+];
+const auroraFilterPanel = [
+    '#0b201c',
+    '#285047',
+    'rgba(0, 0, 0, 0.52)',
+    '#12352e',
+    '#23483f',
+    '#37695d',
+    '#34d399',
+    '#2dd4bf',
+    '#86cbb8',
+    '#d1fae5',
+    '#86a89f',
+    '0 0 0 3px rgba(52, 211, 153, 0.2)',
+    '#86a89f',
+    '#5eead4',
+];
+const auroraTypography = [
+    '12px',
+    '42px',
+    '11px',
+    '650',
+    'uppercase',
+    'left',
+    'left',
+    '0 12px',
+    '0 12px',
+];
+const auroraSelection = [
+    '#34d399',
+    'rgba(52, 211, 153, 0.12)',
+    '#34d399',
+    '#071714',
+    'rgba(45, 212, 191, 0.22)',
+    '#fbbf24',
+    '#5eead4',
+    '#2dd4bf',
+];
+const auroraButtons = [
+    '#052e27',
+    '#34d399',
+    '#10b981',
+    '#fb7185',
+    '#37695d',
+    '#d1fae5',
+];
+/** Compact graphite and evergreen preset with luminous emerald states. */
+export const auroraTheme = defineTheme({
+    name: 'aurora',
+    extends: 'darkCompact',
+    colorScheme: 'dark',
+    defaultRowSize: 34,
+    tokens: createPresetTokens({
+        foundation: auroraFoundation,
+        grid: auroraGrid,
+        filterPanel: auroraFilterPanel,
+        typography: auroraTypography,
+        selection: auroraSelection,
+        buttons: auroraButtons,
+    }),
+});