From 3331893b767c197924cb417a6c337c42b97427c9 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 26 Mar 2025 14:33:19 +0100
Subject: [PATCH] Move zen styles anchor to components and form (in)valid to
 form styles.

---
 assets/sass/_zen.scss                      | 62 ----------------------
 assets/sass/base/forms/_forms.scss         | 45 ++++++++++++++--
 assets/sass/components/anchor/_anchor.scss | 35 ++++++++++++
 assets/sass/styles.scss                    |  1 +
 4 files changed, 76 insertions(+), 67 deletions(-)
 create mode 100644 assets/sass/components/anchor/_anchor.scss

diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
index 1d25dad..03dc271 100644
--- a/assets/sass/_zen.scss
+++ b/assets/sass/_zen.scss
@@ -137,70 +137,8 @@ article {
   }
 }
 
-// Anchor
-
-.anchor {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: baseline;
-  gap: .5rem;
-
-  a {
-    opacity: 0;
-    text-decoration: none;
-  }
-
-  &:focus-visible,
-  &:hover {
-    a {
-      opacity: .4;
-
-      &:focus-visible,
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  p:has(+ &) {
-    margin-block-end: 0;
-  }
-}
-
 // Search
 
 .search-text {
   font-size: var(--fs-l);
 }
-
-// Form
-
-main {
-  input,
-  textarea {
-    &:not(:placeholder-shown):valid {
-      background-color: var(--color-status-bg);
-    }
-
-    &:not(:placeholder-shown):invalid {
-      background-color: var(--color-error-bg);
-    }
-
-    &:focus:invalid {
-      background-color: var(--color-warning-bg);
-    }
-  }
-}
-
-.js-submitted {
-  input,
-  textarea {
-    &:valid {
-      background-color: var(--color-status-bg);
-    }
-
-    &:invalid {
-      background-color: var(--color-error-bg);
-    }
-  }
-}
diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss
index 68508d2..32dd60d 100644
--- a/assets/sass/base/forms/_forms.scss
+++ b/assets/sass/base/forms/_forms.scss
@@ -12,9 +12,14 @@ select {
 }
 
 label {
-  display: block;
   font-weight: var(--fw-bold);
 
+  // Display as block if before input.
+  &:has(+ input),
+  &:has(+ textarea){
+    display: block;
+  }
+
   // Mark field as required if needed.
   &:has(+ :required) {
     &::after {
@@ -24,6 +29,31 @@ label {
   }
 }
 
+// Valid and invalid state.
+input,
+textarea {
+  &:user-valid {
+    border-color: var(--color-success);
+    border-style: solid;
+    background-color: var(--color-success-bg);
+  }
+
+  &:focus:user-valid {
+    border-color: transparent;
+  }
+
+  &:user-invalid {
+    border-color: var(--color-error);
+    border-style: solid;
+    background-color: var(--color-error-bg);
+  }
+
+  &:focus:user-invalid {
+    border-color: transparent;
+    background-color: var(--color-warning-bg);
+  }
+}
+
 // Set max text line width for readability.
 input,
 label,
@@ -36,12 +66,18 @@ fieldset {
   border: 1px solid var(--color-border);
 }
 
-input {
+// Make field where you enter more info a bit wider.
+[type='email'],
+[type='password'],
+[type='range'],
+[type='search'],
+[type='url'] {
   // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
   // stylelint-disable-next-line function-name-case
   width: Min(20em, 100%);
 }
 
+// Make field where you enter more info a bit wider.
 [type='text'],
 textarea {
   // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
@@ -49,10 +85,9 @@ textarea {
   width: Min(30em, 100%);
 }
 
-
 // Make sure textareas without a rows attribute are not tiny.
 textarea:not([rows]) {
-  min-height: 10em;
+  min-height: 7lh;
 }
 
 // For forms with multibple fields show submit button below the form.
@@ -63,7 +98,7 @@ textarea {
   }
 }
 
-// For forms none mobile with single field add space between it and the submit button.
+// For forms on mobile with single field add space between it and the submit button.
 @include respond-to(s) {
   input:only-of-type {
     &:has(+ [type='submit']) {
diff --git a/assets/sass/components/anchor/_anchor.scss b/assets/sass/components/anchor/_anchor.scss
new file mode 100644
index 0000000..3d5b595
--- /dev/null
+++ b/assets/sass/components/anchor/_anchor.scss
@@ -0,0 +1,35 @@
+// Anchor
+//
+// For heading anchor links. See render-heading.html.example.
+
+.anchor,
+%anchor {
+  --anchor-gap: .5rem;
+  --anchor-opacity: .4;
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: baseline;
+  gap: var(--anchor-gap);
+
+  a {
+    opacity: 0;
+    text-decoration: none;
+  }
+
+  &:focus-visible,
+  &:hover {
+    a {
+      opacity: var(--anchor-opacity);
+
+      &:focus-visible,
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  p:has(+ &) {
+    margin-block-end: 0;
+  }
+}
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index 4a5fb03..ccd1bf4 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -29,6 +29,7 @@
 // Design components are reusable designs that can be applied using just the CSS
 // class names specified in the component.
 
+@import 'components/anchor/anchor';
 @import 'components/box/box';
 @import 'components/button/button';
 @import 'components/cards/cards';