@alessandrogiordano/stk 1.1.0

package/tokens/base/shadows.json

@@ -0,0 +1,35 @@
+{
+  "shadow": {
+    "color": {
+      "value": "0 0 0",
+      "type": "color",
+      "$description": "RGB values for shadow color"
+    },
+    "opacity": {
+      "value": "0.08",
+      "type": "number",
+      "$description": "Shadow opacity — light mode"
+    },
+    "key": {
+      "xs": { "value": "0px 1px 4px 0px",  "type": "shadow", "$description": "Key light XS" },
+      "sm": { "value": "0px 2px 8px 0px",  "type": "shadow", "$description": "Key light SM" },
+      "md": { "value": "0px 3px 12px 0px", "type": "shadow", "$description": "Key light MD" },
+      "lg": { "value": "0px 4px 16px 0px", "type": "shadow", "$description": "Key light LG" },
+      "xl": { "value": "0px 2px 8px 0px",  "type": "shadow", "$description": "Key light XL" }
+    },
+    "ambient": {
+      "xs": { "value": "0px 2px 8px 0px",  "type": "shadow", "$description": "Ambient light XS" },
+      "sm": { "value": "0px 3px 12px 0px", "type": "shadow", "$description": "Ambient light SM" },
+      "md": { "value": "0px 4px 16px 0px", "type": "shadow", "$description": "Ambient light MD" },
+      "lg": { "value": "0px 5px 20px 0px", "type": "shadow", "$description": "Ambient light LG" },
+      "xl": { "value": "0px 6px 24px 0px", "type": "shadow", "$description": "Ambient light XL" }
+    },
+    "preset": {
+      "xs": { "value": "surface",          "type": "shadow", "$description": "Cards, panels — surface level elements" },
+      "sm": { "value": "non-modal",        "type": "shadow", "$description": "Non-modal elements" },
+      "md": { "value": "sticky",           "type": "shadow", "$description": "Sticky elements" },
+      "lg": { "value": "non-modal-sticky", "type": "shadow", "$description": "Non-modal elements on sticky surfaces" },
+      "xl": { "value": "modal",            "type": "shadow", "$description": "Modal elements" }
+    }
+  }
+}

package/tokens/base/spacing.json

@@ -0,0 +1,12 @@
+{
+  "spacing": {
+    "xxs":  { "value": "4px",  "type": "spacing" },
+    "xs":   { "value": "8px",  "type": "spacing" },
+    "sm":   { "value": "12px", "type": "spacing" },
+    "md":   { "value": "16px", "type": "spacing" },
+    "lg":   { "value": "24px", "type": "spacing" },
+    "xl":   { "value": "32px", "type": "spacing" },
+    "xxl":  { "value": "48px", "type": "spacing" },
+    "xxxl": { "value": "64px", "type": "spacing" }
+  }
+}

package/tokens/base/typography.json

@@ -0,0 +1,17 @@
+{
+  "typography": {
+    "config": {
+      "base":  { "value": 16,  "type": "number" },
+      "ratio": { "value": 1.2, "type": "number" }
+    },
+    "size": {
+      "xs":   { "value": "11px", "type": "dimension" },
+      "sm":   { "value": "13px", "type": "dimension" },
+      "md":   { "value": "16px", "type": "dimension" },
+      "lg":   { "value": "19px", "type": "dimension" },
+      "xl":   { "value": "23px", "type": "dimension" },
+      "xxl":  { "value": "28px", "type": "dimension" },
+      "xxxl": { "value": "33px", "type": "dimension" }
+    }
+  }
+}

package/tokens/components/badge-status.json

@@ -0,0 +1,66 @@
+{
+  "badge-status": {
+    "bg": {
+      "neutral": { "value": "{surface.neutral.subtle}",      "type": "color", "$description": "Neutral variant background" },
+      "brand-1": { "value": "{surface.brand-1.subtlest}",    "type": "color", "$description": "Brand-1 variant background" },
+      "brand-2": { "value": "{surface.brand-2.subtlest}",    "type": "color", "$description": "Brand-2 variant background" },
+      "brand-3": { "value": "{surface.brand-3.subtlest}",    "type": "color", "$description": "Brand-3 variant background" },
+      "success":  { "value": "{surface.news.subtlest}",       "type": "color", "$description": "Success variant background" },
+      "danger":   { "value": "{surface.danger.subtlest}",     "type": "color", "$description": "Danger variant background" },
+      "alert":    { "value": "{surface.alert.subtlest}",      "type": "color", "$description": "Alert variant background" },
+      "info":     { "value": "{surface.info.subtlest}",       "type": "color", "$description": "Info variant background" },
+      "ai":       { "value": "{surface.ai.subtlest}",         "type": "color", "$description": "AI variant background" }
+    },
+    "text": {
+      "neutral": { "value": "{text.default}",  "type": "color", "$description": "Neutral variant text" },
+      "brand-1": { "value": "{text.brand-1}",  "type": "color", "$description": "Brand-1 variant text" },
+      "brand-2": { "value": "{text.brand-2}",  "type": "color", "$description": "Brand-2 variant text" },
+      "brand-3": { "value": "{text.brand-3}",  "type": "color", "$description": "Brand-3 variant text" },
+      "success":  { "value": "{text.news}",     "type": "color", "$description": "Success variant text" },
+      "danger":   { "value": "{text.danger}",   "type": "color", "$description": "Danger variant text" },
+      "alert":    { "value": "{text.alert}",    "type": "color", "$description": "Alert variant text" },
+      "info":     { "value": "{text.info}",     "type": "color", "$description": "Info variant text" },
+      "ai":       { "value": "{text.ai}",       "type": "color", "$description": "AI variant text" }
+    },
+    "border-color": {
+      "value": "{border.default}",
+      "type": "color",
+      "$description": "Badge border — defaults to transparent via CSS; semantic token wired for override"
+    },
+    "border-width": {
+      "value": "{border.width.sm}",
+      "type": "borderWidth",
+      "$description": "Badge border width — 1px"
+    },
+    "radius": {
+      "value": "{radius.md}",
+      "type": "borderRadius",
+      "$description": "Badge corner radius — 8px"
+    },
+    "font-size": {
+      "value": "{typography.size.xs}",
+      "type": "dimension",
+      "$description": "Badge label size — 11px (xs)"
+    },
+    "spacing-h": {
+      "value": "{spacing.xs}",
+      "type": "spacing",
+      "$description": "Horizontal padding — 8px"
+    },
+    "spacing-v": {
+      "value": "{spacing.xxs}",
+      "type": "spacing",
+      "$description": "Vertical padding — 4px"
+    },
+    "spacing-gap": {
+      "value": "{spacing.xxs}",
+      "type": "spacing",
+      "$description": "Gap between dot/icon and label — 4px"
+    },
+    "dot-size": {
+      "value": "{spacing.xs}",
+      "type": "dimension",
+      "$description": "Status dot diameter — 8px"
+    }
+  }
+}

package/tokens/components/button.json

@@ -0,0 +1,152 @@
+{
+  "button": {
+    "sm": {
+      "spacing": {
+        "horizontal": { "value": "{spacing.sm}", "type": "spacing",      "$description": "Horizontal padding sm — 12px via spacing/sm" },
+        "vertical":   { "value": "{spacing.xs}", "type": "spacing",      "$description": "Vertical padding sm — 8px via spacing/xs" },
+        "gap":        { "value": "{spacing.xs}", "type": "spacing",      "$description": "Icon-label gap sm — 8px via spacing/xs" }
+      },
+      "radius":       { "value": "{radius.sm}", "type": "borderRadius",  "$description": "Corner radius sm — 4px via radius/sm" }
+    },
+    "md": {
+      "spacing": {
+        "horizontal": { "value": "{spacing.md}", "type": "spacing",      "$description": "Horizontal padding md — 16px via spacing/md" },
+        "vertical":   { "value": "{spacing.xs}", "type": "spacing",      "$description": "Vertical padding md — 8px via spacing/xs" },
+        "gap":        { "value": "{spacing.xs}", "type": "spacing",      "$description": "Icon-label gap md — 8px via spacing/xs" }
+      },
+      "radius":       { "value": "{radius.md}", "type": "borderRadius",  "$description": "Corner radius md — 8px via radius/md" }
+    },
+    "lg": {
+      "spacing": {
+        "horizontal": { "value": "{spacing.lg}", "type": "spacing",      "$description": "Horizontal padding lg — 24px via spacing/lg" },
+        "vertical":   { "value": "{spacing.md}", "type": "spacing",      "$description": "Vertical padding lg — 16px via spacing/md" },
+        "gap":        { "value": "{spacing.sm}", "type": "spacing",      "$description": "Icon-label gap lg — 12px via spacing/sm" }
+      },
+      "radius":       { "value": "{radius.md}", "type": "borderRadius",  "$description": "Corner radius lg — 8px via radius/md" }
+    },
+    "primary": {
+      "background": {
+        "color":      { "value": "{surface.brand-1.strong}",    "type": "color", "$description": "Primary button background" }
+      },
+      "text": {
+        "color":      { "value": "{text.inverse}",              "type": "color", "$description": "Primary button label" }
+      },
+      "icon": {
+        "color":      { "value": "{text.inverse}",              "type": "color", "$description": "Primary button icon" }
+      },
+      "active": {
+        "background": {
+          "color":    { "value": "{surface.brand-1.strongest}", "type": "color", "$description": "Primary button active/pressed background" }
+        }
+      },
+      "disabled": {
+        "background": {
+          "color":    { "value": "{state.disabled.bg}",         "type": "color", "$description": "Primary button disabled background" }
+        },
+        "text": {
+          "color":    { "value": "{state.disabled.text}",       "type": "color", "$description": "Primary button disabled label" }
+        },
+        "icon": {
+          "color":    { "value": "{state.disabled.text}",       "type": "color", "$description": "Primary button disabled icon" }
+        }
+      },
+      "loading": {
+        "background": {
+          "color":    { "value": "{surface.brand-1.strong}",    "type": "color", "$description": "Primary button loading background — same as default" }
+        }
+      }
+    },
+    "ghost": {
+      "background": {
+        "color":      { "value": "{surface.neutral.subtlest}", "type": "color", "$description": "Ghost button background" }
+      },
+      "text": {
+        "color":      { "value": "{text.default}",             "type": "color", "$description": "Ghost button label" }
+      },
+      "icon": {
+        "color":      { "value": "{text.default}",             "type": "color", "$description": "Ghost button icon" }
+      },
+      "active": {
+        "background": {
+          "color":    { "value": "{surface.neutral.default}",  "type": "color", "$description": "Ghost button active/pressed background" }
+        },
+        "press": {
+          "text": {
+            "color":  { "value": "{text.default}",             "type": "color", "$description": "Ghost button active+pressed label" }
+          },
+          "icon": {
+            "color":  { "value": "{text.default}",             "type": "color", "$description": "Ghost button active+pressed icon" }
+          }
+        }
+      },
+      "disabled": {
+        "background": {
+          "color":    { "value": "{state.disabled.bg}",        "type": "color", "$description": "Ghost button disabled background" }
+        },
+        "text": {
+          "color":    { "value": "{state.disabled.text}",      "type": "color", "$description": "Ghost button disabled label" }
+        },
+        "icon": {
+          "color":    { "value": "{state.disabled.text}",      "type": "color", "$description": "Ghost button disabled icon" }
+        }
+      },
+      "loading": {
+        "background": {
+          "color":    { "value": "{surface.transparent}",      "type": "color", "$description": "Ghost button loading background — transparent to reveal spinner only" }
+        }
+      }
+    },
+    "danger": {
+      "background": {
+        "color":      { "value": "{surface.danger.strong}",    "type": "color", "$description": "Danger button background" }
+      },
+      "text": {
+        "color":      { "value": "{text.inverse}",             "type": "color", "$description": "Danger button label" }
+      },
+      "icon": {
+        "color":      { "value": "{text.inverse}",             "type": "color", "$description": "Danger button icon" }
+      },
+      "active": {
+        "background": {
+          "color":    { "value": "{surface.danger.strongest}", "type": "color", "$description": "Danger button active/pressed background" }
+        }
+      },
+      "disabled": {
+        "background": {
+          "color":    { "value": "{state.disabled.bg}",        "type": "color", "$description": "Danger button disabled background" }
+        },
+        "text": {
+          "color":    { "value": "{state.disabled.text}",      "type": "color", "$description": "Danger button disabled label" }
+        },
+        "icon": {
+          "color":    { "value": "{state.disabled.text}",      "type": "color", "$description": "Danger button disabled icon" }
+        }
+      },
+      "loading": {
+        "background": {
+          "color":    { "value": "{surface.danger.strong}",    "type": "color", "$description": "Danger button loading background — same as default" }
+        }
+      }
+    },
+    "hover": {
+      "overlay": {
+        "color":      { "value": "{state.hover}",  "type": "color", "$description": "Hover state overlay — applied on top of any button variant" }
+      }
+    },
+    "press": {
+      "overlay": {
+        "color":      { "value": "{state.active}", "type": "color", "$description": "Press state overlay" }
+      }
+    },
+    "active-hover": {
+      "overlay": {
+        "color":      { "value": "{state.hover}",  "type": "color", "$description": "Hover overlay when button is in active state" }
+      }
+    },
+    "active-press": {
+      "overlay": {
+        "color":      { "value": "{state.active}", "type": "color", "$description": "Press overlay when button is in active state" }
+      }
+    }
+  }
+}

package/tokens/components/card.json

@@ -0,0 +1,19 @@
+{
+  "card": {
+    "bg": {
+      "value": "{surface.neutral.white}",
+      "type": "color",
+      "$description": "Card background"
+    },
+    "border": {
+      "value": "{border.subtle}",
+      "type": "color",
+      "$description": "Card border color"
+    },
+    "radius": {
+      "value": "{radius.lg}",
+      "type": "borderRadius",
+      "$description": "Card corner radius"
+    }
+  }
+}

package/tokens/components/checkbox.json

@@ -0,0 +1,34 @@
+{
+  "checkbox": {
+    "size":   { "value": "{spacing.md}", "type": "spacing", "$description": "Checkbox box width/height — 16px via spacing/md" },
+    "check": {
+      "size":  { "value": "10", "type": "dimension", "$description": "Checkmark icon size — 10px (justified: ~60% of box; no exact semantic token between spacing/xs=8 and spacing/sm=12)" },
+      "color": { "value": "{text.inverse}", "type": "color", "$description": "Checkmark icon fill — inverse for contrast on brand background" }
+    },
+    "border": {
+      "width":         { "value": "{border.width.sm}", "type": "borderWidth", "$description": "Box stroke width — 1px via border/width/sm" },
+      "color-default": { "value": "{border.default}",  "type": "color",       "$description": "Unselected border color" },
+      "color-hover":   { "value": "{border.strong}",   "type": "color",       "$description": "Hovered border color" },
+      "color-error":   { "value": "{border.danger}",   "type": "color",       "$description": "Error state border color" }
+    },
+    "radius": { "value": "{radius.xs}", "type": "borderRadius", "$description": "Box corner radius — 2px via radius/xs" },
+    "bg": {
+      "default":       { "value": "{surface.neutral.subtlest}",  "type": "color", "$description": "Unselected background" },
+      "hover":         { "value": "{surface.neutral.subtle}",    "type": "color", "$description": "Hovered background" },
+      "press":         { "value": "{surface.neutral.default}",   "type": "color", "$description": "Pressed background" },
+      "checked":       { "value": "{surface.brand-1.strong}",    "type": "color", "$description": "Checked fill" },
+      "checked-hover": { "value": "{surface.brand-1.bold}",      "type": "color", "$description": "Checked + hovered fill" },
+      "checked-press": { "value": "{surface.brand-1.strongest}", "type": "color", "$description": "Checked + pressed fill" },
+      "disabled":      { "value": "{state.disabled.bg}",         "type": "color", "$description": "Disabled background" }
+    },
+    "focus-ring": {
+      "color":         { "value": "{border.focus}", "type": "color", "$description": "Focus ring color" }
+    },
+    "label": {
+      "color":         { "value": "{text.default}",        "type": "color", "$description": "Label text color" },
+      "disabled-color":{ "value": "{state.disabled.text}", "type": "color", "$description": "Disabled label color" }
+    },
+    "gap":             { "value": "{spacing.xs}", "type": "spacing", "$description": "Gap between checkbox box and label — 8px via spacing/xs" },
+    "required-color":  { "value": "{text.subtle}", "type": "color",   "$description": "Required asterisk color" }
+  }
+}

package/tokens/components/image.json

@@ -0,0 +1,9 @@
+{
+  "image": {
+    "bg":     { "value": "{surface.neutral.subtlest}", "type": "color",        "$description": "Image placeholder background" },
+    "radius": { "value": "{radius.md}",                "type": "borderRadius", "$description": "Image container corner radius" },
+    "selection": {
+      "bg": { "value": "{surface.neutral.white}", "type": "color", "$description": "Background behind the selection control (checkbox/radio) for contrast over the image" }
+    }
+  }
+}

package/tokens/components/list-item.json

@@ -0,0 +1,87 @@
+{
+  "list-item": {
+    "bg": {
+      "default": {
+        "value": "{surface.neutral.white}",
+        "type": "color",
+        "$description": "Default background"
+      },
+      "hover": {
+        "value": "{state.hover}",
+        "type": "color",
+        "$description": "Background on hover"
+      },
+      "press": {
+        "value": "{state.active}",
+        "type": "color",
+        "$description": "Background while pressed"
+      },
+      "selected": {
+        "value": "{state.selected}",
+        "type": "number",
+        "$description": "Selected state overlay opacity — apply over brand color via rgb(from …)"
+      },
+      "disabled": {
+        "value": "{state.disabled.bg}",
+        "type": "color",
+        "$description": "Background when disabled"
+      }
+    },
+    "text": {
+      "title": {
+        "value": "{text.default}",
+        "type": "color",
+        "$description": "Title text color"
+      },
+      "description": {
+        "value": "{text.subtle}",
+        "type": "color",
+        "$description": "Description text color"
+      },
+      "disabled": {
+        "value": "{state.disabled.text}",
+        "type": "color",
+        "$description": "Text color when disabled"
+      }
+    },
+    "icon": {
+      "color": {
+        "value": "{icon.default}",
+        "type": "color",
+        "$description": "Left icon color"
+      },
+      "size": {
+        "value": "{spacing.md}",
+        "type": "sizing",
+        "$description": "Left icon width and height"
+      }
+    },
+    "spacing": {
+      "padding-x": {
+        "value": "{spacing.sm}",
+        "type": "spacing",
+        "$description": "Horizontal padding (compact)"
+      },
+      "padding-y": {
+        "value": "{spacing.xs}",
+        "type": "spacing",
+        "$description": "Vertical padding (compact)"
+      },
+      "gap": {
+        "value": "{spacing.xs}",
+        "type": "spacing",
+        "$description": "Gap between icon, content and slot"
+      }
+    },
+    "radius": {
+      "value": "{radius.sm}",
+      "type": "borderRadius",
+      "$description": "Corner radius"
+    },
+    "min-height": {
+      "value": "40px",
+      "type": "sizing",
+      "$description": "Minimum row height — matches Figma variant height (40px)"
+    }
+  }
+}

package/tokens/components/radio-button.json

@@ -0,0 +1,46 @@
+{
+  "radio-button": {
+    "size":  { "value": "{spacing.md}", "type": "spacing", "$description": "Radio circle diameter — 16px via spacing/md" },
+    "dot": {
+      "size":  { "value": "6", "type": "dimension", "$description": "Inner dot diameter — 6px (justified: no exact semantic token between spacing/xxs=4 and spacing/xs=8)" },
+      "color": { "value": "{text.inverse}", "type": "color", "$description": "Inner dot fill — inverse for contrast on brand background" }
+    },
+    "border": {
+      "width":         { "value": "1.5", "type": "borderWidth", "$description": "Ring stroke width — 1.5px (justified: between border/width/sm=1 and border/width/md=2)" },
+      "color-default": { "value": "{border.default}", "type": "color", "$description": "Unselected border color" },
+      "color-hover":   { "value": "{border.strong}",  "type": "color", "$description": "Hovered border color" }
+    },
+    "bg": {
+      "default":        { "value": "{surface.neutral.subtlest}", "type": "color", "$description": "Unselected background" },
+      "hover":          { "value": "{surface.neutral.subtle}",   "type": "color", "$description": "Hovered background" },
+      "press":          { "value": "{surface.neutral.default}",  "type": "color", "$description": "Pressed background" },
+      "selected":       { "value": "{surface.brand-1.strong}",   "type": "color", "$description": "Selected fill" },
+      "selected-hover": { "value": "{surface.brand-1.bold}",     "type": "color", "$description": "Selected + hovered fill" },
+      "selected-press": { "value": "{surface.brand-1.strongest}","type": "color", "$description": "Selected + pressed fill" },
+      "disabled":       { "value": "{state.disabled.bg}",        "type": "color", "$description": "Disabled background" }
+    },
+    "focus-ring": {
+      "color":          { "value": "{border.focus}", "type": "color", "$description": "Focus ring color" }
+    },
+    "label": {
+      "color":          { "value": "{text.default}",        "type": "color", "$description": "Label text color" },
+      "disabled-color": { "value": "{state.disabled.text}", "type": "color", "$description": "Disabled label color" }
+    },
+    "required": {
+      "color":          { "value": "{text.subtle}", "type": "color", "$description": "Required asterisk color" }
+    },
+    "spacing": {
+      "gap":            { "value": "{spacing.xs}", "type": "spacing", "$description": "Gap between radio control and label — 8px via spacing/xs" }
+    }
+  },
+  "radio-group": {
+    "spacing": {
+      "gap":         { "value": "{spacing.sm}",  "type": "spacing", "$description": "Gap between group header and radio items" },
+      "item-gap":    { "value": "{spacing.xs}",  "type": "spacing", "$description": "Gap between individual radio items" },
+      "header-gap":  { "value": "{spacing.xxs}", "type": "spacing", "$description": "Gap between group label and hint text" }
+    },
+    "label-color":    { "value": "{text.default}", "type": "color",  "$description": "Group label color" },
+    "hint-color":     { "value": "{text.subtle}",  "type": "color",  "$description": "Group hint/helper text color" },
+    "required-color": { "value": "{text.subtle}",  "type": "color",  "$description": "Required asterisk color" }
+  }
+}

package/tokens/components/spinner.json

@@ -0,0 +1,30 @@
+{
+  "spinner": {
+    "sm": {
+      "size":         { "value": "{spacing.md}",        "type": "dimension",  "$description": "Small spinner — 16px" },
+      "stroke-width": { "value": "{border.width.sm}",   "type": "borderWidth","$description": "Stroke for sm spinner — 1px" }
+    },
+    "md": {
+      "size":         { "value": "20",                  "type": "dimension",  "$description": "Medium spinner — 20px (no exact token)" },
+      "stroke-width": { "value": "{border.width.md}",   "type": "borderWidth","$description": "Stroke for md spinner — 2px" }
+    },
+    "lg": {
+      "size":         { "value": "{spacing.lg}",        "type": "dimension",  "$description": "Large spinner — 24px" },
+      "stroke-width": { "value": "{border.width.md}",   "type": "borderWidth","$description": "Stroke for lg spinner — 2px" }
+    },
+    "xl": {
+      "size":         { "value": "{spacing.xl}",        "type": "dimension",  "$description": "Extra-large spinner — 32px" },
+      "stroke-width": { "value": "{border.width.md}",   "type": "borderWidth","$description": "Stroke for xl spinner — 2px" }
+    },
+    "track-opacity": { "value": "0.2", "type": "opacity", "$description": "Track ring opacity — 20% so track is subtle behind the active arc" },
+    "color": {
+      "default": { "value": "{border.default}",  "type": "color", "$description": "Default spinner color — neutral border" },
+      "brand":   { "value": "{border.brand-1}",  "type": "color", "$description": "Brand spinner color" },
+      "success": { "value": "{border.success}",  "type": "color", "$description": "Success spinner color" },
+      "danger":  { "value": "{border.danger}",   "type": "color", "$description": "Danger spinner color" },
+      "inverse": { "value": "{border.inverse}",  "type": "color", "$description": "Inverse spinner color — for dark backgrounds" }
+    },
+    "duration": { "value": "{duration.slower}", "type": "duration",      "$description": "One full rotation — 500ms" },
+    "easing":   { "value": "{easing.linear}",   "type": "cubicBezier",   "$description": "Constant-speed rotation" }
+  }
+}

package/tokens/components/text-input.json

@@ -0,0 +1,47 @@
+{
+  "text-input": {
+    "spacing": {
+      "padding-x":   { "value": "{spacing.sm}",  "type": "spacing",     "$description": "Horizontal padding — 12px" },
+      "padding-y":   { "value": "{spacing.xs}",  "type": "spacing",     "$description": "Vertical padding — ~8px (10px in component CSS; closest token)" },
+      "gap":         { "value": "{spacing.xxs}", "type": "spacing",     "$description": "Icon-to-text gap — 4px" },
+      "label-gap":   { "value": "{spacing.xxs}", "type": "spacing",     "$description": "Gap between label and input — 4px" },
+      "inner-gap":   { "value": "{spacing.xs}",  "type": "spacing",     "$description": "Gap between prefix/suffix and input text — 8px" },
+      "error-gap":   { "value": "{spacing.xxs}", "type": "spacing",     "$description": "Gap between input and error message — 4px" }
+    },
+    "border-radius": { "value": "{radius.md}", "type": "borderRadius",  "$description": "Input corner radius — 8px" },
+    "border": {
+      "width":          { "value": "{border.width.sm}", "type": "borderWidth", "$description": "Default border width — 1px" },
+      "width-hover":    { "value": "{border.width.md}", "type": "borderWidth", "$description": "Hover border width — 2px" },
+      "width-focus":    { "value": "{border.width.md}", "type": "borderWidth", "$description": "Focus border width — 2px" },
+      "color": {
+        "default":  { "value": "{border.default}", "type": "color", "$description": "Default border" },
+        "hover":    { "value": "{border.strong}",  "type": "color", "$description": "Hover border" },
+        "focus":    { "value": "{border.focus}",   "type": "color", "$description": "Focus border" },
+        "error":    { "value": "{border.danger}",  "type": "color", "$description": "Error border" },
+        "disabled": { "value": "{state.disabled.border}", "type": "color", "$description": "Disabled border" }
+      }
+    },
+    "bg": {
+      "default":  { "value": "{surface.neutral.white}",  "type": "color", "$description": "Input background" },
+      "disabled": { "value": "{state.disabled.bg}",      "type": "color", "$description": "Disabled input background" }
+    },
+    "label": {
+      "color":          { "value": "{text.subtle}",          "type": "color", "$description": "Label text" },
+      "disabled-color": { "value": "{state.disabled.text}",  "type": "color", "$description": "Disabled label text" }
+    },
+    "required-color": { "value": "{text.subtlest}", "type": "color", "$description": "Required asterisk" },
+    "text": {
+      "color":          { "value": "{text.default}",         "type": "color", "$description": "Input text" },
+      "disabled-color": { "value": "{state.disabled.text}",  "type": "color", "$description": "Disabled input text" }
+    },
+    "error": {
+      "color":          { "value": "{text.danger}",          "type": "color", "$description": "Error message text" },
+      "disabled-color": { "value": "{state.disabled.text}",  "type": "color", "$description": "Error text in disabled state" }
+    },
+    "icon": {
+      "color":          { "value": "{icon.subtle}",          "type": "color",     "$description": "Leading/trailing icon" },
+      "disabled-color": { "value": "{state.disabled.text}",  "type": "color",     "$description": "Disabled icon" },
+      "size":           { "value": "20",                     "type": "dimension", "$description": "Icon width/height — 20px (between spacing.md=16 and spacing.lg=24)" }
+    }
+  }
+}

package/tokens/components/tooltip.json

@@ -0,0 +1,39 @@
+{
+  "tooltip": {
+    "bg": {
+      "value": "{surface.neutral.strongest}",
+      "type": "color",
+      "$description": "Tooltip background — darkest neutral surface"
+    },
+    "text": {
+      "value": "{text.inverse}",
+      "type": "color",
+      "$description": "Tooltip label — inverse text for dark background"
+    },
+    "arrow": {
+      "value": "{surface.neutral.strongest}",
+      "type": "color",
+      "$description": "Tooltip arrow — matches background"
+    },
+    "radius": {
+      "value": "{radius.md}",
+      "type": "borderRadius",
+      "$description": "Corner radius — matches radius/md"
+    },
+    "padding-x": {
+      "value": "{spacing.sm}",
+      "type": "spacing",
+      "$description": "Horizontal padding — 12px via spacing/sm"
+    },
+    "padding-y": {
+      "value": "{spacing.xs}",
+      "type": "spacing",
+      "$description": "Vertical padding — 8px via spacing/xs"
+    },
+    "max-width": {
+      "value": "250",
+      "type": "dimension",
+      "$description": "Maximum width before text wraps"
+    }
+  }
+}