@progress/kendo-theme-bootstrap 4.41.2-dev.0 → 4.41.3-dev.0

package/scss/_bootstrap-overrides.scss

@@ -16,6 +16,8 @@ $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:    #000000 !default;
 
+$dark-theme: false !default;
+
 $body-bg: $white !default;
 $body-color: contrast-wcag( $body-bg, $gray-900, $gray-100 ) !default;
 
@@ -26,6 +28,7 @@ $component-border: contrast-wcag( $component-bg, $gray-300, $gray-700 ) !default
 $input-bg: $component-bg !default;
 $input-color: contrast-wcag( $input-bg, $gray-700, $gray-300 ) !default;
 $input-border-color:  contrast-wcag( $input-bg, $gray-400, $gray-600 ) !default;
+$input-placeholder-color: contrast-wcag( $input-bg, $gray-600, $gray-400 ) !default;
 
 $card-bg: $component-bg !default;
 $card-color: $component-text !default;
@@ -39,8 +42,15 @@ $table-bg: $component-bg !default;
 $table-color: $component-text !default;
 $table-border-color: $component-border !default;
 
+$tooltip-bg: if( $dark-theme, $white, $black ) !default;
+$tooltip-color: contrast-wcag( $tooltip-bg ) !default;
+
 $popover-font-size: $font-size-base !default;
 
+$popover-bg: $card-bg !default;
+$popover-color: $card-color !default;
+$popover-border-color: $card-border-color !default;
+
 $popover-header-bg: $component-bg !default;
 $popover-header-text: $component-text !default;
 $popover-header-border: $component-border !default;

package/scss/_variables.scss

@@ -264,7 +264,7 @@ $component-text: $body-text !default;
 /// Border color of a component.
 /// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
 /// @group component
-$component-border: $gray-300 !default;
+$component-border: contrast-wcag( $component-bg, $gray-300, $gray-700 ) !default;
 
 
 /// The background of the components' chrome area.
@@ -390,7 +390,7 @@ $placeholder-bg: rgba(0, 0, 0, .1) !default;
 $invalid-bg: null !default;
 $invalid-text: $error !default;
 $invalid-border: $error !default;
-$invalid-shadow: 0 0 0 .2rem rgba($invalid-border, .25) !default;
+$invalid-shadow: 0 0 0 .25rem rgba($invalid-border, .25) !default;
 
 
 // Drag clue

package/scss/button/_variables.scss

@@ -127,6 +127,6 @@ $flat-button-focus-opacity: null !default;
 $flat-button-active-opacity: .16 !default;
 $flat-button-selected-opacity: .2 !default;
 
-$clear-button-text: #6c757d !default;
-$clear-button-hover-text: $button-text !default;
+$clear-button-text: inherit !default;
+$clear-button-hover-text: inherit !default;
 $clear-button-focused-opacity: .1 !default;

package/scss/dataviz/_variables.scss

@@ -98,11 +98,11 @@ $chart-inactive: rgba( $body-text, .5 ) !default;
 
 /// The color of the Chart grid lines (major).
 /// @group charts
-$chart-major-lines: rgba(0, 0, 0, .08) !default;
+$chart-major-lines: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
 
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$chart-minor-lines: rgba(0, 0, 0, .04) !default;
+$chart-minor-lines: rgba( if( $dark-theme, $white, $black ), .04 ) !default;
 
 $chart-area-opacity: .6 !default;
 $chart-area-inactive-opacity: .1 !default;
@@ -112,23 +112,20 @@ $chart-bg: $component-bg !default;
 $chart-text: $component-text !default;
 $chart-border: $component-border !default;
 
-$chart-tap-highlight-color: rgba(0, 0, 0, 0);
-
-$chart-crosshair-background: rgba(0, 0, 0, .5) !default;
+$chart-crosshair-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 $chart-crosshair-shared-tooltip-color: $chart-text !default;
 $chart-crosshair-shared-tooltip-background: try-shade( $chart-bg, 1 ) !default;
-$chart-crosshair-shared-tooltip-border: rgba(0, 0, 0, .08) !default;
+$chart-crosshair-shared-tooltip-border: rgba( if( $dark-theme, $white, $black ), .08) !default;
 
-$chart-notes-background: rgba(0, 0, 0, .5) !default;
-$chart-notes-border: rgba(0, 0, 0, .5) !default;
-$chart-notes-lines: rgba(0, 0, 0, .5) !default;
+$chart-notes-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
+$chart-notes-border: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
+$chart-notes-lines: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 
-$error-bars-background: rgba(0, 0, 0, .5) !default;
+$error-bars-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
 
-$chart-selection-marque-background: $series-a !default;
 $selection-handle-size: 22px !default;
-$selection-border-color: rgba(0, 0, 0, .08) !default;
-$selection-shadow: inset 0 1px 7px rgba(0, 0, 0, .15) !default;
+$selection-border-color: rgba( if( $dark-theme, $white, $black ), .08 ) !default;
+$selection-shadow: inset 0 1px 7px rgba( if( $dark-theme, $white, $black ), .15) !default;
 
 
 // TreeMap

package/scss/grid/_variables.scss

@@ -67,7 +67,7 @@ $grid-footer-border: $grid-header-border !default;
 
 /// Background color of alternating rows in grid
 /// @group grid
-$grid-alt-bg: rgba( black, .04 ) !default;
+$grid-alt-bg: rgba( contrast-wcag( $grid-bg ), .04 ) !default;
 /// Text color of alternating rows in grid
 /// @group grid
 $grid-alt-text: null !default;
@@ -77,7 +77,7 @@ $grid-alt-border: null !default;
 
 /// Background color of hovered rows in grid
 /// @group grid
-$grid-hovered-bg: rgba( black, .08) !default;
+$grid-hovered-bg: rgba( contrast-wcag( $grid-bg ), .08 ) !default;
 /// Text color of hovered rows in grid
 /// @group grid
 $grid-hovered-text: null !default;
@@ -87,7 +87,7 @@ $grid-hovered-border: null !default;
 
 /// Background color of selected rows in grid
 /// @group grid
-$grid-selected-bg: rgba($selected-bg, .25) !default;
+$grid-selected-bg: rgba( $selected-bg, .25 ) !default;
 /// Text color of selected rows in grid
 /// @group grid
 $grid-selected-text: $grid-text !default;
@@ -128,7 +128,7 @@ $grid-sticky-header-border: $grid-sticky-border !default;
 $grid-sticky-footer-bg: $grid-header-bg !default;
 $grid-sticky-footer-hovered-bg: $grid-sticky-footer-bg !default;
 
-$grid-sticky-selected-bg: mix($selected-bg, #ffffff, 25%) !default;
+$grid-sticky-selected-bg: mix($selected-bg, $grid-bg, 25%) !default;
 $grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
 
 $grid-sticky-hovered-bg: try-shade( $grid-bg ) !default;

package/scss/input/_variables.scss

@@ -92,5 +92,5 @@ $input-icon-opacity: null !default;
 
 
 // Input separator
-$input-separator-color: $clear-button-text !default;
+$input-separator-color: $input-text !default;
 $input-separator-opacity: .5 !default;

package/scss/popover/_variables.scss

@@ -5,6 +5,7 @@ $popover-border-radius: $card-border-radius !default;
 $popover-font-size: $card-font-size !default;
 $popover-font-family: $card-font-family !default;
 $popover-line-height: $card-line-height !default;
+
 $popover-bg: $card-bg !default;
 $popover-text: $card-text !default;
 $popover-border: $card-border !default;
@@ -14,6 +15,7 @@ $popover-header-padding-y: $card-header-padding-y !default;
 $popover-header-padding-x: $card-header-padding-x !default;
 $popover-header-border-width: $card-header-border-width !default;
 $popover-header-border-style: $popover-border-style !default;
+
 $popover-header-bg: $card-header-bg !default;
 $popover-header-text: $card-header-text !default;
 $popover-header-border: $card-header-border !default;

package/scss/skeleton/_variables.scss

@@ -6,6 +6,6 @@ $skeleton-rect-border-radius: 0 !default;
 
 $skeleton-circle-border-radius: 9999px !default;
 
-$skeleton-item-bg: rgba( $dark, .2 ) !default;
+$skeleton-item-bg: rgba( $inverse, .2 ) !default;
 
 $skeleton-wave-bg: rgba( black, .04 ) !default;

package/scss/taskboard/_variables.scss

@@ -27,7 +27,7 @@ $taskboard-columns-container-gap: $taskboard-spacer !default;
 $taskboard-column-width: 320px !default;
 $taskboard-column-border-width: 1px !default;
 $taskboard-column-border-radius: $border-radius-sm !default;
-$taskboard-column-bg: $gray-100 !default;
+$taskboard-column-bg: if( $dark-theme, $gray-900, $gray-100 ) !default;
 $taskboard-column-text: null !default;
 $taskboard-column-border: transparent !default;
 
@@ -92,5 +92,5 @@ $taskboard-card-header-hover-text: $primary-lighter !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;
-$taskboard-drag-placeholder-bg: rgba(255, 255, 255, .2) !default;
+$taskboard-drag-placeholder-bg: rgba( if( $dark-theme, $white, $black ), .1) !default;
 $taskboard-drag-placeholder-border: $component-border !default;

package/scss/textarea/_variables.scss

@@ -48,7 +48,7 @@ $textarea-focus-shadow: $input-focused-shadow !default;
 $textarea-placeholder-text: $input-placeholder-text !default;
 $textarea-placeholder-opacity: $input-placeholder-opacity !default;
 
-$textarea-selected-text: $input-selected-text !default;
 $textarea-selected-bg: $input-selected-bg !default;
+$textarea-selected-text: $input-selected-text !default;
 
 $textarea-invalid-focus-shadow: $invalid-shadow !default;