Merge pull request #2509 from epam/feature/update-sass-version

Sass version update
epam · Sep 13, 2024 · 36d94e2 · 36d94e2
2 parents 1c6cfcb + f9b6129
commit 36d94e2
Show file tree

Hide file tree

Showing 28 changed files with 133 additions and 103 deletions.
diff --git a/app/src/common/docs/EditableDocContent.module.scss b/app/src/common/docs/EditableDocContent.module.scss
@@ -1,6 +1,3 @@
-@use '~@epam/promo/assets/styles/index' as *;
-@use '~@epam/assets/theme/theme_promo' as *;
-
 .wrapper {
     position: relative;
 

diff --git a/app/src/demo/dnd/DndCriterion.module.scss b/app/src/demo/dnd/DndCriterion.module.scss
@@ -2,10 +2,10 @@
 @use  '~@epam/uui/assets/styles/dnd' as *;
 
 .drag-element {
-    @include dnd-cursor-style();
     position: relative;
     width: max-content;
     margin: 1px 6px;
+    @include dnd-cursor-style();
 
     .row {
         min-height: 18px;
@@ -21,8 +21,8 @@
     }
 
     &:global(.uui-drag-ghost) {
-        @include visibility;
         box-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05);
+        @include visibility;
     }
 }
 

diff --git a/app/src/demo/dnd/DndMaterial.module.scss b/app/src/demo/dnd/DndMaterial.module.scss
@@ -3,11 +3,12 @@
 @use './mixins.module' as *;
 
 .drag-element {
-    @include dnd-cursor-style();
     position: relative;
     padding: 6px 0;
     margin: 0 24px;
 
+    @include dnd-cursor-style();
+
     .dnd-item {
         border: 1px solid var(--uui-divider);
     }
@@ -37,8 +38,8 @@
     }
 
     :global(.uui-drag-ghost) {
-        @include visibility;
         box-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05);
+        @include visibility;
     }
 }
 

diff --git a/app/src/demo/dnd/DndModule.module.scss b/app/src/demo/dnd/DndModule.module.scss
@@ -2,9 +2,9 @@
 @use  '~@epam/uui/assets/styles/dnd' as *;
 
 .drag-element {
-    @include dnd-cursor-style();
     position: relative;
     margin: 1px 0;
+    @include dnd-cursor-style();
 
     &:hover .drag-handle {
         visibility: visible;
@@ -15,8 +15,8 @@
     }
 
     &:global(.uui-drag-ghost) {
-        @include visibility;
         box-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05);
+        @include visibility;
     }
 
     .item {

diff --git a/app/src/demo/dnd/DndSection.module.scss b/app/src/demo/dnd/DndSection.module.scss
@@ -2,10 +2,11 @@
 @use '~@epam/uui/assets/styles/dnd' as *;
 
 .drag-element {
-    @include dnd-cursor-style();
     position: relative;
     padding: 6px 0;
 
+    @include dnd-cursor-style();
+
     .dnd-item:hover {
         box-shadow: 0 6px 12px 0 rgba(29, 30, 38, 0.1), 0 3px 6px 0 rgba(29, 30, 38, 0.1);
     }
@@ -35,22 +36,24 @@
     }
 
     .grab-area:hover {
-        @include visibility;
         background-color: var(--uui-surface-main);
+
+        @include visibility;
     }
 
     &:global(.uui-dragged-out) {
         @include drag-out;
     }
 
     :global(.uui-drag-ghost) {
-        @include visibility;
         box-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05);
+
+        @include visibility;
     }
 }
 
 @include drag-handle(8px, 11px, 11px, 130%);
 
 .icon-gray60 {
     fill: var(--uui-icon);
-}
+}
diff --git a/app/src/docs/_examples/dnd/DndMaterial.module.scss b/app/src/docs/_examples/dnd/DndMaterial.module.scss
@@ -1,10 +1,10 @@
 @use '~@epam/uui/assets/styles/dnd' as *;
 
 .dragElement {
-    @include dnd-cursor-style();
     position: relative;
     padding: 6px 0;
     margin: 0 24px;
+    @include dnd-cursor-style();
 
     .materialRow {
         border: 1px solid var(--uui-control-border);

diff --git a/app/src/landing/PatternBlock.module.scss b/app/src/landing/PatternBlock.module.scss
@@ -1,5 +1,6 @@
+@use 'sass:math';
 // to calculate div `image holder in Accordion` height in mob view
-$aspect-ratio: 1125 / 1833;
+$aspect-ratio: math.div(1125, 1833);
 
 @keyframes accordion-appears {
     0% {
@@ -336,4 +337,4 @@ $aspect-ratio: 1125 / 1833;
             }
         }
     }
-}
+}
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,11 @@
+# 5.*.* - **.**.****
+
+**What's New**
+* Sass updated to the last version, warnings 'Mixed Declarations' fixed https://sass-lang.com/documentation/breaking-changes/mixed-decls/
+
+**What's Fixed**
+
+
 # 5.9.2 - 12.09.2024
 
 **What's New**

diff --git a/epam-assets/scss/loveship/typography.scss b/epam-assets/scss/loveship/typography.scss
@@ -152,9 +152,9 @@
 }
 
 @mixin typography-loveship() {
+    font-family: $font-source-sans;
+    color: $night700;
     @include typography-header();
     @include typography-block();
     @include typography-inline();
-    font-family: $font-source-sans;
-    color: $night700;
 }
diff --git a/epam-assets/theme/theme_6px.scss b/epam-assets/theme/theme_6px.scss
@@ -1,12 +1,13 @@
 @mixin uui-6px-grid {
-    --uui-grid-unit: 6px;
-    --uui-focus-outline-width: 2px;
-    --uui-focus-outline-offset: 2px;
-    --uui-focus-radius: 2px;
-    //--uui-border-radius: 3px; // TODO: ?????
-    --uui-tab-line-width: 3px;
-    --uui-notify-size: 6px;
-
+    & {
+        --uui-grid-unit: 6px;
+        --uui-focus-outline-width: 2px;
+        --uui-focus-outline-offset: 2px;
+        --uui-focus-radius: 2px;
+        //--uui-border-radius: 3px; // TODO: ?????
+        --uui-tab-line-width: 3px;
+        --uui-notify-size: 6px;
+    }
 
     .uui-size-12 {
         --uui-size: 12px;

diff --git a/epam-assets/theme/theme_electric.scss b/epam-assets/theme/theme_electric.scss
@@ -6,7 +6,6 @@
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
 
 @mixin theme-electric {
-    @include tokens.theme-tokens;
     --uui-font: 'Source Sans Pro', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;
 
@@ -24,13 +23,11 @@
     --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
     --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
 
-    --uui-border-radius: 3px;
-
-    /* core variables end */
-
-    /* ------------------------------------ */
+    @include tokens.theme-tokens;
 
-    /* override variables */
+    & {
+        --uui-border-radius: 3px;
+    }
 
     /* begin color classes */
     .uui-color-fire {
@@ -513,6 +510,6 @@
 }
 
 .uui-theme-electric {
-    @include uui-6px-grid();
     @include theme-electric();
+    @include uui-6px-grid();
 }
diff --git a/epam-assets/theme/theme_loveship.scss b/epam-assets/theme/theme_loveship.scss
@@ -5,7 +5,6 @@
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
 
 @mixin theme-loveship {
-    @include tokens.theme-tokens;
     --uui-font: 'Source Sans Pro', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;
 
@@ -23,11 +22,12 @@
     --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
     --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
 
-    --uui-border-radius: 3px;
+    @include tokens.theme-tokens;
 
-    /* core variables end */
 
-    /* ------------------------------------ */
+    & {
+        --uui-border-radius: 3px;
+    }
 
     /* begin color classes */
 
@@ -588,6 +588,6 @@
 }
 
 .uui-theme-loveship {
-    @include uui-6px-grid();
     @include theme-loveship();
+    @include uui-6px-grid();
 }
diff --git a/epam-assets/theme/theme_loveship_dark.scss b/epam-assets/theme/theme_loveship_dark.scss
@@ -5,7 +5,6 @@
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
 
 @mixin theme-loveship_dark {
-    @include tokens.theme-tokens;
     --uui-font: 'Source Sans Pro', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;
 
@@ -14,11 +13,11 @@
     --uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26);
     --uui-shadow-level-3: 0 1px 2px rgba(0, 0, 0, 0.2), 0 3px 25px 3px rgba(0, 0, 0, 0.56);
 
-    --uui-border-radius: 3px;
-
-    /* core variables end */
+    @include tokens.theme-tokens;
 
-    /* ------------------------------------ */
+    & {
+        --uui-border-radius: 3px;
+    }
 
     /* begin color classes */
 
@@ -818,6 +817,6 @@
 }
 
 .uui-theme-loveship_dark {
-    @include uui-6px-grid();
     @include theme-loveship_dark();
+    @include uui-6px-grid();
 }
diff --git a/epam-assets/theme/theme_promo.scss b/epam-assets/theme/theme_promo.scss
@@ -5,7 +5,6 @@
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
 
 @mixin theme-promo {
-    @include tokens.theme-tokens;
     --uui-font: 'Source Sans Pro', sans-serif;
     --uui-font-mono: 'Roboto Mono', monospace;
 
@@ -18,11 +17,11 @@
     --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
     --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
 
-    --uui-border-radius: 0;
-
-    /* core variables end */
+    @include tokens.theme-tokens;
 
-    /* ------------------------------------ */
+    & {
+        --uui-border-radius: 0;
+    }
 
     /* begin color classes */
 
@@ -601,7 +600,7 @@
 }
 
 .uui-theme-promo {
-    @include uui-6px-grid();
     @include theme-promo();
+    @include uui-6px-grid();
 }
 
diff --git a/epam-assets/theme/theme_vanilla_thunder.scss b/epam-assets/theme/theme_vanilla_thunder.scss
@@ -3,7 +3,6 @@
 /*  Name convention  */
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
 .uui-theme-vanilla_thunder {
-    @include uui-6px-grid();
     --uui-font: var(--font-inter);
     --uui-font-mono: 'Roboto Mono', monospace;
 
@@ -210,7 +209,11 @@
 
     /* core variables end */
 
-    /* ------------------------------------ */
+    /* size theme start */
+
+    @include uui-6px-grid();
+
+    /* size theme end */
 
     /* begin color classes */
 

diff --git a/uui-build/package.json b/uui-build/package.json
@@ -29,7 +29,7 @@
     "rollup": "4.14.2",
     "rollup-plugin-postcss-modules": "2.1.1",
     "rollup-plugin-visualizer": "5.12.0",
-    "sass": "^1.69.7",
+    "sass": "^1.78.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.2"
   },

diff --git a/uui/assets/styles/inputs.scss b/uui/assets/styles/inputs.scss
@@ -1,21 +1,21 @@
 @mixin disabled-input() {
     &.mode-form {
-        @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
         cursor: default;
+        @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
 
         &:hover, &:active, &:focus {
-            @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
             box-shadow: none;
+            @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
         }
     }
 
     &.mode-cell {
-        @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
         cursor: default;
+        @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
 
         &:hover, &:active, &:focus {
-            @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
             box-shadow: none;
+            @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
         }
     }
 }

diff --git a/uui/components/buttons/LinkButton.module.scss b/uui/components/buttons/LinkButton.module.scss
@@ -20,9 +20,10 @@
     --uui-link-button-icon-height: var(--uui-icon-size);
     --uui-link-button-line-height: var(--uui-line-height);
     --uui-link-button-font-size: var(--uui-font-size);
+    //
+    min-width: var(--uui-link-button-min-width);
 
     @include clickable-styles();
-    min-width: var(--uui-link-button-min-width);
 
     &:global(.uui-button-box) {
         background-color: transparent;