From 955e490d6dc35adcd43c7868f7ef0b2bcf7e49db Mon Sep 17 00:00:00 2001
From: Iliyana Dyankova <inikolova@progress.com>
Date: Wed, 8 Jan 2025 15:22:21 +0200
Subject: [PATCH] fix(colorpalette): update sizing related styles

---
 packages/default/scss/coloreditor/_layout.scss | 18 ------------------
 .../default/scss/colorpalette/_layout.scss     | 16 ++++++++++++++--
 packages/fluent/scss/coloreditor/_layout.scss  | 18 ------------------
 packages/fluent/scss/colorpalette/_layout.scss | 18 ++++++++++++++++--
 4 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/packages/default/scss/coloreditor/_layout.scss b/packages/default/scss/coloreditor/_layout.scss
index d8695f4f2be..a8e007a2e75 100644
--- a/packages/default/scss/coloreditor/_layout.scss
+++ b/packages/default/scss/coloreditor/_layout.scss
@@ -108,24 +108,6 @@
         .k-colorpalette {
             align-self: center;
         }
-
-        .k-colorpalette-tile {
-            width: var(--kendo-color-preview-width, $kendo-color-palette-tile-width);
-            height: var(--kendo-color-preview-height, $kendo-color-palette-tile-height);
-        }
-    }
-
-    // ColorPalette sizes
-    @each $size, $size-props in $kendo-color-palette-sizes {
-        $_tile-width: map.get( $size-props, width );
-        $_tile-height: map.get( $size-props, height );
-
-        .k-coloreditor-#{$size} {
-            .k-colorpalette-tile {
-                width: $_tile-width;
-                height: $_tile-height;
-            }
-        }
     }
 
     // Footer
diff --git a/packages/default/scss/colorpalette/_layout.scss b/packages/default/scss/colorpalette/_layout.scss
index ebcc8b65c52..dda861a776e 100644
--- a/packages/default/scss/colorpalette/_layout.scss
+++ b/packages/default/scss/colorpalette/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./variables.scss" as *;
 
@@ -33,8 +34,6 @@
 
     // Tile
     .k-colorpalette-tile {
-        width: $kendo-color-palette-tile-width;
-        height: $kendo-color-palette-tile-height;
         box-sizing: border-box;
         overflow: hidden;
         cursor: pointer;
@@ -54,6 +53,19 @@
         }
     }
 
+    // ColorPalette sizes
+    @each $size, $size-props in $kendo-color-palette-sizes {
+        $_tile-width: map.get( $size-props, width );
+        $_tile-height: map.get( $size-props, height );
+
+        .k-colorpalette-#{$size} {
+            .k-colorpalette-tile {
+                width: $_tile-width;
+                height: $_tile-height;
+            }
+        }
+    }
+
 }
 
 
diff --git a/packages/fluent/scss/coloreditor/_layout.scss b/packages/fluent/scss/coloreditor/_layout.scss
index a4a3a38dd6a..3359e604b39 100644
--- a/packages/fluent/scss/coloreditor/_layout.scss
+++ b/packages/fluent/scss/coloreditor/_layout.scss
@@ -112,24 +112,6 @@
             .k-colorpalette {
                 align-self: center;
             }
-
-            .k-colorpalette-tile {
-                width: var( --kendo-color-preview-width, $kendo-color-palette-tile-width );
-                height: var( --kendo-color-preview-height, $kendo-color-palette-tile-height );
-            }
-        }
-
-        // ColorPalette sizes
-        @each $size, $size-props in $kendo-color-palette-sizes {
-            $_tile-width: map.get( $size-props, width );
-            $_tile-height: map.get( $size-props, height );
-
-            .k-coloreditor-#{$size} {
-                .k-colorpalette-tile {
-                    width: $_tile-width;
-                    height: $_tile-height;
-                }
-            }
         }
 
         // Footer
diff --git a/packages/fluent/scss/colorpalette/_layout.scss b/packages/fluent/scss/colorpalette/_layout.scss
index a3794b0e9f2..6b9f9328625 100644
--- a/packages/fluent/scss/colorpalette/_layout.scss
+++ b/packages/fluent/scss/colorpalette/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
@@ -39,8 +40,8 @@
     .k-colorpalette-tile {
         outline-width: var( --kendo-color-palette-tile-outline-width, #{$kendo-color-palette-tile-outline-width} );
         outline-style: var( --kendo-color-palette-tile-outline-style, #{$kendo-color-palette-tile-outline-style} );
-        width: var( --kendo-color-palette-tile-width, #{$kendo-color-palette-tile-width} );
-        height: var( --kendo-color-palette-tile-height, #{$kendo-color-palette-tile-height} );
+        // width: var( --kendo-color-palette-tile-width, #{$kendo-color-palette-tile-width} );
+        // height: var( --kendo-color-palette-tile-height, #{$kendo-color-palette-tile-height} );
         box-sizing: border-box;
         overflow: hidden;
         cursor: pointer;
@@ -60,4 +61,17 @@
         }
     }
 
+    // ColorPalette sizes
+    @each $size, $size-props in $kendo-color-palette-sizes {
+        $_tile-width: map.get( $size-props, width );
+        $_tile-height: map.get( $size-props, height );
+
+        .k-colorpalette-#{$size} {
+            .k-colorpalette-tile {
+                width: $_tile-width;
+                height: $_tile-height;
+            }
+        }
+    }
+
 }