@quieto/design-tokens 0.2.0 → 1.0.0

package/docs/nomenclature.md

@@ -59,7 +59,8 @@ The available category types are:
 - animation
 
 `spacing` is the space between things; `size` is the dimensions of things, such as container
-widths, which outgrow the spacing scale. `opacity` is transparency, as a number from 0 to 1.
+widths, which outgrow the spacing scale, and icon sizes, under the `icon` sub-category
+(`size.icon.md`). `opacity` is transparency, as a number from 0 to 1.
 
 ##### Sub-category (if needed)
 
@@ -68,6 +69,7 @@ The sub-category identifier signifies any deeper design choices that need to be
 The available sub-category types are:
 
 - color or hue name (i.e. "blue" or "green")
+- icon
 - font-size
 - font-family
 - font-weight
@@ -207,6 +209,10 @@ primary button or the check mark in a checked box. It flips with the mode — li
 dark in dark — because filled surfaces lighten in dark mode, where light text on them would fall
 below 4.5:1.
 
+As a background, `inverse` is that filled surface itself: an element that stands out from the page
+in either mode, such as a tooltip. It is dark in light mode and light in dark mode, and is always
+paired with `inverse` content.
+
 The status roles also have **border** colors, tuned to reach 3:1 against the page. Because that is
 exactly the requirement for any non-text mark, they are also what solid status indicators use — a
 progress bar's fill, for example.
@@ -326,6 +332,10 @@ primary button or the check mark in a checked box. It flips with the mode — li
 dark in dark — because filled surfaces lighten in dark mode, where light text on them would fall
 below 4.5:1.
 
+As a background, `inverse` is that filled surface itself: an element that stands out from the page
+in either mode, such as a tooltip. It is dark in light mode and light in dark mode, and is always
+paired with `inverse` content.
+
 The status roles also have **border** colors, tuned to reach 3:1 against the page. Because that is
 exactly the requirement for any non-text mark, they are also what solid status indicators use — a
 progress bar's fill, for example.

package/nomenclature.js

@@ -97,7 +97,8 @@ export const primitive = {
    * (container widths, which outgrow the spacing scale), and `opacity` for
    * transparency. Both were added when the component library first needed them:
    * before that, the modal's widths and backdrop opacity were raw values with
-   * nothing to reference.
+   * nothing to reference. Icon sizes sit under `size` with the `icon`
+   * sub-category (`size.icon.md`), apart from the container widths.
    */
   categories: ['color', 'typography', 'spacing', 'size', 'border', 'shadow', 'opacity', 'animation'],
 
@@ -107,6 +108,7 @@ export const primitive = {
    * below rather than this list.
    */
   subCategories: [
+    'icon',
     'font-size',
     'font-family',
     'font-weight',
@@ -202,7 +204,10 @@ export const semantic = {
    * button, a check mark in a checked box. Every other role describes what the
    * element itself means; this one describes what it sits on. It flips with the
    * mode (light text in light mode, dark in dark) because the filled surfaces
-   * lighten in dark mode, and light text on them falls below 4.5:1.
+   * lighten in dark mode, and light text on them falls below 4.5:1. As a
+   * background, it is that filled surface itself, for an element that stands
+   * out from the page in either mode, such as a tooltip: dark in light mode,
+   * light in dark, always paired with inverse content.
    */
   roles: [
     'default',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quieto/design-tokens",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Three-tier design tokens as CSS custom properties and a typed JS manifest, with light and dark modes.",
   "type": "module",
   "license": "MIT",