From 965d32f0c65692933fb5644b6fd5d5706045f64e Mon Sep 17 00:00:00 2001
From: "pearu.sarv" <pearu.sarv@twn.ee>
Date: Wed, 18 Mar 2026 16:11:26 +0200
Subject: [PATCH] fix(card): fix card padding overrides, add padding to tab
 content #184

---
 .../components/cards/card/_card-mixins.scss   | 76 +++++++++++--------
 .../card-content/card-content.component.scss  |  6 +-
 .../card-header/card-header.component.scss    |  6 +-
 .../card/stories/card-story-templates.ts      |  4 +-
 .../navigation/tabs/tabs.component.html       |  6 +-
 5 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/community/components/cards/card/_card-mixins.scss b/community/components/cards/card/_card-mixins.scss
index 8d3b50def..b6be043c7 100644
--- a/community/components/cards/card/_card-mixins.scss
+++ b/community/components/cards/card/_card-mixins.scss
@@ -22,13 +22,33 @@ $card-colors: (
 );
 
 $card-spacings: ("xs", "sm", "md", "lg", "none");
-$spacing-directions: (
-  "vertical",
-  "horizontal",
-  "top",
-  "bottom",
-  "left",
-  "right"
+$class-properties: (
+  "": (
+    "top",
+    "bottom",
+    "left",
+    "right",
+  ),
+  "-vertical": (
+    "top",
+    "bottom",
+  ),
+  "-horizontal": (
+    "left",
+    "right",
+  ),
+  "-top": (
+    "top",
+  ),
+  "-bottom": (
+    "bottom",
+  ),
+  "-left": (
+    "left",
+  ),
+  "-right": (
+    "right",
+  ),
 );
 
 $accent-border-colors: (
@@ -70,46 +90,38 @@ $accent-border-colors: (
   }
 }
 
-@mixin card-spacing-value($spacing, $direction: null) {
-  // css private variable name
-  $private-var-name: if(
-    $direction,
-    --_card-padding-#{$direction},
-    --_card-padding
-  );
-
+@mixin card-spacing-value($spacing, $direction) {
   // assigns TEDI variable to private variable, 0 if none
   @if ($spacing == "none") {
-    #{$private-var-name}: 0;
+    --_card-padding-#{$direction}: 0;
   } @else {
     $tedi-var-name: if($spacing== "md", "md-default", $spacing);
-    #{$private-var-name}: var(--card-padding-#{$tedi-var-name});
+    --_card-padding-#{$direction}: var(--card-padding-#{$tedi-var-name});
   }
 }
 
 @mixin card-spacings {
   @each $spacing in $card-spacings {
     &--spacing-#{$spacing} {
-      @include card-spacing-value($spacing);
+      @each $direction in ("top", "bottom", "left", "right") {
+        @include card-spacing-value($spacing, $direction);
+      }
     }
   }
 }
 
-@mixin card-padding-overrides {
-  & {
-    --_card-padding-vertical: var(--_card-padding);
-    --_card-padding-horizontal: var(--_card-padding);
-    --_card-padding-top: var(--_card-padding-vertical);
-    --_card-padding-bottom: var(--_card-padding-vertical);
-    --_card-padding-left: var(--_card-padding-horizontal);
-    --_card-padding-right: var(--_card-padding-horizontal);
-  }
+@mixin card-padding {
+  padding: var(--_card-padding-top, 0) var(--_card-padding-right, 0)
+    var(--_card-padding-bottom, 0) var(--_card-padding-left, 0);
+}
 
-  @each $spacing in $card-spacings {
-    @each $direction in $spacing-directions {
-      &--padding-#{$direction}-#{$spacing},
-      &--padding-#{$spacing} {
-        @include card-spacing-value($spacing, $direction);
+@mixin card-padding-overrides {
+  @each $class-suffix, $direction-properties in $class-properties {
+    @each $direction in $direction-properties {
+      @each $spacing in $card-spacings {
+        &--padding#{$class-suffix}-#{$spacing} {
+          @include card-spacing-value($spacing, $direction);
+        }
       }
     }
   }
diff --git a/community/components/cards/card/card-content/card-content.component.scss b/community/components/cards/card/card-content/card-content.component.scss
index ec0a0d8b0..553182763 100644
--- a/community/components/cards/card/card-content/card-content.component.scss
+++ b/community/components/cards/card/card-content/card-content.component.scss
@@ -1,9 +1,11 @@
+@use "../card-mixins";
+
 .tedi-card-content {
   display: block;
   background-color: var(--_card-bg);
   border: 1px solid var(--_card-border);
-  padding: var(--_card-padding-top) var(--_card-padding-right)
-    var(--_card-padding-bottom) var(--_card-padding-left);
+  @include card-mixins.card-padding;
+  @include card-mixins.card-padding-overrides;
   flex: 1 1 0;
 
   &--auto-width {
diff --git a/community/components/cards/card/card-header/card-header.component.scss b/community/components/cards/card/card-header/card-header.component.scss
index db6aca040..771c2def3 100644
--- a/community/components/cards/card/card-header/card-header.component.scss
+++ b/community/components/cards/card/card-header/card-header.component.scss
@@ -1,8 +1,10 @@
+@use "../card-mixins";
+
 .tedi-card-header {
   border: 1px solid var(--_card-border);
   background: var(--_card-bg);
-  padding: var(--_card-padding-top) var(--_card-padding-right)
-    var(--_card-padding-bottom) var(--_card-padding-left);
+  @include card-mixins.card-padding;
+  @include card-mixins.card-padding-overrides;
 
   &--primary {
     --_card-bg: var(--card-background-primary);
diff --git a/community/components/cards/card/stories/card-story-templates.ts b/community/components/cards/card/stories/card-story-templates.ts
index 257b735b1..0ec46c407 100644
--- a/community/components/cards/card/stories/card-story-templates.ts
+++ b/community/components/cards/card/stories/card-story-templates.ts
@@ -319,9 +319,9 @@ export const renderCardPaddingsStory = () => {
         Top LG
       </tedi-card-header>
 
-      <tedi-card-header [padding]="'xs'">
+      <tedi-card-content [padding]="'xs'">
         Full XS padding
-      </tedi-card-header>
+      </tedi-card-content>
 
       <tedi-card-content background="secondary">
         Parent has left XS, right NONE, Top NONE.
diff --git a/community/components/navigation/tabs/tabs.component.html b/community/components/navigation/tabs/tabs.component.html
index 4ec3726fb..f0158c562 100644
--- a/community/components/navigation/tabs/tabs.component.html
+++ b/community/components/navigation/tabs/tabs.component.html
@@ -17,7 +17,11 @@
     </div>
   </tedi-card-content>
 
-  <tedi-card-content role="tabpanel" [attr.aria-labelledby]="activeTabId()">
+  <tedi-card-content
+    role="tabpanel"
+    [attr.aria-labelledby]="activeTabId()"
+    [padding]="{ horizontal: 'md', vertical: 'lg' }"
+  >
     @if (activeTabContent(); as activeContent) {
       <ng-container *ngTemplateOutlet="activeContent" />
     }