fix(styles): fix some CSS errors in using CSS variables [ci visual] (#6220)

Author: droshev

packages/cx/src/side-nav.scss

@@ -14,7 +14,7 @@ $fd-side-nav-border-radius: 1rem;
   --fdSideNav_Padding_Inline: 0;
   --fdSideNav_First_Item_Margin_Top: 0.25rem;
   --fdSideNav_Utility_Margin_Bottom: 1rem;
-  --fdNestedList_Item_Height: var(--sapElement_LineHeigh);
+  --fdNestedList_Item_Height: var(--sapElement_LineHeight);
 
   transition: width ease-out 0.2s;
 

packages/styles/src/_avatar-variables.scss

@@ -15,70 +15,70 @@ $fd-avatar-accent-colors: (
     "border-color": var(--sapAvatar_1_BorderColor),
     "text-color": var(--sapAvatar_1_TextColor),
     "background-color-hover": var(--sapAvatar_1_Hover_Background),
-    "border-color-hover":var(--sapAvatar_Hover_BorderColor)
+    "border-color-hover": var(--sapAvatar_Hover_BorderColor)
   ),
   "2": (
     "background-color": var(--sapAvatar_2_Background),
     "border-color": var(--sapAvatar_2_BorderColor),
     "text-color": var(--sapAvatar_2_TextColor),
     "background-color-hover": var(--sapAvatar_2_Hover_Background),
-    "border-color-hover":var(--sapAvatar_Hover_BorderColor)
+    "border-color-hover": var(--sapAvatar_Hover_BorderColor)
   ),
   "3": (
     "background-color": var(--sapAvatar_3_Background),
     "border-color": var(--sapAvatar_3_BorderColor),
     "text-color": var(--sapAvatar_3_TextColor),
     "background-color-hover": var(--sapAvatar_3_Hover_Background),
-    "border-color-hover":var(--sapAvatar_Hover_BorderColor)
+    "border-color-hover": var(--sapAvatar_Hover_BorderColor)
   ),
   "4": (
     "background-color": var(--sapAvatar_4_Background),
     "border-color": var(--sapAvatar_4_BorderColor),
     "text-color": var(--sapAvatar_4_TextColor),
     "background-color-hover": var(--sapAvatar_4_Hover_Background),
-    "border-color-hover":var(--sapAvatar_Hover_BorderColor)
+    "border-color-hover": var(--sapAvatar_Hover_BorderColor)
   ),
   "5": (
     "background-color": var(--sapAvatar_5_Background),
     "border-color": var(--sapAvatar_5_BorderColor),
     "text-color": var(--sapAvatar_5_TextColor),
     "background-color-hover": var(--sapAvatar_5_Hover_Background),
-    "border-color-hover":var(--sapAvatar_Hover_BorderColor)
+    "border-color-hover": var(--sapAvatar_Hover_BorderColor)
   ),
   "6": (
     "background-color": var(--sapAvatar_6_Background),
     "border-color": var(--sapAvatar_6_BorderColor),
     "text-color": var(--sapAvatar_6_TextColor),
     "background-color-hover": var(--sapAvatar_6_Hover_Background),
-    "border-color-hover":var(--sapAvatar_Hover_BorderColor)
+    "border-color-hover": var(--sapAvatar_Hover_BorderColor)
   ),
   "7": (
     "background-color": var(--sapAvatar_7_Background),
     "border-color": var(--sapAvatar_7_BorderColor),
     "text-color": var(--sapAvatar_7_TextColor),
     "background-color-hover": var(--sapAvatar_7_Hover_Background),
-    "border-color-hover":var(--sapAvatar_Hover_BorderColor)
+    "border-color-hover": var(--sapAvatar_Hover_BorderColor)
   ),
   "8": (
     "background-color": var(--sapAvatar_8_Background),
     "border-color": var(--sapAvatar_8_BorderColor),
     "text-color": var(--sapAvatar_8_TextColor),
     "background-color-hover": var(--sapAvatar_8_Hover_Background),
-    "border-color-hover":var(--sapAvatar_Hover_BorderColor)
+    "border-color-hover": var(--sapAvatar_Hover_BorderColor)
   ),
   "9": (
     "background-color": var(--sapAvatar_9_Background),
     "border-color": var(--sapAvatar_9_BorderColor),
     "text-color": var(--sapAvatar_9_TextColor),
     "background-color-hover": var(--sapAvatar_9_Hover_Background),
-    "border-color-hover":var(--sapAvatar_Hover_BorderColor)
+    "border-color-hover": var(--sapAvatar_Hover_BorderColor)
   ),
   "10": (
     "background-color": var(--sapAvatar_10_Background),
     "border-color": var(--sapAvatar_10_BorderColor),
     "text-color": var(--sapAvatar_10_TextColor),
     "background-color-hover": var(--sapAvatar_10_Hover_Background),
-    "border-color-hover":var(--sapAvatar_Hover_BorderColor)
+    "border-color-hover": var(--sapAvatar_Hover_BorderColor)
   )
 );
 $fd-avatar-indication-colors: (

packages/styles/src/user-menu.scss

@@ -165,7 +165,7 @@ $menu: #{$fd-namespace}-menu;
         font-family: var(--sapFontBlackFamily);
         font-size: 1.25rem;
         line-height: 1.3;
-        color: var(-–sapTitleColor);
+        color: var(--sapTitleColor);
       }
 
       &__navigation-submenu {
@@ -187,7 +187,7 @@ $menu: #{$fd-namespace}-menu;
         font-family: var(--sapFontFamily);
         font-size: var(--sapFontSize);
         line-height: var(--sapContent_LineHeight);
-        color: var(–sapContent_LabelColor);
+        color: var(--sapContent_LabelColor);
       }
 
       &__body {