Support new spec types (#22)

* feat: support the latest version of the spec This adds support for - Font name - Font weight - Number * fix: add changeset * fix: fix ignore glob for changeset * fix: undo change to changeset config * fix: fix lint error
terrazzoapp · Apr 14, 2023 · 526777f · 526777f
1 parent a1c86bf
commit 526777f
Show file tree

Hide file tree

Showing 59 changed files with 548 additions and 301 deletions.
diff --git a/.changeset/proud-maps-applaud.md b/.changeset/proud-maps-applaud.md
@@ -0,0 +1,9 @@
+---
+'@cobalt-ui/plugin-sass': major
+'@cobalt-ui/plugin-css': major
+'@cobalt-ui/plugin-js': major
+'@cobalt-ui/core': minor
+'@cobalt-ui/cli': minor
+---
+
+Add font name, font weight, and number types; remove font type
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,6 @@
 /packages/utils/src/ansi.ts
 /docs/tokens.json
+want.json
+want.js
+want.d.ts
+examples/*/tokens/*
diff --git a/docs/src/components/Token.astro b/docs/src/components/Token.astro
@@ -14,7 +14,7 @@ const {type: tokenType} = Astro.props;
     ]
   }
   {
-    tokenType === 'font' && [
+    ['fontFamily', 'fontWeight'].includes(tokenType) && [
       <svg class="token-bg">
         <use xlink:href="#hex" />
       </svg>,

diff --git a/docs/src/docs-manifest.json b/docs/src/docs-manifest.json
@@ -4,9 +4,11 @@
     {"title": "Tokens",          "pathname": "/docs/tokens"},
     {"title": "Color",           "pathname": "/docs/tokens/#color"},
     {"title": "Dimension",       "pathname": "/docs/tokens/#dimension"},
-    {"title": "Font",            "pathname": "/docs/tokens/#font"},
+    {"title": "Font Family",     "pathname": "/docs/tokens/#font"},
+    {"title": "Font Weight",     "pathname": "/docs/tokens/#font-weight"},
     {"title": "Duration",        "pathname": "/docs/tokens/#duration"},
     {"title": "Cubic Bézier",    "pathname": "/docs/tokens/#cubic-bezier"},
+    {"title": "Number",          "pathname": "/docs/tokens/#number"},
     {"title": "Link",            "pathname": "/docs/tokens/#link"},
     {"title": "Stroke style",    "pathname": "/docs/tokens/#stroke-style"},
     {"title": "Border",          "pathname": "/docs/tokens/#border"},

diff --git a/docs/src/pages/docs/guides/best-practices.md b/docs/src/pages/docs/guides/best-practices.md
@@ -16,7 +16,7 @@ Prefer **camelCased** properties when possible:
     "typography": {
 -     "base-heading": {
 +     "baseHeading": {
-        "$type": "font",
+        "$type": "fontFamily",
         "$value": "sans-serif"
       }
     }

diff --git a/docs/src/pages/docs/guides/figma.md b/docs/src/pages/docs/guides/figma.md
@@ -174,11 +174,11 @@ export default {
 
 ![](/images/figma-typography.png)
 
-To extract a **Text Style** from Figma, use the `font` or `typography` type.
+To extract a **Text Style** from Figma, use the `fontFamily` or `typography` type.
 
 | Type         | Effect                                                       |
 | :----------- | :----------------------------------------------------------- |
-| `font`       | Extract only the font family name from a style or component. |
+| `fontFamily` | Extract only the font family name from a style or component. |
 | `typography` | Extract all text styles from a style or component.           |
 
 <!-- prettier-ignore -->
@@ -190,7 +190,7 @@ export default {
       {
         url: "https://www.figma.com/file/Mm0nTq0UXZKG1WXu7PeCmS/MyFile?node-id=2%3A2", // “Share” > Copy link
         tokens: [
-          {style: "Brand Sans",                  token: "typography.family.brand-sans", type: "font"},
+          {style: "Brand Sans",                  token: "typography.family.brand-sans", type: "fontFamily"},
           {style: "Typography / Body",           token: "typography.body",              type: "typography"},
           {style: "Typography / Heading 1",      token: "typography.heading-1",         type: "typography"},
           {style: "Typography / Heading 2",      token: "typography.heading-2",         type: "typography"},

diff --git a/docs/src/pages/docs/plugins/css.md b/docs/src/pages/docs/plugins/css.md
@@ -231,7 +231,7 @@ export default {
       transform(token, mode) {
         const oldFont = 'sans-serif';
         const newFont = 'Custom Sans';
-        if (token.$type === 'font') {
+        if (token.$type === 'fontFamily') {
           return token.$value.map((value) => (value === oldFont ? newFont : value));
         }
       },

diff --git a/docs/src/pages/docs/plugins/js.md b/docs/src/pages/docs/plugins/js.md
@@ -50,8 +50,8 @@ You’ll also be able to see any `$description`s specified in your IDE in the fo
 
 In addition, you’ll also find the following exports:
 
-| Name     | Type                                 | Description                                                                                                                    |
-| :------- | :----------------------------------- | :---------------------------------------------------------------------------------------------------------------------------
+| Name | Type | Description |
+| :--- | :--- | :---------- |
 
 # @cobalt-ui/plugin-js
 
@@ -100,8 +100,8 @@ You’ll also be able to see any `$description`s specified in your IDE in the fo
 
 In addition, you’ll also find the following exports:
 
-| Name     | Type     | Description                                                                                         |
-| :------- | :------- | :------------------------------------------------------------------------------------------------
+| Name | Type | Description |
+| :--- | :--- | :---------- |
 
 # @cobalt-ui/plugin-js
 
@@ -150,8 +150,8 @@ You’ll also be able to see any `$description`s specified in your IDE in the fo
 
 In addition, you’ll also find the following exports:
 
-| Name     | Type     | Description                                                                                         |
-| :------- | :------- | :------------------------------------------------------------------------------------------------
+| Name | Type | Description |
+| :--- | :--- | :---------- |
 
 # @cobalt-ui/plugin-js
 
@@ -200,8 +200,8 @@ You’ll also be able to see any `$description`s specified in your IDE in the fo
 
 In addition, you’ll also find the following exports:
 
-| Name     | Type     | Description                                                                                         |
-| :------- | :------- | :------------------------------------------------------------------------------------------------
+| Name | Type | Description |
+| :--- | :--- | :---------- |
 
 # @cobalt-ui/plugin-js
 
@@ -250,8 +250,8 @@ You’ll also be able to see any `$description`s specified in your IDE in the fo
 
 In addition, you’ll also find the following exports:
 
-| Name     | Type     | Description                                                                                         |
-| :------- | :------- | :------------------------------------------------------------------------------------------------
+| Name | Type | Description |
+| :--- | :--- | :---------- |
 
 # @cobalt-ui/plugin-js
 
@@ -300,8 +300,8 @@ You’ll also be able to see any `$description`s specified in your IDE in the fo
 
 In addition, you’ll also find the following exports:
 
-| Name     | Type     | Description                                                                                         |
-| :------- | :------- | :------------------------------------------------------------------------------------------------
+| Name | Type | Description |
+| :--- | :--- | :---------- |
 
 # @cobalt-ui/plugin-js
 
@@ -397,7 +397,7 @@ export default {
       transform(token, mode) {
         const oldFont = 'sans-serif';
         const newFont = 'Custom Sans';
-        if (token.$type === 'font') {
+        if (token.$type === 'fontFamily') {
           return token.$value.map((value) => (value === oldFont ? newFont : value));
         }
       },

diff --git a/docs/src/pages/docs/plugins/sass.md b/docs/src/pages/docs/plugins/sass.md
@@ -32,7 +32,7 @@ export default {
       /** handle specific token types */
       transform(token, mode) {
         // Replace "sans-serif" with "Brand Sans" for font tokens
-        if (token.$type === 'font') {
+        if (token.$type === 'fontFamily') {
           return token.$value.replace('sans-serif', 'Brand Sans');
         }
       },
@@ -207,7 +207,7 @@ export default {
       transform(token, mode) {
         const oldFont = 'sans-serif';
         const newFont = 'Custom Sans';
-        if (token.$type === 'font') {
+        if (token.$type === 'fontFamily') {
           return token.$value.map((value) => (value === oldFont ? newFont : value));
         }
       },

diff --git a/docs/src/pages/docs/tokens/index.astro b/docs/src/pages/docs/tokens/index.astro
@@ -11,7 +11,9 @@ const tokenDef = {
   cubicBezier: 'https://design-tokens.github.io/community-group/format/#cubic-bezier',
   dimension: 'https://design-tokens.github.io/community-group/format/#dimension',
   duration: 'https://design-tokens.github.io/community-group/format/#duration',
-  font: 'https://design-tokens.github.io/community-group/format/#font',
+  fontFamily: 'https://design-tokens.github.io/community-group/format/#font-family',
+  fontWeight: 'https://design-tokens.github.io/community-group/format/#font-weight',
+  number: 'https://design-tokens.github.io/community-group/format/#number',
   gradient: 'https://design-tokens.github.io/community-group/format/#gradient',
   shadow: 'https://design-tokens.github.io/community-group/format/#shadow',
   strokeStyle: 'https://design-tokens.github.io/community-group/format/#stroke-style',
@@ -79,11 +81,11 @@ const tokenDef = {
   />
 
   <h2 id="font">
-    <Token type="font" />
+    <Token type="fontFamily" />
     Font
   </h2>
 
-  <p>A font name as defined in <a href={tokenDef.font} target="_blank"><b>8.2</b></a>.</p>
+  <p>A font name as defined in <a href={tokenDef.fontFamily} target="_blank"><b>8.3</b></a>.</p>
 
   <table>
     <thead>
@@ -95,12 +97,12 @@ const tokenDef = {
       <tr>
         <td><code>$type</code></td>
         <td><code>string</code></td>
-        <td><b>font</b></td>
+        <td><b>fontFamily</b></td>
       </tr>
       <tr>
         <td><code>$value</code></td>
         <td><code>string | string[]</code></td>
-        <td> Either a string for a single font name, or an array of strings to include fallbacks (most preferred first)</td>
+        <td>Either a string for a single font name, or an array of strings to include fallbacks (most preferred first)</td>
       </tr>
     </tbody>
   </table>
@@ -109,11 +111,52 @@ const tokenDef = {
     lang="json"
     code={`{
   "no-fallbacks": {
-    "$type": "font",
+    "$type": "fontFamily",
     "$value": "Graphik Regular"
   },
   "with-fallbacks": {
-    "$type": "font",
+    "$type": "fontFamily",
+    "$value": ["Graphik Regular", "-system-ui", "Helvetica", "sans-serif"]
+  }
+}`}
+  />
+
+  <h2 id="font-weight">
+    <Token type="fontWeight" />
+    Font
+  </h2>
+
+  <p>A font weight as defined in <a href={tokenDef.fontWeight} target="_blank"><b>8.4</b></a>.</p>
+
+  <table>
+    <thead>
+      <th>Property</th>
+      <th>Type</th>
+      <th>Description</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>$type</code></td>
+        <td><code>number</code> or <code>string</code></td>
+        <td><b>fontWeight</b></td>
+      </tr>
+      <tr>
+        <td><code>$value</code></td>
+        <td><code>number | string</code></td>
+        <td>Either a font weight number, or an <a href="https://design-tokens.github.io/community-group/format/#font-weight" target="_blank">approved alias</a> of a font weight number.</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <Code
+    lang="json"
+    code={`{
+  "no-fallbacks": {
+    "$type": "fontFamily",
+    "$value": "Graphik Regular"
+  },
+  "with-fallbacks": {
+    "$type": "fontFamily",
     "$value": ["Graphik Regular", "-system-ui", "Helvetica", "sans-serif"]
   }
 }`}
@@ -124,7 +167,7 @@ const tokenDef = {
     Dimension
   </h2>
 
-  <p>A unit of distance as defined in <a href={tokenDef.dimension} target="_blank"><b>8.3</b></a>.</p>
+  <p>A unit of distance as defined in <a href={tokenDef.dimension} target="_blank"><b>8.2</b></a>.</p>
 
   <table>
     <thead>
@@ -167,7 +210,7 @@ const tokenDef = {
     Duration
   </h2>
 
-  <p>A length of time as defined in <a href={tokenDef.duration} target="_blank"><b>8.4</b></a>.</p>
+  <p>A length of time as defined in <a href={tokenDef.duration} target="_blank"><b>8.5</b></a>.</p>
 
   <table>
     <thead>
@@ -208,7 +251,7 @@ const tokenDef = {
     Cubic bézier
   </h2>
 
-  <p>An easing curve as defined in <a href={tokenDef.cubicBezier} target="_blank"><b>8.5</b></a>.</p>
+  <p>An easing curve as defined in <a href={tokenDef.cubicBezier} target="_blank"><b>8.6</b></a>.</p>
 
   <table>
     <thead>
@@ -252,6 +295,43 @@ const tokenDef = {
 }`}
   />
 
+  <h2 id="number">
+    <Token type="number" />
+    Duration
+  </h2>
+
+  <p>A number as defined in <a href={tokenDef.number} target="_blank"><b>8.7</b></a>.</p>
+
+  <table>
+    <thead>
+      <th>Property</th>
+      <th>Type</th>
+      <th>Description</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>$type</code></td>
+        <td><code>number</code></td>
+        <td><b>number</b></td>
+      </tr>
+      <tr>
+        <td><code>$value</code></td>
+        <td><code>number</code></td>
+        <td>A number, which can be positive, negative, or a fraction.</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <Code
+    lang="json"
+    code={`{
+  "large": {
+    "$type": "number",
+    "$value": 100
+  }
+}`}
+  />
+
   <h2 id="link">
     <Token type="link" />
     Link
@@ -508,7 +588,7 @@ const tokenDef = {
   />
 
   <h2 id="typography">
-    <Token type="font" />
+    <Token type="typography" />
     Typography
   </h2>
 
@@ -614,7 +694,7 @@ const tokenDef = {
     "$description": "Typographic styles",
     "family": {
       "GraphikRegular": {
-        "$type": "font",
+        "$type": "fontFamily",
         "$value": "Graphik Regular"
       }
     }

diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -9,7 +9,7 @@ import Token from '../components/Token.astro';
 import packageJSON from '../../../packages/cli/package.json';
 
 const version = packageJSON.version;
-const tokenTypes = ['color', 'color', 'font', 'font', 'dimension', 'duration', 'link', 'cubic-bezier', 'shadow', 'border', 'stroke-style', 'transition', 'empty', 'empty', 'empty', 'empty', 'empty'];
+const tokenTypes = ['color', 'color', 'fontFamily', 'fontFamily', 'fontWeight', 'fontWeight', 'dimension', 'duration', 'link', 'cubic-bezier', 'shadow', 'border', 'stroke-style', 'transition', 'empty', 'empty', 'empty', 'empty', 'empty'];
 ---
 
 <!DOCTYPE html>

diff --git a/docs/tokens.config.js b/docs/tokens.config.js
@@ -28,7 +28,7 @@ export default {
           {style: 'Red Gradient', token: 'gradient.red', type: 'gradient'},
 
           // typography
-          {style: 'Brand Sans', token: 'typography.family.brand', type: 'font'},
+          {style: 'Brand Sans', token: 'typography.family.brand', type: 'fontFamily'},
           {style: 'Heading 1', token: 'typography.heading-1', type: 'typography'},
           {style: 'Heading 2', token: 'typography.heading-2', type: 'typography'},
           {style: 'Heading 3', token: 'typography.heading-3', type: 'typography'},

diff --git a/docs/tokens.json b/docs/tokens.json
@@ -69,7 +69,7 @@
   },
   "font": {
     "family": {
-      "$type": "font",
+      "$type": "fontFamily",
       "ppNeue": { "$value": ["PP Neue Montreal", "system-ui", "ui-sans-serif", "-apple-system", "Helvetica Neue", "Helvetica", "Arial", "sans-serif"] },
       "mono":   { "$value": ["Red Hat Mono", "ui-monospace", "SF Mono", "Monaco", "Cascadia Mono", "Cascadia Code", "Consolas", "monospace"] }
     },

diff --git a/examples/adobe/tokens.json b/examples/adobe/tokens.json
@@ -244,7 +244,7 @@
   },
   "font": {
     "family": {
-      "$type": "font",
+      "$type": "fontFamily",
       "clean": {"$value": "Adobe Clean"},
       "cleanSerif": {"$value": "Adobe Clean Serif"},
       "cleanHan": {"$value": "Adobe Clean Han"},