feat(default): enable color system

BREAKING CHANGE: This commit enables the new Color System, which introduces a new way of implementing and customizing the colors. If the user has customized some of the old color variables like `$kendo-color-primary`, `$kendo-body-bg`, `$kendo-base-bg`, etc, they would need to migrate their customizations by following the Migration Guide which can be found in the Progress Design System Docs.
telerik · Mar 22, 2024 · 0d08db2 · 0d08db2
1 parent d13068d
commit 0d08db2
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 24 deletions.
diff --git a/packages/default/lib/swatches/default-blue.json b/packages/default/lib/swatches/default-blue.json
@@ -19,7 +19,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/lib/swatches/default-dataviz-v4.json b/packages/default/lib/swatches/default-dataviz-v4.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/lib/swatches/default-green.json b/packages/default/lib/swatches/default-green.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/lib/swatches/default-main-dark.json b/packages/default/lib/swatches/default-main-dark.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/lib/swatches/default-main.json b/packages/default/lib/swatches/default-main.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/lib/swatches/default-nordic.json b/packages/default/lib/swatches/default-nordic.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/lib/swatches/default-ocean-blue-a11y.json b/packages/default/lib/swatches/default-ocean-blue-a11y.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },
@@ -865,16 +865,6 @@
             "name": "Contrast improvements",
             "hidden": true,
             "variables": {
-                "kendo-taskboard-column-focus-border": {
-                    "name": "TaskBoard column focus border",
-                    "type": "color",
-                    "value": "#424242"
-                },
-                "kendo-color-editor-color-gradient-focus-outline-color": {
-                    "name": "ColorEditor gradient focus outline color",
-                    "type": "color",
-                    "value": "#424242"
-                },
                 "kendo-scheduler-event-bg": {
                     "name": "Scheduler event background",
                     "type": "color",
@@ -896,6 +886,36 @@
                     "name": "Input clear value button opacity",
                     "type": "number",
                     "value": "80%"
+                },
+                "kendo-taskboard-column-focus-border": {
+                    "name": "TaskBoard column focus border",
+                    "type": "color",
+                    "value": "#424242"
+                },
+                "kendo-color-editor-color-gradient-focus-outline-color": {
+                    "name": "ColorEditor gradient focus outline color",
+                    "type": "color",
+                    "value": "#424242"
+                },
+                "kendo-panelbar-header-hover-bg": {
+                    "name": "Panelbar header hover background color",
+                    "type": "color",
+                    "value": "#f5f5f5"
+                },
+                "kendo-panelbar-item-hover-bg": {
+                    "name": "Panelbar item hover background color",
+                    "type": "color",
+                    "value": "#f5f5f5"
+                },
+                "kendo-table-hover-bg": {
+                    "name": "Table hover background color",
+                    "type": "color",
+                    "value": "#ededed"
+                },
+                "kendo-table-alt-row-bg": {
+                    "name": "Table alt row background color",
+                    "type": "color",
+                    "value": "rgba( 0, 0, 0, .04 )"
                 }
             }
         }

diff --git a/packages/default/lib/swatches/default-ocean-blue.json b/packages/default/lib/swatches/default-ocean-blue.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/lib/swatches/default-orange.json b/packages/default/lib/swatches/default-orange.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/lib/swatches/default-purple.json b/packages/default/lib/swatches/default-purple.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/lib/swatches/default-turquoise.json b/packages/default/lib/swatches/default-turquoise.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/lib/swatches/default-urban.json b/packages/default/lib/swatches/default-urban.json
@@ -20,7 +20,7 @@
                 "kendo-enable-color-system": {
                     "name": "New color system",
                     "type": "boolean",
-                    "value": false
+                    "value": true
                 }
             }
         },

diff --git a/packages/default/scss/core/color-system/_swatch.scss b/packages/default/scss/core/color-system/_swatch.scss
@@ -3,7 +3,7 @@
 @import "./_palettes.scss";
 
 // Config
-$kendo-enable-color-system: false !default;
+$kendo-enable-color-system: true !default;
 
 // Colors
 $_default-colors: (

diff --git a/packages/default/scss/scheduler/_theme.scss b/packages/default/scss/scheduler/_theme.scss
@@ -110,7 +110,7 @@
         }
 
         &.k-event-inverse {
-            color: if($kendo-enable-color-system, k-color( on-app-surface ), k-contrast-legacy( $kendo-scheduler-event-text ));
+            color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text ));
         }
 
         &.k-event-ongoing {