From 65889ada1fe92420d45918fb9319e5bb7f866803 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Fri, 30 Jun 2023 18:49:07 +0800
Subject: [PATCH] Fix styles

Ensure styles are consistent per platform.
---
 .../components/AudioFilePreview/index.tsx     |   6 +-
 .../src/components/DefaultLayout/index.tsx    |   4 +-
 .../react-binary-data-canvas/index.tsx        |   9 +-
 .../src/packages/react-prism/index.tsx        |   9 +-
 .../src/pages/_document.tsx                   |  16 +-
 .../src/pages/categories/action/index.tsx     | 444 +++++++++---------
 .../src/pages/categories/blob/index.tsx       |   4 +-
 .../src/pages/index.tsx                       |  42 +-
 .../src/styles/globals.css                    |  75 +++
 .../src/styles/kitchen-sink.css               |  83 +---
 .../src/styles/theme.ts                       |  39 +-
 .../tailwind.config.js                        |  12 +-
 12 files changed, 368 insertions(+), 375 deletions(-)

diff --git a/packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx b/packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
index ebf0b44..2c303aa 100644
--- a/packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
@@ -124,8 +124,8 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                       data-testid="preview"
                       barWidth={1}
                       barGap={1}
-                      progressColor={`rgb(${theme.primary})`}
-                      waveColor={`rgb(${theme.primary.split(' ').map((c) => Math.floor(Number(c) / 2)).join(' ')})`}
+                      progressColor={`rgb(${theme['color-primary']})`}
+                      waveColor={`rgb(${theme['color-primary'].split(' ').map((c) => Math.floor(Number(c) / 2)).join(' ')})`}
                       interact
                       // waveColor={`rgb(${theme.primary})`}
                       // barHeight={4}
@@ -143,7 +143,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                       data-testid="preview"
                       barWidth={1}
                       barGap={1}
-                      waveColor={`rgb(${theme.primary})`}
+                      waveColor={`rgb(${theme['color-primary']})`}
                       cursorWidth={2}
                       minPxPerSec={20000}
                       hideScrollbar
diff --git a/packages/web-kitchensink-reactnext/src/components/DefaultLayout/index.tsx b/packages/web-kitchensink-reactnext/src/components/DefaultLayout/index.tsx
index 1fd8f56..488e884 100644
--- a/packages/web-kitchensink-reactnext/src/components/DefaultLayout/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/components/DefaultLayout/index.tsx
@@ -21,11 +21,11 @@ export const DefaultLayout: FC<DefaultLayoutProps> = ({
         {
           title
           && (
-            <meta name="display-title" className="block" content={title} />
+            <meta name="display-title" className="block lowercase text-6xl font-headings container mx-auto px-4 font-thin" content={title} />
           )
         }
       </Head>
-      <main className="mt-8 mb-16 md:mt-16 md:mb-32">
+      <main>
         {children}
       </main>
     </>
diff --git a/packages/web-kitchensink-reactnext/src/packages/react-binary-data-canvas/index.tsx b/packages/web-kitchensink-reactnext/src/packages/react-binary-data-canvas/index.tsx
index fbde8e3..b718377 100644
--- a/packages/web-kitchensink-reactnext/src/packages/react-binary-data-canvas/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/packages/react-binary-data-canvas/index.tsx
@@ -44,6 +44,7 @@ export const BinaryDataCanvas = React.forwardRef<BinaryDataCanvasDerivedElement,
   return (
     <div
       className={clsx(
+        'binary-file-preview',
         className,
       )}
       style={{
@@ -56,9 +57,6 @@ export const BinaryDataCanvas = React.forwardRef<BinaryDataCanvasDerivedElement,
       {headers && (
         <pre
           style={{
-            padding: 0,
-            overflow: 'visible',
-            margin: 0,
             textAlign: 'right',
           }}
         >
@@ -83,11 +81,6 @@ export const BinaryDataCanvas = React.forwardRef<BinaryDataCanvasDerivedElement,
         <pre
           {...etcProps}
           ref={forwardedRef}
-          style={{
-            padding: 0,
-            overflow: 'visible',
-            margin: 0,
-          }}
         >
           <code>
             {headers && new Array(BYTES_PER_LINE).fill(0).map((_, i) => (
diff --git a/packages/web-kitchensink-reactnext/src/packages/react-prism/index.tsx b/packages/web-kitchensink-reactnext/src/packages/react-prism/index.tsx
index fa5a3e5..2bab44f 100644
--- a/packages/web-kitchensink-reactnext/src/packages/react-prism/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/packages/react-prism/index.tsx
@@ -34,18 +34,11 @@ export const Prism = React.forwardRef<PrismDerivedElement, PrismProps>(({
         'react-prism',
         className,
       )}
-      style={{
-        ...(style ?? {}),
-
-      }}
+      style={style}
     >
       {lineNumbers && (
         <pre
           style={{
-            padding: 0,
-            overflow: 'visible',
-            margin: 0,
-            lineHeight: 1.2,
             textAlign: 'right',
           }}
         >
diff --git a/packages/web-kitchensink-reactnext/src/pages/_document.tsx b/packages/web-kitchensink-reactnext/src/pages/_document.tsx
index d4a4cb5..4e96b4b 100644
--- a/packages/web-kitchensink-reactnext/src/pages/_document.tsx
+++ b/packages/web-kitchensink-reactnext/src/pages/_document.tsx
@@ -3,11 +3,17 @@ import theme from '@/styles/theme'
 
 export default function Document() {
   return (
-    <Html lang="en" className="bg-negative text-positive">
-      <Head>
-        <style>
-          {`:root{${Object.entries(theme).map(([key, value]) => `--color-${key}: ${value};`).join('')}}`}
-        </style>
+    <Html lang="en" className="bg-negative text-positive mt-8 mb-16 md:mt-16 md:mb-32">
+      <Head className="block">
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+              :root {
+                ${Object.entries(theme).map(([name, value]) => `--${name}: ${value};`).join('\n')}
+              }
+            `,
+          }}
+        />
       </Head>
       <body>
         <Main />
diff --git a/packages/web-kitchensink-reactnext/src/pages/categories/action/index.tsx b/packages/web-kitchensink-reactnext/src/pages/categories/action/index.tsx
index 775052e..9ed4c29 100644
--- a/packages/web-kitchensink-reactnext/src/pages/categories/action/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/pages/categories/action/index.tsx
@@ -8,236 +8,234 @@ const ActionPage: NextPage = () => {
     <DefaultLayout
       title="Action"
     >
-      <main className="mt-8 mb-16 md:mt-16 md:mb-32">
-        <section>
-          <div className="container mx-auto px-4">
-            <h1>
-              ActionButton
-            </h1>
-            <div>
-              <section>
-                <h2>Variants</h2>
-                <div>
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
-                    <div>
-                      <Action.ActionButton
-                        variant="bare"
-                        block
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        variant="filled"
-                        block
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        variant="outline"
-                        block
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        variant="filled"
-                        block
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        variant="bare"
-                        block
-                        disabled
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        variant="filled"
-                        block
-                        disabled
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        variant="outline"
-                        block
-                        disabled
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        variant="filled"
-                        block
-                        disabled
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
+      <section>
+        <div className="container mx-auto px-4">
+          <h1>
+            ActionButton
+          </h1>
+          <div>
+            <section>
+              <h2>Variants</h2>
+              <div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
+                  <div>
+                    <Action.ActionButton
+                      variant="bare"
+                      block
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      variant="filled"
+                      block
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      variant="outline"
+                      block
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      variant="filled"
+                      block
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      variant="bare"
+                      block
+                      disabled
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      variant="filled"
+                      block
+                      disabled
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      variant="outline"
+                      block
+                      disabled
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      variant="filled"
+                      block
+                      disabled
+                    >
+                      Button
+                    </Action.ActionButton>
                   </div>
                 </div>
-              </section>
-              <section>
-                <h2>Sizes</h2>
-                <div>
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
-                    <div>
-                      <Action.ActionButton
-                        block
-                        variant="outline"
-                        size="small"
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        block
-                        variant="filled"
-                        size="small"
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        block
-                        variant="outline"
-                        size="medium"
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        block
-                        variant="filled"
-                        size="medium"
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        block
-                        variant="outline"
-                        size="large"
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        block
-                        variant="filled"
-                        size="large"
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
+              </div>
+            </section>
+            <section>
+              <h2>Sizes</h2>
+              <div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
+                  <div>
+                    <Action.ActionButton
+                      block
+                      variant="outline"
+                      size="small"
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      block
+                      variant="filled"
+                      size="small"
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      block
+                      variant="outline"
+                      size="medium"
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      block
+                      variant="filled"
+                      size="medium"
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      block
+                      variant="outline"
+                      size="large"
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      block
+                      variant="filled"
+                      size="large"
+                    >
+                      Button
+                    </Action.ActionButton>
                   </div>
                 </div>
-              </section>
-              <section>
-                <h2>Compact</h2>
-                <div>
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
-                    <div>
-                      <Action.ActionButton
-                        block
-                        compact
-                        variant="outline"
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        block
-                        compact
-                        variant="filled"
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        block
-                        compact
-                        variant="outline"
-                        subtext={
-                          <>
-                            Subtext
-                          </>
-                        }
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        block
-                        compact
-                        variant="filled"
-                        subtext={
-                          <>
-                            Subtext
-                          </>
-                        }
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        block
-                        compact
-                        variant="outline"
-                        size="small"
-                        subtext={
-                          <>
-                            Subtext
-                          </>
-                        }
-                      >
-                        Button
-                      </Action.ActionButton>
-                    </div>
-                    <div>
-                      <Action.ActionButton
-                        block
-                        compact
-                        variant="filled"
-                        size="small"
-                        subtext={
-                          <>
-                            Very Long Line of Subtext That Spans More Than The Component Width For Testing Overflow
-                          </>
-                        }
-                      >
-                        Very Long Line of Text That Spans More Than The Component Width For Testing Overflow
-                      </Action.ActionButton>
-                    </div>
+              </div>
+            </section>
+            <section>
+              <h2>Compact</h2>
+              <div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
+                  <div>
+                    <Action.ActionButton
+                      block
+                      compact
+                      variant="outline"
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      block
+                      compact
+                      variant="filled"
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      block
+                      compact
+                      variant="outline"
+                      subtext={
+                        <>
+                          Subtext
+                        </>
+                      }
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      block
+                      compact
+                      variant="filled"
+                      subtext={
+                        <>
+                          Subtext
+                        </>
+                      }
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      block
+                      compact
+                      variant="outline"
+                      size="small"
+                      subtext={
+                        <>
+                          Subtext
+                        </>
+                      }
+                    >
+                      Button
+                    </Action.ActionButton>
+                  </div>
+                  <div>
+                    <Action.ActionButton
+                      block
+                      compact
+                      variant="filled"
+                      size="small"
+                      subtext={
+                        <>
+                          Very Long Line of Subtext That Spans More Than The Component Width For Testing Overflow
+                        </>
+                      }
+                    >
+                      Very Long Line of Text That Spans More Than The Component Width For Testing Overflow
+                    </Action.ActionButton>
                   </div>
                 </div>
-              </section>
-            </div>
+              </div>
+            </section>
           </div>
-        </section>
-      </main>
+        </div>
+      </section>
     </DefaultLayout>
   )
 }
diff --git a/packages/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx b/packages/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx
index b513659..a215895 100644
--- a/packages/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx
@@ -75,7 +75,7 @@ const BlobPage: NextPage = () => {
   }, []);
 
   return (
-    <DefaultLayout>
+    <DefaultLayout title="Blob">
       <Section title="ImageFilePreview">
         <Subsection title="Single File">
           <BlobReact.ImageFilePreview
@@ -153,8 +153,6 @@ const BlobPage: NextPage = () => {
             className="sm:h-64"
           />
         </Subsection>
-      </Section>
-      <Section title="TextFilePreview">
         <Subsection title="Single File (Code)">
           <BlobReact.TextFilePreview
             file={
diff --git a/packages/web-kitchensink-reactnext/src/pages/index.tsx b/packages/web-kitchensink-reactnext/src/pages/index.tsx
index f8475d3..3b23637 100644
--- a/packages/web-kitchensink-reactnext/src/pages/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/pages/index.tsx
@@ -41,32 +41,30 @@ const IndexPage: NextPage<Props> = ({
     <DefaultLayout
       title="Kitchen Sink"
     >
-      <main className="mt-8 mb-16 md:mt-16 md:mb-32">
-        <section>
-          <div className="container mx-auto px-4">
-            <h1>
-              Components
-            </h1>
-            <div>
-              <div className="grid md:grid-cols-2 gap-4 my-4">
-                {componentPages.map(createPageLink)}
-              </div>
+      <section>
+        <div className="container mx-auto px-4">
+          <h1>
+            Components
+          </h1>
+          <div>
+            <div className="grid md:grid-cols-2 gap-4 my-4">
+              {componentPages.map(createPageLink)}
             </div>
           </div>
-        </section>
-        <section>
-          <div className="container mx-auto px-4">
-            <h1>
-              Examples
-            </h1>
-            <div>
-              <div className="grid md:grid-cols-2 gap-4 my-4">
-                {examplePages.map(createPageLink)}
-              </div>
+        </div>
+      </section>
+      <section>
+        <div className="container mx-auto px-4">
+          <h1>
+            Examples
+          </h1>
+          <div>
+            <div className="grid md:grid-cols-2 gap-4 my-4">
+              {examplePages.map(createPageLink)}
             </div>
           </div>
-        </section>
-      </main>
+        </div>
+      </section>
     </DefaultLayout>
   )
 }
diff --git a/packages/web-kitchensink-reactnext/src/styles/globals.css b/packages/web-kitchensink-reactnext/src/styles/globals.css
index 3e325f5..1c71891 100644
--- a/packages/web-kitchensink-reactnext/src/styles/globals.css
+++ b/packages/web-kitchensink-reactnext/src/styles/globals.css
@@ -1,6 +1,75 @@
 @tailwind base;
 @tailwind utilities;
 
+@layer base {
+  body {
+    margin: 0;
+  }
+
+  h1 {
+    @apply font-headings lowercase text-5xl font-thin;
+  }
+
+  h2 {
+    @apply font-headings lowercase text-4xl font-light;
+  }
+
+  h3 {
+    @apply font-headings lowercase text-3xl;
+  }
+
+  h4 {
+    @apply font-headings lowercase text-2xl;
+  }
+
+  h5 {
+    @apply font-headings lowercase text-xl;
+  }
+
+  h6 {
+    @apply font-headings lowercase text-lg;
+  }
+
+  p {
+    margin: 2em 0;
+  }
+
+  small {
+    font-size: 0.75em;
+  }
+
+  a:focus {
+    outline: 0;
+  }
+
+  /*pre {*/
+  /*  overflow: auto;*/
+  /*  margin: 0 -1rem;*/
+  /*  padding: 0 1rem;*/
+  /*  line-height: 1.2;*/
+  /*  box-sizing: border-box;*/
+  /*}*/
+
+  @media only print {
+    pre, pre * {
+      color: inherit !important;
+    }
+
+    code, code * {
+      color: inherit !important;
+    }
+
+    img {
+      filter: grayscale(100%);
+    }
+
+    :root {
+      --color-accent: black !important;
+      --color-active: black !important;
+    }
+  }
+}
+
 @layer utilities {
   .font-condensed {
     font-stretch: condensed;
@@ -35,6 +104,9 @@
 
 .react-prism pre {
   overflow: visible;
+  padding: 0;
+  margin: 0;
+  line-height: 1.2;
 }
 
 .react-prism .token.number { color: rgb(var(--color-code-number)); }
@@ -53,6 +125,9 @@
 
 .binary-file-preview pre {
   overflow: visible;
+  padding: 0;
+  margin: 0;
+  line-height: 1.2;
 }
 
 .binary-file-preview .x00 { color: rgb(var(--color-code-keyword)); }
diff --git a/packages/web-kitchensink-reactnext/src/styles/kitchen-sink.css b/packages/web-kitchensink-reactnext/src/styles/kitchen-sink.css
index 62c9f4e..89883d9 100644
--- a/packages/web-kitchensink-reactnext/src/styles/kitchen-sink.css
+++ b/packages/web-kitchensink-reactnext/src/styles/kitchen-sink.css
@@ -1,15 +1,7 @@
-body {
-  margin: 0;
-}
-
-title {
-  font-size: 4em;
-  text-transform: lowercase;
-}
+/* kitchen-sink styles */
 
 meta[name="display-title"] {
-  font-size: 4em;
-  text-transform: lowercase;
+  max-width: 720px;
 }
 
 meta[name="display-title"]::before {
@@ -17,77 +9,6 @@ meta[name="display-title"]::before {
   content: attr(content);
 }
 
-h1 {
-  font-size: 3em;
-  text-transform: lowercase;
-}
-
-h2 {
-  font-size: 2em;
-  text-transform: lowercase;
-}
-
-h3 {
-  font-size: 1.75em;
-  text-transform: lowercase;
-}
-
-h4 {
-  font-size: 1.5em;
-  text-transform: lowercase;
-}
-
-h5 {
-  font-size: 1.25em;
-  text-transform: lowercase;
-}
-
-h6 {
-  font-size: 1.125em;
-  text-transform: lowercase;
-}
-
-p {
-  margin: 2em 0;
-}
-
-small {
-  font-size: 0.75em;
-}
-
-a:focus {
-  outline: 0;
-}
-
-pre {
-  overflow: auto;
-  margin: 0 -1rem;
-  padding: 0 1rem;
-  line-height: 1.2;
-  box-sizing: border-box;
-}
-
-@media only print {
-  pre, pre * {
-    color: inherit !important;
-  }
-
-  code, code * {
-    color: inherit !important;
-  }
-
-  img {
-    filter: grayscale(100%);
-  }
-
-  :root {
-    --color-accent: black !important;
-    --color-active: black !important;
-  }
-}
-
-/* kitchen-sink styles */
-
 .container {
   max-width: 720px;
 }
diff --git a/packages/web-kitchensink-reactnext/src/styles/theme.ts b/packages/web-kitchensink-reactnext/src/styles/theme.ts
index 9e60786..0b771a9 100644
--- a/packages/web-kitchensink-reactnext/src/styles/theme.ts
+++ b/packages/web-kitchensink-reactnext/src/styles/theme.ts
@@ -1,22 +1,25 @@
 const theme = {
-  "shade": "0 0 0",
-  "negative": "34 34 34",
-  "positive": "238 238 238",
-  "primary": "199 138 179",
-  "secondary": "215 95 75",
-  "tertiary": "255 153 0",
-  "code-number": "116 249 94",
-  "code-keyword": "255 67 137",
-  "code-type": "80 151 210",
-  "code-instance-attribute": "118 167 210",
-  "code-function": "103 194 82",
-  "code-parameter": "145 94 194",
-  "code-property": "255 161 201",
-  "code-string": "238 211 113",
-  "code-variable": "139 194 117",
-  "code-regexp": "116 167 43",
-  "code-url": "0 153 204",
-  "code-global": "194 128 80",
+  "color-shade": "0 0 0",
+  "color-negative": "34 34 34",
+  "color-positive": "238 238 238",
+  "color-primary": "199 138 179",
+  "color-secondary": "215 95 75",
+  "color-tertiary": "255 153 0",
+  "color-code-number": "116 249 94",
+  "color-code-keyword": "255 67 137",
+  "color-code-type": "80 151 210",
+  "color-code-instance-attribute": "118 167 210",
+  "color-code-function": "103 194 82",
+  "color-code-parameter": "145 94 194",
+  "color-code-property": "255 161 201",
+  "color-code-string": "238 211 113",
+  "color-code-variable": "139 194 117",
+  "color-code-regexp": "116 167 43",
+  "color-code-url": "0 153 204",
+  "color-code-global": "194 128 80",
+  "font-sans": '"Encode Sans"',
+  "font-headings": 'Glory, var(--font-sans)',
+  "font-mono": 'MonoLisa, mononoki',
 } as const;
 
 export default theme;
diff --git a/packages/web-kitchensink-reactnext/tailwind.config.js b/packages/web-kitchensink-reactnext/tailwind.config.js
index 3565195..d5702f5 100644
--- a/packages/web-kitchensink-reactnext/tailwind.config.js
+++ b/packages/web-kitchensink-reactnext/tailwind.config.js
@@ -9,8 +9,9 @@ module.exports = {
   ],
   theme: {
     fontFamily: {
-      sans: ['Encode Sans', ...defaultTheme.fontFamily.sans],
-      mono: ['MonoLisa', 'mononoki', ...defaultTheme.fontFamily.mono],
+      sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
+      headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
+      mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
     },
     colors: {
       'shade': 'rgb(var(--color-shade))',
@@ -36,6 +37,13 @@ module.exports = {
     },
     extend: {
       fontSize: {
+        'lg': '1.125em',
+        'xl': '1.25em',
+        '2xl': '1.5em',
+        '3xl': '1.75em',
+        '4xl': '2em',
+        '5xl': '3em',
+        '6xl': '4em',
         'xxs': '0.625rem',
       },
       borderRadius: {