@progress/kendo-theme-default 10.2.0-dev.0 → 10.2.0-dev.1

package/dist/meta/sassdoc-data.json

@@ -10034,8 +10034,8 @@
         {
             "description": "The color of the Chart grid lines (major).\n",
             "commentRange": {
-                "start": 102,
-                "end": 103
+                "start": 99,
+                "end": 100
             },
             "context": {
                 "type": "variable",
@@ -10043,8 +10043,8 @@
                 "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ))",
                 "scope": "default",
                 "line": {
-                    "start": 104,
-                    "end": 104
+                    "start": 101,
+                    "end": 101
                 }
             },
             "group": [
@@ -10061,8 +10061,8 @@
         {
             "description": "The color of the Chart grid lines (minor).\n",
             "commentRange": {
-                "start": 106,
-                "end": 107
+                "start": 103,
+                "end": 104
             },
             "context": {
                 "type": "variable",
@@ -10070,8 +10070,8 @@
                 "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ))",
                 "scope": "default",
                 "line": {
-                    "start": 108,
-                    "end": 108
+                    "start": 105,
+                    "end": 105
                 }
             },
             "group": [
@@ -90246,8 +90246,8 @@
                 {
                     "description": "The color of the Chart grid lines (major).\n",
                     "commentRange": {
-                        "start": 102,
-                        "end": 103
+                        "start": 99,
+                        "end": 100
                     },
                     "context": {
                         "type": "variable",
@@ -90255,8 +90255,8 @@
                         "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ))",
                         "scope": "default",
                         "line": {
-                            "start": 104,
-                            "end": 104
+                            "start": 101,
+                            "end": 101
                         }
                     },
                     "group": [
@@ -90273,8 +90273,8 @@
                 {
                     "description": "The color of the Chart grid lines (minor).\n",
                     "commentRange": {
-                        "start": 106,
-                        "end": 107
+                        "start": 103,
+                        "end": 104
                     },
                     "context": {
                         "type": "variable",
@@ -90282,8 +90282,8 @@
                         "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ))",
                         "scope": "default",
                         "line": {
-                            "start": 108,
-                            "end": 108
+                            "start": 105,
+                            "end": 105
                         }
                     },
                     "group": [

package/dist/meta/sassdoc-raw-data.json

@@ -9177,8 +9177,8 @@
     {
         "description": "The color of the Chart grid lines (major).\n",
         "commentRange": {
-            "start": 102,
-            "end": 103
+            "start": 99,
+            "end": 100
         },
         "context": {
             "type": "variable",
@@ -9186,8 +9186,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ))",
             "scope": "default",
             "line": {
-                "start": 104,
-                "end": 104
+                "start": 101,
+                "end": 101
             }
         },
         "group": [
@@ -9202,8 +9202,8 @@
     {
         "description": "The color of the Chart grid lines (minor).\n",
         "commentRange": {
-            "start": 106,
-            "end": 107
+            "start": 103,
+            "end": 104
         },
         "context": {
             "type": "variable",
@@ -9211,8 +9211,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ))",
             "scope": "default",
             "line": {
-                "start": 108,
-                "end": 108
+                "start": 105,
+                "end": 105
             }
         },
         "group": [

package/dist/meta/variables.json

@@ -14796,33 +14796,21 @@
         "type": "String",
         "value": "var(--kendo-line-height, normal)"
     },
-    "kendo-chart-sm-font-size": {
-        "type": "Number",
-        "value": "11px"
-    },
-    "kendo-chart-md-font-size": {
-        "type": "Number",
-        "value": "12px"
-    },
-    "kendo-chart-lg-font-size": {
-        "type": "Number",
-        "value": "16px"
-    },
     "kendo-chart-tooltip-font-size": {
         "type": "Calculation",
         "value": "calc(0.875rem * 0.929)"
     },
     "kendo-chart-label-font-size": {
-        "type": "Number",
-        "value": "0.857em"
+        "type": "String",
+        "value": "var(--kendo-font-size-sm, inherit)"
     },
     "kendo-chart-title-font-size": {
-        "type": "Number",
-        "value": "1.143em"
+        "type": "String",
+        "value": "var(--kendo-font-size-lg, inherit)"
     },
     "kendo-chart-pane-title-font-size": {
-        "type": "Number",
-        "value": "0.857em"
+        "type": "String",
+        "value": "var(--kendo-font-size-sm, inherit)"
     },
     "kendo-chart-pane-title-font-weight": {
         "type": "String",

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ff6358",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#000000",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue-a11y.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue A11Y",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-ocean-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Ocean Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.1",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "10.2.0-dev.0",
+  "version": "10.2.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,12 +52,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-core": "10.2.0-dev.0",
-    "@progress/kendo-theme-utils": "10.2.0-dev.0"
+    "@progress/kendo-theme-core": "10.2.0-dev.1",
+    "@progress/kendo-theme-utils": "10.2.0-dev.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "8131b2e63fdb04068216ad13c1d1dfa74ed6cd97"
+  "gitHead": "d0b68833bec04a91798d4f90ad41a819401b13ce"
 }

package/scss/dataviz/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:string";
 @use "sass:math";
 @use "sass:meta";
 @use "../core/_index.scss" as *;
@@ -16,27 +17,6 @@
         }
     }
 
-
-    // Exported variables
-    // stylelint-disable selector-class-pattern
-    .k-var--chart-font {
-        font-size: $kendo-chart-font-size;
-    }
-
-    .k-var--chart-title-font {
-        font-size: $kendo-chart-title-font-size;
-    }
-
-    .k-var--chart-pane-title-font {
-        font-size: $kendo-chart-pane-title-font-size;
-        font-weight: $kendo-chart-pane-title-font-weight;
-    }
-
-    .k-var--chart-label-font {
-        font-size: $kendo-chart-label-font-size;
-    }
-    // stylelint-enable selector-class-pattern
-
     // Elements
     .k-chart,
     .k-sparkline,
@@ -427,25 +407,15 @@
 
 
     // export variables to allow use in scripts
+    // TODO: remove in favor of $_css-vars once all suites are updated
     $exported: (
         primary: $kendo-color-primary,
         primary-contrast: $kendo-color-primary-contrast,
         base: $kendo-base-bg,
         background: $kendo-chart-bg,
 
-        border-radius: k-border-radius(md),
-
         normal-background: $kendo-base-bg,
         normal-text-color: $kendo-base-text,
-        hover-background: $kendo-hover-bg,
-        hover-text-color: $kendo-hover-text,
-        selected-background: $kendo-selected-bg,
-        selected-text-color: $kendo-selected-text,
-
-        success: $kendo-color-success,
-        info: $kendo-color-info,
-        warning: $kendo-color-warning,
-        error: $kendo-color-error,
 
         series-a: $kendo-series-a,
         series-b: $kendo-series-b,
@@ -486,20 +456,113 @@
         series-30: $kendo-series-30,
 
         gauge-pointer: $kendo-color-primary,
-        gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg ))
+        gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg )),
+
+        chart-font-size: $kendo-chart-font-size,
+        chart-title-font-size: $kendo-chart-title-font-size,
+        chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
+        chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
+        chart-label-font-size: $kendo-chart-label-font-size,
+
+        chart-inactive: $kendo-chart-inactive,
+        chart-major-lines: $kendo-chart-major-lines,
+        chart-minor-lines: $kendo-chart-minor-lines,
+        chart-area-opacity: $kendo-chart-area-opacity,
+        chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
+        chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
+        chart-notes-background: $kendo-chart-notes-background,
+        chart-notes-border: $kendo-chart-notes-border,
+        chart-notes-lines: $kendo-chart-notes-lines,
+        chart-crosshair-background: $kendo-chart-crosshair-background,
+        chart-error-bars-background: $kendo-chart-error-bars-background,
+
     );
 
+    // TODO: remove in favor of CSS variables once all suites are updated
     @each $name, $value in $exported {
         $type: meta.type-of($value);
 
         .k-var--#{$name} {
-            @if $type == "color" or $type == "string" {
+            @if $type == "color" or $type == "string" and string.index($value, "color") {
                 // background-color can store any color
-                background-color: $value;
-            } @else if $type == "number" {
-                // margin-top can store positive & negative values
-                margin-top: $value;
+                background-color: #{$value};
+            } @else if string.index($name, "font-size") {
+                font-size: #{$value};
+            } @else if string.index($name, "font-weight") {
+                font-weight: #{$value};
+            } @else if string.index($name, "opacity") {
+                opacity: #{$value};
             }
+
+        }
+    }
+
+    $_css-vars: (
+        chart-primary-bg: $kendo-color-primary,
+        chart-primary-contrast: $kendo-color-primary-contrast,
+        chart-bg: $kendo-chart-bg,
+        chart-text: $kendo-chart-text,
+
+        chart-font-size: $kendo-chart-font-size,
+        chart-title-font-size: $kendo-chart-title-font-size,
+        chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
+        chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
+        chart-label-font-size: $kendo-chart-label-font-size,
+
+        chart-inactive: $kendo-chart-inactive,
+        chart-major-lines: $kendo-chart-major-lines,
+        chart-minor-lines: $kendo-chart-minor-lines,
+        chart-area-opacity: $kendo-chart-area-opacity,
+        chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
+        chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
+        chart-notes-bg: $kendo-chart-notes-background,
+        chart-notes-border: $kendo-chart-notes-border,
+        chart-notes-lines: $kendo-chart-notes-lines,
+        chart-crosshair-bg: $kendo-chart-crosshair-background,
+        chart-error-bars-bg: $kendo-chart-error-bars-background,
+
+        chart-series-1: $kendo-series-1,
+        chart-series-2: $kendo-series-2,
+        chart-series-3: $kendo-series-3,
+        chart-series-4: $kendo-series-4,
+        chart-series-5: $kendo-series-5,
+        chart-series-6: $kendo-series-6,
+        chart-series-7: $kendo-series-7,
+        chart-series-8: $kendo-series-8,
+        chart-series-9: $kendo-series-9,
+        chart-series-10: $kendo-series-10,
+        chart-series-11: $kendo-series-11,
+        chart-series-12: $kendo-series-12,
+        chart-series-13: $kendo-series-13,
+        chart-series-14: $kendo-series-14,
+        chart-series-15: $kendo-series-15,
+        chart-series-16: $kendo-series-16,
+        chart-series-17: $kendo-series-17,
+        chart-series-18: $kendo-series-18,
+        chart-series-19: $kendo-series-19,
+        chart-series-20: $kendo-series-20,
+        chart-series-21: $kendo-series-21,
+        chart-series-22: $kendo-series-22,
+        chart-series-23: $kendo-series-23,
+        chart-series-24: $kendo-series-24,
+        chart-series-25: $kendo-series-25,
+        chart-series-26: $kendo-series-26,
+        chart-series-27: $kendo-series-27,
+        chart-series-28: $kendo-series-28,
+        chart-series-29: $kendo-series-29,
+        chart-series-30: $kendo-series-30,
+
+        chart-gauge-pointer: $kendo-color-primary,
+        chart-gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg ))
+
+    );
+
+    .k-chart,
+    .k-diagram,
+    .k-gauge,
+    .k-sparkline {
+        @each $name, $value in $_css-vars {
+            --kendo-#{$name}: #{$value};
         }
     }
 

package/scss/dataviz/_theme.scss

@@ -5,53 +5,6 @@
 
 @mixin kendo-dataviz--theme-base() {
 
-    // Exported variables
-    // stylelint-disable  selector-class-pattern
-    .k-var--chart-inactive {
-        background-color: $kendo-chart-inactive;
-    }
-
-    .k-var--chart-major-lines {
-        background-color: $kendo-chart-major-lines;
-    }
-
-    .k-var--chart-minor-lines {
-        background-color: $kendo-chart-minor-lines;
-    }
-
-    .k-var--chart-area-opacity {
-        opacity: $kendo-chart-area-opacity;
-    }
-
-    .k-var--chart-area-inactive-opacity {
-        opacity: $kendo-chart-area-inactive-opacity;
-    }
-
-    .k-var--chart-line-inactive-opacity {
-        opacity: $kendo-chart-line-inactive-opacity;
-    }
-
-    .k-var--chart-notes-background {
-        background-color: $kendo-chart-notes-background;
-    }
-
-    .k-var--chart-notes-border {
-        background-color: $kendo-chart-notes-border;
-    }
-
-    .k-var--chart-notes-lines {
-        background-color: $kendo-chart-notes-lines;
-    }
-
-    .k-var--chart-crosshair-background {
-        background-color: $kendo-chart-crosshair-background;
-    }
-
-    .k-var--chart-error-bars-background {
-        background-color: $kendo-chart-error-bars-background;
-    }
-    // stylelint-enable  selector-class-pattern
-
     // Elements
     .k-chart,
     .k-sparkline,

package/scss/dataviz/_variables.scss

@@ -90,12 +90,9 @@ $kendo-chart-border-width: 0px !default;
 $kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-chart-line-height: var( --kendo-line-height, normal ) !default;
-$kendo-chart-sm-font-size: 11px !default;
-$kendo-chart-md-font-size: 12px !default;
-$kendo-chart-lg-font-size: 16px !default;
 $kendo-chart-tooltip-font-size: calc( #{$kendo-font-size} * .929) !default;
-$kendo-chart-label-font-size: .857em !default;
-$kendo-chart-title-font-size: 1.143em !default;
+$kendo-chart-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chart-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-chart-pane-title-font-size: $kendo-chart-label-font-size !default;
 $kendo-chart-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;