From a114c50713cb898bae2255dae9c553a2aff5f218 Mon Sep 17 00:00:00 2001
From: Siarhei_Dzeraviannik <siarhei_dzeraviannik@epam.com>
Date: Wed, 4 Dec 2024 19:13:11 +0300
Subject: [PATCH] removed mixins for sass size calculations from uui package

---
 app/src/data/propsOverride_4px.ts             | 30 +++++++-
 epam-assets/theme/variables/6px_grid.scss     |  7 ++
 uui/assets/styles/buttonLayout.scss           | 70 -------------------
 uui/assets/styles/controlLayout.scss          | 28 --------
 uui/assets/styles/icons.scss                  | 55 ---------------
 uui/assets/styles/index.scss                  |  4 --
 uui/assets/styles/text-size.scss              | 42 -----------
 .../fileUpload/FileCard.module.scss           | 11 ++-
 .../FilterPanelItemToggler.module.scss        | 46 ++++--------
 .../filters/FilterPanelItemToggler.tsx        |  2 +-
 uui/components/layout/Accordion.module.scss   | 16 ++++-
 .../MainMenu/Burger/BurgerButton.module.scss  |  9 ++-
 .../MainMenu/MainMenuButton.module.scss       | 16 ++++-
 .../overlays/NotificationCard.module.scss     | 11 ++-
 14 files changed, 104 insertions(+), 243 deletions(-)
 delete mode 100644 uui/assets/styles/buttonLayout.scss
 delete mode 100644 uui/assets/styles/controlLayout.scss
 delete mode 100644 uui/assets/styles/icons.scss
 delete mode 100644 uui/assets/styles/text-size.scss

diff --git a/app/src/data/propsOverride_4px.ts b/app/src/data/propsOverride_4px.ts
index 28d58662c9..4ffd958035 100644
--- a/app/src/data/propsOverride_4px.ts
+++ b/app/src/data/propsOverride_4px.ts
@@ -27,6 +27,14 @@ const propsOverride: TPropEditorTypeOverride = {
             },
         },
     },
+    '@epam/uui:IconButtonProps': {
+        size: {
+            editor: {
+                type: TPropEditorType.oneOf,
+                options: ['20', '24'],
+            },
+        },
+    },
     '@epam/uui:BadgeProps': {
         size: {
             editor: {
@@ -170,7 +178,27 @@ const propsOverride: TPropEditorTypeOverride = {
             },
         },
     },
-
+    '@epam/uui:RangeDatePickerProps': {
+        size: {
+            editor: {
+                type: TPropEditorType.oneOf,
+                options: ['40', '48'],
+            },
+        },
+    },
+    '@epam/uui:RatingProps': {
+        size: {
+            editor: {
+                type: TPropEditorType.oneOf,
+                options: ['20', '24'],
+            },
+            comment: {
+                tags: {
+                    '@default': '20',
+                },
+            },
+        },
+    },
 };
 
 export default propsOverride;
diff --git a/epam-assets/theme/variables/6px_grid.scss b/epam-assets/theme/variables/6px_grid.scss
index ba6a694d0a..f450d25bbc 100644
--- a/epam-assets/theme/variables/6px_grid.scss
+++ b/epam-assets/theme/variables/6px_grid.scss
@@ -324,4 +324,11 @@
             --uui-alert-caption-gap-h: 9px;
         }
     }
+
+    .uui-filters-panel-item-toggler {
+        &.uui-size-24 {
+            --uui-horizontal-padding: 3px;
+            --uui-horizontal-gap: 3px;
+        }
+    }
 }
diff --git a/uui/assets/styles/buttonLayout.scss b/uui/assets/styles/buttonLayout.scss
deleted file mode 100644
index cbf3a7e400..0000000000
--- a/uui/assets/styles/buttonLayout.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@use './text-size' as *;
-@use './icons' as *;
-
-@mixin button-layout($size, $borderWidth) {
-    @include button-horizontal-layout($size, $borderWidth);
-    @include button-vertical-layout($size, $borderWidth);
-    @include scalable-icon-size($size);
-}
-
-@mixin link-button-layout($size) {
-    @include link-button-horizontal-layout($size);
-    @include button-vertical-layout($size, 0);
-    @include scalable-icon-size($size);
-}
-
-@mixin button-vertical-layout($size, $borderWidth) {
-    &:global(.uui-button-box) {
-        min-height: $size;
-        border-width: $borderWidth;
-    }
-
-    :global(.uui-caption) {
-        @include text-size($size, $borderWidth);
-
-        @if ($size == 42px or $size == 48px) {
-            font-size: 16px;
-        }
-    }
-}
-
-@mixin button-horizontal-layout($size, $borderWidth) {
-    min-width: $size;
-
-    @if ($size == 18px) {
-        @include button-padding(3px, 3px, $borderWidth);
-    } @else if ($size == 24px) {
-        @include button-padding(6px, 6px, $borderWidth);
-    } @else if ($size == 30px) {
-        @include button-padding(6px, 6px, $borderWidth);
-    } @else if ($size == 36px) {
-        @include button-padding(6px, 6px, $borderWidth);
-    } @else if ($size == 42px) {
-        @include button-padding(12px, 6px, $borderWidth);
-    } @else if ($size == 48px) {
-        @include button-padding(12px, 6px, $borderWidth);
-    } @else {
-        @include button-padding(6px, 6px, $borderWidth); }
-}
-
-@mixin button-padding($controlPadding, $captionPadding, $borderWidth) {
-    padding-left: $controlPadding - $borderWidth;
-    padding-right: $controlPadding - $borderWidth;
-
-    :global(.uui-caption) {
-        padding-left: $captionPadding;
-        padding-right: $captionPadding;
-    }
-}
-
-@mixin link-button-horizontal-layout($size) {
-    min-width: $size;
-
-    &:global(.uui-has-left-icon) :global(.uui-caption) {
-        padding-left: 6px;
-    }
-
-    &:global(.uui-has-right-icon) :global(.uui-caption) {
-        padding-right: 6px;
-    }
-}
diff --git a/uui/assets/styles/controlLayout.scss b/uui/assets/styles/controlLayout.scss
deleted file mode 100644
index 9a264fb0c8..0000000000
--- a/uui/assets/styles/controlLayout.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@use 'text-size' as *;
-
-@mixin control-vertical-layout($size, $borderWidth) {
-    :global(.uui-caption), :global(.uui-input) {
-        @include text-size($size, $borderWidth);
-    }
-
-    &:global(.uui-button-box), &:global(.uui-input-box) {
-        min-height: $size;
-        border-width: $borderWidth;
-    }
-}
-
-@mixin control-box-layout($size, $borderWidth) {
-    min-width: $size;
-    padding-left: 5px;
-    padding-right: 5px;
-
-    :global(.uui-caption), :global(.uui-input) {
-        padding-left: 6px;
-        padding-right: 6px;
-    }
-
-    &:global(.uui-button-box), &:global(.uui-input-box) {
-        min-height: $size;
-        border-width: $borderWidth;
-    }
-}
diff --git a/uui/assets/styles/icons.scss b/uui/assets/styles/icons.scss
deleted file mode 100644
index 754bf3ec29..0000000000
--- a/uui/assets/styles/icons.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@use 'sass:math';
-@use 'sass:meta';
-
-@mixin icon-layout($size) {
-    :global(.uui-icon) {
-        svg {
-            height: math.div($size, 36) * 24;
-            max-width: math.div($size, 36) * 24;
-        }
-    }
-}
-
-@mixin icon-size($size) {
-    $striped-size: strip-unit($size);
-
-    :global(.uui-icon) {
-        svg {
-            height: #{$striped-size}px;
-            width: #{$striped-size}px;
-        }
-    }
-}
-
-@function strip-unit($number) {
-    @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
-        @return math.div($number, $number * 0 + 1);
-    }
-
-    @return $number;
-}
-
-@mixin scalable-icon-size($size, $additionalClass: '') {
-    $striped-size: strip-unit($size);
-
-    #{$additionalClass}:global(.uui-icon) {
-        svg {
-            @if ($striped-size == 18) {
-                height: 12px;
-            } @else if ($striped-size == 24) {
-                height: 12px;
-            } @else if ($striped-size == 30) {
-                height: 18px;
-            } @else if ($striped-size == 36) {
-                height: 18px;
-            } @else if ($striped-size == 42) {
-                height: 18px;
-            } @else if ($striped-size == 48) {
-                height: 24px;
-            } @else if ($striped-size == 60) {
-                height: 24px;
-            }
-            width: inherit;
-        }
-    }
-}
\ No newline at end of file
diff --git a/uui/assets/styles/index.scss b/uui/assets/styles/index.scss
index 1b83acbef0..c5ef368e73 100644
--- a/uui/assets/styles/index.scss
+++ b/uui/assets/styles/index.scss
@@ -1,9 +1,5 @@
-@forward 'buttonLayout';
 @forward 'clickable';
-@forward 'controlLayout';
 @forward 'effects';
-@forward 'icons';
 @forward 'inputs';
-@forward 'text-size';
 @forward 'typography';
 @forward 'dnd';
diff --git a/uui/assets/styles/text-size.scss b/uui/assets/styles/text-size.scss
deleted file mode 100644
index fd211dc895..0000000000
--- a/uui/assets/styles/text-size.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@function vpadding($size, $border-width) {
-    @if ($size == 18px or $size == 24px) {
-        @return (3px - $border-width);
-    } @else if ($size == 30px) {
-        @return (6px - $border-width);
-    } @else if ($size == 36px or $size == 42px) {
-        @return (9px - $border-width);
-    } @else if ($size == 48px) {
-        @return (12px - $border-width);
-    } @else if ($size == 60px) {
-        @return (15px - $border-width);
-    }
-
-    @return (null);
-}
-
-@mixin text-size($size, $border-width: 0) {
-    @if ($size == 18px) {
-        line-height: 12px;
-        font-size: 10px;
-    } @else if ($size == 24px) {
-        line-height: 18px;
-        font-size: 12px;
-    } @else if ($size == 30px) {
-        line-height: 18px;
-        font-size: 14px;
-    } @else if ($size == 36px) {
-        line-height: 18px;
-        font-size: 14px;
-    } @else if ($size == 42px) {
-        line-height: 24px;
-        font-size: 16px;
-    } @else if ($size == 48px) {
-        line-height: 24px;
-        font-size: 16px;
-    } @else if ($size == 60px) {
-        line-height: 24px;
-        font-size: 20px;
-    }
-    padding-top: vpadding($size, $border-width);
-    padding-bottom: vpadding($size, $border-width);
-}
diff --git a/uui/components/fileUpload/FileCard.module.scss b/uui/components/fileUpload/FileCard.module.scss
index a22e2a6065..077b7aa5fc 100644
--- a/uui/components/fileUpload/FileCard.module.scss
+++ b/uui/components/fileUpload/FileCard.module.scss
@@ -12,9 +12,11 @@
     --uui-file_card-icon-mov: #5214CC;
     --uui-file_card-icon-img: #E67E17;
 
+    --uui-file_card-font-error: var(--uui-font);
+
     --uui-file_card-border-radius: var(--uui-border-radius);
+    --uui-file_card-icon-size: 18px;
 
-    --uui-file_card-font-error: var(--uui-font);
 
     &:global(.uui-file_card) {
         box-sizing: border-box;
@@ -87,6 +89,11 @@
         min-width: 18px;
         flex-basis: 0;
 
-        @include icon-size(18);
+        :global(.uui-icon) {
+            svg {
+                height: var(--uui-file_card-icon-size);
+                width: inherit;
+            }
+        }
     }
 }
diff --git a/uui/components/filters/FilterPanelItemToggler.module.scss b/uui/components/filters/FilterPanelItemToggler.module.scss
index e80982b238..fcef43bf49 100644
--- a/uui/components/filters/FilterPanelItemToggler.module.scss
+++ b/uui/components/filters/FilterPanelItemToggler.module.scss
@@ -15,18 +15,25 @@
     --uui-filters_toggler-font: var(--uui-font);
     --uui-filters_toggler-font-weight: 400;
 
+    --uui-filters_toggler-min-height: var(--uui-size);
+    --uui-filters_toggler-border-width: var(--uui-border-width);
+    --uui-filters_toggler-horizontal-padding: calc(var(--uui-horizontal-padding) - var(--uui-filters_toggler-border-width));
+    --uui-filters_toggler-caption-horizontal-padding: var(--uui-horizontal-gap);
+    --uui-filters_toggler-icon-size: var(--uui-icon-size);
+
     &:global(.uui-input-box) {
         box-sizing: border-box;
         min-width: 40px;
+        min-height: var(--uui-filters_toggler-min-height);
         position: relative;
         display: flex;
         outline: none;
-        border: 1px solid var(--uui-filters_toggler-border);
+        border: var(--uui-filters_toggler-border-width) solid var(--uui-filters_toggler-border);
         border-radius: var(--uui-filters_toggler-border-radius);
         background-color: var(--uui-filters_toggler-bg);
         box-shadow: var(--uui-filters_toggler-shadow);
-        padding-left: 6px;
-        padding-right: 6px;
+        padding-left: var(--uui-filters_toggler-horizontal-padding);
+        padding-right: var(--uui-filters_toggler-horizontal-padding);
 
         &:global(.-clickable):hover {
             cursor: pointer;
@@ -107,36 +114,11 @@
             }
         }
 
-        @mixin filterTogglerSize($size) {
-            &:global(.size-#{$size}) {
-                @if $size == 24 {
-                    padding-left: 2px;
-                    padding-right: 2px;
-
-                    .title-wrapper {
-                        padding-left: 3px;
-                        padding-right: 3px;
-                    }
-                } @else if $size == 42 {
-                    padding-left: 11px;
-                    padding-right: 11px;
-                } @else if $size == 48 {
-                    padding-left: 11px;
-                    padding-right: 11px;
-                } @else {
-                    padding-left: 5px;
-                    padding-right: 5px;
-                }
-
-                @include control-vertical-layout(#{$size}px, 1px);
-                @include scalable-icon-size($size);
+        :global(.uui-icon) {
+            svg {
+                height: var(--uui-filters_toggler-icon-size);
+                width: inherit;
             }
         }
-
-        @include filterTogglerSize(24);
-        @include filterTogglerSize(30);
-        @include filterTogglerSize(36);
-        @include filterTogglerSize(42);
-        @include filterTogglerSize(48);
     }
 }
diff --git a/uui/components/filters/FilterPanelItemToggler.tsx b/uui/components/filters/FilterPanelItemToggler.tsx
index be44e5aa84..474e02b5b1 100644
--- a/uui/components/filters/FilterPanelItemToggler.tsx
+++ b/uui/components/filters/FilterPanelItemToggler.tsx
@@ -63,7 +63,7 @@ export const FilterPanelItemToggler = React.forwardRef<HTMLDivElement, FilterToo
                 uuiElement.inputBox,
                 uuiMarkers.clickable,
                 props.isOpen && uuiMod.opened,
-                `size-${props.size || defaultSize}`,
+                `uui-size-${props.size || defaultSize}`,
                 props.cx,
             ) }
             onClick={ togglerPickerOpened }
diff --git a/uui/components/layout/Accordion.module.scss b/uui/components/layout/Accordion.module.scss
index 719eeb8cbd..b6dd1d61e1 100644
--- a/uui/components/layout/Accordion.module.scss
+++ b/uui/components/layout/Accordion.module.scss
@@ -26,6 +26,8 @@
 
     --uui-accordion-border-width: 0;
     --uui-accordion-divider-width: 1px;
+    --uui-accordion-icon-size: 24px;
+    --uui-accordion-inline-icon-size: 1px;
     //
     :global(.uui-accordion-toggler) {
         font-family: var(--uui-accordion-toggler-font);
@@ -66,7 +68,12 @@
             padding: 0 18px;
             border-radius: var(--uui-accordion-border-radius);
 
-            @include icon-size(24);
+            :global(.uui-icon) {
+                svg {
+                    height: var(--uui-accordion-icon-size);
+                    width: inherit;
+                }
+            }
 
             :global(.uui-accordion-toggle-container) {
                 padding-top: 18px;
@@ -119,7 +126,12 @@
             font-size: 14px;
             padding: 8px 12px 8px;
 
-            @include icon-size(18);
+            :global(.uui-icon) {
+                svg {
+                    height: var(--uui-accordion-inline-icon-size);
+                    width: inherit;
+                }
+            }
 
             :global(.uui-accordion-toggle-container) {
                 min-height: 24px;
diff --git a/uui/components/navigation/MainMenu/Burger/BurgerButton.module.scss b/uui/components/navigation/MainMenu/Burger/BurgerButton.module.scss
index 4b70adf922..ae6a6d2635 100644
--- a/uui/components/navigation/MainMenu/Burger/BurgerButton.module.scss
+++ b/uui/components/navigation/MainMenu/Burger/BurgerButton.module.scss
@@ -8,6 +8,8 @@
 
     --uui-burger_btn-font: var(--uui-font);
     --uui-burger_btn-font-weight: 400;
+
+    --uui-burger_btn-icon-size: 18px;
     //
     padding: 0 24px;
     background: none;
@@ -60,10 +62,13 @@
     }
 
     &.hasIcon {
-        @include icon-layout(24px);
-
         :global(.uui-icon) {
             padding: 0 12px 0 20px;
+
+            svg {
+                height: var(--uui-burger_btn-icon-size);
+                width: inherit;
+            }
         }
     }
 }
diff --git a/uui/components/navigation/MainMenu/MainMenuButton.module.scss b/uui/components/navigation/MainMenu/MainMenuButton.module.scss
index cdf027dc71..ab0991cd0d 100644
--- a/uui/components/navigation/MainMenu/MainMenuButton.module.scss
+++ b/uui/components/navigation/MainMenu/MainMenuButton.module.scss
@@ -3,6 +3,8 @@
 .root {
     --uui-main_menu-button-font: var(--uui-font);
     --uui-main_menu-button-font-weight: 600;
+
+    --uui-main_menu-button-icon-size: 24px;
     //
     flex-shrink: 0;
     color: var(--uui-main_menu-text);
@@ -35,11 +37,21 @@
     }
 
     &.type-primary {
-        @include icon-layout(36px);
+        :global(.uui-icon) {
+            svg {
+                height: var(--uui-main_menu-button-icon-size);
+                width: inherit;
+            }
+        }
     }
 
     &.type-secondary {
-        @include icon-layout(36px);
+        :global(.uui-icon) {
+            svg {
+                height: var(--uui-main_menu-button-icon-size);
+                width: inherit;
+            }
+        }
     }
 
     &:global(.-clickable) {
diff --git a/uui/components/overlays/NotificationCard.module.scss b/uui/components/overlays/NotificationCard.module.scss
index fab436876e..bb70fd4146 100644
--- a/uui/components/overlays/NotificationCard.module.scss
+++ b/uui/components/overlays/NotificationCard.module.scss
@@ -4,11 +4,12 @@
     --uui-notification_card-bg: var(--uui-surface-main);
     --uui-notification_card-border: var(--uui-color-50);
     --uui-notification_card-fill: var(--uui-color-50);
+    --uui-notification_card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future
 
     --uui-notification_card-border-radius: var(--uui-border-radius);
     --uui-notification_card-border-width: 0;
     --uui-notification_card-border-top-width: 6px;
-    --uui-notification_card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future
+    --uui-notification_card-icon-size: 24px;
     //
     border-style: solid;
     border-color: var(--uui-notification_card-border, transparent);
@@ -40,7 +41,13 @@
 
     .close-icon {
         padding: 6px 0;
-        @include icon-size(24);
+
+        :global(.uui-icon) {
+            svg {
+                height: var(--uui-notification_card-icon-size);
+                width: inherit;
+            }
+        }
     }
 
     .main-path {