clean up headings on all pages, add centralized file to deal style al…

…l headings

README.md

@@ -369,6 +369,8 @@ helper files in our `\styles` folder:
   notable the color palettes that are used everywhere. Try to avoid hard-coded color values inside some local SCSS file.
 - **variables/\_z-index-variables.scss** contains all z-indices ordered by the highest value first. This is used to keep
   track of which element should be on top of which element in one place.
+- **\_headings.scss** contains all heading styles used in the application. This is used to keep track of all heading styles in
+  one place. They are based on the design system of the Canton of Zurich [(see Figma)](https://www.figma.com/design/MsFtPBJrdzPPevIAZwtxDn/GB3-mit-KTZH-Design-System?node-id=10-5055&node-type=canvas&t=BCmKrCIFSSdxjNgz-0).
 
 To use those global styles within a local SCSS file use the following syntax (or part of it):
 

src/app/data-catalogue/components/data-catalogue-detail-page/data-catalogue-detail-page.component.html

@@ -19,7 +19,7 @@
           />
         }
         <div>
-          <h1 class="data-catalogue-detail-page__title__text mat-headline-4">{{ baseMetadataInformation.itemTitle }}</h1>
+          <h2 class="ktzh-h2-big">{{ baseMetadataInformation.itemTitle }}</h2>
           @if (baseMetadataInformation.shortDescription) {
             <p
               class="data-catalogue-detail-page__description mat-body"

src/app/data-catalogue/components/data-catalogue-detail-page/data-catalogue-detail-page.component.scss

@@ -33,10 +33,6 @@
       .data-catalogue-detail-page__title__image {
         max-width: 368px;
       }
-
-      .data-catalogue-detail-page__title__text {
-        margin-bottom: 12px;
-      }
     }
 
     .data-catalogue-detail-page__category {

src/app/data-catalogue/components/data-catalogue-overview/data-catalogue-overview.component.html

@@ -41,7 +41,6 @@
               <overview-search-result-item [item]="row"></overview-search-result-item>
             </cdk-cell>
           </ng-container>
-
           <!-- Header and Row Declarations -->
           <cdk-row *cdkRowDef="let row; columns: ['data']"></cdk-row>
         </cdk-table>

src/app/data-catalogue/components/data-display-section/data-display-section.component.html

@@ -1,5 +1,5 @@
 <div class="data-display-section">
-  <h2 class="data-display-section__title">{{ sectionTitle }}</h2>
+  <h3 class="ktzh-h3-medium--bold">{{ sectionTitle }}</h3>
   <div class="data-display-section__content">
     <ng-content></ng-content>
   </div>

src/app/data-catalogue/components/data-display-section/data-display-section.component.scss

@@ -5,10 +5,6 @@
 }
 
 .data-display-section {
-  .data-display-section__title {
-    font-size: 24px;
-  }
-
   .data-display-section__content {
     display: flex;
     flex-flow: column;

src/app/data-catalogue/components/dataset-detail/dataset-element-detail/dataset-element-detail.component.html

@@ -1,4 +1,4 @@
-<h3 class="dataset-element-detail">{{ layer.name }}</h3>
+<h3 class="ktzh-h3-medium--thin">{{ layer.name }}</h3>
 <data-display [elements]="layerListData"></data-display>
 <cdk-accordion [multi]="true">
   <accordion-item header="Attribute" variant="grey">

src/app/data-catalogue/components/dataset-detail/dataset-element-detail/dataset-element-detail.component.scss

@@ -1,6 +0,0 @@
-@use 'variables/ktzh-design-variables' as ktzh-variables;
-
-.dataset-element-detail {
-  font-size: 20px;
-  font-weight: bold;
-}

src/app/map/components/drawing-edit-overlay/drawing-edit/line-edit/line-edit.component.html

@@ -1,4 +1,4 @@
-<h2>Umrandung</h2>
+<h3 class="ktzh-h3-medium--bold">Umrandung</h3>
 <slider-edit
   (updateSliderEvent)="updateValue('strokeWidth', $event)"
   [sliderValue]="lineStyle.strokeWidth"

src/app/map/components/drawing-edit-overlay/drawing-edit/point-edit/point-edit.component.html

@@ -1,4 +1,4 @@
-<h2>Umrandung</h2>
+<h3 class="ktzh-h3-medium--bold">Umrandung</h3>
 <slider-edit
   (updateSliderEvent)="updateValue('strokeWidth', $event)"
   [sliderValue]="pointStyle.strokeWidth"
@@ -13,14 +13,14 @@ <h2>Umrandung</h2>
 <color-picker-edit (updateColorEvent)="updateValue('strokeColor', $event)" [fillColor]="pointStyle.strokeColor" title="Strichfarbe">
 </color-picker-edit>
 <mat-divider class="divider"></mat-divider>
-<h2>Füllung</h2>
+<h3 class="ktzh-h3-medium--bold">Füllung</h3>
 <slider-edit (updateSliderEvent)="updateValue('fillOpacity', $event)" [sliderValue]="pointStyle.fillOpacity" title="Deckkraft">
 </slider-edit>
 <color-picker-edit (updateColorEvent)="updateValue('fillColor', $event)" [fillColor]="pointStyle.fillColor" title="Füllfarbe">
 </color-picker-edit>
 <mat-divider class="divider"></mat-divider>
 
-<h2>Grösse</h2>
+<h3 class="ktzh-h3-medium--bold">Grösse</h3>
 <slider-edit
   (updateSliderEvent)="updateValue('pointRadius', $event)"
   [sliderValue]="pointStyle.pointRadius"

src/app/map/components/drawing-edit-overlay/drawing-edit/polygon-edit/polygon-edit.component.html

@@ -1,4 +1,4 @@
-<h2>Umrandung</h2>
+<h3 class="ktzh-h3-medium--bold">Umrandung</h3>
 <slider-edit
   (updateSliderEvent)="updateValue('strokeWidth', $event)"
   [sliderValue]="polygonStyle.strokeWidth"
@@ -13,7 +13,7 @@ <h2>Umrandung</h2>
 <color-picker-edit (updateColorEvent)="updateValue('strokeColor', $event)" [fillColor]="polygonStyle.strokeColor" title="Strichfarbe">
 </color-picker-edit>
 <mat-divider class="divider"></mat-divider>
-<h2>Füllung</h2>
+<h3 class="ktzh-h3-medium--bold">Füllung</h3>
 <slider-edit (updateSliderEvent)="updateValue('fillOpacity', $event)" [sliderValue]="polygonStyle.fillOpacity" title="Deckkraft">
 </slider-edit>
 <color-picker-edit (updateColorEvent)="updateValue('fillColor', $event)" [fillColor]="polygonStyle.fillColor" title="Füllfarbe">

src/app/map/components/drawing-edit-overlay/drawing-edit/text-edit/text-edit.component.html

@@ -1,4 +1,4 @@
-<h2>Text</h2>
+<h3 class="ktzh-h3-medium--bold">Text</h3>
 <mat-form-field appearance="outline" class="label-text">
   <mat-label>Beschriftung</mat-label>
   <input
@@ -11,7 +11,7 @@ <h2>Text</h2>
   />
 </mat-form-field>
 <mat-divider class="divider"></mat-divider>
-<h2>Schrift</h2>
+<h3 class="ktzh-h3-medium--bold">Schrift</h3>
 <slider-edit
   (updateSliderEvent)="updateValue('fontSize', $event)"
   [sliderValue]="textStyle.fontSize | number"
@@ -24,7 +24,7 @@ <h2>Schrift</h2>
 <color-picker-edit (updateColorEvent)="updateValueWithDelay('fontColor', $event)" [fillColor]="textStyle.fontColor" title="Farbe">
 </color-picker-edit>
 <mat-divider class="divider"></mat-divider>
-<h2>Halo</h2>
+<h3 class="ktzh-h3-medium--bold">Halo</h3>
 <slider-edit
   (updateSliderEvent)="updateValue('haloRadius', $event)"
   [sliderValue]="textStyle.haloRadius | number"
@@ -37,7 +37,7 @@ <h2>Halo</h2>
 <color-picker-edit (updateColorEvent)="updateValue('haloColor', $event)" [fillColor]="textStyle.haloColor" title="Farbe">
 </color-picker-edit>
 <mat-divider class="divider"></mat-divider>
-<h2>Versatz</h2>
+<h3 class="ktzh-h3-medium--bold">Versatz</h3>
 <slider-edit
   (updateSliderEvent)="updateValue('labelYOffset', $event)"
   [sliderValue]="textStyle.labelYOffset | number"

src/app/map/components/map-controls/zoom-controls/zoom-controls.component.html

@@ -6,16 +6,8 @@
       color="accent"
       class="zoom-controls__button"
       data-test-id="map-locate-me"
-      [matTooltip]="
-        this.geolocationState.loadingState === 'error'
-          ? this.geolocationState.errorReason || 'Ein Fehler ist aufgetreten'
-          : tooltipText.locateMe
-      "
-      [attr.aria-label]="
-        this.geolocationState.loadingState === 'error'
-          ? this.geolocationState.errorReason || 'Ein Fehler ist aufgetreten'
-          : tooltipText.locateMe
-      "
+      [matTooltip]="locationButtonTooltipText"
+      [attr.aria-label]="locationButtonTooltipText"
       [disabled]="this.geolocationState.loadingState === 'loading'"
       [ngClass]="{'zoom-controls--hidden': mapUiState?.hideUiElements}"
     >

src/app/map/components/map-controls/zoom-controls/zoom-controls.component.ts

@@ -31,6 +31,7 @@ export class ZoomControlsComponent implements OnInit, OnDestroy {
   @Input() public showLocateMeButton!: boolean;
 
   public tooltipText = TOOLTIP_TEXT;
+  public locationButtonTooltipText = this.tooltipText.locateMe;
 
   public isMaxZoomedIn: boolean = false;
   public isMaxZoomedOut: boolean = false;
@@ -70,7 +71,19 @@ export class ZoomControlsComponent implements OnInit, OnDestroy {
   private initSubscriptions() {
     this.subscriptions.add(this.isMaxZoomedIn$.pipe(tap((value) => (this.isMaxZoomedIn = value))).subscribe());
     this.subscriptions.add(this.isMaxZoomedOut$.pipe(tap((value) => (this.isMaxZoomedOut = value))).subscribe());
-    this.subscriptions.add(this.geolocationState$.pipe(tap((value) => (this.geolocationState = value))).subscribe());
+    this.subscriptions.add(
+      this.geolocationState$
+        .pipe(
+          tap((value) => {
+            this.geolocationState = value;
+            this.locationButtonTooltipText =
+              value.loadingState === 'error'
+                ? (this.geolocationState.errorReason ?? 'Ein Fehler ist aufgetreten')
+                : this.tooltipText.locateMe;
+          }),
+        )
+        .subscribe(),
+    );
     this.subscriptions.add(this.mapUiState$.pipe(tap((value) => (this.mapUiState = value))).subscribe());
     this.subscriptions.add(this.screenHeight$.pipe(tap((value) => (this.screenHeight = value))).subscribe());
   }

src/app/map/components/map-overlay/map-overlay.component.html

@@ -6,7 +6,7 @@
   class="map-overlay"
 >
   <mat-card-header class="map-overlay__header">
-    <h1 class="map-overlay__header__title">{{ this.overlayTitle }}</h1>
+    <h3 class="ktzh-h3-small-big map-overlay__header__title">{{ this.overlayTitle }}</h3>
     <button (click)="onClose()" mat-icon-button>
       <mat-icon>close</mat-icon>
     </button>

src/app/privacy/components/privacy-content/privacy-content.component.html

@@ -1,11 +1,11 @@
-<h2>Umfang der Verarbeitung personenbezogener Daten</h2>
+<h3 class="ktzh-h3-medium--bold">Umfang der Verarbeitung personenbezogener Daten</h3>
 <p>
   Wir verarbeiten personenbezogene Daten, soweit dies zur Bereitstellung einer funktionsfähigen Website sowie unserer Inhalte und Leistungen
   erforderlich ist. Die Verarbeitung personenbezogener Daten erfolgt regelmässig nur nach Einwilligung. Diese ist ausdrücklich zu erteilen
   und gilt bis zu ihrem Widerruf.
 </p>
 <p>Die personenbezogenen Daten der betroffenen Person werden gelöscht oder gesperrt, sobald der Zweck der Speicherung entfällt.</p>
-<h2>Beschreibung und Umfang der Datenverarbeitung</h2>
+<h3 class="ktzh-h3-medium--bold">Beschreibung und Umfang der Datenverarbeitung</h3>
 <p>
   Bei jedem Aufruf unserer Internetseite erfasst unser System automatisiert Daten und Informationen vom Computersystem des aufrufenden
   Rechners.
@@ -21,7 +21,7 @@ <h2>Beschreibung und Umfang der Datenverarbeitung</h2>
   oder des Nutzers zu ermöglichen. Die Daten werden gelöscht, sobald sie für die Erreichung des Zweckes ihrer Erhebung nicht mehr
   erforderlich sind.
 </p>
-<h2>Verwendung von Cookies</h2>
+<h3 class="ktzh-h3-medium--bold">Verwendung von Cookies</h3>
 <p>
   Unsere Webseite verwendet Cookies. Bei Cookies handelt es sich um Textdateien, die im Internetbrowser bzw. vom Internetbrowser auf dem
   Computersystem der Nutzerin oder des Nutzers gespeichert werden. Ruft eine Nutzerin oder ein Nutzer eine Website auf, so kann ein Cookie
@@ -36,7 +36,7 @@ <h2>Verwendung von Cookies</h2>
   gelöscht werden. Dies kann auch automatisiert erfolgen. Werden Cookies für unsere Website deaktiviert, können möglicherweise nicht mehr
   alle Funktionen der Website vollumfänglich genutzt werden.
 </p>
-<h2>Registrierung</h2>
+<h3 class="ktzh-h3-medium--bold">Registrierung</h3>
 <p>
   Auf unserer Internetseite bieten wir den Nutzerinnen und Nutzern die Möglichkeit, sich unter Angabe personenbezogener Daten zu
   registrieren. Die Daten werden dabei in eine Eingabemaske eingegeben und an uns übermittelt und gespeichert. Eine Weitergabe der Daten an
@@ -47,7 +47,7 @@ <h2>Registrierung</h2>
   <li>Datum und Uhrzeit der Registrierung</li>
 </ul>
 <p>Die Daten werden gelöscht, sobald sie für die Erreichung des Zweckes ihrer Erhebung nicht mehr erforderlich sind.</p>
-<h2>YouTube</h2>
+<h3 class="ktzh-h3-medium--bold">YouTube</h3>
 <p>
   Videos, die auf unserem Webauftritt angezeigt werden, sind via der YouTube-API eingebunden. Nutzende werden auf unserem Webauftritt
   vorgängig um ihr Einverständnis gefragt, bevor eine Verbindung zu YouTube aufgebaut und das Video abgespielt wird.

src/app/shared/components/accordion-item/accordion-item.component.html

@@ -12,14 +12,19 @@
   <div class="accordion-item__content" [ngClass]="'accordion-item__content--' + variant">
     <div
       (click)="accordionItem.toggle()"
-      class="accordion-item__content__header mat-h2"
+      class="accordion-item__content__header"
       [ngClass]="{
         'accordion-item__content__header--opened': accordionItem.expanded,
         'accordion-item__content__header--grey': variant === 'grey',
         'accordion-item__content__header--light': variant === 'light',
       }"
     >
-      <span [ngClass]="{'accordion-item__content__header__text': screenMode === 'mobile' && !accordionItem.expanded}">{{ header }}</span>
+      <h4
+        class="ktzh-h4-bigger-regular"
+        [ngClass]="{'accordion-item__content__header__text': screenMode === 'mobile' && !accordionItem.expanded}"
+      >
+        {{ header }}
+      </h4>
       <span class="accordion-item__content__header__icon-wrapper">
         <mat-icon [svgIcon]="accordionItem.expanded ? 'ktzh_remove' : 'ktzh_add'"></mat-icon>
       </span>

src/app/shared/components/contact-details/contact-details.component.html

@@ -1,5 +1,5 @@
 <div class="contact-details">
-  <h3 class="contact-details__title">Amt für Raumentwicklung - Abteilung Geoinformation</h3>
+  <h3 class="ktzh-h3-small-big">Amt für Raumentwicklung - Abteilung Geoinformation</h3>
   <div class="contact-details__addresses">
     <contact-detail
       [contactType]="'address'"
@@ -12,7 +12,7 @@ <h3 class="contact-details__title">Amt für Raumentwicklung - Abteilung Geoinfor
   </div>
   <cdk-accordion>
     <accordion-item header="Für Medien">
-      <h2 class="contact-details__name">
+      <h3 class="ktzh-h3-small-big">
         <a
           href="https://www.zh.ch/de/baudirektion/medienstelle.html"
           rel="noopener noreferrer"
@@ -21,7 +21,7 @@ <h2 class="contact-details__name">
         >
           Medienstelle der Baudirektion
         </a>
-      </h2>
+      </h3>
       <div class="contact-details__addresses">
         <contact-detail
           [contactType]="'address'"

src/app/shared/components/contact-details/contact-details.component.scss

@@ -6,20 +6,6 @@
   display: flex;
   flex-direction: column;
 
-  .contact-details__title {
-    font-size: 24px;
-    font-weight: 400;
-    letter-spacing: normal;
-    font-family: ktzh-variables.$zh-font-family-bold;
-    line-height: 24px;
-  }
-
-  .contact-details__name {
-    font-size: 24px;
-    font-weight: 400;
-    line-height: 24px;
-  }
-
   .contact-details__addresses {
     display: flex;
     flex-flow: row wrap;

src/app/shared/components/data-catalogue-overview-item/overview-search-result-item.component.html

@@ -43,7 +43,13 @@
   </div>
 
   <div class="overview-search-result-item__link__wrapper">
-    <a *ngIf="item.url.isInternal; else externalLink" mat-icon-button [routerLink]="item.url.path" clickOnSpaceBar>
+    <a
+      *ngIf="item.url.isInternal; else externalLink"
+      mat-icon-button
+      [routerLink]="item.url.path"
+      clickOnSpaceBar
+      [attr.aria-label]="item.title + ' ' + item.type + ' Details öffnen'"
+    >
       <mat-icon svgIcon="ktzh_arrow_right"></mat-icon>
     </a>
     <ng-template #externalLink>
@@ -54,6 +60,7 @@
         clickOnSpaceBar
         target="_blank"
         rel="noopener noreferrer"
+        [attr.aria-label]="'Details zu {{item.title}} {{item.type}} öffnen'"
       >
         <mat-icon class="overview-search-result-item__link__wrapper__link__icon--external" svgIcon="ktzh_arrow_right"></mat-icon>
       </a>

src/app/shared/components/footer/main-footer.component.html

@@ -3,7 +3,7 @@
 </page-section>
 <footer class="main-footer">
   <div class="main-footer__content">
-    <h2 class="main-footer__content__title mat-headline-3">Kanton Zürich</h2>
+    <h2 class="ktzh-h2-small-huge">Kanton Zürich</h2>
     <div class="main-footer__content__links">
       <span>
         <strong>&copy; 2023 Kanton Zürich</strong>

src/app/shared/components/footer/main-footer.component.scss

@@ -15,10 +15,6 @@
     width: 100%;
     row-gap: 24px;
 
-    .main-footer__content__title {
-      margin: 0;
-    }
-
     .main-footer__content__links {
       display: flex;
       flex-flow: row wrap;

src/app/shared/components/hero-header/hero-header.component.html

@@ -1,6 +1,8 @@
 <div class="hero-header">
   <img aria-hidden="true" alt="Kt. ZH Logo" class="hero-header__image" ngSrc="/assets/images/ktzh_inverted.svg" height="180" width="184" />
-  <h1 class="hero-header__title mat-headline-3" [ngClass]="{'hero-header__title--mobile': screenMode === 'mobile'}">{{ heroTitle }}</h1>
+  <h1 class="ktzh-h1-giant" [ngClass]="{'ktzh-h1-giant--mobile': screenMode === 'mobile'}">
+    {{ heroTitle }}
+  </h1>
   <p *ngIf="screenMode !== 'mobile'" class="hero-header__intro-paragraph">
     {{ heroText }}
   </p>

src/app/shared/components/hero-header/hero-header.component.scss

@@ -15,16 +15,6 @@ $column-gap: 8px;
     width: max(71px, $left-offset);
   }
 
-  & .hero-header__title {
-    margin-bottom: 0;
-    word-wrap: break-word;
-    font-size: 72px;
-
-    &--mobile {
-      font-size: 32px;
-    }
-  }
-
   & .hero-header__intro-paragraph {
     font-family: ktzh-variables.$zh-font-family-bold;
     font-size: large;

src/app/shared/components/link-list/link-list.component.html

@@ -1,4 +1,4 @@
 <div *ngFor="let linksGroup of this.linksGroups" class="link-list">
-  <h3 class="link-list__title">{{ linksGroup.label }}</h3>
+  <h3 class="ktzh-h3-medium--bold">{{ linksGroup.label }}</h3>
   <link-list-item [links]="linksGroup.links"></link-list-item>
 </div>

src/app/shared/components/link-list/link-list.component.scss

@@ -4,12 +4,4 @@
   &:not(:first-of-type) {
     margin-top: 30px;
   }
-
-  .link-list__title {
-    font-size: 20px;
-    font-weight: 500;
-    letter-spacing: 0.25px;
-    font-family: ktzh-variables.$zh-font-family-bold;
-    line-height: 20px;
-  }
 }