diff --git a/.changeset/tidy-paws-type.md b/.changeset/tidy-paws-type.md new file mode 100644 index 0000000000..f7786ff832 --- /dev/null +++ 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 index 08d9941626..b9332d933f 100644 --- 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'); } }