simple-table-core 3.8.5 → 3.8.7

package/src/styles/themes/neutral.css

@@ -12,18 +12,20 @@
   --st-scrollbar-bg-color: var(--st-neutral-100);
   --st-scrollbar-thumb-color: var(--st-neutral-400);
   --st-scrollbar-width: thin;
-  --st-scrollbar-thumb-border-radius: 4px;
 
   /* Base/Structural colors */
   --st-border-color: var(--st-neutral-300);
+  --st-body-background-color: var(--st-neutral-50);
   --st-footer-background-color: var(--st-neutral-50);
+  --st-footer-text-color: var(--st-neutral-600);
   --st-last-group-row-separator-border-color: var(--st-neutral-400);
 
   /* Row colors */
   --st-odd-row-background-color: var(--st-neutral-50);
   --st-even-row-background-color: var(--st-neutral-100);
   --st-hover-row-background-color: var(--st-neutral-200);
-  --st-selected-row-background-color: var(--st-neutral-200);
+  /* One step darker than hover so a selected row stays visible while hovering */
+  --st-selected-row-background-color: var(--st-neutral-300);
 
   /* Column colors */
   --st-odd-column-background-color: var(--st-neutral-50);
@@ -94,8 +96,8 @@
   --st-tooltip-background-color: var(--st-neutral-800);
   --st-tooltip-text-color: var(--st-white);
   --st-tooltip-border-radius: 6px;
-  --st-tooltip-padding: 8px 12px;
-  --st-tooltip-font-size: 13px;
+  --st-tooltip-padding: 6px 10px;
+  --st-tooltip-font-size: 12px;
   --st-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 
   /* Header selection colors */

package/src/styles/themes/theme-custom.css

@@ -1,254 +1,7 @@
-/* theme="custom" baseline — same tokens as modern-light so the grid is never
- * missing CSS variables. Structural rules below use var(--st-*) (not hardcoded
- * light colors) so inline tokens from a theme builder survive higher specificity.
+/* theme="custom" baseline. The `.theme-custom` selector is defined alongside
+ * `.theme-modern-light` in modern-light.css so the two never drift — the
+ * custom theme is the modern-light token set, with individual tokens
+ * overridden inline by the theme builder. This file exists so consumers can
+ * `import "simple-table-core/styles/themes/theme-custom.css"` directly.
  */
-.theme-custom {
-  /* Layout/Structure variables - Tighter, more compact */
-  --st-border-radius: 4px;
-  --st-cell-padding: 12px;
-
-  /* Spacing variables - Reduced for cleaner look */
-  --st-spacing-small: 4px;
-  --st-spacing-medium: 8px;
-
-  /* Scrollbar variables - Minimal */
-  --st-scrollbar-bg-color: #fafafa;
-  --st-scrollbar-thumb-color: #d1d5db;
-  --st-scrollbar-width: thin;
-
-  /* Base/Structural colors - aligned with modern-light (gray-200) */
-  --st-border-color: #e5e7eb;
-  --st-footer-background-color: var(--st-white);
-  --st-last-group-row-separator-border-color: #e5e7eb;
-
-  /* Row colors - Clean white background; when useOddEvenRowBackground is on,
-   * even rows pick up a very subtle off-white band for readable striping. */
-  --st-odd-row-background-color: var(--st-white);
-  --st-even-row-background-color: #fafafa;
-  --st-hover-row-background-color: #f3f4f6;
-  --st-selected-row-background-color: #eff6ff;
-
-  /* Column colors - No alternating columns by default */
-  --st-odd-column-background-color: var(--st-white);
-  --st-even-column-background-color: var(--st-white);
-
-  /* Header colors - Minimal, clean header */
-  --st-header-background-color: var(--st-white);
-  --st-sub-header-background-color: #fafafa;
-  --st-header-label-color: #111827;
-  --st-header-icon-color: #6b7280;
-
-  /* Cell colors - Clean, high contrast text */
-  --st-cell-color: #111827;
-  --st-cell-odd-row-color: #374151;
-  --st-edit-cell-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --st-sub-cell-background-color: #f9fafb;
-  --st-sub-cell-hover-background-color: #f3f4f6;
-
-  /* Selection colors - Subtle blue tint */
-  --st-selected-cell-background-color: #dbeafe;
-  --st-selected-first-cell-background-color: #eff6ff;
-  --st-selected-cell-color: #111827;
-  --st-selected-first-cell-color: #111827;
-  --st-selected-sub-cell-background-color: #bfdbfe;
-  --st-selected-sub-cell-color: #111827;
-  --st-dragging-background-color: #f3f4f6;
-  --st-dragging-sub-header-background-color: #e5e7eb;
-
-  /* Interactive element colors */
-  --st-resize-handle-color: #e5e7eb;
-  --st-resize-handle-selected-color: #3b82f6;
-
-  /* Border colors - Modern blue accent */
-  --st-selected-border-color: #3b82f6;
-  --st-editable-cell-focus-border-color: #3b82f6;
-  --st-focus-ring-color: #3b82f6;
-
-  /* Button colors - Clean, minimal */
-  --st-button-hover-background-color: #f3f4f6;
-  --st-button-active-background-color: #3b82f6;
-  --st-next-prev-btn-color: #6b7280;
-  --st-next-prev-btn-disabled-color: #d1d5db;
-  --st-page-btn-color: #6b7280;
-  --st-page-btn-hover-background-color: #f3f4f6;
-
-  /* Checkbox colors */
-  --st-checkbox-checked-background-color: #3b82f6;
-  --st-checkbox-checked-border-color: #3b82f6;
-  --st-checkbox-border-color: #d1d5db;
-
-  /* Column editor colors */
-  --st-column-editor-background-color: var(--st-white);
-  --st-column-editor-popout-background-color: var(--st-white);
-  --st-column-editor-text-color: #6b7280;
-
-  /* Form element colors */
-  --st-datepicker-weekday-color: #6b7280;
-  --st-datepicker-other-month-color: #d1d5db;
-  --st-filter-button-disabled-background-color: #f3f4f6;
-  --st-filter-button-disabled-text-color: #9ca3af;
-
-  /* Flash/Animation colors */
-  --st-cell-flash-color: #dbeafe;
-  --st-copy-flash-color: #3b82f6;
-  --st-warning-flash-color: #fca5a5;
-
-  /* Tooltip variables */
-  --st-tooltip-background-color: #1f2937;
-  --st-tooltip-text-color: var(--st-white);
-  --st-tooltip-border-radius: 6px;
-  --st-tooltip-padding: 6px 10px;
-  --st-tooltip-font-size: 12px;
-  --st-tooltip-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-
-  /* Header selection colors */
-  --st-header-selected-background-color: #3b82f6;
-  --st-header-selected-label-color: var(--st-white);
-  --st-header-selected-icon-color: var(--st-white);
-  --st-header-highlight-indicator-color: #dbeafe;
-  --st-selection-highlight-indicator-color: #f3f4f6;
-
-  /* Utility colors */
-  --st-loading-skeleton-bg-color: #f3f4f6;
-  --st-chart-color: #3b82f6;
-  --st-chart-fill-color: #dbeafe;
-
-  /* Drag and drop colors */
-  --st-drag-separator-color: #3b82f6;
-
-  /* Body background for state rows */
-  --st-body-background-color: var(--st-white);
-}
-
-/* Custom theme structural overrides — colors from tokens only */
-.theme-custom .st-wrapper {
-  border: var(--st-border-width) solid var(--st-border-color);
-}
-
-/* Subtle header border */
-.theme-custom .st-header-pinned-left,
-.theme-custom .st-header-main,
-.theme-custom .st-header-pinned-right {
-  border-bottom: var(--st-border-width) solid var(--st-border-color);
-}
-
-/* Remove heavy borders on pinned sections */
-.theme-custom .st-header-pinned-left,
-.theme-custom .st-body-pinned-left {
-  border-right: var(--st-border-width) solid var(--st-border-color);
-}
-
-.theme-custom .st-header-pinned-right,
-.theme-custom .st-body-pinned-right {
-  border-left: var(--st-border-width) solid var(--st-border-color);
-}
-
-/* Cleaner row separators */
-.theme-custom .st-row-separator {
-  background-color: var(--st-hover-row-background-color);
-}
-
-/* Lighter header cell styling */
-.theme-custom .st-header-cell {
-  font-weight: 500;
-  font-size: 14px;
-  color: var(--st-header-icon-color);
-}
-
-/* Cleaner cell text */
-.theme-custom .st-cell-content {
-  font-size: 14px;
-  color: var(--st-cell-color);
-}
-
-/* Subtle hover effect */
-.theme-custom .st-row.hovered {
-  transition: background-color 0.15s ease;
-}
-
-/* Footer uses the same tokens as the rest of the table (not forced light) */
-.theme-custom .st-footer {
-  border-top: var(--st-border-width) solid var(--st-border-color);
-  background-color: var(--st-footer-background-color);
-  padding: 12px 16px;
-  gap: 12px;
-}
-
-/* Footer text styling */
-.theme-custom .st-footer-results-text {
-  color: var(--st-cell-color);
-  font-size: 14px;
-}
-
-/* Footer pagination container - hide extra buttons on smaller screens */
-.theme-custom .st-footer-pagination {
-  gap: 2px;
-  flex-wrap: nowrap;
-  overflow: hidden;
-}
-
-/* Pagination ellipsis */
-.theme-custom .st-page-ellipsis {
-  color: var(--st-page-btn-color);
-  font-weight: 400;
-  padding: 0 4px;
-}
-
-/* Cleaner pagination buttons - more compact */
-.theme-custom .st-page-btn {
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--st-page-btn-color);
-  padding: 6px 8px;
-  min-width: 36px;
-  transition: all 0.15s ease;
-  margin-right: 0;
-  flex-shrink: 0;
-}
-
-.theme-custom .st-page-btn:hover {
-  background-color: var(--st-page-btn-hover-background-color);
-}
-
-.theme-custom .st-page-btn.active {
-  background-color: var(--st-button-active-background-color);
-  color: var(--st-header-selected-label-color);
-  font-weight: 600;
-}
-
-/* Next/Prev buttons */
-.theme-custom .st-next-prev-btn {
-  padding: 6px 8px;
-  border-radius: 4px;
-  transition: all 0.15s ease;
-  margin-left: 4px;
-  flex-shrink: 0;
-}
-
-.theme-custom .st-next-prev-btn:not(.disabled):hover {
-  background-color: var(--st-page-btn-hover-background-color);
-}
-
-/* Modern scrollbar */
-.theme-custom .st-horizontal-scrollbar-container {
-  border-top: var(--st-border-width) solid var(--st-border-color);
-  background-color: var(--st-scrollbar-bg-color);
-}
-
-/* Cleaner group headers */
-.theme-custom .st-group-header {
-  border-bottom: var(--st-border-width) solid var(--st-border-color);
-  font-weight: 500;
-}
-
-/* Modern checkbox styling */
-.theme-custom .st-checkbox-custom {
-  border-radius: 4px;
-  border: 1.5px solid var(--st-checkbox-border-color);
-}
-
-.theme-custom .st-checkbox-custom.st-checked {
-  background-color: var(--st-checkbox-checked-background-color);
-  border-color: var(--st-checkbox-checked-border-color);
-}
+@import "./modern-light.css";

package/src/styles/themes/frost.css

@@ -1,116 +0,0 @@
-/* Frost Theme */
-.theme-frost {
-  /* Layout/Structure variables */
-  --st-border-radius: 0px;
-  --st-cell-padding: 8px;
-
-  /* Spacing variables */
-  --st-spacing-small: 4px;
-  --st-spacing-medium: 8px;
-
-  /* Scrollbar variables */
-  --st-scrollbar-bg-color: #f8faff;
-  --st-scrollbar-thumb-color: #c5d1dd;
-  --st-scrollbar-width: thin;
-  --st-scrollbar-thumb-border-radius: 4px;
-
-  /* Base/Structural colors */
-  --st-border-color: #e1e7ea;
-  --st-footer-background-color: #f8faff;
-  --st-last-group-row-separator-border-color: #c5d1dd;
-
-  /* Row colors - Crisp white with a faint icy band on even rows when the
-   * useOddEvenRowBackground option is enabled. */
-  --st-odd-row-background-color: #ffffff;
-  --st-even-row-background-color: #f4f8fc;
-  --st-hover-row-background-color: #e5effe;
-  --st-selected-row-background-color: #d4e4fd;
-
-  /* Column colors */
-  --st-odd-column-background-color: #ffffff;
-  --st-even-column-background-color: #ffffff;
-
-  /* Header colors */
-  --st-header-background-color: #f8faff;
-  --st-sub-header-background-color: #e5effe;
-  --st-sub-cell-background-color: #f8faff;
-  --st-sub-cell-hover-background-color: #d4e4fd;
-  --st-header-label-color: #0b1215;
-  --st-header-icon-color: #5a6c7d;
-
-  /* Cell colors */
-  --st-cell-color: #0b1215;
-  --st-cell-odd-row-color: #0b1215;
-  --st-edit-cell-shadow: 0 1px 2px 0 rgba(11, 18, 21, 0.05);
-
-  /* Selection colors */
-  --st-selected-cell-background-color: #c9dcfb;
-  --st-selected-first-cell-background-color: #d4e4fd;
-  --st-selected-cell-color: #0b1215;
-  --st-selected-first-cell-color: #0b1215;
-  --st-selected-sub-cell-background-color: #c9dcfb;
-  --st-selected-sub-cell-color: #0b1215;
-  --st-dragging-background-color: #d0dce8;
-  --st-dragging-sub-header-background-color: #0d9488;
-
-  /* Interactive element colors */
-  --st-resize-handle-color: #c5d1dd;
-  --st-resize-handle-selected-color: #5a6c7d;
-
-  /* Border colors */
-  --st-selected-border-color: #5a9cf8;
-  --st-editable-cell-focus-border-color: #5a9cf8;
-  --st-focus-ring-color: #5a9cf8;
-
-  /* Button colors */
-  --st-button-hover-background-color: #e5effe;
-  --st-button-active-background-color: #5a9cf8;
-  --st-next-prev-btn-color: #5a6c7d;
-  --st-next-prev-btn-disabled-color: #c5d1dd;
-  --st-page-btn-color: #5a6c7d;
-  --st-page-btn-hover-background-color: #e5effe;
-
-  /* Checkbox colors */
-  --st-checkbox-checked-background-color: #5a9cf8;
-  --st-checkbox-checked-border-color: #4a8ce8;
-  --st-checkbox-border-color: #e1e7ea;
-
-  /* Column editor colors */
-  --st-column-editor-background-color: #ffffff;
-  --st-column-editor-popout-background-color: #ffffff;
-  --st-column-editor-text-color: #5a6c7d;
-
-  /* Form element colors */
-  --st-datepicker-weekday-color: #5a6c7d;
-  --st-datepicker-other-month-color: #c5d1dd;
-  --st-filter-button-disabled-background-color: #e1e7ea;
-  --st-filter-button-disabled-text-color: #5a6c7d;
-
-  /* Flash/Animation colors */
-  --st-cell-flash-color: #d0dce8;
-  --st-copy-flash-color: #5a9cf8;
-  --st-warning-flash-color: #f87171;
-
-  /* Tooltip variables */
-  --st-tooltip-background-color: #0b1215;
-  --st-tooltip-text-color: #ffffff;
-  --st-tooltip-border-radius: 6px;
-  --st-tooltip-padding: 8px 12px;
-  --st-tooltip-font-size: 13px;
-  --st-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-
-  /* Header selection colors */
-  --st-header-selected-background-color: #5a9cf8;
-  --st-header-selected-label-color: #ffffff;
-  --st-header-selected-icon-color: #ffffff;
-  --st-header-highlight-indicator-color: #c9dcfb;
-  --st-selection-highlight-indicator-color: #e1e7ea;
-
-  /* Utility colors */
-  --st-loading-skeleton-bg-color: #e1e7ea;
-  --st-chart-color: var(--st-blue-300);
-  --st-chart-fill-color: var(--st-blue-300);
-
-  /* Drag and drop colors */
-  --st-drag-separator-color: #0d9488;
-}

package/src/styles/themes/sky.css

@@ -1,115 +0,0 @@
-/* Sky Theme */
-.theme-sky {
-  /* Layout/Structure variables */
-  --st-border-radius: 4px;
-  --st-cell-padding: 8px;
-
-  /* Spacing variables */
-  --st-spacing-small: 4px;
-  --st-spacing-medium: 8px;
-
-  /* Scrollbar variables */
-  --st-scrollbar-bg-color: var(--st-blue-50);
-  --st-scrollbar-thumb-color: var(--st-blue-300);
-  --st-scrollbar-width: thin;
-  --st-scrollbar-thumb-border-radius: 4px;
-
-  /* Base/Structural colors */
-  --st-border-color: var(--st-blue-300);
-  --st-footer-background-color: var(--st-blue-50);
-  --st-last-group-row-separator-border-color: var(--st-blue-400);
-
-  /* Row colors */
-  --st-odd-row-background-color: var(--st-blue-50);
-  --st-even-row-background-color: var(--st-blue-100);
-  --st-hover-row-background-color: var(--st-blue-200);
-  --st-selected-row-background-color: var(--st-sky-100);
-
-  /* Column colors */
-  --st-odd-column-background-color: var(--st-blue-50);
-  --st-even-column-background-color: var(--st-blue-100);
-
-  /* Header colors */
-  --st-header-background-color: var(--st-blue-200);
-  --st-sub-header-background-color: var(--st-blue-300);
-  --st-sub-cell-background-color: var(--st-sky-100);
-  --st-sub-cell-hover-background-color: var(--st-sky-200);
-  --st-header-label-color: var(--st-blue-900);
-  --st-header-icon-color: var(--st-blue-600);
-
-  /* Cell colors */
-  --st-cell-color: var(--st-blue-900);
-  --st-cell-odd-row-color: var(--st-blue-800);
-  --st-edit-cell-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-
-  /* Selection colors */
-  --st-selected-cell-background-color: var(--st-blue-400);
-  --st-selected-first-cell-background-color: var(--st-blue-300);
-  --st-selected-cell-color: var(--st-blue-900);
-  --st-selected-first-cell-color: var(--st-blue-900);
-  --st-selected-sub-cell-background-color: var(--st-sky-300);
-  --st-selected-sub-cell-color: var(--st-blue-900);
-  --st-dragging-background-color: var(--st-sky-300);
-  --st-dragging-sub-header-background-color: var(--st-sky-400);
-
-  /* Interactive element colors */
-  --st-resize-handle-color: var(--st-blue-400);
-  --st-resize-handle-selected-color: var(--st-white);
-
-  /* Border colors */
-  --st-selected-border-color: var(--st-blue-600);
-  --st-editable-cell-focus-border-color: var(--st-blue-500);
-  --st-focus-ring-color: var(--st-blue-600);
-
-  /* Button colors */
-  --st-button-hover-background-color: var(--st-blue-200);
-  --st-button-active-background-color: var(--st-blue-600);
-  --st-next-prev-btn-color: var(--st-blue-600);
-  --st-next-prev-btn-disabled-color: var(--st-blue-400);
-  --st-page-btn-color: var(--st-blue-600);
-  --st-page-btn-hover-background-color: var(--st-blue-200);
-
-  /* Checkbox colors */
-  --st-checkbox-checked-background-color: var(--st-blue-600);
-  --st-checkbox-checked-border-color: var(--st-blue-600);
-  --st-checkbox-border-color: var(--st-blue-300);
-
-  /* Column editor colors */
-  --st-column-editor-background-color: var(--st-blue-50);
-  --st-column-editor-popout-background-color: var(--st-blue-50);
-  --st-column-editor-text-color: var(--st-blue-600);
-
-  /* Form element colors */
-  --st-datepicker-weekday-color: var(--st-blue-600);
-  --st-datepicker-other-month-color: var(--st-blue-400);
-  --st-filter-button-disabled-background-color: var(--st-blue-300);
-  --st-filter-button-disabled-text-color: var(--st-blue-500);
-
-  /* Flash/Animation colors */
-  --st-cell-flash-color: var(--st-sky-200);
-  --st-copy-flash-color: var(--st-blue-600);
-  --st-warning-flash-color: var(--st-orange-400);
-
-  /* Tooltip variables */
-  --st-tooltip-background-color: var(--st-blue-900);
-  --st-tooltip-text-color: var(--st-white);
-  --st-tooltip-border-radius: 6px;
-  --st-tooltip-padding: 8px 12px;
-  --st-tooltip-font-size: 13px;
-  --st-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-
-  /* Header selection colors */
-  --st-header-selected-background-color: var(--st-blue-600);
-  --st-header-selected-label-color: var(--st-white);
-  --st-header-selected-icon-color: var(--st-white);
-  --st-header-highlight-indicator-color: var(--st-blue-400);
-  --st-selection-highlight-indicator-color: var(--st-blue-400);
-
-  /* Utility colors */
-  --st-loading-skeleton-bg-color: var(--st-blue-200);
-  --st-chart-color: var(--st-blue-900);
-  --st-chart-fill-color: var(--st-blue-900);
-
-  /* Drag and drop colors */
-  --st-drag-separator-color: var(--st-blue-600);
-}

package/src/styles/themes/violet.css

@@ -1,116 +0,0 @@
-/* Violet Theme */
-.theme-violet {
-  /* Layout/Structure variables */
-  --st-border-radius: 8px;
-  --st-cell-padding: 12px;
-
-  /* Spacing variables */
-  --st-spacing-small: 6px;
-  --st-spacing-medium: 10px;
-
-  /* Scrollbar variables */
-  --st-scrollbar-bg-color: var(--st-stone-100);
-  --st-scrollbar-thumb-color: var(--st-violet-500);
-  --st-scrollbar-width: thin;
-  --st-scrollbar-thumb-border-radius: 4px;
-
-  /* Base/Structural colors */
-  --st-border-color: var(--st-stone-200);
-  --st-footer-background-color: var(--st-stone-100);
-  --st-last-group-row-separator-border-color: var(--st-stone-300);
-
-  /* Row colors */
-  --st-odd-row-background-color: var(--st-amber-50);
-  --st-even-row-background-color: var(--st-amber-100);
-  --st-hover-row-background-color: var(--st-amber-200);
-  --st-selected-row-background-color: var(--st-violet-100);
-
-  /* Column colors */
-  --st-odd-column-background-color: var(--st-violet-50);
-  --st-even-column-background-color: var(--st-amber-50);
-
-  /* Header colors */
-  --st-header-background-color: var(--st-violet-600);
-  --st-sub-header-background-color: var(--st-violet-500);
-  --st-sub-cell-background-color: var(--st-violet-100);
-  --st-sub-cell-hover-background-color: var(--st-violet-200);
-  --st-header-label-color: var(--st-white);
-  --st-header-icon-color: var(--st-violet-200);
-
-  /* Cell colors */
-  --st-cell-color: var(--st-stone-700);
-  --st-cell-odd-row-color: var(--st-stone-700);
-  --st-edit-cell-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1),
-    0 2px 4px -1px rgba(124, 58, 237, 0.06);
-
-  /* Selection colors */
-  --st-selected-cell-background-color: var(--st-violet-50);
-  --st-selected-first-cell-background-color: var(--st-violet-100);
-  --st-selected-cell-color: var(--st-violet-800);
-  --st-selected-first-cell-color: var(--st-violet-800);
-  --st-selected-sub-cell-background-color: var(--st-violet-200);
-  --st-selected-sub-cell-color: var(--st-violet-800);
-  --st-dragging-background-color: var(--st-violet-200);
-  --st-dragging-sub-header-background-color: var(--st-violet-300);
-
-  /* Interactive element colors */
-  --st-resize-handle-color: var(--st-violet-400);
-  --st-resize-handle-selected-color: var(--st-white);
-
-  /* Border colors */
-  --st-selected-border-color: var(--st-violet-500);
-  --st-editable-cell-focus-border-color: var(--st-violet-500);
-  --st-focus-ring-color: var(--st-violet-600);
-
-  /* Button colors */
-  --st-button-hover-background-color: var(--st-violet-50);
-  --st-button-active-background-color: var(--st-violet-600);
-  --st-next-prev-btn-color: var(--st-violet-600);
-  --st-next-prev-btn-disabled-color: var(--st-violet-400);
-  --st-page-btn-color: var(--st-violet-600);
-  --st-page-btn-hover-background-color: var(--st-violet-50);
-
-  /* Checkbox colors */
-  --st-checkbox-checked-background-color: var(--st-violet-500);
-  --st-checkbox-checked-border-color: var(--st-violet-600);
-  --st-checkbox-border-color: var(--st-stone-200);
-
-  /* Column editor colors */
-  --st-column-editor-background-color: var(--st-white);
-  --st-column-editor-popout-background-color: var(--st-white);
-  --st-column-editor-text-color: var(--st-violet-600);
-
-  /* Form element colors */
-  --st-datepicker-weekday-color: var(--st-violet-600);
-  --st-datepicker-other-month-color: var(--st-violet-400);
-  --st-filter-button-disabled-background-color: var(--st-stone-200);
-  --st-filter-button-disabled-text-color: var(--st-stone-500);
-
-  /* Flash/Animation colors */
-  --st-cell-flash-color: var(--st-violet-200);
-  --st-copy-flash-color: var(--st-violet-600);
-  --st-warning-flash-color: var(--st-red-400);
-
-  /* Tooltip variables */
-  --st-tooltip-background-color: var(--st-violet-800);
-  --st-tooltip-text-color: var(--st-white);
-  --st-tooltip-border-radius: 6px;
-  --st-tooltip-padding: 8px 12px;
-  --st-tooltip-font-size: 13px;
-  --st-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-
-  /* Header selection colors */
-  --st-header-selected-background-color: var(--st-violet-600);
-  --st-header-selected-label-color: var(--st-white);
-  --st-header-selected-icon-color: var(--st-white);
-  --st-header-highlight-indicator-color: var(--st-violet-800);
-  --st-selection-highlight-indicator-color: var(--st-stone-400);
-
-  /* Utility colors */
-  --st-loading-skeleton-bg-color: var(--st-stone-200);
-  --st-chart-color: var(--st-violet-400);
-  --st-chart-fill-color: var(--st-violet-400);
-
-  /* Drag and drop colors */
-  --st-drag-separator-color: var(--st-violet-500);
-}