From 5c4bbcd72ffa17e2a3bf27e2cb578150c126d7c2 Mon Sep 17 00:00:00 2001 From: Muhammad Bashir Date: Mon, 30 Sep 2024 08:24:06 +0200 Subject: [PATCH] chore: foundations typography heading h1 h6 (#3534) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: karimim Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/eleven-keys-work.md | 6 ++ packages/styles/src/elements/_index.scss | 1 + packages/styles/src/elements/heading.scss | 62 +++++++++++++ packages/styles/src/layouts/portal/_type.scss | 89 ------------------- packages/styles/src/layouts/portal/index.scss | 3 - packages/styles/src/variables/_heading.scss | 51 ----------- packages/styles/src/variables/_index.scss | 1 - 7 files changed, 69 insertions(+), 144 deletions(-) create mode 100644 .changeset/eleven-keys-work.md create mode 100644 packages/styles/src/elements/heading.scss delete mode 100644 packages/styles/src/layouts/portal/_type.scss delete mode 100644 packages/styles/src/variables/_heading.scss diff --git a/.changeset/eleven-keys-work.md b/.changeset/eleven-keys-work.md new file mode 100644 index 0000000000..73645aa75e --- /dev/null +++ b/.changeset/eleven-keys-work.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': patch +'@swisspost/design-system-styles': patch +--- + +Updated the style of headings (h1-h6). diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss index 76b6e5d06c..1cebd63b2c 100644 --- a/packages/styles/src/elements/_index.scss +++ b/packages/styles/src/elements/_index.scss @@ -1,2 +1,3 @@ @use 'reset'; @use 'body'; +@use 'heading'; diff --git a/packages/styles/src/elements/heading.scss b/packages/styles/src/elements/heading.scss new file mode 100644 index 0000000000..6d2f76e011 --- /dev/null +++ b/packages/styles/src/elements/heading.scss @@ -0,0 +1,62 @@ +@use '../functions/tokens'; +@use '../tokens/elements'; + +tokens.$default-map: elements.$post-heading; + +h1, +.h1, +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { + line-height: tokens.get('post-heading', 'line-height'); + font-weight: tokens.get('post-heading', 'font-weight'); +} + +h1, +.h1 { + font-size: tokens.get('post-h1', 'font-size'); + margin-block-start: tokens.get('post-h1', 'margin-block-start'); + margin-block-end: tokens.get('post-h1', 'margin-block-end'); +} + +h2, +.h2 { + font-size: tokens.get('post-h2', 'font-size'); + margin-block-start: tokens.get('post-h2', 'margin-block-start'); + margin-block-end: tokens.get('post-h2', 'margin-block-end'); +} + +h3, +.h3 { + font-size: tokens.get('post-h3', 'font-size'); + margin-block-start: tokens.get('post-h3', 'margin-block-start'); + margin-block-end: tokens.get('post-h3', 'margin-block-end'); +} + +h4, +.h4 { + font-size: tokens.get('post-h4', 'font-size'); + margin-block-start: tokens.get('post-h4', 'margin-block-start'); + margin-block-end: tokens.get('post-h4', 'margin-block-end'); +} + +h5, +.h5 { + font-size: tokens.get('post-h5', 'font-size'); + margin-block-start: tokens.get('post-h5', 'margin-block-start'); + margin-block-end: tokens.get('post-h5', 'margin-block-end'); +} + +h6, +.h6 { + font-size: tokens.get('post-h6', 'font-size'); + margin-block-start: tokens.get('post-h6', 'margin-block-start'); + margin-block-end: tokens.get('post-h6', 'margin-block-end'); +} diff --git a/packages/styles/src/layouts/portal/_type.scss b/packages/styles/src/layouts/portal/_type.scss deleted file mode 100644 index 48046149fd..0000000000 --- a/packages/styles/src/layouts/portal/_type.scss +++ /dev/null @@ -1,89 +0,0 @@ -@use 'sass:map'; - -@use './../../themes/bootstrap/core' as *; - -@use './../../variables/spacing'; -@use './../../variables/type'; -@use './../../variables/components/paragraph'; -@use './../../mixins/type' as type-mx; -@use './../../placeholders/text'; - -@mixin styles { - h1, - .h1, - h2, - .h2 { - // H1 and H2 have hardcoded margins instead of textsize base margins - margin-bottom: map.get(spacing.$post-sizes, 'small-large'); - - @include media-breakpoint-up(md) { - margin-bottom: map.get(spacing.$post-sizes, 'large'); - } - } - - h1, - .h1 { - @extend %font-curve-big; - } - - h2, - .h2 { - @extend %font-curve-large; - } - - h3, - .h3, - h4, - .h4 { - @extend %font-curve-medium; - } - - h3, - .h3, - h4, - .h4, - p { - @extend %text-bottom-spacer; - } - - h3, - .h3, - h4, - .h4, - h5, - .h5 { - margin-top: map.get(spacing.$post-sizes, 'bigger-big'); - - // Temporary resolution to avoid margin-top spreading inside Notification Overlay - .modal-dialog & { - margin-top: 0; - } - } - - h5, - .h5, - p { - @extend %font-curve-regular; - } - - p { - margin-top: 0; - } - - h5, - .h5 { - margin-bottom: 0; - } - - h3, - .h3, - h5, - .h5 { - font-weight: type.$font-weight-bold; - } - - .lead { - @include type-mx.font-curve('bigger-regular'); - margin-bottom: paragraph.$text-bottom-space; - } -} diff --git a/packages/styles/src/layouts/portal/index.scss b/packages/styles/src/layouts/portal/index.scss index f8b4dd1614..41ae37c888 100644 --- a/packages/styles/src/layouts/portal/index.scss +++ b/packages/styles/src/layouts/portal/index.scss @@ -1,5 +1,2 @@ @use './grid'; @use './subnavigation'; -@use './type'; - -@include type.styles; diff --git a/packages/styles/src/variables/_heading.scss b/packages/styles/src/variables/_heading.scss deleted file mode 100644 index cade3dc4ed..0000000000 --- a/packages/styles/src/variables/_heading.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use './type'; - -// Intended for use with min-width, mobile first, bottom up approach -$heading-sizes-h1: ( - xs: type.$font-size-28, - sm: type.$font-size-32, - md: type.$font-size-40, - xxl: type.$font-size-48, -); - -$heading-sizes-h2: ( - xs: type.$font-size-24, - sm: type.$font-size-28, - md: type.$font-size-32, - xxl: type.$font-size-40, -); - -$heading-sizes-h3: ( - xs: type.$font-size-18, - sm: type.$font-size-20, - md: type.$font-size-24, - xxl: type.$font-size-28, -); - -$heading-sizes-h4: ( - xs: type.$font-size-16, - sm: type.$font-size-18, - md: type.$font-size-20, - xxl: type.$font-size-24, -); - -$heading-sizes-h5: ( - xs: type.$font-size-16, - md: type.$font-size-18, - xxl: type.$font-size-20, -); - -$heading-sizes-h6: ( - xs: type.$font-size-14, - md: type.$font-size-16, - xxl: type.$font-size-18, -); - -$heading-sizes: ( - 'heading-sizes-h1': $heading-sizes-h1, - 'heading-sizes-h2': $heading-sizes-h2, - 'heading-sizes-h3': $heading-sizes-h3, - 'heading-sizes-h4': $heading-sizes-h4, - 'heading-sizes-h5': $heading-sizes-h5, - 'heading-sizes-h6': $heading-sizes-h6, -); diff --git a/packages/styles/src/variables/_index.scss b/packages/styles/src/variables/_index.scss index 8241fd2d61..aff8c98c7e 100644 --- a/packages/styles/src/variables/_index.scss +++ b/packages/styles/src/variables/_index.scss @@ -8,7 +8,6 @@ @forward 'commons'; @forward 'elevation'; @forward 'grid'; -@forward 'heading'; @forward 'icons'; @forward 'options'; @forward 'spacing';