feat(bootstrap): 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 · 45cc0b8 · 45cc0b8
1 parent 768b746
commit 45cc0b8
Show file tree

Hide file tree

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/packages/bootstrap/scss/core/color-system/_swatch-legacy.scss b/packages/bootstrap/scss/core/color-system/_swatch-legacy.scss
@@ -5,7 +5,7 @@
     $input-placeholder-color: k-color( subtle );
     $input-focus-bg: k-color( surface-alt );
     $input-focus-color: k-color( on-app-surface );
-    $input-focus-border-color: k-color( border-alt );
+    $input-focus-border-color: k-color( primary-emphasis );
     $input-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, k-color( primary ) 25%, transparent);
     $kendo-color-primary: k-color( primary );
     $kendo-color-primary-contrast: k-color( on-primary );

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

diff --git a/packages/bootstrap/scss/switch/_variables.scss b/packages/bootstrap/scss/switch/_variables.scss
@@ -154,7 +154,7 @@ $kendo-switch-on-track-focus-ring: .25rem solid if($kendo-enable-color-system, c
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-bg: if($kendo-enable-color-system, rgba( k-color( primary ), .5 ), k-try-tint( $kendo-switch-on-track-bg, 50% )) !default;
+$kendo-switch-on-track-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 50%, transparent), k-try-tint( $kendo-switch-on-track-bg, 50% )) !default;
 /// The text color of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-text: null !default;