fix: Theme Builder - recover from sass update (DevExpress#32227)

Author: VasilyStrelyaev

packages/devextreme-scss/package.json

@@ -12,7 +12,7 @@
     "gulp-sass": "6.0.1",
     "gulp-shell": "0.8.0",
     "minimist": "1.2.8",
-    "sass-embedded": "1.97.1",
+    "sass-embedded": "1.93.3",
     "stylelint": "15.11.0",
     "stylelint-config-standard-scss": "9.0.0",
     "stylelint-scss": "6.10.0",

packages/devextreme-themebuilder/package.json

@@ -27,7 +27,7 @@
     "autoprefixer": "^10.4.21",
     "clean-css": "^5.3.0",
     "postcss": "^8.2.6",
-    "sass-embedded": "1.97.1"
+    "sass-embedded": "1.93.3"
   },
   "devDependencies": {
     "@types/clean-css": "4.2.11",

packages/devextreme-themebuilder/src/modules/parse-value.ts

@@ -1,7 +1,11 @@
 import * as sass from 'sass-embedded';
 
 export const color = (value: sass.SassColor): string => {
-  const getHex = (colorValue: number): string => colorValue.toString(16).padStart(2, '0');
+  const getHex = (colorValue: number): string => {
+    const n = Math.max(0, Math.min(255, Math.round(colorValue)));
+
+    return n.toString(16).padStart(2, '0');
+  };
 
   const alpha = Math.round(255 * value.alpha);
   if (alpha === 0) {

packages/devextreme-themebuilder/tests/data/compilation-results/no-changes-meta.ts

@@ -1,6 +1,7 @@
 const meta: { [key: string]: string } = {
   '$base-font-family': "-apple-system, BlinkMacSystemFont, \"avenir next\", avenir, \"segoe ui\", \"helvetica neue\", \"adwaita sans\", cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif",
   '$base-accent': '#337ab7',
+  '$float-channel-color': '#2d6da3',
   '$accordion-title-color': '#337ab7',
   '$accordion-item-title-opened-bg': 'transparent',
 };

packages/devextreme-themebuilder/tests/data/scss/widgets/generic/_colors.scss

@@ -1,24 +1,28 @@
 $base-font-family: getCustomVar(("$base-font-family")) !default;
 $base-accent: getCustomVar(("$base-accent")) !default;
+$float-channel-color: getCustomVar(("$float-channel-color")) !default;
 
 @use "sass:color";
 $color: null !default;
 
 $base-font-family: null !default;
 $base-accent: null !default;
+$float-channel-color: null !default;
 
 
 @if $color == "light" {
   $base-font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'segoe ui', 'helvetica neue', 'adwaita sans', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif !default;
 
   $base-accent: #337ab7 !default;
+  $float-channel-color: color.adjust($base-accent, $lightness: -5%, $space: hsl) !default;
 }
 
 
 $never-used: collector(
 (
 "$base-font-family": $base-font-family,
 "$base-accent": $base-accent,
+"$float-channel-color": $float-channel-color,
 12345: "",
 )
 );

packages/devextreme-themebuilder/tests/modules/compile-manager.test.ts

@@ -90,6 +90,7 @@ describe('Compile manager - integration test on test sass', () => {
       expect(result.compiledMetadata).toEqual({
         "$base-font-family": "-apple-system, BlinkMacSystemFont, \"avenir next\", avenir, \"segoe ui\", \"helvetica neue\", \"adwaita sans\", cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif",
         '$base-accent': '#337ab7',
+        '$float-channel-color': '#2d6da3',
       });
     });
   });

packages/devextreme-themebuilder/tests/modules/compiler.test.ts

@@ -86,6 +86,7 @@ describe('compile', () => {
         '$base-font-family': '"Segoe UI", helvetica, verdana, sans-serif',
         '$base-accent': '#ff0000',
         '$accordion-title-color': '#ff0000',
+        '$float-channel-color': '#e60000',
         '$accordion-item-title-opened-bg': '#008000',
       });
     });

packages/devextreme/package.json

@@ -188,7 +188,7 @@
     "react-dom": "16.14.0",
     "react-test-renderer": "16.14.0",
     "recast": "0.23.4",
-    "sass-embedded": "1.97.1",
+    "sass-embedded": "1.93.3",
     "shelljs": "0.8.5",
     "sinon": "18.0.1",
     "staged-git-files": "1.3.0",