@vvedantb/ui 0.1.5 → 0.2.1

package/tokens/examples/migration.md

@@ -0,0 +1,303 @@
+# Migrating the apps to `@vvedantb/ui/tokens` 0.2.0 shared CSS
+
+Generated by `pnpm --filter @vvedantb/ui verify` from `verify/migrations/<app>.json`; do not edit by hand. Line numbers refer to each clone's HEAD shown below. Line counts come from `git diff --numstat` of the original and migrated files. The harness also writes a ready-to-apply `<app>.patch` (paths relative to the app repo root) to `$VERIFY_DIR/patches/`.
+
+Bump the app's `@vvedantb/ui/tokens` dependency to `^0.2.0` first (app-d: add it). Removed blocks include the comment directly above them. `@layer` / `@media` / `@supports` wrappers left empty are removed with their comment; the line ranges below list the blocks themselves, the patch has every line.
+
+## Totals
+
+| App | HEAD | Shared files | Deleted | Added | Net | Verified |
+| --- | --- | --- | --- | --- | --- | --- |
+| app-a | `8c972b1a2cf7` | animations.css, base.css, tabs-pills.css, dialog.css, modal.css, tabs.css, scrollbar-thin.css | 257 | 10 | -247 | identical CSS |
+| app-b | `f7b61259270b` | utilities.css, base.css, dialog.css, scrollbar-thin.css, tailwind-preset | 341 | 8 | -333 | identical CSS |
+| app-c | `4d0ab45cbbc6` | base.css, tabs-pills.css, dialog.css, utilities.css, tailwind-preset | 257 | 9 | -248 | identical CSS |
+| app-d | `3bdce79780d0` | utilities.css, base.css, modal.css, tabs.css, scrollbar-thin.css, tailwind-preset | 300 | 11 | -289 | identical CSS |
+| app-e | `7077eaf9ff8a` | tabs-pills.css, dialog.css, modal.css, tabs.css | 132 | 6 | -126 | identical CSS |
+| **Total** | | | **1287** | **44** | **-1243** | |
+
+Package side: the shared files total 573 lines (`css/animations.css` 55, `css/base.css` 51, `css/dialog.css` 13, `css/index.css` 19, `css/modal.css` 44, `css/scrollbar-thin.css` 40, `css/tabs-pills.css` 58, `css/tabs.css` 57, `css/utilities.css` 34, `tailwind-preset.mjs` 177, `tailwind-preset.d.mts` 25), comments included. Net across apps + package: -670.
+
+The duplication report (R3) estimated about 1,917 removable repo-side lines for CSS + Tailwind theme. This migration removes 1287 lines and adds 44 (net -1243). The gap is real, not rounding: R3 counted rule blocks shared by only 2 apps, near-identical blocks that drift in values or selectors, app-a/app-e `landing.css` (a separate, byte-identical 271-line file) and per-app theme colour blocks. Those stay app-local here because moving them would change at least one app's compiled CSS or would serve fewer than 3 apps (see `verify/ANALYSIS.md`, "Not extracted").
+
+## app-a
+
+Clone HEAD `8c972b1a2cf7b341c3282a26d904fce39aed3232`. Shared files: `animations.css`, `base.css`, `tabs-pills.css`, `dialog.css`, `modal.css`, `tabs.css`, `scrollbar-thin.css`.
+
+### `apps/web/src/globals.css` (-257 +10)
+
+Add (each `@import` replaces the block at that position):
+
+```css
+@import "@vvedantb/ui/tokens/css/animations.css"; /* before original line 11 */
+@import "@vvedantb/ui/tokens/css/base.css"; /* before original line 101 */
+@import "@vvedantb/ui/tokens/css/tabs-pills.css"; /* before original line 101 */
+@import "@vvedantb/ui/tokens/css/dialog.css"; /* before original line 228 */
+@import "@vvedantb/ui/tokens/css/modal.css"; /* before original line 239 */
+@import "@vvedantb/ui/tokens/css/tabs.css"; /* before original line 239 */
+@import "@vvedantb/ui/tokens/css/scrollbar-thin.css"; /* after original line 470 */
+```
+
+Delete:
+
+| Lines | Context | Selector | Replaced by |
+| --- | --- | --- | --- |
+| 17-19 | (top level) | `@theme (declarations --animate-aurora, --animate-fade-in-up, --animate-indeterminate only)` | `@vvedantb/ui/tokens/css/animations.css` |
+| 21-42 | @theme | `@keyframes aurora` | `@vvedantb/ui/tokens/css/animations.css` |
+| 44-53 | @theme | `@keyframes fade-in-up` | `@vvedantb/ui/tokens/css/animations.css` |
+| 55-62 | @theme | `@keyframes indeterminate` | `@vvedantb/ui/tokens/css/animations.css` |
+| 106-109 | @layer base | `html` | `@vvedantb/ui/tokens/css/base.css` |
+| 111-121 | @layer base | `:root, .light, .default, [data-theme="light"], [data-theme="default"]` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 123-130 | @layer base | `.dark, [data-theme="dark"]` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 134-137 | @layer base | `::selection` | `@vvedantb/ui/tokens/css/base.css` |
+| 139-148 | @layer base | `button, a, input, textarea, [role="button"]` | `@vvedantb/ui/tokens/css/base.css` |
+| 150-156 | @layer base | `button:not(:disabled), [role="button"]:not(:disabled), a[href]` | `@vvedantb/ui/tokens/css/base.css` |
+| 173-175 | @layer base | `input[type="range"]` | `@vvedantb/ui/tokens/css/base.css` |
+| 228-237 | (top level) | `[role="dialog"][data-compact="true"], [role="alertdialog"][data-compact="true"]` | `@vvedantb/ui/tokens/css/dialog.css` |
+| 240-250 | @layer components | `.t-modal` | `@vvedantb/ui/tokens/css/modal.css` |
+| 251-255 | @layer components | `.t-modal.is-open` | `@vvedantb/ui/tokens/css/modal.css` |
+| 256-265 | @layer components | `.t-modal.is-closing` | `@vvedantb/ui/tokens/css/modal.css` |
+| 267-274 | @layer components | `@keyframes t-modal-presence-wait` | `@vvedantb/ui/tokens/css/modal.css` |
+| 283-289 | @layer components | `.t-tabs--segmented` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 290-296 | @layer components | `.t-tabs--pills` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 298-302 | @layer components > @media (max-width: 639px) | `.t-tabs` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 303-305 | @layer components > @media (max-width: 639px) | `.t-tabs::-webkit-scrollbar` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 307-319 | @layer components | `.t-tab` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 320-324 | @layer components | `.t-tab:not([aria-selected="true"]):not([data-state="active"]):hover, .t-tab[aria-selected="true"], .t-tab[data-state="active"]` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 335-342 | @layer components | `.t-tabs--pills .t-tab:not([aria-selected="true"]):not([data-state="active"]):hover` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 343-346 | @layer components | `.t-tabs--pills .t-tab[aria-selected="true"], .t-tabs--pills .t-tab[data-state="active"]` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 347-364 | @layer components | `.t-tabs-pill` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 442-446 | @layer utilities > @supports not selector(::-webkit-scrollbar) | `.scrollbar-thin` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 448-451 | @layer utilities > @supports not selector(::-webkit-scrollbar) | `.scrollbar-thin:hover` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 454-456 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 458-460 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar-track` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 462-465 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar-thumb` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 467-469 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar-thumb:hover` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+
+## app-b
+
+Clone HEAD `f7b61259270bb6152227574b8d249b392ec94f53`. Shared files: `utilities.css`, `base.css`, `dialog.css`, `scrollbar-thin.css`, `tailwind-preset`.
+
+### `apps/web/src/styles/globals.css` (-208 +6)
+
+Add (each `@import` replaces the block at that position):
+
+```css
+@import "@vvedantb/ui/tokens/css/utilities.css"; /* before original line 43 */
+@import "@vvedantb/ui/tokens/css/base.css"; /* before original line 107 */
+@import "@vvedantb/ui/tokens/css/dialog.css"; /* before original line 376 */
+@import "@vvedantb/ui/tokens/css/scrollbar-thin.css"; /* before original line 589 */
+```
+
+Delete:
+
+| Lines | Context | Selector | Replaced by |
+| --- | --- | --- | --- |
+| 43-55 | (top level) | `@utility hit-target` | `@vvedantb/ui/tokens/css/utilities.css` |
+| 57-69 | (top level) | `@utility reveal-on-hover` | `@vvedantb/ui/tokens/css/utilities.css` |
+| 145-148 | @layer base | `html` | `@vvedantb/ui/tokens/css/base.css` |
+| 155-206 | @layer base | `:root, .light, .default, [data-theme="light"], [data-theme="default"] (declarations color-scheme, --accent, --accent-foreground, --backdrop, --background, --border, --danger, --danger-foreground, --default, --default-foreground, --field-background, --field-border, --field-foreground, --field-placeholder, --focus, --focus-ring, --focus-border, --danger-ring, --danger-border, --foreground, --muted, --overlay, --overlay-foreground, --overlay-shadow, --scrollbar, --segment, --segment-foreground, --separator, --success, --success-foreground, --surface, --surface-foreground, --surface-secondary, --surface-secondary-foreground, --surface-tertiary, --surface-tertiary-foreground, --surface-card, --warning, --warning-foreground, --radius, --field-radius only)` | `@vvedantb/ui/tokens (already imported)` |
+| 232-281 | @layer base | `.dark, [data-theme="dark"] (declarations color-scheme, --accent, --accent-foreground, --backdrop, --background, --border, --danger, --danger-foreground, --default, --default-foreground, --field-background, --field-border, --field-foreground, --field-placeholder, --focus, --focus-ring, --focus-border, --danger-ring, --danger-border, --foreground, --muted, --overlay, --overlay-foreground, --overlay-shadow, --scrollbar, --segment, --segment-foreground, --separator, --success, --success-foreground, --surface, --surface-foreground, --surface-secondary, --surface-secondary-foreground, --surface-tertiary, --surface-tertiary-foreground, --surface-card, --warning, --warning-foreground, --radius, --field-radius only)` | `@vvedantb/ui/tokens (already imported)` |
+| 307-309 | @layer base | `*` | `@vvedantb/ui/tokens (already imported)` |
+| 311-316 | @layer base | `body` | `@vvedantb/ui/tokens (already imported)` |
+| 318-321 | @layer base | `::selection` | `@vvedantb/ui/tokens/css/base.css` |
+| 323-332 | @layer base | `button, a, input, textarea, [role="button"]` | `@vvedantb/ui/tokens/css/base.css` |
+| 334-340 | @layer base | `button:not(:disabled), [role="button"]:not(:disabled), a[href]` | `@vvedantb/ui/tokens/css/base.css` |
+| 365-367 | @layer base | `input[type="range"]` | `@vvedantb/ui/tokens/css/base.css` |
+| 376-385 | (top level) | `[role="dialog"][data-compact="true"], [role="alertdialog"][data-compact="true"]` | `@vvedantb/ui/tokens/css/dialog.css` |
+| 640-644 | @layer utilities > @supports not selector(::-webkit-scrollbar) | `.scrollbar-thin` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 646-649 | @layer utilities > @supports not selector(::-webkit-scrollbar) | `.scrollbar-thin:hover` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 652-654 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 656-658 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar-track` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 660-663 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar-thumb` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 665-667 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar-thumb:hover` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+
+### `apps/web/tailwind.config.ts` (-133 +2)
+
+Edits (original lines -> replacement):
+
+- Lines 2-2 become:
+
+  ```ts
+  import type { Config } from "tailwindcss";
+  import { tokensPreset } from "@vvedantb/ui/tokens/tailwind-preset";
+  ```
+- Lines 13-13 become:
+
+  ```ts
+    presets: [tokensPreset()],
+  ```
+- Lines 25-28: delete.
+- Lines 33-42: delete.
+- Lines 45-53: delete.
+- Lines 56-95: delete.
+- Lines 97-104: delete.
+- Lines 133-136: delete.
+- Lines 141-148: delete.
+- Lines 155-162: delete.
+- Lines 164-201: delete.
+- Lines 228-230: delete.
+
+## app-c
+
+Clone HEAD `4d0ab45cbbc640e3bb0cdbde21a9f42a5b6de54e`. Shared files: `base.css`, `tabs-pills.css`, `dialog.css`, `utilities.css`, `tailwind-preset`.
+
+### `apps/web/src/globals.css` (-117 +7)
+
+Add (each `@import` replaces the block at that position):
+
+```css
+@import "@vvedantb/ui/tokens/css/base.css"; /* before original line 100 */
+@import "@vvedantb/ui/tokens/css/tabs-pills.css"; /* before original line 100 */
+@import "@vvedantb/ui/tokens/css/dialog.css"; /* before original line 204 */
+@import "@vvedantb/ui/tokens/css/utilities.css"; /* before original line 580 */
+```
+
+Delete:
+
+| Lines | Context | Selector | Replaced by |
+| --- | --- | --- | --- |
+| 101-104 | @layer base | `html` | `@vvedantb/ui/tokens/css/base.css` |
+| 111-115 | @layer base | `:root, .light, .default, [data-theme="light"], [data-theme="default"] (declarations --tabs-text-muted, --tabs-text-active, --tabs-bar-bg, --tabs-pill-bg, --tabs-pill-active-bg only)` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 126-130 | @layer base | `.dark, [data-theme="dark"] (declarations --tabs-text-muted, --tabs-text-active, --tabs-bar-bg, --tabs-pill-bg, --tabs-pill-active-bg only)` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 141-143 | @layer base | `*` | `@vvedantb/ui/tokens (already imported)` |
+| 145-150 | @layer base | `body` | `@vvedantb/ui/tokens (already imported)` |
+| 164-167 | @layer base | `::selection` | `@vvedantb/ui/tokens/css/base.css` |
+| 169-177 | @layer base | `button, a, input, textarea, [role="button"]` | `@vvedantb/ui/tokens/css/base.css` |
+| 179-183 | @layer base | `button:not(:disabled), [role="button"]:not(:disabled), a[href]` | `@vvedantb/ui/tokens/css/base.css` |
+| 199-201 | @layer base | `input[type="range"]` | `@vvedantb/ui/tokens/css/base.css` |
+| 204-214 | (top level) | `[role="dialog"][data-compact="true"], [role="alertdialog"][data-compact="true"]` | `@vvedantb/ui/tokens/css/dialog.css` |
+| 289-294 | @layer components | `.t-tabs--segmented` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 295-299 | @layer components | `.t-tabs--pills` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 340-347 | @layer components | `.t-tabs--pills .t-tab:not([aria-selected="true"]):not([data-state="active"]):hover` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 348-351 | @layer components | `.t-tabs--pills .t-tab[aria-selected="true"], .t-tabs--pills .t-tab[data-state="active"]` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 580-593 | (top level) | `@utility hit-target` | `@vvedantb/ui/tokens/css/utilities.css` |
+| 595-609 | (top level) | `@utility reveal-on-hover` | `@vvedantb/ui/tokens/css/utilities.css` |
+
+### `apps/web/tailwind.config.ts` (-140 +2)
+
+Edits (original lines -> replacement):
+
+- Lines 2-2 become:
+
+  ```ts
+  import tailwindcssAnimate from "tailwindcss-animate";
+  import { tokensPreset } from "@vvedantb/ui/tokens/tailwind-preset";
+  ```
+- Lines 16-16 become:
+
+  ```ts
+    presets: [tokensPreset({ color: v })],
+  ```
+- Lines 42-66: delete.
+- Lines 69-72: delete.
+- Lines 74-97: delete.
+- Lines 102-117: delete.
+- Lines 126-130: delete.
+- Lines 150-173: delete.
+- Lines 178-215: delete.
+- Lines 238-238: delete.
+- Lines 240-240: delete.
+- Lines 242-242: delete.
+
+## app-d
+
+Clone HEAD `3bdce79780d0226465be491854618d5f02281316`. Shared files: `utilities.css`, `base.css`, `modal.css`, `tabs.css`, `scrollbar-thin.css`, `tailwind-preset`.
+
+### `apps/web/src/globals.css` (-162 +9)
+
+Add (each `@import` replaces the block at that position):
+
+```css
+@import "@vvedantb/ui/tokens/css/utilities.css"; /* before original line 34 */
+@import "@vvedantb/ui/tokens/css/base.css"; /* before original line 59 */
+@import "@vvedantb/ui/tokens/css/modal.css"; /* before original line 273 */
+@import "@vvedantb/ui/tokens/css/tabs.css"; /* after original line 360; close the enclosing block before it and reopen it after */
+@import "@vvedantb/ui/tokens/css/scrollbar-thin.css"; /* before original line 425 */
+```
+
+Delete:
+
+| Lines | Context | Selector | Replaced by |
+| --- | --- | --- | --- |
+| 34-43 | (top level) | `@utility hit-target` | `@vvedantb/ui/tokens/css/utilities.css` |
+| 45-57 | (top level) | `@utility reveal-on-hover` | `@vvedantb/ui/tokens/css/utilities.css` |
+| 98-99 | @layer base | `html (declarations touch-action, accent-color only)` | `@vvedantb/ui/tokens/css/base.css` |
+| 232-235 | @layer base | `::selection` | `@vvedantb/ui/tokens/css/base.css` |
+| 237-246 | @layer base | `button, a, input, textarea, [role="button"]` | `@vvedantb/ui/tokens/css/base.css` |
+| 248-252 | @layer base | `button:not(:disabled), [role="button"]:not(:disabled), a[href]` | `@vvedantb/ui/tokens/css/base.css` |
+| 268-270 | @layer base | `input[type="range"]` | `@vvedantb/ui/tokens/css/base.css` |
+| 274-283 | @layer components | `.t-modal` | `@vvedantb/ui/tokens/css/modal.css` |
+| 284-288 | @layer components | `.t-modal.is-open` | `@vvedantb/ui/tokens/css/modal.css` |
+| 289-297 | @layer components | `.t-modal.is-closing` | `@vvedantb/ui/tokens/css/modal.css` |
+| 299-306 | @layer components | `@keyframes t-modal-presence-wait` | `@vvedantb/ui/tokens/css/modal.css` |
+| 362-366 | @layer components > @media (max-width: 639px) | `.t-tabs` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 367-369 | @layer components > @media (max-width: 639px) | `.t-tabs::-webkit-scrollbar` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 371-383 | @layer components | `.t-tab` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 384-388 | @layer components | `.t-tab:not([aria-selected="true"]):not([data-state="active"]):hover, .t-tab[aria-selected="true"], .t-tab[data-state="active"]` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 389-406 | @layer components | `.t-tabs-pill` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 427-431 | @layer utilities > @supports not selector(::-webkit-scrollbar) | `.scrollbar-thin` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 433-436 | @layer utilities > @supports not selector(::-webkit-scrollbar) | `.scrollbar-thin:hover` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 439-441 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 443-445 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar-track` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 447-450 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar-thumb` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+| 452-454 | @layer utilities | `.scrollbar-thin::-webkit-scrollbar-thumb:hover` | `@vvedantb/ui/tokens/css/scrollbar-thin.css` |
+
+### `apps/web/tailwind.config.ts` (-138 +2)
+
+Edits (original lines -> replacement):
+
+- Lines 2-2 become:
+
+  ```ts
+  import type { Config } from "tailwindcss";
+  import { tokensPreset } from "@vvedantb/ui/tokens/tailwind-preset";
+  ```
+- Lines 9-9 become:
+
+  ```ts
+    presets: [tokensPreset()],
+  ```
+- Lines 24-27: delete.
+- Lines 31-51: delete.
+- Lines 57-105: delete.
+- Lines 107-112: delete.
+- Lines 116-123: delete.
+- Lines 135-142: delete.
+- Lines 144-181: delete.
+- Lines 198-200: delete.
+
+## app-e
+
+Clone HEAD `7077eaf9ff8a4b2e9ac76c4f3b5ec712669b061f`. Shared files: `tabs-pills.css`, `dialog.css`, `modal.css`, `tabs.css`.
+
+### `apps/web/src/globals.css` (-132 +6)
+
+Add (each `@import` replaces the block at that position):
+
+```css
+@import "@vvedantb/ui/tokens/css/tabs-pills.css"; /* before original line 57 */
+@import "@vvedantb/ui/tokens/css/dialog.css"; /* before original line 86 */
+@import "@vvedantb/ui/tokens/css/modal.css"; /* before original line 95 */
+@import "@vvedantb/ui/tokens/css/tabs.css"; /* before original line 95 */
+```
+
+Delete:
+
+| Lines | Context | Selector | Replaced by |
+| --- | --- | --- | --- |
+| 58-68 | @layer base | `:root, .light, .default, [data-theme="light"], [data-theme="default"]` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 70-77 | @layer base | `.dark, [data-theme="dark"]` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 86-93 | (top level) | `[role="dialog"][data-compact="true"], [role="alertdialog"][data-compact="true"]` | `@vvedantb/ui/tokens/css/dialog.css` |
+| 96-105 | @layer components | `.t-modal` | `@vvedantb/ui/tokens/css/modal.css` |
+| 106-110 | @layer components | `.t-modal.is-open` | `@vvedantb/ui/tokens/css/modal.css` |
+| 111-119 | @layer components | `.t-modal.is-closing` | `@vvedantb/ui/tokens/css/modal.css` |
+| 121-128 | @layer components | `@keyframes t-modal-presence-wait` | `@vvedantb/ui/tokens/css/modal.css` |
+| 136-141 | @layer components | `.t-tabs--segmented` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 142-146 | @layer components | `.t-tabs--pills` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 148-152 | @layer components > @media (max-width: 639px) | `.t-tabs` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 153-155 | @layer components > @media (max-width: 639px) | `.t-tabs::-webkit-scrollbar` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 157-169 | @layer components | `.t-tab` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 170-174 | @layer components | `.t-tab:not([aria-selected="true"]):not([data-state="active"]):hover, .t-tab[aria-selected="true"], .t-tab[data-state="active"]` | `@vvedantb/ui/tokens/css/tabs.css` |
+| 185-192 | @layer components | `.t-tabs--pills .t-tab:not([aria-selected="true"]):not([data-state="active"]):hover` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 193-196 | @layer components | `.t-tabs--pills .t-tab[aria-selected="true"], .t-tabs--pills .t-tab[data-state="active"]` | `@vvedantb/ui/tokens/css/tabs-pills.css` |
+| 197-214 | @layer components | `.t-tabs-pill` | `@vvedantb/ui/tokens/css/tabs.css` |

package/tokens/src/css/animations.css

@@ -0,0 +1,55 @@
+/*
+ * @vvedantb/ui/tokens/css/animations.css: `animate-aurora`, `animate-fade-in-up`
+ * and `animate-indeterminate` for CSS-first apps (`@theme`, no config).
+ * Apps that load a tailwind.config through `@config` get the same values
+ * from `@vvedantb/ui/tokens/tailwind-preset`; use one or the other, not both.
+ */
+
+@theme {
+  --animate-aurora: aurora 8s ease-in-out infinite alternate;
+  --animate-fade-in-up: fade-in-up 0.4s ease-out forwards;
+  --animate-indeterminate: indeterminate 1.5s ease-in-out infinite;
+
+  @keyframes aurora {
+    0% {
+      background-position: 0% 50%;
+      transform: rotate(-5deg) scale(0.9);
+    }
+    25% {
+      background-position: 50% 100%;
+      transform: rotate(5deg) scale(1.1);
+    }
+    50% {
+      background-position: 100% 50%;
+      transform: rotate(-3deg) scale(0.95);
+    }
+    75% {
+      background-position: 50% 0%;
+      transform: rotate(3deg) scale(1.05);
+    }
+    100% {
+      background-position: 0% 50%;
+      transform: rotate(-5deg) scale(0.9);
+    }
+  }
+
+  @keyframes fade-in-up {
+    0% {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(400%);
+    }
+  }
+}

package/tokens/src/css/base.css

@@ -0,0 +1,51 @@
+/*
+ * @vvedantb/ui/tokens/css/base.css: element defaults shared by the web apps.
+ * Needs --accent and --foreground (tokens.css or the app theme).
+ *
+ * Parameters (set on :root to change; defaults shown):
+ *   --tokens-control-transition-property: background-color, border-color,
+ *     color, box-shadow, transform, opacity
+ *   --tokens-control-transition-duration: 240ms
+ */
+
+@layer base {
+  html {
+    touch-action: manipulation;
+    accent-color: var(--accent);
+  }
+
+  ::selection {
+    background-color: color-mix(in oklch, var(--accent) 18%, transparent);
+    color: var(--foreground);
+  }
+
+  button,
+  a,
+  input,
+  textarea,
+  [role="button"] {
+    transition-property: var(
+      --tokens-control-transition-property,
+      background-color,
+      border-color,
+      color,
+      box-shadow,
+      transform,
+      opacity
+    );
+    transition-duration: var(--tokens-control-transition-duration, 240ms);
+    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  /* Tailwind v4 preflight sets `cursor: default` on buttons. Restore the
+     pointer for enabled interactive controls. */
+  button:not(:disabled),
+  [role="button"]:not(:disabled),
+  a[href] {
+    cursor: pointer;
+  }
+
+  input[type="range"] {
+    accent-color: var(--accent);
+  }
+}

package/tokens/src/css/compat-shadcn-rgb.css

@@ -0,0 +1,75 @@
+/*
+ * @vvedantb/ui/tokens/css/compat-shadcn-rgb.css
+ *
+ * For apps that already define shadcn-style variables as space-separated RGB
+ * channels (for example `--background: 244 245 246`) and read them with
+ * `rgb(var(--x) / alpha)`.
+ *
+ * Import this file INSTEAD OF tokens.css. Never import both: they define the
+ * same `--color-*` names in different forms.
+ *
+ *   @import "tailwindcss";
+ *   @import "@vvedantb/ui/tokens/css/compat-shadcn-rgb.css";
+ *
+ * It defines only the names that @vvedantb/ui components use and that a
+ * shadcn theme lacks. Every value is a reference to an app variable; no
+ * colour is copied. It never defines --background, --foreground, --muted,
+ * --accent, --primary, --card, --popover, --border or --radius. The app owns
+ * those and may change them at runtime.
+ *
+ * The app must define: --background, --foreground, --card, --card-foreground,
+ * --popover, --popover-foreground, --primary, --primary-foreground,
+ * --secondary, --secondary-foreground, --muted, --muted-foreground,
+ * --accent, --accent-foreground, --destructive, --destructive-foreground,
+ * --border, --input, --ring and --radius (all colours as "R G B").
+ *
+ * Alpha values follow common shadcn-RGB classes (ring/35, ring/50,
+ * destructive/20, placeholder /90, scrollbar /35).
+ */
+
+@theme inline {
+  --color-default: rgb(var(--secondary));
+  --color-default-foreground: rgb(var(--secondary-foreground));
+  --color-surface: rgb(var(--card));
+  --color-surface-foreground: rgb(var(--card-foreground));
+  --color-surface-card: rgb(var(--card));
+  --color-surface-secondary: rgb(var(--muted));
+  --color-surface-secondary-foreground: rgb(var(--foreground));
+  --color-surface-tertiary: rgb(var(--secondary));
+  --color-surface-tertiary-foreground: rgb(var(--secondary-foreground));
+  --color-overlay: rgb(var(--popover));
+  --color-overlay-foreground: rgb(var(--popover-foreground));
+  --color-field-background: rgb(var(--card));
+  --color-field-foreground: rgb(var(--foreground));
+  --color-field-border: rgb(var(--input));
+  --color-field-placeholder: rgb(var(--muted-foreground) / 0.9);
+  --color-focus: rgb(var(--ring));
+  --color-focus-ring: rgb(var(--ring) / 0.35);
+  --color-focus-border: rgb(var(--ring) / 0.5);
+  --color-danger: rgb(var(--destructive));
+  --color-danger-foreground: rgb(var(--destructive-foreground));
+  --color-danger-ring: rgb(var(--destructive) / 0.2);
+  --color-danger-border: rgb(var(--destructive) / 0.55);
+  --color-separator: rgb(var(--border));
+  --color-segment: rgb(var(--card));
+  --color-segment-foreground: rgb(var(--foreground));
+  --color-backdrop: rgb(0 0 0 / 0.5);
+  --color-scrollbar: rgb(var(--muted-foreground) / 0.35);
+  --radius-field: min(calc(var(--radius) + 0.25rem), 1.25rem);
+}
+
+:root {
+  --scrollbar: rgb(var(--muted-foreground) / 0.35);
+  --field-radius: min(calc(var(--radius) + 0.25rem), 1.25rem);
+}
+
+/*
+ * Fallback fill for toasts, dialogs and hover cards (`glass-panel-strong`).
+ * Equivalent to `bg-card/95 backdrop-blur-md`. An app may override it by
+ * declaring its own `@utility glass-panel-strong` after this import.
+ */
+@utility glass-panel-strong {
+  background-color: rgb(var(--card) / 0.95);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}

package/tokens/src/css/dialog.css

@@ -0,0 +1,13 @@
+/*
+ * @vvedantb/ui/tokens/css/dialog.css
+ *
+ * @vvedantb/ui >=0.1.5 sets data-compact="true" on DialogContent at
+ * max-width 639px or max-height 500px and renders it as a bottom sheet.
+ * Per-dialog max-w-* utilities must not shrink or left-align that sheet.
+ * Unlayered on purpose, so it wins over Tailwind utilities.
+ */
+
+[role="dialog"][data-compact="true"],
+[role="alertdialog"][data-compact="true"] {
+  max-width: none;
+}

package/tokens/src/css/index.css

@@ -0,0 +1,19 @@
+/*
+ * @vvedantb/ui/tokens/css/index.css: every shared file that needs only the
+ * variables tokens.css defines. For new apps. Import after tokens.css:
+ *
+ *   @import "tailwindcss";
+ *   @import "@vvedantb/ui/tokens";
+ *   @import "@vvedantb/ui/tokens/css/index.css";
+ *
+ * modal.css, tabs.css and tabs-pills.css need app motion variables
+ * (--modal-*, --tabs-dur, --tabs-ease) and are not included. Apps that use
+ * the tailwind preset must not import animations.css; import the other
+ * files one by one instead.
+ */
+
+@import "./base.css";
+@import "./dialog.css";
+@import "./utilities.css";
+@import "./scrollbar-thin.css";
+@import "./animations.css";

package/tokens/src/css/modal.css

@@ -0,0 +1,44 @@
+/*
+ * @vvedantb/ui/tokens/css/modal.css: .t-modal open / close transition used by
+ * @vvedantb/ui Dialog (transitions.dev pattern).
+ *
+ * Needs on :root: --modal-open-dur, --modal-close-dur, --modal-scale,
+ * --modal-scale-close, --modal-ease.
+ */
+
+@layer components {
+  .t-modal {
+    transform-origin: center;
+    transform: translate(-50%, -50%) scale(var(--modal-scale));
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      transform var(--modal-open-dur) var(--modal-ease),
+      opacity var(--modal-open-dur) var(--modal-ease);
+    will-change: transform, opacity;
+  }
+  .t-modal.is-open {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .t-modal.is-closing {
+    transform: translate(-50%, -50%) scale(var(--modal-scale-close));
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      transform var(--modal-close-dur) var(--modal-ease),
+      opacity var(--modal-close-dur) var(--modal-ease);
+    /* Radix Presence waits on animationend, not transitionend */
+    animation: t-modal-presence-wait var(--modal-close-dur) linear forwards;
+  }
+
+  @keyframes t-modal-presence-wait {
+    from {
+      clip-path: inset(0);
+    }
+    to {
+      clip-path: inset(0);
+    }
+  }
+}

package/tokens/src/css/scrollbar-thin.css

@@ -0,0 +1,40 @@
+/*
+ * @vvedantb/ui/tokens/css/scrollbar-thin.css: `.scrollbar-thin` (always emitted,
+ * plain @layer utilities). Needs --scrollbar.
+ *
+ * Standard scrollbar properties are ignored by Chrome 121+ when webkit rules
+ * exist, so the Firefox fallback is gated with @supports. Chrome gets the
+ * 6px thumb; Firefox gets thin themed.
+ */
+
+@layer utilities {
+  @supports not selector(::-webkit-scrollbar) {
+    .scrollbar-thin {
+      scrollbar-width: thin;
+      scrollbar-color: color-mix(in oklch, var(--scrollbar) 80%, transparent)
+        transparent;
+    }
+
+    .scrollbar-thin:hover {
+      scrollbar-color: color-mix(in oklch, var(--scrollbar) 100%, transparent)
+        transparent;
+    }
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: color-mix(in oklch, var(--scrollbar) 80%, transparent);
+    border-radius: 3px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--scrollbar) 100%, transparent);
+  }
+}

package/tokens/src/css/tabs-pills.css

@@ -0,0 +1,58 @@
+/*
+ * @vvedantb/ui/tokens/css/tabs-pills.css: tab colour variables plus the
+ * .t-tabs--segmented (connected bar) and .t-tabs--pills (isolated pills)
+ * variants. The `.t-tabs--pills .t-tab` sizing rule stays in the app.
+ *
+ * Needs: --muted, --segment, --segment-foreground, --default (tokens.css).
+ */
+
+@layer base {
+  :root,
+  .light,
+  .default,
+  [data-theme="light"],
+  [data-theme="default"] {
+    --tabs-text-muted: var(--muted);
+    --tabs-text-active: var(--segment-foreground);
+    --tabs-bar-bg: var(--default);
+    --tabs-pill-bg: var(--segment);
+    --tabs-pill-active-bg: var(--default);
+  }
+
+  .dark,
+  [data-theme="dark"] {
+    --tabs-text-muted: var(--muted);
+    --tabs-text-active: var(--segment-foreground);
+    --tabs-bar-bg: var(--default);
+    --tabs-pill-bg: var(--segment);
+    --tabs-pill-active-bg: var(--default);
+  }
+}
+
+@layer components {
+  /* Connected segmented bar with a sliding pill. */
+  .t-tabs--segmented {
+    gap: 3px;
+    padding: 3px;
+    border-radius: 48px;
+    background: var(--tabs-bar-bg);
+  }
+  /* Isolated pills. Each tab owns its outline; the selected tab is filled. */
+  .t-tabs--pills {
+    gap: 6px;
+    padding: 0;
+    background: transparent;
+  }
+  .t-tabs--pills
+    .t-tab:not([aria-selected="true"]):not([data-state="active"]):hover {
+    background: color-mix(
+      in oklch,
+      var(--tabs-pill-active-bg) 50%,
+      transparent
+    );
+  }
+  .t-tabs--pills .t-tab[aria-selected="true"],
+  .t-tabs--pills .t-tab[data-state="active"] {
+    background: var(--tabs-pill-active-bg);
+  }
+}