Use light page background for text layouts

2026-06-24 12:04:23 +02:00
parent 7df605aa4e
commit 833544d206
2 changed files with 11 additions and 1 deletions
@@ -6,7 +6,7 @@
  <title>Styleguide – Pattern Text Layouts</title>
  <link rel="stylesheet" href="../styleguide.css">
 </head>
-<body>
+<body class="sg-page-text-layouts">

  <h1 class="sg-main-heading">Pattern – Text Layouts</h1>
  <section id="pattern-text-layouts">
@@ -2,6 +2,16 @@
 /* Patterns: Text Layouts                                    */
 /* ========================================================= */

+.sg-page-text-layouts {
+  background: var(--surface-form-preview);
+  color: var(--color-font-dark);
+}
+
+.sg-page-text-layouts .sg-main-heading,
+.sg-page-text-layouts .sg-preview-label {
+  color: var(--color-font-dark);
+}
+
 .sg-text-layout-pattern {
  display: flex;
  flex-direction: column;