chore(styles): used tokens for legend styling (#4092)

Co-authored-by: Oliver Schürch <[email protected]> Co-authored-by: Travaglini Alessio <[email protected]> Co-authored-by: Alizé Debray <[email protected]>
swisspost · Dec 4, 2024 · 534a2ec · 534a2ec
1 parent f854d6e
commit 534a2ec
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/.changeset/tidy-paws-type.md b/.changeset/tidy-paws-type.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated fieldset-legend styles with Design Tokens.
diff --git a/packages/styles/src/elements/fieldset-legend.scss b/packages/styles/src/elements/fieldset-legend.scss
@@ -4,15 +4,19 @@
 tokens.$default-map: elements.$post-legend;
 
 legend {
+  margin-bottom: tokens.get('legend-margin-block-end');
   font-weight: tokens.get('legend-font-weight');
   line-height: tokens.get('legend-line-height');
   width: 100%;
 
   &.large {
     font-size: tokens.get('legend-large-font-size');
-    //margin-block-start: tokens.get('legend-large-margin-block-start');
+    padding-block-start: tokens.get('legend-large-padding-block-start');
+    padding-block-end: calc(
+      tokens.get('legend-large-padding-block-end') - tokens.get('legend-large-border-width')
+    );
     margin-block-end: tokens.get('legend-large-margin-block-end');
-    padding-block-end: tokens.get('legend-large-padding-block-end');
-    //border-bottom: tokens.get('legend-large-border-bottom');
+    border-bottom: tokens.get('legend-large-border-width') tokens.get('legend-large-border-color')
+      tokens.get('legend-large-border-style');
   }
 }