vectis-ui 0.1.0

package/dist/tokens/semantic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.js","names":[],"sources":["../../src/tokens/semantic.ts"],"sourcesContent":["/**\n * The tokens that name a ROLE rather than a value: the page's background, the colour of\n * ordinary text, the accent an application is built around, the pause before a tooltip\n * appears.\n *\n * These are the ONLY tokens a component ever mentions, and that is the whole point. A\n * component asks for the accent colour and never for a particular indigo, so an\n * application can change what the accent IS without a single component knowing.\n *\n * Almost every entry points at a step of a palette rather than stating a value, by naming\n * it in braces. The values written out here are the LIGHT theme; the dark theme restates\n * the same roles, pointing them elsewhere.\n */\nimport { color, dimension, duration, fontFamily, fontWeight, type TokenGroup } from './types'\n\nexport const semantic = {\n  color: {\n    surface: color('{color.white}', 'The default page background'),\n    'surface-muted': color('{color.gray.100}', 'A muted background (secondary areas)'),\n    'surface-raised': color('{color.white}', 'Raised surfaces: cards'),\n    'surface-overlay': color('{color.white}', 'Floating surfaces: dialogs, popovers, menus'),\n    'surface-sunken': color('{color.gray.50}', 'Sunken surfaces: wells, code areas'),\n    'surface-inverse': color('{color.gray.900}', 'Inverted-contrast surfaces: tooltips'),\n    'surface-skeleton': color(\n      '{color.gray.200}',\n      'The background of the loading silhouettes (VSkeletonLoader); the highlight derives from it in CSS',\n    ),\n\n    'text-on-inverse': color('{color.white}', 'Text set on an inverted surface'),\n\n    text: color('{color.gray.900}'),\n    'text-muted': color('{color.gray.600}'),\n    'text-subtle': color('{color.gray.500}', 'Placeholders, disabled text'),\n    'text-on-accent': color('{color.white}', 'Text set on an accent/danger/success background'),\n    'text-on-warning': color(\n      '{color.gray.950}',\n      'Text set on a solid warning background (amber too light for white)',\n    ),\n\n    border: color('{color.gray.200}'),\n    'border-strong': color('{color.gray.300}', 'The borders of form controls'),\n\n    accent: color('{color.indigo.600}'),\n    'accent-hover': color('{color.indigo.700}'),\n    'accent-active': color('{color.indigo.800}'),\n    'accent-surface': color('{color.indigo.50}', 'A tinted accent background (badges, selections)'),\n    'accent-border': color('{color.indigo.200}'),\n    'accent-text': color('{color.indigo.700}', 'Accent text on a neutral or tinted background'),\n\n    danger: color('{color.red.600}'),\n    'danger-hover': color('{color.red.700}'),\n    'danger-active': color('{color.red.800}'),\n    'danger-surface': color('{color.red.50}'),\n    'danger-border': color('{color.red.200}'),\n    'danger-text': color('{color.red.700}'),\n\n    /*\n     * Green starts one step darker than the other colours. White text on a filled button\n     * only becomes readable enough from green 700 onwards — green 600 falls well short of\n     * the threshold. Darkening the colour rather than darkening the text is what keeps one\n     * simple rule true: a filled control carries white text.\n     *\n     * The one exception is the warning colour, since no step of an amber is ever dark\n     * enough for white, which is why it alone declares a text colour of its own.\n     */\n    success: color('{color.green.700}'),\n    'success-hover': color('{color.green.800}'),\n    'success-active': color('{color.green.900}'),\n    'success-surface': color('{color.green.50}'),\n    'success-border': color('{color.green.200}'),\n    'success-text': color('{color.green.800}'),\n\n    warning: color('{color.amber.600}'),\n    'warning-hover': color('{color.amber.700}'),\n    'warning-active': color('{color.amber.800}'),\n    'warning-surface': color('{color.amber.50}'),\n    'warning-border': color('{color.amber.200}'),\n    'warning-text': color('{color.amber.900}'),\n\n    backdrop: color('oklch(0% 0 0 / 0.45)', 'The veil behind modal dialogs'),\n\n    /*\n     * The four colours of a calendar event that names none of its own.\n     *\n     * These are the one place in the design system where a colour is DATA rather than a\n     * role: which hue an event takes is derived from its id (see `VCalendar/color.ts`),\n     * and it arrives here through `--vectis-calendar-event-hue`, a per-instance input the\n     * component sets on each card. That is why they are written out rather than aliased to\n     * a palette — there is no palette to point at, only a wheel.\n     *\n     * WHAT MAKES THEM READABLE, and what must not be changed casually. Only the HUE\n     * varies; the lightness and the chroma below are fixed, and in OKLCH lightness is\n     * perceptual — so the distance between the text at L 0.40 and the card at L 0.95 is\n     * the same perceived distance at every hue, which is what turns \"an arbitrary colour\"\n     * into a contrast ratio that can be relied on. Moving either number moves the contrast\n     * of every event in the calendar at once. The same pair is restated in `themes/dark.ts`\n     * with the roles swapped end for end.\n     *\n     * A custom property substitutes at the point it is USED, not where it is declared, so\n     * the hue each card sets is what these resolve against — the trick `VSkeletonLoader`\n     * uses for its highlight.\n     */\n    'event-surface': color(\n      'oklch(0.95 0.045 var(--vectis-calendar-event-hue, 265))',\n      'The face of a calendar event that carries no colour of its own',\n    ),\n    'event-border': color(\n      'oklch(0.85 0.08 var(--vectis-calendar-event-hue, 265))',\n      'The edge of that event, and the bar marking its leading side',\n    ),\n    'event-text': color(\n      'oklch(0.4 0.11 var(--vectis-calendar-event-hue, 265))',\n      'The title written on that face',\n    ),\n  },\n  /**\n   * The typography, described by role rather than by measurement: a heading, a subtitle,\n   * a caption, a piece of code.\n   *\n   * Each role is a COMPLETE recipe — a size, a weight, the space between lines, and where\n   * it matters the space between letters. Asking for a role therefore settles every one of\n   * those at once, and two pieces of text in the same role cannot drift apart. It is what\n   * the typography component renders, and what the components' own stylesheets ask for.\n   */\n  text: {\n    family: fontFamily('{font.family.sans}', 'The font of all the design system text'),\n    'family-heading': fontFamily(\n      '{font.family.display}',\n      'The font of the display and heading roles; identical to the running font until it is overridden',\n    ),\n    'family-code': fontFamily(\n      '{font.family.mono}',\n      'The font of code content (the code variant, VInputOTP)',\n    ),\n    display: {\n      size: dimension('{font.size.5xl}'),\n      weight: fontWeight('{font.weight.bold}'),\n      leading: dimension('{font.leading.none}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-1': {\n      size: dimension('{font.size.4xl}'),\n      weight: fontWeight('{font.weight.bold}'),\n      leading: dimension('{font.leading.tight}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-2': {\n      size: dimension('{font.size.2xl}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.tight}'),\n      tracking: dimension('{font.tracking.tight}'),\n    },\n    'heading-3': {\n      size: dimension('{font.size.lg}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    'heading-4': {\n      size: dimension('{font.size.md}'),\n      weight: fontWeight('{font.weight.semibold}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    subtitle: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    /**\n     * The introduction that opens a page or a section, one step above the running text.\n     *\n     * It shares `body-lg`'s generous leading rather than taking a tighter one: a lead is read\n     * as prose, not as a heading, and the two therefore sit in the same column without the\n     * rhythm changing under the reader between the first paragraph and the second.\n     */\n    'body-xl': {\n      size: dimension('{font.size.lg}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.relaxed}'),\n    },\n    'body-lg': {\n      size: dimension('{font.size.md}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.relaxed}'),\n    },\n    'body-md': {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    'body-sm': {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    label: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    caption: {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.snug}'),\n    },\n    overline: {\n      size: dimension('{font.size.xs}'),\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.snug}'),\n      tracking: dimension('{font.tracking.wide}'),\n    },\n    code: {\n      size: dimension('{font.size.sm}'),\n      weight: fontWeight('{font.weight.regular}'),\n      leading: dimension('{font.leading.normal}'),\n    },\n    /*\n     * A role of a different sort: the label of a control — a button, a chip, a badge. It\n     * deliberately carries no SIZE, because a control's text size comes from the size it\n     * was given, and this recipe only settles the weight and the space between lines.\n     */\n    control: {\n      weight: fontWeight('{font.weight.medium}'),\n      leading: dimension('{font.leading.none}'),\n    },\n  },\n  radius: {\n    interactive: dimension('{radius.md}', 'Buttons, inputs, controls'),\n    surface: dimension('{radius.lg}', 'Cards, alerts'),\n    overlay: dimension('{radius.xl}', 'Dialogs, popovers, menus'),\n    pill: dimension('{radius.full}'),\n  },\n  /**\n   * How long a change takes, described by what it is: the immediate feedback of a control\n   * under the pointer, the ordinary pace of the design system, a deliberately slower move.\n   *\n   * These three are what a `transition` reaches for. Motion does not vary from one theme to\n   * the next, so unlike the colours they are stated once and never restated.\n   */\n  duration: {\n    fast: duration('{duration.150}', 'Colour and border changes on hover, focus, press'),\n    base: duration('{duration.200}', 'The default: a panel opening, a value moving'),\n    slow: duration('{duration.300}', 'Movements large enough to be followed by the eye'),\n  },\n  focus: {\n    'ring-color': color('{color.indigo.500}'),\n    'ring-width': dimension('2px'),\n    'ring-offset': dimension('2px'),\n  },\n  control: {\n    'height-xs': dimension('1.5rem'),\n    'height-sm': dimension('2rem'),\n    'height-md': dimension('2.5rem'),\n    'height-lg': dimension('3rem'),\n    'height-xl': dimension('3.5rem'),\n    'border-width': dimension('2px', 'The border of checkable controls (VCheckbox, VRadio)'),\n    'size-check': dimension('1.25rem', 'The box of checkable controls (VCheckbox, VRadio)'),\n    'size-check-mark': dimension('0.875rem', \"VCheckbox's SVG tick\"),\n    'size-check-dot': dimension('0.5rem', \"VRadio's inner dot\"),\n    'size-switch-w': dimension('2.5rem', \"The width of VSwitch's track\"),\n    'size-switch-h': dimension('1.25rem', \"The height of VSwitch's track\"),\n    'action-size-sm': dimension(\n      '1.25rem',\n      'The inner buttons of sm input fields (clear, a clickable icon)',\n    ),\n    'action-size-md': dimension(\n      '1.5rem',\n      'The inner buttons of md input fields (clear, a clickable icon)',\n    ),\n    'action-size-lg': dimension(\n      '1.75rem',\n      'The inner buttons of lg input fields (clear, a clickable icon)',\n    ),\n    'size-slider-track': dimension('0.375rem', \"The thickness of VSlider's track\"),\n    'size-slider-thumb': dimension('1.25rem', \"The diameter of VSlider's thumb\"),\n    'size-slider-length': dimension('10rem', 'The default length of a vertical VSlider'),\n    'size-slider-field': dimension('5rem', \"The width of VSlider's number fields\"),\n    'size-carousel-block': dimension(\n      '24rem',\n      \"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\",\n    ),\n    'size-carousel-indicator': dimension(\n      '0.625rem',\n      'The diameter of a VCarousel indicator dot (its hit area comes from --vectis-control-height-xs)',\n    ),\n    'size-carousel-indicator-active': dimension(\n      '1.25rem',\n      'The main-axis size of the ACTIVE VCarousel indicator, which stretches from a dot into a pill',\n    ),\n    'size-combobox-list-max-block': dimension(\n      '18rem',\n      \"The maximum height of VCombobox's list panel (the scrolling area)\",\n    ),\n    'size-menu-min': dimension('11rem', \"The minimum width of VMenu's panel\"),\n    'size-menu-max': dimension('20rem', \"The maximum width of VMenu's panel\"),\n    'size-progress-linear-thickness': dimension(\n      '0.25rem',\n      \"The default thickness of VProgressLinear's bar (4px)\",\n    ),\n    'size-progress-linear-length': dimension(\n      '10rem',\n      'The default length of a vertical VProgressLinear (overridable through `height`)',\n    ),\n    'size-progress-circular-diameter': dimension(\n      '3rem',\n      'The default diameter of VProgressCircular',\n    ),\n    'size-progress-circular-thickness': dimension(\n      '0.25rem',\n      'The default stroke thickness of VProgressCircular (4px)',\n    ),\n    'size-skeleton-surface': dimension(\n      '6rem',\n      'The default height of a surface-shaped VSkeletonLoader — a card, an image (96px)',\n    ),\n    'size-toast-width': dimension('22rem', 'The default width of a toast'),\n    'size-snackbar-min': dimension('18rem', 'The minimum width of a snackbar (288px)'),\n    'size-snackbar-max': dimension('36rem', 'The maximum width of a snackbar (576px)'),\n    'size-badge-h': dimension('1.25rem', 'The height of VBadge (the pill)'),\n    'size-badge-dot': dimension('0.625rem', 'The diameter of VBadge in dot mode'),\n    'size-avatar-ring': dimension('2px', 'The separating ring of stacked Avatars (VAvatarGroup)'),\n    'size-date-picker-cell': dimension(\n      '2.5rem',\n      'The side (height/width) of a VDatePicker day cell',\n    ),\n    'size-date-picker-dot': dimension('0.25rem', 'The diameter of a VDatePicker event dot'),\n    'size-date-picker-nav-min': dimension(\n      '5.375rem',\n      \"The minimum width of VDatePicker's month/year picker buttons (≈86px)\",\n    ),\n    'size-tab-indicator': dimension(\n      '2px',\n      'The thickness of the active tab indicator (VTabs, flat/outlined)',\n    ),\n    'size-table-search': dimension('16rem', \"The width of VDataTable's search field\"),\n    'size-time-picker-dial': dimension(\n      '16rem',\n      \"The diameter of VTimePicker's clock face (the M3 spec)\",\n    ),\n    'size-time-picker-number': dimension(\n      '3rem',\n      \"A numeral cell on VTimePicker's face, and the hand's dot on a marker\",\n    ),\n    'size-time-picker-center': dimension('0.5rem', \"The centre dot of VTimePicker's face\"),\n    'size-time-picker-hand': dimension('2px', \"The thickness of the hand on VTimePicker's face\"),\n    'size-time-picker-hand-minor': dimension(\n      '1rem',\n      \"The dot of VTimePicker's hand on a minute off the 5-minute markers\",\n    ),\n    'size-time-input-list-max-block': dimension(\n      '18rem',\n      \"The maximum height of VTimeInput's list panel (the scrolling area)\",\n    ),\n    'size-file-picker-min-block': dimension(\n      '10rem',\n      \"The minimum height of VFilePicker's drop zone — icon, two lines, separator and button\",\n    ),\n    'size-file-picker-icon': dimension(\n      '2.5rem',\n      \"The large icon at the top of VFilePicker's drop zone\",\n    ),\n    'size-file-picker-thumb': dimension(\n      '2.5rem',\n      'The thumbnail square of a VFilePicker preview row (an image, or its type icon)',\n    ),\n    /*\n     * A card is exactly as tall as its event is long — there is deliberately no floor — so\n     * this value alone decides how much room the shortest event gets. At 4rem an hour, a\n     * quarter of one is 16px, which holds a line of the title once its leading is tightened;\n     * VCalendarEvent does that by measuring the card rather than by counting minutes. Lower\n     * it much and the shortest events stop being readable at all.\n     */\n    'size-calendar-hour': dimension('4rem', \"The height of one hour in VCalendar's time grid\"),\n    'size-calendar-gutter': dimension(\n      '4.5rem',\n      \"The column of hour labels beside VCalendar's time grid, wide enough for a 12-hour clock's '12:00 AM' on one line\",\n    ),\n    'size-calendar-tick': dimension(\n      '0.375rem',\n      \"How far an hour's rule runs back into VCalendar's gutter, tying the label to its line\",\n    ),\n    /*\n     * TRAP — the twin of `EDGE_BAND` in `VCalendar/edgeStep.ts`, which is the same strip\n     * measured in JavaScript. This value is what the reader SEES light up; that one is where\n     * the calendar actually starts counting down to turn the page. Move one alone and the\n     * calendar pages from somewhere other than where it said it would, with nothing to point\n     * at it.\n     */\n    'size-calendar-edge': dimension(\n      '3rem',\n      'The strip at the side of VCalendar that pages the view when a dragged event rests on it',\n    ),\n    'size-calendar-day-min': dimension(\n      '5rem',\n      'The width a VCalendar day column may not go below, past which the grid scrolls',\n    ),\n    'size-calendar-handle': dimension(\n      '0.5rem',\n      \"The strip along a VCalendar card's bottom edge that its end is dragged by\",\n    ),\n    'size-calendar-allday-lane': dimension('1.5rem', \"One lane of VCalendar's all-day band\"),\n    'size-calendar-allday-max': dimension(\n      '7rem',\n      'The height past which that band scrolls instead of growing',\n    ),\n    'size-calendar-now-dot': dimension('0.625rem', \"The dot on VCalendar's current-time line\"),\n    /*\n     * Sized so the default `monthEventLimit` of three chips AND the \"+N more\" line beneath\n     * them fit without being clipped: 136px, less the padding, the border and the 32px day\n     * button, leaves 85px against 76px of chips and a 14px more-line. Shrinking it silently\n     * costs the third chip, since the cell clips rather than scrolls.\n     */\n    'size-calendar-month-cell': dimension(\n      '8.5rem',\n      \"The minimum height of a day in VCalendar's month view\",\n    ),\n    'size-calendar-year-cell': dimension(\n      '1.5rem',\n      \"The side of a day square in the mini-months of VCalendar's year view\",\n    ),\n  },\n  icon: {\n    'size-sm': dimension('1rem', '16px icons'),\n    'size-md': dimension('1.25rem', '20px icons'),\n    'size-lg': dimension('1.5rem', '24px icons'),\n  },\n} satisfies TokenGroup\n"],"mappings":"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"}

package/dist/tokens/themes/dark.d.ts

@@ -0,0 +1,49 @@
+export declare const dark: {
+    color: {
+        surface: import('..').DesignToken;
+        'surface-muted': import('..').DesignToken;
+        'surface-raised': import('..').DesignToken;
+        'surface-overlay': import('..').DesignToken;
+        'surface-sunken': import('..').DesignToken;
+        'surface-inverse': import('..').DesignToken;
+        'surface-skeleton': import('..').DesignToken;
+        'text-on-inverse': import('..').DesignToken;
+        text: import('..').DesignToken;
+        'text-muted': import('..').DesignToken;
+        'text-subtle': import('..').DesignToken;
+        'text-on-accent': import('..').DesignToken;
+        border: import('..').DesignToken;
+        'border-strong': import('..').DesignToken;
+        accent: import('..').DesignToken;
+        'accent-hover': import('..').DesignToken;
+        'accent-active': import('..').DesignToken;
+        'accent-surface': import('..').DesignToken;
+        'accent-border': import('..').DesignToken;
+        'accent-text': import('..').DesignToken;
+        danger: import('..').DesignToken;
+        'danger-hover': import('..').DesignToken;
+        'danger-active': import('..').DesignToken;
+        'danger-surface': import('..').DesignToken;
+        'danger-border': import('..').DesignToken;
+        'danger-text': import('..').DesignToken;
+        success: import('..').DesignToken;
+        'success-hover': import('..').DesignToken;
+        'success-active': import('..').DesignToken;
+        'success-surface': import('..').DesignToken;
+        'success-border': import('..').DesignToken;
+        'success-text': import('..').DesignToken;
+        warning: import('..').DesignToken;
+        'warning-hover': import('..').DesignToken;
+        'warning-active': import('..').DesignToken;
+        'warning-surface': import('..').DesignToken;
+        'warning-border': import('..').DesignToken;
+        'warning-text': import('..').DesignToken;
+        backdrop: import('..').DesignToken;
+        'event-surface': import('..').DesignToken;
+        'event-border': import('..').DesignToken;
+        'event-text': import('..').DesignToken;
+    };
+    focus: {
+        'ring-color': import('..').DesignToken;
+    };
+};

package/dist/tokens/themes/dark.js

@@ -0,0 +1,53 @@
+import { color as e } from "../types.js";
+//#region src/tokens/themes/dark.ts
+var t = {
+	color: {
+		surface: e("{color.gray.950}"),
+		"surface-muted": e("{color.gray.800}"),
+		"surface-raised": e("{color.gray.900}"),
+		"surface-overlay": e("{color.gray.900}"),
+		"surface-sunken": e("oklch(11% 0.006 260)"),
+		"surface-inverse": e("{color.gray.800}"),
+		"surface-skeleton": e("{color.gray.800}"),
+		"text-on-inverse": e("{color.gray.50}"),
+		text: e("{color.gray.50}"),
+		"text-muted": e("{color.gray.300}"),
+		"text-subtle": e("{color.gray.400}"),
+		"text-on-accent": e("{color.white}"),
+		border: e("{color.gray.800}"),
+		"border-strong": e("{color.gray.700}"),
+		accent: e("{color.indigo.500}"),
+		"accent-hover": e("{color.indigo.400}"),
+		"accent-active": e("{color.indigo.300}"),
+		"accent-surface": e("{color.indigo.950}"),
+		"accent-border": e("{color.indigo.900}"),
+		"accent-text": e("{color.indigo.300}"),
+		danger: e("{color.red.600}"),
+		"danger-hover": e("{color.red.700}"),
+		"danger-active": e("{color.red.800}"),
+		"danger-surface": e("{color.red.950}"),
+		"danger-border": e("{color.red.900}"),
+		"danger-text": e("{color.red.300}"),
+		success: e("{color.green.700}"),
+		"success-hover": e("{color.green.800}"),
+		"success-active": e("{color.green.900}"),
+		"success-surface": e("{color.green.950}"),
+		"success-border": e("{color.green.900}"),
+		"success-text": e("{color.green.300}"),
+		warning: e("{color.amber.500}"),
+		"warning-hover": e("{color.amber.400}"),
+		"warning-active": e("{color.amber.300}"),
+		"warning-surface": e("{color.amber.950}"),
+		"warning-border": e("{color.amber.900}"),
+		"warning-text": e("{color.amber.300}"),
+		backdrop: e("oklch(0% 0 0 / 0.6)"),
+		"event-surface": e("oklch(0.3 0.05 var(--vectis-calendar-event-hue, 265))"),
+		"event-border": e("oklch(0.42 0.08 var(--vectis-calendar-event-hue, 265))"),
+		"event-text": e("oklch(0.9 0.06 var(--vectis-calendar-event-hue, 265))")
+	},
+	focus: { "ring-color": e("{color.indigo.400}") }
+};
+//#endregion
+export { t as dark };
+
+//# sourceMappingURL=dark.js.map

package/dist/tokens/themes/dark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dark.js","names":[],"sources":["../../../src/tokens/themes/dark.ts"],"sourcesContent":["/**\n * The dark theme.\n *\n * It restates the tokens that describe a ROLE — the page's background, the colour of\n * ordinary text, the accent — and never the palette those roles draw from. The palette is\n * the same in both themes; what changes is which step of it each role points at.\n *\n * Every entry here must correspond to a role that already exists, and the build checks\n * it. A theme is allowed to reassign a role, never to invent one: a token existing in\n * only one theme would leave a component unstyled in the other.\n */\nimport { color, type TokenGroup } from '../types'\n\nexport const dark = {\n  color: {\n    surface: color('{color.gray.950}'),\n    'surface-muted': color('{color.gray.800}'),\n    'surface-raised': color('{color.gray.900}'),\n    'surface-overlay': color('{color.gray.900}'),\n    'surface-sunken': color('oklch(11% 0.006 260)'),\n    'surface-inverse': color('{color.gray.800}'),\n    'surface-skeleton': color('{color.gray.800}'),\n\n    'text-on-inverse': color('{color.gray.50}'),\n\n    text: color('{color.gray.50}'),\n    'text-muted': color('{color.gray.300}'),\n    'text-subtle': color('{color.gray.400}'),\n    'text-on-accent': color('{color.white}'),\n\n    border: color('{color.gray.800}'),\n    'border-strong': color('{color.gray.700}'),\n\n    accent: color('{color.indigo.500}'),\n    'accent-hover': color('{color.indigo.400}'),\n    'accent-active': color('{color.indigo.300}'),\n    'accent-surface': color('{color.indigo.950}'),\n    'accent-border': color('{color.indigo.900}'),\n    'accent-text': color('{color.indigo.300}'),\n\n    /*\n     * Danger and success keep exactly the steps the light theme gives them, brightness\n     * included. A filled button in either colour carries white text, and white only\n     * reaches the required contrast from red 600 and green 700 onwards — so there is no\n     * lighter step for the dark theme to move to. They therefore go DARKER on hover here,\n     * the opposite direction from the accent and the warning.\n     *\n     * These entries are deliberately identical to the light ones. Deleting them as\n     * redundant would let a later change to the roles quietly drag the dark theme back\n     * into the range where the text cannot be read.\n     */\n    danger: color('{color.red.600}'),\n    'danger-hover': color('{color.red.700}'),\n    'danger-active': color('{color.red.800}'),\n    'danger-surface': color('{color.red.950}'),\n    'danger-border': color('{color.red.900}'),\n    'danger-text': color('{color.red.300}'),\n\n    success: color('{color.green.700}'),\n    'success-hover': color('{color.green.800}'),\n    'success-active': color('{color.green.900}'),\n    'success-surface': color('{color.green.950}'),\n    'success-border': color('{color.green.900}'),\n    'success-text': color('{color.green.300}'),\n\n    warning: color('{color.amber.500}'),\n    'warning-hover': color('{color.amber.400}'),\n    'warning-active': color('{color.amber.300}'),\n    'warning-surface': color('{color.amber.950}'),\n    'warning-border': color('{color.amber.900}'),\n    'warning-text': color('{color.amber.300}'),\n\n    backdrop: color('oklch(0% 0 0 / 0.6)'),\n\n    /*\n     * The calendar event colours, with the two roles swapped end for end: the card becomes\n     * the dark value and the title the light one. The hue still arrives from the card\n     * itself, so only the lightness and the chroma are restated here — which is the whole\n     * point of splitting them that way, since the contrast between a fixed 0.90 and a fixed\n     * 0.30 holds at every hue exactly as its light counterpart does. See `semantic.ts` for\n     * the full reasoning; the two blocks have to be read together.\n     *\n     * The chroma is lower than in light on purpose: a saturated colour reads as brighter\n     * against a dark ground, and matching the light values would make a wall of events\n     * glare.\n     */\n    'event-surface': color('oklch(0.3 0.05 var(--vectis-calendar-event-hue, 265))'),\n    'event-border': color('oklch(0.42 0.08 var(--vectis-calendar-event-hue, 265))'),\n    'event-text': color('oklch(0.9 0.06 var(--vectis-calendar-event-hue, 265))'),\n  },\n  focus: {\n    'ring-color': color('{color.indigo.400}'),\n  },\n} satisfies TokenGroup\n"],"mappings":";;AAaA,IAAa,IAAO;CAClB,OAAO;EACL,SAAS,EAAM,kBAAkB;EACjC,iBAAiB,EAAM,kBAAkB;EACzC,kBAAkB,EAAM,kBAAkB;EAC1C,mBAAmB,EAAM,kBAAkB;EAC3C,kBAAkB,EAAM,sBAAsB;EAC9C,mBAAmB,EAAM,kBAAkB;EAC3C,oBAAoB,EAAM,kBAAkB;EAE5C,mBAAmB,EAAM,iBAAiB;EAE1C,MAAM,EAAM,iBAAiB;EAC7B,cAAc,EAAM,kBAAkB;EACtC,eAAe,EAAM,kBAAkB;EACvC,kBAAkB,EAAM,eAAe;EAEvC,QAAQ,EAAM,kBAAkB;EAChC,iBAAiB,EAAM,kBAAkB;EAEzC,QAAQ,EAAM,oBAAoB;EAClC,gBAAgB,EAAM,oBAAoB;EAC1C,iBAAiB,EAAM,oBAAoB;EAC3C,kBAAkB,EAAM,oBAAoB;EAC5C,iBAAiB,EAAM,oBAAoB;EAC3C,eAAe,EAAM,oBAAoB;EAazC,QAAQ,EAAM,iBAAiB;EAC/B,gBAAgB,EAAM,iBAAiB;EACvC,iBAAiB,EAAM,iBAAiB;EACxC,kBAAkB,EAAM,iBAAiB;EACzC,iBAAiB,EAAM,iBAAiB;EACxC,eAAe,EAAM,iBAAiB;EAEtC,SAAS,EAAM,mBAAmB;EAClC,iBAAiB,EAAM,mBAAmB;EAC1C,kBAAkB,EAAM,mBAAmB;EAC3C,mBAAmB,EAAM,mBAAmB;EAC5C,kBAAkB,EAAM,mBAAmB;EAC3C,gBAAgB,EAAM,mBAAmB;EAEzC,SAAS,EAAM,mBAAmB;EAClC,iBAAiB,EAAM,mBAAmB;EAC1C,kBAAkB,EAAM,mBAAmB;EAC3C,mBAAmB,EAAM,mBAAmB;EAC5C,kBAAkB,EAAM,mBAAmB;EAC3C,gBAAgB,EAAM,mBAAmB;EAEzC,UAAU,EAAM,qBAAqB;EAcrC,iBAAiB,EAAM,uDAAuD;EAC9E,gBAAgB,EAAM,wDAAwD;EAC9E,cAAc,EAAM,uDAAuD;CAC7E;CACA,OAAO,EACL,cAAc,EAAM,oBAAoB,EAC1C;AACF"}

package/dist/tokens/types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The shape a design token takes in this repository.
+ *
+ * A token is a named decision — this blue, this corner radius, this pause before a
+ * tooltip appears — and it is written as a small object holding its value, what KIND of
+ * thing it is, and optionally a sentence explaining it. Tokens are gathered in nested
+ * groups, which is what gives each of them its full name.
+ *
+ * A token may point at another instead of stating a value, by naming it in braces. That
+ * is what lets "the colour of a primary button" be defined as "the indigo at step 600"
+ * rather than as a colour repeated in twenty places.
+ *
+ * The format follows the one the W3C's design tokens group has been settling on, which is
+ * what makes these files legible to tools other than ours.
+ *
+ * This is THE source of truth for every visual decision in the library. The stylesheet is
+ * generated from it, and the live theming application to come will read and rewrite it
+ * directly.
+ */
+export type TokenType = 'color' | 'dimension' | 'fontFamily' | 'fontWeight' | 'number' | 'duration' | 'cubicBezier' | 'shadow';
+export interface DesignToken {
+    $value: string;
+    $type: TokenType;
+    $description?: string;
+}
+export interface TokenGroup {
+    [key: string]: DesignToken | TokenGroup;
+}
+/** Tells a token apart from a group of them, which is what walking the tree rests on. */
+export declare function isToken(node: DesignToken | TokenGroup): node is DesignToken;
+export declare const color: ($value: string, $description?: string) => DesignToken;
+export declare const dimension: ($value: string, $description?: string) => DesignToken;
+export declare const fontFamily: ($value: string, $description?: string) => DesignToken;
+export declare const fontWeight: ($value: string, $description?: string) => DesignToken;
+export declare const number: ($value: string, $description?: string) => DesignToken;
+export declare const duration: ($value: string, $description?: string) => DesignToken;
+export declare const cubicBezier: ($value: string, $description?: string) => DesignToken;
+export declare const shadow: ($value: string, $description?: string) => DesignToken;

package/dist/tokens/types.js

@@ -0,0 +1,16 @@
+//#region src/tokens/types.ts
+function e(e) {
+	return typeof e.$value == "string";
+}
+var t = (e) => (t, n) => n === void 0 ? {
+	$type: e,
+	$value: t
+} : {
+	$type: e,
+	$value: t,
+	$description: n
+}, n = t("color"), r = t("dimension"), i = t("fontFamily"), a = t("fontWeight"), o = t("duration"), s = t("cubicBezier"), c = t("shadow");
+//#endregion
+export { n as color, s as cubicBezier, r as dimension, o as duration, i as fontFamily, a as fontWeight, e as isToken, c as shadow };
+
+//# sourceMappingURL=types.js.map

package/dist/tokens/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../src/tokens/types.ts"],"sourcesContent":["/**\n * The shape a design token takes in this repository.\n *\n * A token is a named decision — this blue, this corner radius, this pause before a\n * tooltip appears — and it is written as a small object holding its value, what KIND of\n * thing it is, and optionally a sentence explaining it. Tokens are gathered in nested\n * groups, which is what gives each of them its full name.\n *\n * A token may point at another instead of stating a value, by naming it in braces. That\n * is what lets \"the colour of a primary button\" be defined as \"the indigo at step 600\"\n * rather than as a colour repeated in twenty places.\n *\n * The format follows the one the W3C's design tokens group has been settling on, which is\n * what makes these files legible to tools other than ours.\n *\n * This is THE source of truth for every visual decision in the library. The stylesheet is\n * generated from it, and the live theming application to come will read and rewrite it\n * directly.\n */\nexport type TokenType =\n  | 'color'\n  | 'dimension'\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'number'\n  | 'duration'\n  | 'cubicBezier'\n  | 'shadow'\n\nexport interface DesignToken {\n  $value: string\n  $type: TokenType\n  $description?: string\n}\n\nexport interface TokenGroup {\n  [key: string]: DesignToken | TokenGroup\n}\n\n/** Tells a token apart from a group of them, which is what walking the tree rests on. */\nexport function isToken(node: DesignToken | TokenGroup): node is DesignToken {\n  return typeof (node as DesignToken).$value === 'string'\n}\n\n/**\n * Builds the small helper used to declare a token of one kind, so that the token files\n * below read as `color('#fff')` rather than repeating the shape of the object each time.\n */\nconst make =\n  ($type: TokenType) =>\n  ($value: string, $description?: string): DesignToken =>\n    $description === undefined ? { $type, $value } : { $type, $value, $description }\n\nexport const color = make('color')\nexport const dimension = make('dimension')\nexport const fontFamily = make('fontFamily')\nexport const fontWeight = make('fontWeight')\nexport const number = make('number')\nexport const duration = make('duration')\nexport const cubicBezier = make('cubicBezier')\nexport const shadow = make('shadow')\n"],"mappings":";AAwCA,SAAgB,EAAQ,GAAqD;CAC3E,OAAO,OAAQ,EAAqB,UAAW;AACjD;AAMA,IAAM,KACH,OACA,GAAgB,MACf,MAAiB,KAAA,IAAY;CAAE;CAAO;AAAO,IAAI;CAAE;CAAO;CAAQ;AAAa,GAEtE,IAAQ,EAAK,OAAO,GACpB,IAAY,EAAK,WAAW,GAC5B,IAAa,EAAK,YAAY,GAC9B,IAAa,EAAK,YAAY,GAE9B,IAAW,EAAK,UAAU,GAC1B,IAAc,EAAK,aAAa,GAChC,IAAS,EAAK,QAAQ"}