fix(dataviz): use conditional black or white colors for chart lines

telerik · Sep 11, 2021 · e205eda · e205eda
1 parent 2ee6aa7
commit e205eda
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 49 deletions.
diff --git a/packages/bootstrap/scss/dataviz/_variables.scss b/packages/bootstrap/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,22 +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;
 
 $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

diff --git a/packages/classic/scss/dataviz/_variables.scss b/packages/classic/scss/dataviz/_variables.scss
@@ -95,12 +95,14 @@ $chart-pane-title-font-size: $chart-label-font-size !default;
 $chart-pane-title-font-weight: $font-weight-normal !default;
 
 $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;
@@ -110,22 +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;
 
 $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

diff --git a/packages/default/scss/dataviz/_layout.scss b/packages/default/scss/dataviz/_layout.scss
@@ -39,7 +39,7 @@
         font-size: $chart-font-size;
         line-height: $chart-line-height;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $chart-tap-highlight-color;
+        -webkit-tap-highlight-color: $rgba-transparent;
     }
 
     .k-chart,

diff --git a/packages/default/scss/dataviz/_variables.scss b/packages/default/scss/dataviz/_variables.scss
@@ -95,12 +95,14 @@ $chart-pane-title-font-size: $chart-label-font-size !default;
 $chart-pane-title-font-weight: $font-weight-normal !default;
 
 $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;
@@ -110,22 +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;
 
 $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

diff --git a/packages/material/scss/dataviz/_variables.scss b/packages/material/scss/dataviz/_variables.scss
@@ -95,12 +95,14 @@ $chart-pane-title-font-size: $chart-label-font-size !default;
 $chart-pane-title-font-weight: $font-weight-normal !default;
 
 $chart-inactive: rgba( $component-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;
@@ -110,22 +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;
 
 $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