feat(styles): update card and tile colors [ci visual] (#4430)

BREAKING CHANGE:
- removed Bar based Card Footer using Bar component; removed class `fd-card__bar-footer` Bar footer; simplify footer markup and drop `fd-card__footer-actions-item`

packages/styles/src/card.scss

@@ -60,6 +60,10 @@ $fd-card-header-outline-offset: 0.0625rem !default;
   border-radius: var(--fdCard_Border_Radius);
   border: var(--fdCard_Border);
 
+  @include fd-hover() {
+    box-shadow: var(--sapContent_Shadow2);
+  }
+
   &__header {
     @include fd-reset();
     @include fd-flex();
@@ -134,18 +138,11 @@ $fd-card-header-outline-offset: 0.0625rem !default;
       @include fd-reset();
 
       @include fd-flex() {
+        gap: 0.5rem;
         justify-content: flex-end;
       }
 
       width: 100%;
-
-      &-item {
-        @include fd-reset();
-
-        &:not(:last-child) {
-          @include fd-set-margin-right(var(--fdCard_Footer_Actions_Item_Spacing));
-        }
-      }
     }
 
     .#{$block}__footer-link {
@@ -156,10 +153,6 @@ $fd-card-header-outline-offset: 0.0625rem !default;
     }
   }
 
-  &__bar-footer {
-    border-radius: 0 0 $fd-card-border-radius $fd-card-border-radius;
-  }
-
   &__header-text {
     @include fd-reset();
 

packages/styles/src/theming/common/card/_sap_horizon.scss

@@ -4,7 +4,7 @@
   --fdCard_Border_Radius: var(--sapTile_BorderCornerRadius);
   --fdCard_Header_Border_Bottom: 0.0625rem solid transparent;
   --fdCard_Footer_Border_Top: 0.0625rem solid transparent;
-  --fdCard_Border: none;
+  --fdCard_Border: 0.0625rem solid var(--sapTile_BorderColor);
   --fdCard_Counter_Margin: 0.125rem 0 0 1rem;
   --fdCard_Counter_Margin_RTL: 0.125rem 1rem 0 0;
   --fdCard_Header_Padding: 1rem 1rem 0.75rem;

packages/styles/src/theming/common/card/_sap_horizon_hc.scss

@@ -1,7 +1,5 @@
 @import "./sap_horizon";
 
 :root {
-  --fdCard_Background_Color: transparent;
   --fdCard_Box_Shadow: none;
-  --fdCard_Border: 0.0625rem solid var(--sapTile_BorderColor);
 }

packages/styles/src/theming/sap_fiori_3/_css_variables.scss

@@ -612,18 +612,18 @@
   // --sapObjectHeader_Title_FontFamily: "72", "72full", Arial, Helvetica, sans-serif;
   // --sapObjectHeader_Subtitle_TextColor: #6a6d70;
   // --sapBlockLayer_Background: #000;
-  // --sapTile_Background: #fff;
-  // --sapTile_Hover_Background: #f5f5f5;
-  // --sapTile_Active_Background: #f5f5f5;
-  // --sapTile_BorderColor: transparent;
-  // --sapTile_BorderCornerRadius: 0.25rem;
-  // --sapTile_TitleTextColor: #32363a;
-  // --sapTile_TextColor: #6a6d70;
-  // --sapTile_IconColor: #5a7da0;
-  // --sapTile_SeparatorColor: #ccc;
-  // --sapTile_Interactive_BorderColor: #b3b3b3;
-  // --sapTile_OverlayBackground: rgba(0, 0, 0, 0.8);
-  // --sapTile_OverlayForegroundColor: #fff;
+  --sapTile_Background: #fff;
+  --sapTile_Hover_Background: #f5f5f5;
+  --sapTile_Active_Background: #f5f5f5;
+  --sapTile_BorderColor: transparent;
+  --sapTile_BorderCornerRadius: 0.25rem;
+  --sapTile_TitleTextColor: #32363a;
+  --sapTile_TextColor: #6a6d70;
+  --sapTile_IconColor: #5a7da0;
+  --sapTile_SeparatorColor: #ccc;
+  --sapTile_Interactive_BorderColor: #b3b3b3;
+  --sapTile_OverlayBackground: rgba(0, 0, 0, 0.8);
+  --sapTile_OverlayForegroundColor: #fff;
   // --sapAccentColor1: #d08014;
   // --sapAccentColor2: #d04343;
   // --sapAccentColor3: #db1f77;

packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss

@@ -612,18 +612,18 @@
   // --sapObjectHeader_Title_FontFamily: "72", "72full", Arial, Helvetica, sans-serif;
   // --sapObjectHeader_Subtitle_TextColor: #d3d7d9;
   // --sapBlockLayer_Background: #000;
-  // --sapTile_Background: #29313a;
-  // --sapTile_Hover_Background: #21272e;
-  // --sapTile_Active_Background: #21272e;
-  // --sapTile_BorderColor: transparent;
-  // --sapTile_BorderCornerRadius: 0.25rem;
-  // --sapTile_TitleTextColor: #fafafa;
-  // --sapTile_TextColor: #d3d7d9;
-  // --sapTile_IconColor: #89a3bd;
-  // --sapTile_SeparatorColor: #424f5e;
-  // --sapTile_Interactive_BorderColor: #687d94;
-  // --sapTile_OverlayBackground: rgba(0, 0, 0, 0.8);
-  // --sapTile_OverlayForegroundColor: #fafafa;
+  --sapTile_Background: #29313a;
+  --sapTile_Hover_Background: #21272e;
+  --sapTile_Active_Background: #21272e;
+  --sapTile_BorderColor: transparent;
+  --sapTile_BorderCornerRadius: 0.25rem;
+  --sapTile_TitleTextColor: #fafafa;
+  --sapTile_TextColor: #d3d7d9;
+  --sapTile_IconColor: #89a3bd;
+  --sapTile_SeparatorColor: #424f5e;
+  --sapTile_Interactive_BorderColor: #687d94;
+  --sapTile_OverlayBackground: rgba(0, 0, 0, 0.8);
+  --sapTile_OverlayForegroundColor: #fafafa;
   // --sapAccentColor1: #ffc847;
   // --sapAccentColor2: #e7a1a1;
   // --sapAccentColor3: #f37aa2;

packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss

@@ -612,18 +612,18 @@
   // --sapObjectHeader_Title_FontFamily: "72", "72full", Arial, Helvetica, sans-serif;
   // --sapObjectHeader_Subtitle_TextColor: #fff;
   // --sapBlockLayer_Background: #000;
-  // --sapTile_Background: #000;
-  // --sapTile_Hover_Background: #7a5100;
-  // --sapTile_Active_Background: #7a5100;
-  // --sapTile_BorderColor: #fff;
-  // --sapTile_BorderCornerRadius: 0.25rem;
-  // --sapTile_TitleTextColor: #fff;
-  // --sapTile_TextColor: #fff;
-  // --sapTile_IconColor: #fff;
-  // --sapTile_SeparatorColor: #fff;
-  // --sapTile_Interactive_BorderColor: #fff;
-  // --sapTile_OverlayBackground: #000;
-  // --sapTile_OverlayForegroundColor: #fff;
+  --sapTile_Background: #000;
+  --sapTile_Hover_Background: #7a5100;
+  --sapTile_Active_Background: #7a5100;
+  --sapTile_BorderColor: #fff;
+  --sapTile_BorderCornerRadius: 0.25rem;
+  --sapTile_TitleTextColor: #fff;
+  --sapTile_TextColor: #fff;
+  --sapTile_IconColor: #fff;
+  --sapTile_SeparatorColor: #fff;
+  --sapTile_Interactive_BorderColor: #fff;
+  --sapTile_OverlayBackground: #000;
+  --sapTile_OverlayForegroundColor: #fff;
   // --sapAccentColor1: #ffc847;
   // --sapAccentColor2: #ed884a;
   // --sapAccentColor3: #db9292;

packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss

@@ -612,18 +612,18 @@
   // --sapObjectHeader_Title_FontFamily: "72", "72full", Arial, Helvetica, sans-serif;
   // --sapObjectHeader_Subtitle_TextColor: #000;
   // --sapBlockLayer_Background: #fff;
-  // --sapTile_Background: #fff;
-  // --sapTile_Hover_Background: #ec8b46;
-  // --sapTile_Active_Background: #ec8b46;
-  // --sapTile_BorderColor: #000;
-  // --sapTile_BorderCornerRadius: 0.25rem;
-  // --sapTile_TitleTextColor: #000;
-  // --sapTile_TextColor: #000;
-  // --sapTile_IconColor: #000;
-  // --sapTile_SeparatorColor: #000;
-  // --sapTile_Interactive_BorderColor: #000;
-  // --sapTile_OverlayBackground: #fff;
-  // --sapTile_OverlayForegroundColor: #000;
+  --sapTile_Background: #fff;
+  --sapTile_Hover_Background: #ec8b46;
+  --sapTile_Active_Background: #ec8b46;
+  --sapTile_BorderColor: #000;
+  --sapTile_BorderCornerRadius: 0.25rem;
+  --sapTile_TitleTextColor: #000;
+  --sapTile_TextColor: #000;
+  --sapTile_IconColor: #000;
+  --sapTile_SeparatorColor: #000;
+  --sapTile_Interactive_BorderColor: #000;
+  --sapTile_OverlayBackground: #fff;
+  --sapTile_OverlayForegroundColor: #000;
   // --sapAccentColor1: #5f5800;
   // --sapAccentColor2: #5e4101;
   // --sapAccentColor3: #973333;

packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss

@@ -612,18 +612,18 @@
   // --sapObjectHeader_Title_FontFamily: "72", "72full", Arial, Helvetica, sans-serif;
   // --sapObjectHeader_Subtitle_TextColor: #6a6d70;
   // --sapBlockLayer_Background: #000;
-  // --sapTile_Background: #fff;
-  // --sapTile_Hover_Background: #f5f5f5;
-  // --sapTile_Active_Background: #f5f5f5;
-  // --sapTile_BorderColor: transparent;
-  // --sapTile_BorderCornerRadius: 0.25rem;
-  // --sapTile_TitleTextColor: #32363a;
-  // --sapTile_TextColor: #6a6d70;
-  // --sapTile_IconColor: #5a7da0;
-  // --sapTile_SeparatorColor: #ccc;
-  // --sapTile_Interactive_BorderColor: #b3b3b3;
-  // --sapTile_OverlayBackground: rgba(0, 0, 0, 0.8);
-  // --sapTile_OverlayForegroundColor: #fff;
+  --sapTile_Background: #fff;
+  --sapTile_Hover_Background: #f5f5f5;
+  --sapTile_Active_Background: #f5f5f5;
+  --sapTile_BorderColor: transparent;
+  --sapTile_BorderCornerRadius: 0.25rem;
+  --sapTile_TitleTextColor: #32363a;
+  --sapTile_TextColor: #6a6d70;
+  --sapTile_IconColor: #5a7da0;
+  --sapTile_SeparatorColor: #ccc;
+  --sapTile_Interactive_BorderColor: #b3b3b3;
+  --sapTile_OverlayBackground: rgba(0, 0, 0, 0.8);
+  --sapTile_OverlayForegroundColor: #fff;
   // --sapAccentColor1: #d08014;
   // --sapAccentColor2: #d04343;
   // --sapAccentColor3: #db1f77;

packages/styles/src/theming/sap_horizon/_css_variables.scss

@@ -612,18 +612,18 @@
   // --sapObjectHeader_Title_FontFamily: "72Black", "72Blackfull", "72", "72full", Arial, Helvetica, sans-serif;
   // --sapObjectHeader_Subtitle_TextColor: #556b82;
   // --sapBlockLayer_Background: #000;
-  // --sapTile_Background: #fff;
-  // --sapTile_Hover_Background: #eaecee;
-  // --sapTile_Active_Background: #dee2e5;
-  // --sapTile_BorderColor: transparent;
-  // --sapTile_BorderCornerRadius: 1rem;
-  // --sapTile_TitleTextColor: #1d2d3e;
-  // --sapTile_TextColor: #556b82;
-  // --sapTile_IconColor: #556b82;
-  // --sapTile_SeparatorColor: #ccc;
-  // --sapTile_Interactive_BorderColor: #b3b3b3;
-  // --sapTile_OverlayBackground: #fff;
-  // --sapTile_OverlayForegroundColor: #1d2d3e;
+  --sapTile_Background: #fff;
+  --sapTile_Hover_Background: #eaecee;
+  --sapTile_Active_Background: #dee2e5;
+  --sapTile_BorderColor: transparent;
+  --sapTile_BorderCornerRadius: 1rem;
+  --sapTile_TitleTextColor: #1d2d3e;
+  --sapTile_TextColor: #556b82;
+  --sapTile_IconColor: #556b82;
+  --sapTile_SeparatorColor: #ccc;
+  --sapTile_Interactive_BorderColor: #b3b3b3;
+  --sapTile_OverlayBackground: #fff;
+  --sapTile_OverlayForegroundColor: #1d2d3e;
   // --sapAccentColor1: #d27700;
   // --sapAccentColor2: #aa0808;
   // --sapAccentColor3: #ba066c;

packages/styles/src/theming/sap_horizon_dark/_css_variables.scss

@@ -612,18 +612,18 @@
   // --sapObjectHeader_Title_FontFamily: "72Black", "72Blackfull", "72", "72full", Arial, Helvetica, sans-serif;
   // --sapObjectHeader_Subtitle_TextColor: #8396a8;
   // --sapBlockLayer_Background: #000;
-  // --sapTile_Background: #1d232a;
-  // --sapTile_Hover_Background: #181f25;
-  // --sapTile_Active_Background: #020303;
-  // --sapTile_BorderColor: transparent;
-  // --sapTile_BorderCornerRadius: 1rem;
-  // --sapTile_TitleTextColor: #eaecee;
-  // --sapTile_TextColor: #8396a8;
-  // --sapTile_IconColor: #8396a8;
-  // --sapTile_SeparatorColor: #475566;
-  // --sapTile_Interactive_BorderColor: #5b6e85;
-  // --sapTile_OverlayBackground: #1d232a;
-  // --sapTile_OverlayForegroundColor: #eaecee;
+  --sapTile_Background: #1d232a;
+  --sapTile_Hover_Background: #181f25;
+  --sapTile_Active_Background: #020303;
+  --sapTile_BorderColor: transparent;
+  --sapTile_BorderCornerRadius: 1rem;
+  --sapTile_TitleTextColor: #eaecee;
+  --sapTile_TextColor: #8396a8;
+  --sapTile_IconColor: #8396a8;
+  --sapTile_SeparatorColor: #475566;
+  --sapTile_Interactive_BorderColor: #5b6e85;
+  --sapTile_OverlayBackground: #1d232a;
+  --sapTile_OverlayForegroundColor: #eaecee;
   // --sapAccentColor1: #ffdf72;
   // --sapAccentColor2: #ff8cb2;
   // --sapAccentColor3: #fecbda;

packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss

@@ -612,18 +612,18 @@
   // --sapObjectHeader_Title_FontFamily: "72-Bold", "72-Boldfull", "72", "72full", Arial, Helvetica, sans-serif;
   // --sapObjectHeader_Subtitle_TextColor: #fff;
   // --sapBlockLayer_Background: #000;
-  // --sapTile_Background: #000;
-  // --sapTile_Hover_Background: #795100;
-  // --sapTile_Active_Background: #795100;
-  // --sapTile_BorderColor: #fff;
-  // --sapTile_BorderCornerRadius: 0.25rem;
-  // --sapTile_TitleTextColor: #fff;
-  // --sapTile_TextColor: #fff;
-  // --sapTile_IconColor: #fff;
-  // --sapTile_SeparatorColor: #fff;
-  // --sapTile_Interactive_BorderColor: #fff;
-  // --sapTile_OverlayBackground: #000;
-  // --sapTile_OverlayForegroundColor: #fff;
+  --sapTile_Background: #000;
+  --sapTile_Hover_Background: #795100;
+  --sapTile_Active_Background: #795100;
+  --sapTile_BorderColor: #fff;
+  --sapTile_BorderCornerRadius: 0.25rem;
+  --sapTile_TitleTextColor: #fff;
+  --sapTile_TextColor: #fff;
+  --sapTile_IconColor: #fff;
+  --sapTile_SeparatorColor: #fff;
+  --sapTile_Interactive_BorderColor: #fff;
+  --sapTile_OverlayBackground: #000;
+  --sapTile_OverlayForegroundColor: #fff;
   // --sapAccentColor1: #ffc847;
   // --sapAccentColor2: #ed884a;
   // --sapAccentColor3: #db9292;

packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss

@@ -612,18 +612,18 @@
   // --sapObjectHeader_Title_FontFamily: "72-Bold", "72-Boldfull", "72", "72full", Arial, Helvetica, sans-serif;
   // --sapObjectHeader_Subtitle_TextColor: #000;
   // --sapBlockLayer_Background: #fff;
-  // --sapTile_Background: #fff;
-  // --sapTile_Hover_Background: #e97624;
-  // --sapTile_Active_Background: #e97624;
-  // --sapTile_BorderColor: #000;
-  // --sapTile_BorderCornerRadius: 0.25rem;
-  // --sapTile_TitleTextColor: #000;
-  // --sapTile_TextColor: #000;
-  // --sapTile_IconColor: #000;
-  // --sapTile_SeparatorColor: #000;
-  // --sapTile_Interactive_BorderColor: #000;
-  // --sapTile_OverlayBackground: #fff;
-  // --sapTile_OverlayForegroundColor: #000;
+  --sapTile_Background: #fff;
+  --sapTile_Hover_Background: #e97624;
+  --sapTile_Active_Background: #e97624;
+  --sapTile_BorderColor: #000;
+  --sapTile_BorderCornerRadius: 0.25rem;
+  --sapTile_TitleTextColor: #000;
+  --sapTile_TextColor: #000;
+  --sapTile_IconColor: #000;
+  --sapTile_SeparatorColor: #000;
+  --sapTile_Interactive_BorderColor: #000;
+  --sapTile_OverlayBackground: #fff;
+  --sapTile_OverlayForegroundColor: #000;
   // --sapAccentColor1: #5f5800;
   // --sapAccentColor2: #5e4101;
   // --sapAccentColor3: #973333;