Tokens Studio support 🎉 (#30)

* Add Tokens Studio support, deprecate Figma sync

* Minor docs cleanup

.changeset/chatty-queens-hide.md

@@ -0,0 +1,6 @@
+---
+'@cobalt-ui/core': minor
+'@cobalt-ui/cli': minor
+---
+
+Deprecate Figma sync CLI and core functionality (in favor of Tokens Studio support)

.changeset/clever-rats-hammer.md

@@ -0,0 +1,6 @@
+---
+'@cobalt-ui/core': minor
+'@cobalt-ui/cli': minor
+---
+
+Add Tokens Studio support

.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": [],

.changeset/spotty-mirrors-remain.md

@@ -0,0 +1,5 @@
+---
+'@cobalt-ui/core': patch
+---
+
+Fix bug where $value: `0` wasn’t a valid value

docs/package.json

@@ -14,14 +14,14 @@
     "dev:serve": "astro dev"
   },
   "devDependencies": {
-    "@cobalt-ui/cli": "^1.0.0",
-    "@cobalt-ui/core": "^1.0.0",
-    "@cobalt-ui/plugin-css": "^1.2.0",
-    "@cobalt-ui/plugin-sass": "^1.2.0",
-    "astro": "^2.5.4",
+    "@cobalt-ui/cli": "workspace:^",
+    "@cobalt-ui/core": "workspace:^",
+    "@cobalt-ui/plugin-css": "workspace:^",
+    "@cobalt-ui/plugin-sass": "workspace:^",
+    "astro": "^2.5.7",
     "npm-run-all": "^4.1.5",
     "sass": "^1.62.1",
     "shiki": "^0.14.2",
-    "vite": "^4.3.8"
+    "vite": "^4.3.9"
   }
 }

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">

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>

docs/src/docs-manifest.json

@@ -23,14 +23,14 @@
     {"title": "Guides",          "pathname": "/docs/guides"},
     {"title": "Best Practices",  "pathname": "/docs/guides/best-practices"},
     {"title": "Modes",           "pathname": "/docs/guides/modes"},
-    {"title": "Figma",           "pathname": "/docs/guides/figma"},
+    {"title": "Tokens Studio",   "pathname": "/docs/guides/tokens-studio"},
     {"title": "Create Plugins",  "pathname": "/docs/guides/plugins"},
     {"title": "Plugins",         "pathname": "/docs/plugins"},
     {"title": "CSS",             "pathname": "/docs/plugins/css"},
     {"title": "Sass",            "pathname": "/docs/plugins/sass"},
     {"title": "JS/JSON/TS",      "pathname": "/docs/plugins/js"},
     {"title": "Reference",       "pathname": "/docs/reference"},
-    {"title": "Config",          "pathname": "/docs/reference/config"},
+    {"title": "Config API",      "pathname": "/docs/reference/config"},
     {"title": "About",           "pathname": "/docs/reference/about"}
   ]
 }

docs/src/pages/docs/getting-started/generation.md

@@ -44,6 +44,8 @@ import pluginJS from '@cobalt-ui/plugin-js';
 
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [pluginCSS(), pluginJS()],
 };
 ```

docs/src/pages/docs/getting-started/index.md

@@ -20,19 +20,19 @@ The W3C Community Group’s approach differs in being the [largest collaborative
 
 ## Requirements
 
-- [Node.js](https://nodejs.org) v16 or higher (newer is always recommended).
+- [Node.js](https://nodejs.org) v18 or higher (newer is always recommended).
 
 ## Install
 
 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
 ```
 
@@ -47,13 +47,15 @@ import pluginCSS from '@cobalt-ui/plugin-css';
 
 /** @type import('@cobalt-ui/core').Config */
 export default {
+  tokens: './tokens.json',
+  outDir: './tokens/',
   plugins: [pluginCSS()],
 };
 ```
 
 Run the following command (**co** being short for “Cobalt”):
 
-```
+```bash
 npx co build
 ```
 
@@ -62,7 +64,7 @@ This will generate a **tokens/tokens.css** file in your project for you to use.
 ## Next steps
 
 - [Learn about tokens](/docs/tokens)
-- [Sync with Figma](/docs/guides/figma)
+- [Sync with Figma using Tokens Studio](/docs/guides/tokens-studio)
 - [Learn how to configure Cobalt](/docs/reference/config)
 - [Add plugins](/docs/plugins)