commons-shared-web-ui 0.0.39 → 0.0.40

package/src/lib/modules/smart-table/smart-table.theme.scss

@@ -1,323 +1,335 @@
-@use 'sass:map';
-@use '../confirmation-modal/confirmation-modal.theme' as confirmation-modal;
-
-// Default Smart Table Theme
-$smart-table-theme-defaults: (
-  // Font & General
-  font-family: ('Roboto', sans-serif),
-  font-size: 14px,
-  text-color: #333333,
-  border-radius: 8px,
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05),
-
-  // Table Structure
-  table-bg: #ffffff,
-  table-padding: 1rem,
-  cell-padding: 1rem,
-  
-  // Borders
-  table-border: 1px solid #e0e0e0,
-  row-border: 1px solid #f0f0f0,
-  header-border: 1px solid #e0e0e0,
-
-  // Row Colors
-  row-bg: #ffffff,
-  row-hover-bg: #f9f9f9,
-  cell-hover-bg: #f0f0f0,
-  row-selected-bg: #f3e5f5,
-
-
-
-  // Header Styling
-  header-bg: #f5f5f5,
-  header-color: #333333,
-  header-font-weight: 500,
-  header-font-size: 14px,
-  header-transform: none, // uppercase, capitalize, etc.
-
-  // Toolbar
-  toolbar-bg: #ffffff,
-  toolbar-padding: 1rem,
-  toolbar-border-bottom: 1px solid #e0e0e0,
-  toolbar-gap: 1rem,
-  
-  // Search Input
-  search-bg: #f5f5f5,
-  search-border: none,
-  search-radius: 8px,
-  search-padding: 0.5rem 0.5rem 0.5rem 2rem,
-  search-wrapper-padding: 0 0.875rem,
-  search-height: 36px,
-  search-min-width: 200px,
-  search-width: auto,
-  search-icon-color: #888,
-  search-placeholder-color: #999,
-
-  // Filter Dropdowns (custom dropdown, not native select)
-  filter-bg: #ffffff,
-  filter-border: 1px solid #e0e0e0,
-  filter-radius: 8px,
-  filter-padding: 0.5rem,
-  filter-trigger-padding: 0 0.75rem,
-  filter-height: 36px,
-  filter-font-size: 14px,
-  filter-color: #555,
-  filter-hover-bg: #fafafa,
-  filter-hover-border-color: #bbb,
-  filter-active-border-color: #999,
-  filter-selected-color: #222,
-  filter-selected-border-color: #333,
-  filter-chevron-color: #999,
-  // Filter panel (dropdown drawer)
-  filter-panel-bg: #ffffff,
-  filter-panel-border: 1px solid #ebebeb,
-  filter-panel-radius: 12px,
-  filter-panel-shadow: (0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06)),
-  filter-panel-min-width: 180px,
-  filter-panel-padding: 6px,
-  filter-option-padding: 8px 12px,
-  filter-option-radius: 7px,
-  filter-option-hover-bg: #f5f5f5,
-  filter-option-selected-bg: #f0f0f0,
-  filter-option-selected-color: #111,
-
-  // Checkbox
-  checkbox-color: #e63e30,
-  checkbox-size: 18px,
-
-  // Badges (Status)
-  badge-radius: 12px,
-  badge-padding: 4px 12px,
-  badge-font-size: 12px,
-  badge-font-weight: 500,
-  
-  // Badge Variants (Backgrounds)
-  badge-success-bg: #e8f5e9,
-  badge-success-color: #2e7d32,
-  badge-warning-bg: #fff3e0,
-  badge-warning-color: #ef6c00,
-  badge-danger-bg: #ffebee,
-  badge-danger-color: #c62828,
-  badge-info-bg: #e3f2fd,
-  badge-info-color: #1565c0,
-  badge-neutral-bg: #f5f5f5,
-  badge-neutral-color: #616161,
-
-  // Pagination Container
-  pagination-padding: 1rem,
-  pagination-border-top: none,
-
-  // Frozen columns (checkbox col, first-data col, actions col)
-  frozen-col-bg: #f9f9f9,
-
-  // Actions column shadow (right-side pinned column)
-  actions-col-shadow: -4px 0 8px rgba(0, 0, 0, 0.06),
-
-  // Action circle (three-dot button)
-  action-circle-size: 32px,
-
-  // Row action dropdown menu
-  dropdown-min-width: 150px,
-  dropdown-bg: #ffffff,
-  dropdown-border: 1px solid #e0e0e0,
-  dropdown-radius: 8px,
-  dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
-  dropdown-padding: 4px,
-  dropdown-item-padding: 8px 12px,
-  dropdown-item-radius: 6px,
-  dropdown-item-hover-bg: #f5f5f5,
-
-  // Selection count strip
-  selection-strip-bg: #fafafa,
-  selection-strip-border: 1px solid rgba(0, 0, 0, 0.08),
-  selection-strip-padding: 0.45rem 1rem,
-  selection-count-color: #444,
-  selection-count-font-size: 13px,
-  selection-count-font-weight: 500,
-
-  // Action Menu (Kebab - optional implementation detail)
-  action-menu-bg: #ffffff,
-  action-menu-shadow: 0 4px 6px rgba(0,0,0,0.1),
-
-  // Loader
-  loader-color: #6200EE,
-  // Scrollbar
-  scrollbar-width: 8px,
-  scrollbar-height: 8px,
-  scrollbar-track-bg: #f1f1f1,
-  scrollbar-track-radius: 4px,
-  scrollbar-thumb-bg: #c1c1c1,
-  scrollbar-thumb-radius: 4px,
-  scrollbar-thumb-hover-bg: #a8a8a8,
-
-  // Sticky Columns
-  sticky-shadow: 2px 0 5px -2px rgba(0,0,0,0.1),
-  sticky-border-right: 1px solid rgba(0,0,0,0.05),
-
-  // Spinner
-  spinner-border-color: rgba(0, 0, 0, 0.1),
-  
-  // No Data
-  no-data-color: #888888,
-  
-  // Sort Icon
-  sort-icon-size: 0.8em
-);
-
-@mixin smart-table-theme($theme: ()) {
-  $theme: map.merge($smart-table-theme-defaults, $theme);
-
-  // --- General ---
-  --st-font-family: #{map.get($theme, font-family)};
-  --st-font-size: #{map.get($theme, font-size)};
-  --st-text-color: #{map.get($theme, text-color)};
-  --st-border-radius: #{map.get($theme, border-radius)};
-  --st-box-shadow: #{map.get($theme, box-shadow)};
-
-  // --- Table Layout ---
-  --st-table-bg: #{map.get($theme, table-bg)};
-  --st-table-padding: #{map.get($theme, table-padding)};
-  --st-cell-padding: #{map.get($theme, cell-padding)};
-  
-  // --- Borders ---
-  --st-table-border: #{map.get($theme, table-border)};
-  --st-row-border: #{map.get($theme, row-border)};
-  
-  // --- Rows ---
-  --st-row-bg: #{map.get($theme, row-bg)};
-  --st-row-hover-bg: #{map.get($theme, row-hover-bg)};
-  --st-cell-hover-bg: #{map.get($theme, cell-hover-bg)};
-  --st-row-selected-bg: #{map.get($theme, row-selected-bg)};
-
-  // --- Header ---
-  --st-header-bg: #{map.get($theme, header-bg)};
-  --st-header-color: #{map.get($theme, header-color)};
-  --st-header-weight: #{map.get($theme, header-font-weight)};
-  --st-header-size: #{map.get($theme, header-font-size)};
-  --st-header-transform: #{map.get($theme, header-transform)};
-  --st-header-border: #{map.get($theme, header-border)};
-
-  // --- Toolbar ---
-  --st-toolbar-bg: #{map.get($theme, toolbar-bg)};
-  --st-toolbar-padding: #{map.get($theme, toolbar-padding)};
-  --st-toolbar-border-bottom: #{map.get($theme, toolbar-border-bottom)};
-  --st-toolbar-gap: #{map.get($theme, toolbar-gap)};
-
-  // --- Search ---
-  --st-search-bg: #{map.get($theme, search-bg)};
-  --st-search-border: #{map.get($theme, search-border)};
-  --st-search-radius: #{map.get($theme, search-radius)};
-  --st-search-padding: #{map.get($theme, search-padding)};
-  --st-search-wrapper-padding: #{map.get($theme, search-wrapper-padding)};
-  --st-search-height: #{map.get($theme, search-height)};
-  --st-search-min-width: #{map.get($theme, search-min-width)};
-  --st-search-width: #{map.get($theme, search-width)};
-  --st-search-icon-color: #{map.get($theme, search-icon-color)};
-  --st-search-placeholder-color: #{map.get($theme, search-placeholder-color)};
-
-  // --- Filter ---
-  --st-filter-bg: #{map.get($theme, filter-bg)};
-  --st-filter-border: #{map.get($theme, filter-border)};
-  --st-filter-radius: #{map.get($theme, filter-radius)};
-  --st-filter-padding: #{map.get($theme, filter-padding)};
-  --st-filter-trigger-padding: #{map.get($theme, filter-trigger-padding)};
-  --st-filter-height: #{map.get($theme, filter-height)};
-  --st-filter-font-size: #{map.get($theme, filter-font-size)};
-  --st-filter-color: #{map.get($theme, filter-color)};
-  --st-filter-hover-bg: #{map.get($theme, filter-hover-bg)};
-  --st-filter-hover-border-color: #{map.get($theme, filter-hover-border-color)};
-  --st-filter-active-border-color: #{map.get($theme, filter-active-border-color)};
-  --st-filter-selected-color: #{map.get($theme, filter-selected-color)};
-  --st-filter-selected-border-color: #{map.get($theme, filter-selected-border-color)};
-  --st-filter-chevron-color: #{map.get($theme, filter-chevron-color)};
-  --st-filter-panel-bg: #{map.get($theme, filter-panel-bg)};
-  --st-filter-panel-border: #{map.get($theme, filter-panel-border)};
-  --st-filter-panel-radius: #{map.get($theme, filter-panel-radius)};
-  --st-filter-panel-shadow: #{map.get($theme, filter-panel-shadow)};
-  --st-filter-panel-min-width: #{map.get($theme, filter-panel-min-width)};
-  --st-filter-panel-padding: #{map.get($theme, filter-panel-padding)};
-  --st-filter-option-padding: #{map.get($theme, filter-option-padding)};
-  --st-filter-option-radius: #{map.get($theme, filter-option-radius)};
-  --st-filter-option-hover-bg: #{map.get($theme, filter-option-hover-bg)};
-  --st-filter-option-selected-bg: #{map.get($theme, filter-option-selected-bg)};
-  --st-filter-option-selected-color: #{map.get($theme, filter-option-selected-color)};
-
-  // --- Checkbox ---
-  --st-checkbox-color: #{map.get($theme, checkbox-color)};
-  --st-checkbox-size: #{map.get($theme, checkbox-size)};
-
-  // --- Badges ---
-  --st-badge-radius: #{map.get($theme, badge-radius)};
-  --st-badge-padding: #{map.get($theme, badge-padding)};
-  --st-badge-font-size: #{map.get($theme, badge-font-size)};
-  --st-badge-font-weight: #{map.get($theme, badge-font-weight)};
-
-  --st-badge-success-bg: #{map.get($theme, badge-success-bg)};
-  --st-badge-success-color: #{map.get($theme, badge-success-color)};
-  --st-badge-warning-bg: #{map.get($theme, badge-warning-bg)};
-  --st-badge-warning-color: #{map.get($theme, badge-warning-color)};
-  --st-badge-danger-bg: #{map.get($theme, badge-danger-bg)};
-  --st-badge-danger-color: #{map.get($theme, badge-danger-color)};
-  --st-badge-info-bg: #{map.get($theme, badge-info-bg)};
-  --st-badge-info-color: #{map.get($theme, badge-info-color)};
-  --st-badge-neutral-bg: #{map.get($theme, badge-neutral-bg)};
-  --st-badge-neutral-color: #{map.get($theme, badge-neutral-color)};
-  
-  // --- Pagination ---
-  --st-pagination-padding: #{map.get($theme, pagination-padding)};
-  --st-pagination-border-top: #{map.get($theme, pagination-border-top)};
-
-  // --- Loader ---
-  --st-loader-color: #{map.get($theme, loader-color)};
-
-  // --- Scrollbar ---
-  --st-scrollbar-width: #{map.get($theme, scrollbar-width)};
-  --st-scrollbar-height: #{map.get($theme, scrollbar-height)};
-  --st-scrollbar-track-bg: #{map.get($theme, scrollbar-track-bg)};
-  --st-scrollbar-track-radius: #{map.get($theme, scrollbar-track-radius)};
-  --st-scrollbar-thumb-bg: #{map.get($theme, scrollbar-thumb-bg)};
-  --st-scrollbar-thumb-radius: #{map.get($theme, scrollbar-thumb-radius)};
-  --st-scrollbar-thumb-hover-bg: #{map.get($theme, scrollbar-thumb-hover-bg)};
-
-  // --- Sticky Columns ---
-  --st-sticky-shadow: #{map.get($theme, sticky-shadow)};
-  --st-sticky-border-right: #{map.get($theme, sticky-border-right)};
-
-  // --- Spinner ---
-  --st-spinner-border-color: #{map.get($theme, spinner-border-color)};
-
-  // --- No Data ---
-  --st-no-data-color: #{map.get($theme, no-data-color)};
-
-  // --- Misc ---
-  --st-sort-icon-size: #{map.get($theme, sort-icon-size)};
-
-  // --- Frozen Columns ---
-  --st-frozen-col-bg: #{map.get($theme, frozen-col-bg)};
-  --st-actions-col-shadow: #{map.get($theme, actions-col-shadow)};
-
-  // --- Action Circle ---
-  --st-action-circle-size: #{map.get($theme, action-circle-size)};
-
-  // --- Row Action Dropdown ---
-  --st-dropdown-min-width: #{map.get($theme, dropdown-min-width)};
-  --st-dropdown-bg: #{map.get($theme, dropdown-bg)};
-  --st-dropdown-border: #{map.get($theme, dropdown-border)};
-  --st-dropdown-radius: #{map.get($theme, dropdown-radius)};
-  --st-dropdown-shadow: #{map.get($theme, dropdown-shadow)};
-  --st-dropdown-padding: #{map.get($theme, dropdown-padding)};
-  --st-dropdown-item-padding: #{map.get($theme, dropdown-item-padding)};
-  --st-dropdown-item-radius: #{map.get($theme, dropdown-item-radius)};
-  --st-dropdown-item-hover-bg: #{map.get($theme, dropdown-item-hover-bg)};
-
-  // --- Selection Strip ---
-  --st-selection-strip-bg: #{map.get($theme, selection-strip-bg)};
-  --st-selection-strip-border: #{map.get($theme, selection-strip-border)};
-  --st-selection-strip-padding: #{map.get($theme, selection-strip-padding)};
-  --st-selection-count-color: #{map.get($theme, selection-count-color)};
-  --st-selection-count-font-size: #{map.get($theme, selection-count-font-size)};
-  --st-selection-count-font-weight: #{map.get($theme, selection-count-font-weight)};
-
-  // --- Confirmation Modal (bundled so delete modal renders correctly) ---
-  @include confirmation-modal.confirmation-modal-theme();
-}
+@use 'sass:map';
+@use '../confirmation-modal/confirmation-modal.theme' as confirmation-modal;
+
+// Default Smart Table Theme
+$smart-table-theme-defaults: (
+  // Font & General
+  font-family: ('Roboto', sans-serif),
+  font-size: 14px,
+  text-color: #333333,
+  border-radius: 8px,
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05),
+
+  // Table Structure
+  table-bg: #ffffff,
+  table-padding: 1rem,
+  cell-padding: 1rem,
+  
+  // Borders
+  table-border: 1px solid #e0e0e0,
+  row-border: 1px solid #f0f0f0,
+  header-border: 1px solid #e0e0e0,
+
+  // Row Colors
+  row-bg: #ffffff,
+  row-hover-bg: #f9f9f9,
+  cell-hover-bg: #f0f0f0,
+  row-selected-bg: #f3e5f5,
+
+
+
+  // Header Styling
+  header-bg: #f5f5f5,
+  header-color: #333333,
+  header-font-weight: 500,
+  header-font-size: 14px,
+  header-transform: none, // uppercase, capitalize, etc.
+
+  // Toolbar
+  toolbar-bg: #ffffff,
+  toolbar-padding: 1rem,
+  toolbar-border-bottom: 1px solid #e0e0e0,
+  toolbar-gap: 1rem,
+  
+  // Search Input
+  search-bg: #f5f5f5,
+  search-border: none,
+  search-radius: 8px,
+  search-padding: 0.5rem 0.5rem 0.5rem 2rem,
+  search-wrapper-padding: 0 0.875rem,
+  search-height: 36px,
+  search-min-width: 200px,
+  search-width: auto,
+  search-icon-color: #888,
+  search-placeholder-color: #999,
+
+  // Filter Dropdowns (custom dropdown, not native select)
+  filter-bg: #ffffff,
+  filter-border: 1px solid #e0e0e0,
+  filter-radius: 8px,
+  filter-padding: 0.5rem,
+  filter-trigger-padding: 0 0.75rem,
+  filter-height: 36px,
+  filter-font-size: 14px,
+  filter-color: #555,
+  filter-hover-bg: #fafafa,
+  filter-hover-border-color: #bbb,
+  filter-active-border-color: #999,
+  filter-selected-color: #222,
+  filter-selected-border-color: #333,
+  filter-chevron-color: #999,
+  // Filter panel (dropdown drawer)
+  filter-panel-bg: #ffffff,
+  filter-panel-border: 1px solid #ebebeb,
+  filter-panel-radius: 12px,
+  filter-panel-shadow: (0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06)),
+  filter-panel-min-width: 180px,
+  filter-panel-padding: 6px,
+  filter-option-padding: 8px 12px,
+  filter-option-radius: 7px,
+  filter-option-hover-bg: #f5f5f5,
+  filter-option-selected-bg: #f0f0f0,
+  filter-option-selected-color: #111,
+
+  // Checkbox
+  checkbox-color: #e63e30,
+  checkbox-size: 18px,
+
+  // Badges (Status)
+  badge-radius: 12px,
+  badge-padding: 4px 12px,
+  badge-font-size: 12px,
+  badge-font-weight: 500,
+  
+  // Badge Variants (Backgrounds)
+  badge-success-bg: #e8f5e9,
+  badge-success-color: #2e7d32,
+  badge-warning-bg: #fff3e0,
+  badge-warning-color: #ef6c00,
+  badge-danger-bg: #ffebee,
+  badge-danger-color: #c62828,
+  badge-info-bg: #e3f2fd,
+  badge-info-color: #1565c0,
+  badge-neutral-bg: #f5f5f5,
+  badge-neutral-color: #616161,
+
+  // Pagination Container
+  pagination-padding: 1rem,
+  pagination-border-top: none,
+
+  // Frozen columns (checkbox col, first-data col, actions col)
+  frozen-col-bg: #f9f9f9,
+
+  // Actions column shadow (right-side pinned column)
+  actions-col-shadow: -4px 0 8px rgba(0, 0, 0, 0.06),
+
+  // Action circle (three-dot button)
+  action-circle-size: 32px,
+
+  // Row action dropdown menu
+  dropdown-min-width: 150px,
+  dropdown-bg: #ffffff,
+  dropdown-border: 1px solid #e0e0e0,
+  dropdown-radius: 8px,
+  dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
+  dropdown-padding: 4px,
+  dropdown-item-padding: 8px 12px,
+  dropdown-item-radius: 6px,
+  dropdown-item-hover-bg: #f5f5f5,
+
+  // Selection count strip
+  selection-strip-bg: #fafafa,
+  selection-strip-border: 1px solid rgba(0, 0, 0, 0.08),
+  selection-strip-padding: 0.45rem 1rem,
+  selection-count-color: #444,
+  selection-count-font-size: 13px,
+  selection-count-font-weight: 500,
+
+  // Action Menu (Kebab - optional implementation detail)
+  action-menu-bg: #ffffff,
+  action-menu-shadow: 0 4px 6px rgba(0,0,0,0.1),
+
+  // Loader
+  loader-color: #6200EE,
+  // Scrollbar
+  scrollbar-width: 8px,
+  scrollbar-height: 8px,
+  scrollbar-track-bg: #f1f1f1,
+  scrollbar-track-radius: 4px,
+  scrollbar-thumb-bg: #c1c1c1,
+  scrollbar-thumb-radius: 4px,
+  scrollbar-thumb-hover-bg: #a8a8a8,
+
+  // Sticky Columns
+  sticky-shadow: 2px 0 5px -2px rgba(0,0,0,0.1),
+  sticky-border-right: 1px solid rgba(0,0,0,0.05),
+
+  // Spinner
+  spinner-border-color: rgba(0, 0, 0, 0.1),
+  
+  // No Data
+  no-data-color: #888888,
+  
+  // Sort Icon
+  sort-icon-size: 0.8em,
+
+  // Inline inputs theme values
+  cell-input-border: 1px solid #dee2e6,
+  cell-input-focus-outline-color: #00bcd4,
+  cell-input-bg: #fcfcfc,
+  cell-select-bg: #fcfcfc
+);
+
+@mixin smart-table-theme($theme: ()) {
+  $theme: map.merge($smart-table-theme-defaults, $theme);
+
+  // --- General ---
+  --st-font-family: #{map.get($theme, font-family)};
+  --st-font-size: #{map.get($theme, font-size)};
+  --st-text-color: #{map.get($theme, text-color)};
+  --st-border-radius: #{map.get($theme, border-radius)};
+  --st-box-shadow: #{map.get($theme, box-shadow)};
+
+  // --- Table Layout ---
+  --st-table-bg: #{map.get($theme, table-bg)};
+  --st-table-padding: #{map.get($theme, table-padding)};
+  --st-cell-padding: #{map.get($theme, cell-padding)};
+  
+  // --- Borders ---
+  --st-table-border: #{map.get($theme, table-border)};
+  --st-row-border: #{map.get($theme, row-border)};
+  
+  // --- Rows ---
+  --st-row-bg: #{map.get($theme, row-bg)};
+  --st-row-hover-bg: #{map.get($theme, row-hover-bg)};
+  --st-cell-hover-bg: #{map.get($theme, cell-hover-bg)};
+  --st-row-selected-bg: #{map.get($theme, row-selected-bg)};
+
+  // --- Header ---
+  --st-header-bg: #{map.get($theme, header-bg)};
+  --st-header-color: #{map.get($theme, header-color)};
+  --st-header-weight: #{map.get($theme, header-font-weight)};
+  --st-header-size: #{map.get($theme, header-font-size)};
+  --st-header-transform: #{map.get($theme, header-transform)};
+  --st-header-border: #{map.get($theme, header-border)};
+
+  // --- Toolbar ---
+  --st-toolbar-bg: #{map.get($theme, toolbar-bg)};
+  --st-toolbar-padding: #{map.get($theme, toolbar-padding)};
+  --st-toolbar-border-bottom: #{map.get($theme, toolbar-border-bottom)};
+  --st-toolbar-gap: #{map.get($theme, toolbar-gap)};
+
+  // --- Search ---
+  --st-search-bg: #{map.get($theme, search-bg)};
+  --st-search-border: #{map.get($theme, search-border)};
+  --st-search-radius: #{map.get($theme, search-radius)};
+  --st-search-padding: #{map.get($theme, search-padding)};
+  --st-search-wrapper-padding: #{map.get($theme, search-wrapper-padding)};
+  --st-search-height: #{map.get($theme, search-height)};
+  --st-search-min-width: #{map.get($theme, search-min-width)};
+  --st-search-width: #{map.get($theme, search-width)};
+  --st-search-icon-color: #{map.get($theme, search-icon-color)};
+  --st-search-placeholder-color: #{map.get($theme, search-placeholder-color)};
+
+  // --- Filter ---
+  --st-filter-bg: #{map.get($theme, filter-bg)};
+  --st-filter-border: #{map.get($theme, filter-border)};
+  --st-filter-radius: #{map.get($theme, filter-radius)};
+  --st-filter-padding: #{map.get($theme, filter-padding)};
+  --st-filter-trigger-padding: #{map.get($theme, filter-trigger-padding)};
+  --st-filter-height: #{map.get($theme, filter-height)};
+  --st-filter-font-size: #{map.get($theme, filter-font-size)};
+  --st-filter-color: #{map.get($theme, filter-color)};
+  --st-filter-hover-bg: #{map.get($theme, filter-hover-bg)};
+  --st-filter-hover-border-color: #{map.get($theme, filter-hover-border-color)};
+  --st-filter-active-border-color: #{map.get($theme, filter-active-border-color)};
+  --st-filter-selected-color: #{map.get($theme, filter-selected-color)};
+  --st-filter-selected-border-color: #{map.get($theme, filter-selected-border-color)};
+  --st-filter-chevron-color: #{map.get($theme, filter-chevron-color)};
+  --st-filter-panel-bg: #{map.get($theme, filter-panel-bg)};
+  --st-filter-panel-border: #{map.get($theme, filter-panel-border)};
+  --st-filter-panel-radius: #{map.get($theme, filter-panel-radius)};
+  --st-filter-panel-shadow: #{map.get($theme, filter-panel-shadow)};
+  --st-filter-panel-min-width: #{map.get($theme, filter-panel-min-width)};
+  --st-filter-panel-padding: #{map.get($theme, filter-panel-padding)};
+  --st-filter-option-padding: #{map.get($theme, filter-option-padding)};
+  --st-filter-option-radius: #{map.get($theme, filter-option-radius)};
+  --st-filter-option-hover-bg: #{map.get($theme, filter-option-hover-bg)};
+  --st-filter-option-selected-bg: #{map.get($theme, filter-option-selected-bg)};
+  --st-filter-option-selected-color: #{map.get($theme, filter-option-selected-color)};
+
+  // --- Checkbox ---
+  --st-checkbox-color: #{map.get($theme, checkbox-color)};
+  --st-checkbox-size: #{map.get($theme, checkbox-size)};
+
+  // --- Badges ---
+  --st-badge-radius: #{map.get($theme, badge-radius)};
+  --st-badge-padding: #{map.get($theme, badge-padding)};
+  --st-badge-font-size: #{map.get($theme, badge-font-size)};
+  --st-badge-font-weight: #{map.get($theme, badge-font-weight)};
+
+  --st-badge-success-bg: #{map.get($theme, badge-success-bg)};
+  --st-badge-success-color: #{map.get($theme, badge-success-color)};
+  --st-badge-warning-bg: #{map.get($theme, badge-warning-bg)};
+  --st-badge-warning-color: #{map.get($theme, badge-warning-color)};
+  --st-badge-danger-bg: #{map.get($theme, badge-danger-bg)};
+  --st-badge-danger-color: #{map.get($theme, badge-danger-color)};
+  --st-badge-info-bg: #{map.get($theme, badge-info-bg)};
+  --st-badge-info-color: #{map.get($theme, badge-info-color)};
+  --st-badge-neutral-bg: #{map.get($theme, badge-neutral-bg)};
+  --st-badge-neutral-color: #{map.get($theme, badge-neutral-color)};
+  
+  // --- Pagination ---
+  --st-pagination-padding: #{map.get($theme, pagination-padding)};
+  --st-pagination-border-top: #{map.get($theme, pagination-border-top)};
+
+  // --- Loader ---
+  --st-loader-color: #{map.get($theme, loader-color)};
+
+  // --- Scrollbar ---
+  --st-scrollbar-width: #{map.get($theme, scrollbar-width)};
+  --st-scrollbar-height: #{map.get($theme, scrollbar-height)};
+  --st-scrollbar-track-bg: #{map.get($theme, scrollbar-track-bg)};
+  --st-scrollbar-track-radius: #{map.get($theme, scrollbar-track-radius)};
+  --st-scrollbar-thumb-bg: #{map.get($theme, scrollbar-thumb-bg)};
+  --st-scrollbar-thumb-radius: #{map.get($theme, scrollbar-thumb-radius)};
+  --st-scrollbar-thumb-hover-bg: #{map.get($theme, scrollbar-thumb-hover-bg)};
+
+  // --- Sticky Columns ---
+  --st-sticky-shadow: #{map.get($theme, sticky-shadow)};
+  --st-sticky-border-right: #{map.get($theme, sticky-border-right)};
+
+  // --- Spinner ---
+  --st-spinner-border-color: #{map.get($theme, spinner-border-color)};
+
+  // --- No Data ---
+  --st-no-data-color: #{map.get($theme, no-data-color)};
+
+  // --- Misc ---
+  --st-sort-icon-size: #{map.get($theme, sort-icon-size)};
+
+  // --- Frozen Columns ---
+  --st-frozen-col-bg: #{map.get($theme, frozen-col-bg)};
+  --st-actions-col-shadow: #{map.get($theme, actions-col-shadow)};
+
+  // --- Action Circle ---
+  --st-action-circle-size: #{map.get($theme, action-circle-size)};
+
+  // --- Row Action Dropdown ---
+  --st-dropdown-min-width: #{map.get($theme, dropdown-min-width)};
+  --st-dropdown-bg: #{map.get($theme, dropdown-bg)};
+  --st-dropdown-border: #{map.get($theme, dropdown-border)};
+  --st-dropdown-radius: #{map.get($theme, dropdown-radius)};
+  --st-dropdown-shadow: #{map.get($theme, dropdown-shadow)};
+  --st-dropdown-padding: #{map.get($theme, dropdown-padding)};
+  --st-dropdown-item-padding: #{map.get($theme, dropdown-item-padding)};
+  --st-dropdown-item-radius: #{map.get($theme, dropdown-item-radius)};
+  --st-dropdown-item-hover-bg: #{map.get($theme, dropdown-item-hover-bg)};
+
+  // --- Selection Strip ---
+  --st-selection-strip-bg: #{map.get($theme, selection-strip-bg)};
+  --st-selection-strip-border: #{map.get($theme, selection-strip-border)};
+  --st-selection-strip-padding: #{map.get($theme, selection-strip-padding)};
+  --st-selection-count-color: #{map.get($theme, selection-count-color)};
+  --st-selection-count-font-size: #{map.get($theme, selection-count-font-size)};
+  --st-selection-count-font-weight: #{map.get($theme, selection-count-font-weight)};
+
+  // --- Inline Edit Controls ---
+  --st-cell-input-border: #{map.get($theme, cell-input-border)};
+  --st-cell-input-focus-outline-color: #{map.get($theme, cell-input-focus-outline-color)};
+  --st-cell-input-bg: #{map.get($theme, cell-input-bg)};
+  --st-cell-select-bg: #{map.get($theme, cell-select-bg)};
+
+  // --- Confirmation Modal (bundled so delete modal renders correctly) ---
+  @include confirmation-modal.confirmation-modal-theme();
+}