@revolist/revogrid 4.24.2 → 4.25.0

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,
+    }),
+});

package/dist/collection/themeManager/presets/high-contrast-dark.js

@@ -0,0 +1,89 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { defineTheme } from "../../types/theme";
+import { createPresetTokens } from "./shared";
+const highContrastDarkFoundation = [
+    '#ffd400',
+    'rgba(255, 212, 0, 0.94)',
+    '#050505',
+    '#ffffff',
+    '#d1d5db',
+    'rgba(0, 0, 0, 0.8)',
+    '#ffffff',
+    '#bfc7d5',
+];
+const highContrastDarkGrid = [
+    '#171717',
+    '#ffffff',
+    '#e5e7eb',
+    '#005f73',
+    '#303030',
+    '#737b87',
+    '#737b87',
+    '#182c3f',
+    '#202a33',
+    '#222222',
+    '#ffffff',
+    '#303030',
+];
+const highContrastDarkFilterPanel = [
+    '#0a0a0a',
+    '#ffffff',
+    'rgba(0, 0, 0, 0.85)',
+    '#171717',
+    '#d1d5db',
+    '#e5e7eb',
+    '#ffd400',
+    '#00e5ff',
+    '#e5e7eb',
+    '#ffffff',
+    '#d1d5db',
+    '0 0 0 3px #ffd400',
+    '#e5e7eb',
+    '#ffd400',
+];
+const highContrastDarkTypography = [
+    '14px',
+    '48px',
+    '13px',
+    '700',
+    'none',
+    'left',
+    'left',
+    '0 14px',
+    '0 14px',
+];
+const highContrastDarkSelection = [
+    '#00e5ff',
+    'rgba(0, 229, 255, 0.2)',
+    '#ffd400',
+    '#000000',
+    'rgba(0, 229, 255, 0.32)',
+    '#ffd400',
+    '#ff7ad9',
+    '#ffd400',
+];
+const highContrastDarkButtons = [
+    '#000000',
+    '#ffd400',
+    '#7cfc00',
+    '#ff8080',
+    '#ffffff',
+    '#ffffff',
+];
+/** High-contrast dark preset with luminous yellow and cyan interaction states. */
+export const highContrastDarkTheme = defineTheme({
+    name: 'highContrastDark',
+    extends: 'darkMaterial',
+    colorScheme: 'dark',
+    defaultRowSize: 40,
+    tokens: createPresetTokens({
+        foundation: highContrastDarkFoundation,
+        grid: highContrastDarkGrid,
+        filterPanel: highContrastDarkFilterPanel,
+        typography: highContrastDarkTypography,
+        selection: highContrastDarkSelection,
+        buttons: highContrastDarkButtons,
+    }),
+});

package/dist/collection/themeManager/presets/high-contrast.js

@@ -0,0 +1,89 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { defineTheme } from "../../types/theme";
+import { createPresetTokens } from "./shared";
+const highContrastFoundation = [
+    '#003eaa',
+    'rgba(0, 62, 170, 0.92)',
+    '#ffffff',
+    '#000000',
+    '#374151',
+    'rgba(0, 0, 0, 0.35)',
+    '#111827',
+    '#374151',
+];
+const highContrastGrid = [
+    '#111827',
+    '#ffffff',
+    '#ffffff',
+    '#003eaa',
+    '#1f2937',
+    '#6b7280',
+    '#6b7280',
+    '#d6e9ff',
+    '#e8f2ff',
+    '#e5e7eb',
+    '#000000',
+    '#d1d5db',
+];
+const highContrastFilterPanel = [
+    '#ffffff',
+    '#111827',
+    'rgba(0, 0, 0, 0.4)',
+    '#ffffff',
+    '#4b5563',
+    '#111827',
+    '#003eaa',
+    '#003eaa',
+    '#374151',
+    '#000000',
+    '#374151',
+    '0 0 0 3px #ffbf00',
+    '#111827',
+    '#003eaa',
+];
+const highContrastTypography = [
+    '14px',
+    '48px',
+    '13px',
+    '700',
+    'none',
+    'left',
+    'left',
+    '0 14px',
+    '0 14px',
+];
+const highContrastSelection = [
+    '#003eaa',
+    'rgba(0, 95, 204, 0.2)',
+    '#003eaa',
+    '#ffffff',
+    'rgba(0, 95, 204, 0.3)',
+    '#a61b1b',
+    '#5b21b6',
+    '#ffbf00',
+];
+const highContrastButtons = [
+    '#ffffff',
+    '#003eaa',
+    '#006b3c',
+    '#b91c1c',
+    '#111827',
+    '#111827',
+];
+/** High-contrast light preset with dark structure and vivid blue focus states. */
+export const highContrastTheme = defineTheme({
+    name: 'highContrast',
+    extends: 'material',
+    colorScheme: 'light',
+    defaultRowSize: 40,
+    tokens: createPresetTokens({
+        foundation: highContrastFoundation,
+        grid: highContrastGrid,
+        filterPanel: highContrastFilterPanel,
+        typography: highContrastTypography,
+        selection: highContrastSelection,
+        buttons: highContrastButtons,
+    }),
+});

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

@@ -0,0 +1,25 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+export { oceanTheme } from './ocean';
+export { midnightTheme } from './midnight';
+export { auroraTheme } from './aurora';
+export { highContrastTheme } from './high-contrast';
+export { highContrastDarkTheme } from './high-contrast-dark';
+import { oceanTheme } from "./ocean";
+import { midnightTheme } from "./midnight";
+import { auroraTheme } from "./aurora";
+import { highContrastTheme } from "./high-contrast";
+import { highContrastDarkTheme } from "./high-contrast-dark";
+/** Accessible light and dark high-contrast choices. */
+export const highContrastThemeDefinitions = [
+    highContrastTheme,
+    highContrastDarkTheme,
+];
+/** Ready-to-register modern presets. Presets remain opt-in and per grid. */
+export const modernThemeDefinitions = [
+    oceanTheme,
+    midnightTheme,
+    auroraTheme,
+    ...highContrastThemeDefinitions,
+];

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

@@ -0,0 +1,89 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { defineTheme } from "../../types/theme";
+import { createPresetTokens } from "./shared";
+const midnightFoundation = [
+    '#8b5cf6',
+    'rgba(139, 92, 246, 0.9)',
+    '#0b1020',
+    '#f8fafc',
+    '#334155',
+    'rgba(0, 0, 0, 0.5)',
+    '#dbeafe',
+    '#25324d',
+];
+const midnightGrid = [
+    '#121a2f',
+    '#e2e8f0',
+    '#2a3855',
+    null,
+    null,
+    '#202c46',
+    null,
+    '#172554',
+    '#111c35',
+    '#10182b',
+    '#94a3b8',
+    'rgba(100, 116, 139, 0.12)',
+];
+const midnightFilterPanel = [
+    '#111827',
+    '#334155',
+    'rgba(0, 0, 0, 0.55)',
+    '#1e293b',
+    '#334155',
+    '#475569',
+    '#22d3ee',
+    '#22d3ee',
+    '#94a3b8',
+    '#e2e8f0',
+    '#94a3b8',
+    '0 0 0 3px rgba(34, 211, 238, 0.2)',
+    '#94a3b8',
+    '#22d3ee',
+];
+const midnightTypography = [
+    '13px',
+    '46px',
+    '12px',
+    '650',
+    'none',
+    'left',
+    'left',
+    '0 14px',
+    '0 14px',
+];
+const midnightSelection = [
+    '#22d3ee',
+    'rgba(34, 211, 238, 0.12)',
+    '#22d3ee',
+    '#0b1020',
+    'rgba(34, 211, 238, 0.24)',
+    '#f472b6',
+    '#a78bfa',
+    '#22d3ee',
+];
+const midnightButtons = [
+    '#ffffff',
+    '#7c3aed',
+    '#059669',
+    '#e11d48',
+    '#475569',
+    '#e2e8f0',
+];
+/** Deep navy preset with cyan selection and violet action accents. */
+export const midnightTheme = defineTheme({
+    name: 'midnight',
+    extends: 'darkMaterial',
+    colorScheme: 'dark',
+    defaultRowSize: 40,
+    tokens: createPresetTokens({
+        foundation: midnightFoundation,
+        grid: midnightGrid,
+        filterPanel: midnightFilterPanel,
+        typography: midnightTypography,
+        selection: midnightSelection,
+        buttons: midnightButtons,
+    }),
+});

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

@@ -0,0 +1,89 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { defineTheme } from "../../types/theme";
+import { createPresetTokens } from "./shared";
+const oceanFoundation = [
+    '#2563eb',
+    'rgba(37, 99, 235, 0.88)',
+    '#f8fafc',
+    '#0f172a',
+    '#cbd5e1',
+    'rgba(15, 23, 42, 0.16)',
+    '#334155',
+    '#d8e2ee',
+];
+const oceanGrid = [
+    '#eef4fb',
+    '#0f172a',
+    '#d7e2ee',
+    null,
+    null,
+    '#e5edf5',
+    null,
+    '#dbeafe',
+    '#eff6ff',
+    '#e7f0fa',
+    '#475569',
+    '#f1f5f9',
+];
+const oceanFilterPanel = [
+    '#ffffff',
+    '#dbe4ef',
+    'rgba(15, 23, 42, 0.18)',
+    '#f1f5f9',
+    '#e2e8f0',
+    '#cbd5e1',
+    '#2563eb',
+    '#2563eb',
+    '#64748b',
+    '#334155',
+    '#64748b',
+    '0 0 0 3px rgba(37, 99, 235, 0.2)',
+    '#64748b',
+    '#2563eb',
+];
+const oceanTypography = [
+    '13px',
+    '44px',
+    '12px',
+    '650',
+    'none',
+    'left',
+    'left',
+    '0 14px',
+    '0 14px',
+];
+const oceanSelection = [
+    '#2563eb',
+    'rgba(37, 99, 235, 0.1)',
+    '#2563eb',
+    '#ffffff',
+    'rgba(37, 99, 235, 0.22)',
+    '#f97316',
+    '#64748b',
+    '#3b82f6',
+];
+const oceanButtons = [
+    '#ffffff',
+    '#2563eb',
+    '#059669',
+    '#dc2626',
+    '#cbd5e1',
+    '#334155',
+];
+/** Bright blue and slate preset for data-heavy daytime interfaces. */
+export const oceanTheme = defineTheme({
+    name: 'ocean',
+    extends: 'material',
+    colorScheme: 'light',
+    defaultRowSize: 38,
+    tokens: createPresetTokens({
+        foundation: oceanFoundation,
+        grid: oceanGrid,
+        filterPanel: oceanFilterPanel,
+        typography: oceanTypography,
+        selection: oceanSelection,
+        buttons: oceanButtons,
+    }),
+});

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

@@ -0,0 +1,64 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+export const modernSystemFont = "Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+/** Maps compact, typed preset data to the public semantic theme-token contract. */
+export function createPresetTokens({ foundation, grid, filterPanel, typography, selection, buttons, }) {
+    const [primary, primaryTransparent, background, foreground, divider, shadow, text, border,] = foundation;
+    const [headerBg, headerColor, headerBorder, headerFocusedBg, headerHoverBg, cellBorder, cellVerticalBorder, focusedBg, rowHover, rowHeadersBg, rowHeadersColor, cellDisabledBg,] = grid;
+    const [filterPanelBg, filterPanelBorder, filterPanelShadow, filterPanelInputBg, filterPanelDivider, filterPanelSelectBorder, filterPanelSelectBorderHover, filterPanelReorderAccent, filterPanelReorderColor, filterPanelText, filterPanelMutedText, filterPanelFocusRing, filterPanelIcon, filterPanelIconActive,] = filterPanel;
+    const [fontSize, headerHeight, headerFontSize, headerFontWeight, headerTextTransform, headerTextAlign, cellTextAlign, headerPadding, cellPadding,] = typography;
+    const [selectionBorder, selectionBg, autofillHandleBg, autofillHandleBorder, rangeHandleBg, temporaryRangeBorder, temporarySelectionBorder, headerResizeHover,] = selection;
+    const [buttonText, buttonBg, buttonSuccessBg, buttonDangerBg, buttonOutlineBorder, buttonOutlineText,] = buttons;
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ primary,
+        primaryTransparent,
+        background,
+        foreground,
+        divider,
+        shadow,
+        text,
+        border,
+        headerBg,
+        headerColor,
+        headerBorder }, (headerFocusedBg ? { headerFocusedBg } : {})), (headerHoverBg ? { headerHoverBg } : {})), { cellBorder }), (cellVerticalBorder ? { cellVerticalBorder } : {})), { focusedBg,
+        rowHover,
+        rowHeadersBg,
+        rowHeadersColor,
+        cellDisabledBg,
+        filterPanelBg,
+        filterPanelBorder,
+        filterPanelShadow,
+        filterPanelInputBg,
+        filterPanelDivider,
+        filterPanelSelectBorder,
+        filterPanelSelectBorderHover,
+        filterPanelReorderAccent,
+        filterPanelReorderColor,
+        filterPanelText,
+        filterPanelMutedText,
+        filterPanelFocusRing,
+        filterPanelIcon,
+        filterPanelIconActive, fontFamily: modernSystemFont, fontSize,
+        headerHeight,
+        headerFontSize,
+        headerFontWeight,
+        headerTextTransform,
+        headerTextAlign,
+        cellTextAlign,
+        headerPadding,
+        cellPadding,
+        selectionBorder,
+        selectionBg,
+        autofillHandleBg,
+        autofillHandleBorder,
+        rangeHandleBg,
+        temporaryRangeBorder,
+        temporarySelectionBorder,
+        headerResizeHover,
+        buttonText,
+        buttonBg,
+        buttonSuccessBg,
+        buttonDangerBg,
+        buttonOutlineBorder,
+        buttonOutlineText });
+}