@alaarab/ogrid-react-fluent 2.0.11 → 2.0.12

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <strong>OGrid for Fluent UI</strong> — The lightweight React data grid with enterprise features and zero enterprise cost.
+  <strong>OGrid for React Fluent</strong> — The lightweight React data grid with enterprise features and zero enterprise cost.
 </p>
 
 <p align="center">

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -1,133 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from 'react';
-import { Checkbox, makeStyles, tokens, mergeClasses, } from '@fluentui/react-components';
+import { Button, Checkbox, } from '@fluentui/react-components';
 import { TableSettingsRegular, ChevronDownRegular, ChevronUpRegular } from '@fluentui/react-icons';
 import { useColumnChooserState } from '@alaarab/ogrid-react';
-const useStyles = makeStyles({
-    container: {
-        position: 'relative',
-        display: 'inline-flex',
-    },
-    triggerButton: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '6px',
-        padding: '6px 12px',
-        border: `1px solid ${tokens.colorNeutralStroke1}`,
-        borderRadius: tokens.borderRadiusMedium,
-        backgroundColor: tokens.colorNeutralBackground1,
-        cursor: 'pointer',
-        fontSize: tokens.fontSizeBase300,
-        fontWeight: tokens.fontWeightSemibold,
-        color: tokens.colorNeutralForeground1,
-        transitionDuration: '0.15s',
-        transitionProperty: 'all',
-        transitionTimingFunction: 'ease',
-        ':hover': {
-            backgroundColor: tokens.colorNeutralBackground1Hover,
-            border: `1px solid ${tokens.colorNeutralStroke1Hover}`,
-        },
-    },
-    triggerButtonOpen: {
-        border: `1px solid ${tokens.colorBrandStroke1}`,
-    },
-    buttonIcon: {
-        fontSize: '16px',
-    },
-    chevron: {
-        fontSize: '12px',
-        color: tokens.colorNeutralForeground3,
-    },
-    dropdown: {
-        position: 'absolute',
-        top: 'calc(100% + 4px)',
-        right: '0',
-        zIndex: 10000,
-        minWidth: '220px',
-        backgroundColor: tokens.colorNeutralBackground1,
-        borderRadius: tokens.borderRadiusMedium,
-        boxShadow: tokens.shadow16,
-        border: `1px solid ${tokens.colorNeutralStroke1}`,
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    header: {
-        padding: '8px 12px',
-        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
-        fontWeight: tokens.fontWeightSemibold,
-        fontSize: tokens.fontSizeBase300,
-        color: tokens.colorNeutralForeground1,
-        backgroundColor: tokens.colorNeutralBackground2,
-    },
-    optionsList: {
-        maxHeight: '320px',
-        overflowY: 'auto',
-        padding: 0,
-    },
-    optionItem: {
-        padding: '4px 12px',
-        display: 'flex',
-        alignItems: 'center',
-        minHeight: '32px',
-        ':hover': {
-            backgroundColor: tokens.colorNeutralBackground1Hover,
-        },
-    },
-    actions: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        gap: '8px',
-        padding: '8px 12px',
-        borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
-        backgroundColor: tokens.colorNeutralBackground2,
-    },
-    clearButton: {
-        padding: '6px 12px',
-        border: `1px solid ${tokens.colorNeutralStroke1}`,
-        borderRadius: tokens.borderRadiusSmall,
-        backgroundColor: tokens.colorNeutralBackground1,
-        color: tokens.colorNeutralForeground2,
-        fontSize: tokens.fontSizeBase200,
-        fontWeight: tokens.fontWeightRegular,
-        cursor: 'pointer',
-        transitionDuration: '0.15s',
-        transitionProperty: 'all',
-        ':hover': {
-            backgroundColor: tokens.colorNeutralBackground1Hover,
-            color: tokens.colorNeutralForeground1,
-            border: `1px solid ${tokens.colorNeutralStroke1Hover}`,
-        },
-    },
-    selectAllButton: {
-        padding: '6px 16px',
-        border: 'none',
-        borderRadius: tokens.borderRadiusSmall,
-        backgroundColor: tokens.colorBrandBackground,
-        color: tokens.colorNeutralForegroundOnBrand,
-        fontSize: tokens.fontSizeBase200,
-        fontWeight: tokens.fontWeightSemibold,
-        cursor: 'pointer',
-        transitionDuration: '0.15s',
-        transitionProperty: 'all',
-        ':hover': {
-            backgroundColor: tokens.colorBrandBackgroundHover,
-        },
-    },
-});
+import styles from './ColumnChooser.module.css';
 export const ColumnChooser = (props) => {
     const { columns, visibleColumns, onVisibilityChange, className } = props;
-    const classes = useStyles();
     const buttonRef = useRef(null);
     const dropdownRef = useRef(null);
-    const { open: isOpen, handleToggle, handleClose, handleCheckboxChange: setColumnVisible, handleSelectAll, handleClearAll, visibleCount, totalCount, } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange });
+    const { open, handleToggle, handleClose, handleCheckboxChange: setColumnVisible, handleSelectAll, handleClearAll, visibleCount, totalCount, } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange });
     useEffect(() => {
-        if (!isOpen)
+        if (!open)
             return;
         const handleClickOutside = (event) => {
             const target = event.target;
-            const isOutsideDropdown = dropdownRef.current && !dropdownRef.current.contains(target);
-            const isOutsideButton = buttonRef.current && !buttonRef.current.contains(target);
-            if (isOutsideDropdown && isOutsideButton) {
+            if (dropdownRef.current && !dropdownRef.current.contains(target) &&
+                buttonRef.current && !buttonRef.current.contains(target)) {
                 handleClose();
             }
         };
@@ -138,15 +26,9 @@ export const ColumnChooser = (props) => {
             clearTimeout(timeoutId);
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [isOpen, handleClose]);
-    const handleCheckboxChange = (columnKey) => {
-        return (ev, data) => {
-            ev.stopPropagation();
-            setColumnVisible(columnKey)(data.checked === true);
-        };
-    };
-    const handleDropdownClick = (e) => {
-        e.stopPropagation();
+    }, [open, handleClose]);
+    const handleCheckboxChange = (columnKey) => (_ev, data) => {
+        setColumnVisible(columnKey)(data.checked === true);
     };
-    return (_jsxs("div", { className: `${classes.container} ${className || ''}`, children: [_jsxs("button", { type: "button", ref: buttonRef, className: mergeClasses(classes.triggerButton, isOpen && classes.triggerButtonOpen), onClick: handleToggle, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: [_jsx(TableSettingsRegular, { className: classes.buttonIcon }), _jsxs("span", { children: ["Column Visibility (", visibleCount, " of ", totalCount, ")"] }), isOpen ? _jsx(ChevronUpRegular, { className: classes.chevron }) : _jsx(ChevronDownRegular, { className: classes.chevron })] }), isOpen && (_jsxs("div", { className: classes.dropdown, ref: dropdownRef, onClick: handleDropdownClick, children: [_jsxs("div", { className: classes.header, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }), _jsx("div", { className: classes.optionsList, children: columns.map(column => (_jsx("div", { className: classes.optionItem, children: _jsx(Checkbox, { label: column.name, checked: visibleColumns.has(column.columnId), onChange: handleCheckboxChange(column.columnId) }) }, column.columnId))) }), _jsxs("div", { className: classes.actions, children: [_jsx("button", { type: "button", className: classes.clearButton, onClick: handleClearAll, children: "Clear All" }), _jsx("button", { type: "button", className: classes.selectAllButton, onClick: handleSelectAll, children: "Select All" })] })] }))] }));
+    return (_jsxs("div", { className: `${styles.container} ${className || ''}`, children: [_jsxs(Button, { ref: buttonRef, appearance: "outline", icon: _jsx(TableSettingsRegular, {}), onClick: handleToggle, "aria-expanded": open, "aria-haspopup": "listbox", children: ["Column Visibility (", visibleCount, " of ", totalCount, ")", open ? _jsx(ChevronUpRegular, {}) : _jsx(ChevronDownRegular, {})] }), open && (_jsxs("div", { ref: dropdownRef, className: styles.dropdown, children: [_jsxs("div", { className: styles.header, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }), _jsx("div", { className: styles.optionsList, children: columns.map((column) => (_jsx("div", { className: styles.optionItem, children: _jsx(Checkbox, { label: column.name, checked: visibleColumns.has(column.columnId), onChange: handleCheckboxChange(column.columnId) }) }, column.columnId))) }), _jsxs("div", { className: styles.actions, children: [_jsx(Button, { appearance: "subtle", size: "small", onClick: handleClearAll, children: "Clear All" }), _jsx(Button, { appearance: "primary", size: "small", onClick: handleSelectAll, children: "Select All" })] })] }))] }));
 };

package/dist/esm/ColumnChooser/ColumnChooser.module.css

@@ -1,15 +1,50 @@
-.columnChooser {
-  display: inline-block;
+.container {
+  position: relative;
+  display: inline-flex;
 }
 
-.columnChooserHeader {
-  padding: 10px 15px;
-  border-bottom: 1px solid var(--colorNeutralStroke2, #edebe9);
-  margin-bottom: 5px;
+.dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 10000;
+  min-width: 220px;
+  display: flex;
+  flex-direction: column;
+  background: var(--colorNeutralBackground1, #fff);
+  border: 1px solid var(--colorNeutralStroke2, #edebe9);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  padding: 0;
 }
-.columnChooserHeader h3 {
-  margin: 0;
-  font-size: 14px;
+
+.header {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--colorNeutralStroke2, #edebe9);
   font-weight: 600;
-  color: var(--colorNeutralForeground1, #323130);
+  font-size: 13px;
+}
+
+.optionsList {
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.optionItem {
+  padding: 4px 12px;
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+}
+.optionItem:hover {
+  background: var(--colorNeutralBackground1Hover, #f5f5f5);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--colorNeutralStroke2, #edebe9);
 }

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -2,48 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from 'react';
 import { Popover, PopoverSurface } from '@fluentui/react-components';
 import { ArrowUpRegular, ArrowDownRegular, ArrowSortRegular, FilterRegular } from '@fluentui/react-icons';
-import { useColumnHeaderFilterState } from '@alaarab/ogrid-react';
+import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, } from '@alaarab/ogrid-react';
 import { TextFilterPopover } from './TextFilterPopover';
 import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
 import { PeopleFilterPopover } from './PeopleFilterPopover';
 import styles from './ColumnHeaderFilter.module.css';
 export const ColumnHeaderFilter = React.memo((props) => {
-    const { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, selectedValues, onFilterChange, options, isLoadingOptions = false, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, dateValue, onDateChange, } = props;
-    const state = useColumnHeaderFilterState({
-        filterType,
-        isSorted,
-        isSortedDescending,
-        onSort,
-        selectedValues,
-        onFilterChange,
-        options,
-        isLoadingOptions,
-        textValue,
-        onTextChange,
-        selectedUser,
-        onUserChange,
-        peopleSearch,
-        dateValue,
-        onDateChange,
-    });
-    const { headerRef, popoverRef, peopleInputRef, isFilterOpen, setFilterOpen, tempSelected, setTempTextValue, searchText, setSearchText, filteredOptions, peopleSuggestions, isPeopleLoading, peopleSearchText, setPeopleSearchText, hasActiveFilter, handlers, } = state;
+    const { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, options, isLoadingOptions = false, selectedUser, } = props;
+    const state = useColumnHeaderFilterState(getColumnHeaderFilterStateParams(props));
+    const { headerRef, popoverRef, isFilterOpen, setFilterOpen, hasActiveFilter, handlers, } = state;
     const filterBtnRef = React.useRef(null);
-    const renderPopoverContent = () => {
-        if (filterType === 'multiSelect') {
-            return (_jsx(MultiSelectFilterPopover, { searchText: searchText, onSearchChange: setSearchText, options: options ?? [], filteredOptions: filteredOptions, selected: tempSelected, onOptionToggle: handlers.handleCheckboxChange, onSelectAll: handlers.handleSelectAll, onClearSelection: handlers.handleClearSelection, onApply: handlers.handleApplyMultiSelect, isLoading: isLoadingOptions, onPopoverClick: handlers.handlePopoverClick, onInputFocus: handlers.handleInputFocus, onInputMouseDown: handlers.handleInputMouseDown, onInputClick: handlers.handleInputClick, onInputKeyDown: handlers.handleInputKeyDown }));
-        }
-        if (filterType === 'text') {
-            return (_jsx(TextFilterPopover, { value: state.tempTextValue, onValueChange: setTempTextValue, onApply: handlers.handleTextApply, onClear: handlers.handleTextClear, onPopoverClick: handlers.handlePopoverClick, onInputFocus: handlers.handleInputFocus, onInputMouseDown: handlers.handleInputMouseDown, onInputClick: handlers.handleInputClick, onInputKeyDown: handlers.handleInputKeyDown }));
-        }
-        if (filterType === 'people') {
-            return (_jsx(PeopleFilterPopover, { selectedUser: selectedUser, searchText: peopleSearchText, onSearchChange: setPeopleSearchText, suggestions: peopleSuggestions, isLoading: isPeopleLoading, onUserSelect: handlers.handleUserSelect, onClearUser: handlers.handleClearUser, onPopoverClick: handlers.handlePopoverClick, inputRef: peopleInputRef }));
-        }
-        if (filterType === 'date') {
-            return (_jsxs("div", { onClick: handlers.handlePopoverClick, children: [_jsxs("div", { style: { padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }, children: ["From:", _jsx("input", { type: "date", value: state.tempDateFrom, onChange: (e) => state.setTempDateFrom(e.target.value), style: { flex: 1 } })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }, children: ["To:", _jsx("input", { type: "date", value: state.tempDateTo, onChange: (e) => state.setTempDateTo(e.target.value), style: { flex: 1 } })] })] }), _jsxs("div", { className: styles.popoverActions, children: [_jsx("button", { className: styles.clearButton, onClick: handlers.handleDateClear, disabled: !state.tempDateFrom && !state.tempDateTo, children: "Clear" }), _jsx("button", { className: styles.applyButton, onClick: handlers.handleDateApply, children: "Apply" })] })] }));
-        }
-        return null;
-    };
+    // Fluent-specific renderers that pass additional event propagation handlers
+    const fluentRenderers = React.useMemo(() => ({
+        renderMultiSelect: (p) => (_jsx(MultiSelectFilterPopover, { searchText: p.searchText, onSearchChange: p.onSearchChange, options: p.options, filteredOptions: p.filteredOptions, selected: p.selected, onOptionToggle: p.onOptionToggle, onSelectAll: p.onSelectAll, onClearSelection: p.onClearSelection, onApply: p.onApply, isLoading: p.isLoading, onPopoverClick: handlers.handlePopoverClick, onInputFocus: handlers.handleInputFocus, onInputMouseDown: handlers.handleInputMouseDown, onInputClick: handlers.handleInputClick, onInputKeyDown: handlers.handleInputKeyDown })),
+        renderText: (p) => (_jsx(TextFilterPopover, { value: p.value, onValueChange: p.onValueChange, onApply: p.onApply, onClear: p.onClear, onPopoverClick: handlers.handlePopoverClick, onInputFocus: handlers.handleInputFocus, onInputMouseDown: handlers.handleInputMouseDown, onInputClick: handlers.handleInputClick, onInputKeyDown: handlers.handleInputKeyDown })),
+        renderPeople: (p) => (_jsx(PeopleFilterPopover, { selectedUser: p.selectedUser, searchText: p.searchText, onSearchChange: p.onSearchChange, suggestions: p.suggestions, isLoading: p.isLoading, onUserSelect: p.onUserSelect, onClearUser: p.onClearUser, onPopoverClick: handlers.handlePopoverClick, inputRef: p.inputRef })),
+        renderDate: (p) => (_jsx("div", { onClick: handlers.handlePopoverClick, children: _jsx(DateFilterContent, { tempDateFrom: p.tempDateFrom, setTempDateFrom: p.setTempDateFrom, tempDateTo: p.tempDateTo, setTempDateTo: p.setTempDateTo, onApply: p.onApply, onClear: p.onClear, classNames: {
+                    popoverActions: styles.popoverActions,
+                    clearButton: styles.clearButton,
+                    applyButton: styles.applyButton,
+                } }) })),
+    }), [handlers]);
     return (_jsxs("div", { className: styles.columnHeader, ref: headerRef, children: [_jsx("div", { className: styles.headerContent, children: _jsx("span", { className: styles.columnName, title: columnName, "data-header-label": true, children: columnName }) }), _jsxs("div", { className: styles.headerActions, children: [onSort && (_jsx("button", { type: "button", className: `${styles.sortIcon} ${isSorted ? styles.sortActive : ''}`, onClick: handlers.handleSortClick, "aria-label": `Sort by ${columnName}`, title: isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort', children: isSorted ? (isSortedDescending ? _jsx(ArrowDownRegular, {}) : _jsx(ArrowUpRegular, {})) : (_jsx(ArrowSortRegular, {})) })), filterType !== 'none' && (_jsxs(_Fragment, { children: [_jsxs("button", { ref: filterBtnRef, type: "button", className: `${styles.filterIcon} ${hasActiveFilter ? styles.filterActive : ''} ${isFilterOpen ? styles.filterOpen : ''}`, onClick: handlers.handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, children: [_jsx(FilterRegular, {}), hasActiveFilter && _jsx("span", { className: styles.filterBadge })] }), _jsx(Popover, { open: isFilterOpen, onOpenChange: (_, data) => { if (!data.open)
-                                    setFilterOpen(false); }, positioning: { target: filterBtnRef.current ?? undefined, position: 'below', align: 'start', offset: 4 }, trapFocus: false, children: _jsxs(PopoverSurface, { ref: popoverRef, className: styles.filterPopover, onClick: handlers.handlePopoverClick, style: { padding: 0 }, children: [_jsxs("div", { className: styles.popoverHeader, children: ["Filter: ", columnName] }), renderPopoverContent()] }) })] }))] })] }));
+                                    setFilterOpen(false); }, positioning: { target: filterBtnRef.current ?? undefined, position: 'below', align: 'start', offset: 4 }, trapFocus: false, children: _jsxs(PopoverSurface, { ref: popoverRef, className: styles.filterPopover, onClick: handlers.handlePopoverClick, style: { padding: 0 }, children: [_jsxs("div", { className: styles.popoverHeader, children: ["Filter: ", columnName] }), renderFilterContent(filterType, state, options ?? [], isLoadingOptions, selectedUser, fluentRenderers)] }) })] }))] })] }));
 });
 ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useEffect, useState } from 'react';
+import React, { useMemo, useEffect, useState, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { getColumnHeaderMenuItems } from '@alaarab/ogrid-core';
 import styles from './ColumnHeaderMenu.module.css';
@@ -10,6 +10,7 @@ import styles from './ColumnHeaderMenu.module.css';
 export function ColumnHeaderMenu(props) {
     const { isOpen, anchorElement, onClose, onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll, canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable, } = props;
     const [position, setPosition] = useState(null);
+    const menuRef = useRef(null);
     useEffect(() => {
         if (!isOpen || !anchorElement) {
             setPosition(null);
@@ -22,6 +23,9 @@ export function ColumnHeaderMenu(props) {
         });
         const handleClickOutside = (e) => {
             const target = e.target;
+            // Don't close if clicking inside the menu itself (portal) — let onClick fire first
+            if (menuRef.current && menuRef.current.contains(target))
+                return;
             if (anchorElement && !anchorElement.contains(target)) {
                 onClose();
             }
@@ -59,7 +63,9 @@ export function ColumnHeaderMenu(props) {
     };
     if (!isOpen || !position)
         return null;
-    return createPortal(_jsx("div", { className: styles.content, style: {
+    // Portal into the closest FluentProvider so --ogrid-* bridged variables are available
+    const portalTarget = anchorElement?.closest('.fui-FluentProvider') ?? document.body;
+    return createPortal(_jsx("div", { ref: menuRef, className: styles.content, style: {
             position: 'fixed',
             top: position.top,
             left: position.left,
@@ -67,5 +73,5 @@ export function ColumnHeaderMenu(props) {
         }, children: items.map((item, idx) => (_jsxs(React.Fragment, { children: [_jsx("button", { className: styles.item, disabled: item.disabled, onClick: () => {
                         handlers[item.id]();
                         onClose();
-                    }, children: item.label }), item.divider && idx < items.length - 1 && (_jsx("div", { className: styles.separator }))] }, item.id))) }), document.body);
+                    }, children: item.label }), item.divider && idx < items.length - 1 && (_jsx("div", { className: styles.separator }))] }, item.id))) }), portalTarget);
 }

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.module.css

@@ -1,7 +1,7 @@
 .content {
   min-width: 140px;
-  background: white;
-  border: 1px solid #e0e0e0;
+  background: var(--ogrid-bg, #ffffff);
+  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   padding: 4px;
   box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
@@ -14,7 +14,7 @@
 .item {
   font-size: 13px;
   line-height: 1;
-  color: #111;
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
   border-radius: 4px;
   border: none;
   background: transparent;
@@ -30,17 +30,17 @@
   text-align: left;
 }
 .item:disabled {
-  color: #999;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
   pointer-events: none;
   cursor: not-allowed;
 }
 .item:hover:not(:disabled) {
-  background-color: #f5f5f5;
-  color: #111;
+  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
 
 .separator {
   height: 1px;
-  background-color: #e0e0e0;
+  background-color: var(--ogrid-border, rgba(0, 0, 0, 0.12));
   margin: 4px 0;
 }