@syncfusion/ej2-base 25.2.5 → 26.1.35

package/styles/definition/_bootstrap5.scss

@@ -1,12 +1,7 @@
 @import '../common/mixin.scss';
 
-// color system
-
-// black
-$black:    #000 !default;
-
-// White
-$white:    #fff !default;
+$black: #000 !default;
+$white: #fff !default;
 
 @function shade-color($color, $percentage) {
   @return mix($black, $color, $percentage);
@@ -16,10 +11,8 @@ $white:    #fff !default;
   @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;
@@ -30,41 +23,39 @@ $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;
+$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;
+$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;
@@ -86,7 +77,6 @@ $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;
@@ -101,7 +91,6 @@ $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;
@@ -121,13 +110,11 @@ $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;
@@ -143,16 +130,14 @@ $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-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;
@@ -166,10 +151,8 @@ $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;
@@ -185,7 +168,6 @@ $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;
@@ -193,9 +175,6 @@ $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;
@@ -203,15 +182,12 @@ $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
+$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;
@@ -229,8 +205,6 @@ $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;
@@ -247,8 +221,6 @@ $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;
@@ -265,7 +237,6 @@ $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;
@@ -282,7 +253,6 @@ $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;
@@ -299,7 +269,6 @@ $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;
@@ -316,7 +285,6 @@ $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;
@@ -324,8 +292,6 @@ $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;
@@ -341,13 +307,9 @@ $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;
@@ -366,7 +328,6 @@ $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;
@@ -385,7 +346,6 @@ $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;
@@ -404,7 +364,6 @@ $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;
@@ -423,7 +382,6 @@ $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;
@@ -442,24 +400,19 @@ $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;
@@ -468,7 +421,6 @@ $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;
@@ -493,3 +445,31 @@ $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: darken($primary, 10%);
+$badge-secondary-bg-color-darken: darken($content-bg-color-alt1, 10%);
+$badge-success-bg-color-darken: darken($success-light, 10%);
+$badge-danger-bg-color-darken: darken($danger-light, 10%);
+$badge-warning-bg-color-darken: darken($warning-light, 10%);
+$badge-info-bg-color-darken: darken($info-light, 10%);
+$badge-light-bg-color-darken: darken($content-bg-color-alt2, 10%);
+$badge-dark-bg-color-darken: darken($content-text-color-alt2, 10%);
+$breadcrumb-item-hover-color: darken($primary-outline, 10%);
+$breadcrumb-item-active-color: darken($primary-outline, 15%);
+$breadcrumb-item-focus-border-color: darken($primary-outline, 10%);
+$calendar-yeardecade-selected-hover-bg: darken($primary-bg-color, 10%);
+$calendar-active-hover-bg-color: darken($primary-bg-color, 10%);
+$tab-alt-wrap-hover-color: darken($secondary, 15%);
+$treeview-item-active-hover-bg: darken($content-bg-color-selected, 5%);
+$de-style-btn-bg-color: darken($secondary-bg-color, 7.5%);
+$de-toggle-border-color: darken($secondary-bg-color, 12.5%);
+$de-toggle-hover-color: darken($secondary-bg-color, 7.5%);
+$de-toggle-border-hover-color: darken($secondary-bg-color, 10%);
+$de-toggle-disabled-color: lighten($secondary-bg-color, 65%);
+$connector-point-hover-color: darken($primary, 10%);
+$gantt-connected-task: lighten($primary, 20%);
+$gantt-active-parent-task: lighten($warning-text, 10%);
+$schedule-hover-bg-color: darken($content-bg-color-alt1, 2%);
+$timepicker-active-border-color: darken($gray-600, 10%);
+$hdr-selection-border-color: darken($border-light, 8%);
+$link-color: $primary;

package/styles/definition/_fabric-dark.scss

@@ -44,9 +44,6 @@ $theme-name: 'fabric-dark' !default;
 
 $font-family: 'Segoe UI', 'GeezaPro', 'DejaVu Serif', sans-serif, '-apple-system', 'BlinkMacSystemFont' !default;
 
-//Message component
-
-//Message Default
 $msg-color: $theme-dark-font !default;
 $msg-bg-color: $neutral-lighter-alt !default;
 $msg-border-color: $neutral-lighter-alt !default;
@@ -65,7 +62,6 @@ $msg-close-icon-color: $neutral-secondary !default;
 $msg-close-icon-color-alt1: $neutral-secondary !default;
 $msg-close-icon-color-alt2: $theme-dark-font !default;
 
-//Message Danger
 $msg-danger-color: #fcebe9 !default;
 $msg-danger-bg-color: #432623 !default;
 $msg-danger-border-color: $msg-danger-bg-color !default;
@@ -84,7 +80,6 @@ $msg-danger-close-icon-color: $neutral-secondary !default;
 $msg-danger-close-icon-color-alt1: $neutral-secondary !default;
 $msg-danger-close-icon-color-alt2: $theme-dark-font !default;
 
-//Message success
 $msg-success-color: lighten($success-bg, 40%) !default;
 $msg-success-bg-color: darken($success-bg, 20%) !default;
 $msg-success-border-color: darken($success-bg, 20%) !default;
@@ -103,7 +98,6 @@ $msg-success-close-icon-color: $neutral-secondary !default;
 $msg-success-close-icon-color-alt1: $neutral-secondary !default;
 $msg-success-close-icon-color-alt2: $theme-dark-font !default;
 
-//Message warning
 $msg-warning-color: #fff4ce !default;
 $msg-warning-bg-color: darken($msg-warning-color, 70%) !default;
 $msg-warning-border-color: darken($msg-warning-color, 70%) !default;
@@ -122,7 +116,6 @@ $msg-warning-close-icon-color: $neutral-secondary !default;
 $msg-warning-close-icon-color-alt1: $neutral-secondary !default;
 $msg-warning-close-icon-color-alt2: $theme-dark-font !default;
 
-//Message Info
 $msg-info-color: lighten($info-font, 20%) !default;
 $msg-info-bg-color: darken($info-font, 50%) !default;
 $msg-info-border-color: $msg-info-bg-color !default;
@@ -141,24 +134,19 @@ $msg-info-close-icon-color: $neutral-secondary !default;
 $msg-info-close-icon-color-alt1: $neutral-secondary !default;
 $msg-info-close-icon-color-alt2: $theme-dark-font !default;
 
-//App bar
-//Light
 $appbar-bg-color-alt1: $neutral-lighter-alt !default;
 $appbar-color-alt1: $neutral-primary !default;
 $appbar-border-color-alt1: $neutral-lighter-alt !default;
 $appbar-hover-bg-color-alt1: rgba(255, 255, 255, .08) !default;
 
-//Dark
 $appbar-bg-color-alt2: $neutral-quintenary !default;
 $appbar-color-alt2: $neutral-primary !default;
 $appbar-border-color-alt2: $neutral-quintenary !default;
 $appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
 
-//shadow
 $appbar-bottom-shadow: none !default;
 $appbar-top-shadow: none !default;
 
-//definition
 $font-size: 14px !default;
 $font-weight: normal !default;
 $font-path: 'common-images' !default;

package/styles/definition/_fabric.scss

@@ -42,9 +42,6 @@ $theme-name: 'fabric' !default;
 
 $font-family: 'Segoe UI', 'GeezaPro', 'DejaVu Serif', sans-serif, '-apple-system', 'BlinkMacSystemFont' !default;
 
-//Message component
-
-//Message Default
 $msg-color: $theme-light-font !default;
 $msg-bg-color: $neutral-lighter !default;
 $msg-border-color: $neutral-lighter !default;
@@ -63,7 +60,6 @@ $msg-close-icon-color: $neutral-secondary !default;
 $msg-close-icon-color-alt1: $neutral-secondary !default;
 $msg-close-icon-color-alt2: $neutral-white !default;
 
-//Message success
 $msg-success-color: $theme-light-font !default;
 $msg-success-bg-color:#dff6dd !default;
 $msg-success-border-color:#dff6dd !default;
@@ -82,7 +78,6 @@ $msg-success-close-icon-color: $neutral-secondary !default;
 $msg-success-close-icon-color-alt1: $neutral-secondary !default;
 $msg-success-close-icon-color-alt2: $neutral-white !default;
 
-//Message warning
 $msg-warning-color: $theme-light-font !default;
 $msg-warning-bg-color: #fff4ce !default;
 $msg-warning-border-color: $msg-warning-bg-color !default;
@@ -101,7 +96,6 @@ $msg-warning-close-icon-color: $neutral-secondary !default;
 $msg-warning-close-icon-color-alt1: $neutral-secondary !default;
 $msg-warning-close-icon-color-alt2: $neutral-white !default;
 
-//Message Danger
 $msg-danger-color: $theme-light-font !default;
 $msg-danger-bg-color: #fde7e9 !default;
 $msg-danger-border-color:$msg-danger-bg-color !default;
@@ -120,7 +114,6 @@ $msg-danger-close-icon-color: $neutral-secondary !default;
 $msg-danger-close-icon-color-alt1: $neutral-secondary !default;
 $msg-danger-close-icon-color-alt2: $neutral-white !default;
 
-//Message Info
 $msg-info-color: $theme-light-font !default;
 $msg-info-bg-color:#cdf4fc !default;
 $msg-info-border-color: $msg-info-bg-color !default;
@@ -139,24 +132,19 @@ $msg-info-close-icon-color: $neutral-secondary !default;
 $msg-info-close-icon-color-alt1: $neutral-secondary !default;
 $msg-info-close-icon-color-alt2: $neutral-white !default;
 
-//App bar
-//Light
 $appbar-bg-color-alt1: $neutral-lighter !default;
 $appbar-color-alt1: $neutral-primary !default;
 $appbar-border-color-alt1: $neutral-lighter !default;
 $appbar-hover-bg-color-alt1: rgba(transparent, .056) !default;
 
-//Dark
 $appbar-bg-color-alt2: $neutral-primary !default;
 $appbar-color-alt2: $neutral-lighter !default;
 $appbar-border-color-alt2: $neutral-primary !default;
 $appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
 
-//shadow
 $appbar-bottom-shadow: none !default;
 $appbar-top-shadow: none !default;
 
-//definition
 $font-size: 14px !default;
 $font-weight: normal !default;
 $font-path: 'common-images' !default;