@dashadmin/dash-styles 1.3.17 → 1.3.21

package/dist/dash-css-transformer.less

@@ -0,0 +1,766 @@
+
+:root {
+
+  // =============================================
+  // LIGHT MODE VARIABLES
+  // =============================================
+
+  // Primary & Secondary
+  --primary-color--light: #c3c3c3;
+  --primary-contrast--light: #f1f1f1;
+  --secondary-color--light: #e8e8e8;
+
+  // Body Backgrounds
+  --bodybg-primary--light: #ffffffff;
+  --bodybg-secondary--light: #ecececff;
+
+  // Highlights
+  --highlight-color--light: #49a000;
+  --highlight-color-contrast--light: #333333;
+
+  // Module
+  --module-bg--light: rgba(214, 214, 214, 1);
+  --module-border--light: #4f4f4f;
+
+  // Text
+  --text-color--light: #000000;
+  --text-contrast--light: #595959;
+  --text-light--light: #4b4b4b;
+  --text-header--light: #ffffff;
+  --heading-color--light: #535353;
+
+  // Body & Layout
+  --body-bg--light: #2e2e2e;
+  --framed_layout-bg--light: #ffffff;
+  --link-color--light: #171d3d;
+  --nav-bg--light: rgba(64, 64, 64, 0.5);
+
+  // Components
+  --component-bg--light: #ffffff;
+  --component-border--light: #999;
+  --component-text--light: #333333;
+  --component-shadow--light: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --component-hover-bg--light: #f8f8f8;
+  --component-active-bg--light: #e6e6e6;
+
+  // Borders
+  --component-border-base--light: #999;
+  --component-border-split--light: #999;
+  --border-color--light: #999;
+
+  // Links
+  --link-hover--light: #999999;
+  --link-active--light: #666666;
+
+  // Disabled
+  --disabled-color--light: #808080;
+  --disabled-bg--light: #eeeeee;
+  --disabled-border--light: #eeeeee;
+
+  // Scroll
+  --scroll_track--light: #808080;
+  --scroll_thumb-color--light: #333;
+
+  // Header
+  --header-bg--light: #ffffff;
+  --header-font--light: #333333;
+  --header-badge--light: #999999;
+  --header-badge-hover--light: #F1F1F1;
+  --header-input-bg--light: #2b2b2b;
+
+  // Sidebar
+  --sidebar-bg--light: rgba(255, 255, 255, 0);
+  --sidebar-bg-hover--light: rgba(255, 255, 255, 0.5);
+  --sidebar--light: rgba(60, 60, 60, 0.5);
+  --sidebar-active--light: rgba(60, 60, 60, 0.5);
+  --sidebar_icon--light: #ffffff;
+  --sidebar_icon-active--light: #ffffff;
+
+  --sidebar-primary--light: #000000;
+  --sidebar-contrast--light: #3d3d3d;
+  --sidebar_icon-primary--light: #ffffff;
+  --sidebar_icon-secondary--light: #f0f0f0;
+  --sidebar-bg-primary--light: rgba(0, 0, 0, 0);
+  --sidebar-bg-contrast--light: rgba(62, 62, 62, 0.5);
+  --sidebar_submenu-bg-primary--light: rgba(0, 0, 0, 0.05);
+  --sidebar_submenu-bg-contrast--light: rgba(64, 64, 64, 0.5);
+  --sidebar_submenu-color-primary--light: #010101;
+  --sidebar_submenu-color-contrast--light: #383838;
+  --sidebar-handle-primary--light: rgba(64, 64, 64, 0.2);
+  --sidebar-handle-contrast--light: rgba(61, 61, 61, 0.5);
+
+  // Alerts (light)
+  --alert-info-bg--light: #0065fd;
+  --alert-info-border--light: #CCE0FF;
+  --alert-info-color--light: #121857;
+  --alert-info-title--light: #121857;
+  --alert-info-link--light: rgba(18, 24, 87, 0.4);
+  --alert-error-bg--light: #DD7373;
+  --alert-error-border--light: #DD7373;
+  --alert-error-color--light: #535353;
+  --alert-error-title--light: #535353;
+  --alert-error-link--light: rgba(18, 24, 87, 0.4);
+  --alert-warning-bg--light: #FFCB2F;
+  --alert-warning-border--light: #FFCB2F;
+  --alert-warning-color--light: #121857;
+  --alert-warning-title--light: #121857;
+  --alert-warning-link--light: rgba(18, 24, 87, 0.4);
+  --alert-success-bg--light: #99F4BD;
+  --alert-success-border--light: #99F4BD;
+  --alert-success-color--light: #121857;
+  --alert-success-title--light: #121857;
+  --alert-success-link--light: rgba(18, 24, 87, 0.4);
+
+  // Buttons (light)
+  --btn-bg--light: #34831b;
+  --btn-color--light: #ffffff;
+  --btn-border-color--light: #808080;
+  --btn-hover-bg--light: #666666;
+  --btn-active-bg--light: #4D4D4D;
+  --btn-disabled-bg--light: #999999;
+  --btn-disabled-color--light: #ffffff;
+  --btn-secondary-bg--light: #666666;
+  --btn-secondary-color--light: #ffffff;
+  --btn-success-bg--light: #808080;
+  --btn-success-color--light: #ffffff;
+  --btn-danger-bg--light: #808080;
+  --btn-danger-color--light: #ffffff;
+  --btn-warning-bg--light: #999999;
+  --btn-warning-color--light: #333333;
+  --btn-info-bg--light: #666666;
+  --btn-info-color--light: #ffffff;
+  --btn-light-bg--light: #f8f8f8;
+  --btn-light-color--light: #333333;
+
+  // Tab (light)
+  --tab-selected-bg--light: #dcdcdc;
+
+
+  // =============================================
+  // DARK MODE VARIABLES
+  // =============================================
+
+  // Primary & Secondary
+  --primary-color--dark: #343434;
+  --primary-contrast--dark: #191919;
+  --secondary-color--dark: #202020;
+
+  // Module
+  --module-bg--dark: #252526;
+  --module-border--dark: #404040;
+
+  // Body Backgrounds
+  --bodybg-primary--dark: #101010;
+  --bodybg-secondary--dark: rgba(36, 36, 36, 1);
+
+  // Highlights
+  --highlight-color--dark: #fbfbfb;
+  --highlight-color-contrast--dark: #000000;
+
+  // Text
+  --text-color--dark: #f2f2f2;
+  --text-contrast--dark: #cccccc;
+  --text-light--dark: #ffffff;
+  --text-header--dark: #FFFFFF;
+  --heading-color--dark: #e0e0e0;
+
+  // Body & Layout
+  --framed_layout-bg--dark: #363636;
+  --main-bg--dark: #3b3b3b;
+  --link-color--dark: #2eac19;
+  --nav-bg--dark: #252526;
+
+  // Components
+  --component-bg--dark: #252526;
+  --component-border--dark:#ffffff2e;
+  --component-text--dark: #d4d4d4;
+  --component-shadow--dark: 0 2px 4px rgba(0, 0, 0, 0.4);
+  --component-hover-bg--dark: #2d2d2d;
+  --component-active-bg--dark: #37373d;
+
+  // Borders
+  --component-border-base--dark: #404040;
+  --component-border-split--dark: #ffffff4d;
+  --border-color--dark: #ffffff4d;
+
+  // Links
+  --link-hover--dark: #9cdcfe;
+  --link-active--dark: #007acc;
+
+  // Disabled
+  --disabled-color--dark: #6c6c6c;
+  --disabled-bg--dark: #2d2d2d;
+  --disabled-border--dark: #404040;
+
+  // Scroll
+  --scroll_track--dark: #1e1e1e;
+  --scroll_thumb-color--dark: #424242;
+
+  // Header
+  --header-bg--dark: #252526;
+  --header-font--dark: #d4d4d4;
+  --header-badge--dark: #007acc;
+  --header-badge-hover--dark: #1e8ad2;
+  --header-input-bg--dark: #3c3c3c;
+
+  // Sidebar
+  --sidebar-bg--dark: rgba(0, 0, 0, 0);
+  --sidebar-bg-hover--dark: #00000061;
+  --sidebar--dark: #d4d4d4;
+  --sidebar-active--dark: #ffffff;
+  --sidebar_icon--dark: #d4d4d4;
+  --sidebar_icon-active--dark: #ffffff;
+
+  --sidebar-primary--dark: #ffffff;
+  --sidebar-contrast--dark: #cccccc;
+  --sidebar_icon-primary--dark: #d4d4d4;
+  --sidebar_icon-secondary--dark: #858585;
+  --sidebar-bg-primary--dark: transparent00;
+  --sidebar-bg-contrast--dark: #2d2d2d;
+  --sidebar_submenu-bg-primary--dark: #12121229;
+  --sidebar_submenu-bg-contrast--dark: #2d2d2d;
+  --sidebar_submenu-color-primary--dark: #d4d4d4;
+  --sidebar_submenu-color-contrast--dark: #cccccc;
+  --sidebar-handle-primary--dark: rgba(65, 65, 65, 0.4);
+  --sidebar-handle-contrast--dark: rgba(85, 85, 85, 0.6);
+
+  // Alerts (dark)
+  --alert-info-bg--dark: #0058ef;
+  --alert-info-border--dark: #063b49;
+  --alert-info-color--dark: #9cdcfe;
+  --alert-info-title--dark: #9cdcfe;
+  --alert-info-link--dark: rgba(156, 220, 254, 0.6);
+  --alert-error-bg--dark: #49060f;
+  --alert-error-border--dark: #49060f;
+  --alert-error-color--dark: #f48771;
+  --alert-error-title--dark: #f48771;
+  --alert-error-link--dark: rgba(244, 135, 113, 0.6);
+  --alert-warning-bg--dark: #352a06;
+  --alert-warning-border--dark: #352a06;
+  --alert-warning-color--dark: #dcdcaa;
+  --alert-warning-title--dark: #dcdcaa;
+  --alert-warning-link--dark: rgba(220, 220, 170, 0.6);
+  --alert-success-bg--dark: #063b1d;
+  --alert-success-border--dark: #063b1d;
+  --alert-success-color--dark: #6a9955;
+  --alert-success-title--dark: #6a9955;
+  --alert-success-link--dark: rgba(106, 153, 85, 0.6);
+
+  // Buttons (dark)
+  --btn-bg--dark: #38a222;
+  --btn-color--dark: #ffffff;
+  --btn-border-color--dark: #37373d;
+  --btn-hover-bg--dark: #45454d;
+  --btn-active-bg--dark: #242424;
+  --btn-disabled-bg--dark: #2d2d2d;
+  --btn-disabled-color--dark: #6c6c6c;
+  --btn-secondary-bg--dark: #1c1c1c;
+  --btn-secondary-color--dark: #d4d4d4;
+  --btn-success-bg--dark: #2f5534;
+  --btn-success-color--dark: #d4d4d4;
+  --btn-danger-bg--dark: #a1260d;
+  --btn-danger-color--dark: #d4d4d4;
+  --btn-warning-bg--dark: #8c8c35;
+  --btn-warning-color--dark: #d4d4d4;
+  --btn-info-bg--dark: #0e639c;
+  --btn-info-color--dark: #d4d4d4;
+  --btn-light-bg--dark: #252526;
+  --btn-light-color--dark: #d4d4d4;
+
+  // Tab (dark)
+  --tab-selected-bg--dark: #505050;
+
+
+  // =============================================
+  // TABLE HEADER
+  // =============================================
+
+  --table-header-color--light: #000000;
+  --table-header-color--dark: #ffffff;
+
+  --table-header-bg--light: #69de00;
+  --table-header-bg--dark: #3aaa00;
+
+
+  // =============================================
+  // BASE / STATIC COLORS
+  // =============================================
+  --black: #000000;
+
+  --dash-scroll-width: 6px;
+
+  // =============================================
+  // SIZES & DIMENSIONS
+  // =============================================
+  --size-8: 8px;
+  --size-10: 10px;
+  --size-20: 20px;
+  --size-30: 30px;
+  --size-36: 36px;
+  --size-40: 40px;
+  --size-50: 50px;
+  --size-60: 60px;
+  --size-80: 80px;
+  --size-100: 100px;
+  --size-120: 120px;
+  --size-150: 150px;
+  --size-175: 175px;
+  --size-200: 200px;
+
+  // Layout
+  --layout-header-height: 72px;
+  --layout-header-height-res: 50px;
+  --layout-header-padding: 0 32px;
+  --layout-header-padding-res: 0 15px;
+  --layout-footer-padding: 14px 32px;
+  --layout-footer-padding-res: 14px 15px;
+  --layout-trigger-height: 30px;
+  --layout-zero-trigger-width: 36px;
+  --layout-zero-trigger-height: 28px;
+  --layout-main-content-padding: 32px;
+  --layout-main-content-padding-res: 15px;
+
+  // Typography
+  --font-size-base: 14px;
+  --font-size-lg: 16px;
+  --font-size-sm: 12px;
+  --line-height-base: 1.3;
+  --h1-font-size: 22px;
+  --h2-font-size: 20px;
+  --h3-font-size: 18px;
+  --h4-font-size: 16px;
+  --h5-font-size: 14px;
+  --h6-font-size: 12px;
+  --headings-font-weight: 400;
+  --headings-line-height: 1.2;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heavy: 900;
+  --letter-spacing-base: 3px;
+  --letter-spacing-lg: 6px;
+  --letter-spacing-xl: 8px;
+
+  // Menu
+  --menu-inline-toplevel-item-height: 42px;
+  --menu-item-height: 42px;
+  --menu-expanded-width: 97px;
+
+  // Form
+  --form-item-margin-bottom: 20px;
+  --form-vertical-label-padding: 0 0 8px;
+  --form-vertical-label-margin: 0;
+
+  // Border
+  --border-width-base: 1px;
+  --border-style-base: solid;
+
+  // Drag & Drop
+  --dragndrop-paddding-tb: 24px;
+  --dragndrop-paddding-lr: 16px;
+
+  // Customizer
+  --dash-customizer-width: 370px;
+  --dash-customizer-base: 20px;
+
+  // Framed Layout
+  --framed-layout-base: 30px;
+
+  // Padding & Margins
+  --custom-padding: 10px;
+  --content-horizontal-padding: 10px;
+  --sidebar-padding-lr: 25px;
+
+  // Widths
+  --min-body-width: 575px;
+  --sidebar-mini-drawer-width: 100px;
+  --sidebar-large-width: 255px;
+  --sidebar-small-width: 60px;
+  --sidebar-horizontal-height: 120px;
+
+  --app-sidebar-width: 230px;
+  --app-chat-sidebar-width: 315px;
+
+  // Scroll
+  --scroll-bar-margin: 19px;
+  --scroll-bar-expanded-margin: 5px;
+  --sidebar_submenu-padding: 40px;
+
+  // Card
+  --card-head-padding: 16px;
+  --card-inner-head-padding: 12px;
+  --card-padding-base: 24px;
+  --card-padding-wider: 24px;
+  --dash-card-padding-base: 24px;
+  --dash-card-padding-sm: 14px;
+  --dash-card-margin-base: 32px;
+  --dash-card-margin-base-res: 20px;
+
+  // Grid
+  --grid-gutter-width: 32px;
+
+  // Border Radius
+  --border-radius-xxl: 30px;
+  --border-radius-circle: 50%;
+
+  // Input
+  --input-height-base: 36px;
+  --input-height-lg: 40px;
+  --input-height-sm: 24px;
+  --input-height-base-sm: 28px;
+
+  // Button Dimensions
+  --btn-height-base: 36px;
+  --btn-height-lg: 40px;
+  --btn-height-sm: 24px;
+  --btn-height-base-sm: 28px;
+  --btn-font-size-lg: 16px;
+  --btn-font-size-sm: 12px;
+  --btn-font-size-xs: 10px;
+  --btn-padding-xs: 0 6px;
+  --btn-border-radius-base: 4px;
+  --btn-border-radius-sm: 4px;
+  --btn-padding-base: 0 15px;
+  --btn-padding-lg: 0 15px;
+  --btn-padding-sm: 0 7px;
+
+  // Border Radius
+  --border-radius-base: 6px;
+  --border-radius-sm: 4px;
+  --border-radius-lg: 10px;
+
+
+  // =============================================
+  // "dash-" PREFIXED VARIABLES (from CSS import)
+  // =============================================
+
+  // Body & Background
+  --body-background--dark: #005a32;
+  --body-background--light: #41ab5d;
+  --body-bg--dark: #505050;
+  --body-bg--light: #2e2e2e;
+  --border-color-base--dark: #000;
+  --border-color-base--light: #c7e9c0;
+  --border-color-split--dark: #000;
+  --border-color-split--light: #c7e9c0;
+
+  // Button Primary
+  --btn-primary-bg--dark: #238b45;
+  --btn-primary-bg--light: #367800;
+  --btn-primary-color--dark: #f7fcf5;
+  --btn-primary-color--light: #fff;
+
+  // Component
+  --component-active-background--dark: #005a32;
+  --component-active-background--light: #e6e6e6;
+  --component-background--dark: rgba(0, 0, 0, 0.6);
+  --component-background--light: #f8f8f8;
+  --component-border-color--dark: #000;
+  --component-border-color--light: #c7e9c0;
+  --component-hover-background--dark: #145429;
+  --component-hover-background--light: #f8f8f8;
+  --component-text-color--dark: #f7fcf5;
+  --component-text-color--light: #000;
+
+  // Dash Alerts
+  --dash-alert-error-bg--dark: #ff0022;
+  --dash-alert-error-bg--light: #DD7373;
+  --dash-alert-error-border--dark: #49060f;
+  --dash-alert-error-border--light: #DD7373;
+  --dash-alert-error-color--dark: #f48771;
+  --dash-alert-error-color--light: #535353;
+  --dash-alert-error-link--dark: rgba(244, 135, 113, 0.6);
+  --dash-alert-error-link--light: rgba(18, 24, 87, 0.4);
+  --dash-alert-error-title--dark: #f48771;
+  --dash-alert-error-title--light: #535353;
+  --dash-alert-info-bg--dark: #063b49;
+  --dash-alert-info-bg--light: #CCE0FF;
+  --dash-alert-info-border--dark: #063b49;
+  --dash-alert-info-border--light: #CCE0FF;
+  --dash-alert-info-color--dark: #9cdcfe;
+  --dash-alert-info-color--light: #121857;
+  --dash-alert-info-link--dark: rgba(156, 220, 254, 0.6);
+  --dash-alert-info-link--light: rgba(18, 24, 87, 0.4);
+  --dash-alert-info-title--dark: #9cdcfe;
+  --dash-alert-info-title--light: #121857;
+  --dash-alert-success-bg--dark: #063b1d;
+  --dash-alert-success-bg--light: #99F4BD;
+  --dash-alert-success-border--dark: #063b1d;
+  --dash-alert-success-border--light: #99F4BD;
+  --dash-alert-success-color--dark: #6a9955;
+  --dash-alert-success-color--light: #121857;
+  --dash-alert-success-link--dark: rgba(106, 153, 85, 0.6);
+  --dash-alert-success-link--light: rgba(18, 24, 87, 0.4);
+  --dash-alert-success-title--dark: #6a9955;
+  --dash-alert-success-title--light: #121857;
+  --dash-alert-warning-bg--dark: #db9900;
+  --dash-alert-warning-bg--light: #FFCB2F;
+  --dash-alert-warning-border--dark: #352a06;
+  --dash-alert-warning-border--light: #FFCB2F;
+  --dash-alert-warning-color--dark: #dcdcaa;
+  --dash-alert-warning-color--light: #121857;
+  --dash-alert-warning-link--dark: rgba(220, 220, 170, 0.6);
+  --dash-alert-warning-link--light: rgba(18, 24, 87, 0.4);
+  --dash-alert-warning-title--dark: #dcdcaa;
+  --dash-alert-warning-title--light: #121857;
+
+  // Dash Border & Layout
+  --dash-border-color--dark: #000;
+  --dash-border-color--light: #c7e9c0;
+  --dash-framed-layout-background--dark: #41ab5d;
+  --dash-framed-layout-background--light: #ffffff;
+  --dash-link-color--dark: #74c476;
+  --dash-link-color--light: #005a32;
+  --dash-main-background--dark: #005a32;
+  --dash-main-background--light: #ffffff;
+
+  // Dash Scroll
+  --dash-scroll-thumb-color--dark: #41ab5d;
+  --dash-scroll-thumb-color--light: #74c476;
+  --dash-scroll-track-color--dark: #005a32;
+  --dash-scroll-track-color--light: #e5f5e0;
+
+  // Dash Sidebar
+  --dash-sidebar-bg--dark: #005a32;
+  --dash-sidebar-bg--light: #41ab5d;
+  --dash-sidebar-bg-contrast--dark: #238b45;
+  --dash-sidebar-bg-contrast--light: #005a32;
+  --dash-sidebar-bg-hover--dark: #238b45;
+  --dash-sidebar-bg-hover--light: #005a32;
+  --dash-sidebar-bg-primary--dark: #005a32;
+  --dash-sidebar-bg-primary--light: #41ab5d;
+  --dash-sidebar-color--dark: #238b45;
+  --dash-sidebar-color--light: #fff;
+  --dash-sidebar-color-active--dark: #f7fcf5;
+  --dash-sidebar-color-active--light: #e5f5e0;
+  --dash-sidebar-color-contrast--dark: #a1d99b;
+  --dash-sidebar-color-contrast--light: #e5f5e0;
+  --dash-sidebar-color-primary--dark: #238b45;
+  --dash-sidebar-color-primary--light: #fff;
+  --dash-sidebar-handle-contrast--dark: rgba(35, 139, 69, 0.6);
+  --dash-sidebar-handle-contrast--light: rgba(255, 255, 255, 0.5);
+  --dash-sidebar-handle-primary--dark: rgba(65, 171, 93, 0.4);
+  --dash-sidebar-handle-primary--light: rgba(255, 255, 255, 0.2);
+  --dash-sidebar-icon-color--dark: #f7fcf5;
+  --dash-sidebar-icon-color--light: #41ab5d;
+  --dash-sidebar-icon-color-active--dark: #41ab5d;
+  --dash-sidebar-icon-color-active--light: #e5f5e0;
+  --dash-sidebar-icon-color-primary--dark: #f7fcf5;
+  --dash-sidebar-icon-color-primary--light: #41ab5d;
+  --dash-sidebar-icon-color-secondary--dark: #41ab5d;
+  --dash-sidebar-icon-color-secondary--light: #e5f5e0;
+  --dash-sidebar-submenu-bg-contrast--dark: #238b45;
+  --dash-sidebar-submenu-bg-contrast--light: #005a32;
+  --dash-sidebar-submenu-bg-primary--dark: #238b45;
+  --dash-sidebar-submenu-bg-primary--light: #e5f5e0;
+  --dash-sidebar-submenu-color-contrast--dark: #a1d99b;
+  --dash-sidebar-submenu-color-contrast--light: #e5f5e0;
+  --dash-sidebar-submenu-color-primary--dark: #f7fcf5;
+  --dash-sidebar-submenu-color-primary--light: #41ab5d;
+
+  // Header
+  --header-background--dark: rgba(0, 0, 0, 0.6);
+  --header-background--light: #f8f8f8;
+  --header-font-color--dark: #f7fcf5;
+  --header-font-color--light: #000;
+  --header-input-background--dark: rgba(0, 0, 0, 0.6);
+  --header-input-background--light: #f8f8f8;
+
+  // Link
+  --link-active-color--dark: #238b45;
+  --link-active-color--light: #005a32;
+  --link-hover-color--dark: #a1d99b;
+  --link-hover-color--light: #41ab5d;
+
+  // Module
+  --module-background--dark: rgba(5, 60, 0, 1);
+  --module-background--light: #f8f8f8;
+
+  // Contrast
+  --primary-contrast-color--dark: #005a32;
+  --primary-contrast-color--light: #005a32;
+
+  // Text Variants
+  --text-contrast-color--dark: #cccccc;
+  --text-contrast-color--light: #595959;
+  --text-light-color--dark: #ffffff;
+  --text-light-color--light: #6c6c6c;
+
+
+    /* =============================================
+    ANT TABLE – DARK THEME MAPPING
+    ============================================= */
+
+    // Global antd color tokens
+    --ant-color-bg-container: var(--component-bg);
+    --ant-color-bg-elevated: var(--module-bg);
+    --ant-color-bg-layout: var(--bodybg-primary);
+    --ant-color-text: var(--text-color);
+    --ant-color-text-secondary: var(--text-light-color);
+    --ant-color-border: var(--border-color);
+    --ant-color-border-secondary: var(--border-color);
+    --ant-color-split: var(--component-border-split);
+    --ant-color-primary: var(--btn-bg);
+
+    // Table-specific tokens
+    --ant-table-header-bg: var(--table-header-bg);
+    --ant-table-header-color: var(--table-header-color);
+
+    --ant-table-header-sort-active-bg: var(--component-active-bg);
+    --ant-table-header-sort-hover-bg: var(--component-hover-bg);
+    --ant-table-body-sort-bg: var(--component-bg);
+
+    --ant-table-row-hover-bg: var(--component-hover-bg);
+    --ant-table-row-selected-bg: var(--component-active-bg);
+    --ant-table-row-selected-hover-bg: var(--component-hover-bg);
+    --ant-table-row-expanded-bg: var(--component-bg);
+
+    --ant-table-border-color: var(--border-color);
+    --ant-table-header-split-color: var(--component-border-split);
+    --ant-table-fixed-header-sort-active-bg: var(--component-active-bg);
+
+    --ant-table-header-filter-hover-bg: var(--component-hover-bg);
+    --ant-table-filter-dropdown-menu-bg: var(--component-bg);
+    --ant-table-filter-dropdown-bg: var(--component-bg);
+
+    --ant-table-expand-icon-bg: var(--component-bg);
+
+    --ant-table-footer-bg: var(--component-bg);
+    --ant-table-footer-color: var(--text-color);
+
+    --ant-table-header-icon-color: var(--text-contrast);
+    --ant-table-header-icon-hover-color: var(--text-color);
+
+    --ant-table-sticky-scroll-bar-bg: var(--scroll_thumb-color);
+
+    // Pagination tokens
+    --ant-pagination-item-bg: var(--component-bg);
+    --ant-pagination-item-active-bg: var(--btn-bg);
+    --ant-pagination-item-active-color: var(--btn-color);
+
+
+}
+
+// =============================================
+// ANT DESIGN COMPONENT OVERRIDES
+// Antd v6 CSS-in-JS generates CSS variables scoped to wrapper classes
+// (e.g. .ant-table-css-var), which override :root variables.
+// We must target these classes directly for our overrides to win.
+// =============================================
+
+.ant-table-css-var {
+    --ant-table-header-bg: var(--table-header-bg) !important;
+    --ant-table-header-color: var(--table-header-color) !important;
+    --ant-table-header-sort-active-bg: var(--component-active-bg) !important;
+    --ant-table-header-sort-hover-bg: var(--component-hover-bg) !important;
+    --ant-table-body-sort-bg: var(--component-bg) !important;
+    --ant-table-row-hover-bg: var(--component-hover-bg) !important;
+    --ant-table-row-selected-bg: var(--component-active-bg) !important;
+    --ant-table-row-selected-hover-bg: var(--component-hover-bg) !important;
+    --ant-table-row-expanded-bg: var(--component-bg) !important;
+    --ant-table-border-color: var(--border-color) !important;
+    --ant-table-header-split-color: var(--component-border-split) !important;
+    --ant-table-fixed-header-sort-active-bg: var(--component-active-bg) !important;
+    --ant-table-header-filter-hover-bg: var(--component-hover-bg) !important;
+    --ant-table-filter-dropdown-menu-bg: var(--component-bg) !important;
+    --ant-table-filter-dropdown-bg: var(--component-bg) !important;
+    --ant-table-expand-icon-bg: var(--component-bg) !important;
+    --ant-table-footer-bg: var(--component-bg) !important;
+    --ant-table-footer-color: var(--text-color) !important;
+    --ant-table-header-icon-color: var(--text-contrast) !important;
+    --ant-table-header-icon-hover-color: var(--text-color) !important;
+    --ant-table-sticky-scroll-bar-bg: var(--scroll_thumb-color) !important;
+}
+
+// Override global antd CSS variables on any antd component wrapper
+.css-var-root {
+    --ant-color-bg-container: var(--component-bg) !important;
+    --ant-color-bg-elevated: var(--module-bg) !important;
+    --ant-color-bg-layout: var(--bodybg-primary) !important;
+    --ant-color-text: var(--text-color) !important;
+    --ant-color-text-secondary: var(--text-light-color) !important;
+    --ant-color-border: var(--border-color) !important;
+    --ant-color-border-secondary: var(--border-color) !important;
+    --ant-color-split: var(--component-border-split) !important;
+    --ant-color-primary: var(--btn-bg) !important;
+}
+
+// Pagination overrides – use table header bg/color for active state
+.ant-pagination-css-var {
+    --ant-pagination-item-bg: var(--component-bg) !important;
+    --ant-pagination-item-active-bg: var(--table-header-bg) !important;
+    --ant-pagination-item-active-color: var(--table-header-color) !important;
+    --ant-pagination-item-active-color-disabled: var(--disabled-color) !important;
+    --ant-pagination-item-link-bg: var(--component-bg) !important;
+    --ant-pagination-item-input-bg: var(--component-bg) !important;
+}
+
+// Direct styling for pagination items (numbers, arrows, size changer)
+.ant-pagination {
+    .ant-pagination-item {
+        background: var(--component-bg);
+        border-color: var(--border-color);
+
+        a {
+            color: var(--text-color);
+        }
+
+        &:hover {
+            border-color: var(--table-header-bg);
+            a {
+                color: var(--table-header-bg);
+            }
+        }
+
+        &.ant-pagination-item-active {
+            background: var(--table-header-bg);
+            border-color: var(--table-header-bg);
+
+            a {
+                color: var(--table-header-color);
+            }
+
+            &:hover {
+                border-color: var(--table-header-bg);
+                a {
+                    color: var(--table-header-color);
+                }
+            }
+        }
+    }
+
+    .ant-pagination-prev,
+    .ant-pagination-next {
+        .ant-pagination-item-link {
+            color: var(--text-color);
+        }
+
+        &:hover .ant-pagination-item-link {
+            color: var(--table-header-bg);
+        }
+
+        &.ant-pagination-disabled .ant-pagination-item-link {
+            color: var(--disabled-color);
+        }
+    }
+
+    .ant-pagination-jump-prev,
+    .ant-pagination-jump-next {
+        .ant-pagination-item-ellipsis {
+            color: var(--text-color);
+        }
+        .ant-pagination-item-link-icon {
+            color: var(--table-header-bg);
+        }
+    }
+
+    .ant-pagination-options {
+        .ant-select-selector {
+            background: var(--component-bg) !important;
+            border-color: var(--border-color) !important;
+            color: var(--text-color) !important;
+        }
+    }
+}