Minor docs cleanup

terrazzoapp · Jun 5, 2023 · ed7c6bc · ed7c6bc
1 parent 7a26e6e
commit ed7c6bc
Show file tree

Hide file tree

Showing 16 changed files with 156 additions and 105 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@1.6.3/schema.json",
+  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
   "changelog": ["@changesets/changelog-github", {"repo": "drwpow/cobalt-ui"}],
   "commit": false,
   "linked": [],

diff --git a/.changeset/spotty-mirrors-remain.md 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -261,7 +261,7 @@ describe('Color', () => {
             fontSize: '14px',
             fontWeight: 400,
             letterSpacing: 0,
-            lineHeight: 1.4,
+            lineHeight: '1.4em',
             textCase: 'none',
             textDecoration: 'none',
           },