@quieto/design-tokens 0.3.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quieto/design-tokens",
-  "version": "0.3.0",
+  "version": "1.0.1",
   "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

@@ -3164,6 +3164,399 @@
       }
     }
   },
+  "component/toast": {
+    "toast": {
+      "gap": {
+        "$value": "{spacing.300}",
+        "$type": "dimension"
+      },
+      "padding": {
+        "$value": "{spacing.400}",
+        "$type": "dimension"
+      },
+      "margin": {
+        "$value": "{spacing.400}",
+        "$type": "dimension",
+        "$description": "Distance from the edge of the viewport to the stack of toasts."
+      },
+      "max-width": {
+        "$value": "{size.sm}",
+        "$type": "dimension"
+      },
+      "border-radius": {
+        "$value": "{radius.default}",
+        "$type": "dimension"
+      },
+      "border-width": {
+        "$value": "{border.default}",
+        "$type": "dimension"
+      },
+      "box-shadow": {
+        "$value": "{elevation.default}",
+        "$type": "shadow"
+      },
+      "font-size": {
+        "$value": "{typography.font-size.200}",
+        "$type": "dimension"
+      },
+      "line-height": {
+        "$value": "{typography.line-height.normal}",
+        "$type": "number"
+      },
+      "duration": {
+        "$value": "{animation.subtle}",
+        "$type": "duration"
+      },
+      "color": {
+        "background": {
+          "rest": {
+            "$value": "{color.background.raised}",
+            "$type": "color"
+          }
+        },
+        "border": {
+          "rest": {
+            "$value": "{color.border.subtle}",
+            "$type": "color"
+          }
+        },
+        "content": {
+          "rest": {
+            "$value": "{color.content.default}",
+            "$type": "color"
+          }
+        }
+      },
+      "heading": {
+        "font-weight": {
+          "$value": "{typography.font-weight.semibold}",
+          "$type": "fontWeight"
+        }
+      },
+      "info": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.info}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "success": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.success}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "warning": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.warning}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "error": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.error}",
+              "$type": "color"
+            }
+          }
+        }
+      }
+    }
+  },
+  "component/checkbox-group": {
+    "checkbox-group": {
+      "gap": {
+        "$value": "{spacing.200}",
+        "$type": "dimension"
+      },
+      "label": {
+        "font-size": {
+          "$value": "{typography.font-size.200}",
+          "$type": "dimension"
+        },
+        "font-weight": {
+          "$value": "{typography.font-weight.semibold}",
+          "$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"
+            }
+          }
+        }
+      }
+    }
+  },
+  "component/spinner": {
+    "spinner": {
+      "border-width": {
+        "$value": "{border.primary}",
+        "$type": "dimension"
+      },
+      "sm": {
+        "width": {
+          "$value": "{size.icon.sm}",
+          "$type": "dimension"
+        }
+      },
+      "md": {
+        "width": {
+          "$value": "{size.icon.md}",
+          "$type": "dimension"
+        }
+      },
+      "lg": {
+        "width": {
+          "$value": "{size.icon.lg}",
+          "$type": "dimension"
+        }
+      },
+      "color": {
+        "content": {
+          "rest": {
+            "$value": "{color.content.primary.rest}",
+            "$type": "color"
+          }
+        },
+        "border": {
+          "rest": {
+            "$value": "{color.border.subtle}",
+            "$type": "color"
+          }
+        }
+      }
+    }
+  },
+  "component/avatar": {
+    "avatar": {
+      "border-radius": {
+        "$value": "{border.radius.full}",
+        "$type": "dimension"
+      },
+      "font-weight": {
+        "$value": "{typography.font-weight.medium}",
+        "$type": "fontWeight"
+      },
+      "sm": {
+        "width": {
+          "$value": "{spacing.500}",
+          "$type": "dimension",
+          "$description": "Square, from the spacing scale, whose steps these sizes match: there is no size step this small."
+        },
+        "font-size": {
+          "$value": "{typography.font-size.100}",
+          "$type": "dimension"
+        }
+      },
+      "md": {
+        "width": {
+          "$value": "{spacing.600}",
+          "$type": "dimension",
+          "$description": "Square, from the spacing scale, whose steps these sizes match: there is no size step this small."
+        },
+        "font-size": {
+          "$value": "{typography.font-size.200}",
+          "$type": "dimension"
+        }
+      },
+      "lg": {
+        "width": {
+          "$value": "{spacing.700}",
+          "$type": "dimension",
+          "$description": "Square, from the spacing scale, whose steps these sizes match: there is no size step this small."
+        },
+        "font-size": {
+          "$value": "{typography.font-size.400}",
+          "$type": "dimension"
+        }
+      },
+      "color": {
+        "background": {
+          "rest": {
+            "$value": "{color.background.neutral}",
+            "$type": "color"
+          }
+        },
+        "content": {
+          "rest": {
+            "$value": "{color.content.default}",
+            "$type": "color"
+          }
+        }
+      }
+    }
+  },
+  "component/breadcrumbs": {
+    "breadcrumbs": {
+      "gap": {
+        "$value": "{spacing.200}",
+        "$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.primary.rest}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.content.primary.hover}",
+            "$type": "color"
+          }
+        }
+      },
+      "current": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.default}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "separator": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.subtle}",
+              "$type": "color"
+            }
+          }
+        }
+      }
+    }
+  },
+  "component/pagination": {
+    "pagination": {
+      "gap": {
+        "$value": "{spacing.100}",
+        "$type": "dimension"
+      },
+      "min-width": {
+        "$value": "{spacing.600}",
+        "$type": "dimension",
+        "$description": "A page button is at least this wide, so single digits make a square."
+      },
+      "height": {
+        "$value": "{spacing.600}",
+        "$type": "dimension"
+      },
+      "padding-inline": {
+        "$value": "{spacing.200}",
+        "$type": "dimension"
+      },
+      "border-radius": {
+        "$value": "{radius.default}",
+        "$type": "dimension"
+      },
+      "font-size": {
+        "$value": "{typography.font-size.200}",
+        "$type": "dimension"
+      },
+      "font-weight": {
+        "$value": "{typography.font-weight.medium}",
+        "$type": "fontWeight"
+      },
+      "duration": {
+        "$value": "{animation.default}",
+        "$type": "duration"
+      },
+      "color": {
+        "background": {
+          "hover": {
+            "$value": "{color.background.subtle}",
+            "$type": "color"
+          }
+        },
+        "content": {
+          "rest": {
+            "$value": "{color.content.default}",
+            "$type": "color"
+          },
+          "disabled": {
+            "$value": "{color.content.subtle}",
+            "$type": "color"
+          }
+        }
+      },
+      "current": {
+        "color": {
+          "background": {
+            "rest": {
+              "$value": "{color.background.primary.rest}",
+              "$type": "color"
+            }
+          },
+          "content": {
+            "rest": {
+              "$value": "{color.content.inverse}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "ellipsis": {
+        "color": {
+          "content": {
+            "rest": {
+              "$value": "{color.content.subtle}",
+              "$type": "color"
+            }
+          }
+        }
+      }
+    }
+  },
   "$themes": [
     {
       "id": "light",
@@ -3196,7 +3589,13 @@
         "component/select": "enabled",
         "component/alert": "enabled",
         "component/tooltip": "enabled",
-        "component/menu": "enabled"
+        "component/menu": "enabled",
+        "component/toast": "enabled",
+        "component/checkbox-group": "enabled",
+        "component/spinner": "enabled",
+        "component/avatar": "enabled",
+        "component/breadcrumbs": "enabled",
+        "component/pagination": "enabled"
       },
       "$figmaStyleReferences": {},
       "$figmaVariableReferences": {},
@@ -3234,7 +3633,13 @@
         "component/select": "enabled",
         "component/alert": "enabled",
         "component/tooltip": "enabled",
-        "component/menu": "enabled"
+        "component/menu": "enabled",
+        "component/toast": "enabled",
+        "component/checkbox-group": "enabled",
+        "component/spinner": "enabled",
+        "component/avatar": "enabled",
+        "component/breadcrumbs": "enabled",
+        "component/pagination": "enabled"
       },
       "$figmaStyleReferences": {},
       "$figmaVariableReferences": {},
@@ -3271,7 +3676,13 @@
       "component/select",
       "component/alert",
       "component/tooltip",
-      "component/menu"
+      "component/menu",
+      "component/toast",
+      "component/checkbox-group",
+      "component/spinner",
+      "component/avatar",
+      "component/breadcrumbs",
+      "component/pagination"
     ]
   }
 }