feat(styles): line tiles redesign

SAP · Sep 12, 2024 · 55e514b · 55e514b
1 parent 9b45ef4
commit 55e514b
Showing 1 changed file with 26 additions and 8 deletions.
diff --git a/packages/styles/src/tile.scss b/packages/styles/src/tile.scss
@@ -4,6 +4,16 @@
 @import './mixins';
 @import './mixins/button/button-helper';
 
+$fd-tile-close-button-size: 1.375rem !default; // 22px * 22px
+$fd-tile-close-button-border-radius: 50% !default;
+$fd-tile-close-button-border: var(--sapButton_BorderColor) !default;
+$fd-tile-close-button-background: var(--sapButton_Background) !default;
+$fd-tile-close-button-icon-size: 0.75rem !default; // 12px
+$fd-tile-close-button-icon-color: var(--sapButton_TextColor) !default;
+$fd-tile-close-button-touch-area: 2rem !default; // 32px * 32px
+
+
+
 $block: #{$fd-namespace}-tile;
 
 // SIZES
@@ -110,7 +120,7 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
   @include fd-set-height($fd-tile-height);
   @include fd-set-width($fd-tile-width);
 
-  --fdGenericTileLineTileHeight: 2.25rem;
+  --fdGenericTileLineTileHeight: 2rem;
   --fdGenericTileLineTileMaxHeight: 3.25rem;
   --fdGenericTileLineHeight: 1.625rem;
   --fdGenericTileTitleHorizontalSpacing: 0.625rem;
@@ -767,15 +777,22 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
     width: auto;
     padding-block: 0;
     padding-inline: $fd-line-tile-horizontal-padding;
-    box-shadow: none;
-    background: transparent;
+    box-shadow: var(--sapContentShadow0);
+    background: var(--sapTile_Background);
+    padding: 0.5rem;
+    border-radius: var(--sapTile_BorderCornerRadius);
+    border: var(--sapTile_BorderColor);
 
     @include fd-hover() {
-      box-shadow: none;
+      box-shadow: var(--sapContentShadow2);
+      background: var(--sapTile_Hover_Background);
     }
 
     @include fd-active() {
       box-shadow: none;
+      background: var(--sapTile_Active_Background);
+      outline-offset: -0.125rem;
+      border: 2px solid var(--sapContent_FocusColor);
     }
 
     @include fd-disabled() {
@@ -806,8 +823,9 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
     .#{$block}__title,
     .#{$block}__subtitle {
       font-size: var(--sapFontSize);
+      font-family: var(--sapFontFamily);
       text-shadow: var(--sapContent_TextShadow);
-      color: var(--sapTile_TextColor);
+      color: var(--sapTile_TitleTextColor);
       line-height: var(--fdGenericTileLineHeight);
       min-width: $fd-line-tile-min-width;
     }
@@ -816,7 +834,7 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
       @include fd-ellipsis();
       @include fd-set-margin-right(var(--fdGenericTileTitleHorizontalSpacing));
 
-      color: var(--sapButton_TextColor);
+      color: var(--sapTile_TitleTextColor);
       display: inline;
       -webkit-line-clamp: initial;
     }
@@ -831,7 +849,7 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
       }
 
       .#{$block}__action-close {
-        @include fd-set-height(1.625rem);
+        @include fd-set-height(1.375rem);
         @include reset-position-absolute();
         @include fd-flex-center();
 
@@ -866,4 +884,4 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
       }
     }
   }
-}
+}