@opencorestack/opengridx 0.1.6 → 0.1.7

package/lib/styles/base/variables.css

@@ -0,0 +1,161 @@
+:root {
+  --ogx-row-height: 52px;
+  --ogx-header-height: 56px;
+  --ogx-cell-padding: 16px;
+  --ogx-color-primary: #3b82f6; 
+  --ogx-color-primary-dark: #2563eb; 
+  --ogx-color-primary-light: #eff6ff; 
+  --ogx-color-primary-focus: rgba(59, 130, 246, 0.5);
+  --ogx-color-secondary: #8b5cf6;
+  --ogx-color-secondary-dark: #7c3aed;
+  --ogx-color-secondary-light: #f5f3ff;
+  --ogx-color-white: #ffffff;
+  --ogx-color-black: #0f172a;
+  --ogx-color-gray-50: #f8fafc;
+  --ogx-color-gray-100: #f1f5f9;
+  --ogx-color-gray-200: #e2e8f0;
+  --ogx-color-gray-300: #cbd5e1;
+  --ogx-color-gray-400: #94a3b8;
+  --ogx-color-gray-500: #64748b;
+  --ogx-color-gray-600: #475569;
+  --ogx-color-gray-700: #334155;
+  --ogx-color-gray-800: #1e293b;
+  --ogx-color-gray-900: #0f172a;
+  --ogx-color-success: #10b981; 
+  --ogx-color-warning: #f59e0b; 
+  --ogx-color-error: #ef4444;   
+  --ogx-color-info: #0ea5e9;    
+  --ogx-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --ogx-font-family-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
+  --ogx-font-size-xs: 0.75rem;    
+  --ogx-font-size-sm: 0.875rem;   
+  --ogx-font-size-md: 1rem;       
+  --ogx-font-size-lg: 1.125rem;   
+  --ogx-font-size-xl: 1.25rem;    
+  --ogx-font-weight-light: 300;
+  --ogx-font-weight-regular: 400;
+  --ogx-font-weight-medium: 500;
+  --ogx-font-weight-semibold: 600;
+  --ogx-font-weight-bold: 700;
+  --ogx-line-height-tight: 1.2;
+  --ogx-line-height-normal: 1.5;
+  --ogx-line-height-relaxed: 1.75;
+  --ogx-spacing-xs: 0.25rem;   
+  --ogx-spacing-sm: 0.5rem;    
+  --ogx-spacing-md: 1rem;      
+  --ogx-spacing-lg: 1.5rem;    
+  --ogx-spacing-xl: 2rem;      
+  --ogx-spacing-xxl: 3rem;     
+  --ogx-border-width-thin: 1px;
+  --ogx-border-width-medium: 2px;
+  --ogx-border-width-thick: 3px;
+  --ogx-border-radius-sm: 4px;
+  --ogx-border-radius-md: 8px;
+  --ogx-border-radius-lg: 12px;
+  --ogx-border-radius-xl: 16px;
+  --ogx-border-radius-round: 50%;
+  --ogx-border-color: var(--ogx-color-gray-200); 
+  --ogx-border-color-hover: var(--ogx-color-gray-300);
+  --ogx-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --ogx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  --ogx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --ogx-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
+  --ogx-z-index-base: 0;
+  --ogx-z-index-dropdown: 1000;
+  --ogx-z-index-sticky: 1020;
+  --ogx-z-index-fixed: 1030;
+  --ogx-z-index-modal-backdrop: 1040;
+  --ogx-z-index-modal: 1050;
+  --ogx-z-index-popover: 1060;
+  --ogx-z-index-tooltip: 1070;
+  --ogx-transition-duration-fast: 150ms;
+  --ogx-transition-duration-normal: 250ms;
+  --ogx-transition-duration-slow: 350ms;
+  --ogx-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --ogx-grid-row-height-compact: 32px;
+  --ogx-grid-row-height-standard: 52px;
+  --ogx-grid-row-height-comfortable: 72px;
+  --ogx-grid-header-height: 56px;
+  --ogx-grid-cell-padding-x: 10px; 
+  --ogx-grid-cell-padding-y: 8px;
+  --ogx-grid-cell-font-size: 13px;
+  --ogx-grid-header-font-size: 13px;
+  --ogx-grid-line-height: var(--ogx-line-height-normal);
+  --ogx-grid-background: var(--ogx-color-white);
+  --ogx-grid-border-color: var(--ogx-color-gray-200);
+  --ogx-grid-header-background: var(--ogx-color-gray-50);
+  --ogx-grid-header-text: var(--ogx-color-gray-700);
+  --ogx-grid-header-hover-background: var(--ogx-color-gray-100);
+  --ogx-grid-header-sorted-background: var(--ogx-color-gray-50);
+  --ogx-grid-row-text: var(--ogx-color-gray-800);
+  --ogx-grid-row-hover-background: var(--ogx-color-gray-50);
+  --ogx-grid-row-alternate-background: var(--ogx-grid-background); 
+  --ogx-grid-row-selected-background: var(--ogx-color-primary-light);
+  --ogx-grid-row-selected-hover-background: #dbeafe; 
+  --ogx-grid-cell-focus-border: var(--ogx-color-primary);
+  --ogx-grid-pinned-left-shadow: 4px 0 24px -4px rgba(0, 0, 0, 0.05); 
+  --ogx-grid-pinned-right-shadow: -4px 0 24px -4px rgba(0, 0, 0, 0.05);
+  --ogx-skeleton-base: #f0f0f0;
+  --ogx-skeleton-highlight: #f8f8f8;
+  /* ── Overlay / Menu / Dropdown tokens ───────────────────────────────── */
+  --ogx-overlay-background: #ffffff;
+  --ogx-overlay-border: #e2e8f0;
+  --ogx-overlay-text: #334155;
+  --ogx-overlay-shadow: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.06);
+  --ogx-overlay-item-hover-bg: #f8fafc;
+  --ogx-overlay-item-hover-text: #0f172a;
+  --ogx-overlay-item-selected-text: var(--ogx-color-primary);
+  --ogx-overlay-item-selected-bg: var(--ogx-color-primary-light);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ogx-color-primary: #60a5fa;
+    --ogx-color-primary-dark: #3b82f6;
+    --ogx-color-primary-light: #1e3a5f;
+    --ogx-color-primary-focus: rgba(96, 165, 250, 0.4);
+    --ogx-color-white: #0f172a;
+    --ogx-color-black: #f8fafc;
+    --ogx-color-gray-50: #1e293b;
+    --ogx-color-gray-100: #334155;
+    --ogx-color-gray-200: #475569;
+    --ogx-color-gray-300: #64748b;
+    --ogx-color-gray-400: #94a3b8;
+    --ogx-color-gray-500: #cbd5e1;
+    --ogx-color-gray-600: #e2e8f0;
+    --ogx-color-gray-700: #e2e8f0;
+    --ogx-color-gray-800: #f1f5f9;
+    --ogx-color-gray-900: #f8fafc;
+    --ogx-border-color: #334155;
+    --ogx-border-color-hover: #475569;
+    --ogx-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --ogx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+    --ogx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+    --ogx-grid-background: #0f172a;
+    --ogx-grid-border-color: #334155;
+    --ogx-grid-header-background: #1e293b;
+    --ogx-grid-header-text: #e2e8f0;
+    --ogx-grid-header-hover-background: #334155;
+    --ogx-grid-header-sorted-background: #1e3a5f;
+    --ogx-grid-row-text: #cbd5e1;
+    --ogx-grid-row-hover-background: #1e293b;
+    --ogx-grid-row-alternate-background: #162032;
+    --ogx-grid-row-selected-background: #1e3a5f;
+    --ogx-grid-row-selected-hover-background: #1d4ed8;
+    --ogx-grid-cell-focus-border: #60a5fa;
+    --ogx-checkbox-bg: #1e293b;
+    --ogx-checkbox-border: #64748b;
+    --ogx-grid-pinned-left-shadow: 4px 0 24px -4px rgba(0, 0, 0, 0.3);
+    --ogx-grid-pinned-right-shadow: -4px 0 24px -4px rgba(0, 0, 0, 0.3);
+    --ogx-skeleton-base: #2a2a2a;
+    --ogx-skeleton-highlight: #333333;
+    /* ── Overlay / Menu / Dropdown tokens (dark) ────────────────────────── */
+    --ogx-overlay-background: #1e293b;
+    --ogx-overlay-border: #334155;
+    --ogx-overlay-text: #cbd5e1;
+    --ogx-overlay-shadow: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.2);
+    --ogx-overlay-item-hover-bg: #334155;
+    --ogx-overlay-item-hover-text: #f1f5f9;
+    --ogx-overlay-item-selected-text: var(--ogx-color-primary);
+    --ogx-overlay-item-selected-bg: #1e3a5f;
+  }
+}

package/lib/styles/opengridx.css

@@ -0,0 +1,27 @@
+@import './base/variables.css';
+@import './base/reset.css';
+@import '../components/DataGrid/DataGrid.css';
+@import '../components/Header/Header.css';
+@import '../components/Row/Row.css';
+@import '../components/Cell/Cell.css';
+@import '../components/Cell/GridEditInputCell.css';
+@import '../components/Pagination/Pagination.css';
+@import '../components/SkeletonRow/SkeletonRow.css';
+@import '../components/Skeleton/Skeleton.css';
+@import '../components/DetailPanel/DetailPanel.css';
+@import '../components/ColumnResizeHandle/ColumnResizeHandle.css';
+@import '../components/ColumnVisibilityPanel/ColumnVisibilityPanel.css';
+@import '../components/QuickFilter/QuickFilter.css';
+@import '../components/ui/Button.css';
+@import '../components/ui/Checkbox.css';
+@import '../components/ui/DragHandleIcon.css';
+@import '../components/ui/ExpandIcon.css';
+@import '../components/ui/Input.css';
+@import '../components/Toolbar/GridToolbar.css';
+@import '../components/Toolbar/PivotPanel.css';
+@import '../components/FilterPanel/FilterPanel.css';
+@import '../components/Toolbar/GlobalSearch.css';
+@import '../components/Header/ColumnMenu.css';
+@import '../components/ListView/ListView.css';
+@import '../components/ColumnGroupHeader/ColumnGroupHeader.css';
+@import '../components/Tooltip/Tooltip.css';

package/lib/styles/opengridx.css.d.ts

@@ -0,0 +1,4 @@
+// Type declaration for @opencorestack/opengridx/styles
+// This is a CSS file — importing it applies the OpenGridX styles globally.
+declare const styles: never;
+export default styles;

package/lib/theme/DataGridThemeProvider.tsx

@@ -0,0 +1,276 @@
+import React from 'react';
+import type { GridTheme } from './types';
+
+const lightBase: Record<string, string> = {
+
+    '--ogx-color-primary': '#3b82f6',
+    '--ogx-color-primary-dark': '#2563eb',
+    '--ogx-color-primary-light': '#eff6ff',
+    '--ogx-color-primary-focus': 'rgba(59, 130, 246, 0.5)',
+
+    '--ogx-color-secondary': '#8b5cf6',
+    '--ogx-color-secondary-dark': '#7c3aed',
+    '--ogx-color-secondary-light': '#f5f3ff',
+
+    '--ogx-color-white': '#ffffff',
+    '--ogx-color-black': '#0f172a',
+
+    '--ogx-border-color': '#e2e8f0',
+    '--ogx-border-color-hover': '#cbd5e1',
+
+    '--ogx-shadow-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    '--ogx-shadow-md': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
+    '--ogx-shadow-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02)',
+
+    '--ogx-grid-background': '#ffffff',
+    '--ogx-grid-border-color': '#e2e8f0',
+    '--ogx-grid-header-background': '#f8fafc',
+    '--ogx-grid-header-text': '#334155',
+    '--ogx-grid-header-hover-background': '#f1f5f9',
+    '--ogx-grid-header-sorted-background': '#f8fafc',
+    '--ogx-grid-row-text': '#1e293b',
+    '--ogx-grid-row-hover-background': '#f8fafc',
+    '--ogx-grid-row-alternate-background': 'transparent',
+    '--ogx-grid-row-selected-background': '#eff6ff',
+    '--ogx-grid-row-selected-hover-background': '#dbeafe',
+    '--ogx-grid-cell-focus-border': '#3b82f6',
+
+    '--ogx-checkbox-bg': '#ffffff',
+    '--ogx-checkbox-border': '#94a3b8',
+
+    '--ogx-grid-pinned-left-shadow': '4px 0 24px -4px rgba(0, 0, 0, 0.05)',
+    '--ogx-grid-pinned-right-shadow': '-4px 0 24px -4px rgba(0, 0, 0, 0.05)',
+
+    // Toolbars
+    '--ogx-toolbar-background': 'transparent',
+    '--ogx-toolbar-text': '#1e293b',
+    '--ogx-toolbar-border': '#e2e8f0',
+    '--ogx-toolbar-btn-bg': 'transparent',
+    '--ogx-toolbar-btn-hover': '#f1f5f9',
+    '--ogx-toolbar-btn-text': '#334155',
+    '--ogx-toolbar-btn-primary-bg': '#3b82f6',
+    '--ogx-toolbar-btn-primary-hover': '#2563eb',
+    '--ogx-toolbar-btn-primary-text': '#ffffff',
+    '--ogx-toolbar-btn-danger-bg': 'rgba(239, 68, 68, 0.08)',
+    '--ogx-toolbar-btn-danger-hover': 'rgba(239, 68, 68, 0.15)',
+    '--ogx-toolbar-btn-danger-text': '#ef4444',
+    '--ogx-toolbar-input-bg': '#ffffff',
+    '--ogx-toolbar-input-text': '#1e293b',
+    '--ogx-toolbar-input-border': '#cbd5e1',
+    '--ogx-toolbar-input-focus-border': '#3b82f6',
+    '--ogx-toolbar-input-focus-shadow': '0 0 0 3px rgba(59, 130, 246, 0.12)',
+    '--ogx-toolbar-chip-bg': '#f1f5f9',
+    '--ogx-toolbar-chip-text': '#475569',
+    '--ogx-toolbar-chip-active-bg': 'rgba(59, 130, 246, 0.12)',
+    '--ogx-toolbar-chip-active-text': '#2563eb',
+
+    // Overlays & Menus
+    '--ogx-overlay-background': '#ffffff',
+    '--ogx-overlay-text': '#1e293b',
+    '--ogx-overlay-border': '#e2e8f0',
+    '--ogx-overlay-shadow': '0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.06)',
+    '--ogx-overlay-item-hover-bg': '#f8fafc',
+    '--ogx-overlay-item-hover-text': '#0f172a',
+    '--ogx-overlay-item-selected-bg': 'rgba(59, 130, 246, 0.08)',
+    '--ogx-overlay-item-selected-text': '#2563eb',
+    '--ogx-overlay-item-danger-bg': 'rgba(239, 68, 68, 0.08)',
+    '--ogx-overlay-item-danger-text': '#ef4444',
+
+    // Scrollbars
+    '--ogx-scrollbar-thumb': 'rgba(148, 163, 184, 0.5)',
+    '--ogx-scrollbar-track': 'transparent',
+    '--ogx-scrollbar-size': '10px',
+
+    // Skeletons
+    '--ogx-skeleton-base': '#f1f5f9',
+    '--ogx-skeleton-highlight': '#ffffff',
+    '--ogx-skeleton-dark-base': '#e2e8f0',
+    '--ogx-skeleton-dark-highlight': '#f8fafc',
+};
+
+function themeToCSS(theme: GridTheme): Record<string, string> {
+    const vars: Record<string, string> = {};
+
+    function set(cssVar: string, value: string | undefined) {
+        if (value !== undefined) {
+            vars[cssVar] = value;
+        }
+    }
+
+    if (theme.colors) {
+        const c = theme.colors;
+        set('--ogx-color-primary', c.primary);
+        set('--ogx-color-primary-dark', c.primaryDark);
+        set('--ogx-color-primary-light', c.primaryLight);
+        set('--ogx-color-primary-focus', c.primaryFocus);
+        set('--ogx-color-secondary', c.secondary);
+        set('--ogx-color-secondary-dark', c.secondaryDark);
+        set('--ogx-color-secondary-light', c.secondaryLight);
+        set('--ogx-color-success', c.success);
+        set('--ogx-color-warning', c.warning);
+        set('--ogx-color-error', c.error);
+        set('--ogx-color-info', c.info);
+    }
+
+    if (theme.typography) {
+        const t = theme.typography;
+        set('--ogx-font-family', t.fontFamily);
+        set('--ogx-font-family-mono', t.fontFamilyMono);
+        set('--ogx-font-size-xs', t.fontSizeXs);
+        set('--ogx-font-size-sm', t.fontSizeSm);
+        set('--ogx-font-size-md', t.fontSizeMd);
+        set('--ogx-font-size-lg', t.fontSizeLg);
+        set('--ogx-font-size-xl', t.fontSizeXl);
+    }
+
+    if (theme.spacing) {
+        const s = theme.spacing;
+        set('--ogx-spacing-xs', s.xs);
+        set('--ogx-spacing-sm', s.sm);
+        set('--ogx-spacing-md', s.md);
+        set('--ogx-spacing-lg', s.lg);
+        set('--ogx-spacing-xl', s.xl);
+        set('--ogx-spacing-xxl', s.xxl);
+    }
+
+    if (theme.borders) {
+        const b = theme.borders;
+        set('--ogx-border-width-thin', b.widthThin);
+        set('--ogx-border-width-medium', b.widthMedium);
+        set('--ogx-border-width-thick', b.widthThick);
+        set('--ogx-border-radius-sm', b.radiusSm);
+        set('--ogx-border-radius-md', b.radiusMd);
+        set('--ogx-border-radius-lg', b.radiusLg);
+        set('--ogx-border-radius-xl', b.radiusXl);
+        set('--ogx-border-color', b.color);
+        set('--ogx-border-color-hover', b.colorHover);
+    }
+
+    if (theme.shadows) {
+        const sh = theme.shadows;
+        set('--ogx-shadow-sm', sh.sm);
+        set('--ogx-shadow-md', sh.md);
+        set('--ogx-shadow-lg', sh.lg);
+        set('--ogx-shadow-xl', sh.xl);
+    }
+
+    if (theme.grid) {
+        const g = theme.grid;
+        set('--ogx-grid-row-height-compact', g.rowHeightCompact);
+        set('--ogx-grid-row-height-standard', g.rowHeightStandard);
+        set('--ogx-row-height', g.rowHeightStandard);
+        set('--ogx-grid-row-height-comfortable', g.rowHeightComfortable);
+        set('--ogx-grid-header-height', g.headerHeight);
+        set('--ogx-header-height', g.headerHeight);
+        set('--ogx-grid-cell-padding-x', g.cellPaddingX);
+        set('--ogx-grid-cell-padding-y', g.cellPaddingY);
+        set('--ogx-grid-background', g.background);
+        set('--ogx-grid-border-color', g.borderColor);
+        set('--ogx-grid-header-background', g.headerBackground);
+        set('--ogx-grid-header-text', g.headerText);
+        set('--ogx-grid-header-hover-background', g.headerHoverBackground);
+        set('--ogx-grid-header-sorted-background', g.headerSortedBackground);
+        set('--ogx-grid-row-text', g.rowText);
+        set('--ogx-grid-row-hover-background', g.rowHoverBackground);
+        set('--ogx-grid-row-alternate-background', g.rowAlternateBackground);
+        set('--ogx-grid-row-selected-background', g.rowSelectedBackground);
+        set('--ogx-grid-row-selected-hover-background', g.rowSelectedHoverBackground);
+        set('--ogx-grid-cell-focus-border', g.cellFocusBorder);
+        set('--ogx-grid-pinned-left-shadow', g.pinnedLeftShadow);
+        set('--ogx-grid-pinned-right-shadow', g.pinnedRightShadow);
+        set('--ogx-checkbox-bg', g.checkboxBg);
+        set('--ogx-checkbox-border', g.checkboxBorder);
+    }
+
+    if (theme.transitions) {
+        const tr = theme.transitions;
+        set('--ogx-transition-duration-fast', tr.durationFast);
+        set('--ogx-transition-duration-normal', tr.durationNormal);
+        set('--ogx-transition-duration-slow', tr.durationSlow);
+        set('--ogx-transition-easing', tr.easing);
+    }
+
+    if (theme.toolbar) {
+        const tb = theme.toolbar;
+        set('--ogx-toolbar-background', tb.background);
+        set('--ogx-toolbar-text', tb.text);
+        set('--ogx-toolbar-border', tb.border);
+        set('--ogx-toolbar-btn-bg', tb.buttonBackground);
+        set('--ogx-toolbar-btn-hover', tb.buttonHoverBackground);
+        set('--ogx-toolbar-btn-text', tb.buttonText);
+        set('--ogx-toolbar-btn-primary-bg', tb.buttonPrimaryBackground);
+        set('--ogx-toolbar-btn-primary-hover', tb.buttonPrimaryHoverBackground);
+        set('--ogx-toolbar-btn-primary-text', tb.buttonPrimaryText);
+        set('--ogx-toolbar-btn-danger-bg', tb.buttonDangerBackground);
+        set('--ogx-toolbar-btn-danger-hover', tb.buttonDangerHoverBackground);
+        set('--ogx-toolbar-btn-danger-text', tb.buttonDangerText);
+        set('--ogx-toolbar-input-bg', tb.inputBackground);
+        set('--ogx-toolbar-input-text', tb.inputText);
+        set('--ogx-toolbar-input-border', tb.inputBorder);
+        set('--ogx-toolbar-input-focus-border', tb.inputFocusBorder);
+        set('--ogx-toolbar-input-focus-shadow', tb.inputFocusShadow);
+        set('--ogx-toolbar-chip-bg', tb.chipBackground);
+        set('--ogx-toolbar-chip-text', tb.chipText);
+        set('--ogx-toolbar-chip-active-bg', tb.chipActiveBackground);
+        set('--ogx-toolbar-chip-active-text', tb.chipActiveText);
+    }
+
+    if (theme.overlays) {
+        const o = theme.overlays;
+        set('--ogx-overlay-background', o.background);
+        set('--ogx-overlay-text', o.text);
+        set('--ogx-overlay-border', o.border);
+        set('--ogx-overlay-shadow', o.shadow);
+        set('--ogx-overlay-item-hover-bg', o.itemHoverBackground);
+        set('--ogx-overlay-item-hover-text', o.itemHoverText);
+        set('--ogx-overlay-item-selected-bg', o.itemSelectedBackground);
+        set('--ogx-overlay-item-selected-text', o.itemSelectedText);
+        set('--ogx-overlay-item-danger-bg', o.itemDangerBackground);
+        set('--ogx-overlay-item-danger-text', o.itemDangerText);
+    }
+
+    if (theme.scrollbar) {
+        const scr = theme.scrollbar;
+        set('--ogx-scrollbar-thumb', scr.thumbColor);
+        set('--ogx-scrollbar-track', scr.trackColor);
+        set('--ogx-scrollbar-size', scr.size);
+    }
+
+    if (theme.skeleton) {
+        const sk = theme.skeleton;
+        set('--ogx-skeleton-base', sk.baseColor);
+        set('--ogx-skeleton-highlight', sk.highlightColor);
+        set('--ogx-skeleton-dark-base', sk.darkBaseColor);
+        set('--ogx-skeleton-dark-highlight', sk.darkHighlightColor);
+    }
+
+    return vars;
+}
+
+export interface DataGridThemeProviderProps {
+    theme: GridTheme;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export function DataGridThemeProvider({
+    theme,
+    children,
+    className,
+    style
+}: DataGridThemeProviderProps) {
+    const cssVars = React.useMemo(() => {
+
+        return { ...lightBase, ...themeToCSS(theme) };
+    }, [theme]);
+
+    return (
+        <div
+            className={`ogx-theme-provider ${className || ''}`.trim()}
+            style={{ ...style, ...cssVars } as React.CSSProperties}
+        >
+            {children}
+        </div>
+    );
+}

package/lib/theme/index.ts

@@ -0,0 +1,21 @@
+export type {
+  GridTheme,
+  GridThemeColors,
+  GridThemeTypography,
+  GridThemeSpacing,
+  GridThemeBorders,
+  GridThemeShadows,
+  GridThemeGrid,
+  GridThemeTransitions,
+} from './types';
+
+export { DataGridThemeProvider } from './DataGridThemeProvider';
+export type { DataGridThemeProviderProps } from './DataGridThemeProvider';
+
+export {
+  darkTheme,
+  roseTheme,
+  emeraldTheme,
+  amberTheme,
+  compactTheme,
+} from './presets';

package/lib/theme/presets.ts

@@ -0,0 +1,148 @@
+import type { GridTheme } from './types';
+
+export const darkTheme: GridTheme = {
+  colors: {
+    primary: '#60a5fa',       
+    primaryDark: '#3b82f6',
+    primaryLight: '#1e3a5f',   
+    primaryFocus: 'rgba(96, 165, 250, 0.4)',
+  },
+  grid: {
+    background: '#0f172a',             
+    headerBackground: '#1e293b',       
+    headerText: '#e2e8f0',             
+    headerHoverBackground: '#334155',  
+    headerSortedBackground: '#1e3a5f', 
+    rowText: '#cbd5e1',                
+    borderColor: '#334155',            
+    rowHoverBackground: '#1e293b',     
+    rowAlternateBackground: '#162032', 
+    rowSelectedBackground: '#1e3a5f',  
+    rowSelectedHoverBackground: '#1d4ed8', 
+    cellFocusBorder: '#60a5fa',
+    checkboxBg: '#1e293b',            
+    checkboxBorder: '#64748b',         
+  },
+  borders: {
+    color: '#334155',
+    colorHover: '#475569',
+  },
+  shadows: {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.3)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.3)',
+  },
+  toolbar: {
+    background: 'transparent',
+    text: '#cbd5e1',
+    border: '#334155',
+    buttonBackground: 'transparent',
+    buttonHoverBackground: '#1e293b',
+    buttonText: '#e2e8f0',
+    buttonPrimaryBackground: '#3b82f6',
+    buttonPrimaryHoverBackground: '#2563eb',
+    buttonPrimaryText: '#ffffff',
+    buttonDangerBackground: 'rgba(239, 68, 68, 0.15)',
+    buttonDangerHoverBackground: 'rgba(239, 68, 68, 0.25)',
+    buttonDangerText: '#fca5a5',
+    inputBackground: '#0f172a',
+    inputText: '#f8fafc',
+    inputBorder: '#334155',
+    inputFocusBorder: '#60a5fa',
+    inputFocusShadow: '0 0 0 3px rgba(96, 165, 250, 0.2)',
+    chipBackground: '#1e293b',
+    chipText: '#94a3b8',
+    chipActiveBackground: 'rgba(96, 165, 250, 0.2)',
+    chipActiveText: '#60a5fa',
+  },
+  overlays: {
+    background: '#1e293b',
+    text: '#f8fafc',
+    border: '#334155',
+    shadow: '0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3)',
+    itemHoverBackground: '#334155',
+    itemHoverText: '#ffffff',
+    itemSelectedBackground: 'rgba(96, 165, 250, 0.15)',
+    itemSelectedText: '#60a5fa',
+    itemDangerBackground: 'rgba(239, 68, 68, 0.15)',
+    itemDangerText: '#fca5a5',
+  },
+  scrollbar: {
+    thumbColor: 'rgba(148, 163, 184, 0.2)',
+    trackColor: 'transparent',
+  },
+  skeleton: {
+    baseColor: '#1e293b',
+    highlightColor: '#334155',
+    darkBaseColor: '#0f172a',
+    darkHighlightColor: '#1e293b',
+  }
+};
+
+export const roseTheme: GridTheme = {
+  colors: {
+    primary: '#e11d48',       
+    primaryDark: '#be123c',
+    primaryLight: '#fff1f2',  
+    primaryFocus: 'rgba(225, 29, 72, 0.4)',
+  },
+  grid: {
+    headerBackground: '#fff1f2',
+    headerHoverBackground: '#ffe4e6',
+    headerSortedBackground: '#fecdd3',
+    rowAlternateBackground: '#fff8f8',
+    rowSelectedBackground: '#ffe4e6',
+    rowSelectedHoverBackground: '#fecdd3',
+    cellFocusBorder: '#e11d48',
+  },
+};
+
+export const emeraldTheme: GridTheme = {
+  colors: {
+    primary: '#059669',       
+    primaryDark: '#047857',
+    primaryLight: '#ecfdf5',  
+    primaryFocus: 'rgba(5, 150, 105, 0.4)',
+  },
+  grid: {
+    headerBackground: '#ecfdf5',
+    headerHoverBackground: '#d1fae5',
+    headerSortedBackground: '#a7f3d0',
+    rowAlternateBackground: '#f6fdf9',
+    rowSelectedBackground: '#d1fae5',
+    rowSelectedHoverBackground: '#a7f3d0',
+    cellFocusBorder: '#059669',
+  },
+};
+
+export const amberTheme: GridTheme = {
+  colors: {
+    primary: '#d97706',       
+    primaryDark: '#b45309',
+    primaryLight: '#fffbeb',  
+    primaryFocus: 'rgba(217, 119, 6, 0.4)',
+  },
+  grid: {
+    headerBackground: '#fffbeb',
+    headerHoverBackground: '#fef3c7',
+    headerSortedBackground: '#fde68a',
+    rowAlternateBackground: '#fffdf5',
+    rowSelectedBackground: '#fef3c7',
+    rowSelectedHoverBackground: '#fde68a',
+    cellFocusBorder: '#d97706',
+  },
+};
+
+export const compactTheme: GridTheme = {
+  grid: {
+    rowHeightCompact: '28px',
+    rowHeightStandard: '36px',
+    rowHeightComfortable: '48px',
+    headerHeight: '40px',
+    cellPaddingX: '8px',
+    cellPaddingY: '4px',
+  },
+  typography: {
+    fontSizeSm: '0.8rem',
+    fontSizeMd: '0.875rem',
+  },
+};