From 0fe136fc2e1a43150ccb39471552d6a5834fe87a Mon Sep 17 00:00:00 2001
From: Iliyana Dyankova <inikolova@progress.com>
Date: Fri, 10 Jan 2025 08:41:27 +0200
Subject: [PATCH] chore: addressing comments

---
 .../scss/colorpalette/_variables.scss         | 36 +++++++++----------
 .../classic/scss/colorpalette/_variables.scss | 36 +++++++++----------
 .../default/scss/colorpalette/_layout.scss    |  2 ++
 .../default/scss/colorpalette/_variables.scss | 24 ++++++-------
 packages/fluent/scss/coloreditor/_layout.scss |  5 +++
 .../fluent/scss/colorpalette/_variables.scss  | 24 ++++++-------
 .../scss/colorpalette/_variables.scss         | 36 +++++++++----------
 7 files changed, 85 insertions(+), 78 deletions(-)

diff --git a/packages/bootstrap/scss/colorpalette/_variables.scss b/packages/bootstrap/scss/colorpalette/_variables.scss
index 60f928b7e1..12617435fd 100644
--- a/packages/bootstrap/scss/colorpalette/_variables.scss
+++ b/packages/bootstrap/scss/colorpalette/_variables.scss
@@ -20,22 +20,22 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 // The width of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+$kendo-color-palette-sm-tile-width: k-spacing(5.5) !default;
 /// The height of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+$kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-width !default;
 /// The width of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+$kendo-color-palette-md-tile-width: $kendo-color-palette-tile-width !default;
 /// The height of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+$kendo-color-palette-md-tile-height: $kendo-color-palette-tile-height !default;
 /// The width of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+$kendo-color-palette-lg-tile-width: k-spacing(8) !default;
 /// The height of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
+$kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
 $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
@@ -50,16 +50,16 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
 /// @group color-palette
 $kendo-color-palette-sizes: (
     sm: (
-        width: $kendo-color-palette-tile-sm-width,
-        height: $kendo-color-palette-tile-sm-height
+        width: $kendo-color-palette-sm-tile-width,
+        height: $kendo-color-palette-sm-tile-height
     ),
     md: (
-        width: $kendo-color-palette-tile-md-width,
-        height: $kendo-color-palette-tile-md-height
+        width: $kendo-color-palette-md-tile-width,
+        height: $kendo-color-palette-md-tile-height
     ),
     lg: (
-        width: $kendo-color-palette-tile-lg-width,
-        height: $kendo-color-palette-tile-lg-height
+        width: $kendo-color-palette-lg-tile-width,
+        height: $kendo-color-palette-lg-tile-height
     )
 ) !default;
 
@@ -69,12 +69,12 @@ $kendo-color-palette-sizes: (
     $kendo-color-palette-line-height: $kendo-color-palette-line-height,
     $kendo-color-palette-tile-width: $kendo-color-palette-tile-width,
     $kendo-color-palette-tile-height: $kendo-color-palette-tile-height,
-    $kendo-color-palette-tile-sm-width: $kendo-color-palette-tile-sm-width,
-    $kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-height,
-    $kendo-color-palette-tile-md-width: $kendo-color-palette-tile-md-width,
-    $kendo-color-palette-tile-md-height: $kendo-color-palette-tile-md-height,
-    $kendo-color-palette-tile-lg-width: $kendo-color-palette-tile-lg-width,
-    $kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-height,
+    $kendo-color-palette-sm-tile-width: $kendo-color-palette-sm-tile-width,
+    $kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-height,
+    $kendo-color-palette-md-tile-width: $kendo-color-palette-md-tile-width,
+    $kendo-color-palette-md-tile-height: $kendo-color-palette-md-tile-height,
+    $kendo-color-palette-lg-tile-width: $kendo-color-palette-lg-tile-width,
+    $kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-height,
     $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
     $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
     $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow
diff --git a/packages/classic/scss/colorpalette/_variables.scss b/packages/classic/scss/colorpalette/_variables.scss
index 8ab1682237..80339f21d5 100644
--- a/packages/classic/scss/colorpalette/_variables.scss
+++ b/packages/classic/scss/colorpalette/_variables.scss
@@ -20,22 +20,22 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 /// The width of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+$kendo-color-palette-sm-tile-width: k-spacing(5.5) !default;
 /// The height of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+$kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-width !default;
 /// The width of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+$kendo-color-palette-md-tile-width: $kendo-color-palette-tile-width !default;
 /// The height of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+$kendo-color-palette-md-tile-height: $kendo-color-palette-tile-height !default;
 /// The width of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+$kendo-color-palette-lg-tile-width: k-spacing(8) !default;
 /// The height of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
+$kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
 $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
@@ -50,16 +50,16 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
 /// @group color-palette
 $kendo-color-palette-sizes: (
     sm: (
-        width: $kendo-color-palette-tile-sm-width,
-        height: $kendo-color-palette-tile-sm-height
+        width: $kendo-color-palette-sm-tile-width,
+        height: $kendo-color-palette-sm-tile-height
     ),
     md: (
-        width: $kendo-color-palette-tile-md-width,
-        height: $kendo-color-palette-tile-md-height
+        width: $kendo-color-palette-md-tile-width,
+        height: $kendo-color-palette-md-tile-height
     ),
     lg: (
-        width: $kendo-color-palette-tile-lg-width,
-        height: $kendo-color-palette-tile-lg-height
+        width: $kendo-color-palette-lg-tile-width,
+        height: $kendo-color-palette-lg-tile-height
     )
 ) !default;
 
@@ -69,12 +69,12 @@ $kendo-color-palette-sizes: (
     $kendo-color-palette-line-height: $kendo-color-palette-line-height,
     $kendo-color-palette-tile-width: $kendo-color-palette-tile-width,
     $kendo-color-palette-tile-height: $kendo-color-palette-tile-height,
-    $kendo-color-palette-tile-sm-width: $kendo-color-palette-tile-sm-width,
-    $kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-height,
-    $kendo-color-palette-tile-md-width: $kendo-color-palette-tile-md-width,
-    $kendo-color-palette-tile-md-height: $kendo-color-palette-tile-md-height,
-    $kendo-color-palette-tile-lg-width: $kendo-color-palette-tile-lg-width,
-    $kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-height,
+    $kendo-color-palette-sm-tile-width: $kendo-color-palette-sm-tile-width,
+    $kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-height,
+    $kendo-color-palette-md-tile-width: $kendo-color-palette-md-tile-width,
+    $kendo-color-palette-md-tile-height: $kendo-color-palette-md-tile-height,
+    $kendo-color-palette-lg-tile-width: $kendo-color-palette-lg-tile-width,
+    $kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-height,
     $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
     $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
     $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow
diff --git a/packages/default/scss/colorpalette/_layout.scss b/packages/default/scss/colorpalette/_layout.scss
index dda861a776..aab883be9b 100644
--- a/packages/default/scss/colorpalette/_layout.scss
+++ b/packages/default/scss/colorpalette/_layout.scss
@@ -34,6 +34,8 @@
 
     // Tile
     .k-colorpalette-tile {
+        width: $kendo-color-palette-tile-width;
+        height: $kendo-color-palette-tile-height;
         box-sizing: border-box;
         overflow: hidden;
         cursor: pointer;
diff --git a/packages/default/scss/colorpalette/_variables.scss b/packages/default/scss/colorpalette/_variables.scss
index 2cce2dd477..a0b45dc2c4 100644
--- a/packages/default/scss/colorpalette/_variables.scss
+++ b/packages/default/scss/colorpalette/_variables.scss
@@ -20,22 +20,22 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 /// The width of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+$kendo-color-palette-sm-tile-width: k-spacing(5.5) !default;
 /// The height of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+$kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-width !default;
 /// The width of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+$kendo-color-palette-md-tile-width: $kendo-color-palette-tile-width !default;
 /// The height of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+$kendo-color-palette-md-tile-height: $kendo-color-palette-tile-height !default;
 /// The width of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+$kendo-color-palette-lg-tile-width: k-spacing(8) !default;
 /// The height of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
+$kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default;
 
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
@@ -51,15 +51,15 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
 /// @group color-palette
 $kendo-color-palette-sizes: (
     sm: (
-        width: $kendo-color-palette-tile-sm-width,
-        height: $kendo-color-palette-tile-sm-height
+        width: $kendo-color-palette-sm-tile-width,
+        height: $kendo-color-palette-sm-tile-height
     ),
     md: (
-        width: $kendo-color-palette-tile-md-width,
-        height: $kendo-color-palette-tile-md-height
+        width: $kendo-color-palette-md-tile-width,
+        height: $kendo-color-palette-md-tile-height
     ),
     lg: (
-        width: $kendo-color-palette-tile-lg-width,
-        height: $kendo-color-palette-tile-lg-height
+        width: $kendo-color-palette-lg-tile-width,
+        height: $kendo-color-palette-lg-tile-height
     )
 ) !default;
diff --git a/packages/fluent/scss/coloreditor/_layout.scss b/packages/fluent/scss/coloreditor/_layout.scss
index 3359e604b3..c4b24b7c86 100644
--- a/packages/fluent/scss/coloreditor/_layout.scss
+++ b/packages/fluent/scss/coloreditor/_layout.scss
@@ -112,6 +112,11 @@
             .k-colorpalette {
                 align-self: center;
             }
+
+            .k-colorpalette-tile {
+                width: var( --kendo-color-palette-tile-width, $kendo-color-palette-tile-width );
+                height: var( --kendo-color-palette-tile-height, $kendo-color-palette-tile-height );
+            }
         }
 
         // Footer
diff --git a/packages/fluent/scss/colorpalette/_variables.scss b/packages/fluent/scss/colorpalette/_variables.scss
index c214898f2c..b85d9bf978 100644
--- a/packages/fluent/scss/colorpalette/_variables.scss
+++ b/packages/fluent/scss/colorpalette/_variables.scss
@@ -28,22 +28,22 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 /// The width of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+$kendo-color-palette-sm-tile-width: k-spacing(5.5) !default;
 /// The height of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+$kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-width !default;
 /// The width of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+$kendo-color-palette-md-tile-width: $kendo-color-palette-tile-width !default;
 /// The height of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+$kendo-color-palette-md-tile-height: $kendo-color-palette-tile-height !default;
 /// The width of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+$kendo-color-palette-lg-tile-width: k-spacing(8) !default;
 /// The height of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
+$kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default;
 
 /// The outline color of the ColorPalette focused tile.
 /// @group color-palette
@@ -71,15 +71,15 @@ $kendo-color-palette-tile-selected-hover-outline: $kendo-color-palette-tile-focu
 /// @group color-palette
 $kendo-color-palette-sizes: (
     sm: (
-        width: $kendo-color-palette-tile-sm-width,
-        height: $kendo-color-palette-tile-sm-height
+        width: $kendo-color-palette-sm-tile-width,
+        height: $kendo-color-palette-sm-tile-height
     ),
     md: (
-        width: $kendo-color-palette-tile-md-width,
-        height: $kendo-color-palette-tile-md-height
+        width: $kendo-color-palette-md-tile-width,
+        height: $kendo-color-palette-md-tile-height
     ),
     lg: (
-        width: $kendo-color-palette-tile-lg-width,
-        height: $kendo-color-palette-tile-lg-height
+        width: $kendo-color-palette-lg-tile-width,
+        height: $kendo-color-palette-lg-tile-height
     )
 ) !default;
diff --git a/packages/material/scss/colorpalette/_variables.scss b/packages/material/scss/colorpalette/_variables.scss
index 60f928b7e1..12617435fd 100644
--- a/packages/material/scss/colorpalette/_variables.scss
+++ b/packages/material/scss/colorpalette/_variables.scss
@@ -20,22 +20,22 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 // The width of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+$kendo-color-palette-sm-tile-width: k-spacing(5.5) !default;
 /// The height of the small ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+$kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-width !default;
 /// The width of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+$kendo-color-palette-md-tile-width: $kendo-color-palette-tile-width !default;
 /// The height of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+$kendo-color-palette-md-tile-height: $kendo-color-palette-tile-height !default;
 /// The width of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+$kendo-color-palette-lg-tile-width: k-spacing(8) !default;
 /// The height of the large ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
+$kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
 $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
@@ -50,16 +50,16 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
 /// @group color-palette
 $kendo-color-palette-sizes: (
     sm: (
-        width: $kendo-color-palette-tile-sm-width,
-        height: $kendo-color-palette-tile-sm-height
+        width: $kendo-color-palette-sm-tile-width,
+        height: $kendo-color-palette-sm-tile-height
     ),
     md: (
-        width: $kendo-color-palette-tile-md-width,
-        height: $kendo-color-palette-tile-md-height
+        width: $kendo-color-palette-md-tile-width,
+        height: $kendo-color-palette-md-tile-height
     ),
     lg: (
-        width: $kendo-color-palette-tile-lg-width,
-        height: $kendo-color-palette-tile-lg-height
+        width: $kendo-color-palette-lg-tile-width,
+        height: $kendo-color-palette-lg-tile-height
     )
 ) !default;
 
@@ -69,12 +69,12 @@ $kendo-color-palette-sizes: (
     $kendo-color-palette-line-height: $kendo-color-palette-line-height,
     $kendo-color-palette-tile-width: $kendo-color-palette-tile-width,
     $kendo-color-palette-tile-height: $kendo-color-palette-tile-height,
-    $kendo-color-palette-tile-sm-width: $kendo-color-palette-tile-sm-width,
-    $kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-height,
-    $kendo-color-palette-tile-md-width: $kendo-color-palette-tile-md-width,
-    $kendo-color-palette-tile-md-height: $kendo-color-palette-tile-md-height,
-    $kendo-color-palette-tile-lg-width: $kendo-color-palette-tile-lg-width,
-    $kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-height,
+    $kendo-color-palette-sm-tile-width: $kendo-color-palette-sm-tile-width,
+    $kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-height,
+    $kendo-color-palette-md-tile-width: $kendo-color-palette-md-tile-width,
+    $kendo-color-palette-md-tile-height: $kendo-color-palette-md-tile-height,
+    $kendo-color-palette-lg-tile-width: $kendo-color-palette-lg-tile-width,
+    $kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-height,
     $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
     $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
     $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow