From 45cc0b85ba668fcdb24cbdab0a1909cba400ca3b Mon Sep 17 00:00:00 2001 From: Ivo Valkov Date: Wed, 20 Mar 2024 11:33:27 +0200 Subject: [PATCH] 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. --- packages/bootstrap/lib/swatches/bootstrap-3-dark.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-3.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-4-dark.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-4.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-dataviz-v4.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-main-dark.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-main.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-nordic.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-turquoise-dark.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-turquoise.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-urban.json | 2 +- packages/bootstrap/lib/swatches/bootstrap-vintage.json | 2 +- packages/bootstrap/scss/core/color-system/_swatch-legacy.scss | 2 +- packages/bootstrap/scss/core/color-system/_swatch.scss | 2 +- packages/bootstrap/scss/switch/_variables.scss | 2 +- 15 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/bootstrap/lib/swatches/bootstrap-3-dark.json b/packages/bootstrap/lib/swatches/bootstrap-3-dark.json index 55c82dd705d..c9e0ac396bc 100644 --- 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 index 9bb17df1862..501e75f60d1 100644 --- 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 index 4d0e4fefd42..9d6fe9d83cc 100644 --- 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 index a9b61a97d7a..efd4dbd34fa 100644 --- 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 index b08ceb64b1f..9c07dd83357 100644 --- 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 index 5de0e277e69..d3614f71d63 100644 --- 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 index 0d70e2f9d64..10f23e59b75 100644 --- 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 index a8f5e2ad832..368fecc5446 100644 --- 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 index 6c2a8feb791..efc775f70d1 100644 --- 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 index b3a991562c9..ad76c524cb1 100644 --- 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 index ba807139dd5..0845031ec54 100644 --- 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 index 4d3146d4e02..3ad2f4e71b0 100644 --- 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 index 83c31918cb3..cd00ca7af00 100644 --- 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 index bc72ce4dd90..72dec969ad3 100644 --- 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 index f8f706048ab..fd30d534b61 100644 --- 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;