From 87e378f349215bed9936bf4bc8477eceff67170c Mon Sep 17 00:00:00 2001
From: Simon MacDonald <simon.macdonald@gmail.com>
Date: Wed, 12 Aug 2020 22:38:01 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Spectrum'ish=20tables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/OpenAPIBlock.js            | 68 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby-theme-parliament/src/components/OpenAPIBlock.js b/packages/gatsby-theme-parliament/src/components/OpenAPIBlock.js
index 4e3a69eb58..5c63f82d9e 100644
--- a/packages/gatsby-theme-parliament/src/components/OpenAPIBlock.js
+++ b/packages/gatsby-theme-parliament/src/components/OpenAPIBlock.js
@@ -167,6 +167,11 @@ export const OpenAPIBlock = ({ specUrl }) => {
                 }
               }
 
+              h1 span {
+                float: right;
+                line-height: 36px;
+              }
+
               p {
                 font-size: var(--spectrum-body-l-text-size, var(--spectrum-global-dimension-font-size-300));
                 font-weight: var(--spectrum-body-l-text-font-weight, var(--spectrum-alias-body-text-font-weight));
@@ -183,13 +188,64 @@ export const OpenAPIBlock = ({ specUrl }) => {
             .api-content {
               table {
                 margin-bottom: var(--spectrum-global-dimension-size-400, var(--spectrum-alias-size-400));
+                border-collapse: separate;
+                border-spacing: 0;
               }
 
-              td[kind='field'] {
-                background-image: none;
+              tbody {
+                border-width: 1px 0;
+                background-color: var(
+                  --spectrum-table-quiet-cell-background-color,
+                  var(--spectrum-alias-background-color-transparent)
+                );
+                border-radius: var(--spectrum-table-quiet-border-radius, 0px);
+                border: none;
+                border-color: var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid));
+                position: relative;
+                overflow: auto;
+                vertical-align: var(--spectrum-table-cell-vertical-alignment, top);
+              }
+
+              tr {
+                position: relative;
+                cursor: pointer;
+                transition: background-color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
+                border-bottom: 1px solid var(--spectrum-table-cell-border-color, var(--spectrum-global-color-gray-300));
+                background-color: var(
+                  --spectrum-table-quiet-row-background-color,
+                  var(--spectrum-alias-background-color-transparent)
+                );
+                border-top: none;
+              }
+
+              td {
+                border-bottom: none;
+                border-right: none;
+                border-left: none;
+                border-top: 1px solid var(--spectrum-table-cell-border-color, var(--spectrum-global-color-gray-300));
+                color: var(--spectrum-table-cell-text-color, var(--spectrum-alias-text-color));
+                background-color: var(
+                  --spectrum-table-cell-background-color,
+                  var(--spectrum-alias-background-color-transparent)
+                );
+                position: relative;
+
+                box-sizing: border-box;
+                font-size: var(--spectrum-table-cell-text-size, var(--spectrum-alias-font-size-default));
+                font-weight: var(--spectrum-table-cell-text-font-weight, var(--spectrum-global-font-weight-regular));
+                line-height: var(--spectrum-table-cell-text-line-height, var(--spectrum-alias-body-text-line-height));
+                padding-top: var(--spectrum-table-cell-padding-y, var(--spectrum-global-dimension-size-175));
+                padding-bottom: var(--spectrum-table-cell-padding-y, var(--spectrum-global-dimension-size-175));
+                padding-left: var(--spectrum-table-cell-padding-x, var(--spectrum-global-dimension-size-200));
+                padding-right: var(--spectrum-table-cell-padding-x, var(--spectrum-global-dimension-size-200));
+                min-height: calc(
+                  var(--spectrum-table-cell-min-height, var(--spectrum-global-dimension-size-600)) -
+                    var(--spectrum-table-cell-padding-y, var(--spectrum-global-dimension-size-175)) * 2
+                );
               }
 
               td[kind='field'] {
+                background-image: none;
                 border-left: none;
                 color: var(--spectrum-code-s-text-color, var(--spectrum-alias-text-color));
                 font-size: var(--spectrum-code-s-text-size, var(--spectrum-alias-font-size-default));
@@ -526,6 +582,14 @@ export const OpenAPIBlock = ({ specUrl }) => {
                 border-bottom: 0px;
               }
 
+              h5 span {
+                float: right;
+              }
+
+              h5 + div p {
+                margin-bottom: var(--spectrum-global-dimension-size-200, var(--spectrum-alias-size-200));
+              }
+
               pre {
                 border-radius: var(--spectrum-global-dimension-static-size-50);