@quieto/design-tokens 0.2.0 → 0.3.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": "0.3.0",
   "description": "Three-tier design tokens as CSS custom properties and a typed JS manifest, with light and dark modes.",
   "type": "module",
   "license": "MIT",

package/tokens.json

@@ -659,6 +659,23 @@
         "$value": "64rem",
         "$type": "dimension",
         "$description": "Container width: page-level content."
+      },
+      "icon": {
+        "sm": {
+          "$value": "1rem",
+          "$type": "dimension",
+          "$description": "Icon: inline with small text, and inside compact controls."
+        },
+        "md": {
+          "$value": "1.25rem",
+          "$type": "dimension",
+          "$description": "Icon: the default, beside body text and in buttons."
+        },
+        "lg": {
+          "$value": "1.5rem",
+          "$type": "dimension",
+          "$description": "Icon: standalone, or leading a message."
+        }
       }
     }
   },
@@ -901,6 +918,10 @@
         "raised": {
           "$value": "{color.neutral.50}",
           "$type": "color"
+        },
+        "inverse": {
+          "$value": "{color.neutral.900}",
+          "$type": "color"
         }
       },
       "content": {
@@ -1105,6 +1126,10 @@
         "raised": {
           "$value": "{color.neutral.800}",
           "$type": "color"
+        },
+        "inverse": {
+          "$value": "{color.neutral.100}",
+          "$type": "color"
         }
       },
       "content": {
@@ -2685,6 +2710,460 @@
       }
     }
   },
+  "component/icon": {
+    "icon": {
+      "sm": {
+        "width": {
+          "$value": "{size.icon.sm}",
+          "$type": "dimension"
+        }
+      },
+      "md": {
+        "width": {
+          "$value": "{size.icon.md}",
+          "$type": "dimension"
+        }
+      },
+      "lg": {
+        "width": {
+          "$value": "{size.icon.lg}",
+          "$type": "dimension"
+        }
+      }
+    }
+  },
+  "component/select": {
+    "select": {
+      "gap": {
+        "$value": "{spacing.100}",
+        "$type": "dimension"
+      },
+      "duration": {
+        "$value": "{animation.default}",
+        "$type": "duration"
+      },
+      "label": {
+        "font-size": {
+          "$value": "{typography.font-size.200}",
+          "$type": "dimension"
+        },
+        "font-weight": {
+          "$value": "{typography.font-weight.medium}",
+          "$type": "fontWeight"
+        },
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.default}",
+              "$type": "color"
+            },
+            "disabled": {
+              "$value": "{color.content.subtle}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "hint": {
+        "font-size": {
+          "$value": "{typography.font-size.100}",
+          "$type": "dimension"
+        },
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.subtle}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "error": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.error}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "control": {
+        "padding-block": {
+          "$value": "{spacing.200}",
+          "$type": "dimension"
+        },
+        "padding-inline": {
+          "$value": "{spacing.300}",
+          "$type": "dimension"
+        },
+        "font-size": {
+          "$value": "{typography.font-size.200}",
+          "$type": "dimension"
+        },
+        "line-height": {
+          "$value": "{typography.line-height.normal}",
+          "$type": "number"
+        },
+        "border-radius": {
+          "$value": "{radius.default}",
+          "$type": "dimension"
+        },
+        "border-width": {
+          "$value": "{border.default}",
+          "$type": "dimension"
+        },
+        "color": {
+          "background": {
+            "rest": {
+              "$value": "{color.background.default}",
+              "$type": "color"
+            },
+            "disabled": {
+              "$value": "{color.background.subtle}",
+              "$type": "color"
+            }
+          },
+          "border": {
+            "rest": {
+              "$value": "{color.border.control}",
+              "$type": "color"
+            },
+            "focus": {
+              "$value": "{color.border.primary}",
+              "$type": "color"
+            },
+            "disabled": {
+              "$value": "{color.border.subtle}",
+              "$type": "color"
+            }
+          },
+          "content": {
+            "rest": {
+              "$value": "{color.content.default}",
+              "$type": "color"
+            },
+            "disabled": {
+              "$value": "{color.content.subtle}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "invalid": {
+        "color": {
+          "border": {
+            "rest": {
+              "$value": "{color.border.error}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "placeholder": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.subtle}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "icon": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.subtle}",
+              "$type": "color"
+            }
+          }
+        }
+      }
+    }
+  },
+  "component/alert": {
+    "alert": {
+      "gap": {
+        "$value": "{spacing.300}",
+        "$type": "dimension"
+      },
+      "padding": {
+        "$value": "{spacing.400}",
+        "$type": "dimension"
+      },
+      "border-radius": {
+        "$value": "{radius.default}",
+        "$type": "dimension"
+      },
+      "border-width": {
+        "$value": "{border.default}",
+        "$type": "dimension"
+      },
+      "font-size": {
+        "$value": "{typography.font-size.200}",
+        "$type": "dimension"
+      },
+      "line-height": {
+        "$value": "{typography.line-height.normal}",
+        "$type": "number"
+      },
+      "color": {
+        "content": {
+          "rest": {
+            "$value": "{color.content.default}",
+            "$type": "color"
+          }
+        }
+      },
+      "heading": {
+        "font-weight": {
+          "$value": "{typography.font-weight.semibold}",
+          "$type": "fontWeight"
+        }
+      },
+      "info": {
+        "color": {
+          "background": {
+            "rest": {
+              "$value": "{color.background.info}",
+              "$type": "color"
+            }
+          },
+          "border": {
+            "rest": {
+              "$value": "{color.border.info}",
+              "$type": "color"
+            }
+          },
+          "content": {
+            "rest": {
+              "$value": "{color.content.info}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "success": {
+        "color": {
+          "background": {
+            "rest": {
+              "$value": "{color.background.success}",
+              "$type": "color"
+            }
+          },
+          "border": {
+            "rest": {
+              "$value": "{color.border.success}",
+              "$type": "color"
+            }
+          },
+          "content": {
+            "rest": {
+              "$value": "{color.content.success}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "warning": {
+        "color": {
+          "background": {
+            "rest": {
+              "$value": "{color.background.warning}",
+              "$type": "color"
+            }
+          },
+          "border": {
+            "rest": {
+              "$value": "{color.border.warning}",
+              "$type": "color"
+            }
+          },
+          "content": {
+            "rest": {
+              "$value": "{color.content.warning}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "error": {
+        "color": {
+          "background": {
+            "rest": {
+              "$value": "{color.background.error}",
+              "$type": "color"
+            }
+          },
+          "border": {
+            "rest": {
+              "$value": "{color.border.error}",
+              "$type": "color"
+            }
+          },
+          "content": {
+            "rest": {
+              "$value": "{color.content.error}",
+              "$type": "color"
+            }
+          }
+        }
+      }
+    }
+  },
+  "component/tooltip": {
+    "tooltip": {
+      "gap": {
+        "$value": "{spacing.200}",
+        "$type": "dimension"
+      },
+      "padding-block": {
+        "$value": "{spacing.100}",
+        "$type": "dimension"
+      },
+      "padding-inline": {
+        "$value": "{spacing.200}",
+        "$type": "dimension"
+      },
+      "max-width": {
+        "$value": "{size.sm}",
+        "$type": "dimension"
+      },
+      "border-radius": {
+        "$value": "{radius.subtle}",
+        "$type": "dimension"
+      },
+      "font-size": {
+        "$value": "{typography.font-size.100}",
+        "$type": "dimension"
+      },
+      "line-height": {
+        "$value": "{typography.line-height.snug}",
+        "$type": "number"
+      },
+      "duration": {
+        "$value": "{animation.default}",
+        "$type": "duration"
+      },
+      "color": {
+        "background": {
+          "rest": {
+            "$value": "{color.background.inverse}",
+            "$type": "color"
+          }
+        },
+        "content": {
+          "rest": {
+            "$value": "{color.content.inverse}",
+            "$type": "color"
+          }
+        }
+      }
+    }
+  },
+  "component/menu": {
+    "menu": {
+      "gap": {
+        "$value": "{spacing.100}",
+        "$type": "dimension"
+      },
+      "padding": {
+        "$value": "{spacing.100}",
+        "$type": "dimension"
+      },
+      "border-radius": {
+        "$value": "{radius.default}",
+        "$type": "dimension"
+      },
+      "border-width": {
+        "$value": "{border.default}",
+        "$type": "dimension"
+      },
+      "box-shadow": {
+        "$value": "{elevation.default}",
+        "$type": "shadow"
+      },
+      "color": {
+        "background": {
+          "rest": {
+            "$value": "{color.background.raised}",
+            "$type": "color"
+          }
+        },
+        "border": {
+          "rest": {
+            "$value": "{color.border.subtle}",
+            "$type": "color"
+          }
+        }
+      },
+      "item": {
+        "gap": {
+          "$value": "{spacing.200}",
+          "$type": "dimension"
+        },
+        "padding-block": {
+          "$value": "{spacing.200}",
+          "$type": "dimension"
+        },
+        "padding-inline": {
+          "$value": "{spacing.300}",
+          "$type": "dimension"
+        },
+        "border-radius": {
+          "$value": "{radius.subtle}",
+          "$type": "dimension"
+        },
+        "font-size": {
+          "$value": "{typography.font-size.200}",
+          "$type": "dimension"
+        },
+        "line-height": {
+          "$value": "{typography.line-height.normal}",
+          "$type": "number"
+        },
+        "color": {
+          "background": {
+            "hover": {
+              "$value": "{color.background.subtle}",
+              "$type": "color"
+            }
+          },
+          "content": {
+            "rest": {
+              "$value": "{color.content.default}",
+              "$type": "color"
+            },
+            "disabled": {
+              "$value": "{color.content.subtle}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "item-icon": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.subtle}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "item-danger": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.danger}",
+              "$type": "color"
+            }
+          }
+        }
+      }
+    }
+  },
   "$themes": [
     {
       "id": "light",
@@ -2712,7 +3191,12 @@
         "component/progress-bar": "enabled",
         "component/accordion": "enabled",
         "component/tabs": "enabled",
-        "component/modal": "enabled"
+        "component/modal": "enabled",
+        "component/icon": "enabled",
+        "component/select": "enabled",
+        "component/alert": "enabled",
+        "component/tooltip": "enabled",
+        "component/menu": "enabled"
       },
       "$figmaStyleReferences": {},
       "$figmaVariableReferences": {},
@@ -2745,7 +3229,12 @@
         "component/progress-bar": "enabled",
         "component/accordion": "enabled",
         "component/tabs": "enabled",
-        "component/modal": "enabled"
+        "component/modal": "enabled",
+        "component/icon": "enabled",
+        "component/select": "enabled",
+        "component/alert": "enabled",
+        "component/tooltip": "enabled",
+        "component/menu": "enabled"
       },
       "$figmaStyleReferences": {},
       "$figmaVariableReferences": {},
@@ -2777,7 +3266,12 @@
       "component/progress-bar",
       "component/accordion",
       "component/tabs",
-      "component/modal"
+      "component/modal",
+      "component/icon",
+      "component/select",
+      "component/alert",
+      "component/tooltip",
+      "component/menu"
     ]
   }
 }