Spacing guidelines (#9)

* set spacing system to an 8px base unit

* add ds css variables for spacing system

* general spacing updates

* aditional spacing updates

* fix button size error

* correct button size

Author: josuebran

src/css/base.css

@@ -26,7 +26,7 @@ body {
   tab-size: 4;
   word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
   /* ds-text-body */
-  font-size: 1rem;
+  font-size: var(--ds-space-2);
   font-weight: 400;
 }
 

src/css/breadcrumbs.css

@@ -29,7 +29,7 @@ a + .breadcrumbs {
 
 .breadcrumbs li::after {
   content: "/";
-  padding: 0 0.5rem;
+  padding: 0  var(--ds-space-1);
 }
 
 .breadcrumbs li:last-of-type::after {

src/css/doc.css

@@ -7,7 +7,7 @@
   max-width: var(--doc-max-width);
   padding-right: calc(24 / var(--rem-base) * 1rem);
   padding-left: calc(24 / var(--rem-base) * 1rem);
-  padding-bottom: 4rem;
+  padding-bottom: var(--ds-space-10);
 }
 
 @media screen and (min-width: 1024px) {
@@ -217,11 +217,11 @@
 }
 
 .doc .float-gap.right {
-  margin: 0 1rem 1rem 0;
+  margin: 0 var(--ds-space-2) var(--ds-space-2) 0;
 }
 
 .doc .float-gap.left {
-  margin: 0 0 1rem 1rem;
+  margin: 0 0 var(--ds-space-2) var(--ds-space-2);
 }
 
 .doc .float-group::after {
@@ -283,7 +283,7 @@
 
 .doc table.tableblock th,
 .doc table.tableblock td {
-  padding: 0.5rem;
+  padding: var(--ds-space-1h) var(--ds-space-2);
 }
 
 .doc table.tableblock,
@@ -376,7 +376,7 @@
 }
 
 .doc .admonitionblock {
-  margin: 1.4rem 0 0;
+  margin: var(--ds-space-3) 0 0;
 }
 
 .doc .admonitionblock p,
@@ -400,7 +400,7 @@
 }
 
 .doc .admonitionblock td.content {
-  padding: 1rem 1rem 0.75rem;
+  padding: var(--ds-space-2);
   background: var(--admonition-background);
   width: 100%;
   word-wrap: anywhere;
@@ -411,12 +411,12 @@
   top: 0;
   left: 0;
   font-size: calc(15 / var(--rem-base) * 1rem);
-  padding: 0 0.5rem;
-  height: 1.25rem;
+  padding: 0 var(--ds-space-1);
+  height: var(--ds-space-2h);
   line-height: 1;
   font-weight: var(--admonition-label-font-weight);
   text-transform: uppercase;
-  border-radius: 0.45rem;
+  border-radius: var(--ds-space-1);
   transform: translate(-0.5rem, -50%);
 }
 
@@ -509,13 +509,13 @@
 }
 
 .doc .quoteblock {
-  padding: 0.25rem 2rem 1.25rem;
+  padding: var(--ds-space-h) var(--ds-space-4) var(--ds-space-2h);
 }
 
 .doc .quoteblock .attribution {
   color: var(--quote-attribution-font-color);
   font-size: calc(15 / var(--rem-base) * 1rem);
-  margin-top: 0.75rem;
+  margin-top: var(--ds-space-1h);
 }
 
 .doc .quoteblock blockquote {
@@ -532,7 +532,7 @@
 
 .doc .verseblock {
   font-size: 1em;
-  padding: 1rem 2rem;
+  padding: var(--ds-space-2) var(--ds-space-4);
 }
 
 .doc .verseblock pre {
@@ -543,7 +543,7 @@
 .doc ol,
 .doc ul {
   margin: 0;
-  padding: 0 0 0 2rem;
+  padding: 0 0 0 var(--ds-space-4);
 }
 
 .doc ul.checklist,
@@ -558,7 +558,7 @@
 
 .doc ul.no-bullet,
 .doc ol.unnumbered {
-  padding-left: 1.25rem;
+  padding-left: var(--ds-space-2h);
 }
 
 .doc ul.unstyled,
@@ -613,7 +613,7 @@
 }
 
 .doc ul.checklist {
-  padding-left: 1.75rem;
+  padding-left: var(--ds-space-2h);
 }
 
 .doc ul.checklist p > i.fa-check-square-o:first-child,
@@ -641,12 +641,12 @@
 .doc .ulist .dlist,
 .doc .ulist .olist,
 .doc .ulist .ulist {
-  margin-top: 0.5rem;
+  margin-top: var(--ds-space-1);
 }
 
 .doc .olist li + li,
 .doc .ulist li + li {
-  margin-top: 0.5rem;
+  margin-top: var(--ds-space-1);
 }
 
 .doc .ulist .listingblock,
@@ -674,29 +674,30 @@
 
 .doc .tableblock caption {
   text-align: left;
+  margin-bottom: var(--ds-space-3);
 }
 
 .doc .ulist .title,
 .doc .olist .title {
   font-style: var(--caption-font-style);
   font-weight: var(--caption-font-weight);
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--ds-space-h);
 }
 
 .doc .imageblock .title {
-  margin-top: 0.5rem;
+  margin-top: var(--ds-space-1);
   padding-bottom: 0;
 }
 
 .doc details {
-  margin-left: 1rem;
+  margin-left: var(--ds-space-2);
 }
 
 .doc details > summary {
   display: block;
   position: relative;
   line-height: var(--doc-line-height);
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--ds-space-1);
 }
 
 .doc details > summary::-webkit-details-marker {
@@ -710,27 +711,27 @@
   border-width: 0.3em 0 0.3em 0.5em;
   position: absolute;
   top: calc((var(--doc-line-height) * 0.5 - 0.3) * 1em);
-  left: -1rem;
+  left: calc(var(--ds-space-2) * -1);
   transform: translateX(15%);
 }
 
 .doc details[open] > summary::before {
   border-color: currentColor transparent transparent;
-  border-width: 0.5rem 0.3rem 0;
+  border-width: 1rem 0.6rem 0;
   transform: translateY(15%);
 }
 
 .doc details > summary::after {
   content: "";
-  width: 1rem;
+  width: var(--ds-space-2);
   height: 1em;
   position: absolute;
   top: calc((var(--doc-line-height) * 0.5 - 0.5) * 1em);
   left: -1rem;
 }
 
 .doc details.result {
-  margin-top: 0.25rem;
+  margin-top: var(--ds-space-3);
 }
 
 .doc details.result > summary {
@@ -748,7 +749,7 @@
   background: var(--example-background);
   border: 0.25rem solid var(--example-border-color);
   border-radius: 0.5rem;
-  padding: 0.75rem;
+  padding: var(--ds-space-1h);
 }
 
 .doc .exampleblock > .content::after,
@@ -766,7 +767,7 @@
 .doc .sidebarblock {
   background: var(--sidebar-background);
   border-radius: 0.75rem;
-  padding: 0.75rem 1.5rem;
+  padding: var(--ds-space-1h) var(--ds-space-3);
 }
 
 .doc .sidebarblock > .content > .title {
@@ -805,8 +806,8 @@
   display: flex;
   visibility: hidden;
   position: absolute;
-  top: 0.25rem;
-  right: 0.5rem;
+  top: var(--ds-space-h);
+  right: var(--ds-space-1);
   color: var(--pre-annotation-font-color);
   font-family: var(--body-font-family);
   font-size: calc(13 / var(--rem-base) * 1rem);
@@ -1044,11 +1045,11 @@
 #footnotes {
   font-size: 0.85em;
   line-height: 1.5;
-  margin: 2rem -0.5rem 0;
+  margin: var(--ds-space-3) calc(var(--ds-space-1) * -1) 0;
 }
 
 .doc td.tableblock > .content #footnotes {
-  margin: 2rem 0 0;
+  margin: var(--ds-space-3) 0 0;
 }
 
 #footnotes hr {

src/css/ds-button.css

@@ -2,7 +2,7 @@
   border-radius: 6px;
   padding: 0 12px;
   height: 40px;
-  font-size: 0.90625rem;
+  font-size: calc(16 / var(--rem-base) * 1rem);
   font-weight: 600;
   transition: var(--ds-transition);
   border: 1px solid transparent;

src/css/ds-input.css

@@ -1,6 +1,6 @@
 .ds-input-container {
   height: 40px;
-  font-size: 1rem;
+  font-size: var(--ds-space-2);
   font-weight: 400;
   color: var(--ds-text-primary);
   transition: var(--ds-transition);

src/css/ds-typography.css

@@ -24,7 +24,7 @@
 }
 
 .ds-text-body {
-  font-size: 1rem;
+  font-size: var(--ds-space-2);
   font-weight: 400;
 }
 
@@ -51,7 +51,7 @@
 }
 
 .ds-text-button {
-  font-size: 0.90625rem;
+  font-size: calc(16 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 

src/css/ds-vars.css

@@ -91,4 +91,20 @@
   --ds-warning-700: #703c00;
   --ds-warning-800: #522b00;
   --ds-warning-900: #331900;
+  --ds-space-q: 0.25rem; /* 2px */
+  --ds-space-h: 0.5rem; /* 4px */
+  --ds-space-1: 1rem; /* 8px */
+  --ds-space-1h: 1.5rem; /* 12px */
+  --ds-space-2: 2rem; /* 16px */
+  --ds-space-2h: 2.5rem; /* 20px */
+  --ds-space-3: 3rem; /* 24px */
+  --ds-space-4: 4rem; /* 32px */
+  --ds-space-5: 5rem; /* 40px */
+  --ds-space-6: 6rem; /* 48px */
+  --ds-space-7: 7rem; /* 56px */
+  --ds-space-8: 8rem; /* 64px */
+  --ds-space-9: 9rem; /* 72 */
+  --ds-space-10: 10rem; /* 80px */
+  --ds-space-11: 11rem; /* 88px */
+  --ds-space-15: 15rem; /* 120px */
 }

src/css/footer.css

@@ -3,7 +3,7 @@ footer.footer {
   color: var(--footer-font-color);
   font-size: calc(12 / var(--rem-base) * 1rem);
   line-height: var(--footer-line-height);
-  padding: 1.5rem;
+  padding: var(--ds-space-5);
 }
 
 .footer p {

src/css/pagination.css

@@ -2,8 +2,8 @@ nav.pagination {
   display: flex;
   border-top: 1px solid var(--toolbar-border-color);
   line-height: 1;
-  margin: 2rem -1rem -1rem;
-  padding: 0.75rem 1rem 0;
+  margin: var(--ds-space-3) calc(var(--ds-space-2h) * -1) calc(var(--ds-space-2h) * -1);
+  padding: var(--ds-space-1h) var(--ds-space-2) 0;
 }
 
 nav.pagination span {
@@ -38,7 +38,7 @@ nav.pagination .next::before {
 
 nav.pagination a {
   font-weight: var(--body-font-weight-bold);
-  line-height: 1.3;
+  line-height: 1.5;
   position: relative;
 }
 
@@ -50,7 +50,7 @@ nav.pagination a::after {
   line-height: 0.75;
   position: absolute;
   top: 0;
-  width: 1rem;
+  width: var(--ds-space-2);
 }
 
 nav.pagination .prev a::before {