Form label styling

wntrblm · Feb 27, 2024 · 1339a82 · 1339a82
1 parent 57c477c
commit 1339a82
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 8 deletions.
diff --git a/dist/winter.css b/dist/winter.css
diff --git a/dist/winter.css.map b/dist/winter.css.map
diff --git a/src/styles/buttons.css b/src/styles/buttons.css
@@ -19,7 +19,7 @@ input[type="button"] {
     justify-content: center;
 
     min-width: 8ch;
-    /* min-height: 2.2rem; */
+    min-height: 2.2rem;
     text-align: center;
     line-height: inherit;
     vertical-align: middle;

diff --git a/src/styles/forms.css b/src/styles/forms.css
@@ -11,7 +11,7 @@ textarea {
     appearance: none;
 }
 
-/* Forms that appear within main should have some block spacing */
+/* Spacing between form elements */
 main form {
     margin-block: var(--winter-block-spacing);
 
@@ -48,7 +48,7 @@ main form {
 }
 
 /* Elements that create a new "block" */
-label:has(+ input, + select, + textarea) {
+label:has(+ input, + select, + textarea, + [role="group"]) {
     display: block;
 }
 
@@ -62,7 +62,17 @@ label:has(input) {
     margin-block-end: var(--winter-input-block-spacing);
 }
 
+/* Labels */
+
+label:not(:has(input[type="checkbox"], input[type="radio"])) {
+    color: var(--winter-label-fg);
+    font-weight: var(--winter-label-font-weight);
+    font-family: var(--winter-label-font-family);
+    font-size: var(--winter-label-font-size);
+}
+
 /* "Normal" form controls */
+
 input:not(
         [type="range"],
         [type="checkbox"],
@@ -341,4 +351,12 @@ form [role="group"] {
             border-right: none;
         }
     }
+
+    /* Remove min-height on buttons so they're the same size as their input */
+    & button,
+    input[type="submit"],
+    input[type="button"],
+    input[type="reset"] {
+        min-height: unset;
+    }
 }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
@@ -295,7 +295,7 @@
     --winter-input-block-spacing: var(--winter-spacing-s);
     --winter-input-font-weight: var(--winter-font-weight-m);
     --winter-input-font-size: var(--winter-font-size-m);
-    --winter-input-padding: 0.12em 0.5em;
+    --winter-input-padding: 0.2em 0.5em;
 
     --winter-input-disabled-fg: var(--color-gray-600);
     --winter-input-disabled-bg: var(--color-gray-50);
@@ -313,6 +313,12 @@
     --winter-input-invalid-bg: var(--color-red-50);
     --winter-input-invalid-accent: var(--color-red-500);
 
+    /* Labels */
+    --winter-label-font-size: inherit;
+    --winter-label-font-family: var(--winter-font-decorative);
+    --winter-label-font-weight: var(--winter-font-weight-semibold);
+    --winter-label-fg: currentColor;
+
     /* Checkbox/radio */
     --winter-checkbox-size: 1.75rem;
     --winter-checkbox-fg: var(--winter-purple-2);