feat(styles): update Flexible Column Layout Horizon [ci visual] (#4485)

SAP · Apr 27, 2023 · bffc57f · bffc57f
1 parent f3cc5b7
commit bffc57f
Show file tree

Hide file tree

Showing 15 changed files with 74 additions and 88 deletions.
diff --git a/packages/styles/src/theming/common/flexible-column-layout/_sap_fiori.scss b/packages/styles/src/theming/common/flexible-column-layout/_sap_fiori.scss
@@ -0,0 +1,7 @@
+:root {
+  --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;
+}
diff --git a/packages/styles/src/theming/common/flexible-column-layout/_sap_fiori_hc.scss b/packages/styles/src/theming/common/flexible-column-layout/_sap_fiori_hc.scss
@@ -0,0 +1,6 @@
+:root {
+  --fdFlexibleColumnLayout_Toggle_Image_Color: var(--sapHighlightColor);
+  --fdFlexibleColumnLayout_Background_Solid: var(--sapContent_ForegroundColor);
+  --fdFlexibleColumnLayout_Background_Translucent: var(--sapBackgroundColor);
+  --fdFlexibleColumnLayout_Background_Transparent: var(--sapBackgroundColor);
+}
diff --git a/packages/styles/src/theming/common/flexible-column-layout/_sap_horizon.scss b/packages/styles/src/theming/common/flexible-column-layout/_sap_horizon.scss
@@ -0,0 +1,7 @@
+:root {
+  --fdFlexibleColumnLayout_Toggle_Image_Color: var(--sapHighlightColor);
+  --fdFlexibleColumnLayout_Border: solid 0.0625rem var(--sapGroup_ContentBorderColor);
+  --fdFlexibleColumnLayout_Background_Solid: var(--sapContent_ForegroundColor);
+  --fdFlexibleColumnLayout_Background_Translucent: var(--sapGroup_ContentBackground);
+  --fdFlexibleColumnLayout_Background_Transparent: transparent;
+}
diff --git a/packages/styles/src/theming/common/flexible-column-layout/_sap_horizon_hc.scss b/packages/styles/src/theming/common/flexible-column-layout/_sap_horizon_hc.scss
@@ -0,0 +1,6 @@
+:root {
+  --fdFlexibleColumnLayout_Toggle_Image_Color: var(--sapHighlightColor);
+  --fdFlexibleColumnLayout_Background_Solid: var(--sapContent_ForegroundColor);
+  --fdFlexibleColumnLayout_Background_Translucent: var(--sapBackgroundColor);
+  --fdFlexibleColumnLayout_Background_Transparent: var(--sapBackgroundColor);
+}
diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss
@@ -31,6 +31,7 @@
 @import "./common/variant-management/sap_fiori";
 @import "./common/shellbar/sap_fiori";
 @import "./common/user-menu/sap_fiori";
+@import "./common/flexible-column-layout/sap_fiori";
 @import "./sap_fiori_3/css_variables";
 
 :root {
@@ -172,13 +173,6 @@
   /* Badge */
   --fdBadge_Border_Color: transparent;
 
-  /** Flexible Column Layout */
-  --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 */
   --fdDialog_Background_Opacity: 0.6;
 

diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss
@@ -31,6 +31,7 @@
 @import "./common/variant-management/sap_fiori";
 @import "./common/shellbar/sap_fiori";
 @import "./common/user-menu/sap_fiori";
+@import "./common/flexible-column-layout/sap_fiori";
 @import "./sap_fiori_3_dark/css_variables";
 
 :root {
@@ -181,13 +182,6 @@
   /* Badge */
   --fdBadge_Border_Color: transparent;
 
-  /** Flexible Column Layout */
-  --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 */
   --fdDialog_Background_Opacity: 0.6;
 

diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss
@@ -38,6 +38,7 @@
 @import "./common/variant-management/sap_fiori";
 @import "./common/shellbar/sap_fiori_hc";
 @import "./common/user-menu/sap_fiori";
+@import "./common/flexible-column-layout/sap_fiori_hc";
 @import "./sap_fiori_3_hcb/css_variables";
 
 :root {
@@ -185,13 +186,6 @@
   /* Badge */
   --fdBadge_Border_Color: var(--sapGroup_ContentBorderColor);
 
-  /** Flexible Column Layout */
-  --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 */
   --fdDialog_Background_Opacity: 0.8;
 

diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss
@@ -32,6 +32,7 @@
 @import "./common/variant-management/sap_fiori";
 @import "./common/shellbar/sap_fiori_hc";
 @import "./common/user-menu/sap_fiori";
+@import "./common/flexible-column-layout/sap_fiori_hc";
 @import "./sap_fiori_3_hcw/css_variables";
 
 :root {
@@ -181,13 +182,6 @@
   /* Badge */
   --fdBadge_Border_Color: var(--sapGroup_ContentBorderColor);
 
-  /** Flexible Column Layout */
-  --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 */
   --fdDialog_Background_Opacity: 0.8;
 

diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
@@ -30,6 +30,7 @@
 @import "./common/file-uploader/sap_fiori";
 @import "./common/variant-management/sap_fiori";
 @import "./common/user-menu/sap_fiori";
+@import "./common/flexible-column-layout/sap_fiori";
 @import "./sap_fiori_3_light_dark/css_variables";
 
 :root {
@@ -181,13 +182,6 @@
   /* Badge */
   --fdBadge_Border_Color: transparent;
 
-  /** Flexible Column Layout */
-  --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 */
   --fdDialog_Background_Opacity: 0.6;
 

diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
@@ -33,6 +33,7 @@
 @import "./common/shellbar/sap_horizon";
 @import "./common/user-menu/sap_horizon";
 @import "./common/generic-tag/sap_horizon";
+@import "./common/flexible-column-layout/sap_horizon";
 @import "./sap_horizon/css_variables";
 
 :root {
@@ -182,13 +183,6 @@
   /* Badge */
   --fdBadge_Border_Color: transparent;
 
-  /** Flexible Column Layout */
-  --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 */
   --fdDialog_Background_Opacity: 0.6;
 

diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -33,6 +33,7 @@
 @import "./common/shellbar/sap_horizon";
 @import "./common/user-menu/sap_horizon";
 @import "./common/generic-tag/sap_horizon";
+@import "./common/flexible-column-layout/sap_horizon";
 @import "./sap_horizon_dark/css_variables";
 
 :root {
@@ -191,13 +192,6 @@
   /* Badge */
   --fdBadge_Border_Color: var(--sapGroup_ContentBorderColor);
 
-  /** Flexible Column Layout */
-  --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 */
   --fdDialog_Background_Opacity: 0.6;
 

diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -33,6 +33,7 @@
 @import "./common/shellbar/sap_horizon_hc";
 @import "./common/user-menu/sap_horizon";
 @import "./common/generic-tag/sap_horizon_hc";
+@import "./common/flexible-column-layout/sap_horizon_hc";
 @import "./sap_horizon_hcb/css_variables";
 
 :root {
@@ -178,13 +179,6 @@
   /* Badge */
   --fdBadge_Border_Color: var(--sapGroup_ContentBorderColor);
 
-  /** Flexible Column Layout */
-  --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 */
   --fdDialog_Background_Opacity: 0.6;
   --fdDialog_Content_Border_Radius: var(--sapPopover_BorderCornerRadius);

diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -34,6 +34,7 @@
 @import "./common/shellbar/sap_horizon_hc";
 @import "./common/user-menu/sap_horizon";
 @import "./common/generic-tag/sap_horizon_hc";
+@import "./common/flexible-column-layout/sap_horizon_hc";
 @import "./sap_horizon_hcw/css_variables";
 
 :root {
@@ -179,13 +180,6 @@
   /* Badge */
   --fdBadge_Border_Color: var(--sapGroup_ContentBorderColor);
 
-  /** Flexible Column Layout */
-  --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 */
   --fdDialog_Background_Opacity: 0.6;
 

diff --git a/packages/styles/stories/Layouts/flexible-column-layout/flexible-column-layout.stories.js b/packages/styles/stories/Layouts/flexible-column-layout/flexible-column-layout.stories.js
@@ -57,7 +57,7 @@ ThreeColumnsLayout.parameters = {
 
 export const TwoColumnsLayout = () => `
 <div style="max-width: 1200px">
-    <div class="fd-flexible-column-layout">
+    <div class="fd-flexible-column-layout fd-flexible-column-layout--transparent">
         <div class="fd-flexible-column-layout__column" style="width: 33%">
             <div class="docs-layout-grid-bg--tall"></div>
         </div>
@@ -85,6 +85,7 @@ TwoColumnsLayout.parameters = {
     docs: {
         description: {
             story: `
+Flexible Column with transparent separators
 - Width of the device: Max: \`1280px\`, Min: 961px
 - Wide column width: \`67%\`
 - Narrow column width: \`33%\`
@@ -95,7 +96,7 @@ TwoColumnsLayout.parameters = {
 
 export const OneColumnsLayout = () => `
 <div style="max-width: 600px">
-    <div class="fd-flexible-column-layout">
+    <div class="fd-flexible-column-layout fd-flexible-column-layout--translucent">
         <div class="fd-flexible-column-layout__column fd-flexible-column-layout__column--hidden" style="width: 0">
             <div class="docs-layout-grid-bg--tall"></div>
         </div>
@@ -123,6 +124,7 @@ OneColumnsLayout.parameters = {
     docs: {
         description: {
             story: `
+Flexible Column Layout with translucent separators
 - Max width of the device: \`960px\`
 - Column width: \`100%\`
 `