@vvedantb/ui 0.8.0 → 0.10.0

package/src/marketing/marketing-classes.ts

@@ -0,0 +1,115 @@
+// Class strings for the landing kit, `SiteFooter` and `PricingModal`, copied
+// from the apps' markup. Some read the bare muted text colour the apps already
+// ship (apps map `--color-muted` to the secondary text colour), so each such
+// line carries the token check's allow marker. Every string is a literal so
+// Tailwind's source scan sees it.
+
+/** Centred landing column: `max-w-6xl` with responsive side padding. */
+export const landingShellClass = "relative mx-auto w-full max-w-6xl px-5 sm:px-8 lg:px-10";
+
+/** Bordered surface card used by landing product mocks. */
+export const landingPanelClass = "overflow-hidden rounded-2xl border border-separator bg-surface";
+
+/** Text link in `LandingFooter`, also for app links placed in its `actions` slot. */
+export const landingFooterLinkClass = "max-sm:py-1 text-sm text-muted hover:text-foreground"; // check-tokens-allow: text-muted
+
+/** `Button variant="link"` in `LandingFooter`'s `actions` slot (for example Sign in). */
+export const landingFooterButtonClass = "h-auto p-0 text-sm text-muted hover:text-foreground"; // check-tokens-allow: text-muted
+
+export const landingClasses = {
+  eyebrow:
+    "mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.22em] text-muted sm:text-xs sm:tracking-[0.28em]", // check-tokens-allow: text-muted
+  sectionIntro:
+    "mt-4 max-w-xl text-pretty text-sm leading-relaxed text-muted sm:mt-5 sm:text-base", // check-tokens-allow: text-muted
+  featureDescription:
+    "mt-1 text-pretty text-xs leading-relaxed text-muted sm:text-[0.8125rem]", // check-tokens-allow: text-muted
+  navLink:
+    "inline-flex h-10 items-center rounded-lg px-3 text-sm text-muted transition-[color,background-color] duration-150 hover:bg-surface-tertiary hover:text-foreground", // check-tokens-allow: text-muted
+  heroEyebrow:
+    "mb-6 inline-flex items-center gap-2 rounded-full border border-separator bg-surface/70 px-3 py-1 text-xs text-muted", // check-tokens-allow: text-muted
+  heroDescription:
+    "mx-auto mt-5 max-w-xl text-pretty text-[0.9375rem] leading-relaxed text-muted sm:mt-6 sm:text-lg", // check-tokens-allow: text-muted
+  heroCapability:
+    "rounded-full border border-separator bg-surface/60 px-3 py-1 font-mono text-[11px] text-muted", // check-tokens-allow: text-muted
+  ctaDescription:
+    "mt-4 max-w-xl text-pretty text-sm leading-relaxed text-muted sm:text-base", // check-tokens-allow: text-muted
+  footerTagline:
+    "mt-3 max-w-sm text-pretty text-xs leading-relaxed text-muted", // check-tokens-allow: text-muted
+  footerGithub: "max-sm:py-1 text-muted hover:text-foreground", // check-tokens-allow: text-muted
+} as const;
+
+/**
+ * `SiteFooter` class sets. `muted` and `muted-foreground` differ only in the
+ * secondary text colour; `touch` adds `max-sm:hit-target` targets and a
+ * safe-area bottom padding.
+ */
+export const siteFooterClasses = {
+  muted: {
+    footer: "bg-background text-foreground py-8 md:py-16 max-w-5xl mx-auto",
+    tagline: "text-sm text-muted mb-4 md:mb-6 max-w-sm", // check-tokens-allow: text-muted
+    socialButton:
+      "w-9 h-9 md:w-8 md:h-8 bg-default rounded-lg flex items-center justify-center hover:bg-surface-tertiary transition-[background-color]",
+    socialIcon: "w-4 h-4 text-muted", // check-tokens-allow: text-muted
+    heading: "font-thin tracking-wide mb-3 md:mb-4 text-muted", // check-tokens-allow: text-muted
+    links: "flex flex-col gap-2 md:gap-3 text-sm text-muted font-thin tracking-wide", // check-tokens-allow: text-muted
+    link: "hover:text-foreground transition-[color]",
+    imageLink: "hover:text-foreground transition-[color] flex flex-row items-center gap-2",
+    copyright: "text-xs md:text-sm text-muted", // check-tokens-allow: text-muted
+    rights: "text-xs md:text-sm text-muted/80", // check-tokens-allow: text-muted
+    legalLink:
+      "underline text-xs md:text-sm text-muted hover:text-foreground transition-[color]", // check-tokens-allow: text-muted
+  },
+  "muted-foreground": {
+    footer: "bg-background text-foreground py-8 md:py-16 max-w-5xl mx-auto",
+    tagline: "text-sm text-muted-foreground mb-4 md:mb-6 max-w-sm",
+    socialButton:
+      "w-9 h-9 md:w-8 md:h-8 bg-default rounded-lg flex items-center justify-center hover:bg-surface-tertiary transition-[background-color]",
+    socialIcon: "w-4 h-4 text-muted-foreground",
+    heading: "font-thin tracking-wide mb-3 md:mb-4 text-muted-foreground",
+    links: "flex flex-col gap-2 md:gap-3 text-sm text-muted-foreground font-thin tracking-wide",
+    link: "hover:text-foreground transition-[color]",
+    imageLink: "hover:text-foreground transition-[color] flex flex-row items-center gap-2",
+    copyright: "text-xs md:text-sm text-muted-foreground",
+    rights: "text-xs md:text-sm text-muted-foreground/80",
+    legalLink:
+      "underline text-xs md:text-sm text-muted-foreground hover:text-foreground transition-[color]",
+  },
+  touch: {
+    footer:
+      "mx-auto max-w-5xl bg-background pt-8 text-foreground pb-[max(2rem,env(safe-area-inset-bottom))] md:pt-16 md:pb-16",
+    tagline: "text-sm text-muted-foreground mb-4 md:mb-6 max-w-sm",
+    socialButton:
+      "max-sm:hit-target h-9 w-9 rounded-lg bg-default hover:bg-surface-tertiary md:h-8 md:w-8",
+    socialIcon: "h-4 w-4 text-muted-foreground",
+    heading: "font-thin tracking-wide mb-3 md:mb-4 text-muted-foreground",
+    links: "flex flex-col gap-2 text-sm font-thin tracking-wide text-muted-foreground md:gap-3",
+    link: "max-sm:hit-target max-sm:py-1 hover:text-foreground",
+    imageLink: "max-sm:hit-target flex flex-row items-center gap-2 max-sm:py-1 hover:text-foreground",
+    copyright: "text-xs md:text-sm text-muted-foreground",
+    rights: "text-xs md:text-sm text-muted-foreground/80",
+    legalLink:
+      "max-sm:hit-target text-xs underline text-muted-foreground hover:text-foreground md:text-sm",
+  },
+} as const;
+
+export type SiteFooterVariant = keyof typeof siteFooterClasses;
+
+/** `PricingModal` class sets for the two secondary text colours. */
+export const pricingModalClasses = {
+  muted: {
+    period: "pb-1 text-sm text-muted", // check-tokens-allow: text-muted
+    /** After `mt-4 max-w-[28ch]` and the optional font class. */
+    tagline: "text-lg italic leading-snug text-muted", // check-tokens-allow: text-muted
+    note: "mt-3 text-center text-xs text-muted", // check-tokens-allow: text-muted
+    featuresHeading:
+      "mb-4 text-[11px] font-medium uppercase tracking-[0.2em] text-muted", // check-tokens-allow: text-muted
+  },
+  "muted-foreground": {
+    period: "pb-1 text-sm text-muted-foreground",
+    tagline: "text-lg italic leading-snug text-muted-foreground",
+    note: "mt-3 text-center text-xs text-muted-foreground",
+    featuresHeading: "mb-4 text-[11px] font-medium uppercase tracking-[0.2em] text-muted-foreground",
+  },
+} as const;
+
+export type PricingModalTone = keyof typeof pricingModalClasses;

package/tokens/README.md

@@ -0,0 +1,98 @@
+# `@vvedantb/ui/tokens`
+
+Design tokens and shared Tailwind v4 CSS for the vvedantb web apps. The CSS and Tailwind preset are subpaths of `@vvedantb/ui`; the native JS tokens are named exports of the root (`tokens`, `Tokens`). Source-exported: no build step. Paths in the `File` column are relative to `packages/ui/tokens/`.
+
+## Exports
+
+| Export | File | What it is |
+| --- | --- | --- |
+| `@vvedantb/ui/tokens`, `@vvedantb/ui/tokens/tokens.css` | `src/tokens.css` | Colour, radius, shadow, ease and font tokens (`@theme`), light/dark variables, `dark` variant, the radius utilities `rounded-surface` (`clamp(0.75rem, var(--radius), 1rem)`), `rounded-menu-item` (`min(var(--radius), 0.5rem)`) and `rounded-control` (`min(var(--radius), 0.625rem)`) (0.7.1; `rounded-surface` was in `utilities.css` before), `*` border and `body` defaults. 0.7.2 adds `--sidebar-accent` / `sidebar-accent` (sidebar nav row fill: light `var(--surface-tertiary)`, dark `oklch(22.64% 0 0)`). In 0.2.1 it also defines shadcn-style aliases (`primary`, `muted-foreground`, `secondary`, `destructive`, `card`, `popover`, `input`, `ring`) that point at the same tokens. |
+| `tokens` and `Tokens` from `@vvedantb/ui` | `src/native.ts` | JS colours, radii and spacing for React Native. `@vvedantb/native-ui` keeps its own copy in `src/tokens.ts`; a test keeps the two equal. |
+| `@vvedantb/ui/tokens/css/base.css` | `src/css/base.css` | `html` touch/accent, `::selection`, control transitions, pointer cursor, range accent (`@layer base`). |
+| `@vvedantb/ui/tokens/css/dialog.css` | `src/css/dialog.css` | Unlayered `max-width: none` for `@vvedantb/ui` compact (bottom-sheet) dialogs. |
+| `@vvedantb/ui/tokens/css/modal.css` | `src/css/modal.css` | `.t-modal`, `.is-open`, `.is-closing` and `t-modal-presence-wait` (`@layer components`). |
+| `@vvedantb/ui/tokens/css/tabs.css` | `src/css/tabs.css` | `.t-tab`, active colour, `.t-tabs-pill`, small-screen `.t-tabs` scrolling. |
+| `@vvedantb/ui/tokens/css/tabs-pills.css` | `src/css/tabs-pills.css` | `--tabs-*` colour variables, `.t-tabs--segmented`, `.t-tabs--pills` and pill hover / active fills. |
+| `@vvedantb/ui/tokens/css/utilities.css` | `src/css/utilities.css` | `@utility hit-target` and `@utility reveal-on-hover`. `rounded-surface` moved to `tokens.css` in 0.7.1. |
+| `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). |
+| `@vvedantb/ui/tokens/css/animations.css` | `src/css/animations.css` | `animate-aurora`, `animate-fade-in-up`, `animate-indeterminate` as `@theme` (CSS-first apps). |
+| `@vvedantb/ui/tokens/css/compat-shadcn-rgb.css`, `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | `src/css/compat-shadcn-rgb.css` | Replaces `tokens.css` for apps with shadcn-style `R G B` channel variables. Defines only the UI-only `--color-*` names as `rgb(var(--x) / alpha)` references, `--radius-field`, `--scrollbar`, `--field-radius`, the same three radius utilities as `tokens.css` and a `glass-panel-strong` fallback. Import it **or** `tokens.css`, never both. |
+| `@vvedantb/ui/tokens/css/index.css` | `src/css/index.css` | base + dialog + utilities + scrollbar-thin + animations, for new CSS-first apps. |
+| `@vvedantb/ui/tokens/tailwind-preset` | `src/tailwind-preset.mjs` (+ `.d.mts`) | Tailwind preset for apps that load a JS config with `@config`. |
+
+Every file was extracted because the same rule (same at-rule context, selector and body) sits in 3 or more of the five apps. The measured duplication is in `verify/ANALYSIS.md`, and the proof that each app compiles to the same CSS after migrating is in `verify/RESULTS.md`. Blocks that only 2 apps share, or that drift in a way that would change an app's CSS, stay in the apps; `verify/ANALYSIS.md` lists them.
+
+## Use
+
+CSS-first app (no `tailwind.config`):
+
+```css
+@import "tailwindcss";
+@import "@vvedantb/ui/tokens";
+@import "@vvedantb/ui/tokens/css/animations.css";
+@import "@vvedantb/ui/tokens/css/base.css";
+/* ...app @layer base rules... */
+@import "@vvedantb/ui/tokens/css/modal.css";
+@import "@vvedantb/ui/tokens/css/tabs.css";
+/* ...app @layer components rules... */
+```
+
+App with a JS config (`@config "../tailwind.config.ts"`):
+
+```ts
+import { tokensPreset } from "@vvedantb/ui/tokens/tailwind-preset";
+
+export default {
+  presets: [tokensPreset()],
+  // or tokensPreset({ color: (name) => `color-mix(in oklch, var(--${name}) calc(<alpha-value> * 100%), transparent)` })
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: { extend: { /* app-only colours, fonts, animations */ } },
+  plugins: [tailwindcssAnimate],
+};
+```
+
+The preset holds `darkMode: "class"`, the shared colour map (`border`, `surface.*`, `danger.*`, `field.*`, shadcn aliases `primary`/`secondary`/`destructive`/`card`/`popover`/`input` ...), `borderRadius` lg/md/sm/field, `boxShadow` soft/panel/insetSoft, `ease-smooth`, `screens` xs to 2xl in px, and the aurora / fade-in-up / indeterminate / accordion keyframes. It does not hold plugins, `content`, fonts, `accent`/`muted`/`ring`/`sidebar` (they differ per app) or accordion timings.
+
+Do not import `css/animations.css` in an app that uses the preset: the preset already defines the same keyframes and animations.
+
+### Where to put the imports
+
+Tailwind inlines an `@import` where it sits, even in the middle of a file (it must be at top level, not inside an `@layer` block). Put each import where the app's own copy of the rules was. Within one layer, later rules win at equal specificity, so moving shared rules above or below app rules can flip the result for elements matched by both. `examples/migration.md` gives the exact position for each app, and `pnpm --filter @vvedantb/ui verify` checks it.
+
+### Variables each file needs
+
+| File | Needs | Provided by |
+| --- | --- | --- |
+| `base.css` | `--accent`, `--foreground` | tokens.css or the app theme |
+| `dialog.css` | none | |
+| `modal.css` | `--modal-open-dur`, `--modal-close-dur`, `--modal-scale`, `--modal-scale-close`, `--modal-ease` | app `:root` |
+| `tabs.css` | `--tabs-dur`, `--tabs-ease` (app `:root`); `--tabs-text-muted`, `--tabs-text-active`, `--tabs-pill-bg` | colours: tabs-pills.css or the app theme |
+| `tabs-pills.css` | `--muted`, `--segment`, `--segment-foreground`, `--default` | tokens.css or the app theme |
+| `utilities.css` | `--breakpoint-sm` (Tailwind default or app theme) | Tailwind |
+| `scrollbar-thin.css` | `--scrollbar` | tokens.css or the app theme |
+| `animations.css` | none | |
+| `tailwind-preset` | the CSS variables named in its colour map, `--radius`, `--field-radius` | tokens.css or the app theme |
+
+### Using an existing shadcn RGB theme
+
+See the package `README.md`. With the compat file, `base.css`, `scrollbar-thin.css`, `utilities.css`, `dialog.css`, `modal.css` and `tabs.css` need no `tokens.css`. `base.css` reads `--accent` and `--foreground` and `tabs-pills.css` reads `--muted`, `--segment` and `--default`. Those are not channel-compatible, so skip `tabs-pills.css` and `index.css` (which includes `base.css`) unless the app defines those variables as full colours.
+
+### Parameters
+
+Where apps share a rule but drifted in one value, the value is a custom property whose fallback is the most common value. Set it on `:root` to keep a different value.
+
+| File | Property | Default | Set by |
+| --- | --- | --- | --- |
+| `base.css` | `--tokens-control-transition-property` | `background-color, border-color, color, box-shadow, transform, opacity` | app-c: `background-color, color, transform, opacity` |
+| `base.css` | `--tokens-control-transition-duration` | `240ms` | app-c: `100ms` |
+
+## Develop
+
+```sh
+pnpm --filter @vvedantb/ui build     # export targets exist + tsc (primitives, shell, app)
+pnpm --filter @vvedantb/ui test      # vitest (app helpers) + offline node --test: exports, CSS structure, Tailwind compile, preset
+pnpm --filter @vvedantb/ui analyze   # rule-level duplication across the app clones -> verify/ANALYSIS.tables.md
+pnpm --filter @vvedantb/ui verify    # before/after compile of every app -> verify/RESULTS.md, examples/migration.md
+```
+
+`analyze` and `verify` need the app clones (`APPS_DIR`, default `/workspace/cvx`; name or symlink the clones `app-a` to `app-e` inside it) and network access the first time: they install Tailwind 4.3.3, the plugins, postcss and jiti into a scratch directory (`VERIFY_DIR`, default `/workspace/pk-tokens-verify`, outside the repo). The migration for each app is data in `verify/migrations/<app>.json`. Each removed block must equal the shared file's block with the same context and selector, or the run fails.