Move some form styles to base.scss (#2327)

* Move fieldset + label styles to base.scss * Create giant-boxes-vanish.md * Move ::placeholder
primer · Dec 2, 2022 · 8cf13e9 · 8cf13e9
1 parent f0e6eab
commit 8cf13e9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/.changeset/giant-boxes-vanish.md b/.changeset/giant-boxes-vanish.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Move `fieldset` + `label` styles to `base.scss`
diff --git a/src/base/base.scss b/src/base/base.scss
@@ -34,6 +34,22 @@ strong {
   font-weight: $font-weight-bold;
 }
 
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+label {
+  font-weight: $font-weight-bold;
+}
+
+// Custom styling for HTML5 validation bubbles (WebKit only)
+::placeholder {
+  color: var(--color-fg-subtle);
+  opacity: 1; // override opacity in normalize.css
+}
+
 // Horizontal lines
 //
 // TODO-MDO: Remove `.rule` from everywhere and replace with `<hr>`s

diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
@@ -5,16 +5,6 @@
 //
 // Overrides for common inputs for easier styling.
 
-fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-label {
-  font-weight: $font-weight-bold;
-}
-
 .form-control,
 .form-select {
   // stylelint-disable-next-line primer/spacing
@@ -96,12 +86,6 @@ textarea.form-control {
   }
 }
 
-// Custom styling for HTML5 validation bubbles (WebKit only)
-::placeholder {
-  color: var(--color-fg-subtle);
-  opacity: 1; // override opacity in normalize.css
-}
-
 // Mini inputs, to match .minibutton
 .input-sm {
   min-height: $size-4;