vectis-ui 0.1.0

package/dist/tokens.json

@@ -0,0 +1,1516 @@
+{
+  "primitives": {
+    "color": {
+      "white": {
+        "$type": "color",
+        "$value": "oklch(100% 0 0)"
+      },
+      "black": {
+        "$type": "color",
+        "$value": "oklch(0% 0 0)"
+      },
+      "red": {
+        "50": {
+          "$type": "color",
+          "$value": "oklch(97.1% 0.013 17.38)"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "oklch(93.6% 0.032 17.717)"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "oklch(88.5% 0.062 18.334)"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "oklch(80.8% 0.114 19.571)"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "oklch(70.4% 0.191 22.216)"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "oklch(63.7% 0.237 25.331)"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "oklch(57.7% 0.245 27.325)"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "oklch(50.5% 0.213 27.518)"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "oklch(44.4% 0.177 26.899)"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "oklch(39.6% 0.141 25.723)"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "oklch(25.8% 0.092 26.042)"
+        }
+      },
+      "amber": {
+        "50": {
+          "$type": "color",
+          "$value": "oklch(98.7% 0.022 95.277)"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "oklch(96.2% 0.059 95.617)"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "oklch(92.4% 0.12 95.746)"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "oklch(87.9% 0.169 91.605)"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "oklch(82.8% 0.189 84.429)"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "oklch(76.9% 0.188 70.08)"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "oklch(66.6% 0.179 58.318)"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "oklch(55.5% 0.163 48.998)"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "oklch(47.3% 0.137 46.201)"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "oklch(41.4% 0.112 45.904)"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "oklch(27.9% 0.077 45.635)"
+        }
+      },
+      "green": {
+        "50": {
+          "$type": "color",
+          "$value": "oklch(98.2% 0.018 155.826)"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "oklch(96.2% 0.044 156.743)"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "oklch(92.5% 0.084 155.995)"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "oklch(87.1% 0.15 154.449)"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "oklch(79.2% 0.209 151.711)"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "oklch(72.3% 0.219 149.579)"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "oklch(62.7% 0.194 149.214)"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "oklch(52.7% 0.154 150.069)"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "oklch(44.8% 0.119 151.328)"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "oklch(39.3% 0.095 152.535)"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "oklch(26.6% 0.065 152.934)"
+        }
+      },
+      "indigo": {
+        "50": {
+          "$type": "color",
+          "$value": "oklch(96.2% 0.018 272.314)"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "oklch(93% 0.034 272.788)"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "oklch(87% 0.065 274.039)"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "oklch(78.5% 0.115 274.713)"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "oklch(67.3% 0.182 276.935)"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "oklch(58.5% 0.233 277.117)"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "oklch(51.1% 0.262 276.966)"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "oklch(45.7% 0.24 277.023)"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "oklch(39.8% 0.195 277.366)"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "oklch(35.9% 0.144 278.697)"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "oklch(25.7% 0.09 281.288)"
+        }
+      },
+      "gray": {
+        "50": {
+          "$type": "color",
+          "$value": "oklch(98.5% 0.002 247.839)"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "oklch(96.7% 0.003 264.542)"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "oklch(92.8% 0.006 264.531)"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "oklch(87.2% 0.01 258.338)"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "oklch(70.7% 0.022 261.325)"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "oklch(55.1% 0.027 264.364)"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "oklch(44.6% 0.03 256.802)"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "oklch(37.3% 0.034 259.733)"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "oklch(27.8% 0.033 256.848)"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "oklch(21% 0.034 264.665)"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "oklch(13% 0.028 261.692)"
+        }
+      }
+    },
+    "space": {
+      "1": {
+        "$type": "dimension",
+        "$value": "0.25rem"
+      },
+      "2": {
+        "$type": "dimension",
+        "$value": "0.5rem"
+      },
+      "3": {
+        "$type": "dimension",
+        "$value": "0.75rem"
+      },
+      "4": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "5": {
+        "$type": "dimension",
+        "$value": "1.25rem"
+      },
+      "6": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      },
+      "7": {
+        "$type": "dimension",
+        "$value": "2rem"
+      },
+      "8": {
+        "$type": "dimension",
+        "$value": "2.5rem"
+      },
+      "9": {
+        "$type": "dimension",
+        "$value": "3rem"
+      },
+      "10": {
+        "$type": "dimension",
+        "$value": "4rem"
+      },
+      "11": {
+        "$type": "dimension",
+        "$value": "5rem"
+      },
+      "12": {
+        "$type": "dimension",
+        "$value": "6rem"
+      }
+    },
+    "font": {
+      "family": {
+        "sans": {
+          "$type": "fontFamily",
+          "$value": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
+        },
+        "display": {
+          "$type": "fontFamily",
+          "$value": "{font.family.sans}"
+        },
+        "mono": {
+          "$type": "fontFamily",
+          "$value": "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace"
+        },
+        "icon": {
+          "$type": "fontFamily",
+          "$value": "'Material Symbols Rounded'"
+        }
+      },
+      "weight": {
+        "regular": {
+          "$type": "fontWeight",
+          "$value": "400"
+        },
+        "medium": {
+          "$type": "fontWeight",
+          "$value": "500"
+        },
+        "semibold": {
+          "$type": "fontWeight",
+          "$value": "600"
+        },
+        "bold": {
+          "$type": "fontWeight",
+          "$value": "700"
+        }
+      },
+      "size": {
+        "xs": {
+          "$type": "dimension",
+          "$value": "0.75rem"
+        },
+        "sm": {
+          "$type": "dimension",
+          "$value": "0.875rem"
+        },
+        "md": {
+          "$type": "dimension",
+          "$value": "1rem"
+        },
+        "lg": {
+          "$type": "dimension",
+          "$value": "1.125rem"
+        },
+        "xl": {
+          "$type": "dimension",
+          "$value": "1.25rem"
+        },
+        "2xl": {
+          "$type": "dimension",
+          "$value": "1.5rem"
+        },
+        "3xl": {
+          "$type": "dimension",
+          "$value": "1.875rem"
+        },
+        "4xl": {
+          "$type": "dimension",
+          "$value": "2.25rem"
+        },
+        "5xl": {
+          "$type": "dimension",
+          "$value": "3rem"
+        }
+      },
+      "leading": {
+        "none": {
+          "$type": "dimension",
+          "$value": "1"
+        },
+        "tight": {
+          "$type": "dimension",
+          "$value": "1.25"
+        },
+        "snug": {
+          "$type": "dimension",
+          "$value": "1.4"
+        },
+        "normal": {
+          "$type": "dimension",
+          "$value": "1.5"
+        },
+        "relaxed": {
+          "$type": "dimension",
+          "$value": "1.65"
+        }
+      },
+      "tracking": {
+        "tight": {
+          "$type": "dimension",
+          "$value": "-0.015em",
+          "$description": "Tightening for large sizes (display, the top headings)"
+        },
+        "wide": {
+          "$type": "dimension",
+          "$value": "0.05em",
+          "$description": "Letter spacing for all-caps micro labels (overline)"
+        }
+      }
+    },
+    "radius": {
+      "none": {
+        "$type": "dimension",
+        "$value": "0px"
+      },
+      "xs": {
+        "$type": "dimension",
+        "$value": "0.125rem"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "0.25rem"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "0.375rem"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "0.5rem"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "0.75rem"
+      },
+      "2xl": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "full": {
+        "$type": "dimension",
+        "$value": "9999px"
+      }
+    },
+    "shadow": {
+      "xs": {
+        "$type": "shadow",
+        "$value": "0 1px 2px 0 oklch(0% 0 0 / 0.05)"
+      },
+      "sm": {
+        "$type": "shadow",
+        "$value": "0 1px 3px 0 oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1)"
+      },
+      "md": {
+        "$type": "shadow",
+        "$value": "0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1)"
+      },
+      "lg": {
+        "$type": "shadow",
+        "$value": "0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1)"
+      },
+      "xl": {
+        "$type": "shadow",
+        "$value": "0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1)"
+      }
+    },
+    "duration": {
+      "0": {
+        "$type": "duration",
+        "$value": "0ms"
+      },
+      "50": {
+        "$type": "duration",
+        "$value": "50ms"
+      },
+      "100": {
+        "$type": "duration",
+        "$value": "100ms"
+      },
+      "150": {
+        "$type": "duration",
+        "$value": "150ms"
+      },
+      "200": {
+        "$type": "duration",
+        "$value": "200ms"
+      },
+      "300": {
+        "$type": "duration",
+        "$value": "300ms"
+      },
+      "400": {
+        "$type": "duration",
+        "$value": "400ms"
+      },
+      "500": {
+        "$type": "duration",
+        "$value": "500ms"
+      },
+      "700": {
+        "$type": "duration",
+        "$value": "700ms"
+      },
+      "1000": {
+        "$type": "duration",
+        "$value": "1000ms"
+      },
+      "1500": {
+        "$type": "duration",
+        "$value": "1500ms"
+      },
+      "2000": {
+        "$type": "duration",
+        "$value": "2000ms"
+      },
+      "3000": {
+        "$type": "duration",
+        "$value": "3000ms"
+      },
+      "5000": {
+        "$type": "duration",
+        "$value": "5000ms"
+      }
+    },
+    "ease": {
+      "default": {
+        "$type": "cubicBezier",
+        "$value": "cubic-bezier(0.2, 0, 0, 1)"
+      },
+      "in": {
+        "$type": "cubicBezier",
+        "$value": "cubic-bezier(0.5, 0, 1, 1)"
+      },
+      "out": {
+        "$type": "cubicBezier",
+        "$value": "cubic-bezier(0, 0, 0.2, 1)"
+      },
+      "in-out": {
+        "$type": "cubicBezier",
+        "$value": "cubic-bezier(0.4, 0, 0.2, 1)",
+        "$description": "Symmetric: both the start and the end are eased. Looping animations that cross the track (an indeterminate VProgressLinear)."
+      }
+    }
+  },
+  "semantic": {
+    "color": {
+      "surface": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "The default page background"
+      },
+      "surface-muted": {
+        "$type": "color",
+        "$value": "{color.gray.100}",
+        "$description": "A muted background (secondary areas)"
+      },
+      "surface-raised": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Raised surfaces: cards"
+      },
+      "surface-overlay": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Floating surfaces: dialogs, popovers, menus"
+      },
+      "surface-sunken": {
+        "$type": "color",
+        "$value": "{color.gray.50}",
+        "$description": "Sunken surfaces: wells, code areas"
+      },
+      "surface-inverse": {
+        "$type": "color",
+        "$value": "{color.gray.900}",
+        "$description": "Inverted-contrast surfaces: tooltips"
+      },
+      "surface-skeleton": {
+        "$type": "color",
+        "$value": "{color.gray.200}",
+        "$description": "The background of the loading silhouettes (VSkeletonLoader); the highlight derives from it in CSS"
+      },
+      "text-on-inverse": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Text set on an inverted surface"
+      },
+      "text": {
+        "$type": "color",
+        "$value": "{color.gray.900}"
+      },
+      "text-muted": {
+        "$type": "color",
+        "$value": "{color.gray.600}"
+      },
+      "text-subtle": {
+        "$type": "color",
+        "$value": "{color.gray.500}",
+        "$description": "Placeholders, disabled text"
+      },
+      "text-on-accent": {
+        "$type": "color",
+        "$value": "{color.white}",
+        "$description": "Text set on an accent/danger/success background"
+      },
+      "text-on-warning": {
+        "$type": "color",
+        "$value": "{color.gray.950}",
+        "$description": "Text set on a solid warning background (amber too light for white)"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.gray.200}"
+      },
+      "border-strong": {
+        "$type": "color",
+        "$value": "{color.gray.300}",
+        "$description": "The borders of form controls"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{color.indigo.600}"
+      },
+      "accent-hover": {
+        "$type": "color",
+        "$value": "{color.indigo.700}"
+      },
+      "accent-active": {
+        "$type": "color",
+        "$value": "{color.indigo.800}"
+      },
+      "accent-surface": {
+        "$type": "color",
+        "$value": "{color.indigo.50}",
+        "$description": "A tinted accent background (badges, selections)"
+      },
+      "accent-border": {
+        "$type": "color",
+        "$value": "{color.indigo.200}"
+      },
+      "accent-text": {
+        "$type": "color",
+        "$value": "{color.indigo.700}",
+        "$description": "Accent text on a neutral or tinted background"
+      },
+      "danger": {
+        "$type": "color",
+        "$value": "{color.red.600}"
+      },
+      "danger-hover": {
+        "$type": "color",
+        "$value": "{color.red.700}"
+      },
+      "danger-active": {
+        "$type": "color",
+        "$value": "{color.red.800}"
+      },
+      "danger-surface": {
+        "$type": "color",
+        "$value": "{color.red.50}"
+      },
+      "danger-border": {
+        "$type": "color",
+        "$value": "{color.red.200}"
+      },
+      "danger-text": {
+        "$type": "color",
+        "$value": "{color.red.700}"
+      },
+      "success": {
+        "$type": "color",
+        "$value": "{color.green.700}"
+      },
+      "success-hover": {
+        "$type": "color",
+        "$value": "{color.green.800}"
+      },
+      "success-active": {
+        "$type": "color",
+        "$value": "{color.green.900}"
+      },
+      "success-surface": {
+        "$type": "color",
+        "$value": "{color.green.50}"
+      },
+      "success-border": {
+        "$type": "color",
+        "$value": "{color.green.200}"
+      },
+      "success-text": {
+        "$type": "color",
+        "$value": "{color.green.800}"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{color.amber.600}"
+      },
+      "warning-hover": {
+        "$type": "color",
+        "$value": "{color.amber.700}"
+      },
+      "warning-active": {
+        "$type": "color",
+        "$value": "{color.amber.800}"
+      },
+      "warning-surface": {
+        "$type": "color",
+        "$value": "{color.amber.50}"
+      },
+      "warning-border": {
+        "$type": "color",
+        "$value": "{color.amber.200}"
+      },
+      "warning-text": {
+        "$type": "color",
+        "$value": "{color.amber.900}"
+      },
+      "backdrop": {
+        "$type": "color",
+        "$value": "oklch(0% 0 0 / 0.45)",
+        "$description": "The veil behind modal dialogs"
+      },
+      "event-surface": {
+        "$type": "color",
+        "$value": "oklch(0.95 0.045 var(--vectis-calendar-event-hue, 265))",
+        "$description": "The face of a calendar event that carries no colour of its own"
+      },
+      "event-border": {
+        "$type": "color",
+        "$value": "oklch(0.85 0.08 var(--vectis-calendar-event-hue, 265))",
+        "$description": "The edge of that event, and the bar marking its leading side"
+      },
+      "event-text": {
+        "$type": "color",
+        "$value": "oklch(0.4 0.11 var(--vectis-calendar-event-hue, 265))",
+        "$description": "The title written on that face"
+      }
+    },
+    "text": {
+      "family": {
+        "$type": "fontFamily",
+        "$value": "{font.family.sans}",
+        "$description": "The font of all the design system text"
+      },
+      "family-heading": {
+        "$type": "fontFamily",
+        "$value": "{font.family.display}",
+        "$description": "The font of the display and heading roles; identical to the running font until it is overridden"
+      },
+      "family-code": {
+        "$type": "fontFamily",
+        "$value": "{font.family.mono}",
+        "$description": "The font of code content (the code variant, VInputOTP)"
+      },
+      "display": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.5xl}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.bold}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.none}"
+        },
+        "tracking": {
+          "$type": "dimension",
+          "$value": "{font.tracking.tight}"
+        }
+      },
+      "heading-1": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.4xl}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.bold}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.tight}"
+        },
+        "tracking": {
+          "$type": "dimension",
+          "$value": "{font.tracking.tight}"
+        }
+      },
+      "heading-2": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.2xl}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.semibold}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.tight}"
+        },
+        "tracking": {
+          "$type": "dimension",
+          "$value": "{font.tracking.tight}"
+        }
+      },
+      "heading-3": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.lg}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.semibold}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.snug}"
+        }
+      },
+      "heading-4": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.md}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.semibold}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.snug}"
+        }
+      },
+      "subtitle": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.sm}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.regular}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.normal}"
+        }
+      },
+      "body-xl": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.lg}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.regular}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.relaxed}"
+        }
+      },
+      "body-lg": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.md}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.regular}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.relaxed}"
+        }
+      },
+      "body-md": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.sm}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.regular}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.normal}"
+        }
+      },
+      "body-sm": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.xs}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.regular}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.normal}"
+        }
+      },
+      "label": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.sm}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.medium}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.snug}"
+        }
+      },
+      "caption": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.xs}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.regular}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.snug}"
+        }
+      },
+      "overline": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.xs}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.medium}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.snug}"
+        },
+        "tracking": {
+          "$type": "dimension",
+          "$value": "{font.tracking.wide}"
+        }
+      },
+      "code": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.sm}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.regular}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.normal}"
+        }
+      },
+      "control": {
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.medium}"
+        },
+        "leading": {
+          "$type": "dimension",
+          "$value": "{font.leading.none}"
+        }
+      }
+    },
+    "radius": {
+      "interactive": {
+        "$type": "dimension",
+        "$value": "{radius.md}",
+        "$description": "Buttons, inputs, controls"
+      },
+      "surface": {
+        "$type": "dimension",
+        "$value": "{radius.lg}",
+        "$description": "Cards, alerts"
+      },
+      "overlay": {
+        "$type": "dimension",
+        "$value": "{radius.xl}",
+        "$description": "Dialogs, popovers, menus"
+      },
+      "pill": {
+        "$type": "dimension",
+        "$value": "{radius.full}"
+      }
+    },
+    "duration": {
+      "fast": {
+        "$type": "duration",
+        "$value": "{duration.150}",
+        "$description": "Colour and border changes on hover, focus, press"
+      },
+      "base": {
+        "$type": "duration",
+        "$value": "{duration.200}",
+        "$description": "The default: a panel opening, a value moving"
+      },
+      "slow": {
+        "$type": "duration",
+        "$value": "{duration.300}",
+        "$description": "Movements large enough to be followed by the eye"
+      }
+    },
+    "focus": {
+      "ring-color": {
+        "$type": "color",
+        "$value": "{color.indigo.500}"
+      },
+      "ring-width": {
+        "$type": "dimension",
+        "$value": "2px"
+      },
+      "ring-offset": {
+        "$type": "dimension",
+        "$value": "2px"
+      }
+    },
+    "control": {
+      "height-xs": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      },
+      "height-sm": {
+        "$type": "dimension",
+        "$value": "2rem"
+      },
+      "height-md": {
+        "$type": "dimension",
+        "$value": "2.5rem"
+      },
+      "height-lg": {
+        "$type": "dimension",
+        "$value": "3rem"
+      },
+      "height-xl": {
+        "$type": "dimension",
+        "$value": "3.5rem"
+      },
+      "border-width": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "The border of checkable controls (VCheckbox, VRadio)"
+      },
+      "size-check": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "The box of checkable controls (VCheckbox, VRadio)"
+      },
+      "size-check-mark": {
+        "$type": "dimension",
+        "$value": "0.875rem",
+        "$description": "VCheckbox's SVG tick"
+      },
+      "size-check-dot": {
+        "$type": "dimension",
+        "$value": "0.5rem",
+        "$description": "VRadio's inner dot"
+      },
+      "size-switch-w": {
+        "$type": "dimension",
+        "$value": "2.5rem",
+        "$description": "The width of VSwitch's track"
+      },
+      "size-switch-h": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "The height of VSwitch's track"
+      },
+      "action-size-sm": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "The inner buttons of sm input fields (clear, a clickable icon)"
+      },
+      "action-size-md": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "The inner buttons of md input fields (clear, a clickable icon)"
+      },
+      "action-size-lg": {
+        "$type": "dimension",
+        "$value": "1.75rem",
+        "$description": "The inner buttons of lg input fields (clear, a clickable icon)"
+      },
+      "size-slider-track": {
+        "$type": "dimension",
+        "$value": "0.375rem",
+        "$description": "The thickness of VSlider's track"
+      },
+      "size-slider-thumb": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "The diameter of VSlider's thumb"
+      },
+      "size-slider-length": {
+        "$type": "dimension",
+        "$value": "10rem",
+        "$description": "The default length of a vertical VSlider"
+      },
+      "size-slider-field": {
+        "$type": "dimension",
+        "$value": "5rem",
+        "$description": "The width of VSlider's number fields"
+      },
+      "size-carousel-block": {
+        "$type": "dimension",
+        "$value": "24rem",
+        "$description": "The default block size of VCarousel's viewport. Load-bearing in the vertical orientation: a percentage flex-basis has no definite reference on the block axis, and every slide would collapse onto its content without it"
+      },
+      "size-carousel-indicator": {
+        "$type": "dimension",
+        "$value": "0.625rem",
+        "$description": "The diameter of a VCarousel indicator dot (its hit area comes from --vectis-control-height-xs)"
+      },
+      "size-carousel-indicator-active": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "The main-axis size of the ACTIVE VCarousel indicator, which stretches from a dot into a pill"
+      },
+      "size-combobox-list-max-block": {
+        "$type": "dimension",
+        "$value": "18rem",
+        "$description": "The maximum height of VCombobox's list panel (the scrolling area)"
+      },
+      "size-menu-min": {
+        "$type": "dimension",
+        "$value": "11rem",
+        "$description": "The minimum width of VMenu's panel"
+      },
+      "size-menu-max": {
+        "$type": "dimension",
+        "$value": "20rem",
+        "$description": "The maximum width of VMenu's panel"
+      },
+      "size-progress-linear-thickness": {
+        "$type": "dimension",
+        "$value": "0.25rem",
+        "$description": "The default thickness of VProgressLinear's bar (4px)"
+      },
+      "size-progress-linear-length": {
+        "$type": "dimension",
+        "$value": "10rem",
+        "$description": "The default length of a vertical VProgressLinear (overridable through `height`)"
+      },
+      "size-progress-circular-diameter": {
+        "$type": "dimension",
+        "$value": "3rem",
+        "$description": "The default diameter of VProgressCircular"
+      },
+      "size-progress-circular-thickness": {
+        "$type": "dimension",
+        "$value": "0.25rem",
+        "$description": "The default stroke thickness of VProgressCircular (4px)"
+      },
+      "size-skeleton-surface": {
+        "$type": "dimension",
+        "$value": "6rem",
+        "$description": "The default height of a surface-shaped VSkeletonLoader — a card, an image (96px)"
+      },
+      "size-toast-width": {
+        "$type": "dimension",
+        "$value": "22rem",
+        "$description": "The default width of a toast"
+      },
+      "size-snackbar-min": {
+        "$type": "dimension",
+        "$value": "18rem",
+        "$description": "The minimum width of a snackbar (288px)"
+      },
+      "size-snackbar-max": {
+        "$type": "dimension",
+        "$value": "36rem",
+        "$description": "The maximum width of a snackbar (576px)"
+      },
+      "size-badge-h": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "The height of VBadge (the pill)"
+      },
+      "size-badge-dot": {
+        "$type": "dimension",
+        "$value": "0.625rem",
+        "$description": "The diameter of VBadge in dot mode"
+      },
+      "size-avatar-ring": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "The separating ring of stacked Avatars (VAvatarGroup)"
+      },
+      "size-date-picker-cell": {
+        "$type": "dimension",
+        "$value": "2.5rem",
+        "$description": "The side (height/width) of a VDatePicker day cell"
+      },
+      "size-date-picker-dot": {
+        "$type": "dimension",
+        "$value": "0.25rem",
+        "$description": "The diameter of a VDatePicker event dot"
+      },
+      "size-date-picker-nav-min": {
+        "$type": "dimension",
+        "$value": "5.375rem",
+        "$description": "The minimum width of VDatePicker's month/year picker buttons (≈86px)"
+      },
+      "size-tab-indicator": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "The thickness of the active tab indicator (VTabs, flat/outlined)"
+      },
+      "size-table-search": {
+        "$type": "dimension",
+        "$value": "16rem",
+        "$description": "The width of VDataTable's search field"
+      },
+      "size-time-picker-dial": {
+        "$type": "dimension",
+        "$value": "16rem",
+        "$description": "The diameter of VTimePicker's clock face (the M3 spec)"
+      },
+      "size-time-picker-number": {
+        "$type": "dimension",
+        "$value": "3rem",
+        "$description": "A numeral cell on VTimePicker's face, and the hand's dot on a marker"
+      },
+      "size-time-picker-center": {
+        "$type": "dimension",
+        "$value": "0.5rem",
+        "$description": "The centre dot of VTimePicker's face"
+      },
+      "size-time-picker-hand": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "The thickness of the hand on VTimePicker's face"
+      },
+      "size-time-picker-hand-minor": {
+        "$type": "dimension",
+        "$value": "1rem",
+        "$description": "The dot of VTimePicker's hand on a minute off the 5-minute markers"
+      },
+      "size-time-input-list-max-block": {
+        "$type": "dimension",
+        "$value": "18rem",
+        "$description": "The maximum height of VTimeInput's list panel (the scrolling area)"
+      },
+      "size-file-picker-min-block": {
+        "$type": "dimension",
+        "$value": "10rem",
+        "$description": "The minimum height of VFilePicker's drop zone — icon, two lines, separator and button"
+      },
+      "size-file-picker-icon": {
+        "$type": "dimension",
+        "$value": "2.5rem",
+        "$description": "The large icon at the top of VFilePicker's drop zone"
+      },
+      "size-file-picker-thumb": {
+        "$type": "dimension",
+        "$value": "2.5rem",
+        "$description": "The thumbnail square of a VFilePicker preview row (an image, or its type icon)"
+      },
+      "size-calendar-hour": {
+        "$type": "dimension",
+        "$value": "4rem",
+        "$description": "The height of one hour in VCalendar's time grid"
+      },
+      "size-calendar-gutter": {
+        "$type": "dimension",
+        "$value": "4.5rem",
+        "$description": "The column of hour labels beside VCalendar's time grid, wide enough for a 12-hour clock's '12:00 AM' on one line"
+      },
+      "size-calendar-tick": {
+        "$type": "dimension",
+        "$value": "0.375rem",
+        "$description": "How far an hour's rule runs back into VCalendar's gutter, tying the label to its line"
+      },
+      "size-calendar-edge": {
+        "$type": "dimension",
+        "$value": "3rem",
+        "$description": "The strip at the side of VCalendar that pages the view when a dragged event rests on it"
+      },
+      "size-calendar-day-min": {
+        "$type": "dimension",
+        "$value": "5rem",
+        "$description": "The width a VCalendar day column may not go below, past which the grid scrolls"
+      },
+      "size-calendar-handle": {
+        "$type": "dimension",
+        "$value": "0.5rem",
+        "$description": "The strip along a VCalendar card's bottom edge that its end is dragged by"
+      },
+      "size-calendar-allday-lane": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "One lane of VCalendar's all-day band"
+      },
+      "size-calendar-allday-max": {
+        "$type": "dimension",
+        "$value": "7rem",
+        "$description": "The height past which that band scrolls instead of growing"
+      },
+      "size-calendar-now-dot": {
+        "$type": "dimension",
+        "$value": "0.625rem",
+        "$description": "The dot on VCalendar's current-time line"
+      },
+      "size-calendar-month-cell": {
+        "$type": "dimension",
+        "$value": "8.5rem",
+        "$description": "The minimum height of a day in VCalendar's month view"
+      },
+      "size-calendar-year-cell": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "The side of a day square in the mini-months of VCalendar's year view"
+      }
+    },
+    "icon": {
+      "size-sm": {
+        "$type": "dimension",
+        "$value": "1rem",
+        "$description": "16px icons"
+      },
+      "size-md": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "20px icons"
+      },
+      "size-lg": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "$description": "24px icons"
+      }
+    }
+  },
+  "themes": {
+    "dark": {
+      "color": {
+        "surface": {
+          "$type": "color",
+          "$value": "{color.gray.950}"
+        },
+        "surface-muted": {
+          "$type": "color",
+          "$value": "{color.gray.800}"
+        },
+        "surface-raised": {
+          "$type": "color",
+          "$value": "{color.gray.900}"
+        },
+        "surface-overlay": {
+          "$type": "color",
+          "$value": "{color.gray.900}"
+        },
+        "surface-sunken": {
+          "$type": "color",
+          "$value": "oklch(11% 0.006 260)"
+        },
+        "surface-inverse": {
+          "$type": "color",
+          "$value": "{color.gray.800}"
+        },
+        "surface-skeleton": {
+          "$type": "color",
+          "$value": "{color.gray.800}"
+        },
+        "text-on-inverse": {
+          "$type": "color",
+          "$value": "{color.gray.50}"
+        },
+        "text": {
+          "$type": "color",
+          "$value": "{color.gray.50}"
+        },
+        "text-muted": {
+          "$type": "color",
+          "$value": "{color.gray.300}"
+        },
+        "text-subtle": {
+          "$type": "color",
+          "$value": "{color.gray.400}"
+        },
+        "text-on-accent": {
+          "$type": "color",
+          "$value": "{color.white}"
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.gray.800}"
+        },
+        "border-strong": {
+          "$type": "color",
+          "$value": "{color.gray.700}"
+        },
+        "accent": {
+          "$type": "color",
+          "$value": "{color.indigo.500}"
+        },
+        "accent-hover": {
+          "$type": "color",
+          "$value": "{color.indigo.400}"
+        },
+        "accent-active": {
+          "$type": "color",
+          "$value": "{color.indigo.300}"
+        },
+        "accent-surface": {
+          "$type": "color",
+          "$value": "{color.indigo.950}"
+        },
+        "accent-border": {
+          "$type": "color",
+          "$value": "{color.indigo.900}"
+        },
+        "accent-text": {
+          "$type": "color",
+          "$value": "{color.indigo.300}"
+        },
+        "danger": {
+          "$type": "color",
+          "$value": "{color.red.600}"
+        },
+        "danger-hover": {
+          "$type": "color",
+          "$value": "{color.red.700}"
+        },
+        "danger-active": {
+          "$type": "color",
+          "$value": "{color.red.800}"
+        },
+        "danger-surface": {
+          "$type": "color",
+          "$value": "{color.red.950}"
+        },
+        "danger-border": {
+          "$type": "color",
+          "$value": "{color.red.900}"
+        },
+        "danger-text": {
+          "$type": "color",
+          "$value": "{color.red.300}"
+        },
+        "success": {
+          "$type": "color",
+          "$value": "{color.green.700}"
+        },
+        "success-hover": {
+          "$type": "color",
+          "$value": "{color.green.800}"
+        },
+        "success-active": {
+          "$type": "color",
+          "$value": "{color.green.900}"
+        },
+        "success-surface": {
+          "$type": "color",
+          "$value": "{color.green.950}"
+        },
+        "success-border": {
+          "$type": "color",
+          "$value": "{color.green.900}"
+        },
+        "success-text": {
+          "$type": "color",
+          "$value": "{color.green.300}"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "{color.amber.500}"
+        },
+        "warning-hover": {
+          "$type": "color",
+          "$value": "{color.amber.400}"
+        },
+        "warning-active": {
+          "$type": "color",
+          "$value": "{color.amber.300}"
+        },
+        "warning-surface": {
+          "$type": "color",
+          "$value": "{color.amber.950}"
+        },
+        "warning-border": {
+          "$type": "color",
+          "$value": "{color.amber.900}"
+        },
+        "warning-text": {
+          "$type": "color",
+          "$value": "{color.amber.300}"
+        },
+        "backdrop": {
+          "$type": "color",
+          "$value": "oklch(0% 0 0 / 0.6)"
+        },
+        "event-surface": {
+          "$type": "color",
+          "$value": "oklch(0.3 0.05 var(--vectis-calendar-event-hue, 265))"
+        },
+        "event-border": {
+          "$type": "color",
+          "$value": "oklch(0.42 0.08 var(--vectis-calendar-event-hue, 265))"
+        },
+        "event-text": {
+          "$type": "color",
+          "$value": "oklch(0.9 0.06 var(--vectis-calendar-event-hue, 265))"
+        }
+      },
+      "focus": {
+        "ring-color": {
+          "$type": "color",
+          "$value": "{color.indigo.400}"
+        }
+      }
+    }
+  }
+}