Even more docs fixes (#40)

Author: drwpow

docs/src/components/CobaltSm.astro

@@ -2,16 +2,20 @@
   @use '../../tokens' as *;
 
   .box {
-    --size: 1.625rem;
+    --size: 1.25rem;
     align-items: flex-end;
     background-color: token('color.blue.50');
+    border: 1px solid token('color.ui.contrast.0');
+    box-sizing: content-box;
     color: token('color.white');
     display: flex;
     font-size: 0.75rem;
     font-weight: 500;
-    line-height: 0.8;
     height: var(--size);
     justify-content: flex-end;
+    line-height: 0.8;
+    margin-left: -1px; // account for border
+    margin-top: -1px; // account for border
     padding: 0.25rem;
     width: var(--size);
   }

docs/src/pages/docs/plugins/css.md

@@ -11,7 +11,7 @@ Automatically generates 🌈 [**P3 colors**](https://developer.mozilla.org/en-US
 
 ## Setup
 
-```
+```bash
 npm i -D @cobalt-ui/plugin-css
 ```
 

docs/src/pages/docs/plugins/js.md

@@ -7,7 +7,7 @@ layout: ../../../layouts/docs.astro
 
 Generate JS, TS, and JSON output from design tokens.
 
-```
+```bash
 npm i -D @cobalt-ui/plugin-js
 ```
 

docs/src/pages/docs/plugins/sass.md

@@ -9,7 +9,7 @@ Generate Sass output for [Cobalt](https://cobalt-ui.pages.dev) from design token
 
 ## Setup
 
-```
+```bash
 npm i -D @cobalt-ui/plugin-sass
 ```
 

docs/src/pages/docs/reference/about.md

@@ -7,16 +7,17 @@ layout: ../../../layouts/docs.astro
 
 ## Project Goals
 
-The project goals are subject to change, but currently are encompassed by 3 points:
-
 1. Support the complete and full [W3C Design Tokens CG spec](https://design-tokens.github.io/community-group/format)
-2. Maintain a pluggable interface, where users can write their own plugins or the community can contribute plugins
-3. Make syncing from Figma easy and automatable
+2. Support a pluggable and configurable architecture, enabling users and the community to write their own plugins to generate any format
+3. Make syncing from Figma easy and automatable ([docs](/docs/guides/tokens-studio))
 
 ## Why the name “Cobalt”?
 
 The name **Cobalt** has three meanings:
 
-1. Cobalt is an [element on the periodic table](https://en.wikipedia.org/wiki/Cobalt) in reference to design tokens being the “atoms” of design systems.
-2. Just as blue pigment (cobalt or ultramarine) was [the last “missing piece“ in paint colors](https://artuk.org/discover/stories/colour-in-art-a-brief-history-of-blue-pigment), having an easy-to-use system to manage design tokens aims to be the “missing piece” to design management.
-3. Blue is also a reference to a [blueprint](https://en.wikipedia.org/wiki/Blueprint) that acts as the reference for a design system.
+1. Cobalt [the element](https://en.wikipedia.org/wiki/Cobalt) is a nod to design tokens being the “atoms” of your design system<br />
+   _Fun fact: the crystalline structure of Cobalt is hexagonal_
+2. Cobalt [the pigment](https://artsartistsartwork.com/history-of-the-colour-blue-in-art/) is a nod to blue being the last missing color in art history, just as design tokens are the last missing piece of design systems<br />
+   _Fun fact: Van Gogh once said “Cobalt is a divine colour and there is nothing so beautiful for putting atmosphere around things”_
+3. Cobalt the color is a nod to [blueprints](https://en.wikipedia.org/wiki/Blueprint)<br />
+   _Fun fact: blueprints originally were colored with Prussian Blue (ferrous ferrocyanide), not Cobalt, for cost reasons_

docs/src/pages/docs/reference/config.md

@@ -31,10 +31,10 @@ To load tokens from an npm package, update `config.tokens` to point to the **ful
 
 ## Syncing with Figma
 
-You can sync tokens with Figma by using the [Tokens Studio for Figma](../guides/tokens-studio) plugin.
+You can sync tokens with Figma by using the [Tokens Studio for Figma](/docs/guides/tokens-studio) plugin.
 
 ## Plugins
 
 Each plugin comes with its own rules and setup. Follow the corresponding plugin guide to enable code generation:
 
-👉 **[View plugins](../plugins)**
+👉 **[View plugins](/docs/plugins)**

docs/src/pages/docs/tokens/index.astro

@@ -26,17 +26,16 @@ const tokenDef = {
   <h1>Tokens</h1>
 
   <p>
-    Tokens are defined via the <a href="https://design-tokens.github.io/community-group/format/" target="_blank">the W3C Design Tokens format</a> schema (Apr 2023). Cobalt aims to supports 100% of the spec as-outlined, but with the following
-    known extensions:
+    Tokens are defined via the <a href="https://design-tokens.github.io/community-group/format/" target="_blank">the W3C Design Tokens format</a> schema (Apr 2023). Cobalt supports 100% of the spec, but with the following changes:
   </p>
 
   <ul>
-    <li>Cobalt supports the <a href="#link">link</a> type</li>
+    <li>Cobalt supports assets via the <a href="#link">link</a> type</li>
     <li>Cobalt introduces the concept of <a href="#modes">Modes</a></li>
-    <li>While the spec technically prohibits unknown keys or properties; Cobalt ignores them.</li>
+    <li>Cobalt ignores unknown properties rather than throwing errors as the spec requires.</li>
   </ul>
 
-  <p>Any other deviations can be treated as unintentional (so please <a href="https://github.com/drwpow/cobalt-ui/issues">file an issue!</a>).</p>
+  <p>Any other deviations can be treated as unintentional (please <a href="https://github.com/drwpow/cobalt-ui/issues">file an issue!</a>).</p>
 
   <h2 id="color">
     <Token type="color" />

packages/plugin-css/README.md

@@ -6,7 +6,7 @@ Automatically generates 🌈 [**P3 colors**](https://developer.mozilla.org/en-US
 
 ## Setup
 
-```
+```bash
 npm i -D @cobalt-ui/plugin-css
 ```
 

packages/plugin-js/README.md

@@ -2,7 +2,7 @@
 
 Generate JS, TS, and JSON output from design tokens.
 
-```
+```bash
 npm i -D @cobalt-ui/plugin-js
 ```
 

packages/plugin-sass/README.md

@@ -4,7 +4,7 @@ Generate Sass output for [Cobalt](https://cobalt-ui.pages.dev) from design token
 
 ## Setup
 
-```
+```bash
 npm i -D @cobalt-ui/plugin-sass
 ```