@progress/kendo-themes-html 10.1.1-dev.1 → 10.2.0-dev.1

package/dist/esm/window/tests/window-rtl.mjs

@@ -4109,12 +4109,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states55 = [
   States.disabled
 ];
-var options52 = {};
+var options52 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions50 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions50.size,
     palette,
     columns = defaultOptions50.columns,
     tileSize,
@@ -4145,7 +4149,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx160("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx160("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -4666,7 +4671,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx172("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx172(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx172(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx172("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx172(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx172(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs72(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx172(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx172(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/window/tests/window-theme-colors.mjs

@@ -4109,12 +4109,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states55 = [
   States.disabled
 ];
-var options52 = {};
+var options52 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions50 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions50.size,
     palette,
     columns = defaultOptions50.columns,
     tileSize,
@@ -4145,7 +4149,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx160("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx160("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -4666,7 +4671,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx172("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx172(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx172(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx172("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx172(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx172(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs72(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx172(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx172(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/window/tests/window.mjs

@@ -4109,12 +4109,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states55 = [
   States.disabled
 ];
-var options52 = {};
+var options52 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions50 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions50.size,
     palette,
     columns = defaultOptions50.columns,
     tileSize,
@@ -4145,7 +4149,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx160("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx160("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -4666,7 +4671,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx172("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx172(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx172(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx172("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx172(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx172(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs72(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx172(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx172(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/esm/window/window.spec.mjs

@@ -4109,12 +4109,16 @@ var COLORPALETTE_CLASSNAME = `k-colorpalette`;
 var states55 = [
   States.disabled
 ];
-var options52 = {};
+var options52 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultOptions50 = {
-  columns: 10
+  columns: 10,
+  size: Size.medium
 };
 var ColorPalette = (props) => {
   const {
+    size = defaultOptions50.size,
     palette,
     columns = defaultOptions50.columns,
     tileSize,
@@ -4145,7 +4149,8 @@ var ColorPalette = (props) => {
         COLORPALETTE_CLASSNAME,
         stateClassNames(COLORPALETTE_CLASSNAME, {
           disabled
-        })
+        }),
+        optionClassNames(COLORPALETTE_CLASSNAME, { size })
       ),
       children: /* @__PURE__ */ jsx160("table", { className: "k-colorpalette-table", children: /* @__PURE__ */ jsx160("tbody", { children: newChildren.length > 0 ? newChildren : props.children }) })
     }
@@ -4666,7 +4671,7 @@ var ColorEditor = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx172("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx172(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx172(ColorPalette, { palette }) }),
+    /* @__PURE__ */ jsx172("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ jsx172(ColorGradient, { focus: focusView, size, canvasOrientation }) : /* @__PURE__ */ jsx172(ColorPalette, { palette, size }) }),
     actionButtons && /* @__PURE__ */ jsxs72(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
       /* @__PURE__ */ jsx172(Button, { className: "k-coloreditor-cancel", size, children: "Cancel" }),
       /* @__PURE__ */ jsx172(Button, { themeColor: "primary", size, className: "k-coloreditor-apply", children: "Apply" })

package/dist/types/colorpalette/colorpalette.spec.d.ts

@@ -1,6 +1,12 @@
 export declare const COLORPALETTE_CLASSNAME = "k-colorpalette";
 declare const states: "disabled"[];
-export type KendoColorPaletteProps = {
+declare const options: {
+    size: ("small" | "medium" | "large")[];
+};
+export type KendoColorPaletteOptions = {
+    size?: (typeof options.size)[number] | null;
+};
+export type KendoColorPaletteProps = KendoColorPaletteOptions & {
     palette?: Array<string> | any;
     columns?: number;
     tileSize?: string;
@@ -11,10 +17,13 @@ export type KendoColorPaletteState = {
 export declare const ColorPalette: {
     (props: KendoColorPaletteProps & KendoColorPaletteState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     states: "disabled"[];
-    options: {};
+    options: {
+        size: ("small" | "medium" | "large")[];
+    };
     className: string;
     defaultOptions: {
         columns: number;
+        size: "medium";
     };
 };
 export default ColorPalette;

package/dist/types/colorpalette/tests/colorpalette-sizes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/types/pivotgrid/pivotgrid.spec.d.ts

@@ -3,7 +3,7 @@ export type KendoPivotGridProps = {
     emptyCell?: React.JSX.Element;
     columnHeaders?: React.JSX.Element;
     rowHeaders?: React.JSX.Element;
-    configurator?: JSX.Element;
+    configurator?: React.JSX.Element;
     configuratorDisplay?: "none" | "closed" | "opened";
     configuratorPosition?: "left" | "bottom" | "right" | "top";
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "10.1.1-dev.1",
+  "version": "10.2.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,5 +53,5 @@
   "devDependencies": {
     "@types/react": "^18.3.3"
   },
-  "gitHead": "25b2dddd209d358645e4cb0c2e5dfbad40927aec"
+  "gitHead": "d0b68833bec04a91798d4f90ad41a819401b13ce"
 }

package/src/chart/tests/chart.tsx

@@ -10,8 +10,8 @@ export default () =>(
                         <clipPath id="kdef4"><path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="#000" strokeLinejoin="miter" fill="none"></path></clipPath>
                     </defs>
                     <g>
-                        <path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="none" className="k-var--background"></path>
-                        <path d="M38 68 L 1319 68 1319 338 38 338Z" stroke="none" className="k-var--background" fillOpacity="0"></path>
+                        <path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="none" fill="var(--kendo-chart-bg)"></path>
+                        <path d="M38 68 L 1319 68 1319 338 38 338Z" stroke="none" fill="var(--kendo-chart-bg)" fillOpacity="0"></path>
                         <path d="M38.5 311.5 L 1319.5 311.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
                         <path d="M38.5 284.5 L 1319.5 284.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
                         <path d="M38.5 257.5 L 1319.5 257.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
@@ -38,39 +38,39 @@ export default () =>(
                     </g>
                     <g>
                         <g clipPath="url(#kdef4)">
-                            <path d="M38 177.255 C 85.397 159.112 132.936 122.77 180.333 122.77 227.73 122.77 275.27 124.052 322.667 124.052 370.064 124.052 417.603 104.666 465 104.666 512.397 104.666 559.936 104.95 607.333 104.95 654.73 104.95 702.27 97.687 749.667 97.687 797.064 97.687 844.603 177.485 892 177.485 939.397 177.485 986.936 131.514 1034.333 118.787 1081.73 106.06 1129.27 101.048 1176.667 101.048 1224.064 101.048 1271.603 125.333 1319 137.457 L 1319 338 38 338" stroke="none" className="k-var--series-a" fillOpacity="0.8"></path>
-                            <path d="M38 203.162 C 85.397 199.813 132.936 197.613 180.333 193.104 227.73 188.596 275.27 176.081 322.667 176.081 370.064 176.081 417.603 183.236 465 183.236 512.397 183.236 559.936 175.986 607.333 175.986 654.73 175.986 743.051 175.986 749.667 176.824 797.064 182.82 844.603 198.104 892 212.005 939.397 225.905 986.936 260.308 1034.333 260.308 1081.73 260.308 1129.27 171.424 1176.667 171.424 1224.064 171.424 1271.603 185.939 1319 193.186 L 1319 338 38 338" stroke="none" className="k-var--series-b" fillOpacity="0.8"></path>
-                            <path d="M38 233.416 C 85.397 230.651 132.936 225.113 180.333 225.113 227.73 225.113 275.27 277.506 322.667 277.506 370.064 277.506 417.603 218.685 465 205.714 487.345 199.598 559.936 203.069 607.333 199.598 654.73 196.127 702.27 184.87 749.667 184.87 797.064 184.87 844.603 218.62 892 218.62 939.397 218.62 986.936 191.161 1034.333 191.161 1081.73 191.161 1129.27 303.116 1176.667 303.116 1224.064 303.116 1271.603 204.012 1319 154.535 L 1319 338 38 338" stroke="none" className="k-var--series-c" fillOpacity="0.8"></path>
-                            <circle cx="465" cy="182.382" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="465" cy="204.693" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="607.333" cy="198.623" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="749.667" cy="184.004" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="892" cy="217.504" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="1034.333" cy="190.248" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="1176.667" cy="301.374" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="607.333" cy="104.676" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="465" cy="104.394" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="322.667" cy="175.28" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="322.667" cy="123.637" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="180.333" cy="122.364" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="749.667" cy="97.467" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="749.667" cy="176.017" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="892" cy="210.938" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="892" cy="176.674" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="607.333" cy="175.187" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="322.667" cy="275.955" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="38" cy="176.446" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="1034.333" cy="118.411" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="1176.667" cy="100.803" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="1319" cy="136.943" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="38" cy="202.161" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="180.333" cy="192.178" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="1034.333" cy="258.883" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="1176.667" cy="170.657" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="1319" cy="192.258" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="38" cy="232.19" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="180.333" cy="223.949" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="1319" cy="153.894" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
+                            <path d="M38 177.255 C 85.397 159.112 132.936 122.77 180.333 122.77 227.73 122.77 275.27 124.052 322.667 124.052 370.064 124.052 417.603 104.666 465 104.666 512.397 104.666 559.936 104.95 607.333 104.95 654.73 104.95 702.27 97.687 749.667 97.687 797.064 97.687 844.603 177.485 892 177.485 939.397 177.485 986.936 131.514 1034.333 118.787 1081.73 106.06 1129.27 101.048 1176.667 101.048 1224.064 101.048 1271.603 125.333 1319 137.457 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-1)" fillOpacity="0.8"></path>
+                            <path d="M38 203.162 C 85.397 199.813 132.936 197.613 180.333 193.104 227.73 188.596 275.27 176.081 322.667 176.081 370.064 176.081 417.603 183.236 465 183.236 512.397 183.236 559.936 175.986 607.333 175.986 654.73 175.986 743.051 175.986 749.667 176.824 797.064 182.82 844.603 198.104 892 212.005 939.397 225.905 986.936 260.308 1034.333 260.308 1081.73 260.308 1129.27 171.424 1176.667 171.424 1224.064 171.424 1271.603 185.939 1319 193.186 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-2)" fillOpacity="0.8"></path>
+                            <path d="M38 233.416 C 85.397 230.651 132.936 225.113 180.333 225.113 227.73 225.113 275.27 277.506 322.667 277.506 370.064 277.506 417.603 218.685 465 205.714 487.345 199.598 559.936 203.069 607.333 199.598 654.73 196.127 702.27 184.87 749.667 184.87 797.064 184.87 844.603 218.62 892 218.62 939.397 218.62 986.936 191.161 1034.333 191.161 1081.73 191.161 1129.27 303.116 1176.667 303.116 1224.064 303.116 1271.603 204.012 1319 154.535 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-3)" fillOpacity="0.8"></path>
+                            <circle cx="465" cy="182.382" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="465" cy="204.693" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="607.333" cy="198.623" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="749.667" cy="184.004" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="892" cy="217.504" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="1034.333" cy="190.248" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="1176.667" cy="301.374" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="607.333" cy="104.676" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="465" cy="104.394" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="322.667" cy="175.28" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="322.667" cy="123.637" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="180.333" cy="122.364" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="749.667" cy="97.467" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="749.667" cy="176.017" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="892" cy="210.938" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="892" cy="176.674" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="607.333" cy="175.187" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="322.667" cy="275.955" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="38" cy="176.446" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="1034.333" cy="118.411" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="1176.667" cy="100.803" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="1319" cy="136.943" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="38" cy="202.161" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="180.333" cy="192.178" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="1034.333" cy="258.883" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="1176.667" cy="170.657" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="1319" cy="192.258" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="38" cy="232.19" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="180.333" cy="223.949" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="1319" cy="153.894" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="24.5" y="358" stroke="none" fillOpacity="1">2002</text>
                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="166.833" y="358" stroke="none" fillOpacity="1">2003</text>
                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="309.167" y="358" stroke="none" fillOpacity="1">2004</text>
@@ -95,21 +95,21 @@ export default () =>(
                             <text style={{ font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="558" y="29" stroke="none" fillOpacity="1">Gross domestic product growth</text>
                             <text style={{ font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="611" y="47" stroke="none" fillOpacity="1">/GDP annual %/</text>
                             <g transform="matrix(1,0,0,1,590.5,371)">
-                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#008fd3" strokeWidth="0" className="k-var--series-a"></path>
+                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#008fd3" strokeWidth="0" fill="var(--kendo-chart-series-1)"></path>
                                 <g>
                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">India</text>
                                 </g>
                                 <path style={{ cursor: 'pointer' }} d="M0 0 L 47 0 47 14 0 14Z" stroke="none" fill="#fff" fillOpacity="0"></path>
                             </g>
                             <g transform="matrix(1,0,0,1,643.5,371)">
-                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#99d101" strokeWidth="0" className="k-var--series-b"></path>
+                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#99d101" strokeWidth="0" fill="var(--kendo-chart-series-2)"></path>
                                 <g>
                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">World</text>
                                 </g>
                                 <path style={{ cursor: 'pointer' }} d="M0 0 L 52 0 52 14 0 14Z" stroke="none" fill="#fff" fillOpacity="0"></path>
                             </g>
                             <g transform="matrix(1,0,0,1,701.5,371)">
-                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#f39b02" strokeWidth="0" className="k-var--series-c"></path>
+                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#f39b02" strokeWidth="0" fill="var(--kendo-chart-series-3)"></path>
                                 <g>
                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">Haiti</text>
                                 </g>

package/src/chart-wizard/templates/chart-wizard-normal.tsx

@@ -18,8 +18,8 @@ export const ChartWizardNormal = (props) => (
                                         <clipPath id="kdef4"><path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="#000" strokeLinejoin="miter" fill="none"></path></clipPath>
                                     </defs>
                                     <g>
-                                        <path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="none" className="k-var--background"></path>
-                                        <path d="M38 68 L 1319 68 1319 338 38 338Z" stroke="none" className="k-var--background" fillOpacity="0"></path>
+                                        <path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="none" fill="var(--kendo-chart-bg)"></path>
+                                        <path d="M38 68 L 1319 68 1319 338 38 338Z" stroke="none" fill="var(--kendo-chart-bg)" fillOpacity="0"></path>
                                         <path d="M38.5 311.5 L 1319.5 311.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
                                         <path d="M38.5 284.5 L 1319.5 284.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
                                         <path d="M38.5 257.5 L 1319.5 257.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
@@ -46,39 +46,39 @@ export const ChartWizardNormal = (props) => (
                                     </g>
                                     <g>
                                         <g clipPath="url(#kdef4)">
-                                            <path d="M38 177.255 C 85.397 159.112 132.936 122.77 180.333 122.77 227.73 122.77 275.27 124.052 322.667 124.052 370.064 124.052 417.603 104.666 465 104.666 512.397 104.666 559.936 104.95 607.333 104.95 654.73 104.95 702.27 97.687 749.667 97.687 797.064 97.687 844.603 177.485 892 177.485 939.397 177.485 986.936 131.514 1034.333 118.787 1081.73 106.06 1129.27 101.048 1176.667 101.048 1224.064 101.048 1271.603 125.333 1319 137.457 L 1319 338 38 338" stroke="none" className="k-var--series-a" fillOpacity="0.8"></path>
-                                            <path d="M38 203.162 C 85.397 199.813 132.936 197.613 180.333 193.104 227.73 188.596 275.27 176.081 322.667 176.081 370.064 176.081 417.603 183.236 465 183.236 512.397 183.236 559.936 175.986 607.333 175.986 654.73 175.986 743.051 175.986 749.667 176.824 797.064 182.82 844.603 198.104 892 212.005 939.397 225.905 986.936 260.308 1034.333 260.308 1081.73 260.308 1129.27 171.424 1176.667 171.424 1224.064 171.424 1271.603 185.939 1319 193.186 L 1319 338 38 338" stroke="none" className="k-var--series-b" fillOpacity="0.8"></path>
-                                            <path d="M38 233.416 C 85.397 230.651 132.936 225.113 180.333 225.113 227.73 225.113 275.27 277.506 322.667 277.506 370.064 277.506 417.603 218.685 465 205.714 487.345 199.598 559.936 203.069 607.333 199.598 654.73 196.127 702.27 184.87 749.667 184.87 797.064 184.87 844.603 218.62 892 218.62 939.397 218.62 986.936 191.161 1034.333 191.161 1081.73 191.161 1129.27 303.116 1176.667 303.116 1224.064 303.116 1271.603 204.012 1319 154.535 L 1319 338 38 338" stroke="none" className="k-var--series-c" fillOpacity="0.8"></path>
-                                            <circle cx="465" cy="182.382" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="465" cy="204.693" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="607.333" cy="198.623" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="749.667" cy="184.004" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="892" cy="217.504" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="1034.333" cy="190.248" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="1176.667" cy="301.374" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="607.333" cy="104.676" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="465" cy="104.394" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="322.667" cy="175.28" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="322.667" cy="123.637" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="180.333" cy="122.364" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="749.667" cy="97.467" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="749.667" cy="176.017" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="892" cy="210.938" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="892" cy="176.674" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="607.333" cy="175.187" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="322.667" cy="275.955" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="38" cy="176.446" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="1034.333" cy="118.411" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="1176.667" cy="100.803" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="1319" cy="136.943" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="38" cy="202.161" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="180.333" cy="192.178" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="1034.333" cy="258.883" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="1176.667" cy="170.657" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="1319" cy="192.258" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="38" cy="232.19" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="180.333" cy="223.949" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="1319" cy="153.894" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
+                                            <path d="M38 177.255 C 85.397 159.112 132.936 122.77 180.333 122.77 227.73 122.77 275.27 124.052 322.667 124.052 370.064 124.052 417.603 104.666 465 104.666 512.397 104.666 559.936 104.95 607.333 104.95 654.73 104.95 702.27 97.687 749.667 97.687 797.064 97.687 844.603 177.485 892 177.485 939.397 177.485 986.936 131.514 1034.333 118.787 1081.73 106.06 1129.27 101.048 1176.667 101.048 1224.064 101.048 1271.603 125.333 1319 137.457 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-1)" fillOpacity="0.8"></path>
+                                            <path d="M38 203.162 C 85.397 199.813 132.936 197.613 180.333 193.104 227.73 188.596 275.27 176.081 322.667 176.081 370.064 176.081 417.603 183.236 465 183.236 512.397 183.236 559.936 175.986 607.333 175.986 654.73 175.986 743.051 175.986 749.667 176.824 797.064 182.82 844.603 198.104 892 212.005 939.397 225.905 986.936 260.308 1034.333 260.308 1081.73 260.308 1129.27 171.424 1176.667 171.424 1224.064 171.424 1271.603 185.939 1319 193.186 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-2)" fillOpacity="0.8"></path>
+                                            <path d="M38 233.416 C 85.397 230.651 132.936 225.113 180.333 225.113 227.73 225.113 275.27 277.506 322.667 277.506 370.064 277.506 417.603 218.685 465 205.714 487.345 199.598 559.936 203.069 607.333 199.598 654.73 196.127 702.27 184.87 749.667 184.87 797.064 184.87 844.603 218.62 892 218.62 939.397 218.62 986.936 191.161 1034.333 191.161 1081.73 191.161 1129.27 303.116 1176.667 303.116 1224.064 303.116 1271.603 204.012 1319 154.535 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-3)" fillOpacity="0.8"></path>
+                                            <circle cx="465" cy="182.382" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="465" cy="204.693" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="607.333" cy="198.623" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="749.667" cy="184.004" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="892" cy="217.504" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="1034.333" cy="190.248" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="1176.667" cy="301.374" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="607.333" cy="104.676" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="465" cy="104.394" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="322.667" cy="175.28" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="322.667" cy="123.637" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="180.333" cy="122.364" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="749.667" cy="97.467" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="749.667" cy="176.017" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="892" cy="210.938" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="892" cy="176.674" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="607.333" cy="175.187" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="322.667" cy="275.955" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="38" cy="176.446" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="1034.333" cy="118.411" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="1176.667" cy="100.803" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="1319" cy="136.943" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="38" cy="202.161" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="180.333" cy="192.178" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="1034.333" cy="258.883" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="1176.667" cy="170.657" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="1319" cy="192.258" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="38" cy="232.19" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="180.333" cy="223.949" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="1319" cy="153.894" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
                                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="24.5" y="358" stroke="none" fillOpacity="1">2002</text>
                                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="166.833" y="358" stroke="none" fillOpacity="1">2003</text>
                                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="309.167" y="358" stroke="none" fillOpacity="1">2004</text>
@@ -103,21 +103,21 @@ export const ChartWizardNormal = (props) => (
                                             <text style={{ font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="558" y="29" stroke="none" fillOpacity="1">Gross domestic product growth</text>
                                             <text style={{ font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="611" y="47" stroke="none" fillOpacity="1">/GDP annual %/</text>
                                             <g transform="matrix(1,0,0,1,590.5,371)">
-                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#008fd3" strokeWidth="0" className="k-var--series-a"></path>
+                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#008fd3" strokeWidth="0" fill="var(--kendo-chart-series-1)"></path>
                                                 <g>
                                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">India</text>
                                                 </g>
                                                 <path style={{ cursor: 'pointer' }} d="M0 0 L 47 0 47 14 0 14Z" stroke="none" fill="#fff" fillOpacity="0"></path>
                                             </g>
                                             <g transform="matrix(1,0,0,1,643.5,371)">
-                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#99d101" strokeWidth="0" className="k-var--series-b"></path>
+                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#99d101" strokeWidth="0" fill="var(--kendo-chart-series-2)"></path>
                                                 <g>
                                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">World</text>
                                                 </g>
                                                 <path style={{ cursor: 'pointer' }} d="M0 0 L 52 0 52 14 0 14Z" stroke="none" fill="#fff" fillOpacity="0"></path>
                                             </g>
                                             <g transform="matrix(1,0,0,1,701.5,371)">
-                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#f39b02" strokeWidth="0" className="k-var--series-c"></path>
+                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#f39b02" strokeWidth="0" fill="var(--kendo-chart-series-3)"></path>
                                                 <g>
                                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">Haiti</text>
                                                 </g>

package/src/coloreditor/color-editor.spec.tsx

@@ -89,7 +89,7 @@ export const ColorEditor = (
                 </div>
             </div>
             <div className="k-coloreditor-views k-vstack">
-                { view === 'gradient' ? <ColorGradient focus={focusView} size={size} canvasOrientation={canvasOrientation} /> : <ColorPalette palette={palette} /> }
+                { view === 'gradient' ? <ColorGradient focus={focusView} size={size} canvasOrientation={canvasOrientation} /> : <ColorPalette palette={palette} size={size} /> }
             </div>
             {actionButtons && <ActionButtons className="k-coloreditor-footer" alignment="end" >
                 <Button className="k-coloreditor-cancel" size={size}>Cancel</Button>

package/src/colorgradient/tests/colorgradient-sizes.tsx

@@ -0,0 +1,36 @@
+import { ColorGradient, ColorGradientNormal } from '../../colorgradient';
+
+
+const styles = `
+    #test-area {
+        grid-template-columns: 1fr 1fr 2fr;
+    }
+
+    .k-hue-slider {
+        --kendo-slider-start: 0;
+        --kendo-slider-end: 0;
+    }
+    .k-alpha-slider {
+        --kendo-slider-start: 0;
+        --kendo-slider-end: 100;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-gap-2">
+            <span>Small</span>
+            <span>Medium</span>
+            <span>Large</span>
+
+            { ColorGradient.options.size.map((size) => (
+                <>
+                    <section>
+                        <ColorGradientNormal size={size} />
+                    </section>
+                </>
+            ))}
+        </div>
+    </>
+);

package/src/colorpalette/colorpalette.spec.tsx

@@ -1,4 +1,4 @@
-import { classNames, stateClassNames, States } from '../misc';
+import { classNames, stateClassNames, States, Size, optionClassNames } from '../misc';
 import { ColorPaletteRow } from './colorpalette-row';
 import { ColorPaletteTile } from './colorpalette-tile';
 
@@ -8,9 +8,15 @@ const states = [
     States.disabled
 ];
 
-const options = {};
+const options = {
+    size: [ Size.small, Size.medium, Size.large ]
+};
+
+export type KendoColorPaletteOptions = {
+    size?: (typeof options.size)[number] | null;
+};
 
-export type KendoColorPaletteProps = {
+export type KendoColorPaletteProps = KendoColorPaletteOptions & {
     palette?: Array<string> | any;
     columns?: number;
     tileSize?: string;
@@ -19,7 +25,8 @@ export type KendoColorPaletteProps = {
 export type KendoColorPaletteState = { [K in (typeof states)[number]]?: boolean };
 
 const defaultOptions = {
-    columns: 10
+    columns: 10,
+    size: Size.medium
 };
 
 export const ColorPalette = (
@@ -28,6 +35,7 @@ export const ColorPalette = (
         React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
+        size = defaultOptions.size,
         palette,
         columns = defaultOptions.columns,
         tileSize,
@@ -69,6 +77,7 @@ export const ColorPalette = (
                 stateClassNames(COLORPALETTE_CLASSNAME, {
                     disabled,
                 }),
+                optionClassNames(COLORPALETTE_CLASSNAME, { size }),
             )}>
 
             <table className="k-colorpalette-table">