Refactor tool-finder and shared styles

packages/shared/components/FeedbackForm.tsx

@@ -108,6 +108,7 @@ export default function FeedbackForm({
         <Box
           heading={{
             tagName: "h3",
+            look: "ds-heading-03-bold",
             text: "Ihr Feedback hilft uns weiter!",
           }}
         ></Box>

packages/shared/styles.css

@@ -10,6 +10,10 @@
     font-size: 16px;
   }
 
+  body {
+    min-height: 100vh;
+  }
+
   h1 {
     @apply ds-heading-01-reg max-sm:text-5xl max-md:text-6xl;
   }
@@ -22,24 +26,12 @@
     @apply ds-heading-03-reg;
   }
 
-  a {
-    color: currentcolor;
-  }
-
   .container h1,
   .container h2,
   .container h3,
   .container p {
     max-width: 80ch;
   }
-
-  .rich-text a {
-    @apply text-link;
-  }
-
-  footer a {
-    @apply increase-tap-area whitespace-nowrap;
-  }
 }
 
 @layer components {
@@ -119,6 +111,14 @@
   .text-link:active {
     @apply text-black;
   }
+
+  .rich-text a {
+    @apply text-link;
+  }
+
+  footer a {
+    @apply increase-tap-area whitespace-nowrap;
+  }
 }
 
 @layer utilities {

packages/tool-finder/src/components/Recommendation.tsx

@@ -28,7 +28,7 @@ export default function renderRecommendation({
           tagName="p"
           text={fidelity.name}
         />
-        <Heading tagName="h3" text={tool.name} />
+        <Heading tagName="h3" look="ds-heading-03-bold" text={tool.name} />
         <div className="flex flex-col sm:flex-row gap-16 sm:gap-24">
           <RichText
             className="flex-1 [word-break:break-word]"

packages/tool-finder/src/main.tsx

@@ -1,3 +1,4 @@
+import "@digitalcheck/shared/styles.css";
 import App from "App.tsx";
 import MaintenanceModeApp from "MaintenanceModeApp";
 import React from "react";

packages/tool-finder/src/routes/InfoPage.tsx

@@ -76,6 +76,7 @@ Schleifen, uneinheitliche Rechtsbegriffe und mögliche zu vermeidende Schriftfor
           additionalClassNames={"pt-20"}
           heading={{
             tagName: "h3",
+            look: "ds-heading-03-bold",
             text: "Die Darstellungen helfen auch bei der Umsetzung",
           }}
           content={{
@@ -88,6 +89,7 @@ Schleifen, uneinheitliche Rechtsbegriffe und mögliche zu vermeidende Schriftfor
             additionalClassNames={"p-20"}
             heading={{
               tagName: "h3",
+              look: "ds-heading-03-bold",
               text: "Tipp: Schaffen Sie ein gemeinsames Verständnis",
             }}
             content={{

packages/tool-finder/src/styles.css

@@ -1,177 +1,29 @@
-@import "@digitalservice4germany/angie/fonts.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  h1 {
-    @apply ds-heading-01-reg max-sm:text-5xl max-md:text-6xl;
-  }
-
-  h2 {
-    @apply ds-heading-02-reg;
-  }
-
-  h3 {
-    @apply ds-heading-03-bold;
-  }
-
-  .rich-text {
-    max-width: 40rem;
-  }
-
-  ul {
-    list-style-type: disc;
-    padding-left: 1.5rem;
-  }
-
-  main ul li,
-  main ol li {
-    @apply pt-8;
-  }
-
-  html {
-    /* keep 16px, don't change! (e.g. angie library depends on it) */
-    font-size: 16px;
-  }
-
-  body {
-    font-family: "BundesSansWeb", "Calibri", "Verdana", "Arial", "Helvetica",
-      sans-serif;
-    font-size: 1.125rem;
-    line-height: 1.5;
-    min-height: 100vh;
-  }
-
-  a {
-    color: currentcolor;
-  }
-
-  .rich-text a {
-    @apply text-link;
-  }
-
-  main .rich-text p {
-    @apply text-lg;
-  }
-
-  footer a {
-    @apply increase-tap-area whitespace-nowrap;
-  }
-
-  /* There is a specific design request to remove the margin above lists and below small headlines */
-  .rich-text ul,
-  .rich-text .ds-label-01-bold + p {
-    @apply mt-0;
-  }
-
-  .rich-text h2:not(:first-child) {
-    @apply pt-40;
-  }
+body {
+  font-size: 1.125rem;
+  line-height: 1.5;
 }
 
-@layer components {
-  .ds-radio {
-    background: transparent; /* for old Safari */
-  }
-
-  /* Tailwind's container core plugin is disabled,
-   * because its breakpoint-based nature does not fit our needs */
-  .container {
-    @apply mx-auto;
-    max-width: 59rem;
-    padding: 2.5rem 1rem 3rem 1rem;
-    padding-left: clamp(
-      1rem,
-      5vw,
-      3rem
-    ); /* ignored when clamp is not available */
-    padding-right: clamp(
-      1rem,
-      5vw,
-      3rem
-    ); /* ignored when clamp is not available */
-  }
-
-  .ds-textarea.has-error {
-    box-shadow: inset 0 0 0 2px #b0243f;
-    background-color: #f9e5ec;
-  }
-
-  .text-link {
-    /* IE 11 and others that don't support text-decoration-line */
-    text-decoration: underline;
-    @apply text-blue-800;
-    @apply underline;
-    @apply underline-offset-4;
-    @apply decoration-1;
-  }
-
-  .text-link:visited {
-    @apply text-[#4c2c92];
-  }
-
-  /* browsers without :focus-visible support */
-  .text-link:focus {
-    @apply outline;
-    @apply outline-2;
-    @apply no-underline;
-    @apply outline-offset-1;
-    @apply text-blue-800;
-    @apply outline-blue-800;
-  }
-
-  /* reset :focus styles for browsers with :focus-visible support */
-  .text-link:not(:focus-visible):focus {
-    @apply outline-none;
-    @apply underline;
-  }
-
-  /* ignored by browsers without :focus-visible support */
-  .text-link:focus-visible {
-    @apply outline;
-    @apply outline-2;
-    @apply no-underline;
-    @apply outline-offset-1;
-    @apply !text-blue-800;
-    @apply outline-blue-800;
-  }
-
-  .text-link:active {
-    @apply text-black;
-  }
+main .rich-text p {
+  line-height: 1.75rem;
 }
 
-@layer utilities {
-  .increase-tap-area {
-    @apply relative;
-    @apply inline-block;
-  }
+/* There is a specific design request to remove the margin above lists and below small headlines */
+.rich-text ul,
+.rich-text .ds-label-01-bold + p {
+  @apply mt-0;
+}
 
-  .increase-tap-area::before {
-    content: "";
-    @apply absolute;
-    top: -0.75rem;
-    bottom: -0.75rem;
-    left: -0.75rem;
-    right: -0.75rem;
-  }
+/* Markdown only pages (imprint etc.) adaptions */
+.rich-text h2:not(:first-child) {
+  @apply pt-40;
 }
 
-@layer screen {
-  /* Only apply hover effect on devices that support it, see https://stackoverflow.com/a/28058919 */
-  @media (hover: hover) {
-    .text-link:hover {
-      @apply decoration-[3px];
-    }
-  }
+ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+}
 
-  @media (max-width: 499px) {
-    /* project-specific overwriting of angie styling */
-    .ds-heading-01-reg {
-      font-size: 2.25rem;
-      line-height: 1.2222;
-    }
-  }
+main ul li,
+main ol li {
+  @apply pt-8;
 }