style help text, space checkboxes and radios

wntrblm · Feb 26, 2024 · 3ab5699 · 3ab5699
1 parent fb8cd00
commit 3ab5699
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 55 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/docs/docs/forms.md b/docs/docs/forms.md
@@ -20,7 +20,7 @@
   <label>Readonly</label>
   <div role="group">
     <input readonly value="meep" />
-    <button type="button" class="outline"><winter-icon>content_copy</winter-icon></button>
+    <button type="button"><winter-icon>content_copy</winter-icon></button>
   </div>
   <label>Validation</label>
   <input value="meep" aria-invalid="true" />
@@ -45,6 +45,7 @@
     <input type="radio" name="language" />
     French
   </label>
+  <label>Select</label>
   <select name="favorite-cuisine" aria-label="Select your favorite cuisine..." required>
     <option selected disabled value="">
       Select your favorite cuisine...

diff --git a/src/styles/forms.css b/src/styles/forms.css
@@ -11,8 +11,13 @@ textarea {
     appearance: none;
 }
 
+/* Forms that appear within main should have some block spacing */
+main form {
+    margin-block: var(--winter-block-spacing);
+}
+
 /* Elements that create a new "block" */
-label:has(+ input) {
+label:has(+ input, + select, + textarea) {
     display: block;
 }
 
@@ -37,11 +42,16 @@ input:not(
     ),
 select,
 textarea {
+    --fg: var(--winter-input-fg);
+    --bg: var(--winter-input-bg);
+    --accent: var(--winter-input-accent);
+    --border: 1px solid var(--accent);
+
     outline: none;
-    border: var(--winter-input-border);
+    border: var(--border);
     border-radius: var(--winter-input-border-radius);
-    color: var(--winter-input-fg);
-    background: var(--winter-input-bg);
+    color: var(--fg);
+    background: var(--bg);
     font-size: var(--winter-input-font-size);
     font-weight: var(--winter-input-font-weight);
     box-shadow: var(--winter-input-shadow);
@@ -50,9 +60,9 @@ textarea {
     &:active,
     &:hover,
     &:focus {
-        color: var(--winter-input-active-fg);
-        background: var(--winter-input-active-bg);
-        border: var(--winter-input-active-border);
+        --fg: var(--winter-input-active-fg);
+        --bg: var(--winter-input-active-bg);
+        --accent: var(--winter-input-active-accent);
     }
 
     &:focus {
@@ -61,33 +71,33 @@ textarea {
     }
 
     &:disabled {
-        color: var(--winter-input-disabled-fg);
-        background: var(--winter-input-disabled-bg);
-        border: var(--winter-input-disabled-border);
+        --fg: var(--winter-input-disabled-fg);
+        --bg: var(--winter-input-disabled-bg);
+        --accent: var(--winter-input-disabled-accent);
 
         &:hover {
             cursor: not-allowed;
         }
     }
 
     &[readonly] {
-        color: var(--winter-input-readonly-fg);
-        background: var(--winter-input-readonly-bg);
-        border: var(--winter-input-readonly-border);
+        --fg: var(--winter-input-readonly-fg);
+        --bg: var(--winter-input-readonly-bg);
+        --accent: var(--winter-input-readonly-accent);
     }
 
     &:user-invalid,
     &[aria-invalid="true"] {
-        color: var(--winter-input-invalid-fg);
-        background: var(--winter-input-invalid-bg);
-        border: var(--winter-input-invalid-border);
+        --fg: var(--winter-input-invalid-fg);
+        --bg: var(--winter-input-invalid-bg);
+        --accent: var(--winter-input-invalid-accent);
     }
 
     &:user-valid,
     &[aria-invalid="false"] {
-        color: var(--winter-input-valid-fg);
-        background: var(--winter-input-valid-bg);
-        border: var(--winter-input-valid-border);
+        --fg: var(--winter-input-valid-fg);
+        --bg: var(--winter-input-valid-bg);
+        --accent: var(--winter-input-valid-accent);
     }
 }
 
@@ -157,6 +167,22 @@ input[type="radio"] {
     --unchecked-char: "\e836";
 }
 
+/* Adjacent checkboxes/radios */
+input[type="checkbox"] {
+    label:has(&) {
+        &:has(+ label > input[type="checkbox"]) {
+            margin-block-end: 0;
+        }
+    }
+}
+input[type="radio"] {
+    label:has(&) {
+        &:has(+ label > input[type="radio"]) {
+            margin-block-end: 0;
+        }
+    }
+}
+
 /* Range input */
 input[type="range"] {
     -webkit-appearance: none;
@@ -233,6 +259,35 @@ input[type="range"] {
     }
 }
 
+/* Help text */
+input:not([type="checkbox"], [type="radio"]),
+select,
+textarea {
+    &:has(+ small) {
+        margin-block-end: 0;
+    }
+    & + small {
+        display: block;
+        width: 100%;
+        margin-block-end: var(--winter-input-block-spacing);
+        color: var(--winter-input-accent);
+    }
+
+    /* Validation states */
+    &:user-invalid,
+    &[aria-invalid="true"] {
+        & + small {
+            color: var(--winter-input-invalid-accent);
+        }
+    }
+    &:user-valid,
+    &[aria-invalid="false"] {
+        & + small {
+            color: var(--winter-input-valid-accent);
+        }
+    }
+}
+
 /* Groups */
 form [role="group"] {
     display: flex;

diff --git a/src/styles/tokens.css b/src/styles/tokens.css
@@ -290,28 +290,28 @@
     /* <form> and friends */
     --winter-input-fg: var(--winter-not-quite-black);
     --winter-input-bg: var(--color-purple-50);
-    --winter-input-border: 2px solid var(--winter-purple-3);
+    --winter-input-accent: var(--winter-purple-3);
     --winter-input-border-radius: var(--winter-border-radius-s);
-    --winter-input-block-spacing: var(--winter-spacing-xs);
+    --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-disabled-fg: var(--color-gray-600);
     --winter-input-disabled-bg: var(--color-gray-50);
-    --winter-input-disabled-border: 2px solid var(--color-gray-200);
+    --winter-input-disabled-accent: var(--color-gray-200);
     --winter-input-readonly-fg: var(--color-gray-800);
     --winter-input-readonly-bg: var(--color-gray-50);
-    --winter-input-readonly-border: 2px solid var(--color-gray-500);
+    --winter-input-readonly-accent: var(--color-gray-500);
     --winter-input-active-fg: var(--color-blue-800);
     --winter-input-active-bg: var(--color-blue-50);
-    --winter-input-active-border: 2px solid var(--color-blue-500);
+    --winter-input-active-accent: var(--color-blue-500);
     --winter-input-valid-fg: var(--color-green-800);
     --winter-input-valid-bg: var(--color-green-50);
-    --winter-input-valid-border: 2px solid var(--color-green-500);
+    --winter-input-valid-accent: var(--color-green-500);
     --winter-input-invalid-fg: var(--color-red-800);
     --winter-input-invalid-bg: var(--color-red-50);
-    --winter-input-invalid-border: 2px solid var(--color-red-500);
+    --winter-input-invalid-accent: var(--color-red-500);
 
     /* Checkbox/radio */
     --winter-checkbox-size: 1.75rem;