fix: unify delta theming variables naming (#2035)

SAP · Jan 7, 2021 · 600ceab · 600ceab
1 parent 71ac31e
commit 600ceab
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 43 deletions.
diff --git a/src/_dialog-placeholders.scss b/src/_dialog-placeholders.scss
@@ -26,7 +26,7 @@ $fd-dialog-body-color: var(--sapGroup_ContentBackground);
     width: 100%;
     height: 100%;
     background-color: var(--sapBlockLayer_Background);
-    opacity: var(--fdDialogBackgroundOpacity);
+    opacity: var(--fdDialog_Background_Opacity);
   }
 }
 

diff --git a/src/flexible-column-layout.scss b/src/flexible-column-layout.scss
@@ -9,7 +9,7 @@ $block: #{$fd-namespace}-flexible-column-layout;
   $fd-toggle-button-height: 2rem;
   $fd-toggle-button-width: 1.5rem;
   $fd-column-layout-separator-width: 1rem;
-  $fd-column-layout-border-x: var(--fdFlexibleColumnLayoutBorder);
+  $fd-column-layout-border-x: var(--fdFlexibleColumnLayout_Border);
   $fd-column-layout-expand-decoration-position: calc(50% + #{$fd-toggle-button-height} / 2);
 
   @include fd-reset();
@@ -22,7 +22,7 @@ $block: #{$fd-namespace}-flexible-column-layout;
     position: relative;
     width: $fd-column-layout-separator-width;
     min-width: $fd-column-layout-separator-width;
-    background-color: var(--fdFlexibleColumnBackgroundSolid);
+    background-color: var(--fdFlexibleColumnLayout_Background_Solid);
 
     @include both-pseudo-selectors() {
       content: "";
@@ -36,12 +36,12 @@ $block: #{$fd-namespace}-flexible-column-layout;
 
     &::before {
       bottom: $fd-column-layout-expand-decoration-position;
-      background-image: linear-gradient(to top, var(--fdFlexibleColumnLayoutToggleImageColor), transparent);
+      background-image: linear-gradient(to top, var(--fdFlexibleColumnLayout_Toggle_Image_Color), transparent);
     }
 
     &::after {
       top: $fd-column-layout-expand-decoration-position;
-      background-image: linear-gradient(to bottom, var(--fdFlexibleColumnLayoutToggleImageColor), transparent);
+      background-image: linear-gradient(to bottom, var(--fdFlexibleColumnLayout_Toggle_Image_Color), transparent);
     }
 
     @include fd-hover() {
@@ -85,13 +85,13 @@ $block: #{$fd-namespace}-flexible-column-layout;
 
   &--translucent {
     .#{$block}__separator {
-      background-color: var(--fdFlexibleColumnBackgroundTranslucent);
+      background-color: var(--fdFlexibleColumnLayout_Background_Translucent);
     }
   }
 
   &--transparent {
     .#{$block}__separator {
-      background-color: var(--fdFlexibleColumnBackgroundTransparent);
+      background-color: var(--fdFlexibleColumnLayout_Background_Transparent);
     }
   }
 }
diff --git a/src/message-strip.scss b/src/message-strip.scss
@@ -57,7 +57,7 @@ $block: #{$fd-namespace}-message-strip;
   position: relative;
   color: $fd-message-strip-text-color;
   background-color: $fd-message-strip-background-color;
-  border-width: var(--fdMessageStripBorderWidth);
+  border-width: var(--fdMessageStrip_Border_Width);
   border-style: solid;
   border-color: $fd-message-strip-border-color;
   border-radius: $fd-message-strip-border-radius;

diff --git a/src/theming/sap_fiori_3.scss b/src/theming/sap_fiori_3.scss
@@ -135,20 +135,20 @@
   --fdCarousel_Dot_Border: none;
 
   /** Flexible Column Layout */
-  --fdFlexibleColumnLayoutToggleImageColor: var(--sapHighlightColor);
-  --fdFlexibleColumnLayoutBorder: none;
-  --fdFlexibleColumnBackgroundSolid: var(--sapShell_Background);
-  --fdFlexibleColumnBackgroundTranslucent: var(--sapGroup_ContentBackground);
-  --fdFlexibleColumnBackgroundTransparent: transparent;
+  --fdFlexibleColumnLayout_Toggle_Image_Color: var(--sapHighlightColor);
+  --fdFlexibleColumnLayout_Border: none;
+  --fdFlexibleColumnLayout_Background_Solid: var(--sapShell_Background);
+  --fdFlexibleColumnLayout_Background_Translucent: var(--sapGroup_ContentBackground);
+  --fdFlexibleColumnLayout_Background_Transparent: transparent;
 
   /** Dialog */
-  --fdDialogBackgroundOpacity: 0.6;
+  --fdDialog_Background_Opacity: 0.6;
 
   /* Grid List */
   --fdGrid_List_Item_Hover_Border_Color: var(--sapTile_Interactive_BorderColor);
 
   /* Message Strip */
-  --fdMessageStripBorderWidth: 0.0625rem;
+  --fdMessageStrip_Border_Width: 0.0625rem;
 
   /* Switch */
   --fdSwitch_Handle_Border_Width: var(--sapButton_BorderWidth);

diff --git a/src/theming/sap_fiori_3_dark.scss b/src/theming/sap_fiori_3_dark.scss
@@ -134,20 +134,20 @@
   --fdCarousel_Dot_Border: none;
 
   /** Flexible Column Layout */
-  --fdFlexibleColumnLayoutToggleImageColor: var(--sapHighlightColor);
-  --fdFlexibleColumnLayoutBorder: none;
-  --fdFlexibleColumnBackgroundSolid: var(--sapShell_Background);
-  --fdFlexibleColumnBackgroundTranslucent: var(--sapGroup_ContentBackground);
-  --fdFlexibleColumnBackgroundTransparent: transparent;
+  --fdFlexibleColumnLayout_Toggle_Image_Color: var(--sapHighlightColor);
+  --fdFlexibleColumnLayout_Border: none;
+  --fdFlexibleColumnLayout_Background_Solid: var(--sapShell_Background);
+  --fdFlexibleColumnLayout_Background_Translucent: var(--sapGroup_ContentBackground);
+  --fdFlexibleColumnLayout_Background_Transparent: transparent;
 
   /** Dialog */
-  --fdDialogBackgroundOpacity: 0.6;
+  --fdDialog_Background_Opacity: 0.6;
 
   /* Grid List */
   --fdGrid_List_Item_Hover_Border_Color: var(--sapTile_Interactive_BorderColor);
 
   /* Message Strip */
-  --fdMessageStripBorderWidth: 0.0625rem;
+  --fdMessageStrip_Border_Width: 0.0625rem;
 
   /* Switch */
   --fdSwitch_Handle_Border_Width: var(--sapButton_BorderWidth);

diff --git a/src/theming/sap_fiori_3_hcb.scss b/src/theming/sap_fiori_3_hcb.scss
@@ -134,20 +134,20 @@
   --fdCarousel_Dot_Border: 1px solid var(--sapContent_ForegroundBorderColor);
 
   /** Flexible Column Layout */
-  --fdFlexibleColumnLayoutToggleImageColor: var(--sapObjectHeader_BorderColor);
-  --fdFlexibleColumnLayoutBorder: solid 0.0625rem var(--sapGroup_ContentBorderColor);
-  --fdFlexibleColumnBackgroundSolid: var(--sapBackgroundColor);
-  --fdFlexibleColumnBackgroundTranslucent: var(--sapBackgroundColor);
-  --fdFlexibleColumnBackgroundTransparent: var(--sapBackgroundColor);
+  --fdFlexibleColumnLayout_Toggle_Image_Color: var(--sapObjectHeader_BorderColor);
+  --fdFlexibleColumnLayout_Border: solid 0.0625rem var(--sapGroup_ContentBorderColor);
+  --fdFlexibleColumnLayout_Background_Solid: var(--sapBackgroundColor);
+  --fdFlexibleColumnLayout_Background_Translucent: var(--sapBackgroundColor);
+  --fdFlexibleColumnLayout_Background_Transparent: var(--sapBackgroundColor);
 
   /** Dialog */
-  --fdDialogBackgroundOpacity: 0.8;
+  --fdDialog_Background_Opacity: 0.8;
 
   /* Grid List */
   --fdGrid_List_Item_Hover_Border_Color: var(--sapTile_Interactive_BorderColor);
 
   /* Message Strip */
-  --fdMessageStripBorderWidth: 0.125rem;
+  --fdMessageStrip_Border_Width: 0.125rem;
 
   /* Switch */
   --fdSwitch_Handle_Border_Width: 0.125rem;

diff --git a/src/theming/sap_fiori_3_hcw.scss b/src/theming/sap_fiori_3_hcw.scss
@@ -134,20 +134,20 @@
   --fdCarousel_Dot_Border: 1px solid var(--sapContent_ForegroundBorderColor);
 
   /** Flexible Column Layout */
-  --fdFlexibleColumnLayoutToggleImageColor: var(--sapObjectHeader_BorderColor);
-  --fdFlexibleColumnLayoutBorder: solid 0.0625rem var(--sapGroup_ContentBorderColor);
-  --fdFlexibleColumnBackgroundSolid: var(--sapBackgroundColor);
-  --fdFlexibleColumnBackgroundTranslucent: var(--sapBackgroundColor);
-  --fdFlexibleColumnBackgroundTransparent: var(--sapBackgroundColor);
+  --fdFlexibleColumnLayout_Toggle_Image_Color: var(--sapObjectHeader_BorderColor);
+  --fdFlexibleColumnLayout_Border: solid 0.0625rem var(--sapGroup_ContentBorderColor);
+  --fdFlexibleColumnLayout_Background_Solid: var(--sapBackgroundColor);
+  --fdFlexibleColumnLayout_Background_Translucent: var(--sapBackgroundColor);
+  --fdFlexibleColumnLayout_Background_Transparent: var(--sapBackgroundColor);
 
   /** Dialog */
-  --fdDialogBackgroundOpacity: 0.8;
+  --fdDialog_Background_Opacity: 0.8;
 
   /* Grid List */
   --fdGrid_List_Item_Hover_Border_Color: var(--sapTile_Interactive_BorderColor);
 
   /* Message Strip */
-  --fdMessageStripBorderWidth: 0.125rem;
+  --fdMessageStrip_Border_Width: 0.125rem;
 
   /* Switch */
   --fdSwitch_Handle_Border_Width: 0.125rem;

diff --git a/src/theming/sap_fiori_3_light_dark.scss b/src/theming/sap_fiori_3_light_dark.scss
@@ -134,20 +134,20 @@
   --fdCarousel_Dot_Border: none;
 
   /** Flexible Column Layout */
-  --fdFlexibleColumnLayoutToggleImageColor: var(--sapHighlightColor);
-  --fdFlexibleColumnLayoutBorder: none;
-  --fdFlexibleColumnBackgroundSolid: var(--sapShell_Background);
-  --fdFlexibleColumnBackgroundTranslucent: var(--sapGroup_ContentBackground);
-  --fdFlexibleColumnBackgroundTransparent: transparent;
+  --fdFlexibleColumnLayout_Toggle_Image_Color: var(--sapHighlightColor);
+  --fdFlexibleColumnLayout_Border: none;
+  --fdFlexibleColumnLayout_Background_Solid: var(--sapShell_Background);
+  --fdFlexibleColumnLayout_Background_Translucent: var(--sapGroup_ContentBackground);
+  --fdFlexibleColumnLayout_Background_Transparent: transparent;
 
   /** Dialog */
-  --fdDialogBackgroundOpacity: 0.6;
+  --fdDialog_Background_Opacity: 0.6;
 
   /* Grid List */
   --fdGrid_List_Item_Hover_Border_Color: var(--sapTile_Interactive_BorderColor);
 
   /* Message Strip */
-  --fdMessageStripBorderWidth: 0.0625rem;
+  --fdMessageStrip_Border_Width: 0.0625rem;
 
   /* Switch */
   --fdSwitch_Handle_Border_Width: var(--sapButton_BorderWidth);