@progress/kendo-theme-classic 10.6.0 → 11.0.0-dev.0

package/lib/swatches/classic-silver.json

@@ -3,8 +3,7 @@
     "name": "Classic Silver",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "10.6.0",
-    "api": "modern",
+    "version": "11.0.0-dev.0",
     "previewColors": [
         "#ffffff",
         "#f3f3f4",
@@ -14,16 +13,6 @@
     ],
     "components": [],
     "groups": [
-        {
-            "name": "New color system",
-            "colorSystem": {
-                "kendo-enable-color-system": {
-                    "name": "New color system",
-                    "type": "boolean",
-                    "value": true
-                }
-            }
-        },
         {
             "name": "New theme colors",
             "colorsMap": {
@@ -563,176 +552,6 @@
                     "value": "#a185b1"
                 }
             }
-        },
-        {
-            "name": "Theme colors",
-            "variables": {
-                "kendo-is-dark-theme": {
-                    "name": "Dark theme",
-                    "type": "boolean",
-                    "value": false
-                },
-                "kendo-color-primary": {
-                    "name": "Primary",
-                    "type": "color",
-                    "value": "#1984c8"
-                },
-                "kendo-color-secondary": {
-                    "name": "Secondary",
-                    "type": "color",
-                    "value": "#f3f3f4"
-                },
-                "kendo-color-info": {
-                    "name": "Info",
-                    "type": "color",
-                    "value": "#007bc3"
-                },
-                "kendo-color-success": {
-                    "name": "Success",
-                    "type": "color",
-                    "value": "#3ea44e"
-                },
-                "kendo-color-warning": {
-                    "name": "Warning",
-                    "type": "color",
-                    "value": "#ff9800"
-                },
-                "kendo-color-error": {
-                    "name": "Error",
-                    "type": "color",
-                    "value": "#d92800"
-                }
-            }
-        },
-        {
-            "name": "Body",
-            "variables": {
-                "kendo-body-text": {
-                    "name": "Body text color",
-                    "type": "color",
-                    "value": "#515967"
-                },
-                "kendo-body-bg": {
-                    "name": "Body background",
-                    "type": "color",
-                    "value": "#ffffff"
-                },
-                "kendo-subtle-text": {
-                    "name": "Subtle text color",
-                    "type": "color",
-                    "value": "#666666"
-                }
-            }
-        },
-        {
-            "name": "Components",
-            "variables": {
-                "kendo-component-text": {
-                    "name": "Component text color",
-                    "type": "color",
-                    "value": "#515967"
-                },
-                "kendo-component-bg": {
-                    "name": "Component background",
-                    "type": "color",
-                    "value": "#ffffff"
-                },
-                "kendo-base-text": {
-                    "name": "Header text color",
-                    "type": "color",
-                    "value": "#515967"
-                },
-                "kendo-base-bg": {
-                    "name": "Header background",
-                    "type": "color",
-                    "value": "#f3f3f4"
-                },
-                "kendo-hover-text": {
-                    "name": "Hover text color",
-                    "type": "color",
-                    "value": "#263248"
-                },
-                "kendo-hover-bg": {
-                    "name": "Hover background",
-                    "type": "color",
-                    "value": "#dbdee5"
-                },
-                "kendo-selected-text": {
-                    "name": "Selected text color",
-                    "type": "color",
-                    "value": "#ffffff"
-                },
-                "kendo-selected-bg": {
-                    "name": "Selected background",
-                    "type": "color",
-                    "value": "#1984c8"
-                }
-            }
-        },
-        {
-            "name": "Button",
-            "variables": {
-                "kendo-button-text": {
-                    "name": "Button text color",
-                    "type": "color",
-                    "value": "#515967"
-                },
-                "kendo-button-bg": {
-                    "name": "Button background",
-                    "type": "color",
-                    "value": "#f3f3f4"
-                }
-            }
-        },
-        {
-            "name": "Link",
-            "variables": {
-                "kendo-link-text": {
-                    "name": "Link text color",
-                    "type": "color",
-                    "value": "#1984c8"
-                },
-                "kendo-link-hover-text": {
-                    "name": "Link hover text color",
-                    "type": "color",
-                    "value": "#156fa8"
-                }
-            }
-        },
-        {
-            "name": "Dataviz",
-            "variables": {
-                "kendo-series-a": {
-                    "name": "Series A",
-                    "type": "color",
-                    "value": "#007bc3"
-                },
-                "kendo-series-b": {
-                    "name": "Series B",
-                    "type": "color",
-                    "value": "#3ea44e"
-                },
-                "kendo-series-c": {
-                    "name": "Series C",
-                    "type": "color",
-                    "value": "#ffae00"
-                },
-                "kendo-series-d": {
-                    "name": "Series D",
-                    "type": "color",
-                    "value": "#ef4c00"
-                },
-                "kendo-series-e": {
-                    "name": "Series E",
-                    "type": "color",
-                    "value": "#a419b7"
-                },
-                "kendo-series-f": {
-                    "name": "Series F",
-                    "type": "color",
-                    "value": "#430b62"
-                }
-            }
         }
     ]
 }

package/lib/swatches/classic-uniform.json

@@ -3,8 +3,7 @@
     "name": "Classic Uniform",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "10.6.0",
-    "api": "modern",
+    "version": "11.0.0-dev.0",
     "previewColors": [
         "#ffffff",
         "#f0f0f0",
@@ -14,16 +13,6 @@
     ],
     "components": [],
     "groups": [
-        {
-            "name": "New color system",
-            "colorSystem": {
-                "kendo-enable-color-system": {
-                    "name": "New color system",
-                    "type": "boolean",
-                    "value": true
-                }
-            }
-        },
         {
             "name": "New theme colors",
             "colorsMap": {
@@ -564,111 +553,6 @@
                 }
             }
         },
-        {
-            "name": "Theme colors",
-            "variables": {
-                "kendo-is-dark-theme": {
-                    "name": "Dark theme",
-                    "type": "boolean",
-                    "value": false
-                },
-                "kendo-color-primary": {
-                    "name": "Primary",
-                    "type": "color",
-                    "value": "#818181"
-                },
-                "kendo-color-secondary": {
-                    "name": "Secondary",
-                    "type": "color",
-                    "value": "#e9e9e9"
-                },
-                "kendo-color-info": {
-                    "name": "Info",
-                    "type": "color",
-                    "value": "#007bc3"
-                },
-                "kendo-color-success": {
-                    "name": "Success",
-                    "type": "color",
-                    "value": "#3ea44e"
-                },
-                "kendo-color-warning": {
-                    "name": "Warning",
-                    "type": "color",
-                    "value": "#ff9800"
-                },
-                "kendo-color-error": {
-                    "name": "Error",
-                    "type": "color",
-                    "value": "#d92800"
-                }
-            }
-        },
-        {
-            "name": "Body",
-            "variables": {
-                "kendo-body-text": {
-                    "name": "Body text color",
-                    "type": "color",
-                    "value": "#272727"
-                },
-                "kendo-body-bg": {
-                    "name": "Body background",
-                    "type": "color",
-                    "value": "#ffffff"
-                },
-                "kendo-subtle-text": {
-                    "name": "Subtle text color",
-                    "type": "color",
-                    "value": "#666666"
-                }
-            }
-        },
-        {
-            "name": "Components",
-            "variables": {
-                "kendo-component-text": {
-                    "name": "Component text color",
-                    "type": "color",
-                    "value": "#272727"
-                },
-                "kendo-component-bg": {
-                    "name": "Component background",
-                    "type": "color",
-                    "value": "#ffffff"
-                },
-                "kendo-base-text": {
-                    "name": "Header text color",
-                    "type": "color",
-                    "value": "#676767"
-                },
-                "kendo-base-bg": {
-                    "name": "Header background",
-                    "type": "color",
-                    "value": "#f0f0f0"
-                },
-                "kendo-hover-text": {
-                    "name": "Hover text color",
-                    "type": "color",
-                    "value": "#676767"
-                },
-                "kendo-hover-bg": {
-                    "name": "Hover background",
-                    "type": "color",
-                    "value": "#f9f9f9"
-                },
-                "kendo-selected-text": {
-                    "name": "Selected text color",
-                    "type": "color",
-                    "value": "#FFFFFF"
-                },
-                "kendo-selected-bg": {
-                    "name": "Selected background",
-                    "type": "color",
-                    "value": "#818181"
-                }
-            }
-        },
         {
             "name": "Button",
             "variables": {
@@ -684,56 +568,6 @@
                 }
             }
         },
-        {
-            "name": "Link",
-            "variables": {
-                "kendo-link-text": {
-                    "name": "Link text color",
-                    "type": "color",
-                    "value": "#818181"
-                },
-                "kendo-link-hover-text": {
-                    "name": "Link hover text color",
-                    "type": "color",
-                    "value": "#cc4a00"
-                }
-            }
-        },
-        {
-            "name": "Dataviz",
-            "variables": {
-                "kendo-series-a": {
-                    "name": "Series A",
-                    "type": "color",
-                    "value": "#007bc3"
-                },
-                "kendo-series-b": {
-                    "name": "Series B",
-                    "type": "color",
-                    "value": "#3ea44e"
-                },
-                "kendo-series-c": {
-                    "name": "Series C",
-                    "type": "color",
-                    "value": "#ffae00"
-                },
-                "kendo-series-d": {
-                    "name": "Series D",
-                    "type": "color",
-                    "value": "#ef4c00"
-                },
-                "kendo-series-e": {
-                    "name": "Series E",
-                    "type": "color",
-                    "value": "#a419b7"
-                },
-                "kendo-series-f": {
-                    "name": "Series F",
-                    "type": "color",
-                    "value": "#430b62"
-                }
-            }
-        },
         {
             "hidden": true,
             "variables": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "10.6.0",
+  "version": "11.0.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "10.6.0",
-    "@progress/kendo-theme-utils": "10.6.0"
+    "@progress/kendo-theme-core": "11.0.0-dev.0",
+    "@progress/kendo-theme-utils": "11.0.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "61de20186b040b6e1ac5affab2bac1ef961b6a52"
+  "gitHead": "b83fa9575266e751edf9317822154d05a4fc566a"
 }

package/scss/action-sheet/_variables.scss

@@ -16,9 +16,9 @@ $kendo-actionsheet-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-actionsheet-line-height: var( --kendo-line-height, normal ) !default;
 
-$kendo-actionsheet-bg: $kendo-component-bg !default;
-$kendo-actionsheet-text: $kendo-component-text !default;
-$kendo-actionsheet-border: $kendo-component-border !default;
+$kendo-actionsheet-bg: k-color(surface-alt) !default;
+$kendo-actionsheet-text: k-color(on-app-surface) !default;
+$kendo-actionsheet-border: k-color(border) !default;
 $kendo-actionsheet-shadow: k-elevation(7) !default;
 
 
@@ -33,19 +33,19 @@ $kendo-actionsheet-titlebar-gap: k-spacing(4) !default;
 
 $kendo-actionsheet-titlebar-bg: null !default;
 $kendo-actionsheet-titlebar-text: null !default;
-$kendo-actionsheet-titlebar-border: $kendo-component-border !default;
+$kendo-actionsheet-titlebar-border: k-color(border) !default;
 $kendo-actionsheet-titlebar-gradient: null !default;
 $kendo-actionsheet-titlebar-shadow: null !default;
 
 $kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, normal ) !default;
-$kendo-actionsheet-subtitle-text: $kendo-subtle-text !default;
+$kendo-actionsheet-subtitle-text: k-color(subtle) !default;
 
 $kendo-actionsheet-footer-border-width: 1px !default;
 
 $kendo-actionsheet-footer-bg: null !default;
 $kendo-actionsheet-footer-text: null !default;
-$kendo-actionsheet-footer-border: $kendo-component-border !default;
+$kendo-actionsheet-footer-border: k-color(border) !default;
 $kendo-actionsheet-footer-gradient: null !default;
 $kendo-actionsheet-footer-shadow: null !default;
 
@@ -60,9 +60,9 @@ $kendo-actionsheet-item-title-font-weight: null !default;
 $kendo-actionsheet-item-title-text-transform: null !default;
 
 $kendo-actionsheet-item-description-font-size: .875em !default;
-$kendo-actionsheet-item-description-text: $kendo-subtle-text !default;
+$kendo-actionsheet-item-description-text: k-color(subtle) !default;
 
-$kendo-actionsheet-item-hover-bg: $kendo-hover-bg !default;
+$kendo-actionsheet-item-hover-bg: k-color(base-hover) !default;
 $kendo-actionsheet-item-hover-text: null !default;
 $kendo-actionsheet-item-hover-border: null !default;
 $kendo-actionsheet-item-hover-gradient: null !default;

package/scss/adaptive/_variables.scss

@@ -2,20 +2,20 @@
 @use "../core/functions/index.import.scss" as *;
 
 // Adaptive
-$kendo-adaptive-bg: $kendo-component-bg !default;
-$kendo-adaptive-text: $kendo-component-text !default;
-$kendo-adaptive-border: $kendo-component-border !default;
+$kendo-adaptive-bg: k-color(surface-alt) !default;
+$kendo-adaptive-text: k-color(on-app-surface) !default;
+$kendo-adaptive-border: k-color(border) !default;
 
-$kendo-adaptive-content-bg: $kendo-app-bg !default;
-$kendo-adaptive-content-text: $kendo-app-text !default;
+$kendo-adaptive-content-bg: k-color(app-surface) !default;
+$kendo-adaptive-content-text: k-color(on-app-surface) !default;
 
-$kendo-adaptive-menu-bg: $kendo-color-primary !default;
-$kendo-adaptive-menu-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-adaptive-menu-bg )) !default;
+$kendo-adaptive-menu-bg: k-color(primary) !default;
+$kendo-adaptive-menu-text: k-color(on-primary) !default;
 
-$kendo-adaptive-menu-clear-text: $kendo-color-primary !default;
+$kendo-adaptive-menu-clear-text: k-color(primary) !default;
 
-$kendo-adaptive-menu-item-border: $kendo-component-border !default;
-$kendo-adaptive-menu-title-text: $kendo-component-text !default;
+$kendo-adaptive-menu-item-border: k-color(border) !default;
+$kendo-adaptive-menu-title-text: k-color(on-app-surface) !default;
 
 $kendo-adaptive-border-width: 1px !default;
 $kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
@@ -24,13 +24,13 @@ $kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 
 // Adaptive Grid
-$kendo-adaptive-grid-sort-text: $kendo-color-primary !default;
+$kendo-adaptive-grid-sort-text: k-color(primary) !default;
 
 
 // Adaptive Scheduler
-$kendo-adaptive-scheduler-current-text: $kendo-color-primary !default;
+$kendo-adaptive-scheduler-current-text: k-color(primary) !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
-$kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
+$kendo-adaptive-scheduler-subtle-text: k-color(subtle) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with (

package/scss/appbar/_variables.scss

@@ -37,17 +37,17 @@ $kendo-appbar-gap: k-spacing(2) !default;
 
 /// The background color of the AppBar based on light theme color.
 /// @group appbar
-$kendo-appbar-light-bg: $kendo-color-light !default;
+$kendo-appbar-light-bg: k-color(light) !default;
 /// The text color of the AppBar based on light theme color.
 /// @group appbar
-$kendo-appbar-light-text: if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) !default;
+$kendo-appbar-light-text: k-color(on-light) !default;
 
 /// The background color of the AppBar based on dark theme color.
 /// @group appbar
-$kendo-appbar-dark-bg: $kendo-color-dark !default;
+$kendo-appbar-dark-bg: k-color(dark) !default;
 /// The text color of the AppBar based on dark theme colorr.
 /// @group appbar
-$kendo-appbar-dark-text: if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) !default;
+$kendo-appbar-dark-text: k-color(on-dark) !default;
 
 /// The box shadow of the AppBar.
 /// @group appbar
@@ -56,6 +56,18 @@ $kendo-appbar-box-shadow: k-elevation(4) !default;
 /// @group appbar
 $kendo-appbar-bottom-box-shadow: k-elevation(4) !default;
 
+$kendo-appbar-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with (
     $kendo-appbar-margin-x: $kendo-appbar-margin-x,
@@ -73,5 +85,6 @@ $kendo-appbar-bottom-box-shadow: k-elevation(4) !default;
     $kendo-appbar-dark-bg: $kendo-appbar-dark-bg,
     $kendo-appbar-dark-text: $kendo-appbar-dark-text,
     $kendo-appbar-box-shadow: $kendo-appbar-box-shadow,
-    $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow
+    $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow,
+    $kendo-appbar-theme-colors: $kendo-appbar-theme-colors
 );

package/scss/avatar/_variables.scss

@@ -25,7 +25,18 @@ $kendo-avatar-sizes: (
 
 /// The theme colors map of the Avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $kendo-theme-colors !default;
+$kendo-avatar-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with (

package/scss/badge/_variables.scss

@@ -102,6 +102,19 @@ $kendo-badge-sizes: (
     )
 ) !default;
 
+$kendo-badge-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
+
 
 @forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with (
     $kendo-badge-border-width: $kendo-badge-border-width,
@@ -126,5 +139,6 @@ $kendo-badge-sizes: (
     $kendo-badge-sm-min-width: $kendo-badge-sm-min-width,
     $kendo-badge-md-min-width: $kendo-badge-md-min-width,
     $kendo-badge-lg-min-width: $kendo-badge-lg-min-width,
-    $kendo-badge-sizes: $kendo-badge-sizes
+    $kendo-badge-sizes: $kendo-badge-sizes,
+    $kendo-badge-theme-colors: $kendo-badge-theme-colors
 );

package/scss/bottom-navigation/_variables.scss

@@ -56,14 +56,26 @@ $kendo-bottom-nav-shadow: k-elevation(4) !default;
 
 /// The text color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-text: $kendo-component-text !default;
+$kendo-bottom-nav-flat-text: k-color(on-app-surface) !default;
 /// The background color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
+$kendo-bottom-nav-flat-bg: k-color(surface-alt) !default;
 /// The border color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-border: $kendo-component-border !default;
+$kendo-bottom-nav-flat-border: k-color(border) !default;
 
+$kendo-bottom-navigation-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with (
     $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x,
@@ -84,5 +96,6 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
     $kendo-bottom-nav-shadow: $kendo-bottom-nav-shadow,
     $kendo-bottom-nav-flat-text: $kendo-bottom-nav-flat-text,
     $kendo-bottom-nav-flat-bg: $kendo-bottom-nav-flat-bg,
-    $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border
+    $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border,
+    $kendo-bottom-navigation-theme-colors: $kendo-bottom-navigation-theme-colors
 );