@exponential_app/eui 0.0.0-stage → 0.2.0

package/docs/themes.generated.json

@@ -0,0 +1,3647 @@
+{
+  "$comment": "AUTO-GENERATED by packages/exponential-ui/scripts/generate.ts — do not edit.\nSource of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential.recipes.json, catalog/recipes.json, catalog/tokens.json (+ packages/design-tokens/tokens.json and packages/ui/src/styles.css for the exponential theme). What ui.exponential.at renders as the theme pages (VAPP-93): the token vocabulary with every built-in's values, the recipe contract per component, the built-ins.",
+  "schemaId": "https://ui.exponential.at/schemas/theme/v1.json",
+  "themes": [
+    {
+      "id": "neutral",
+      "name": "Neutral",
+      "chain": [
+        "neutral"
+      ],
+      "fonts": {
+        "Geist": {
+          "fallback": "ui-sans-serif, system-ui, sans-serif",
+          "weights": [
+            400,
+            500,
+            600,
+            700
+          ],
+          "source": "host"
+        },
+        "Geist Mono": {
+          "fallback": "ui-monospace, SFMono-Regular, Menlo, monospace",
+          "weights": [
+            400,
+            500
+          ],
+          "source": "host"
+        },
+        "ui-serif": {
+          "fallback": "Georgia, serif",
+          "source": "system"
+        }
+      }
+    },
+    {
+      "id": "exponential",
+      "name": "Exponential",
+      "chain": [
+        "neutral",
+        "exponential"
+      ],
+      "fonts": {
+        "Geist": {
+          "fallback": "ui-sans-serif, system-ui, sans-serif",
+          "weights": [
+            400,
+            500,
+            600,
+            700
+          ],
+          "source": "host"
+        },
+        "Geist Mono": {
+          "fallback": "ui-monospace, SFMono-Regular, Menlo, monospace",
+          "weights": [
+            400,
+            500
+          ],
+          "source": "host"
+        },
+        "ui-serif": {
+          "fallback": "Georgia, serif",
+          "source": "system"
+        },
+        "Inter": {
+          "fallback": "ui-sans-serif, system-ui, sans-serif",
+          "weights": [
+            400,
+            500,
+            600,
+            700
+          ],
+          "source": "host"
+        },
+        "ui-monospace": {
+          "fallback": "SFMono-Regular, Menlo, Consolas, monospace",
+          "source": "system"
+        }
+      }
+    },
+    {
+      "id": "playful",
+      "name": "Playful",
+      "chain": [
+        "neutral",
+        "playful"
+      ],
+      "fonts": {
+        "Geist": {
+          "fallback": "ui-sans-serif, system-ui, sans-serif",
+          "weights": [
+            400,
+            500,
+            600,
+            700
+          ],
+          "source": "host"
+        },
+        "Geist Mono": {
+          "fallback": "ui-monospace, SFMono-Regular, Menlo, monospace",
+          "weights": [
+            400,
+            500
+          ],
+          "source": "host"
+        },
+        "ui-serif": {
+          "fallback": "Georgia, serif",
+          "source": "system"
+        },
+        "Nunito": {
+          "fallback": "Avenir Next, Segoe UI, sans-serif",
+          "weights": [
+            400,
+            600,
+            700
+          ],
+          "source": "host"
+        },
+        "Fira Code": {
+          "fallback": "ui-monospace, Menlo, monospace",
+          "weights": [
+            400,
+            500
+          ],
+          "source": "host"
+        }
+      }
+    },
+    {
+      "id": "orange",
+      "name": "Orange",
+      "chain": [
+        "neutral",
+        "exponential",
+        "orange"
+      ],
+      "fonts": {
+        "Geist": {
+          "fallback": "ui-sans-serif, system-ui, sans-serif",
+          "weights": [
+            400,
+            500,
+            600,
+            700
+          ],
+          "source": "host"
+        },
+        "Geist Mono": {
+          "fallback": "ui-monospace, SFMono-Regular, Menlo, monospace",
+          "weights": [
+            400,
+            500
+          ],
+          "source": "host"
+        },
+        "ui-serif": {
+          "fallback": "Georgia, serif",
+          "source": "system"
+        },
+        "Inter": {
+          "fallback": "ui-sans-serif, system-ui, sans-serif",
+          "weights": [
+            400,
+            500,
+            600,
+            700
+          ],
+          "source": "host"
+        },
+        "ui-monospace": {
+          "fallback": "SFMono-Regular, Menlo, Consolas, monospace",
+          "source": "system"
+        }
+      }
+    }
+  ],
+  "tokens": {
+    "color": [
+      {
+        "name": "background",
+        "ref": "$color.background",
+        "values": {
+          "neutral": {
+            "light": "#ffffff",
+            "dark": "#0a0a0a"
+          },
+          "exponential": {
+            "light": "#ffffff",
+            "dark": "#0a0a0a"
+          },
+          "playful": {
+            "light": "#fffbf5",
+            "dark": "#1a1033"
+          },
+          "orange": {
+            "light": "#ffffff",
+            "dark": "#0a0a0a"
+          }
+        }
+      },
+      {
+        "name": "foreground",
+        "ref": "$color.foreground",
+        "values": {
+          "neutral": {
+            "light": "#0a0a0a",
+            "dark": "#fafafa"
+          },
+          "exponential": {
+            "light": "#0a0a0a",
+            "dark": "#fafafa"
+          },
+          "playful": {
+            "light": "#1f1235",
+            "dark": "#f5f3ff"
+          },
+          "orange": {
+            "light": "#0a0a0a",
+            "dark": "#fafafa"
+          }
+        }
+      },
+      {
+        "name": "card",
+        "ref": "$color.card",
+        "values": {
+          "neutral": {
+            "light": "#ffffff",
+            "dark": "#171717"
+          },
+          "exponential": {
+            "light": "#ffffff",
+            "dark": "#ffffff0f"
+          },
+          "playful": {
+            "light": "#ffffff",
+            "dark": "#2a1b4d"
+          },
+          "orange": {
+            "light": "#ffffff",
+            "dark": "#ffffff0f"
+          }
+        }
+      },
+      {
+        "name": "cardForeground",
+        "ref": "$color.cardForeground",
+        "values": {
+          "neutral": {
+            "light": "#0a0a0a",
+            "dark": "#fafafa"
+          },
+          "exponential": {
+            "light": "#0a0a0a",
+            "dark": "#fafafa"
+          },
+          "playful": {
+            "light": "#1f1235",
+            "dark": "#f5f3ff"
+          },
+          "orange": {
+            "light": "#0a0a0a",
+            "dark": "#fafafa"
+          }
+        }
+      },
+      {
+        "name": "popover",
+        "ref": "$color.popover",
+        "values": {
+          "neutral": {
+            "light": "#ffffff",
+            "dark": "#171717"
+          },
+          "exponential": {
+            "light": "#ffffff",
+            "dark": "#171717"
+          },
+          "playful": {
+            "light": "#ffffff",
+            "dark": "#2a1b4d"
+          },
+          "orange": {
+            "light": "#ffffff",
+            "dark": "#171717"
+          }
+        }
+      },
+      {
+        "name": "popoverForeground",
+        "ref": "$color.popoverForeground",
+        "values": {
+          "neutral": {
+            "light": "#0a0a0a",
+            "dark": "#fafafa"
+          },
+          "exponential": {
+            "light": "#0a0a0a",
+            "dark": "#fafafa"
+          },
+          "playful": {
+            "light": "#1f1235",
+            "dark": "#f5f3ff"
+          },
+          "orange": {
+            "light": "#0a0a0a",
+            "dark": "#fafafa"
+          }
+        }
+      },
+      {
+        "name": "primary",
+        "ref": "$color.primary",
+        "values": {
+          "neutral": {
+            "light": "#171717",
+            "dark": "#e5e5e5"
+          },
+          "exponential": {
+            "light": "#171717",
+            "dark": "#e5e5e5"
+          },
+          "playful": {
+            "light": "#7c3aed",
+            "dark": "#c4b5fd"
+          },
+          "orange": {
+            "light": "#ea580c",
+            "dark": "#fb923c"
+          }
+        }
+      },
+      {
+        "name": "primaryForeground",
+        "ref": "$color.primaryForeground",
+        "values": {
+          "neutral": {
+            "light": "#fafafa",
+            "dark": "#171717"
+          },
+          "exponential": {
+            "light": "#fafafa",
+            "dark": "#171717"
+          },
+          "playful": {
+            "light": "#ffffff",
+            "dark": "#2e1065"
+          },
+          "orange": {
+            "light": "#ffffff",
+            "dark": "#431407"
+          }
+        }
+      },
+      {
+        "name": "secondary",
+        "ref": "$color.secondary",
+        "values": {
+          "neutral": {
+            "light": "#f5f5f5",
+            "dark": "#262626"
+          },
+          "exponential": {
+            "light": "#f5f5f5",
+            "dark": "#ffffff0f"
+          },
+          "playful": {
+            "light": "#ccfbf1",
+            "dark": "#134e4a"
+          },
+          "orange": {
+            "light": "#f5f5f5",
+            "dark": "#ffffff0f"
+          }
+        }
+      },
+      {
+        "name": "secondaryForeground",
+        "ref": "$color.secondaryForeground",
+        "values": {
+          "neutral": {
+            "light": "#171717",
+            "dark": "#fafafa"
+          },
+          "exponential": {
+            "light": "#171717",
+            "dark": "#fafafa"
+          },
+          "playful": {
+            "light": "#134e4a",
+            "dark": "#ccfbf1"
+          },
+          "orange": {
+            "light": "#171717",
+            "dark": "#fafafa"
+          }
+        }
+      },
+      {
+        "name": "muted",
+        "ref": "$color.muted",
+        "values": {
+          "neutral": {
+            "light": "#f5f5f5",
+            "dark": "#262626"
+          },
+          "exponential": {
+            "light": "#f5f5f5",
+            "dark": "#ffffff0a"
+          },
+          "playful": {
+            "light": "#f3e8ff",
+            "dark": "#3b2a63"
+          },
+          "orange": {
+            "light": "#f5f5f5",
+            "dark": "#ffffff0a"
+          }
+        }
+      },
+      {
+        "name": "mutedForeground",
+        "ref": "$color.mutedForeground",
+        "values": {
+          "neutral": {
+            "light": "#737373",
+            "dark": "#a1a1a1"
+          },
+          "exponential": {
+            "light": "#737373",
+            "dark": "#a1a1a1"
+          },
+          "playful": {
+            "light": "#6b5b8a",
+            "dark": "#c4b5fd"
+          },
+          "orange": {
+            "light": "#737373",
+            "dark": "#a1a1a1"
+          }
+        }
+      },
+      {
+        "name": "accent",
+        "ref": "$color.accent",
+        "values": {
+          "neutral": {
+            "light": "#f5f5f5",
+            "dark": "#262626"
+          },
+          "exponential": {
+            "light": "#f5f5f5",
+            "dark": "#ffffff1c"
+          },
+          "playful": {
+            "light": "#ffe4e6",
+            "dark": "#4c1d95"
+          },
+          "orange": {
+            "light": "#ffedd5",
+            "dark": "#431407"
+          }
+        }
+      },
+      {
+        "name": "accentForeground",
+        "ref": "$color.accentForeground",
+        "values": {
+          "neutral": {
+            "light": "#171717",
+            "dark": "#fafafa"
+          },
+          "exponential": {
+            "light": "#171717",
+            "dark": "#fafafa"
+          },
+          "playful": {
+            "light": "#881337",
+            "dark": "#f5f3ff"
+          },
+          "orange": {
+            "light": "#7c2d12",
+            "dark": "#fed7aa"
+          }
+        }
+      },
+      {
+        "name": "destructive",
+        "ref": "$color.destructive",
+        "values": {
+          "neutral": {
+            "light": "#e7000b",
+            "dark": "#ff6467"
+          },
+          "exponential": {
+            "light": "#e7000b",
+            "dark": "#ff6467"
+          },
+          "playful": {
+            "light": "#e11d48",
+            "dark": "#fb7185"
+          },
+          "orange": {
+            "light": "#e7000b",
+            "dark": "#ff6467"
+          }
+        }
+      },
+      {
+        "name": "destructiveForeground",
+        "ref": "$color.destructiveForeground",
+        "values": {
+          "neutral": {
+            "light": "#fafafa",
+            "dark": "#fafafa"
+          },
+          "exponential": {
+            "light": "#ffffff",
+            "dark": "#0a0a0a"
+          },
+          "playful": {
+            "light": "#ffffff",
+            "dark": "#4c0519"
+          },
+          "orange": {
+            "light": "#ffffff",
+            "dark": "#0a0a0a"
+          }
+        }
+      },
+      {
+        "name": "success",
+        "ref": "$color.success",
+        "values": {
+          "neutral": {
+            "light": "#16a34a",
+            "dark": "#22c55e"
+          },
+          "exponential": {
+            "light": "#22c55e",
+            "dark": "#22c55e"
+          },
+          "playful": {
+            "light": "#059669",
+            "dark": "#34d399"
+          },
+          "orange": {
+            "light": "#22c55e",
+            "dark": "#22c55e"
+          }
+        }
+      },
+      {
+        "name": "successForeground",
+        "ref": "$color.successForeground",
+        "values": {
+          "neutral": {
+            "light": "#ffffff",
+            "dark": "#052e16"
+          },
+          "exponential": {
+            "light": "#ffffff",
+            "dark": "#052e16"
+          },
+          "playful": {
+            "light": "#ffffff",
+            "dark": "#022c22"
+          },
+          "orange": {
+            "light": "#ffffff",
+            "dark": "#052e16"
+          }
+        }
+      },
+      {
+        "name": "warning",
+        "ref": "$color.warning",
+        "values": {
+          "neutral": {
+            "light": "#d97706",
+            "dark": "#f59e0b"
+          },
+          "exponential": {
+            "light": "#facc15",
+            "dark": "#facc15"
+          },
+          "playful": {
+            "light": "#d97706",
+            "dark": "#fbbf24"
+          },
+          "orange": {
+            "light": "#facc15",
+            "dark": "#facc15"
+          }
+        }
+      },
+      {
+        "name": "warningForeground",
+        "ref": "$color.warningForeground",
+        "values": {
+          "neutral": {
+            "light": "#ffffff",
+            "dark": "#1c1917"
+          },
+          "exponential": {
+            "light": "#1c1917",
+            "dark": "#1c1917"
+          },
+          "playful": {
+            "light": "#ffffff",
+            "dark": "#451a03"
+          },
+          "orange": {
+            "light": "#1c1917",
+            "dark": "#1c1917"
+          }
+        }
+      },
+      {
+        "name": "info",
+        "ref": "$color.info",
+        "values": {
+          "neutral": {
+            "light": "#2563eb",
+            "dark": "#3b82f6"
+          },
+          "exponential": {
+            "light": "#3b82f6",
+            "dark": "#3b82f6"
+          },
+          "playful": {
+            "light": "#0284c7",
+            "dark": "#38bdf8"
+          },
+          "orange": {
+            "light": "#3b82f6",
+            "dark": "#3b82f6"
+          }
+        }
+      },
+      {
+        "name": "infoForeground",
+        "ref": "$color.infoForeground",
+        "values": {
+          "neutral": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+          },
+          "exponential": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+          },
+          "playful": {
+            "light": "#ffffff",
+            "dark": "#082f49"
+          },
+          "orange": {
+            "light": "#ffffff",
+            "dark": "#ffffff"
+          }
+        }
+      },
+      {
+        "name": "border",
+        "ref": "$color.border",
+        "values": {
+          "neutral": {
+            "light": "#e5e5e5",
+            "dark": "#ffffff1a"
+          },
+          "exponential": {
+            "light": "#e5e5e5",
+            "dark": "#ffffff1a"
+          },
+          "playful": {
+            "light": "#e9d5ff",
+            "dark": "#4c3a7a"
+          },
+          "orange": {
+            "light": "#e5e5e5",
+            "dark": "#ffffff1a"
+          }
+        }
+      },
+      {
+        "name": "input",
+        "ref": "$color.input",
+        "values": {
+          "neutral": {
+            "light": "#e5e5e5",
+            "dark": "#ffffff26"
+          },
+          "exponential": {
+            "light": "#e5e5e5",
+            "dark": "#ffffff26"
+          },
+          "playful": {
+            "light": "#ddd6fe",
+            "dark": "#5b4a8a"
+          },
+          "orange": {
+            "light": "#e5e5e5",
+            "dark": "#ffffff26"
+          }
+        }
+      },
+      {
+        "name": "ring",
+        "ref": "$color.ring",
+        "values": {
+          "neutral": {
+            "light": "#a1a1a1",
+            "dark": "#737373"
+          },
+          "exponential": {
+            "light": "#a1a1a1",
+            "dark": "#737373"
+          },
+          "playful": {
+            "light": "#a78bfa",
+            "dark": "#a78bfa"
+          },
+          "orange": {
+            "light": "#fb923c",
+            "dark": "#f97316"
+          }
+        }
+      },
+      {
+        "name": "chart1",
+        "ref": "$color.chart1",
+        "values": {
+          "neutral": {
+            "light": "#f54900",
+            "dark": "#1447e6"
+          },
+          "exponential": {
+            "light": "#f54900",
+            "dark": "#1447e6"
+          },
+          "playful": {
+            "light": "#7c3aed",
+            "dark": "#c4b5fd"
+          },
+          "orange": {
+            "light": "#ea580c",
+            "dark": "#fb923c"
+          }
+        }
+      },
+      {
+        "name": "chart2",
+        "ref": "$color.chart2",
+        "values": {
+          "neutral": {
+            "light": "#009689",
+            "dark": "#00bc7d"
+          },
+          "exponential": {
+            "light": "#009689",
+            "dark": "#00bc7d"
+          },
+          "playful": {
+            "light": "#14b8a6",
+            "dark": "#5eead4"
+          },
+          "orange": {
+            "light": "#f59e0b",
+            "dark": "#fbbf24"
+          }
+        }
+      },
+      {
+        "name": "chart3",
+        "ref": "$color.chart3",
+        "values": {
+          "neutral": {
+            "light": "#104e64",
+            "dark": "#fe9a00"
+          },
+          "exponential": {
+            "light": "#104e64",
+            "dark": "#fe9a00"
+          },
+          "playful": {
+            "light": "#f43f5e",
+            "dark": "#fda4af"
+          },
+          "orange": {
+            "light": "#b91c1c",
+            "dark": "#f87171"
+          }
+        }
+      },
+      {
+        "name": "chart4",
+        "ref": "$color.chart4",
+        "values": {
+          "neutral": {
+            "light": "#ffb900",
+            "dark": "#ad46ff"
+          },
+          "exponential": {
+            "light": "#ffb900",
+            "dark": "#ad46ff"
+          },
+          "playful": {
+            "light": "#f59e0b",
+            "dark": "#fcd34d"
+          },
+          "orange": {
+            "light": "#0ea5e9",
+            "dark": "#38bdf8"
+          }
+        }
+      },
+      {
+        "name": "chart5",
+        "ref": "$color.chart5",
+        "values": {
+          "neutral": {
+            "light": "#fe9a00",
+            "dark": "#ff2056"
+          },
+          "exponential": {
+            "light": "#fe9a00",
+            "dark": "#ff2056"
+          },
+          "playful": {
+            "light": "#0ea5e9",
+            "dark": "#7dd3fc"
+          },
+          "orange": {
+            "light": "#7c3aed",
+            "dark": "#a78bfa"
+          }
+        }
+      },
+      {
+        "name": "chart6",
+        "ref": "$color.chart6",
+        "values": {
+          "neutral": {
+            "light": "#7c3aed",
+            "dark": "#a78bfa"
+          },
+          "exponential": {
+            "light": "#7c3aed",
+            "dark": "#a78bfa"
+          },
+          "playful": {
+            "light": "#a855f7",
+            "dark": "#d8b4fe"
+          },
+          "orange": {
+            "light": "#0d9488",
+            "dark": "#2dd4bf"
+          }
+        }
+      },
+      {
+        "name": "chart7",
+        "ref": "$color.chart7",
+        "values": {
+          "neutral": {
+            "light": "#db2777",
+            "dark": "#f472b6"
+          },
+          "exponential": {
+            "light": "#db2777",
+            "dark": "#f472b6"
+          },
+          "playful": {
+            "light": "#ec4899",
+            "dark": "#f9a8d4"
+          },
+          "orange": {
+            "light": "#db2777",
+            "dark": "#f472b6"
+          }
+        }
+      },
+      {
+        "name": "chart8",
+        "ref": "$color.chart8",
+        "values": {
+          "neutral": {
+            "light": "#0891b2",
+            "dark": "#22d3ee"
+          },
+          "exponential": {
+            "light": "#0891b2",
+            "dark": "#22d3ee"
+          },
+          "playful": {
+            "light": "#22c55e",
+            "dark": "#86efac"
+          },
+          "orange": {
+            "light": "#65a30d",
+            "dark": "#a3e635"
+          }
+        }
+      }
+    ],
+    "spacing": [
+      {
+        "name": "none",
+        "ref": "$spacing.none",
+        "values": {
+          "neutral": 0,
+          "exponential": 0,
+          "playful": 0,
+          "orange": 0
+        }
+      },
+      {
+        "name": "xxs",
+        "ref": "$spacing.xxs",
+        "values": {
+          "neutral": 2,
+          "exponential": 2,
+          "playful": 2,
+          "orange": 2
+        }
+      },
+      {
+        "name": "xs",
+        "ref": "$spacing.xs",
+        "values": {
+          "neutral": 4,
+          "exponential": 4,
+          "playful": 4,
+          "orange": 4
+        }
+      },
+      {
+        "name": "sm",
+        "ref": "$spacing.sm",
+        "values": {
+          "neutral": 8,
+          "exponential": 8,
+          "playful": 8,
+          "orange": 8
+        }
+      },
+      {
+        "name": "md",
+        "ref": "$spacing.md",
+        "values": {
+          "neutral": 12,
+          "exponential": 12,
+          "playful": 12,
+          "orange": 12
+        }
+      },
+      {
+        "name": "lg",
+        "ref": "$spacing.lg",
+        "values": {
+          "neutral": 16,
+          "exponential": 16,
+          "playful": 16,
+          "orange": 16
+        }
+      },
+      {
+        "name": "xl",
+        "ref": "$spacing.xl",
+        "values": {
+          "neutral": 24,
+          "exponential": 24,
+          "playful": 24,
+          "orange": 24
+        }
+      },
+      {
+        "name": "xl2",
+        "ref": "$spacing.xl2",
+        "values": {
+          "neutral": 32,
+          "exponential": 32,
+          "playful": 32,
+          "orange": 32
+        }
+      },
+      {
+        "name": "xl3",
+        "ref": "$spacing.xl3",
+        "values": {
+          "neutral": 48,
+          "exponential": 48,
+          "playful": 48,
+          "orange": 48
+        }
+      }
+    ],
+    "radius": [
+      {
+        "name": "none",
+        "ref": "$radius.none",
+        "values": {
+          "neutral": 0,
+          "exponential": 0,
+          "playful": 0,
+          "orange": 0
+        }
+      },
+      {
+        "name": "sm",
+        "ref": "$radius.sm",
+        "values": {
+          "neutral": 6,
+          "exponential": 8,
+          "playful": 10,
+          "orange": 8
+        }
+      },
+      {
+        "name": "md",
+        "ref": "$radius.md",
+        "values": {
+          "neutral": 8,
+          "exponential": 10,
+          "playful": 14,
+          "orange": 10
+        }
+      },
+      {
+        "name": "lg",
+        "ref": "$radius.lg",
+        "values": {
+          "neutral": 10,
+          "exponential": 12,
+          "playful": 18,
+          "orange": 12
+        }
+      },
+      {
+        "name": "xl",
+        "ref": "$radius.xl",
+        "values": {
+          "neutral": 14,
+          "exponential": 16,
+          "playful": 24,
+          "orange": 16
+        }
+      },
+      {
+        "name": "xl2",
+        "ref": "$radius.xl2",
+        "values": {
+          "neutral": 18,
+          "exponential": 20,
+          "playful": 28,
+          "orange": 20
+        }
+      },
+      {
+        "name": "xl3",
+        "ref": "$radius.xl3",
+        "values": {
+          "neutral": 22,
+          "exponential": 24,
+          "playful": 32,
+          "orange": 24
+        }
+      },
+      {
+        "name": "full",
+        "ref": "$radius.full",
+        "values": {
+          "neutral": 9999,
+          "exponential": 9999,
+          "playful": 9999,
+          "orange": 9999
+        }
+      }
+    ],
+    "type.size": [
+      {
+        "name": "xs",
+        "ref": "$type.size.xs",
+        "values": {
+          "neutral": 12,
+          "exponential": 12,
+          "playful": 12,
+          "orange": 12
+        }
+      },
+      {
+        "name": "sm",
+        "ref": "$type.size.sm",
+        "values": {
+          "neutral": 14,
+          "exponential": 14,
+          "playful": 14,
+          "orange": 14
+        }
+      },
+      {
+        "name": "base",
+        "ref": "$type.size.base",
+        "values": {
+          "neutral": 16,
+          "exponential": 16,
+          "playful": 16,
+          "orange": 16
+        }
+      },
+      {
+        "name": "lg",
+        "ref": "$type.size.lg",
+        "values": {
+          "neutral": 18,
+          "exponential": 18,
+          "playful": 18,
+          "orange": 18
+        }
+      },
+      {
+        "name": "xl",
+        "ref": "$type.size.xl",
+        "values": {
+          "neutral": 20,
+          "exponential": 20,
+          "playful": 20,
+          "orange": 20
+        }
+      },
+      {
+        "name": "xl2",
+        "ref": "$type.size.xl2",
+        "values": {
+          "neutral": 24,
+          "exponential": 24,
+          "playful": 24,
+          "orange": 24
+        }
+      },
+      {
+        "name": "xl3",
+        "ref": "$type.size.xl3",
+        "values": {
+          "neutral": 30,
+          "exponential": 30,
+          "playful": 30,
+          "orange": 30
+        }
+      }
+    ],
+    "type.lineHeight": [
+      {
+        "name": "xs",
+        "ref": "$type.lineHeight.xs",
+        "values": {
+          "neutral": 16,
+          "exponential": 16,
+          "playful": 16,
+          "orange": 16
+        }
+      },
+      {
+        "name": "sm",
+        "ref": "$type.lineHeight.sm",
+        "values": {
+          "neutral": 20,
+          "exponential": 20,
+          "playful": 20,
+          "orange": 20
+        }
+      },
+      {
+        "name": "base",
+        "ref": "$type.lineHeight.base",
+        "values": {
+          "neutral": 24,
+          "exponential": 24,
+          "playful": 24,
+          "orange": 24
+        }
+      },
+      {
+        "name": "lg",
+        "ref": "$type.lineHeight.lg",
+        "values": {
+          "neutral": 28,
+          "exponential": 28,
+          "playful": 28,
+          "orange": 28
+        }
+      },
+      {
+        "name": "xl",
+        "ref": "$type.lineHeight.xl",
+        "values": {
+          "neutral": 28,
+          "exponential": 28,
+          "playful": 28,
+          "orange": 28
+        }
+      },
+      {
+        "name": "xl2",
+        "ref": "$type.lineHeight.xl2",
+        "values": {
+          "neutral": 32,
+          "exponential": 32,
+          "playful": 32,
+          "orange": 32
+        }
+      },
+      {
+        "name": "xl3",
+        "ref": "$type.lineHeight.xl3",
+        "values": {
+          "neutral": 36,
+          "exponential": 36,
+          "playful": 36,
+          "orange": 36
+        }
+      }
+    ],
+    "type.weight": [
+      {
+        "name": "regular",
+        "ref": "$type.weight.regular",
+        "values": {
+          "neutral": 400,
+          "exponential": 400,
+          "playful": 400,
+          "orange": 400
+        }
+      },
+      {
+        "name": "medium",
+        "ref": "$type.weight.medium",
+        "values": {
+          "neutral": 500,
+          "exponential": 500,
+          "playful": 600,
+          "orange": 500
+        }
+      },
+      {
+        "name": "semibold",
+        "ref": "$type.weight.semibold",
+        "values": {
+          "neutral": 600,
+          "exponential": 600,
+          "playful": 700,
+          "orange": 600
+        }
+      },
+      {
+        "name": "bold",
+        "ref": "$type.weight.bold",
+        "values": {
+          "neutral": 700,
+          "exponential": 700,
+          "playful": 700,
+          "orange": 700
+        }
+      }
+    ],
+    "type.family": [
+      {
+        "name": "sans",
+        "ref": "$type.family.sans",
+        "values": {
+          "neutral": "Geist",
+          "exponential": "Inter",
+          "playful": "Nunito",
+          "orange": "Inter"
+        }
+      },
+      {
+        "name": "mono",
+        "ref": "$type.family.mono",
+        "values": {
+          "neutral": "Geist Mono",
+          "exponential": "ui-monospace",
+          "playful": "Fira Code",
+          "orange": "ui-monospace"
+        }
+      },
+      {
+        "name": "serif",
+        "ref": "$type.family.serif",
+        "values": {
+          "neutral": "ui-serif",
+          "exponential": "ui-serif",
+          "playful": "ui-serif",
+          "orange": "ui-serif"
+        }
+      }
+    ],
+    "control": [
+      {
+        "name": "buttonSm",
+        "ref": "$control.buttonSm",
+        "values": {
+          "neutral": 32,
+          "exponential": 24,
+          "playful": 32,
+          "orange": 24
+        }
+      },
+      {
+        "name": "buttonMd",
+        "ref": "$control.buttonMd",
+        "values": {
+          "neutral": 36,
+          "exponential": 32,
+          "playful": 40,
+          "orange": 32
+        }
+      },
+      {
+        "name": "buttonLg",
+        "ref": "$control.buttonLg",
+        "values": {
+          "neutral": 40,
+          "exponential": 36,
+          "playful": 48,
+          "orange": 36
+        }
+      },
+      {
+        "name": "buttonIcon",
+        "ref": "$control.buttonIcon",
+        "values": {
+          "neutral": 36,
+          "exponential": 32,
+          "playful": 40,
+          "orange": 32
+        }
+      },
+      {
+        "name": "input",
+        "ref": "$control.input",
+        "values": {
+          "neutral": 36,
+          "exponential": 36,
+          "playful": 44,
+          "orange": 36
+        }
+      },
+      {
+        "name": "textarea",
+        "ref": "$control.textarea",
+        "values": {
+          "neutral": 64,
+          "exponential": 64,
+          "playful": 64,
+          "orange": 64
+        }
+      },
+      {
+        "name": "row",
+        "ref": "$control.row",
+        "values": {
+          "neutral": 40,
+          "exponential": 32,
+          "playful": 44,
+          "orange": 32
+        }
+      },
+      {
+        "name": "rowCompact",
+        "ref": "$control.rowCompact",
+        "values": {
+          "neutral": 32,
+          "exponential": 28,
+          "playful": 32,
+          "orange": 28
+        }
+      },
+      {
+        "name": "pill",
+        "ref": "$control.pill",
+        "values": {
+          "neutral": 24,
+          "exponential": 24,
+          "playful": 28,
+          "orange": 24
+        }
+      },
+      {
+        "name": "badge",
+        "ref": "$control.badge",
+        "values": {
+          "neutral": 20,
+          "exponential": 20,
+          "playful": 22,
+          "orange": 20
+        }
+      },
+      {
+        "name": "chip",
+        "ref": "$control.chip",
+        "values": {
+          "neutral": 28,
+          "exponential": 24,
+          "playful": 32,
+          "orange": 24
+        }
+      },
+      {
+        "name": "toggle",
+        "ref": "$control.toggle",
+        "values": {
+          "neutral": 36,
+          "exponential": 32,
+          "playful": 40,
+          "orange": 32
+        }
+      },
+      {
+        "name": "switch",
+        "ref": "$control.switch",
+        "values": {
+          "neutral": 20,
+          "exponential": 20,
+          "playful": 24,
+          "orange": 20
+        }
+      },
+      {
+        "name": "checkbox",
+        "ref": "$control.checkbox",
+        "values": {
+          "neutral": 16,
+          "exponential": 16,
+          "playful": 20,
+          "orange": 16
+        }
+      },
+      {
+        "name": "slider",
+        "ref": "$control.slider",
+        "values": {
+          "neutral": 16,
+          "exponential": 16,
+          "playful": 16,
+          "orange": 16
+        }
+      },
+      {
+        "name": "progress",
+        "ref": "$control.progress",
+        "values": {
+          "neutral": 8,
+          "exponential": 8,
+          "playful": 8,
+          "orange": 8
+        }
+      },
+      {
+        "name": "meter",
+        "ref": "$control.meter",
+        "values": {
+          "neutral": 8,
+          "exponential": 8,
+          "playful": 8,
+          "orange": 8
+        }
+      },
+      {
+        "name": "avatarSm",
+        "ref": "$control.avatarSm",
+        "values": {
+          "neutral": 24,
+          "exponential": 24,
+          "playful": 24,
+          "orange": 24
+        }
+      },
+      {
+        "name": "avatarMd",
+        "ref": "$control.avatarMd",
+        "values": {
+          "neutral": 32,
+          "exponential": 32,
+          "playful": 32,
+          "orange": 32
+        }
+      },
+      {
+        "name": "avatarLg",
+        "ref": "$control.avatarLg",
+        "values": {
+          "neutral": 40,
+          "exponential": 40,
+          "playful": 40,
+          "orange": 40
+        }
+      },
+      {
+        "name": "iconSm",
+        "ref": "$control.iconSm",
+        "values": {
+          "neutral": 16,
+          "exponential": 16,
+          "playful": 16,
+          "orange": 16
+        }
+      },
+      {
+        "name": "iconMd",
+        "ref": "$control.iconMd",
+        "values": {
+          "neutral": 20,
+          "exponential": 20,
+          "playful": 20,
+          "orange": 20
+        }
+      },
+      {
+        "name": "iconLg",
+        "ref": "$control.iconLg",
+        "values": {
+          "neutral": 24,
+          "exponential": 24,
+          "playful": 24,
+          "orange": 24
+        }
+      },
+      {
+        "name": "hairline",
+        "ref": "$control.hairline",
+        "values": {
+          "neutral": 1,
+          "exponential": 1,
+          "playful": 1,
+          "orange": 1
+        }
+      },
+      {
+        "name": "appBar",
+        "ref": "$control.appBar",
+        "values": {
+          "neutral": 56,
+          "exponential": 48,
+          "playful": 56,
+          "orange": 48
+        }
+      },
+      {
+        "name": "tabBar",
+        "ref": "$control.tabBar",
+        "values": {
+          "neutral": 56,
+          "exponential": 56,
+          "playful": 56,
+          "orange": 56
+        }
+      },
+      {
+        "name": "toast",
+        "ref": "$control.toast",
+        "values": {
+          "neutral": 64,
+          "exponential": 56,
+          "playful": 64,
+          "orange": 56
+        }
+      }
+    ],
+    "shadow": [
+      {
+        "name": "none",
+        "ref": "$shadow.none",
+        "values": {
+          "neutral": {
+            "light": [],
+            "dark": []
+          },
+          "exponential": {
+            "light": [],
+            "dark": []
+          },
+          "playful": {
+            "light": [],
+            "dark": []
+          },
+          "orange": {
+            "light": [],
+            "dark": []
+          }
+        }
+      },
+      {
+        "name": "sm",
+        "ref": "$shadow.sm",
+        "values": {
+          "neutral": {
+            "light": [
+              {
+                "x": 0,
+                "y": 1,
+                "blur": 2,
+                "spread": 0,
+                "color": "#0000000d"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 1,
+                "blur": 2,
+                "spread": 0,
+                "color": "#00000033"
+              }
+            ]
+          },
+          "exponential": {
+            "light": [
+              {
+                "x": 0,
+                "y": 1,
+                "blur": 2,
+                "spread": 0,
+                "color": "#00000014"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 1,
+                "blur": 2,
+                "spread": 0,
+                "color": "#00000066"
+              }
+            ]
+          },
+          "playful": {
+            "light": [
+              {
+                "x": 0,
+                "y": 2,
+                "blur": 4,
+                "spread": 0,
+                "color": "#7c3aed1a"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 2,
+                "blur": 4,
+                "spread": 0,
+                "color": "#00000040"
+              }
+            ]
+          },
+          "orange": {
+            "light": [
+              {
+                "x": 0,
+                "y": 1,
+                "blur": 2,
+                "spread": 0,
+                "color": "#00000014"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 1,
+                "blur": 2,
+                "spread": 0,
+                "color": "#00000066"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "name": "md",
+        "ref": "$shadow.md",
+        "values": {
+          "neutral": {
+            "light": [
+              {
+                "x": 0,
+                "y": 4,
+                "blur": 6,
+                "spread": -1,
+                "color": "#0000001a"
+              },
+              {
+                "x": 0,
+                "y": 2,
+                "blur": 4,
+                "spread": -2,
+                "color": "#0000001a"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 4,
+                "blur": 6,
+                "spread": -1,
+                "color": "#00000066"
+              },
+              {
+                "x": 0,
+                "y": 2,
+                "blur": 4,
+                "spread": -2,
+                "color": "#00000066"
+              }
+            ]
+          },
+          "exponential": {
+            "light": [
+              {
+                "x": 0,
+                "y": 4,
+                "blur": 12,
+                "spread": -2,
+                "color": "#00000014"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 4,
+                "blur": 12,
+                "spread": -2,
+                "color": "#00000066"
+              }
+            ]
+          },
+          "playful": {
+            "light": [
+              {
+                "x": 0,
+                "y": 6,
+                "blur": 12,
+                "spread": -2,
+                "color": "#7c3aed26"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 6,
+                "blur": 12,
+                "spread": -2,
+                "color": "#00000059"
+              }
+            ]
+          },
+          "orange": {
+            "light": [
+              {
+                "x": 0,
+                "y": 4,
+                "blur": 12,
+                "spread": -2,
+                "color": "#00000014"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 4,
+                "blur": 12,
+                "spread": -2,
+                "color": "#00000066"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "name": "lg",
+        "ref": "$shadow.lg",
+        "values": {
+          "neutral": {
+            "light": [
+              {
+                "x": 0,
+                "y": 10,
+                "blur": 15,
+                "spread": -3,
+                "color": "#0000001a"
+              },
+              {
+                "x": 0,
+                "y": 4,
+                "blur": 6,
+                "spread": -4,
+                "color": "#0000001a"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 10,
+                "blur": 15,
+                "spread": -3,
+                "color": "#00000066"
+              },
+              {
+                "x": 0,
+                "y": 4,
+                "blur": 6,
+                "spread": -4,
+                "color": "#00000066"
+              }
+            ]
+          },
+          "exponential": {
+            "light": [
+              {
+                "x": 0,
+                "y": 12,
+                "blur": 32,
+                "spread": -8,
+                "color": "#00000014"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 12,
+                "blur": 32,
+                "spread": -8,
+                "color": "#00000066"
+              }
+            ]
+          },
+          "playful": {
+            "light": [
+              {
+                "x": 0,
+                "y": 16,
+                "blur": 32,
+                "spread": -6,
+                "color": "#7c3aed33"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 16,
+                "blur": 32,
+                "spread": -6,
+                "color": "#00000073"
+              }
+            ]
+          },
+          "orange": {
+            "light": [
+              {
+                "x": 0,
+                "y": 12,
+                "blur": 32,
+                "spread": -8,
+                "color": "#00000014"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 12,
+                "blur": 32,
+                "spread": -8,
+                "color": "#00000066"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "name": "xl",
+        "ref": "$shadow.xl",
+        "values": {
+          "neutral": {
+            "light": [
+              {
+                "x": 0,
+                "y": 20,
+                "blur": 25,
+                "spread": -5,
+                "color": "#0000001a"
+              },
+              {
+                "x": 0,
+                "y": 8,
+                "blur": 10,
+                "spread": -6,
+                "color": "#0000001a"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 20,
+                "blur": 25,
+                "spread": -5,
+                "color": "#00000080"
+              },
+              {
+                "x": 0,
+                "y": 8,
+                "blur": 10,
+                "spread": -6,
+                "color": "#00000080"
+              }
+            ]
+          },
+          "exponential": {
+            "light": [
+              {
+                "x": 0,
+                "y": 20,
+                "blur": 48,
+                "spread": -12,
+                "color": "#00000014"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 20,
+                "blur": 48,
+                "spread": -12,
+                "color": "#00000066"
+              }
+            ]
+          },
+          "playful": {
+            "light": [
+              {
+                "x": 0,
+                "y": 24,
+                "blur": 48,
+                "spread": -8,
+                "color": "#7c3aed40"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 24,
+                "blur": 48,
+                "spread": -8,
+                "color": "#00000080"
+              }
+            ]
+          },
+          "orange": {
+            "light": [
+              {
+                "x": 0,
+                "y": 20,
+                "blur": 48,
+                "spread": -12,
+                "color": "#00000014"
+              }
+            ],
+            "dark": [
+              {
+                "x": 0,
+                "y": 20,
+                "blur": 48,
+                "spread": -12,
+                "color": "#00000066"
+              }
+            ]
+          }
+        }
+      }
+    ],
+    "opacity": [
+      {
+        "name": "primary",
+        "ref": "$opacity.primary",
+        "values": {
+          "neutral": 1,
+          "exponential": 1,
+          "playful": 1,
+          "orange": 1
+        }
+      },
+      {
+        "name": "secondary",
+        "ref": "$opacity.secondary",
+        "values": {
+          "neutral": 0.7,
+          "exponential": 0.7,
+          "playful": 0.7,
+          "orange": 0.7
+        }
+      },
+      {
+        "name": "tertiary",
+        "ref": "$opacity.tertiary",
+        "values": {
+          "neutral": 0.5,
+          "exponential": 0.5,
+          "playful": 0.5,
+          "orange": 0.5
+        }
+      },
+      {
+        "name": "quaternary",
+        "ref": "$opacity.quaternary",
+        "values": {
+          "neutral": 0.3,
+          "exponential": 0.3,
+          "playful": 0.3,
+          "orange": 0.3
+        }
+      },
+      {
+        "name": "disabled",
+        "ref": "$opacity.disabled",
+        "values": {
+          "neutral": 0.5,
+          "exponential": 0.5,
+          "playful": 0.5,
+          "orange": 0.5
+        }
+      }
+    ],
+    "border": [
+      {
+        "name": "none",
+        "ref": "$border.none",
+        "values": {
+          "neutral": 0,
+          "exponential": 0,
+          "playful": 0,
+          "orange": 0
+        }
+      },
+      {
+        "name": "hairline",
+        "ref": "$border.hairline",
+        "values": {
+          "neutral": 1,
+          "exponential": 1,
+          "playful": 2,
+          "orange": 1
+        }
+      },
+      {
+        "name": "thick",
+        "ref": "$border.thick",
+        "values": {
+          "neutral": 2,
+          "exponential": 2,
+          "playful": 3,
+          "orange": 2
+        }
+      }
+    ],
+    "motion": [
+      {
+        "name": "fast",
+        "ref": "$motion.fast",
+        "values": {
+          "neutral": 120,
+          "exponential": 120,
+          "playful": 160,
+          "orange": 120
+        }
+      },
+      {
+        "name": "standard",
+        "ref": "$motion.standard",
+        "values": {
+          "neutral": 180,
+          "exponential": 180,
+          "playful": 240,
+          "orange": 180
+        }
+      },
+      {
+        "name": "slow",
+        "ref": "$motion.slow",
+        "values": {
+          "neutral": 280,
+          "exponential": 280,
+          "playful": 360,
+          "orange": 280
+        }
+      }
+    ],
+    "breakpoint": [
+      {
+        "name": "sm",
+        "ref": "$breakpoint.sm",
+        "values": {
+          "neutral": 640,
+          "exponential": 640,
+          "playful": 640,
+          "orange": 640
+        }
+      },
+      {
+        "name": "md",
+        "ref": "$breakpoint.md",
+        "values": {
+          "neutral": 768,
+          "exponential": 768,
+          "playful": 768,
+          "orange": 768
+        }
+      },
+      {
+        "name": "lg",
+        "ref": "$breakpoint.lg",
+        "values": {
+          "neutral": 1024,
+          "exponential": 1024,
+          "playful": 1024,
+          "orange": 1024
+        }
+      },
+      {
+        "name": "xl",
+        "ref": "$breakpoint.xl",
+        "values": {
+          "neutral": 1280,
+          "exponential": 1280,
+          "playful": 1280,
+          "orange": 1280
+        }
+      }
+    ],
+    "ease": [
+      {
+        "name": "standard",
+        "ref": "$ease.standard",
+        "values": {
+          "neutral": [
+            0.2,
+            0,
+            0,
+            1
+          ],
+          "exponential": [
+            0.2,
+            0,
+            0,
+            1
+          ],
+          "playful": [
+            0.34,
+            1.56,
+            0.64,
+            1
+          ],
+          "orange": [
+            0.2,
+            0,
+            0,
+            1
+          ]
+        }
+      },
+      {
+        "name": "decelerate",
+        "ref": "$ease.decelerate",
+        "values": {
+          "neutral": [
+            0,
+            0,
+            0.2,
+            1
+          ],
+          "exponential": [
+            0,
+            0,
+            0.2,
+            1
+          ],
+          "playful": [
+            0,
+            0,
+            0.2,
+            1
+          ],
+          "orange": [
+            0,
+            0,
+            0.2,
+            1
+          ]
+        }
+      },
+      {
+        "name": "accelerate",
+        "ref": "$ease.accelerate",
+        "values": {
+          "neutral": [
+            0.3,
+            0,
+            1,
+            1
+          ],
+          "exponential": [
+            0.3,
+            0,
+            1,
+            1
+          ],
+          "playful": [
+            0.3,
+            0,
+            1,
+            1
+          ],
+          "orange": [
+            0.3,
+            0,
+            1,
+            1
+          ]
+        }
+      }
+    ],
+    "density": [
+      {
+        "name": "compact",
+        "ref": "$density.compact",
+        "values": {
+          "neutral": 0.875,
+          "exponential": 0.875,
+          "playful": 0.9,
+          "orange": 0.875
+        }
+      },
+      {
+        "name": "comfortable",
+        "ref": "$density.comfortable",
+        "values": {
+          "neutral": 1.125,
+          "exponential": 1.125,
+          "playful": 1.2,
+          "orange": 1.125
+        }
+      }
+    ],
+    "blur": [
+      {
+        "name": "sm",
+        "ref": "$blur.sm",
+        "values": {
+          "neutral": 4,
+          "exponential": 4,
+          "playful": 4,
+          "orange": 4
+        }
+      },
+      {
+        "name": "md",
+        "ref": "$blur.md",
+        "values": {
+          "neutral": 12,
+          "exponential": 12,
+          "playful": 12,
+          "orange": 12
+        }
+      },
+      {
+        "name": "lg",
+        "ref": "$blur.lg",
+        "values": {
+          "neutral": 16,
+          "exponential": 16,
+          "playful": 16,
+          "orange": 16
+        }
+      },
+      {
+        "name": "xl",
+        "ref": "$blur.xl",
+        "values": {
+          "neutral": 24,
+          "exponential": 24,
+          "playful": 24,
+          "orange": 24
+        }
+      }
+    ],
+    "scale": [
+      {
+        "name": "press",
+        "ref": "$scale.press",
+        "values": {
+          "neutral": 1,
+          "exponential": 0.97,
+          "playful": 0.94,
+          "orange": 0.97
+        }
+      },
+      {
+        "name": "popoverFrom",
+        "ref": "$scale.popoverFrom",
+        "values": {
+          "neutral": 0.95,
+          "exponential": 0.96,
+          "playful": 0.9,
+          "orange": 0.96
+        }
+      }
+    ]
+  },
+  "states": [
+    "hover",
+    "pressed",
+    "focus",
+    "disabled",
+    "checked",
+    "open",
+    "selected",
+    "invalid",
+    "dragover"
+  ],
+  "keys": [
+    "backgroundColor",
+    "color",
+    "borderColor",
+    "borderWidth",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderRadius",
+    "borderStyle",
+    "padding",
+    "paddingHorizontal",
+    "paddingVertical",
+    "gap",
+    "width",
+    "height",
+    "minWidth",
+    "minHeight",
+    "fontSize",
+    "fontWeight",
+    "lineHeight",
+    "fontFamily",
+    "letterSpacing",
+    "textDecoration",
+    "textTransform",
+    "fontStyle",
+    "boxShadow",
+    "opacity",
+    "transition",
+    "transitionEasing",
+    "transform",
+    "backdropBlur",
+    "animation",
+    "native"
+  ],
+  "components": [
+    {
+      "name": "Box",
+      "kind": "native",
+      "parts": [
+        "root"
+      ],
+      "props": [
+        "pressable"
+      ]
+    },
+    {
+      "name": "Stack",
+      "kind": "macro",
+      "parts": [
+        "root"
+      ],
+      "props": []
+    },
+    {
+      "name": "Grid",
+      "kind": "macro",
+      "parts": [
+        "root"
+      ],
+      "props": []
+    },
+    {
+      "name": "Card",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "header",
+        "title",
+        "description",
+        "body"
+      ],
+      "props": []
+    },
+    {
+      "name": "Separator",
+      "kind": "macro",
+      "parts": [
+        "root"
+      ],
+      "props": []
+    },
+    {
+      "name": "List",
+      "kind": "native",
+      "parts": [
+        "root",
+        "divider",
+        "section"
+      ],
+      "props": [
+        "direction",
+        "divided",
+        "stickyHeaders"
+      ]
+    },
+    {
+      "name": "Resizable",
+      "kind": "native",
+      "parts": [
+        "root",
+        "panel",
+        "handle",
+        "grip"
+      ],
+      "props": [
+        "direction",
+        "handle"
+      ]
+    },
+    {
+      "name": "ScrollArea",
+      "kind": "macro",
+      "parts": [
+        "root"
+      ],
+      "props": []
+    },
+    {
+      "name": "Sidebar",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "sidebar",
+        "main"
+      ],
+      "props": [
+        "side"
+      ]
+    },
+    {
+      "name": "SplitView",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "list",
+        "divider",
+        "detail",
+        "backBar",
+        "back"
+      ],
+      "props": []
+    },
+    {
+      "name": "AppBar",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "back",
+        "body",
+        "title",
+        "subtitle"
+      ],
+      "props": []
+    },
+    {
+      "name": "Page",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "header",
+        "body"
+      ],
+      "props": []
+    },
+    {
+      "name": "Toolbar",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "spacer"
+      ],
+      "props": []
+    },
+    {
+      "name": "Section",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "header",
+        "chevron",
+        "icon",
+        "title",
+        "caption",
+        "loading",
+        "count",
+        "spacer",
+        "body"
+      ],
+      "props": [
+        "tint",
+        "tree",
+        "open",
+        "collapsible"
+      ]
+    },
+    {
+      "name": "Group",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "title",
+        "body",
+        "footer"
+      ],
+      "props": []
+    },
+    {
+      "name": "Text",
+      "kind": "native",
+      "parts": [
+        "root"
+      ],
+      "props": [
+        "variant",
+        "tone"
+      ]
+    },
+    {
+      "name": "Heading",
+      "kind": "macro",
+      "parts": [
+        "root"
+      ],
+      "props": [
+        "level"
+      ]
+    },
+    {
+      "name": "Markdown",
+      "kind": "native",
+      "parts": [
+        "root",
+        "paragraph",
+        "heading",
+        "link",
+        "code",
+        "codeBlock",
+        "quote",
+        "table",
+        "listItem"
+      ],
+      "props": []
+    },
+    {
+      "name": "CodeBlock",
+      "kind": "native",
+      "parts": [
+        "root",
+        "header",
+        "title",
+        "copy",
+        "gutter",
+        "line",
+        "lineNumber",
+        "token",
+        "body",
+        "code"
+      ],
+      "props": [
+        "lineNumbers",
+        "wrap",
+        "kind",
+        "variant",
+        "size"
+      ]
+    },
+    {
+      "name": "Kbd",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "label"
+      ],
+      "props": []
+    },
+    {
+      "name": "Label",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "text",
+        "mark"
+      ],
+      "props": [
+        "required"
+      ]
+    },
+    {
+      "name": "Image",
+      "kind": "native",
+      "parts": [
+        "root",
+        "fallback"
+      ],
+      "props": [
+        "fit"
+      ]
+    },
+    {
+      "name": "Icon",
+      "kind": "native",
+      "parts": [
+        "root"
+      ],
+      "props": [
+        "size",
+        "tone"
+      ]
+    },
+    {
+      "name": "Video",
+      "kind": "native",
+      "parts": [
+        "root",
+        "controls",
+        "poster"
+      ],
+      "props": [
+        "autoplay"
+      ]
+    },
+    {
+      "name": "AudioPlayer",
+      "kind": "native",
+      "parts": [
+        "root",
+        "controls",
+        "track"
+      ],
+      "props": []
+    },
+    {
+      "name": "Avatar",
+      "kind": "native",
+      "parts": [
+        "root",
+        "image",
+        "fallback"
+      ],
+      "props": [
+        "size"
+      ]
+    },
+    {
+      "name": "QrCode",
+      "kind": "native",
+      "parts": [
+        "root",
+        "plate",
+        "module",
+        "label"
+      ],
+      "props": [
+        "level"
+      ]
+    },
+    {
+      "name": "Carousel",
+      "kind": "native",
+      "parts": [
+        "root",
+        "page",
+        "indicator",
+        "controls",
+        "previous",
+        "next"
+      ],
+      "props": [
+        "loop",
+        "indicators"
+      ]
+    },
+    {
+      "name": "Tabs",
+      "kind": "native",
+      "parts": [
+        "root",
+        "list",
+        "tab",
+        "indicator",
+        "content",
+        "close",
+        "new"
+      ],
+      "props": [
+        "fill",
+        "closable",
+        "addable"
+      ]
+    },
+    {
+      "name": "Segmented",
+      "kind": "native",
+      "parts": [
+        "root",
+        "item",
+        "icon",
+        "label",
+        "badge"
+      ],
+      "props": [
+        "type",
+        "variant",
+        "size",
+        "fill",
+        "orientation"
+      ]
+    },
+    {
+      "name": "Accordion",
+      "kind": "native",
+      "parts": [
+        "root",
+        "item",
+        "trigger",
+        "content",
+        "count"
+      ],
+      "props": [
+        "type"
+      ]
+    },
+    {
+      "name": "Collapsible",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "trigger",
+        "chevron",
+        "title",
+        "count",
+        "body"
+      ],
+      "props": [
+        "open"
+      ]
+    },
+    {
+      "name": "Trace",
+      "kind": "macro",
+      "parts": [
+        "root"
+      ],
+      "props": [
+        "size"
+      ]
+    },
+    {
+      "name": "TraceItem",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "line",
+        "icon",
+        "title",
+        "description",
+        "chevron",
+        "content"
+      ],
+      "props": [
+        "status",
+        "size",
+        "collapsible",
+        "open"
+      ]
+    },
+    {
+      "name": "Plan",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "card",
+        "header",
+        "title",
+        "description",
+        "steps",
+        "step",
+        "footer",
+        "decline",
+        "approve",
+        "running",
+        "progress",
+        "stop"
+      ],
+      "props": [
+        "state"
+      ]
+    },
+    {
+      "name": "Pagination",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "prev",
+        "label",
+        "next"
+      ],
+      "props": []
+    },
+    {
+      "name": "Breadcrumb",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "item",
+        "separator",
+        "link",
+        "current"
+      ],
+      "props": [
+        "current"
+      ]
+    },
+    {
+      "name": "Stepper",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "step",
+        "marker",
+        "check",
+        "number",
+        "body",
+        "label",
+        "description"
+      ],
+      "props": [
+        "orientation",
+        "status"
+      ]
+    },
+    {
+      "name": "Dialog",
+      "kind": "native",
+      "parts": [
+        "overlay",
+        "content",
+        "title",
+        "description",
+        "footer",
+        "close"
+      ],
+      "props": [
+        "dismissible"
+      ]
+    },
+    {
+      "name": "Drawer",
+      "kind": "native",
+      "parts": [
+        "overlay",
+        "content",
+        "handle",
+        "title",
+        "description",
+        "footer"
+      ],
+      "props": [
+        "side",
+        "dismissible"
+      ]
+    },
+    {
+      "name": "DockCard",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "trigger",
+        "icon",
+        "body",
+        "header",
+        "label",
+        "caption",
+        "spacer",
+        "meta",
+        "row",
+        "title",
+        "chevron",
+        "sheet"
+      ],
+      "props": [
+        "tone"
+      ]
+    },
+    {
+      "name": "AlertDialog",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "footer",
+        "cancel",
+        "confirm"
+      ],
+      "props": [
+        "destructive"
+      ]
+    },
+    {
+      "name": "Popover",
+      "kind": "native",
+      "parts": [
+        "content",
+        "arrow"
+      ],
+      "props": [
+        "side",
+        "openOn"
+      ]
+    },
+    {
+      "name": "Tooltip",
+      "kind": "native",
+      "parts": [
+        "content",
+        "arrow",
+        "anchor"
+      ],
+      "props": [
+        "side"
+      ]
+    },
+    {
+      "name": "Menu",
+      "kind": "native",
+      "parts": [
+        "trigger",
+        "content",
+        "item",
+        "separator",
+        "label",
+        "shortcut",
+        "check",
+        "submenuIndicator",
+        "head",
+        "search",
+        "count",
+        "list",
+        "empty",
+        "fade"
+      ],
+      "props": [
+        "openOn"
+      ]
+    },
+    {
+      "name": "Toast",
+      "kind": "native",
+      "parts": [
+        "root",
+        "icon",
+        "title",
+        "description",
+        "action",
+        "close"
+      ],
+      "props": [
+        "type"
+      ]
+    },
+    {
+      "name": "Badge",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "icon",
+        "label"
+      ],
+      "props": [
+        "variant"
+      ]
+    },
+    {
+      "name": "Alert",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "icon",
+        "body",
+        "title",
+        "message"
+      ],
+      "props": [
+        "type"
+      ]
+    },
+    {
+      "name": "Chip",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "dot",
+        "image",
+        "icon",
+        "label",
+        "detail",
+        "remove"
+      ],
+      "props": [
+        "shape",
+        "selected",
+        "tone"
+      ]
+    },
+    {
+      "name": "EmptyState",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "disc",
+        "icon",
+        "title",
+        "description",
+        "action"
+      ],
+      "props": [
+        "size"
+      ]
+    },
+    {
+      "name": "Progress",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "label",
+        "track",
+        "fill"
+      ],
+      "props": [
+        "tone"
+      ]
+    },
+    {
+      "name": "Meter",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "header",
+        "label",
+        "value",
+        "track",
+        "segment"
+      ],
+      "props": [
+        "tone"
+      ]
+    },
+    {
+      "name": "Ring",
+      "kind": "native",
+      "parts": [
+        "root",
+        "track",
+        "fill",
+        "label"
+      ],
+      "props": [
+        "size",
+        "tone"
+      ]
+    },
+    {
+      "name": "Spinner",
+      "kind": "native",
+      "parts": [
+        "root"
+      ],
+      "props": [
+        "size"
+      ]
+    },
+    {
+      "name": "Skeleton",
+      "kind": "native",
+      "parts": [
+        "root",
+        "row",
+        "dot",
+        "bar"
+      ],
+      "props": [
+        "rounded",
+        "dot"
+      ]
+    },
+    {
+      "name": "VoiceWave",
+      "kind": "native",
+      "parts": [
+        "root",
+        "outer",
+        "mid",
+        "inner",
+        "child",
+        "bar"
+      ],
+      "props": [
+        "activity",
+        "size",
+        "variant"
+      ]
+    },
+    {
+      "name": "CallSurface",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "head",
+        "wave",
+        "avatar",
+        "name",
+        "status",
+        "caption",
+        "spacer",
+        "controls",
+        "muteTip",
+        "mute",
+        "muteIcon",
+        "speakerTip",
+        "speaker",
+        "speakerIcon",
+        "endTip",
+        "end",
+        "endIcon",
+        "cancel",
+        "cancelLabel"
+      ],
+      "props": [
+        "state",
+        "muted"
+      ]
+    },
+    {
+      "name": "Table",
+      "kind": "native",
+      "parts": [
+        "root",
+        "caption",
+        "header",
+        "headerCell",
+        "sortIcon",
+        "row",
+        "cell",
+        "checkbox",
+        "empty",
+        "body"
+      ],
+      "props": [
+        "selectable",
+        "striped",
+        "density",
+        "stickyHeader",
+        "align"
+      ]
+    },
+    {
+      "name": "Chart",
+      "kind": "native",
+      "parts": [
+        "root",
+        "title",
+        "axis",
+        "grid",
+        "legend",
+        "tooltip",
+        "valueLabel"
+      ],
+      "props": [
+        "kind"
+      ]
+    },
+    {
+      "name": "Sparkline",
+      "kind": "macro",
+      "parts": [
+        "root"
+      ],
+      "props": [
+        "tone"
+      ]
+    },
+    {
+      "name": "StatTile",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "card",
+        "header",
+        "label",
+        "delta",
+        "value",
+        "trend"
+      ],
+      "props": []
+    },
+    {
+      "name": "Button",
+      "kind": "native",
+      "parts": [
+        "root",
+        "icon",
+        "label",
+        "spinner"
+      ],
+      "props": [
+        "variant",
+        "size",
+        "disabled",
+        "loading"
+      ]
+    },
+    {
+      "name": "Link",
+      "kind": "native",
+      "parts": [
+        "root"
+      ],
+      "props": [
+        "external"
+      ]
+    },
+    {
+      "name": "Toggle",
+      "kind": "native",
+      "parts": [
+        "root",
+        "icon",
+        "label"
+      ],
+      "props": [
+        "variant",
+        "size",
+        "pressed"
+      ]
+    },
+    {
+      "name": "Form",
+      "kind": "native",
+      "parts": [
+        "root",
+        "summary"
+      ],
+      "props": [
+        "disabled",
+        "busy"
+      ]
+    },
+    {
+      "name": "FieldGroup",
+      "kind": "macro",
+      "parts": [
+        "root"
+      ],
+      "props": []
+    },
+    {
+      "name": "FormActions",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "cancel",
+        "submit"
+      ],
+      "props": []
+    },
+    {
+      "name": "Input",
+      "kind": "native",
+      "parts": [
+        "root",
+        "label",
+        "field",
+        "placeholder",
+        "description",
+        "error"
+      ],
+      "props": [
+        "type",
+        "disabled"
+      ]
+    },
+    {
+      "name": "Textarea",
+      "kind": "native",
+      "parts": [
+        "root",
+        "label",
+        "field",
+        "placeholder",
+        "description",
+        "error"
+      ],
+      "props": [
+        "disabled"
+      ]
+    },
+    {
+      "name": "NumberField",
+      "kind": "native",
+      "parts": [
+        "root",
+        "label",
+        "field",
+        "decrement",
+        "increment",
+        "unit",
+        "description",
+        "error",
+        "input"
+      ],
+      "props": [
+        "disabled"
+      ]
+    },
+    {
+      "name": "Checkbox",
+      "kind": "native",
+      "parts": [
+        "root",
+        "box",
+        "check",
+        "label",
+        "description"
+      ],
+      "props": [
+        "checked",
+        "disabled"
+      ]
+    },
+    {
+      "name": "Radio",
+      "kind": "native",
+      "parts": [
+        "root",
+        "item",
+        "dot",
+        "label",
+        "items"
+      ],
+      "props": [
+        "orientation"
+      ]
+    },
+    {
+      "name": "ChoiceTiles",
+      "kind": "native",
+      "parts": [
+        "root",
+        "tile",
+        "picture",
+        "label",
+        "description"
+      ],
+      "props": [
+        "type",
+        "columns"
+      ]
+    },
+    {
+      "name": "Switch",
+      "kind": "native",
+      "parts": [
+        "root",
+        "track",
+        "thumb",
+        "label",
+        "description",
+        "body"
+      ],
+      "props": [
+        "checked",
+        "disabled"
+      ]
+    },
+    {
+      "name": "Slider",
+      "kind": "native",
+      "parts": [
+        "root",
+        "track",
+        "range",
+        "thumb",
+        "label",
+        "value",
+        "header"
+      ],
+      "props": []
+    },
+    {
+      "name": "Rating",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "star",
+        "icon"
+      ],
+      "props": [
+        "size",
+        "readOnly",
+        "filled"
+      ]
+    },
+    {
+      "name": "Select",
+      "kind": "native",
+      "parts": [
+        "root",
+        "label",
+        "trigger",
+        "placeholder",
+        "content",
+        "search",
+        "item",
+        "check",
+        "empty"
+      ],
+      "props": [
+        "multiple",
+        "searchable",
+        "disabled"
+      ]
+    },
+    {
+      "name": "SearchList",
+      "kind": "native",
+      "parts": [
+        "root",
+        "head",
+        "search",
+        "count",
+        "list",
+        "item",
+        "icon",
+        "identifier",
+        "label",
+        "check",
+        "empty",
+        "fade"
+      ],
+      "props": []
+    },
+    {
+      "name": "ChipInput",
+      "kind": "native",
+      "parts": [
+        "root",
+        "label",
+        "field",
+        "chip",
+        "chipLabel",
+        "remove",
+        "placeholder",
+        "description",
+        "error",
+        "input"
+      ],
+      "props": [
+        "disabled"
+      ]
+    },
+    {
+      "name": "DatePicker",
+      "kind": "native",
+      "parts": [
+        "root",
+        "label",
+        "trigger",
+        "calendar",
+        "day"
+      ],
+      "props": []
+    },
+    {
+      "name": "DateRangePicker",
+      "kind": "native",
+      "parts": [
+        "root",
+        "label",
+        "trigger",
+        "calendar",
+        "day",
+        "range"
+      ],
+      "props": []
+    },
+    {
+      "name": "TimePicker",
+      "kind": "native",
+      "parts": [
+        "root",
+        "label",
+        "trigger",
+        "placeholder",
+        "list",
+        "item"
+      ],
+      "props": [
+        "disabled"
+      ]
+    },
+    {
+      "name": "FileUpload",
+      "kind": "native",
+      "parts": [
+        "root",
+        "label",
+        "dropzone",
+        "icon",
+        "hint",
+        "file",
+        "fileName",
+        "fileMeta",
+        "remove",
+        "description",
+        "error",
+        "title",
+        "browse",
+        "fileIcon"
+      ],
+      "props": [
+        "multiple",
+        "disabled"
+      ]
+    },
+    {
+      "name": "QrScanner",
+      "kind": "native",
+      "parts": [
+        "root",
+        "viewfinder",
+        "feed",
+        "corner",
+        "scanLine",
+        "placeholder",
+        "placeholderIcon",
+        "hint"
+      ],
+      "props": [
+        "disabled"
+      ]
+    },
+    {
+      "name": "Composer",
+      "kind": "native",
+      "parts": [
+        "root",
+        "field",
+        "placeholder",
+        "attachment",
+        "send"
+      ],
+      "props": [
+        "attachments",
+        "busy"
+      ]
+    },
+    {
+      "name": "Row",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "guides",
+        "icon",
+        "identifier",
+        "body",
+        "title",
+        "subtitle",
+        "meta",
+        "value",
+        "chevron"
+      ],
+      "props": [
+        "selected",
+        "density",
+        "surface",
+        "depth"
+      ]
+    },
+    {
+      "name": "MessageBubble",
+      "kind": "macro",
+      "parts": [
+        "root",
+        "bubble",
+        "author",
+        "text",
+        "footer",
+        "time",
+        "status"
+      ],
+      "props": [
+        "side",
+        "status"
+      ]
+    },
+    {
+      "name": "TreeGuides",
+      "kind": "native",
+      "parts": [
+        "root",
+        "line"
+      ],
+      "props": [
+        "tee"
+      ]
+    },
+    {
+      "name": "Unknown",
+      "kind": "native",
+      "parts": [
+        "root",
+        "label"
+      ],
+      "props": []
+    }
+  ]
+}