From 13904dfdc1cac010f2f173d7756711f14d84362a Mon Sep 17 00:00:00 2001
From: Drew Powers <drew@pow.rs>
Date: Mon, 5 Jun 2023 17:22:42 +0200
Subject: [PATCH] Minor docs cleanup

---
 .changeset/spotty-mirrors-remain.md          |  5 +
 docs/src/components/Footer.astro             | 68 +++++++-------
 docs/src/components/Nav.astro                |  2 -
 docs/src/pages/docs/getting-started/index.md |  6 +-
 docs/src/pages/docs/plugins/index.md         |  2 -
 docs/src/pages/editor.astro                  | 31 ------
 docs/src/pages/index.astro                   | 99 +++++++++++++++-----
 docs/src/scripts/editor.js                   |  0
 docs/src/styles/_base.scss                   |  4 +-
 docs/src/styles/_button.scss                 | 10 +-
 packages/core/src/parse/index.ts             |  2 +-
 packages/core/test/tokens-studio.test.js     |  6 +-
 packages/plugin-css/README.md                | 14 +++
 packages/plugin-js/README.md                 |  6 ++
 packages/plugin-sass/README.md               |  8 ++
 15 files changed, 157 insertions(+), 106 deletions(-)
 create mode 100644 .changeset/spotty-mirrors-remain.md
 delete mode 100644 docs/src/pages/editor.astro
 delete mode 100644 docs/src/scripts/editor.js

diff --git a/.changeset/spotty-mirrors-remain.md b/.changeset/spotty-mirrors-remain.md
new file mode 100644
index 00000000..36a0d75c
--- /dev/null
+++ b/.changeset/spotty-mirrors-remain.md
@@ -0,0 +1,5 @@
+---
+'@cobalt-ui/core': patch
+---
+
+Fix bug where $value: `0` wasn’t a valid value
diff --git a/docs/src/components/Footer.astro b/docs/src/components/Footer.astro
index 166bc39b..9b44d672 100644
--- a/docs/src/components/Footer.astro
+++ b/docs/src/components/Footer.astro
@@ -3,45 +3,45 @@ import CobaltSm from './CobaltSm.astro';
 ---
 
 <style lang="scss">
-  @use "../../tokens" as *;
+  @use '../../tokens' as *;
 
- .footer {
-   border-top: 1px solid currentColor;
-   display: grid;
-   grid-template-columns: auto auto;
-   grid-gap: 2rem;
-   margin-top: 2rem;
-   padding-bottom: 6rem;
-   padding-top: 1.5rem;
- }
+  .footer {
+    border-top: 1px solid currentColor;
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-gap: 2rem;
+    margin-top: 2rem;
+    padding-bottom: 6rem;
+    padding-top: 1.5rem;
+  }
 
- .ensignia {
-   align-items: center;
-   align-self: flex-start;
-   display: grid;
-   font-size: token('font.size.05');
-   font-weight: 500;
-   grid-gap: token('space.sm');
-   grid-template-columns: min-content min-content;
- }
+  .ensignia {
+    align-items: center;
+    align-self: flex-start;
+    display: grid;
+    font-size: token('font.size.05');
+    font-weight: 500;
+    grid-gap: token('space.sm');
+    grid-template-columns: min-content min-content;
+  }
 
- .license {
-   font-size: token('font.size.04');
-   margin-top: token('space.sm');
- }
+  .license {
+    font-size: token('font.size.04');
+    margin-top: token('space.sm');
+  }
 
- nav {
-   display: flex;
-   flex-direction: column;
-   margin-left: auto;
-   width: 8rem;
+  nav {
+    display: flex;
+    flex-direction: column;
+    margin-left: auto;
+    width: 8rem;
 
-   a {
-     display: block;
-     margin: 0.25em 0;
-     text-decoration: none;
-   }
- }
+    a {
+      display: block;
+      margin: 0.25em 0;
+      text-decoration: none;
+    }
+  }
 </style>
 
 <div class="wrapper">
diff --git a/docs/src/components/Nav.astro b/docs/src/components/Nav.astro
index a3f0b906..00f6f664 100644
--- a/docs/src/components/Nav.astro
+++ b/docs/src/components/Nav.astro
@@ -79,8 +79,6 @@ let {title = 'Cobalt'} = Astro.props;
     <h1>{title}</h1>
   </a>
   <nav class="nav">
-    <a class="a" href="/docs/getting-started" aria-current={currentPage === '/docs/getting-started' || currentPage.startsWith('/docs') || undefined}> Docs</a>
-    <a class="a" href="/editor" aria-current={currentPage === '/editor' || undefined}>Editor</a>
     <a class="a a--github" href="https://github.com/drwpow/cobalt-ui">
       <svg class="github-icon"><use xlink:href="#github"></use></svg>
     </a>
diff --git a/docs/src/pages/docs/getting-started/index.md b/docs/src/pages/docs/getting-started/index.md
index 2db5bbc5..15e6fa16 100644
--- a/docs/src/pages/docs/getting-started/index.md
+++ b/docs/src/pages/docs/getting-started/index.md
@@ -26,13 +26,13 @@ The W3C Community Group’s approach differs in being the [largest collaborative
 
 Install the CLI:
 
-```
+```bash
 npm i -D @cobalt-ui/cli
 ```
 
 Install any plugins you’d like to use (_note: you must install at least one plugin to generate code_):
 
-```
+```bash
 npm i -D @cobalt-ui/plugin-css @cobalt-ui/plugin-js @cobalt-ui/plugin-sass
 ```
 
@@ -55,7 +55,7 @@ export default {
 
 Run the following command (**co** being short for “Cobalt”):
 
-```
+```bash
 npx co build
 ```
 
diff --git a/docs/src/pages/docs/plugins/index.md b/docs/src/pages/docs/plugins/index.md
index 0701f3a6..04e7fd20 100644
--- a/docs/src/pages/docs/plugins/index.md
+++ b/docs/src/pages/docs/plugins/index.md
@@ -11,8 +11,6 @@ Plugins let you **generate code** from `tokens.json`. Here are all current plugi
 - [@cobalt-ui/plugin-js](/docs/plugins/js): Generate `.js`, `.ts`, and `.json`
 - [@cobalt-ui/plugin-sass](/docs/plugins/sass): Generate `.scss` or `.sass`
 
-_Note: @cobalt-ui/plugin-ts and @cobalt-ui/plugin-json were merged into @cobalt-ui/plugin-js_
-
 ## Creating Plugins
 
 Cobalt was designed to be easy to create plugins within minutes. View the [developer guide to creating plugins](/docs/guides/plugins) to learn more.
diff --git a/docs/src/pages/editor.astro b/docs/src/pages/editor.astro
deleted file mode 100644
index a7be4f60..00000000
--- a/docs/src/pages/editor.astro
+++ /dev/null
@@ -1,31 +0,0 @@
----
-import Footer from '../components/Footer.astro';
-import Head from '../components/Head.astro';
-import Nav from '../components/Nav.astro';
-import SkipToMain from '../components/SkipToMain.astro';
----
-
-<!DOCTYPE html>
-<html>
-  <head>
-    <Head title="Editor" />
-    <style>
-      sup {
-        font-weight: 400;
-        font-size: 0.4em;
-        margin-left: 0.5em;
-      }
-    </style>
-  </head>
-  <body>
-    <SkipToMain />
-    <Nav />
-    <main id="main">
-      <div class="wrapper">
-        <h1 style="margin-bottom:0">Editor<sup>Beta</sup></h1>
-      </div>
-      <p>Coming soon!</p>
-    </main>
-    <Footer />
-  </body>
-</html>
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
index d403b537..76e61564 100644
--- a/docs/src/pages/index.astro
+++ b/docs/src/pages/index.astro
@@ -19,43 +19,66 @@ const tokenTypes = ['color', 'color', 'fontFamily', 'fontFamily', 'fontWeight',
     <style lang="scss">
       @use '../../tokens' as *;
 
-      .header {
+      .actions {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      .main {
         --ui-bg: #{token('color.blue.50')};
 
         align-items: center;
         background: token('color.blue.50');
         box-sizing: border-box;
         color: token('color.white');
+        min-height: calc(100vh - 64px); // nav bar height
         display: flex;
         flex-direction: column;
-        padding: 4rem 2rem;
         transform: translateZ(0);
 
-        @media (min-width: 600px) {
-          height: calc(100vh - #{token('space.layout.lg')});
-          justify-content: flex-end;
-          max-height: 60em;
-          padding-bottom: 0;
-          padding-bottom: 12.5%;
-          padding-top: 0;
+        :global(a:not(.btn)) {
+          color: inherit;
         }
       }
 
-      .header-text {
+      .hero {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 100%;
+        padding: 4rem 2rem;
         position: relative;
+        width: 55rem;
         z-index: 10;
+
+        @media (min-width: 600px) {
+          justify-content: flex-end;
+          padding-top: 12rem;
+        }
       }
 
       .features {
-        font-size: token('font.size.05');
+        font-size: token('font.size.06');
         margin-bottom: token('space.layout.sm');
         margin-top: token('space.layout.sm');
+        padding: 0;
         text-align: left;
+        font-weight: 400;
+        list-style: none;
         line-height: 1.8;
+
+        li {
+          background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='white' d='M21.1921,5.46455 C21.5826,5.85507 21.5826,6.48824 21.1921,6.87876 L9.94909,18.1218 C9.51951,18.5513 8.82303,18.5513 8.39345,18.1218 L2.80731,12.5356 C2.41679,12.1451 2.41679,11.5119 2.80731,11.1214 C3.19783,10.7309 3.831,10.7309 4.22152,11.1214 L9.17127,16.0711 L19.7779,5.46455 C20.1684,5.07402 20.8016,5.07402 21.1921,5.46455 Z'></path></svg>");
+          background-size: 1.25rem 1.25rem;
+          background-position: 0 0.625rem;
+          background-repeat: no-repeat;
+          margin: 1rem 0;
+          padding: 0 0 0 2rem;
+        }
       }
 
       .title {
         font-size: 36px;
+        line-height: 0.9;
         font-weight: 550;
         margin: 0;
 
@@ -90,26 +113,52 @@ const tokenTypes = ['color', 'color', 'fontFamily', 'fontFamily', 'fontWeight',
           width: 100%;
         }
       }
+
+      .icon {
+        fill: currentColor;
+        transition: transform 100ms token('ease.outCirc');
+        height: 1em;
+        width: 1em;
+      }
+
+      .btn {
+        padding-right: 0.625em;
+
+        &:hover {
+          .icon {
+            transform: translate3d(20%, 0, 0);
+          }
+        }
+      }
     </style>
   </head>
   <body class="page--home">
     <SkipToMain />
     <Nav />
-    <div>
-      <header class="header tac">
-        <div class="tokens">
-          {[...new Array(1200)].map(() => <Token type={tokenTypes[Math.floor(Math.random() * tokenTypes.length)]} />)}
-        </div>
-        <div class="header-text">
-          <h1 class="title">W3C Design Tokens, Anywhere</h1>
-          <div class="features">• Generate JS, TS, Sass, CSS, and more<br />• Sync with Figma<br />• Use in CI</div>
-          <a class="btn" href="/docs/getting-started">Get Started</a>
+    <div class="main">
+      <div class="tokens">
+        {[...new Array(1200)].map(() => <Token type={tokenTypes[Math.floor(Math.random() * tokenTypes.length)]} />)}
+      </div>
+      <div class="hero">
+        <h1 class="title">W3C Design Tokens,<br />Anywhere</h1>
+        <ul class="features">
+          <li>Generate JS, TS, Sass, CSS, and more with plugins</li>
+          <li>Works with Tokens Studio for Figma</li>
+          <li>Make Design Tokens part of your dev stack (React, Vue, Svelte, and vanilla JS/HTML supported)</li>
+        </ul>
+        <div class="actions">
+          <a class="btn" href="/docs/getting-started">
+            Get Started
+            <svg class="icon icon-right" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+              ><path
+                d="M15.7072,11.2929 C16.0977,11.6834 16.0977,12.3166 15.7072,12.7071 L10.0503,18.364 C9.65982,18.7545 9.02666,18.7545 8.63613,18.364 C8.24561,17.9734 8.24561,17.3403 8.63613,16.9497 L13.5859,12 L8.63613,7.05025 C8.24561,6.65973 8.24561,6.02656 8.63613,5.63604 C9.02666,5.24551 9.65982,5.24551 10.0503,5.63604 L15.7072,11.2929 Z"
+              ></path></svg
+            >
+          </a>
         </div>
-      </header>
-    </div>
-    <div class="wrapper">
-      <DocsPagination />
+      </div>
+
+      <Footer />
     </div>
-    <Footer />
   </body>
 </html>
diff --git a/docs/src/scripts/editor.js b/docs/src/scripts/editor.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/docs/src/styles/_base.scss b/docs/src/styles/_base.scss
index 1e19b6be..30952816 100644
--- a/docs/src/styles/_base.scss
+++ b/docs/src/styles/_base.scss
@@ -44,7 +44,7 @@ h6 {
 
 h1 {
   font-size: token('font.size.08');
-  font-weight: 600;
+  font-weight: 550;
 }
 
 h2 {
@@ -137,7 +137,9 @@ pre {
 }
 
 code {
+  li &,
   p & {
+    font-size: 0.875em;
     font-weight: 500;
   }
 
diff --git a/docs/src/styles/_button.scss b/docs/src/styles/_button.scss
index cb2dd9cf..f0dc0c34 100644
--- a/docs/src/styles/_button.scss
+++ b/docs/src/styles/_button.scss
@@ -1,15 +1,17 @@
 @use '../../tokens' as *;
 
 .btn {
+  align-items: center;
   background-color: token('color.white');
-  border-radius: 0.5em;
   border: 3px solid token('color.blue.50');
+  border-radius: 0.5em;
   color: token('color.blue.50');
-  display: inline-block;
-  font-size: inherit;
+  display: inline-flex;
+  gap: 0.375em;
+  font-size: 1.125rem;
   font-weight: 500;
   outline: 2px solid rgba(token('color.white'), 0);
-  padding: 0.875em 1.125em;
+  padding: 0.75em 1em;
   text-decoration: none;
   transition: outline 150ms linear;
 
diff --git a/packages/core/src/parse/index.ts b/packages/core/src/parse/index.ts
index 56e83966..a127019b 100644
--- a/packages/core/src/parse/index.ts
+++ b/packages/core/src/parse/index.ts
@@ -180,7 +180,7 @@ export function parse(rawTokens: unknown): ParseResult {
       string(strVal) {
         if (!isAlias(strVal)) return strVal;
         const nextID = getAliasID(strVal);
-        if (!values[nextID]) {
+        if (!(nextID in values)) {
           throw new Error(`${id}: can’t find ${strVal}`);
         }
 
diff --git a/packages/core/test/tokens-studio.test.js b/packages/core/test/tokens-studio.test.js
index 4e86a9b6..01c636ac 100644
--- a/packages/core/test/tokens-studio.test.js
+++ b/packages/core/test/tokens-studio.test.js
@@ -197,8 +197,8 @@ describe('Color', () => {
     });
   });
 
-  describe('Typography', () => {
-    test('basic', () => {
+  describe.only('Typography', () => {
+    test.only('basic', () => {
       const json = {
         global: {
           typography: {
@@ -261,7 +261,7 @@ describe('Color', () => {
             fontSize: '14px',
             fontWeight: 400,
             letterSpacing: 0,
-            lineHeight: 1.4,
+            lineHeight: '1.4em',
             textCase: 'none',
             textDecoration: 'none',
           },
diff --git a/packages/plugin-css/README.md b/packages/plugin-css/README.md
index 3bda9f66..a1bdd866 100644
--- a/packages/plugin-css/README.md
+++ b/packages/plugin-css/README.md
@@ -16,6 +16,8 @@ import pluginCSS from '@cobalt-ui/plugin-css';
 
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [pluginCSS()],
 };
 ```
@@ -52,6 +54,8 @@ import pluginCSS from '@cobalt-ui/plugin-css';
 
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     pluginCSS({
       /** set the filename inside outDir */
@@ -128,6 +132,8 @@ import css from '@cobalt-ui/plugin-css';
 
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     css({
       modeSelectors: {
@@ -176,6 +182,8 @@ import css from '@cobalt-ui/plugin-css';
 
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     css({
       modeSelectors: {
@@ -221,6 +229,8 @@ Inside plugin options, you can specify an optional `transform()` function.
 ```js
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     pluginCSS({
       transform(token, mode) {
@@ -244,6 +254,8 @@ If you have your own custom token type, e.g. `my-custom-type`, you’ll have to
 ```js
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     pluginCSS({
       transform(token, mode) {
@@ -271,6 +283,8 @@ To use this, replace this plugin with @cobalt-ui/plugin-sass in `tokens.config.m
 
   /** @type import('@cobalt-ui/core').Config */
   export default {
+    tokens: './tokens.json',
+    outDir: './tokens/',
     plugins: [
 -     pluginCSS({ filename: 'tokens.css }),
 +     pluginSass({
diff --git a/packages/plugin-js/README.md b/packages/plugin-js/README.md
index 03b67346..1078ef09 100644
--- a/packages/plugin-js/README.md
+++ b/packages/plugin-js/README.md
@@ -12,6 +12,8 @@ import pluginJS from '@cobalt-ui/plugin-js';
 
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     pluginJS({
       /** output JS (with TS types)? boolean or filename (default: true) */
@@ -67,6 +69,8 @@ import pluginJS from '@cobalt-ui/plugin-js';
 
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     pluginJS({
       /** output JS? boolean or filename */
@@ -87,6 +91,8 @@ Inside plugin options, you can specify an optional `transform()` function.
 ```js
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     pluginJS({
       transform(token, mode) {
diff --git a/packages/plugin-sass/README.md b/packages/plugin-sass/README.md
index afd5f1b5..4f30823d 100644
--- a/packages/plugin-sass/README.md
+++ b/packages/plugin-sass/README.md
@@ -14,6 +14,8 @@ import pluginSass from '@cobalt-ui/plugin-sass';
 
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     pluginSass({
       /** set the filename inside outDir */
@@ -69,6 +71,8 @@ import pluginSass from '@cobalt-ui/plugin-sass';
 
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     pluginSass({
       cssVars: true,
@@ -197,6 +201,8 @@ Inside plugin options, you can specify an optional `transform()` function:
 ```js
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     pluginSass({
       transform(token, mode) {
@@ -220,6 +226,8 @@ If you have your own custom token type, e.g. `my-custom-type`, you’ll have to
 ```js
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [
     pluginSass({
       transform(token, mode) {