@syncfusion/ej2-base 25.2.7 → 26.1.35-7502

package/styles/definition/_bootstrap5.scss

@@ -1,495 +1,481 @@
-@import '../common/mixin.scss';
-
-// color system
-
-// black
-$black:    #000 !default;
-
-// White
-$white:    #fff !default;
-
-@function shade-color($color, $percentage) {
-  @return mix($black, $color, $percentage);
-}
-
-@function tint-color($color, $percentage) {
-  @return mix($white, $color, $percentage);
-}
-
-// Transparent
-$transparent: transparent;
-
-// scss-docs-start gray-color-variables
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-
-// scss-docs-start color-variables
-$blue:    #0d6efd !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #d63384 !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #198754 !default;
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
-
-$primary:       $blue !default;
-$secondary:     $gray-600 !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$success-light:       tint-color($success, 80%) !default;
-$info-light:          tint-color($info, 80%) !default;
-$warning-light:       tint-color($warning, 80%) !default;
-$danger-light:        tint-color($danger, 80%) !default;
-$primary-text-color: $white !default;
-$primary-light:       tint-color($primary, 50%) !default;
-$primary-lighter:       tint-color($primary, 90%) !default;
-$success-dark:       darken($success, 10%) !default;
-$info-dark:          darken($info, 25%) !default;
-$warning-dark:       darken($warning, 25%) !default;
-$danger-dark:        darken($danger, 10%) !default;
-$success-light-alt: tint-color($success, 80%) !default;
-$info-light-alt: tint-color($info, 80%) !default;
-$warning-light-alt: tint-color($warning, 80%) !default;
-$danger-light-alt: tint-color($danger, 80%) !default;
-
-// backgroundcolor
-$content-bg-color: $white !default;
-$content-bg-color-alt1: $gray-100 !default;
-$content-bg-color-alt2: $gray-200 !default;
-$content-bg-color-alt3: $gray-300 !default;
-$content-bg-color-alt4: $gray-400 !default;
-$content-bg-color-alt5: $gray-500 !default;
-$content-bg-color-hover: $gray-200 !default;
-$content-bg-color-pressed: $gray-400 !default;
-$content-bg-color-focus: $gray-200 !default;
-$content-bg-color-selected: $primary !default;
-$content-bg-color-dragged: $gray-400 !default;
-$content-bg-color-disabled: $white !default;
-$flyout-bg-color: $white !default;
-$flyout-bg-color-hover: $gray-200 !default;
-$flyout-bg-color-pressed: $primary !default;
-$flyout-bg-color-focus: $gray-200 !default;
-$overlay-bg-color: rgba($black, .5) !default;
-$table-bg-color-hover: darken($content-bg-color-alt1, 3%) !default;
-$table-bg-color-pressed: $gray-300 !default;
-$table-bg-color-selected: darken($content-bg-color-alt1, 6%) !default;
-
-// all theme common color
-$colorpicker-gradient-1: #f00 !default;
-$colorpicker-gradient-2: #ff0 !default;
-$ccolorpicker-gradient-3: #0f0 !default;
-$colorpicker-gradient-4: #0ff !default;
-$colorpicker-gradient-5: #00f !default;
-$colorpicker-gradient-6: #f0f !default;
-$colorpicker-gradient-7: #ff0004 !default;
-$spreadsheet-selection-1: #673ab8;
-$spreadsheet-selection-2: #9c27b0;
-$spreadsheet-selection-3: #029688;
-$spreadsheet-selection-4: #4caf51;
-$spreadsheet-selection-5: #fe9800;
-$spreadsheet-selection-6: #3f52b5;
-
-// text-color
-$content-text-color: $gray-900 !default;
-$content-text-color-alt1: $gray-800 !default;
-$content-text-color-alt2: $gray-700 !default;
-$content-text-color-alt3: $gray-600 !default;
-$content-text-color-hover: $gray-900 !default;
-$content-text-color-pressed: $gray-900 !default;
-$content-text-color-focus: $gray-900 !default;
-$content-text-color-selected: $primary-text-color !default;
-$content-text-color-dragged: $gray-900 !default;
-$content-text-color-disabled: $gray-500 !default;
-$placeholder-text-color: $gray-600 !default;
-$flyout-text-color: $gray-900 !default;
-$flyout-text-color-hover: $gray-900 !default;
-$flyout-text-color-pressed: $primary-text-color !default;
-$flyout-text-color-focus: $gray-900 !default;
-$table-text-color-hover: $gray-900 !default;
-$table-text-color-pressed: $gray-900 !default;
-$table-text-color-selected: $gray-900 !default;
-
-// icon-color
-$icon-color: $gray-600 !default;
-$icon-color-hover: $gray-800 !default;
-$icon-color-pressed: $gray-900 !default;
-$icon-color-disabled: $gray-500 !default;
-
-// border-color
-$border-light: $gray-300 !default;
-$border: $gray-400 !default;
-$border-dark: $gray-500 !default;
-$border-hover: $gray-400 !default;
-$border-pressed: $gray-500 !default;
-$border-focus: $gray-400 !default;
-$border-selected: $gray-500 !default;
-$border-dragged: $gray-300 !default;
-$border-disabled: $gray-300 !default;
-$border-warning: $warning !default;
-$border-error: $danger !default;
-$border-success: $success !default;
-$spreadsheet-gridline: $gray-300 !default;
-$flyout-border: $gray-300 !default;
-
-// Tooltip
-$tooltip-bg-color: $gray-900 !default;
-$tooltip-border: $gray-900;
-$toooltip-text-color: #f9fafb !default;
-
-// shadow
-$shadow: 0 .8px 16px rgba($black, .15) !default;
-$shadow-sm: 0 2px 4px rgba($black, .075) !default;
-$shadow-md: 0 8px 12px rgba($black, .15) !default;
-$shadow-lg:  0 16px 48px rgba($black, .175) !default;
-$shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
-$shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
-$shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
-$shadow-none: 0 0 rgba($black, 0) !default;
-$shadow-focus-ring1: 0 0 0 4px rgba($primary, .25) !default;
-$shadow-focus-ring2: 0 0 0 4px rgba($primary, .25) !default;
-$primary-shadow-focus: 0 0 0 4px rgba(tint-color($primary, 15%), .5) !default;
-$secondary-shadow-focus: 0 0 0 4px rgba(tint-color($secondary, 15%), .5) !default;
-$success-shadow-focus: 0 0 0 4px rgba(tint-color($success, 15%), .5) !default;
-$danger-shadow-focus: 0 0 0 4px rgba(tint-color($danger, 15%), .5) !default;
-$info-shadow-focus: 0 0 0 4px rgba(tint-color($info, 15%), .5) !default;
-$warning-shadow-focus: 0 0 0 4px rgba(tint-color($warning, 15%), .5) !default;
-
-// fontfamily
-$font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
-
-// default font Size
-$text-xxs: 10px !default;
-$text-xs: 12px !default;
-$text-sm: 14px !default;
-$text-base: 16px !default;
-$text-lg: 18px !default;
-$text-xl: 20px !default;
-$text-2xl: 24px !default;
-$text-3xl: 30px !default;
-$text-4xl: 36px !default;
-$text-5xl: 48px !default;
-$text-6xl: 60px !default;
-$text-7xl: 72px !default;
-$text-8xl: 96px !default;
-$text-9xl: 128px !default;
-
-// heading
-$h1-font-size: 40px !default;
-$h2-font-size: 32px !default;
-$h3-font-size: 28px !default;
-$h4-font-size: $text-2xl !default;
-$h5-font-size: $text-xl !default;
-$h6-font-size: $text-base !default;
-
-// Display
-
-// Line height
-$leading-none: 1 !default;
-$leading-tight: 1.25 !default;
-$leading-snug: 1.375 !default;
-$leading-normal: 1.5 !default;
-$leading-relaxed: 1.625 !default;
-$leading-loose: 2 !default;
-
-// font Weight
-$font-weight-lighter:         lighter !default;
-$font-weight-light:           300 !default;
-$font-weight-normal:          400 !default;
-$font-weight-medium:          500 !default;
-$font-weight-bold:            700 !default;
-$font-weight-bolder:          bolder !default;
-
-// Secondary-button
-
-$secondary-bg-color: $secondary !default;
-$secondary-border-color: $secondary-bg-color !default;
-$secondary-text-color: $white !default;
-$secondary-bg-color-hover: shade-color($secondary-bg-color, 15%) !default;
-$secondary-border-color-hover: shade-color($secondary-bg-color, 20%) !default;
-$secondary-text-color-hover: $secondary-text-color !default;
-$secondary-bg-color-pressed: shade-color($secondary-bg-color, 20%) !default;
-$secondary-border-color-pressed: shade-color($secondary-bg-color, 25%) !default;
-$secondary-text-color-pressed: $secondary-text-color !default;
-$secondary-bg-color-focus: $secondary-bg-color-hover !default;
-$secondary-border-color-focus: $secondary-border-color-hover !default;
-$secondary-text-color-focus: $secondary-text-color-hover !default;
-$secondary-bg-color-disabled: rgba($secondary-bg-color, .65) !default;
-$secondary-border-color-disabled: $secondary-bg-color-disabled !default;
-$secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;
-
-// Primary-button
-
-$primary-bg-color: $primary !default;
-$primary-border-color: $primary !default;
-$primary-text: $primary-text-color !default;
-$primary-bg-color-hover: shade-color($primary-bg-color, 15%) !default;
-$primary-border-color-hover: shade-color($primary-bg-color, 20%) !default;
-$primary-text-hover: $primary-text !default;
-$primary-bg-color-pressed: shade-color($primary-bg-color, 20%) !default;
-$primary-border-color-pressed: shade-color($primary-bg-color, 25%) !default;
-$primary-text-pressed: $primary-text-color !default;
-$primary-bg-color-focus: $primary-bg-color-hover !default;
-$primary-border-color-focus: $primary-border-color-hover !default;
-$primary-text-focus: $primary-text !default;
-$primary-bg-color-disabled: rgba($primary-bg-color, .65) !default;
-$primary-border-color-disabled: $primary-bg-color-disabled !default;
-$primary-text-disabled: rgba($primary-text, .65) !default;
-
-// Success-button
-
-$success-bg-color: $success !default;
-$success-border-color: $success !default;
-$success-text: $white !default;
-$success-bg-color-hover: shade-color($success-bg-color, 15%) !default;
-$success-border-color-hover: shade-color($success-bg-color, 20%) !default;
-$success-text-hover: $success-text !default;
-$success-bg-color-pressed: shade-color($success-bg-color, 20%) !default;
-$success-border-color-pressed: shade-color($success-bg-color, 25%) !default;
-$success-text-pressed: $success-text !default;
-$success-bg-color-focus: $success-bg-color-hover !default;
-$success-border-color-focus: $success-border-color-hover !default;
-$success-text-focus: $success-text !default;
-$success-bg-color-disabled: rgba($success-bg-color, .65) !default;
-$success-border-color-disabled: $success-bg-color-disabled !default;
-$success-text-disabled: rgba($success-text, .65) !default;
-
-// Warning-button
-$warning-bg-color: $warning !default;
-$warning-border-color: $warning !default;
-$warning-text: $black !default;
-$warning-bg-color-hover: tint-color($warning-bg-color, 15%) !default;
-$warning-border-color-hover: tint-color($warning-bg-color, 10%) !default;
-$warning-text-hover: $warning-text !default;
-$warning-bg-color-pressed: tint-color($warning-bg-color, 20%) !default;
-$warning-border-color-pressed: tint-color($warning-bg-color, 10%) !default;
-$warning-text-pressed: $warning-text !default;
-$warning-bg-color-focus: $warning-bg-color-hover !default;
-$warning-border-color-focus: $warning-border-color-hover !default;
-$warning-text-focus: $warning-text !default;
-$warning-bg-color-disabled: rgba($warning-bg-color, .65) !default;
-$warning-border-color-disabled: $warning-bg-color-disabled !default;
-$warning-text-disabled: rgba($warning-text, .65) !default;
-
-// danger-button
-$danger-bg-color: $danger !default;
-$danger-border-color: $danger !default;
-$danger-text: $white !default;
-$danger-bg-color-hover: shade-color($danger-bg-color, 15%) !default;
-$danger-border-color-hover: shade-color($danger-bg-color, 20%) !default;
-$danger-text-hover: $danger-text !default;
-$danger-bg-color-pressed: shade-color($danger-bg-color, 20%) !default;
-$danger-border-color-pressed: shade-color($danger-bg-color, 25%) !default;
-$danger-text-pressed: $danger-text !default;
-$danger-bg-color-focus: $danger-bg-color-hover !default;
-$danger-border-color-focus: $danger-border-color-hover !default;
-$danger-text-focus: $danger-text !default;
-$danger-bg-color-disabled: rgba($danger-bg-color, .65) !default;
-$danger-border-color-disabled: $danger-bg-color-disabled !default;
-$danger-text-disabled: rgba($danger-text, .65) !default;
-
-// Info-button
-$info-bg-color: $info !default;
-$info-border-color: $info !default;
-$info-text: $black !default;
-$info-bg-color-hover: tint-color($info-bg-color, 15%) !default;
-$info-border-color-hover: tint-color($info-bg-color, 10%) !default;
-$info-text-hover: $info-text !default;
-$info-bg-color-pressed: tint-color($info-bg-color, 20%) !default;
-$info-border-color-pressed: tint-color($info-bg-color, 10%) !default;
-$info-text-pressed: $info-text !default;
-$info-bg-color-focus: $info-bg-color-hover !default;
-$info-border-color-focus: $info-border-color-hover !default;
-$info-text-focus: $info-text-hover !default;
-$info-bg-color-disabled: rgba($info-bg-color, .65) !default;
-$info-border-color-disabled: $info-bg-color-disabled !default;
-$info-text-disabled: rgba($info-text, .65) !default;
-
-//Outline button
-$primary-outline: $primary-bg-color !default;
-$secondary-outline: $secondary-bg-color !default;
-$warning-outline: $warning-bg-color !default;
-$danger-outline: $danger-bg-color !default;
-$success-outline: $success-bg-color !default;
-$info-outline: $info-bg-color !default;
-
-// chart series
-
-$series-1: $gray-200;
-$series-2: $gray-300;
-$series-3: $gray-400;
-$series-4: $gray-800;
-$series-5: #1f2937;
-$series-6: #5e6e22;
-$series-7: #978a2b;
-$series-8: #6a4314;
-$series-9: #52236c;
-$series-10: #3a6b6f;
-$series-11: #d64f56;
-$series-12: #f3a93c;
-$skin-name: 'bootstrap5' !default;
-$theme-name: 'bootstrap5' !default;
-
-//Diagram Palette color
-$diagram-palette-background: $white !default;
-$diagram-palette-hover-background: $content-bg-color-hover !default;
-
-//Message component
-
-//Message Default
-$msg-color: #41464b !default;
-$msg-bg-color: #e2e3e5 !default;
-$msg-border-color: #d3d6d8 !default;
-$msg-color-alt1: $gray-900 !default;
-$msg-bg-color-alt1: $transparent !default;
-$msg-border-color-alt1: #9ca3af !default;
-$msg-color-alt2: $white !default;
-$msg-bg-color-alt2: $gray-600 !default;
-$msg-border-color-alt2:$gray-600 !default;
-
-$msg-icon-color: $gray-900 !default;
-$msg-icon-color-alt1: $gray-900 !default;
-$msg-icon-color-alt2: $white !default;
-
-$msg-close-icon-color: $icon-color !default;
-$msg-close-icon-color-alt1: $icon-color !default;
-$msg-close-icon-color-alt2: $white !default;
-
-//Message Danger
-$msg-danger-color: #842029 !default;
-$msg-danger-bg-color: tint-color($danger, 80%) !default;
-$msg-danger-border-color: #f5c2c7 !default;
-$msg-danger-color-alt1: $red !default;
-$msg-danger-bg-color-alt1: $transparent !default;
-$msg-danger-border-color-alt1:$red !default;
-$msg-danger-color-alt2: $white !default;
-$msg-danger-bg-color-alt2: $red !default;
-$msg-danger-border-color-alt2: $red !default;
-
-$msg-danger-icon-color: #842029 !default;
-$msg-danger-icon-color-alt1: $red !default;
-$msg-danger-icon-color-alt2: $white !default;
-
-$msg-danger-close-icon-color: $icon-color !default;
-$msg-danger-close-icon-color-alt1: $icon-color !default;
-$msg-danger-close-icon-color-alt2: $white !default;
-
-//Message success
-$msg-success-color: #0f5132 !default;
-$msg-success-bg-color: tint-color($success, 80%) !default;
-$msg-success-border-color:#badbcc !default;
-$msg-success-color-alt1: darken($green, 10%) !default;
-$msg-success-bg-color-alt1: $transparent !default;
-$msg-success-border-color-alt1: $green !default;
-$msg-success-color-alt2: $white !default;
-$msg-success-bg-color-alt2: $green !default;
-$msg-success-border-color-alt2: $green !default;
-
-$msg-success-icon-color: darken($green, 10%) !default;
-$msg-success-icon-color-alt1: darken($green, 10%) !default;
-$msg-success-icon-color-alt2: $white !default;
-
-$msg-success-close-icon-color: $icon-color !default;
-$msg-success-close-icon-color-alt1: $icon-color !default;
-$msg-success-close-icon-color-alt2: $white !default;
-
-//Message warning
-$msg-warning-color: #664d03 !default;
-$msg-warning-bg-color: tint-color($warning, 80%) !default;
-$msg-warning-border-color: #ffecb5 !default;
-$msg-warning-color-alt1: #866500 !default;
-$msg-warning-bg-color-alt1: $transparent !default;
-$msg-warning-border-color-alt1: #866500 !default;
-$msg-warning-color-alt2: $gray-900 !default;
-$msg-warning-bg-color-alt2: $yellow !default;
-$msg-warning-border-color-alt2: $yellow !default;
-
-$msg-warning-icon-color: #866500 !default;
-$msg-warning-icon-color-alt1: darken($yellow, 25%) !default;
-$msg-warning-icon-color-alt2: $gray-900 !default;
-
-$msg-warning-close-icon-color: $icon-color !default;
-$msg-warning-close-icon-color-alt1: $icon-color !default;
-$msg-warning-close-icon-color-alt2: $gray-900 !default;
-
-//Message Info
-$msg-info-color: #055160 !default;
-$msg-info-bg-color: #cff4fc !default;
-$msg-info-border-color: #b5effb !default;
-$msg-info-color-alt1: #066477 !default;
-$msg-info-bg-color-alt1: $transparent !default;
-$msg-info-border-color-alt1: #066477 !default;
-$msg-info-color-alt2: $gray-900 !default;
-$msg-info-bg-color-alt2: $cyan !default;
-$msg-info-border-color-alt2: $cyan !default;
-
-$msg-info-icon-color: darken($cyan, 25%) !default;
-$msg-info-icon-color-alt1: darken($cyan, 25%) !default;
-$msg-info-icon-color-alt2: $gray-900 !default;
-
-$msg-info-close-icon-color: $icon-color !default;
-$msg-info-close-icon-color-alt1: $icon-color !default;
-$msg-info-close-icon-color-alt2: $gray-900 !default;
-
-//App bar
-//Light
-$appbar-bg-color-alt1: $gray-100 !default;
-$appbar-color-alt1: $gray-900 !default;
-$appbar-border-color-alt1: $gray-100 !default;
-$appbar-hover-bg-color-alt1: rgba(transparent, .056) !default;
-
-//Dark
-$appbar-bg-color-alt2: $gray-900 !default;
-$appbar-color-alt2: $white !default;
-$appbar-border-color-alt2: $gray-900 !default;
-$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
-
-//shadow
-$appbar-bottom-shadow: none !default;
-$appbar-top-shadow: none !default;
-
-//rating
-$rating-selected-color: $primary !default;
-$rating-unrated-color: $gray-600 !default;
-$rating-selected-disabled-color: $gray-500 !default;
-$rating-unrated-disabled-color: $gray-400 !default;
-$rating-selected-hover-color: $gray-600 !default;
-$rating-unrated-hover-color: $primary !default;
-$rating-pressed-color: lighten($primary, 15%) !default;
-
-//font-icons
-$font-icon-8: 8px !default;
-$font-icon-9: 9px !default;
-$font-icon-10: 10px !default;
-$font-icon-12: 12px !default;
-$font-icon-13: 13px !default;
-$font-icon-14: 14px !default;
-$font-icon-15: 15px !default;
-$font-icon-16: 16px !default;
-$font-icon-17: 17px !default;
-$font-icon-18: 18px !default;
-$font-icon-20: 20px !default;
-$font-icon-22: 22px !default;
-$font-icon-24: 24px !default;
-$font-icon-26: 26px !default;
-$font-icon-28: 28px !default;
-$font-icon-32: 32px !default;
-
-$font-size: 12px !default;
-$font-weight: 400 !default;
-$error-font-color: $danger !default;
-$warning-font-color: $yellow !default;
-$success-font-color: #198754 !default;
-$information-font-color: #0dcaf0 !default;
-$accordion-text-active-color: shade-color($primary, 10%) !default;
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:list';
+@import '../common/mixin.scss';
+
+$black: #000 !default;
+$white: #fff !default;
+
+@function shade-color($color, $percentage) {
+  @return color.mix($black, $color, $percentage);
+}
+
+@function tint-color($color, $percentage) {
+  @return color.mix($white, $color, $percentage);
+}
+
+$transparent: transparent;
+
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$success-light: tint-color($success, 80%) !default;
+$info-light: tint-color($info, 80%) !default;
+$warning-light: tint-color($warning, 80%) !default;
+$danger-light: tint-color($danger, 80%) !default;
+$primary-text-color: $white !default;
+$primary-light: tint-color($primary, 50%) !default;
+$primary-lighter: tint-color($primary, 90%) !default;
+$success-dark: color.adjust($success, $lightness: -10%) !default;
+$info-dark: color.adjust($info, $lightness: -25%) !default;
+$warning-dark: color.adjust($warning, $lightness: -25%) !default;
+$danger-dark: color.adjust($danger, $lightness: -10%) !default;
+$success-light-alt: tint-color($success, 80%) !default;
+$info-light-alt: tint-color($info, 80%) !default;
+$warning-light-alt: tint-color($warning, 80%) !default;
+$danger-light-alt: tint-color($danger, 80%) !default;
+
+$content-bg-color: $white !default;
+$content-bg-color-alt1: $gray-100 !default;
+$content-bg-color-alt2: $gray-200 !default;
+$content-bg-color-alt3: $gray-300 !default;
+$content-bg-color-alt4: $gray-400 !default;
+$content-bg-color-alt5: $gray-500 !default;
+$content-bg-color-hover: $gray-200 !default;
+$content-bg-color-pressed: $gray-400 !default;
+$content-bg-color-focus: $gray-200 !default;
+$content-bg-color-selected: $primary !default;
+$content-bg-color-dragged: $gray-400 !default;
+$content-bg-color-disabled: $white !default;
+$flyout-bg-color: $white !default;
+$flyout-bg-color-hover: $gray-200 !default;
+$flyout-bg-color-pressed: $primary !default;
+$flyout-bg-color-focus: $gray-200 !default;
+$overlay-bg-color: rgba($black, .5) !default;
+$table-bg-color-hover: color.adjust($content-bg-color-alt1, $lightness: -3%) !default;
+$table-bg-color-pressed: $gray-300 !default;
+$table-bg-color-selected: color.adjust($content-bg-color-alt1, $lightness: -6%) !default;
+
+$colorpicker-gradient-1: #f00 !default;
+$colorpicker-gradient-2: #ff0 !default;
+$ccolorpicker-gradient-3: #0f0 !default;
+$colorpicker-gradient-4: #0ff !default;
+$colorpicker-gradient-5: #00f !default;
+$colorpicker-gradient-6: #f0f !default;
+$colorpicker-gradient-7: #ff0004 !default;
+$spreadsheet-selection-1: #673ab8;
+$spreadsheet-selection-2: #9c27b0;
+$spreadsheet-selection-3: #029688;
+$spreadsheet-selection-4: #4caf51;
+$spreadsheet-selection-5: #fe9800;
+$spreadsheet-selection-6: #3f52b5;
+
+$content-text-color: $gray-900 !default;
+$content-text-color-alt1: $gray-800 !default;
+$content-text-color-alt2: $gray-700 !default;
+$content-text-color-alt3: $gray-600 !default;
+$content-text-color-hover: $gray-900 !default;
+$content-text-color-pressed: $gray-900 !default;
+$content-text-color-focus: $gray-900 !default;
+$content-text-color-selected: $primary-text-color !default;
+$content-text-color-dragged: $gray-900 !default;
+$content-text-color-disabled: $gray-500 !default;
+$placeholder-text-color: $gray-600 !default;
+$flyout-text-color: $gray-900 !default;
+$flyout-text-color-hover: $gray-900 !default;
+$flyout-text-color-pressed: $primary-text-color !default;
+$flyout-text-color-focus: $gray-900 !default;
+$table-text-color-hover: $gray-900 !default;
+$table-text-color-pressed: $gray-900 !default;
+$table-text-color-selected: $gray-900 !default;
+
+$icon-color: $gray-600 !default;
+$icon-color-hover: $gray-800 !default;
+$icon-color-pressed: $gray-900 !default;
+$icon-color-disabled: $gray-500 !default;
+
+$border-light: $gray-300 !default;
+$border: $gray-400 !default;
+$border-dark: $gray-500 !default;
+$border-hover: $gray-400 !default;
+$border-pressed: $gray-500 !default;
+$border-focus: $gray-400 !default;
+$border-selected: $gray-500 !default;
+$border-dragged: $gray-300 !default;
+$border-disabled: $gray-300 !default;
+$border-warning: $warning !default;
+$border-error: $danger !default;
+$border-success: $success !default;
+$spreadsheet-gridline: $gray-300 !default;
+$flyout-border: $gray-300 !default;
+
+$tooltip-bg-color: $gray-900 !default;
+$tooltip-border: $gray-900;
+$toooltip-text-color: #f9fafb !default;
+
+$shadow: 0 .8px 16px rgba($black, .15) !default;
+$shadow-sm: 0 2px 4px rgba($black, .075) !default;
+$shadow-md: 0 8px 12px rgba($black, .15) !default;
+$shadow-lg: 0 16px 48px rgba($black, .175) !default;
+$shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
+$shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
+$shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
+$shadow-none: 0 0 rgba($black, 0) !default;
+$shadow-focus-ring1: 0 0 0 4px rgba($primary, .25) !default;
+$shadow-focus-ring2: 0 0 0 4px rgba($primary, .25) !default;
+$primary-shadow-focus: 0 0 0 4px rgba(tint-color($primary, 15%), .5) !default;
+$secondary-shadow-focus: 0 0 0 4px rgba(tint-color($secondary, 15%), .5) !default;
+$success-shadow-focus: 0 0 0 4px rgba(tint-color($success, 15%), .5) !default;
+$danger-shadow-focus: 0 0 0 4px rgba(tint-color($danger, 15%), .5) !default;
+$info-shadow-focus: 0 0 0 4px rgba(tint-color($info, 15%), .5) !default;
+$warning-shadow-focus: 0 0 0 4px rgba(tint-color($warning, 15%), .5) !default;
+
+$font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+
+$text-xxs: 10px !default;
+$text-xs: 12px !default;
+$text-sm: 14px !default;
+$text-base: 16px !default;
+$text-lg: 18px !default;
+$text-xl: 20px !default;
+$text-2xl: 24px !default;
+$text-3xl: 30px !default;
+$text-4xl: 36px !default;
+$text-5xl: 48px !default;
+$text-6xl: 60px !default;
+$text-7xl: 72px !default;
+$text-8xl: 96px !default;
+$text-9xl: 128px !default;
+
+$h1-font-size: 40px !default;
+$h2-font-size: 32px !default;
+$h3-font-size: 28px !default;
+$h4-font-size: $text-2xl !default;
+$h5-font-size: $text-xl !default;
+$h6-font-size: $text-base !default;
+
+$leading-none: 1 !default;
+$leading-tight: 1.25 !default;
+$leading-snug: 1.375 !default;
+$leading-normal: 1.5 !default;
+$leading-relaxed: 1.625 !default;
+$leading-loose: 2 !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$secondary-bg-color: $secondary !default;
+$secondary-border-color: $secondary-bg-color !default;
+$secondary-text-color: $white !default;
+$secondary-bg-color-hover: shade-color($secondary-bg-color, 15%) !default;
+$secondary-border-color-hover: shade-color($secondary-bg-color, 20%) !default;
+$secondary-text-color-hover: $secondary-text-color !default;
+$secondary-bg-color-pressed: shade-color($secondary-bg-color, 20%) !default;
+$secondary-border-color-pressed: shade-color($secondary-bg-color, 25%) !default;
+$secondary-text-color-pressed: $secondary-text-color !default;
+$secondary-bg-color-focus: $secondary-bg-color-hover !default;
+$secondary-border-color-focus: $secondary-border-color-hover !default;
+$secondary-text-color-focus: $secondary-text-color-hover !default;
+$secondary-bg-color-disabled: rgba($secondary-bg-color, .65) !default;
+$secondary-border-color-disabled: $secondary-bg-color-disabled !default;
+$secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;
+
+$primary-bg-color: $primary !default;
+$primary-border-color: $primary !default;
+$primary-text: $primary-text-color !default;
+$primary-bg-color-hover: shade-color($primary-bg-color, 15%) !default;
+$primary-border-color-hover: shade-color($primary-bg-color, 20%) !default;
+$primary-text-hover: $primary-text !default;
+$primary-bg-color-pressed: shade-color($primary-bg-color, 20%) !default;
+$primary-border-color-pressed: shade-color($primary-bg-color, 25%) !default;
+$primary-text-pressed: $primary-text-color !default;
+$primary-bg-color-focus: $primary-bg-color-hover !default;
+$primary-border-color-focus: $primary-border-color-hover !default;
+$primary-text-focus: $primary-text !default;
+$primary-bg-color-disabled: rgba($primary-bg-color, .65) !default;
+$primary-border-color-disabled: $primary-bg-color-disabled !default;
+$primary-text-disabled: rgba($primary-text, .65) !default;
+
+$success-bg-color: $success !default;
+$success-border-color: $success !default;
+$success-text: $white !default;
+$success-bg-color-hover: shade-color($success-bg-color, 15%) !default;
+$success-border-color-hover: shade-color($success-bg-color, 20%) !default;
+$success-text-hover: $success-text !default;
+$success-bg-color-pressed: shade-color($success-bg-color, 20%) !default;
+$success-border-color-pressed: shade-color($success-bg-color, 25%) !default;
+$success-text-pressed: $success-text !default;
+$success-bg-color-focus: $success-bg-color-hover !default;
+$success-border-color-focus: $success-border-color-hover !default;
+$success-text-focus: $success-text !default;
+$success-bg-color-disabled: rgba($success-bg-color, .65) !default;
+$success-border-color-disabled: $success-bg-color-disabled !default;
+$success-text-disabled: rgba($success-text, .65) !default;
+
+$warning-bg-color: $warning !default;
+$warning-border-color: $warning !default;
+$warning-text: $black !default;
+$warning-bg-color-hover: tint-color($warning-bg-color, 15%) !default;
+$warning-border-color-hover: tint-color($warning-bg-color, 10%) !default;
+$warning-text-hover: $warning-text !default;
+$warning-bg-color-pressed: tint-color($warning-bg-color, 20%) !default;
+$warning-border-color-pressed: tint-color($warning-bg-color, 10%) !default;
+$warning-text-pressed: $warning-text !default;
+$warning-bg-color-focus: $warning-bg-color-hover !default;
+$warning-border-color-focus: $warning-border-color-hover !default;
+$warning-text-focus: $warning-text !default;
+$warning-bg-color-disabled: rgba($warning-bg-color, .65) !default;
+$warning-border-color-disabled: $warning-bg-color-disabled !default;
+$warning-text-disabled: rgba($warning-text, .65) !default;
+
+$danger-bg-color: $danger !default;
+$danger-border-color: $danger !default;
+$danger-text: $white !default;
+$danger-bg-color-hover: shade-color($danger-bg-color, 15%) !default;
+$danger-border-color-hover: shade-color($danger-bg-color, 20%) !default;
+$danger-text-hover: $danger-text !default;
+$danger-bg-color-pressed: shade-color($danger-bg-color, 20%) !default;
+$danger-border-color-pressed: shade-color($danger-bg-color, 25%) !default;
+$danger-text-pressed: $danger-text !default;
+$danger-bg-color-focus: $danger-bg-color-hover !default;
+$danger-border-color-focus: $danger-border-color-hover !default;
+$danger-text-focus: $danger-text !default;
+$danger-bg-color-disabled: rgba($danger-bg-color, .65) !default;
+$danger-border-color-disabled: $danger-bg-color-disabled !default;
+$danger-text-disabled: rgba($danger-text, .65) !default;
+
+$info-bg-color: $info !default;
+$info-border-color: $info !default;
+$info-text: $black !default;
+$info-bg-color-hover: tint-color($info-bg-color, 15%) !default;
+$info-border-color-hover: tint-color($info-bg-color, 10%) !default;
+$info-text-hover: $info-text !default;
+$info-bg-color-pressed: tint-color($info-bg-color, 20%) !default;
+$info-border-color-pressed: tint-color($info-bg-color, 10%) !default;
+$info-text-pressed: $info-text !default;
+$info-bg-color-focus: $info-bg-color-hover !default;
+$info-border-color-focus: $info-border-color-hover !default;
+$info-text-focus: $info-text-hover !default;
+$info-bg-color-disabled: rgba($info-bg-color, .65) !default;
+$info-border-color-disabled: $info-bg-color-disabled !default;
+$info-text-disabled: rgba($info-text, .65) !default;
+
+$primary-outline: $primary-bg-color !default;
+$secondary-outline: $secondary-bg-color !default;
+$warning-outline: $warning-bg-color !default;
+$danger-outline: $danger-bg-color !default;
+$success-outline: $success-bg-color !default;
+$info-outline: $info-bg-color !default;
+
+$series-1: $gray-200;
+$series-2: $gray-300;
+$series-3: $gray-400;
+$series-4: $gray-800;
+$series-5: #1f2937;
+$series-6: #5e6e22;
+$series-7: #978a2b;
+$series-8: #6a4314;
+$series-9: #52236c;
+$series-10: #3a6b6f;
+$series-11: #d64f56;
+$series-12: #f3a93c;
+$skin-name: 'bootstrap5' !default;
+$theme-name: 'bootstrap5' !default;
+
+$diagram-palette-background: $white !default;
+$diagram-palette-hover-background: $content-bg-color-hover !default;
+
+$msg-color: #41464b !default;
+$msg-bg-color: #e2e3e5 !default;
+$msg-border-color: #d3d6d8 !default;
+$msg-color-alt1: $gray-900 !default;
+$msg-bg-color-alt1: $transparent !default;
+$msg-border-color-alt1: #9ca3af !default;
+$msg-color-alt2: $white !default;
+$msg-bg-color-alt2: $gray-600 !default;
+$msg-border-color-alt2:$gray-600 !default;
+
+$msg-icon-color: $gray-900 !default;
+$msg-icon-color-alt1: $gray-900 !default;
+$msg-icon-color-alt2: $white !default;
+
+$msg-close-icon-color: $icon-color !default;
+$msg-close-icon-color-alt1: $icon-color !default;
+$msg-close-icon-color-alt2: $white !default;
+
+$msg-danger-color: #842029 !default;
+$msg-danger-bg-color: tint-color($danger, 80%) !default;
+$msg-danger-border-color: #f5c2c7 !default;
+$msg-danger-color-alt1: $red !default;
+$msg-danger-bg-color-alt1: $transparent !default;
+$msg-danger-border-color-alt1:$red !default;
+$msg-danger-color-alt2: $white !default;
+$msg-danger-bg-color-alt2: $red !default;
+$msg-danger-border-color-alt2: $red !default;
+
+$msg-danger-icon-color: #842029 !default;
+$msg-danger-icon-color-alt1: $red !default;
+$msg-danger-icon-color-alt2: $white !default;
+
+$msg-danger-close-icon-color: $icon-color !default;
+$msg-danger-close-icon-color-alt1: $icon-color !default;
+$msg-danger-close-icon-color-alt2: $white !default;
+
+$msg-success-color: #0f5132 !default;
+$msg-success-bg-color: tint-color($success, 80%) !default;
+$msg-success-border-color:#badbcc !default;
+$msg-success-color-alt1: color.adjust($green, $lightness: -10%) !default;
+$msg-success-bg-color-alt1: $transparent !default;
+$msg-success-border-color-alt1: $green !default;
+$msg-success-color-alt2: $white !default;
+$msg-success-bg-color-alt2: $green !default;
+$msg-success-border-color-alt2: $green !default;
+
+$msg-success-icon-color: color.adjust($green, $lightness: -10%) !default;
+$msg-success-icon-color-alt1: color.adjust($green, $lightness: -10%) !default;
+$msg-success-icon-color-alt2: $white !default;
+
+$msg-success-close-icon-color: $icon-color !default;
+$msg-success-close-icon-color-alt1: $icon-color !default;
+$msg-success-close-icon-color-alt2: $white !default;
+
+$msg-warning-color: #664d03 !default;
+$msg-warning-bg-color: tint-color($warning, 80%) !default;
+$msg-warning-border-color: #ffecb5 !default;
+$msg-warning-color-alt1: #866500 !default;
+$msg-warning-bg-color-alt1: $transparent !default;
+$msg-warning-border-color-alt1: #866500 !default;
+$msg-warning-color-alt2: $gray-900 !default;
+$msg-warning-bg-color-alt2: $yellow !default;
+$msg-warning-border-color-alt2: $yellow !default;
+
+$msg-warning-icon-color: #866500 !default;
+$msg-warning-icon-color-alt1: color.adjust($yellow, $lightness: -25%) !default;
+$msg-warning-icon-color-alt2: $gray-900 !default;
+
+$msg-warning-close-icon-color: $icon-color !default;
+$msg-warning-close-icon-color-alt1: $icon-color !default;
+$msg-warning-close-icon-color-alt2: $gray-900 !default;
+
+$msg-info-color: #055160 !default;
+$msg-info-bg-color: #cff4fc !default;
+$msg-info-border-color: #b5effb !default;
+$msg-info-color-alt1: #066477 !default;
+$msg-info-bg-color-alt1: $transparent !default;
+$msg-info-border-color-alt1: #066477 !default;
+$msg-info-color-alt2: $gray-900 !default;
+$msg-info-bg-color-alt2: $cyan !default;
+$msg-info-border-color-alt2: $cyan !default;
+
+$msg-info-icon-color: color.adjust($cyan, $lightness: -25%) !default;
+$msg-info-icon-color-alt1: color.adjust($cyan, $lightness: -25%) !default;
+$msg-info-icon-color-alt2: $gray-900 !default;
+
+$msg-info-close-icon-color: $icon-color !default;
+$msg-info-close-icon-color-alt1: $icon-color !default;
+$msg-info-close-icon-color-alt2: $gray-900 !default;
+
+$appbar-bg-color-alt1: $gray-100 !default;
+$appbar-color-alt1: $gray-900 !default;
+$appbar-border-color-alt1: $gray-100 !default;
+$appbar-hover-bg-color-alt1: rgba(transparent, .056) !default;
+
+$appbar-bg-color-alt2: $gray-900 !default;
+$appbar-color-alt2: $white !default;
+$appbar-border-color-alt2: $gray-900 !default;
+$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
+
+$appbar-bottom-shadow: none !default;
+$appbar-top-shadow: none !default;
+
+$rating-selected-color: $primary !default;
+$rating-unrated-color: $gray-600 !default;
+$rating-selected-disabled-color: $gray-500 !default;
+$rating-unrated-disabled-color: $gray-400 !default;
+$rating-selected-hover-color: $gray-600 !default;
+$rating-unrated-hover-color: $primary !default;
+$rating-pressed-color: color.adjust($primary, $lightness: 15%) !default;
+
+$font-icon-8: 8px !default;
+$font-icon-9: 9px !default;
+$font-icon-10: 10px !default;
+$font-icon-12: 12px !default;
+$font-icon-13: 13px !default;
+$font-icon-14: 14px !default;
+$font-icon-15: 15px !default;
+$font-icon-16: 16px !default;
+$font-icon-17: 17px !default;
+$font-icon-18: 18px !default;
+$font-icon-20: 20px !default;
+$font-icon-22: 22px !default;
+$font-icon-24: 24px !default;
+$font-icon-26: 26px !default;
+$font-icon-28: 28px !default;
+$font-icon-32: 32px !default;
+
+$font-size: 12px !default;
+$font-weight: 400 !default;
+$error-font-color: $danger !default;
+$warning-font-color: $yellow !default;
+$success-font-color: #198754 !default;
+$information-font-color: #0dcaf0 !default;
+$accordion-text-active-color: shade-color($primary, 10%) !default;
+
+$badge-primary-bg-color-darken: color.adjust($primary, $lightness: -10%);
+$badge-secondary-bg-color-darken: color.adjust($content-bg-color-alt1, $lightness: -10%);
+$badge-success-bg-color-darken: color.adjust($success-light, $lightness: -10%);
+$badge-danger-bg-color-darken: color.adjust($danger-light, $lightness: -10%);
+$badge-warning-bg-color-darken: color.adjust($warning-light, $lightness: -10%);
+$badge-info-bg-color-darken: color.adjust($info-light, $lightness: -10%);
+$badge-light-bg-color-darken: color.adjust($content-bg-color-alt2, $lightness: -10%);
+$badge-dark-bg-color-darken: color.adjust($content-text-color-alt2, $lightness: -10%);
+$breadcrumb-item-hover-color: color.adjust($primary-outline, $lightness: -10%);
+$breadcrumb-item-active-color: color.adjust($primary-outline, $lightness: -15%);
+$breadcrumb-item-focus-border-color: color.adjust($primary-outline, $lightness: -10%);
+$calendar-yeardecade-selected-hover-bg: color.adjust($primary-bg-color, $lightness: -10%);
+$calendar-active-hover-bg-color: color.adjust($primary-bg-color, $lightness: -10%);
+$tab-alt-wrap-hover-color: color.adjust($secondary, $lightness: -15%);
+$treeview-item-active-hover-bg: color.adjust($content-bg-color-selected, $lightness: -5%);
+$de-style-btn-bg-color: color.adjust($secondary-bg-color, $lightness: -7.5%);
+$de-toggle-border-color: color.adjust($secondary-bg-color, $lightness: -12.5%);
+$de-toggle-hover-color: color.adjust($secondary-bg-color, $lightness: -7.5%);
+$de-toggle-border-hover-color: color.adjust($secondary-bg-color, $lightness: -10%);
+$de-toggle-disabled-color: color.adjust($secondary-bg-color, $lightness: 65%);
+$connector-point-hover-color: color.adjust($primary, $lightness: -10%);
+$gantt-connected-task: color.adjust($primary, $lightness: 20%);
+$gantt-active-parent-task: color.adjust($warning-text, $lightness: 10%);
+$schedule-hover-bg-color: color.adjust($content-bg-color-alt1, $lightness: -2%);
+$timepicker-active-border-color: color.adjust($gray-600, $lightness: -10%);
+$hdr-selection-border-color: color.adjust($border-light, $lightness: -8%);
+$link-color: $primary;
+
+$frozen-shadow: rgba(0, 0, 0, .12) !default;
+$frozen-shadow-2: rgba(0, 0, 0, .12) !default;