Use "padding" instead of "spacing"

source/css/content.css

@@ -15,8 +15,8 @@
   --code-color: var(--color-black);
   --code-border-radius: var(--component-border-radius);
   --code-bg-color: var(--component-bg-color);
-  --code-spacing-x: calc(var(--font-size) * .4);
-  --code-spacing-y: calc(var(--font-size) * .2);
+  --code-padding-x: calc(var(--font-size) * .4);
+  --code-padding-y: calc(var(--font-size) * .2);
 
   --headings-font-family: var(--font-system);
   --headings-font-weight: var(--font-weight-light);
@@ -32,14 +32,14 @@
 
   --hr-border-width: 1px;
   --hr-border-color: var(--component-border-color);
-  --hr-spacing: var(--component-spacing-big);
+  --hr-margin: var(--component-spacing-big);
 
   --kbd-font-size: 90%;
   --kbd-color: var(--color-white);
   --kbd-border-radius: var(--component-border-radius);
   --kbd-bg-color: var(--color-black);
-  --kbd-spacing-x: calc(var(--font-size) * .4);
-  --kbd-spacing-y: calc(var(--font-size) * .2);
+  --kbd-padding-x: calc(var(--font-size) * .4);
+  --kbd-padding-y: calc(var(--font-size) * .2);
 
   --link-color: var(--state-primary);
   --link-text-decoration: none;
@@ -48,8 +48,8 @@
 
   --mark-color: inherit;
   --mark-bg-color: var(--color-yellow);
-  --mark-spacing-x: calc(var(--font-size) * .4);
-  --mark-spacing-y: calc(var(--font-size) * .2);
+  --mark-padding-x: calc(var(--font-size) * .4);
+  --mark-padding-y: calc(var(--font-size) * .2);
 
   --placeholder-color: var(--state-secondary);
 
@@ -121,7 +121,7 @@ code {
   color: var(--code-color);
   background-color: var(--code-bg-color);
   border-radius: var(--code-border-radius);
-  padding: var(--code-spacing-y) var(--code-spacing-x);
+  padding: var(--code-padding-y) var(--code-padding-x);
 }
 
 del {
@@ -157,7 +157,7 @@ h6 { font-size: var(--headings-font-size-h6); }
 hr {
   border: none;
   border-top: solid var(--hr-border-width) var(--hr-border-color);
-  margin: var(--hr-spacing) 0;
+  margin: var(--hr-margin) 0;
 }
 
 img {
@@ -176,13 +176,13 @@ kbd {
   color: var(--kbd-color);
   background-color: var(--kbd-bg-color);
   border-radius: var(--kbd-border-radius);
-  padding: var(--kbd-spacing-y) var(--kbd-spacing-x);
+  padding: var(--kbd-padding-y) var(--kbd-padding-x);
 }
 
 mark {
   color: var(--mark-color);
   background-color: var(--mark-bg-color);
-  padding: var(--mark-spacing-y) var(--mark-spacing-x);
+  padding: var(--mark-padding-y) var(--mark-padding-x);
 }
 
 p {

source/css/dropdowns.css

@@ -15,8 +15,8 @@
   --dropdown-box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
   --dropdown-divider-border-color: var(--component-border-color);
   --dropdown-divider-border-width: var(--component-border-width);
-  --dropdown-spacing-x: 1rem;
-  --dropdown-spacing-y: .25rem;
+  --dropdown-padding-x: 1rem;
+  --dropdown-padding-y: .25rem;
   --dropdown-z-index: 100;
 }
 
@@ -53,7 +53,7 @@
   border-radius: var(--dropdown-border-radius);
   box-shadow: var(--dropdown-box-shadow);
   display: none;
-  padding: calc(var(--dropdown-spacing-y) / 2) 0;
+  padding: calc(var(--dropdown-padding-y) / 2) 0;
   overflow-y: auto;
 }
 
@@ -75,7 +75,7 @@
   position: relative;
   color: var(--dropdown-color);
   text-decoration: none;
-  padding: var(--dropdown-spacing-y) calc(var(--dropdown-spacing-x) + .5em);
+  padding: var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + .5em);
   display: block;
   white-space: nowrap;
   overflow-x: hidden;
@@ -94,7 +94,7 @@
 
 .dropdown-menu a.checked::before {
   position: absolute;
-  left: calc(var(--dropdown-spacing-x) / 2 - .1em);
+  left: calc(var(--dropdown-padding-x) / 2 - .1em);
   content: '✓';
   font-family: var(--font-system);
   font-weight: 600;
@@ -103,5 +103,5 @@
 .dropdown-menu hr {
   width: 100%;
   border-top: solid var(--dropdown-divider-border-width) var(--dropdown-divider-border-color);
-  margin: calc(var(--dropdown-spacing-y) / 2) 0;
+  margin: calc(var(--dropdown-padding-y) / 2) 0;
 }

source/css/forms.css

@@ -3,8 +3,8 @@
   --fieldset-border-color: var(--component-border-color);
   --fieldset-border-width: var(--component-border-width);
   --fieldset-border-radius: var(--component-border-radius);
-  --fieldset-spacing-x: var(--component-spacing);
-  --fieldset-spacing-y: var(--component-spacing);
+  --fieldset-padding-x: calc(var(--component-spacing) * 1.5);
+  --fieldset-padding-y: var(--component-spacing);
 
   --input-font-family: inherit;
   --input-font-size: var(--font-size);
@@ -36,7 +36,7 @@
 fieldset {
   border: solid var(--fieldset-border-width) var(--fieldset-border-color);
   border-radius: var(--fieldset-border-radius);
-  padding: var(--component-spacing) calc(var(--component-spacing) * 1.5);
+  padding: var(--fieldset-padding-y) var(--fieldset-padding-x);
   margin-bottom: 1rem;
 }
 

source/css/tabs.css

@@ -9,14 +9,14 @@
   --tab-color-hover: var(--link-color-hover);
   --tab-color-active: var(--color-white);
   --tab-color-disabled: var(--state-secondary);
-  --tab-spacing-x: var(--component-spacing);
-  --tab-spacing-y: calc(var(--component-spacing) / 2);
+  --tab-padding-x: var(--component-spacing);
+  --tab-padding-y: calc(var(--component-spacing) / 2);
 
   --tab-pane-border-color: var(--component-border-color);
   --tab-pane-border-radius: var(--component-border-radius);
   --tab-pane-border-width: var(--component-border-width);
-  --tab-pane-spacing-x: var(--component-spacing);
-  --tab-pane-spacing-y: var(--component-spacing);
+  --tab-pane-padding-x: var(--component-spacing);
+  --tab-pane-padding-y: var(--component-spacing);
 }
 
 .tabs {
@@ -34,7 +34,7 @@
   text-decoration: none;
   background-color: var(--tab-bg-color);
   border-radius: var(--tab-border-radius);
-  padding: var(--tab-spacing-y) var(--tab-spacing-x);
+  padding: var(--tab-padding-y) var(--tab-padding-x);
   display: inline-block;
 }
 
@@ -59,7 +59,7 @@
 .tabs-pane {
   border: solid var(--tab-pane-border-width) var(--tab-pane-border-color);
   border-radius: .25rem;
-  padding: var(--tab-pane-spacing-y) var(--tab-pane-spacing-x);
+  padding: var(--tab-pane-padding-y) var(--tab-pane-padding-x);
 }
 
 .tabs-pane:not(.active) {