@appsbd/vue3-appsbd-ui 1.0.3 → 1.0.5

package/dist/skins/themes/_common_variable.scss

@@ -1,591 +1,696 @@
-
-$color-white: #FFFFFF;
-$color-black: #181D27;
-$color-error: #bd2a20;
-$color-success: #079455;
-$color-warning: #F79009;
-$color-info: #0EA5E9;
-$label-color: #414651;
-$border-color-light: #D5D7DA;
-$border-color-dark: #334155;
-$border-color-error: #FDA29B;
-$border-color-focus-dark: #334155;
-$border-disable-color-light: #E9EAEB;
-$border-disable-color-dark: #334155;
-$bg-color-light: #FFFFFF;
-$bg-color-dark: #0F172A;
-$input-bg-color-lite: #FFFFFF;
-$input-bg-color-dark:darken($bg-color-dark, 3%);
-$disabled-bg-color-light: #F5F5F5;
-$disabled-bg-color-dark: #282828;
-$disables-text-color-light: #717680;
-$disables-text-color-dark: #A4A7AE;
-$placeholder-color:#9ca3af;
-body {
-  // Bootstrap Variable Mapping
-  --bs-primary: var(--#{$prefix}primary);
-  --bs-primary-rgb: var(--#{$prefix}primary-rgb);
-  --bs-link-color: var(--#{$prefix}primary);
-  --bs-link-hover-color: var(--#{$prefix}primary-btn-hover);
-  
-  --#{$prefix}theme: #{$theme-color};
-  --#{$prefix}primary: #{$theme-color};
-  --#{$prefix}primary-light: #{$theme-color-light};
-  --#{$prefix}primary-rgb: #{red($theme-color)}, #{green($theme-color)}, #{blue($theme-color)};
-  --#{$prefix}primary-btn-hover: #{$theme-color-hover};
-  --#{$prefix}primary-btn-hover-border-color: #{$theme-color-hover};
-  --#{$prefix}primary-outline-btn-hover: #{$theme-color-hover};
-  --#{$prefix}primary-outline-btn-border: #{$theme-color};
-  --#{$prefix}primary-outline-btn-hover-bg: rgba(#{red($theme-color)}, #{green($theme-color)}, #{blue($theme-color)}, 0.15);
-  --#{$prefix}primary-outline-btn-text: var(--#{$prefix}primary-btn-hover);
-  --#{$prefix}apbd-border-color-focus: #{$border-color-focus-light};
-  --#{$prefix}apbd-input-box-shadow: 0 0 0 4px rgba(#{red($theme-color)}, #{green($theme-color)}, #{blue($theme-color)}, 0.24);
-  
-  // Dependent components
-  --#{$prefix}apbd-checkbox-checked-form-check-bg: #{$theme-color};
-  --#{$prefix}apbd-toggle-checked-bg: #{$theme-color};
-  --#{$prefix}apbd-toggle-checked-hover-bg: #{$theme-color-hover};
-  --#{$prefix}apbd-toggle-checked-hover-border-color: #{$theme-color-hover};
-  --#{$prefix}apbd-toggle-checked-focus-shadow: 0 0 0 4px rgba(#{red($theme-color)}, #{green($theme-color)}, #{blue($theme-color)}, 0.24);
-  --#{$prefix}apbd-sidebar-item-active-text-color: #{$theme-color};
-  --#{$prefix}apbd-progressbar-fill-bg-primary: #{$theme-color};
-  --#{$prefix}apbd-slider-fill-bg: #{$theme-color};
-  --#{$prefix}apbd-slider-thumb-border-color: #{$theme-color};
-  --#{$prefix}apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(#{red($theme-color)}, #{green($theme-color)}, #{blue($theme-color)}, 0.24);
-
-  --#{$prefix}apbd-border-color: #{$border-color-light};
-  --#{$prefix}apbd-error-border-color: #{$border-color-error};
-  --#{$prefix}apbd-bg-color: #{$bg-color-light};
-  --#{$prefix}apbd-input-bg-color: #{$input-bg-color-lite};
-  --#{$prefix}apbd-input-error-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 56, 0.24);
-  --#{$prefix}apbd-placeholder-color:#{$placeholder-color};
-  --#{$prefix}body-bg:var(--#{$prefix}apbd-bg-color);
-  // btn
-  --#{$prefix}btn-disabled-text: #A4A7AE;
-  --#{$prefix}btn-disabled-bg-color: #F5F5F5;
-  --#{$prefix}btn-disabled-border: #E9EAEB;
-  --#{$prefix}btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  --#{$prefix}btn-close-hover-bg: #F5F5F5;
-  --#{$prefix}btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
-  --#{$prefix}error-text-color: #{$color-error};
-  --#{$prefix}apbd-main-text-color: #{$color-black};
-  --#{$prefix}apbd-sub-text-color: #{$label-color};
-
-
-  --#{$prefix}btn-icon-divider-color: #cbc1c175;
-
-  // secondary btn color
-  --#{$prefix}secondary: #F5F5F5;
-  --#{$prefix}secondary-btn-hover: #E9EAEB;
-  --#{$prefix}secondary-btn-hover-border-color: #E9EAEB;
-  --#{$prefix}secondary-btn-color: #181D27;
-  --#{$prefix}secondary-btn-hover-color: #181D27;
-  
-  --#{$prefix}secondary-btn-outline-color: #181D27;
-  --#{$prefix}secondary-outline-btn-hover: ##E9EAEB;
-  --#{$prefix}secondary-outline-btn-disable-bg: #FFF;
-  --#{$prefix}secondary-outline-btn-border: #D5D7DA;
-  --#{$prefix}secondary-outline-btn-hover-bg: #FAFAFA;
-  --#{$prefix}secondary-outline-btn-text: #D5D7DA;
-  --#{$prefix}secondary-btn-outline-hover-color: #181D27;
-
-  // danger btn color
-  --#{$prefix}danger: #{$color-error};
-  --#{$prefix}danger-btn-hover: #{darken($color-error, 10%)};
-  --#{$prefix}danger-btn-hover-border-color: #{darken($color-error, 10%)};
-
-  --#{$prefix}danger-outline-btn-disable-bg: #FFF;
-  --#{$prefix}danger-outline-btn-border: #FDA29B;
-  --#{$prefix}danger-outline-btn-hover-bg: #FEF3F2;
-  --#{$prefix}danger-outline-btn-text: #B42318;
-
-  // success btn color
-  --#{$prefix}success: #{$color-success};
-  --#{$prefix}success-btn-hover: #067647;
-  --#{$prefix}success-btn-hover-border-color: #067647;
-
-  --#{$prefix}success-outline-btn-disable-bg: #FFF;
-  --#{$prefix}success-outline-btn-border: #75E0A7;
-  --#{$prefix}success-outline-btn-hover-bg: #ECFDF3;
-  --#{$prefix}success-outline-btn-text: #067647;
-
-  // warning btn color
-  --#{$prefix}warning: #{$color-warning};
-  --#{$prefix}warning-btn-hover: #DC6803;
-  --#{$prefix}warning-btn-hover-border-color: #DC6803;
-  --#{$prefix}warning-outline-btn-disable-bg: #FFF;
-  --#{$prefix}warning-outline-btn-border: #FEC84B;
-  --#{$prefix}warning-outline-btn-hover-bg: #FFFAEB;
-  --#{$prefix}warning-outline-btn-text: #ff8114;
-
-  // light btn color
-  --#{$prefix}light-outline-btn-hover-bg: rgb(235 235 235);
-
-
-  // info btn color
-  --#{$prefix}info: #{$color-info};
-  --#{$prefix}info-btn-hover: #0284C7;
-  --#{$prefix}info-btn-hover-border-color: #0284C7;
-  --#{$prefix}info-outline-btn-disable-bg: #FFF;
-  --#{$prefix}info-outline-btn-border: #7DD3FC;
-  --#{$prefix}info-outline-btn-hover-bg: #F0F9FF;
-  --#{$prefix}info-outline-btn-text: #0284C7;
-
-  // dark btn color
-  --#{$prefix}dark: #{$color-black};
-  --#{$prefix}dark-bg: #181D27;
-  --#{$prefix}dark-bg-soft: #1F2937;
-  --#{$prefix}dark-bg-hover: #9a9ca1;
-  --#{$prefix}dark-border: #2D3748;
-  --#{$prefix}dark-text: #E5E7EB;
-  --#{$prefix}dark-text-muted: #9CA3AF;
-
-  // Input field
-  --#{$prefix}input-field-bg: #{$bg_color_light};
-  --#{$prefix}input-field-label-color: #{$label-color};
-  --#{$prefix}input-field-disabled-text-color: #{$disables-text-color-light};
-  --#{$prefix}input-field-text-color: #{$color-black};
-  --#{$prefix}input-field-dropdown-select-option-color: #2970FF;
-  --#{$prefix}input-field-icon-color: #A4A7AE;
-  --#{$prefix}input-field-disable-bg: #{$disabled-bg-color-light};
-  --#{$prefix}error-icon-color: #{$color-error};
-  --#{$prefix}input-field-mutiselect-tag-bg: #{$color-white};
-  --#{$prefix}input-field-mutiselect-tag-text-color: #{$label-color};
-  --#{$prefix}input-field-mutiselect-tag-remove-color: #A4A7AE;
-  --#{$prefix}input-field-code-input-text-color:#B3B3B3;
-  --#{$prefix}input-field-code-input-text-color-active:#{$theme-color};
-
-  // checkbox
-  --#{$prefix}apbd-checkbox-description-text-color: #717680;
-  --#{$prefix}apbd-checkbox-disable-bg: #dddddd;
-  --#{$prefix}apbd-checkbox-disable-border-color: #dddddd;
-
-  // toggle
-  --#{$prefix}apbd-toggle-bg: #{$border-color-light};
-  --#{$prefix}apbd-toggle-not-checked-border-color: #{$border-disable-color-light};
-  --#{$prefix}apbd-toggle-not-checked-bg: #{$border-disable-color-light};
-
-  --#{$prefix}apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23FFFFFF'/%3E%3C/svg%3E");
-
-  // Modal
-  --#{$prefix}apbd-modal-overlay: rgba(12, 17, 29, 0.7);
-  --#{$prefix}apbd-modal-bg:#{$bg-color-light};
-  --#{$prefix}apbd-modal-box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
-  --#{$prefix}apbd-modal-header-title-color: #{$color-black};
-  --#{$prefix}apbd-modal-header-sub-title-color: #717680;
-  --#{$prefix}apbd-modal-header-icon-bg: #155eef29;
-  --#{$prefix}apbd-modal-header-icon-color: #00359E;
-  --#{$prefix}apbd-modal-header-icon-danger-bg: #FEE4E2;
-  --#{$prefix}apbd-modal-header-icon-danger-color: #D92D20;
-  --#{$prefix}apbd-modal-header-icon-success-bg: #DCFAE6;
-  --#{$prefix}apbd-modal-header-icon-success-color: #079455;
-
-  // Sidebar
-  --#{$prefix}apbd-sidebar-bg: #{$bg-color-light};
-  --#{$prefix}apbd-sidebar-header-text-color: #{$color-black};
-  --#{$prefix}apbd-sidebar-collapbe-btn-bg: #E9EAEB;
-
-  --#{$prefix}apbd-sidebar-section-title-color: #{$label-color};
-  --#{$prefix}apbd-sidebar-item-icon-color: #717680;
-  --#{$prefix}apbd-sidebar-item-text-color: #717680;
-  --#{$prefix}apbd-sidebar-item-hover-bg: var(--#{$prefix}primary-light);
-  --#{$prefix}apbd-sidebar-item-hover-text-color: #{$color-black};
-  --#{$prefix}apbd-sidebar-item-active-bg: var(--#{$prefix}primary-light);
-  --#{$prefix}apbd-sidebar-submenu-text-color: #717680;
-  --#{$prefix}apbd-sidebar-submenu-active-text-color: #{$color-black};
-  --#{$prefix}apbd-sidebar-submenu-active-bg: #{$color-white};
-  --#{$prefix}apbd-sidebar-signout-icon-color: #D92D20;
-  --#{$prefix}apbd-sidebar-signout-text-color: #B42318;
-
-  // Card
-  --#{$prefix}apbd-card-bg: #{$bg-color-light};
-  --#{$prefix}apbd-card-border-color: #E9EAEB;
-
-  --#{$prefix}apbd-tile-card-title-color: #{$label-color};
-  --#{$prefix}apbd-tile-card-value-color: #{$color-black};
-  --#{$prefix}apbd-tile-card-icon-bg-purple: #EFF4FF;
-  --#{$prefix}apbd-tile-card-icon-bg-blue: #EFF4FF;
-  --#{$prefix}apbd-tile-card-icon-bg-green: #ECFDF3;
-  --#{$prefix}apbd-tile-card-icon-bg-yellow: #FFFAEB;
-  --#{$prefix}apbd-tile-card-icon-bg-red: #FFF3F3;
-
-  // progressbar
-
-  --#{$prefix}apbd-progressbar-bg: #D5D7DA;
-  --#{$prefix}apbd-progressbar-fill-bg-secondary: #6C757D;
-  --#{$prefix}apbd-progressbar-fill-bg-success: #{$color-success};
-  --#{$prefix}apbd-progressbar-fill-bg-danger: #{$color-error};
-  --#{$prefix}apbd-progressbar-fill-bg-warning: #{$color-warning};
-  --#{$prefix}apbd-progressbar-fill-bg-info: #{$color-info};
-  --#{$prefix}apbd-progressbar-text-color: #{$color-black};
-  --#{$prefix}apbd-progressbar-text-container-box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
-
-  // avatar
-  --#{$prefix}apbd-avatar-bg: #D5D7DA;
-  --#{$prefix}apbd-avatar-title-color: #{$label-color};
-  --#{$prefix}apbd-avatar-sub-title-color: #{$label-color};
-  --#{$prefix}apbd-avatar-add-btn-color: #A4A7AE;
-  --#{$prefix}apbd-avatar-hover-add-btn-color: #717680;
-  --#{$prefix}apbd-avatar-add-hover-bg: #F5F5F5;
-  --#{$prefix}apbd-avatar-add-focus-bg: #{$color-white};
-  --#{$prefix}apbd-avatar-add-disable-bg: #F5F5F5;
-  --#{$prefix}apbd-avatar-add-disable-content-color: #D5D7DA;
-  --#{$prefix}apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
-
-  --#{$prefix}apbd-avatar-overflow-bg: #F5F5F5;
-  --#{$prefix}apbd-avatar-overflow-color: #717680;
-
-  // date-time picker
-  --#{$prefix}apbd-date-picker-color: #717680;
-  --#{$prefix}apbd-date-picker-icon-container-color: #fffff;
-
-  // badge
-  --#{$prefix}apbd-badge-gray-bg-text-color: #717680;
-  --#{$prefix}apbd-badge-gray-bg: #F5F5F5;
-  --#{$prefix}apbd-badge-gray-border-color: #E9EAEB;
-
-  --#{$prefix}apbd-badge-blue-deep-bg-text-color: #004EEB;
-  --#{$prefix}apbd-badge-blue-deep-bg: #EFF4FF;
-  --#{$prefix}apbd-badge-blue-deep-border-color: #B2CCFF;
-
-  --#{$prefix}apbd-badge-danger-bg-text-color: #B42318;
-  --#{$prefix}apbd-badge-danger-bg: #FEE4E2;
-  --#{$prefix}apbd-badge-danger-border-color: #FECDCA;
-
-  --#{$prefix}apbd-badge-warning-bg-text-color: #7A2E0E;
-  --#{$prefix}apbd-badge-warning-bg: #FFFAEB;
-  --#{$prefix}apbd-badge-warning-border-color: #FEDF89;
-
-  --#{$prefix}apbd-badge-success-bg-text-color: #085D3A;
-  --#{$prefix}apbd-badge-success-bg: #ECFDF3;
-  --#{$prefix}apbd-badge-success-border-color: #ABEFC6;
-
-  --#{$prefix}apbd-badge-gray-blue-bg-text-color: #363F72;
-  --#{$prefix}apbd-badge-gray-blue-bg: #F8F9FC;
-  --#{$prefix}apbd-badge-gray-blue-border-color: #D5D9EB;
-
-  --#{$prefix}apbd-badge-info-bg-text-color: #026AA2;
-  --#{$prefix}apbd-badge-info-bg: #F0F9FF;
-  --#{$prefix}apbd-badge-info-border-color: #B9E6FE;
-
-  --#{$prefix}apbd-badge-blue-bg-text-color: #0040C1;
-  --#{$prefix}apbd-badge-blue-bg: #EFF8FF;
-  --#{$prefix}apbd-badge-blue-border-color: #B2DDFF;
-
-  --#{$prefix}apbd-badge-indigo-bg-text-color: #3538CD;
-  --#{$prefix}apbd-badge-indigo-bg: #EEF4FF;
-  --#{$prefix}apbd-badge-indigo-border-color: #C7D7FE;
-
-  --#{$prefix}apbd-badge-purple-bg-text-color: #5925DC;
-  --#{$prefix}apbd-badge-purple-bg: #F4F3FF;
-  --#{$prefix}apbd-badge-purple-border-color: #D9D6FE;
-
-  --#{$prefix}apbd-badge-pink-bg-text-color: #C11574;
-  --#{$prefix}apbd-badge-pink-bg: #FDF2FA;
-  --#{$prefix}apbd-badge-pink-border-color: #FCCEEE;
-
-  --#{$prefix}apbd-badge-orange-bg-text-color: #B93815;
-  --#{$prefix}apbd-badge-orange-bg: #FEF6EE;
-  --#{$prefix}apbd-badge-orange-border-color: #F9DBAF;
-
-  // tabs
-  --#{$prefix}apbd-tab-button-color: #717680;
-  --#{$prefix}apbd-tab-button-hover-color: #{$theme-color};
-  --#{$prefix}apbd-tab-button-active-color: #{$theme-color};
-  --#{$prefix}apbd-tab-button-active-bg: #EFF4FF;
-  --#{$prefix}apbd-tab-button-focus-bg: #{$color-white};
-  --#{$prefix}apbd-tab-button-focus-box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
-  --#{$prefix}apbd-tab-button-underline-color: #{$theme-color};
-  --#{$prefix}apbd-tab-button-underline-border-color: #E9EAEB;
-  --#{$prefix}apbd-tab-button-secondary-hover-color: #{$color-black};
-  --#{$prefix}apbd-tab-button-secondary-active-color: #{$color-black};
-  --#{$prefix}apbd-tab-button-secondary-active-bg: #F5F5F5;
-
-  --#{$prefix}apbd-bg-tab-seondary: #F5F5F5;
-  --#{$prefix}apbd-bg-tab-seondary-active-btn-bg: #{$color-white};
-  --#{$prefix}apbd-bg-tab-seondary-active-btn-color: #{$color-black};
-  --#{$prefix}apbd-bg-tab-seondary-active-btn-hover-color: #{$color-black};
-
-
-  --#{$prefix}apbd-tab-outline-link-color: #{$theme-color};
-  --#{$prefix}apbd-tab-outline-link-border-color: #{$theme-color};
-  --#{$prefix}apbd-tab-outline-hover-link-color: #{$color-white};
-  --#{$prefix}apbd-tab-outline-hover-bg: #{$theme-color};
-
-    // slider
-  --#{$prefix}apbd-slider-track-bg: #D5D7DA;
-  --#{$prefix}apbd-slider-thumb-bg: #{$color-white};
-  --#{$prefix}apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
-  --#{$prefix}apbd-slider-thumb-hover-border-color: var(--#{$prefix}primary-btn-hover);
-  --#{$prefix}apbd-slider-thumb-hover-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.1);
-  --#{$prefix}apbd-slider-thumb-focus-border-color: var(--#{$prefix}primary);
-  --#{$prefix}apbd-slider-label-color: #{$label-color};
-
-
-  // alert
-  --#{$prefix}apbd-alert-bg: #{$bg-color-light};
-  --#{$prefix}apbd-alert-title-color: #{$color-black};
-  --#{$prefix}apbd-alert-message-color: #6b7280;
-  --#{$prefix}apbd-alert-close-color: #959595;
-  --#{$prefix}apbd-alert-close-hover-color: #{$color-black};
-  --#{$prefix}apbd-alert-close-hover-bg: #f3f4f6;
-  --#{$prefix}apbd-alert-cancel-bg: #f3f4f6;
-  --#{$prefix}apbd-alert-cancel-color: #344054;
-  --#{$prefix}apbd-alert-cancel-hover-bg: #e5e7eb;
-  --#{$prefix}apbd-alert-icon-success-bg: #DCFAE6;
-  --#{$prefix}apbd-alert-icon-error-bg: #FEE4E2;
-  --#{$prefix}apbd-alert-icon-warning-bg: #FEF0C7;
-  --#{$prefix}apbd-alert-icon-info-bg: #D1E9FF;
-  --#{$prefix}apbd-alert-icon-question-bg: #EDE9FE;
-
-  // toast
-  --#{$prefix}apbd-toast-bg: #{$bg-color-light};
-  --#{$prefix}apbd-toast-text-color: #{$label-color};
-  --#{$prefix}apbd-toast-title-color: #{$color-black};
-  --#{$prefix}apbd-toast-border-color: #E9EAEB;
-  --#{$prefix}apbd-toast-box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.06);
-  --#{$prefix}apbd-toast-hover-box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
-  --#{$prefix}apbd-toast-success-color: #079455;
-  --#{$prefix}apbd-toast-error-color: #D92D20;
-  --#{$prefix}apbd-toast-warning-color: #F79009;
-  --#{$prefix}apbd-toast-info-color: #{$theme-color};
-  --#{$prefix}apbd-toast-close-color: #A4A7AE;
-  --#{$prefix}apbd-toast-close-hover-color: #{$label-color};
-  --#{$prefix}apbd-toast-close-hover-bg: #F5F5F5;
-  --#{$prefix}apbd-toast-progress-bg: #E9EAEB;
-  --#{$prefix}apbd-toast-default-progress-color: #A4A7AE;
-
-  // image radio input
-  --#{$prefix}apbd-imgr-bg: var(--#{$prefix}primary);
-  --#{$prefix}apbd-imgr-checked-color: var(--#{$prefix}primary);
-
-  // radio input
-  --#{$prefix}apbd-radio-input-bg: #{$input-bg-color-lite};
-  --#{$prefix}apbd-radio-input-icon-color: #717680;
-  --#{$prefix}apbd-radio-input-hover-box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
-  --#{$prefix}apbd-radio-input-checked-border-color: #528BFF;
-  --#{$prefix}apbd-radio-input-checked-focus-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
-  --#{$prefix}apbd-radio-input-disabled-bg: #F5F5F5;
-  --#{$prefix}apbd-radio-input-disabled-label-color: #717680;
-  --#{$prefix}apbd-radio-input-disabled-description-color: #B3B3B3;
-}
-[data-bs-theme=dark] {
-  body{
-  // Bootstrap Dark Mode Variable Mapping
-  --bs-primary: var(--#{$prefix}primary);
-  --bs-primary-rgb: var(--#{$prefix}primary-rgb);
-  --bs-body-bg: var(--#{$prefix}apbd-bg-color);
-  --bs-body-color: var(--#{$prefix}apbd-main-text-color);
-  --bs-border-color: var(--#{$prefix}apbd-border-color);
-   
-  --#{$prefix}theme: #{$theme-color-dark};
-  --#{$prefix}primary: #{$theme-color-dark};
-  --#{$prefix}primary-rgb: #{red($theme-color-dark)}, #{green($theme-color-dark)}, #{blue($theme-color-dark)};
-  --#{$prefix}primary-outline-btn-hover: #{$theme-color};
-  --#{$prefix}primary-outline-btn-border: #{darken($theme-color, 15%)};
-  --#{$prefix}primary-outline-btn-hover-bg: #{darken($theme-color, 22%)};
-  --#{$prefix}primary-outline-btn-text: #{$theme-color};
-    
-  //other
-  color-scheme: dark;
-  --#{$prefix}apbd-border-color: #{$border-color-dark};
-  --#{$prefix}apbd-border-color-focus: #{$border-color-focus-dark};
-  --#{$prefix}apbd-bg-color: #{$bg-color-dark};
-  --#{$prefix}apbd-input-bg-color: #{$input-bg-color-dark};
-  --#{$prefix}apbd-input-box-shadow: 0 0 0 4px rgb(100 104 110 / 51%);
-
-  --#{$prefix}apbd-main-text-color: #{$color-white};
-  --#{$prefix}apbd-sub-text-color: #9CA3AF;
-
-
-  --#{$prefix}btn-disabled-text: #98A2B3;
-  --#{$prefix}btn-disabled-bg-color: #252B37;
-  --#{$prefix}btn-disabled-border: #EAECF0;
-  --#{$prefix}btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  --#{$prefix}btn-close-hover-bg: #F9FAFB;
-  --#{$prefix}btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
-
-  // secondary button
-  --#{$prefix}secondary-btn-outline-color: #6c757d;
-  --#{$prefix}secondary-outline-btn-hover: #E9EAEB;
-  // --#{$prefix}secondary-outline-btn-disable-bg: #FFF;
-  --#{$prefix}secondary-outline-btn-border: #585e66;
-  --#{$prefix}secondary-outline-btn-hover-bg: #494949;
-  --#{$prefix}secondary-outline-btn-text: #D5D7DA;
-  --#{$prefix}secondary-btn-outline-hover-color: #D5D7DA;
-
-  // success button
-  // --#{$prefix}success-outline-btn-disable-bg: #FFF;
-  --#{$prefix}success-outline-btn-border: #436151;
-  --#{$prefix}success-outline-btn-hover-bg: #3e4e45;
-  --#{$prefix}success-outline-btn-text: #16b16f;
-
-  // danger button
-  // --#{$prefix}danger-outline-btn-disable-bg: #FFF;
-  --#{$prefix}danger-outline-btn-border: #6e5452;
-  --#{$prefix}danger-outline-btn-hover-bg: #3c2e2e;
-  --#{$prefix}danger-outline-btn-text: #ef574b;
-
-    // warning btn color
-  // --#{$prefix}warning-outline-btn-disable-bg: #FFF;
-  --#{$prefix}warning-outline-btn-border: #766a4f;
-  --#{$prefix}warning-outline-btn-hover-bg: #514d40;
-  --#{$prefix}warning-outline-btn-text: #DC6803;
-
-  // info btn color
-  // --#{$prefix}info-outline-btn-disable-bg: #FFF;
-  --#{$prefix}info-outline-btn-border: #627c88;
-  --#{$prefix}info-outline-btn-hover-bg: #2c4250;
-  --#{$prefix}info-outline-btn-text: #0284C7;
-
-    // light btn color
-  --#{$prefix}light-outline-btn-hover-bg: rgb(120 120 120);
-
-  // Input field
-  --#{$prefix}input-field-bg: #{$input-bg-color-dark};
-  --#{$prefix}input-field-disable-bg: #{$disabled-bg-color-dark};
-  --#{$prefix}input-field-disabled-text-color: #{$disables-text-color-dark};
-  --#{$prefix}input-field-label-color: #{$color-white};
-  --#{$prefix}input-field-text-color: #{$color-white};
-  --#{$prefix}input-field-icon-color: #98A2B3;
-  --#{$prefix}input-field-mutiselect-tag-bg: #{$color-black};
-  --#{$prefix}input-field-mutiselect-tag-text-color: #{$color-white};
-  --#{$prefix}input-field-mutiselect-tag-remove-color: #D5D7DA;
-  --#{$prefix}input-field-code-input-text-color:#{$color-white};
-  --#{$prefix}input-field-code-input-text-color-active:#{$color-white};
-
-  // checkbox
-  --#{$prefix}apbd-checkbox-checked-form-check-bg: #{$input-bg-color-dark};
-  --#{$prefix}apbd-checkbox-description-text-color: #A4A7AE;
-  --#{$prefix}apbd-checkbox-disable-bg:#{$disabled-bg-color-dark};
-  --#{$prefix}apbd-checkbox-disable-border-color:#{$disabled-bg-color-dark};
-
-  // toggle
-  --#{$prefix}apbd-toggle-checked-bg: #{$input-bg-color-dark};
-  --#{$prefix}apbd-toggle-checked-border-color: #334155;
-  --#{$prefix}apbd-toggle-checked-hover-bg: #334155;
-  --#{$prefix}apbd-toggle-checked-hover-border-color: #334155;
-  --#{$prefix}apbd-toggle-not-checked-border-color: #{$border-color-dark};
-  --#{$prefix}apbd-toggle-not-checked-bg: #{$input-bg-color-dark};
-  --#{$prefix}apbd-toggle-not-checked-focus-bg: #{$border-disable-color-dark};
-  --#{$prefix}apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23444e5d'/%3E%3C/svg%3E");
-  --#{$prefix}apbd-toggle-not-checked-focus-shadow: 0 0 0 4px #394c67;
-
-  // avatar
-  --#{$prefix}apbd-avatar-border-color: #717680;
-  --#{$prefix}apbd-avatar-bg: #{$color-black};
-  --#{$prefix}apbd-avatar-title-color: #{$color-white};
-  --#{$prefix}apbd-avatar-sub-title-color: #A4A7AE;
-  --#{$prefix}apbd-avatar-add-btn-color: #A4A7AE;
-  --#{$prefix}apbd-avatar-hover-add-btn-color: #667085;
-  --#{$prefix}apbd-avatar-add-border-color: #A4A7AE;
-  --#{$prefix}apbd-avatar-add-hover-bg: #252B37;
-  --#{$prefix}apbd-avatar-add-focus-bg: #{$color-black};
-  --#{$prefix}apbd-avatar-add-disable-bg: #252B37;
-  --#{$prefix}apbd-avatar-add-disable-content-color: #D0D5DD;
-  --#{$prefix}apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
-
-
-  --#{$prefix}apbd-avatar-overflow-bg: #F2F4F7;
-  --#{$prefix}apbd-avatar-overflow-color: #717680;
-
-    // radio input
-  --#{$prefix}apbd-radio-input-bg: #{$input-bg-color-dark};
-
-  // date-time picker
-   --#{$prefix}apbd-date-picker-icon-container-color: #{$input-bg-color-dark};
-
-     // Card
-  --#{$prefix}apbd-card-bg: #{$bg-color-dark};
-  --#{$prefix}apbd-card-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-
-  // modal
-  --#{$prefix}apbd-modal-bg:#{$bg-color-dark};
-  --#{$prefix}apbd-modal-header-title-color: #{$color-white};
-  --#{$prefix}apbd-modal-header-sub-title-color: #A4A7AE;
-  --#{$prefix}apbd-modal-header-icon-color: #3f6cc3;
-  --#{$prefix}apbd-modal-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 32px rgba(255, 255, 255, 0.06);
-
-    // tabs
-  --#{$prefix}apbd-tab-button-color: #717680;
-  --#{$prefix}apbd-tab-button-hover-color: #528BFF;
-  --#{$prefix}apbd-tab-button-active-color: #528BFF;
-  --#{$prefix}apbd-tab-button-active-bg: #00359E;
-
-  // progressbar
-  --#{$prefix}apbd-progressbar-bg: #334155;
-  --#{$prefix}apbd-progressbar-fill-bg: #2970FF;
-  --#{$prefix}apbd-progressbar-text-color: #fff;
-
-  // slider
-  --#{$prefix}apbd-slider-track-bg: #334155;
-  --#{$prefix}apbd-slider-fill-bg: #{$theme-color-dark};
-  --#{$prefix}apbd-slider-thumb-bg: #1E293B;
-  --#{$prefix}apbd-slider-thumb-border-color: #{$theme-color-dark};
-  --#{$prefix}apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
-  --#{$prefix}apbd-slider-thumb-hover-border-color: #{$theme-color-dark};;
-  --#{$prefix}apbd-slider-thumb-hover-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-  --#{$prefix}apbd-slider-thumb-focus-border-color: #{$theme-color-dark};
-  --#{$prefix}apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(#{red($theme-color-dark)}, #{green($theme-color-dark)}, #{blue($theme-color-dark)}, 0.24);
-  --#{$prefix}apbd-slider-label-color: #D0D5DD;
-
-  // sidebar
-  --#{$prefix}apbd-sidebar-border-color: #334155;
-  --#{$prefix}apbd-sidebar-bg: #{$bg-color-dark};
-  --#{$prefix}apbd-sidebar-header-text-color: #F1F5F9;
-  --#{$prefix}apbd-sidebar-collapbe-btn-bg: #1E293B;
-
-  --#{$prefix}apbd-sidebar-section-title-color: #94A3B8;
-  --#{$prefix}apbd-sidebar-item-icon-color: #94A3B8;
-  --#{$prefix}apbd-sidebar-item-text-color: #CBD5E1;
-  --#{$prefix}apbd-sidebar-item-hover-bg: #1E293B;
-  --#{$prefix}apbd-sidebar-item-hover-text-color: #F1F5F9;
-  --#{$prefix}apbd-sidebar-item-active-bg: #1E293B;
-  --#{$prefix}apbd-sidebar-item-active-text-color: var(--#{$prefix}primary);
-  --#{$prefix}apbd-sidebar-submenu-tree-color: #334155;
-  --#{$prefix}apbd-sidebar-submenu-text-color: #94A3B8;
-  --#{$prefix}apbd-sidebar-submenu-active-text-color: #F1F5F9;
-  --#{$prefix}apbd-sidebar-submenu-active-bg: #1E293B;
-  --#{$prefix}apbd-sidebar-signout-icon-color: #F87171;
-  --#{$prefix}apbd-sidebar-signout-text-color: #FCA5A5;
-
-  // alert
-  --#{$prefix}apbd-alert-bg: #{$bg-color-dark};
-  --#{$prefix}apbd-alert-title-color: #F1F5F9;
-  --#{$prefix}apbd-alert-message-color: #94A3B8;
-  --#{$prefix}apbd-alert-close-color: #94A3B8;
-  --#{$prefix}apbd-alert-close-hover-color: #F1F5F9;
-  --#{$prefix}apbd-alert-close-hover-bg: #1E293B;
-  --#{$prefix}apbd-alert-cancel-bg: #1E293B;
-  --#{$prefix}apbd-alert-cancel-color: #CBD5E1;
-  --#{$prefix}apbd-alert-cancel-hover-bg: #334155;
-  --#{$prefix}apbd-alert-icon-success-bg: #132e1c;
-  --#{$prefix}apbd-alert-icon-error-bg: #3c1e1e;
-  --#{$prefix}apbd-alert-icon-warning-bg: #3d2e10;
-  --#{$prefix}apbd-alert-icon-info-bg: #1a2e44;
-  --#{$prefix}apbd-alert-icon-question-bg: #2a1f4e;
-
-  // toast
-  --#{$prefix}apbd-toast-bg: #{$bg-color-dark};
-  --#{$prefix}apbd-toast-text-color: #CBD5E1;
-  --#{$prefix}apbd-toast-title-color: #F1F5F9;
-  --#{$prefix}apbd-toast-border-color: #334155;
-  --#{$prefix}apbd-toast-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
-  --#{$prefix}apbd-toast-hover-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-  --#{$prefix}apbd-toast-success-color: #6EE7A0;
-  --#{$prefix}apbd-toast-error-color: #FCA5A5;
-  --#{$prefix}apbd-toast-warning-color: #FBBF24;
-  --#{$prefix}apbd-toast-info-color: #528BFF;
-  --#{$prefix}apbd-toast-close-color: #94A3B8;
-  --#{$prefix}apbd-toast-close-hover-color: #F1F5F9;
-  --#{$prefix}apbd-toast-close-hover-bg: #334155;
-  --#{$prefix}apbd-toast-progress-bg: #334155;
-  --#{$prefix}apbd-toast-default-progress-color: #64748B;
-
-  // radio input
-  --#{$prefix}apbd-radio-input-disabled-bg: #252B37;
-  --#{$prefix}apbd-radio-input-disabled-border-color: #EAECF0;
-  }
-}
-
+
+$color-white: #FFFFFF;
+$color-black: #181D27;
+$color-error: #bd2a20;
+$color-success: #079455;
+$color-warning: #F79009;
+$color-info: #0EA5E9;
+$color-light: #f4f4f5;
+
+$color-error-dark: #60140f;
+$color-success-dark: #124e33;
+$color-warning-dark: #603d10;
+$color-info-dark: #0f5878;
+$color-dark-dark: #222b3e;
+$color-secondary-dark: #585555;
+$color-light-dark: #6a6a6a;
+
+
+$label-color: #414651;
+$label-color-light: #a7a7a7;
+$border-color-light: #D5D7DA;
+$border-color-dark: #334155;
+$border-color-error: #FDA29B;
+$border-color-focus-dark: #334155;
+$border-disable-color-light: #E9EAEB;
+$border-disable-color-dark: #334155;
+$bg-color-light: #FFFFFF;
+$bg-color-dark: #0F172A;
+$input-bg-color-lite: #FFFFFF;
+$input-bg-color-dark:darken($bg-color-dark, 3%);
+$disabled-bg-color-light: #F5F5F5;
+$disabled-bg-color-dark: #282828;
+$disables-text-color-light: #717680;
+$disables-text-color-dark: #A4A7AE;
+$placeholder-color:#9ca3af;
+body {
+  // Bootstrap Variable Mapping
+  --bs-primary: var(--#{$prefix}primary);
+  --bs-primary-rgb: var(--#{$prefix}primary-rgb);
+  --bs-link-color: var(--#{$prefix}primary);
+  --bs-link-hover-color: var(--#{$prefix}primary-btn-hover);
+  
+  --#{$prefix}theme: #{$theme-color};
+  --#{$prefix}primary: #{$theme-color};
+  --#{$prefix}primary-light: #{$theme-color-light};
+  --#{$prefix}primary-rgb: #{red($theme-color)}, #{green($theme-color)}, #{blue($theme-color)};
+  --#{$prefix}primary-btn-hover: #{$theme-color-hover};
+  --#{$prefix}primary-btn-hover-border-color: #{$theme-color-hover};
+  --#{$prefix}primary-outline-btn-hover: #{$theme-color-hover};
+  --#{$prefix}primary-outline-btn-border: #{$theme-color};
+  --#{$prefix}primary-outline-btn-hover-bg: rgba(#{red($theme-color)}, #{green($theme-color)}, #{blue($theme-color)}, 0.15);
+  --#{$prefix}primary-outline-btn-text: var(--#{$prefix}primary-btn-hover);
+  --#{$prefix}apbd-border-color-focus: #{$border-color-focus-light};
+  --#{$prefix}apbd-input-box-shadow: 0 0 0 4px rgba(#{red($theme-color)}, #{green($theme-color)}, #{blue($theme-color)}, 0.24);
+  --#{$prefix}apbd-heading-color: #{$color-black};
+  
+  // Dependent components
+
+  --#{$prefix}light:#{$color-light};
+  --#{$prefix}apbd-text-color: #{$color-white};
+  --#{$prefix}apbd-checkbox-checked-form-check-bg: #{$theme-color};
+  --#{$prefix}apbd-toggle-checked-bg: #{$theme-color};
+  --#{$prefix}apbd-toggle-checked-hover-bg: #{$theme-color-hover};
+  --#{$prefix}apbd-toggle-checked-hover-border-color: #{$theme-color-hover};
+  --#{$prefix}apbd-toggle-checked-focus-shadow: 0 0 0 4px rgba(#{red($theme-color)}, #{green($theme-color)}, #{blue($theme-color)}, 0.24);
+  --#{$prefix}apbd-sidebar-item-active-text-color: #{$theme-color};
+  --#{$prefix}apbd-progressbar-fill-bg-primary: #{$theme-color};
+  --#{$prefix}apbd-slider-fill-bg: #{$theme-color};
+  --#{$prefix}apbd-slider-thumb-border-color: #{$theme-color};
+  --#{$prefix}apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(#{red($theme-color)}, #{green($theme-color)}, #{blue($theme-color)}, 0.24);
+
+  --#{$prefix}apbd-border-color: #{$border-color-light};
+  --#{$prefix}apbd-modal-border-color: #edf1f7;
+  --#{$prefix}apbd-error-border-color: #{$border-color-error};
+  --#{$prefix}apbd-bg-color: #{$bg-color-light};
+  --#{$prefix}apbd-input-bg-color: #{$input-bg-color-lite};
+  --#{$prefix}apbd-input-error-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 56, 0.24);
+  --#{$prefix}apbd-placeholder-color:#{$placeholder-color};
+  --#{$prefix}body-bg:var(--#{$prefix}apbd-bg-color);
+  // btn
+  --#{$prefix}btn-disabled-text: #A4A7AE;
+  --#{$prefix}btn-disabled-bg-color: #F5F5F5;
+  --#{$prefix}btn-disabled-border: #E9EAEB;
+  --#{$prefix}btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  --#{$prefix}btn-close-hover-bg: #F5F5F5;
+  --#{$prefix}btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
+  --#{$prefix}error-text-color: #{$color-error};
+  --#{$prefix}apbd-main-text-color: #{$color-black};
+  --#{$prefix}apbd-sub-text-color: #{$label-color};
+
+
+  --#{$prefix}btn-icon-divider-color: #cbc1c175;
+
+  // Elite grid 
+  --#{$prefix}apbd-grid-cell-text-color: #212529;
+
+  // secondary btn color
+  --#{$prefix}secondary: #F5F5F5;
+  --#{$prefix}secondary-btn-hover: #E9EAEB;
+  --#{$prefix}secondary-btn-hover-border-color: #E9EAEB;
+  --#{$prefix}secondary-btn-color: #181D27;
+  --#{$prefix}secondary-btn-hover-color: #181D27;
+  
+  --#{$prefix}secondary-btn-outline-color: #181D27;
+  --#{$prefix}secondary-outline-btn-hover: ##E9EAEB;
+  --#{$prefix}secondary-outline-btn-disable-bg: #FFF;
+  --#{$prefix}secondary-outline-btn-border: #D5D7DA;
+  --#{$prefix}secondary-outline-btn-hover-bg: #FAFAFA;
+  --#{$prefix}secondary-outline-btn-text: #D5D7DA;
+  --#{$prefix}secondary-btn-outline-hover-color: #181D27;
+
+  // danger btn color
+  --#{$prefix}danger: #{$color-error};
+  --#{$prefix}danger-btn-hover: #{darken($color-error, 10%)};
+  --#{$prefix}danger-btn-hover-border-color: #{darken($color-error, 10%)};
+
+  --#{$prefix}danger-outline-btn-disable-bg: #FFF;
+  --#{$prefix}danger-outline-btn-border: #FDA29B;
+  --#{$prefix}danger-outline-btn-hover-bg: #FEF3F2;
+  --#{$prefix}danger-outline-btn-text: #B42318;
+
+  // success btn color
+  --#{$prefix}success: #{$color-success};
+  --#{$prefix}success-btn-hover: #067647;
+  --#{$prefix}success-btn-hover-border-color: #067647;
+
+  --#{$prefix}success-outline-btn-disable-bg: #FFF;
+  --#{$prefix}success-outline-btn-border: #75E0A7;
+  --#{$prefix}success-outline-btn-hover-bg: #ECFDF3;
+  --#{$prefix}success-outline-btn-text: #067647;
+
+  // warning btn color
+  --#{$prefix}warning: #{$color-warning};
+  --#{$prefix}warning-btn-hover: #DC6803;
+  --#{$prefix}warning-btn-hover-border-color: #DC6803;
+  --#{$prefix}warning-outline-btn-disable-bg: #FFF;
+  --#{$prefix}warning-outline-btn-border: #FEC84B;
+  --#{$prefix}warning-outline-btn-hover-bg: #FFFAEB;
+  --#{$prefix}warning-outline-btn-text: #ff8114;
+
+  // light btn color
+  --#{$prefix}light-outline-btn-hover-bg: rgb(235 235 235);
+
+
+  // info btn color
+  --#{$prefix}info: #{$color-info};
+  --#{$prefix}info-btn-hover: #0284C7;
+  --#{$prefix}info-btn-hover-border-color: #0284C7;
+  --#{$prefix}info-outline-btn-disable-bg: #FFF;
+  --#{$prefix}info-outline-btn-border: #7DD3FC;
+  --#{$prefix}info-outline-btn-hover-bg: #F0F9FF;
+  --#{$prefix}info-outline-btn-text: #0284C7;
+
+  // dark btn color
+  --#{$prefix}dark: #{$color-black};
+  --#{$prefix}dark-bg: #181D27;
+  --#{$prefix}dark-bg-soft: #1F2937;
+  --#{$prefix}dark-bg-hover: #9a9ca1;
+  --#{$prefix}dark-border: #2D3748;
+  --#{$prefix}dark-text: #E5E7EB;
+  --#{$prefix}dark-text-muted: #9CA3AF;
+
+  // Input field
+  --#{$prefix}input-field-bg: #{$bg_color_light};
+  --#{$prefix}input-field-label-color: #{$label-color};
+  --#{$prefix}input-field-disabled-text-color: #{$disables-text-color-light};
+  --#{$prefix}input-field-text-color: #{$color-black};
+  --#{$prefix}input-field-dropdown-select-option-color: #2970FF;
+  --#{$prefix}input-field-icon-color: #A4A7AE;
+  --#{$prefix}input-field-disable-bg: #{$disabled-bg-color-light};
+  --#{$prefix}error-icon-color: #{$color-error};
+  --#{$prefix}input-field-mutiselect-tag-bg: #{$color-white};
+  --#{$prefix}input-field-mutiselect-tag-text-color: #{$label-color};
+  --#{$prefix}input-field-mutiselect-tag-remove-color: #A4A7AE;
+  --#{$prefix}input-field-code-input-text-color:#B3B3B3;
+  --#{$prefix}input-field-code-input-text-color-active:#{$theme-color};
+
+    // Number input 
+    --#{$prefix}apbd-left-number-input-color: #{$gradient-left};
+    --#{$prefix}apbd-right-number-input-color: #{$gradient-right};
+
+  // checkbox
+  --#{$prefix}apbd-checkbox-description-text-color: #717680;
+  --#{$prefix}apbd-checkbox-disable-bg: #dddddd;
+  --#{$prefix}apbd-checkbox-disable-border-color: #dddddd;
+
+  // toggle
+  --#{$prefix}apbd-toggle-bg: #{$border-color-light};
+  --#{$prefix}apbd-toggle-not-checked-border-color: #{$border-disable-color-light};
+  --#{$prefix}apbd-toggle-not-checked-bg: #{$border-disable-color-light};
+
+  --#{$prefix}apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23FFFFFF'/%3E%3C/svg%3E");
+
+  // Modal
+  --#{$prefix}apbd-modal-overlay: rgba(12, 17, 29, 0.7);
+  --#{$prefix}apbd-modal-bg:#{$bg-color-light};
+  --#{$prefix}apbd-modal-box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
+  --#{$prefix}apbd-modal-header-title-color: #{$color-black};
+  --#{$prefix}apbd-modal-header-sub-title-color: #717680;
+  --#{$prefix}apbd-modal-header-icon-bg: #155eef29;
+  --#{$prefix}apbd-modal-header-icon-color: #00359E;
+  --#{$prefix}apbd-modal-header-icon-danger-bg: #FEE4E2;
+  --#{$prefix}apbd-modal-header-icon-danger-color: #D92D20;
+  --#{$prefix}apbd-modal-header-icon-success-bg: #DCFAE6;
+  --#{$prefix}apbd-modal-header-icon-success-color: #079455;
+
+  // Sidebar
+  --#{$prefix}apbd-sidebar-bg: #{$bg-color-light};
+  --#{$prefix}apbd-sidebar-header-text-color: #{$color-black};
+  --#{$prefix}apbd-sidebar-collapbe-btn-bg: #E9EAEB;
+
+  --#{$prefix}apbd-sidebar-section-title-color: #{$label-color};
+  --#{$prefix}apbd-sidebar-item-icon-color: #717680;
+  --#{$prefix}apbd-sidebar-item-text-color: #717680;
+  --#{$prefix}apbd-sidebar-item-hover-bg: var(--#{$prefix}primary-light);
+  --#{$prefix}apbd-sidebar-item-hover-text-color: #{$color-black};
+  --#{$prefix}apbd-sidebar-item-active-bg: var(--#{$prefix}primary-light);
+  --#{$prefix}apbd-sidebar-submenu-text-color: #717680;
+  --#{$prefix}apbd-sidebar-submenu-active-text-color: #{$color-black};
+  --#{$prefix}apbd-sidebar-submenu-active-bg: #{$color-white};
+  --#{$prefix}apbd-sidebar-signout-icon-color: #D92D20;
+  --#{$prefix}apbd-sidebar-signout-text-color: #B42318;
+
+  // Card
+  --#{$prefix}apbd-card-bg: #{$bg-color-light};
+  --#{$prefix}apbd-card-border-color: #E9EAEB;
+
+  --#{$prefix}apbd-tile-card-title-color: #{$label-color};
+  --#{$prefix}apbd-tile-card-value-color: #{$color-black};
+  --#{$prefix}apbd-tile-card-icon-bg-purple: #EFF4FF;
+  --#{$prefix}apbd-tile-card-icon-bg-blue: #EFF4FF;
+  --#{$prefix}apbd-tile-card-icon-bg-green: #ECFDF3;
+  --#{$prefix}apbd-tile-card-icon-bg-yellow: #FFFAEB;
+  --#{$prefix}apbd-tile-card-icon-bg-red: #FFF3F3;
+
+  // progressbar
+
+  --#{$prefix}apbd-progressbar-bg: #D5D7DA;
+  --#{$prefix}apbd-progressbar-fill-bg-secondary: #6C757D;
+  --#{$prefix}apbd-progressbar-fill-bg-success: #{$color-success};
+  --#{$prefix}apbd-progressbar-fill-bg-danger: #{$color-error};
+  --#{$prefix}apbd-progressbar-fill-bg-warning: #{$color-warning};
+  --#{$prefix}apbd-progressbar-fill-bg-info: #{$color-info};
+  --#{$prefix}apbd-progressbar-text-color: #{$color-black};
+  --#{$prefix}apbd-progressbar-text-container-box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
+
+  // avatar
+  --#{$prefix}apbd-avatar-bg: #D5D7DA;
+  --#{$prefix}apbd-avatar-title-color: #{$label-color};
+  --#{$prefix}apbd-avatar-sub-title-color: #{$label-color};
+  --#{$prefix}apbd-avatar-add-btn-color: #A4A7AE;
+  --#{$prefix}apbd-avatar-hover-add-btn-color: #717680;
+  --#{$prefix}apbd-avatar-add-hover-bg: #F5F5F5;
+  --#{$prefix}apbd-avatar-add-focus-bg: #{$color-white};
+  --#{$prefix}apbd-avatar-add-disable-bg: #F5F5F5;
+  --#{$prefix}apbd-avatar-add-disable-content-color: #D5D7DA;
+  --#{$prefix}apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
+
+  --#{$prefix}apbd-avatar-overflow-bg: #F5F5F5;
+  --#{$prefix}apbd-avatar-overflow-color: #717680;
+
+  // date-time picker
+  --#{$prefix}apbd-date-picker-color: #717680;
+  --#{$prefix}apbd-date-picker-icon-container-color: #fffff;
+
+  // badge
+  --#{$prefix}apbd-badge-primary-bg-text-color: #{$theme-color};
+  --#{$prefix}apbd-badge-primary-bg: #{$theme-color-light};
+  --#{$prefix}apbd-badge-primary-border-color: #{$border-color-focus-light};
+  
+  --#{$prefix}apbd-badge-gray-bg-text-color: #717680;
+  --#{$prefix}apbd-badge-gray-bg: #F5F5F5;
+  --#{$prefix}apbd-badge-gray-border-color: #E9EAEB;
+
+  --#{$prefix}apbd-badge-blue-deep-bg-text-color: #004EEB;
+  --#{$prefix}apbd-badge-blue-deep-bg: #EFF4FF;
+  --#{$prefix}apbd-badge-blue-deep-border-color: #B2CCFF;
+
+  --#{$prefix}apbd-badge-danger-bg-text-color: #B42318;
+  --#{$prefix}apbd-badge-danger-bg: #FEE4E2;
+  --#{$prefix}apbd-badge-danger-border-color: #FECDCA;
+
+  --#{$prefix}apbd-badge-warning-bg-text-color: #7A2E0E;
+  --#{$prefix}apbd-badge-warning-bg: #FFFAEB;
+  --#{$prefix}apbd-badge-warning-border-color: #FEDF89;
+
+  --#{$prefix}apbd-badge-success-bg-text-color: #085D3A;
+  --#{$prefix}apbd-badge-success-bg: #ECFDF3;
+  --#{$prefix}apbd-badge-success-border-color: #ABEFC6;
+
+  --#{$prefix}apbd-badge-gray-blue-bg-text-color: #363F72;
+  --#{$prefix}apbd-badge-gray-blue-bg: #F8F9FC;
+  --#{$prefix}apbd-badge-gray-blue-border-color: #D5D9EB;
+
+  --#{$prefix}apbd-badge-info-bg-text-color: #026AA2;
+  --#{$prefix}apbd-badge-info-bg: #F0F9FF;
+  --#{$prefix}apbd-badge-info-border-color: #B9E6FE;
+
+  --#{$prefix}apbd-badge-blue-bg-text-color: #0040C1;
+  --#{$prefix}apbd-badge-blue-bg: #EFF8FF;
+  --#{$prefix}apbd-badge-blue-border-color: #B2DDFF;
+
+  --#{$prefix}apbd-badge-indigo-bg-text-color: #3538CD;
+  --#{$prefix}apbd-badge-indigo-bg: #EEF4FF;
+  --#{$prefix}apbd-badge-indigo-border-color: #C7D7FE;
+
+  --#{$prefix}apbd-badge-purple-bg-text-color: #5925DC;
+  --#{$prefix}apbd-badge-purple-bg: #F4F3FF;
+  --#{$prefix}apbd-badge-purple-border-color: #D9D6FE;
+
+  --#{$prefix}apbd-badge-pink-bg-text-color: #C11574;
+  --#{$prefix}apbd-badge-pink-bg: #FDF2FA;
+  --#{$prefix}apbd-badge-pink-border-color: #FCCEEE;
+
+  --#{$prefix}apbd-badge-orange-bg-text-color: #B93815;
+  --#{$prefix}apbd-badge-orange-bg: #FEF6EE;
+  --#{$prefix}apbd-badge-orange-border-color: #F9DBAF;
+
+  // tabs
+  --#{$prefix}apbd-tab-button-color: #717680;
+  --#{$prefix}apbd-tab-button-hover-color: #{$theme-color};
+  --#{$prefix}apbd-tab-button-active-color: #{$theme-color};
+  --#{$prefix}apbd-tab-button-active-bg: var(--#{$prefix}primary-light);
+  --#{$prefix}apbd-tab-button-focus-bg: #{$color-white};
+  --#{$prefix}apbd-tab-button-focus-box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
+  --#{$prefix}apbd-tab-button-underline-color: #{$theme-color};
+  --#{$prefix}apbd-tab-button-underline-border-color: #E9EAEB;
+  --#{$prefix}apbd-tab-button-secondary-hover-color: #{$color-black};
+  --#{$prefix}apbd-tab-button-secondary-active-color: #{$color-black};
+  --#{$prefix}apbd-tab-button-secondary-active-bg: #F5F5F5;
+
+  --#{$prefix}apbd-bg-tab-seondary: #F5F5F5;
+  --#{$prefix}apbd-bg-tab-seondary-active-btn-bg: #{$color-white};
+  --#{$prefix}apbd-bg-tab-seondary-active-btn-color: #{$color-black};
+  --#{$prefix}apbd-bg-tab-seondary-active-btn-hover-color: #{$color-black};
+
+
+  --#{$prefix}apbd-tab-outline-link-color: #{$theme-color};
+  --#{$prefix}apbd-tab-outline-link-border-color: #{$theme-color};
+  --#{$prefix}apbd-tab-outline-hover-link-color: #{$color-white};
+  --#{$prefix}apbd-tab-outline-hover-bg: #{$theme-color};
+
+    // slider
+  --#{$prefix}apbd-slider-track-bg: #D5D7DA;
+  --#{$prefix}apbd-slider-thumb-bg: #{$color-white};
+  --#{$prefix}apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+  --#{$prefix}apbd-slider-thumb-hover-border-color: var(--#{$prefix}primary-btn-hover);
+  --#{$prefix}apbd-slider-thumb-hover-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.1);
+  --#{$prefix}apbd-slider-thumb-focus-border-color: var(--#{$prefix}primary);
+  --#{$prefix}apbd-slider-label-color: #{$label-color};
+
+
+  // alert
+  --#{$prefix}apbd-alert-bg: #{$bg-color-light};
+  --#{$prefix}apbd-alert-title-color: #{$color-black};
+  --#{$prefix}apbd-alert-message-color: #6b7280;
+  --#{$prefix}apbd-alert-close-color: #959595;
+  --#{$prefix}apbd-alert-close-hover-color: #{$color-black};
+  --#{$prefix}apbd-alert-close-hover-bg: #f3f4f6;
+  --#{$prefix}apbd-alert-cancel-bg: #f3f4f6;
+  --#{$prefix}apbd-alert-cancel-color: #344054;
+  --#{$prefix}apbd-alert-cancel-hover-bg: #e5e7eb;
+  --#{$prefix}apbd-alert-icon-success-bg: #DCFAE6;
+  --#{$prefix}apbd-alert-icon-error-bg: #FEE4E2;
+  --#{$prefix}apbd-alert-icon-warning-bg: #FEF0C7;
+  --#{$prefix}apbd-alert-icon-info-bg: #D1E9FF;
+  --#{$prefix}apbd-alert-icon-question-bg: #EDE9FE;
+
+  // toast
+  --#{$prefix}apbd-toast-bg: #{$bg-color-light};
+  --#{$prefix}apbd-toast-text-color: #{$label-color};
+  --#{$prefix}apbd-toast-title-color: #{$color-black};
+  --#{$prefix}apbd-toast-border-color: #E9EAEB;
+  --#{$prefix}apbd-toast-box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.06);
+  --#{$prefix}apbd-toast-hover-box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
+  --#{$prefix}apbd-toast-success-color: #079455;
+  --#{$prefix}apbd-toast-error-color: #D92D20;
+  --#{$prefix}apbd-toast-warning-color: #F79009;
+  --#{$prefix}apbd-toast-info-color: #{$theme-color};
+  --#{$prefix}apbd-toast-close-color: #A4A7AE;
+  --#{$prefix}apbd-toast-close-hover-color: #{$label-color};
+  --#{$prefix}apbd-toast-close-hover-bg: #F5F5F5;
+  --#{$prefix}apbd-toast-progress-bg: #E9EAEB;
+  --#{$prefix}apbd-toast-default-progress-color: #A4A7AE;
+
+  // image radio input
+  --#{$prefix}apbd-imgr-bg: var(--#{$prefix}primary);
+  --#{$prefix}apbd-imgr-checked-color: var(--#{$prefix}primary);
+
+  // radio input
+  --#{$prefix}apbd-radio-input-bg: #{$input-bg-color-lite};
+  --#{$prefix}apbd-radio-input-icon-color: #717680;
+  --#{$prefix}apbd-radio-input-hover-box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
+  --#{$prefix}apbd-radio-input-checked-border-color: #528BFF;
+  --#{$prefix}apbd-radio-input-checked-focus-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
+  --#{$prefix}apbd-radio-input-disabled-bg: #F5F5F5;
+  --#{$prefix}apbd-radio-input-disabled-label-color: #717680;
+  --#{$prefix}apbd-radio-input-disabled-description-color: #B3B3B3;
+}
+[data-bs-theme=dark] {
+  body{
+  // Bootstrap Dark Mode Variable Mapping
+  --bs-primary: var(--#{$prefix}primary);
+  --bs-primary-rgb: var(--#{$prefix}primary-rgb);
+  --bs-body-bg: var(--#{$prefix}apbd-bg-color);
+  --bs-body-color: var(--#{$prefix}apbd-main-text-color);
+  --bs-border-color: var(--#{$prefix}apbd-border-color);
+
+  --#{$prefix}primary:#{$theme-color-dark};
+  --#{$prefix}secondary:#{$color-secondary-dark};
+  --#{$prefix}success:#{$color-success-dark};
+  --#{$prefix}warning:#{$color-warning-dark};
+  --#{$prefix}danger:#{$color-error-dark};
+  --#{$prefix}info:#{$color-info-dark};
+  --#{$prefix}dark:#{$color-dark-dark};
+  --#{$prefix}light:#{$color-light-dark};
+   
+  --#{$prefix}apbd-text-color: #b7bfc7;
+  --#{$prefix}theme: #{$theme-color-dark};
+  --#{$prefix}primary: #{$theme-color-dark};
+  --#{$prefix}primary-rgb: #{red($theme-color-dark)}, #{green($theme-color-dark)}, #{blue($theme-color-dark)};
+  --#{$prefix}primary-outline-btn-hover: #{$theme-color};
+  --#{$prefix}primary-outline-btn-border: #{darken($theme-color, 15%)};
+  --#{$prefix}primary-outline-btn-hover-bg: #{darken($theme-color, 22%)};
+  --#{$prefix}primary-outline-btn-text: #{$theme-color};
+  --#{$prefix}apbd-heading-color: #b7bfc7;
+
+
+    
+  //other
+  color-scheme: dark;
+  --#{$prefix}apbd-border-color: #{$border-color-dark};
+  --#{$prefix}apbd-border-color-focus: #{$border-color-focus-dark};
+  --#{$prefix}apbd-modal-border-color: #39414e5c;
+  --#{$prefix}apbd-bg-color: #{$bg-color-dark};
+  --#{$prefix}apbd-input-bg-color: #{$input-bg-color-dark};
+  --#{$prefix}apbd-input-box-shadow: 0 0 0 4px rgb(100 104 110 / 51%);
+
+  --#{$prefix}apbd-main-text-color: #{$color-white};
+  --#{$prefix}apbd-sub-text-color: #9CA3AF;
+
+
+  --#{$prefix}btn-disabled-text: #98A2B3;
+  --#{$prefix}btn-disabled-bg-color: #252B37;
+  --#{$prefix}btn-disabled-border: #383838;
+  --#{$prefix}btn-disabled-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  --#{$prefix}btn-close-hover-bg: #F9FAFB;
+  --#{$prefix}btn-close-focus-box-shadow: 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
+
+  // secondary button
+  --#{$prefix}secondary-btn-outline-color: #6c757d;
+  --#{$prefix}secondary-outline-btn-hover: #E9EAEB;
+  // --#{$prefix}secondary-outline-btn-disable-bg: #FFF;
+  --#{$prefix}secondary-outline-btn-border: #585e66;
+  --#{$prefix}secondary-outline-btn-hover-bg: #494949;
+  --#{$prefix}secondary-outline-btn-text: #D5D7DA;
+  --#{$prefix}secondary-btn-outline-hover-color: #D5D7DA;
+
+  // success button
+  // --#{$prefix}success-outline-btn-disable-bg: #FFF;
+  --#{$prefix}success-outline-btn-border: #436151;
+  --#{$prefix}success-outline-btn-hover-bg: #3e4e45;
+  --#{$prefix}success-outline-btn-text: #16b16f;
+
+  // danger button
+  // --#{$prefix}danger-outline-btn-disable-bg: #FFF;
+  --#{$prefix}danger-outline-btn-border: #6e5452;
+  --#{$prefix}danger-outline-btn-hover-bg: #3c2e2e;
+  --#{$prefix}danger-outline-btn-text: #ef574b;
+
+    // warning btn color
+  // --#{$prefix}warning-outline-btn-disable-bg: #FFF;
+  --#{$prefix}warning-outline-btn-border: #766a4f;
+  --#{$prefix}warning-outline-btn-hover-bg: #514d40;
+  --#{$prefix}warning-outline-btn-text: #DC6803;
+
+  // info btn color
+  // --#{$prefix}info-outline-btn-disable-bg: #FFF;
+  --#{$prefix}info-outline-btn-border: #627c88;
+  --#{$prefix}info-outline-btn-hover-bg: #2c4250;
+  --#{$prefix}info-outline-btn-text: #0284C7;
+
+    // light btn color
+  --#{$prefix}light-outline-btn-hover-bg: rgb(120 120 120);
+
+    // image radio input
+  --#{$prefix}apbd-imgr-bg: #{lighten($theme-color-dark, 10%)}; 
+  --#{$prefix}apbd-imgr-checked-color: #{lighten($theme-color-dark, 10%)}; 
+
+  // Input field
+  --#{$prefix}input-field-bg: #{$input-bg-color-dark};
+  --#{$prefix}input-field-disable-bg: #{$disabled-bg-color-dark};
+  --#{$prefix}input-field-disabled-text-color: #{$disables-text-color-dark};
+  --#{$prefix}input-field-label-color: #{$label-color-light};
+  --#{$prefix}input-field-text-color: #{$color-white};
+  --#{$prefix}input-field-icon-color: #98A2B3;
+  --#{$prefix}input-field-mutiselect-tag-bg: #{$color-black};
+  --#{$prefix}input-field-mutiselect-tag-text-color: #{$color-white};
+  --#{$prefix}input-field-mutiselect-tag-remove-color: #D5D7DA;
+  --#{$prefix}input-field-code-input-text-color:#{$color-white};
+  --#{$prefix}input-field-code-input-text-color-active:#{$color-white};
+
+
+    // badge
+  --#{$prefix}apbd-badge-primary-bg:  #{darken($theme-color-dark, 5%)};
+  --#{$prefix}apbd-badge-primary-border-color: #{darken($theme-color-dark, 5%)};
+  --#{$prefix}apbd-badge-primary-bg-text-color: #{darken($theme-color-dark, 35%)};
+
+  --#{$prefix}apbd-badge-gray-bg-text-color: #4d4e50;
+  --#{$prefix}apbd-badge-gray-bg: #a5a5a5;
+  --#{$prefix}apbd-badge-gray-border-color: #a5a5a5;
+
+  --#{$prefix}apbd-badge-blue-deep-bg-text-color: #142a56;
+  --#{$prefix}apbd-badge-blue-deep-bg: #465e70; 
+  --#{$prefix}apbd-badge-blue-deep-border-color: #465e70;
+
+  --#{$prefix}apbd-badge-danger-bg-text-color: #3e120e;
+  --#{$prefix}apbd-badge-danger-bg: #724e4b;
+  --#{$prefix}apbd-badge-danger-border-color: #724e4b;
+
+  --#{$prefix}apbd-badge-warning-bg-text-color: #382c02;
+  --#{$prefix}apbd-badge-warning-bg: #68624e;
+  --#{$prefix}apbd-badge-warning-border-color: #68624e;
+
+  --#{$prefix}apbd-badge-success-bg-text-color: #064028;
+  --#{$prefix}apbd-badge-success-bg: #597c67;
+  --#{$prefix}apbd-badge-success-border-color: #597c67;
+
+  --#{$prefix}apbd-badge-gray-blue-bg-text-color: #222747;
+  --#{$prefix}apbd-badge-gray-blue-bg: #6e758d;
+  --#{$prefix}apbd-badge-gray-blue-border-color: #6e758d;
+
+  --#{$prefix}apbd-badge-info-bg-text-color: #13374a;
+  --#{$prefix}apbd-badge-info-bg: #546672;
+  --#{$prefix}apbd-badge-info-border-color: #546672;
+
+  --#{$prefix}apbd-badge-blue-bg-text-color: #202750;
+  --#{$prefix}apbd-badge-blue-bg: #586691;
+  --#{$prefix}apbd-badge-blue-border-color: #586691;
+
+  --#{$prefix}apbd-badge-indigo-bg-text-color: #212277;
+  --#{$prefix}apbd-badge-indigo-bg: #5f7fbb;
+  --#{$prefix}apbd-badge-indigo-border-color: #5f7fbb;
+
+  --#{$prefix}apbd-badge-purple-bg-text-color: #321d68;
+  --#{$prefix}apbd-badge-purple-bg: #66619d;
+  --#{$prefix}apbd-badge-purple-border-color: #66619d;
+
+  --#{$prefix}apbd-badge-pink-bg-text-color: #470f2e;
+  --#{$prefix}apbd-badge-pink-bg: #6c5165;
+  --#{$prefix}apbd-badge-pink-border-color: #6c5165;
+
+  --#{$prefix}apbd-badge-orange-bg-text-color: #5c1f0e;
+  --#{$prefix}apbd-badge-orange-bg: #765d44;
+  --#{$prefix}apbd-badge-orange-border-color: #765d44;
+
+  // Elite grid 
+  --#{$prefix}apbd-grid-cell-text-color: #b7bfc7;
+
+  // checkbox
+  --#{$prefix}apbd-checkbox-checked-form-check-bg: #{$input-bg-color-dark};
+  --#{$prefix}apbd-checkbox-description-text-color: #A4A7AE;
+  --#{$prefix}apbd-checkbox-disable-bg:#{$disabled-bg-color-dark};
+  --#{$prefix}apbd-checkbox-disable-border-color:#{$disabled-bg-color-dark};
+
+  // toggle
+  --#{$prefix}apbd-toggle-checked-bg: #{$input-bg-color-dark};
+  --#{$prefix}apbd-toggle-checked-border-color: #334155;
+  --#{$prefix}apbd-toggle-checked-hover-bg: #334155;
+  --#{$prefix}apbd-toggle-checked-hover-border-color: #334155;
+  --#{$prefix}apbd-toggle-not-checked-border-color: #{$border-color-dark};
+  --#{$prefix}apbd-toggle-not-checked-bg: #{$input-bg-color-dark};
+  --#{$prefix}apbd-toggle-not-checked-focus-bg: #{$border-disable-color-dark};
+  --#{$prefix}apbd-toggle-not-checked-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23444e5d'/%3E%3C/svg%3E");
+  --#{$prefix}apbd-toggle-not-checked-focus-shadow: 0 0 0 4px #394c67;
+
+  // avatar
+  --#{$prefix}apbd-avatar-border-color: #717680;
+  --#{$prefix}apbd-avatar-bg: #{$color-black};
+  --#{$prefix}apbd-avatar-title-color: #{$color-white};
+  --#{$prefix}apbd-avatar-sub-title-color: #A4A7AE;
+  --#{$prefix}apbd-avatar-add-btn-color: #A4A7AE;
+  --#{$prefix}apbd-avatar-hover-add-btn-color: #667085;
+  --#{$prefix}apbd-avatar-add-border-color: #A4A7AE;
+  --#{$prefix}apbd-avatar-add-hover-bg: #252B37;
+  --#{$prefix}apbd-avatar-add-focus-bg: #{$color-black};
+  --#{$prefix}apbd-avatar-add-disable-bg: #252B37;
+  --#{$prefix}apbd-avatar-add-disable-content-color: #D0D5DD;
+  --#{$prefix}apbd-avatar-add-focus-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
+
+
+  --#{$prefix}apbd-avatar-overflow-bg: #F2F4F7;
+  --#{$prefix}apbd-avatar-overflow-color: #717680;
+
+    // radio input
+  --#{$prefix}apbd-radio-input-bg: #{$input-bg-color-dark};
+
+  // date-time picker
+   --#{$prefix}apbd-date-picker-icon-container-color: #{$input-bg-color-dark};
+
+     // Card
+  --#{$prefix}apbd-card-bg: #{$bg-color-dark};
+  --#{$prefix}apbd-card-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+
+  // modal
+  --#{$prefix}apbd-modal-bg:#{$bg-color-dark};
+  --#{$prefix}apbd-modal-header-title-color: #{$color-white};
+  --#{$prefix}apbd-modal-header-sub-title-color: #A4A7AE;
+  --#{$prefix}apbd-modal-header-icon-color: #3f6cc3;
+  --#{$prefix}apbd-modal-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 32px rgba(255, 255, 255, 0.06);
+
+    // tabs
+  --#{$prefix}apbd-tab-button-color: #717680;
+  --#{$prefix}apbd-tab-button-hover-color: #{$theme-color};
+  --#{$prefix}apbd-tab-button-active-color: #{$theme-color};
+  --#{$prefix}apbd-tab-button-active-bg: #1E293B;
+  --#{$prefix}apbd-bg-tab-seondary: #1E293B;
+
+  // progressbar
+  --#{$prefix}apbd-progressbar-bg: #334155;
+  --#{$prefix}apbd-progressbar-fill-bg: #2970FF;
+  --#{$prefix}apbd-progressbar-text-color: #fff;
+
+  // slider
+  --#{$prefix}apbd-slider-track-bg: #334155;
+  --#{$prefix}apbd-slider-fill-bg: #{$theme-color-dark};
+  --#{$prefix}apbd-slider-thumb-bg: #1E293B;
+  --#{$prefix}apbd-slider-thumb-border-color: #{$theme-color-dark};
+  --#{$prefix}apbd-slider-thumb-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+  --#{$prefix}apbd-slider-thumb-hover-border-color: #{$theme-color-dark};;
+  --#{$prefix}apbd-slider-thumb-hover-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
+  --#{$prefix}apbd-slider-thumb-focus-border-color: #{$theme-color-dark};
+  --#{$prefix}apbd-slider-thumb-focus-shadow: 0 0 0 4px rgba(#{red($theme-color-dark)}, #{green($theme-color-dark)}, #{blue($theme-color-dark)}, 0.24);
+  --#{$prefix}apbd-slider-label-color: #D0D5DD;
+
+  // sidebar
+  --#{$prefix}apbd-sidebar-border-color: #334155;
+  --#{$prefix}apbd-sidebar-bg: #{$bg-color-dark};
+  --#{$prefix}apbd-sidebar-header-text-color: #F1F5F9;
+  --#{$prefix}apbd-sidebar-collapbe-btn-bg: #1E293B;
+
+  --#{$prefix}apbd-sidebar-section-title-color: #94A3B8;
+  --#{$prefix}apbd-sidebar-item-icon-color: #94A3B8;
+  --#{$prefix}apbd-sidebar-item-text-color: #CBD5E1;
+  --#{$prefix}apbd-sidebar-item-hover-bg: #1E293B;
+  --#{$prefix}apbd-sidebar-item-hover-text-color: #F1F5F9;
+  --#{$prefix}apbd-sidebar-item-active-bg: #1E293B;
+  // --#{$prefix}apbd-sidebar-item-active-text-color: #{$theme-color};
+    --#{$prefix}apbd-sidebar-item-active-text-color: #{lighten($theme-color-dark, 25%)};
+  --#{$prefix}apbd-sidebar-submenu-tree-color: #334155;
+  --#{$prefix}apbd-sidebar-submenu-text-color: #94A3B8;
+  --#{$prefix}apbd-sidebar-submenu-active-text-color: #F1F5F9;
+  --#{$prefix}apbd-sidebar-submenu-active-bg: #1E293B;
+  --#{$prefix}apbd-sidebar-signout-icon-color: #F87171;
+  --#{$prefix}apbd-sidebar-signout-text-color: #FCA5A5;
+
+  // alert
+  --#{$prefix}apbd-alert-bg: #{$bg-color-dark};
+  --#{$prefix}apbd-alert-title-color: #F1F5F9;
+  --#{$prefix}apbd-alert-message-color: #94A3B8;
+  --#{$prefix}apbd-alert-close-color: #94A3B8;
+  --#{$prefix}apbd-alert-close-hover-color: #F1F5F9;
+  --#{$prefix}apbd-alert-close-hover-bg: #1E293B;
+  --#{$prefix}apbd-alert-cancel-bg: #1E293B;
+  --#{$prefix}apbd-alert-cancel-color: #CBD5E1;
+  --#{$prefix}apbd-alert-cancel-hover-bg: #334155;
+  --#{$prefix}apbd-alert-icon-success-bg: #132e1c;
+  --#{$prefix}apbd-alert-icon-error-bg: #3c1e1e;
+  --#{$prefix}apbd-alert-icon-warning-bg: #3d2e10;
+  --#{$prefix}apbd-alert-icon-info-bg: #1a2e44;
+  --#{$prefix}apbd-alert-icon-question-bg: #2a1f4e;
+
+  // toast
+  --#{$prefix}apbd-toast-bg: #{$bg-color-dark};
+  --#{$prefix}apbd-toast-text-color: #CBD5E1;
+  --#{$prefix}apbd-toast-title-color: #F1F5F9;
+  --#{$prefix}apbd-toast-border-color: #334155;
+  --#{$prefix}apbd-toast-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
+  --#{$prefix}apbd-toast-hover-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  --#{$prefix}apbd-toast-success-color: #6EE7A0;
+  --#{$prefix}apbd-toast-error-color: #FCA5A5;
+  --#{$prefix}apbd-toast-warning-color: #FBBF24;
+  --#{$prefix}apbd-toast-info-color: #528BFF;
+  --#{$prefix}apbd-toast-close-color: #94A3B8;
+  --#{$prefix}apbd-toast-close-hover-color: #F1F5F9;
+  --#{$prefix}apbd-toast-close-hover-bg: #334155;
+  --#{$prefix}apbd-toast-progress-bg: #334155;
+  --#{$prefix}apbd-toast-default-progress-color: #64748B;
+
+  // radio input
+  --#{$prefix}apbd-radio-input-disabled-bg: #252B37;
+  --#{$prefix}apbd-radio-input-disabled-border-color: #EAECF0;
+  }
+}
+
 @import "./grid";