From 27965c70a0d9ec6f919f2ccd29f9ebfc2b0c50dd Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 21 Nov 2024 11:28:42 +0100
Subject: [PATCH] feat: add headline sizes as css class to overwrite headlines
 on purpose

---
 packages/foundations/docs/FontsSizes.md          |  7 ++++---
 packages/foundations/scss/fonts/_font-sizes.scss | 16 ++++++++++++++++
 packages/foundations/scss/fonts/classes/all.scss |  5 +++++
 .../scss/fonts/classes/{ => body}/2xl.scss       |  2 +-
 .../scss/fonts/classes/{ => body}/2xs.scss       |  2 +-
 .../scss/fonts/classes/{ => body}/3xl.scss       |  2 +-
 .../scss/fonts/classes/{ => body}/3xs.scss       |  2 +-
 .../foundations/scss/fonts/classes/body/all.scss |  8 ++++++++
 .../scss/fonts/classes/{ => body}/lg.scss        |  2 +-
 .../scss/fonts/classes/{ => body}/md.scss        |  2 +-
 .../scss/fonts/classes/{ => body}/sm.scss        |  2 +-
 .../scss/fonts/classes/{ => body}/xl.scss        |  2 +-
 .../scss/fonts/classes/{ => body}/xs.scss        |  2 +-
 .../scss/fonts/classes/headline/2xl.scss         |  8 ++++++++
 .../scss/fonts/classes/headline/2xs.scss         |  8 ++++++++
 .../scss/fonts/classes/headline/3xl.scss         |  8 ++++++++
 .../scss/fonts/classes/headline/3xs.scss         |  8 ++++++++
 .../scss/fonts/classes/headline/all.scss         |  8 ++++++++
 .../scss/fonts/classes/headline/lg.scss          |  8 ++++++++
 .../scss/fonts/classes/headline/md.scss          |  8 ++++++++
 .../scss/fonts/classes/headline/sm.scss          |  8 ++++++++
 .../scss/fonts/classes/headline/xl.scss          |  8 ++++++++
 .../scss/fonts/classes/headline/xs.scss          |  8 ++++++++
 23 files changed, 122 insertions(+), 12 deletions(-)
 rename packages/foundations/scss/fonts/classes/{ => body}/2xl.scss (87%)
 rename packages/foundations/scss/fonts/classes/{ => body}/2xs.scss (87%)
 rename packages/foundations/scss/fonts/classes/{ => body}/3xl.scss (87%)
 rename packages/foundations/scss/fonts/classes/{ => body}/3xs.scss (87%)
 create mode 100644 packages/foundations/scss/fonts/classes/body/all.scss
 rename packages/foundations/scss/fonts/classes/{ => body}/lg.scss (87%)
 rename packages/foundations/scss/fonts/classes/{ => body}/md.scss (87%)
 rename packages/foundations/scss/fonts/classes/{ => body}/sm.scss (87%)
 rename packages/foundations/scss/fonts/classes/{ => body}/xl.scss (87%)
 rename packages/foundations/scss/fonts/classes/{ => body}/xs.scss (87%)
 create mode 100644 packages/foundations/scss/fonts/classes/headline/2xl.scss
 create mode 100644 packages/foundations/scss/fonts/classes/headline/2xs.scss
 create mode 100644 packages/foundations/scss/fonts/classes/headline/3xl.scss
 create mode 100644 packages/foundations/scss/fonts/classes/headline/3xs.scss
 create mode 100644 packages/foundations/scss/fonts/classes/headline/all.scss
 create mode 100644 packages/foundations/scss/fonts/classes/headline/lg.scss
 create mode 100644 packages/foundations/scss/fonts/classes/headline/md.scss
 create mode 100644 packages/foundations/scss/fonts/classes/headline/sm.scss
 create mode 100644 packages/foundations/scss/fonts/classes/headline/xl.scss
 create mode 100644 packages/foundations/scss/fonts/classes/headline/xs.scss

diff --git a/packages/foundations/docs/FontsSizes.md b/packages/foundations/docs/FontsSizes.md
index cf2d58254b7..a508779ef5d 100644
--- a/packages/foundations/docs/FontsSizes.md
+++ b/packages/foundations/docs/FontsSizes.md
@@ -63,9 +63,10 @@ All options (except the last one) set `font-size`, `line-height` and some **CSS
 
 **Note: We use `XX` here. You should replace it with a size from above.**
 
-|         CSS class         | CSS data-attribute    | SCSS                                 | Tailwind                  |
-| :-----------------------: | --------------------- | ------------------------------------ | ------------------------- |
-| `class="db-font-size-XX"` | `data-font-size="XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` |
+|           CSS class           | CSS data-attribute        | SCSS                                     | Tailwind                      |
+| :---------------------------: | ------------------------- | ---------------------------------------- | ----------------------------- |
+|   `class="db-font-size-XX"`   | `data-font-size="XX"`     | `@extend %db-overwrite-font-size-XX`     | `class="db-font-size-XX"`     |
+| `class="db-headline-size-XX"` | `data-headline-size="XX"` | `@extend %db-overwrite-headline-size-XX` | `class="db-headline-size-XX"` |
 
 #### Advanced use: CSS Custom Properties
 
diff --git a/packages/foundations/scss/fonts/_font-sizes.scss b/packages/foundations/scss/fonts/_font-sizes.scss
index 47c058bc637..d51ca93abc3 100644
--- a/packages/foundations/scss/fonts/_font-sizes.scss
+++ b/packages/foundations/scss/fonts/_font-sizes.scss
@@ -11,6 +11,17 @@
 	font-size: var(--db-type-body-font-size-#{$size});
 }
 
+@mixin set-headline-variables($size) {
+	/* Those variables are only for components to calculate heights and change icons */
+	--db-icon-font-weight: var(--db-base-headline-icon-weight-#{$size});
+	--db-icon-font-size: var(--db-base-headline-icon-font-size-#{$size});
+}
+
+@mixin set-headline-size($size) {
+	line-height: var(--db-type-headline-line-height-#{$size});
+	font-size: var(--db-type-headline-font-size-#{$size});
+}
+
 $font-sizes: "3xl", "2xl", "xl", "lg", "md", "sm", "xs", "2xs", "3xs";
 
 /**
@@ -33,6 +44,11 @@ $font-sizes: "3xl", "2xl", "xl", "lg", "md", "sm", "xs", "2xs", "3xs";
 			@include set-component-variables($font-size);
 			@include set-font-size($font-size);
 		}
+
+		%db-overwrite-headline-size-#{$font-size} {
+			@include set-headline-variables($font-size);
+			@include set-headline-size($font-size);
+		}
 	}
 }
 
diff --git a/packages/foundations/scss/fonts/classes/all.scss b/packages/foundations/scss/fonts/classes/all.scss
index 4726091d026..11e204ad992 100644
--- a/packages/foundations/scss/fonts/classes/all.scss
+++ b/packages/foundations/scss/fonts/classes/all.scss
@@ -5,4 +5,9 @@
 	[data-font-size="#{$font-size}"] {
 		@extend %db-overwrite-font-size-#{$font-size};
 	}
+
+	.db-headline-size-#{$font-size},
+	[data-headline-size="#{$font-size}"] {
+		@extend %db-overwrite-headline-size-#{$font-size};
+	}
 }
diff --git a/packages/foundations/scss/fonts/classes/2xl.scss b/packages/foundations/scss/fonts/classes/body/2xl.scss
similarity index 87%
rename from packages/foundations/scss/fonts/classes/2xl.scss
rename to packages/foundations/scss/fonts/classes/body/2xl.scss
index c3da7d185a9..82ff96edb38 100644
--- a/packages/foundations/scss/fonts/classes/2xl.scss
+++ b/packages/foundations/scss/fonts/classes/body/2xl.scss
@@ -1,4 +1,4 @@
-@use "../index";
+@use "../../index";
 
 $font-size: "2xl";
 
diff --git a/packages/foundations/scss/fonts/classes/2xs.scss b/packages/foundations/scss/fonts/classes/body/2xs.scss
similarity index 87%
rename from packages/foundations/scss/fonts/classes/2xs.scss
rename to packages/foundations/scss/fonts/classes/body/2xs.scss
index 1a3a708d453..d429dbf5a2c 100644
--- a/packages/foundations/scss/fonts/classes/2xs.scss
+++ b/packages/foundations/scss/fonts/classes/body/2xs.scss
@@ -1,4 +1,4 @@
-@use "../index";
+@use "../../index";
 
 $font-size: "2xs";
 
diff --git a/packages/foundations/scss/fonts/classes/3xl.scss b/packages/foundations/scss/fonts/classes/body/3xl.scss
similarity index 87%
rename from packages/foundations/scss/fonts/classes/3xl.scss
rename to packages/foundations/scss/fonts/classes/body/3xl.scss
index ddbc3080394..e578058b34b 100644
--- a/packages/foundations/scss/fonts/classes/3xl.scss
+++ b/packages/foundations/scss/fonts/classes/body/3xl.scss
@@ -1,4 +1,4 @@
-@use "../index";
+@use "../../index";
 
 $font-size: "3xl";
 
diff --git a/packages/foundations/scss/fonts/classes/3xs.scss b/packages/foundations/scss/fonts/classes/body/3xs.scss
similarity index 87%
rename from packages/foundations/scss/fonts/classes/3xs.scss
rename to packages/foundations/scss/fonts/classes/body/3xs.scss
index 8450ac49fae..8ddeb7c6194 100644
--- a/packages/foundations/scss/fonts/classes/3xs.scss
+++ b/packages/foundations/scss/fonts/classes/body/3xs.scss
@@ -1,4 +1,4 @@
-@use "../index";
+@use "../../index";
 
 $font-size: "3xs";
 
diff --git a/packages/foundations/scss/fonts/classes/body/all.scss b/packages/foundations/scss/fonts/classes/body/all.scss
new file mode 100644
index 00000000000..5c428b938be
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/body/all.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+@each $font-size in index.$font-sizes {
+	.db-font-size-#{$font-size},
+	[data-font-size="#{$font-size}"] {
+		@extend %db-overwrite-font-size-#{$font-size};
+	}
+}
diff --git a/packages/foundations/scss/fonts/classes/lg.scss b/packages/foundations/scss/fonts/classes/body/lg.scss
similarity index 87%
rename from packages/foundations/scss/fonts/classes/lg.scss
rename to packages/foundations/scss/fonts/classes/body/lg.scss
index f275294106a..ecfef78ac05 100644
--- a/packages/foundations/scss/fonts/classes/lg.scss
+++ b/packages/foundations/scss/fonts/classes/body/lg.scss
@@ -1,4 +1,4 @@
-@use "../index";
+@use "../../index";
 
 $font-size: "lg";
 
diff --git a/packages/foundations/scss/fonts/classes/md.scss b/packages/foundations/scss/fonts/classes/body/md.scss
similarity index 87%
rename from packages/foundations/scss/fonts/classes/md.scss
rename to packages/foundations/scss/fonts/classes/body/md.scss
index c8586c24cac..f63601ae83d 100644
--- a/packages/foundations/scss/fonts/classes/md.scss
+++ b/packages/foundations/scss/fonts/classes/body/md.scss
@@ -1,4 +1,4 @@
-@use "../index";
+@use "../../index";
 
 $font-size: "md";
 
diff --git a/packages/foundations/scss/fonts/classes/sm.scss b/packages/foundations/scss/fonts/classes/body/sm.scss
similarity index 87%
rename from packages/foundations/scss/fonts/classes/sm.scss
rename to packages/foundations/scss/fonts/classes/body/sm.scss
index 0877f1f2228..64bae8a30f6 100644
--- a/packages/foundations/scss/fonts/classes/sm.scss
+++ b/packages/foundations/scss/fonts/classes/body/sm.scss
@@ -1,4 +1,4 @@
-@use "../index";
+@use "../../index";
 
 $font-size: "sm";
 
diff --git a/packages/foundations/scss/fonts/classes/xl.scss b/packages/foundations/scss/fonts/classes/body/xl.scss
similarity index 87%
rename from packages/foundations/scss/fonts/classes/xl.scss
rename to packages/foundations/scss/fonts/classes/body/xl.scss
index 7bd9d5cb04a..32fa1688238 100644
--- a/packages/foundations/scss/fonts/classes/xl.scss
+++ b/packages/foundations/scss/fonts/classes/body/xl.scss
@@ -1,4 +1,4 @@
-@use "../index";
+@use "../../index";
 
 $font-size: "xl";
 
diff --git a/packages/foundations/scss/fonts/classes/xs.scss b/packages/foundations/scss/fonts/classes/body/xs.scss
similarity index 87%
rename from packages/foundations/scss/fonts/classes/xs.scss
rename to packages/foundations/scss/fonts/classes/body/xs.scss
index ddc0838271a..780fc93baeb 100644
--- a/packages/foundations/scss/fonts/classes/xs.scss
+++ b/packages/foundations/scss/fonts/classes/body/xs.scss
@@ -1,4 +1,4 @@
-@use "../index";
+@use "../../index";
 
 $font-size: "xs";
 
diff --git a/packages/foundations/scss/fonts/classes/headline/2xl.scss b/packages/foundations/scss/fonts/classes/headline/2xl.scss
new file mode 100644
index 00000000000..6af89e9fd68
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/headline/2xl.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+$font-size: "2xl";
+
+.db-headline-size-#{$font-size},
+[data-headline-size="#{$font-size}"] {
+	@extend %db-overwrite-headline-size-#{$font-size};
+}
diff --git a/packages/foundations/scss/fonts/classes/headline/2xs.scss b/packages/foundations/scss/fonts/classes/headline/2xs.scss
new file mode 100644
index 00000000000..e2fd486ceda
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/headline/2xs.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+$font-size: "2xs";
+
+.db-headline-size-#{$font-size},
+[data-headline-size="#{$font-size}"] {
+	@extend %db-overwrite-headline-size-#{$font-size};
+}
diff --git a/packages/foundations/scss/fonts/classes/headline/3xl.scss b/packages/foundations/scss/fonts/classes/headline/3xl.scss
new file mode 100644
index 00000000000..c63b5ce52c4
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/headline/3xl.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+$font-size: "3xl";
+
+.db-headline-size-#{$font-size},
+[data-headline-size="#{$font-size}"] {
+	@extend %db-overwrite-headline-size-#{$font-size};
+}
diff --git a/packages/foundations/scss/fonts/classes/headline/3xs.scss b/packages/foundations/scss/fonts/classes/headline/3xs.scss
new file mode 100644
index 00000000000..928daff042f
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/headline/3xs.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+$font-size: "3xs";
+
+.db-headline-size-#{$font-size},
+[data-headline-size="#{$font-size}"] {
+	@extend %db-overwrite-headline-size-#{$font-size};
+}
diff --git a/packages/foundations/scss/fonts/classes/headline/all.scss b/packages/foundations/scss/fonts/classes/headline/all.scss
new file mode 100644
index 00000000000..526979df19e
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/headline/all.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+@each $font-size in index.$font-sizes {
+	.db-headline-size-#{$font-size},
+	[data-headline-size="#{$font-size}"] {
+		@extend %db-overwrite-headline-size-#{$font-size};
+	}
+}
diff --git a/packages/foundations/scss/fonts/classes/headline/lg.scss b/packages/foundations/scss/fonts/classes/headline/lg.scss
new file mode 100644
index 00000000000..53ed8590c9a
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/headline/lg.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+$font-size: "lg";
+
+.db-headline-size-#{$font-size},
+[data-headline-size="#{$font-size}"] {
+	@extend %db-overwrite-headline-size-#{$font-size};
+}
diff --git a/packages/foundations/scss/fonts/classes/headline/md.scss b/packages/foundations/scss/fonts/classes/headline/md.scss
new file mode 100644
index 00000000000..341e7dcdc25
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/headline/md.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+$font-size: "md";
+
+.db-headline-size-#{$font-size},
+[data-headline-size="#{$font-size}"] {
+	@extend %db-overwrite-headline-size-#{$font-size};
+}
diff --git a/packages/foundations/scss/fonts/classes/headline/sm.scss b/packages/foundations/scss/fonts/classes/headline/sm.scss
new file mode 100644
index 00000000000..62694548109
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/headline/sm.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+$font-size: "sm";
+
+.db-headline-size-#{$font-size},
+[data-headline-size="#{$font-size}"] {
+	@extend %db-overwrite-headline-size-#{$font-size};
+}
diff --git a/packages/foundations/scss/fonts/classes/headline/xl.scss b/packages/foundations/scss/fonts/classes/headline/xl.scss
new file mode 100644
index 00000000000..db85fb9151a
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/headline/xl.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+$font-size: "xl";
+
+.db-headline-size-#{$font-size},
+[data-headline-size="#{$font-size}"] {
+	@extend %db-overwrite-headline-size-#{$font-size};
+}
diff --git a/packages/foundations/scss/fonts/classes/headline/xs.scss b/packages/foundations/scss/fonts/classes/headline/xs.scss
new file mode 100644
index 00000000000..84b7c0de3b3
--- /dev/null
+++ b/packages/foundations/scss/fonts/classes/headline/xs.scss
@@ -0,0 +1,8 @@
+@use "../../index";
+
+$font-size: "xs";
+
+.db-headline-size-#{$font-size},
+[data-headline-size="#{$font-size}"] {
+	@extend %db-overwrite-headline-size-#{$font-size};
+}