@vvedantb/ui 0.31.1 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",
@@ -35,6 +35,7 @@
     "./tokens/css/border-beam.css": "./tokens/src/css/border-beam.css",
     "./tokens/css/markdown.css": "./tokens/src/css/markdown.css",
     "./tokens/css/marquee.css": "./tokens/src/css/marquee.css",
+    "./tokens/css/type-scale.css": "./tokens/src/css/type-scale.css",
     "./tokens/compat/shadcn-rgb.css": "./tokens/src/css/compat-shadcn-rgb.css",
     "./tokens/css/*.css": "./tokens/src/css/*.css",
     "./tokens/tailwind-preset": {

package/tokens/README.md

@@ -17,6 +17,7 @@ Design tokens and shared Tailwind v4 CSS for the vvedantb web apps. The CSS and
 | `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). Imported by `tokens.css` from 0.15.0. |
 | `@vvedantb/ui/tokens/css/clear-input.css` | `src/css/clear-input.css` | `ClearInput` layers (`.t-clear*`) and the `--clear-*` / `--glow-*` timings. Imported by `tokens.css`. From 0.15.1 the layers clip in `.t-clear-clip`, so `.t-clear` keeps the focus ring, and the placeholder layer only shows during `.is-clearing`. |
 | `@vvedantb/ui/tokens/css/motion.css` | `src/css/motion.css` | `.ui-page-enter`, `.ui-enter`, `.ui-enter-up`, `.ui-stagger`, their keyframes and reduced-motion rules, and the `html[data-page-motion="off"]` overrides for `PageMotionProvider`. Imported by `tokens.css`. |
+| `@vvedantb/ui/tokens/css/type-scale.css` | `src/css/type-scale.css` | The `text-*` scale (`3xs` 10px to `7xl` 72px, with `2xs` 11px and `2sm` 13px) as `@theme` variables. Each tier has its own line height and letter-spacing: positive below 14px (`+0.01em` at 10-11px), `0` at `sm`, negative above (`-0.03em` at `7xl`). Imported by `tokens.css`. |
 | `@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` (both `min(var(--radius), 0.625rem)` from 0.16.3), the same three radius utilities as `tokens.css` and `.glass-panel-strong` (solid `--popover` from 0.15.0). Import it **or** `tokens.css`, never both. |
 | `@vvedantb/ui/tokens/css/index.css` | `src/css/index.css` | base + dialog + modal + tabs + tabs-pills + utilities + animations + nav-icons, for new CSS-first apps (`tokens.css` brings scrollbar-thin). |
@@ -74,6 +75,7 @@ Tailwind inlines an `@import` where it sits, even in the middle of a file (it mu
 | `utilities.css` | `--breakpoint-sm` (Tailwind default or app theme) | Tailwind |
 | `scrollbar-thin.css` | `--scrollbar` | tokens.css or the app theme |
 | `clear-input.css`, `motion.css` | none (own `:root` defaults) | |
+| `type-scale.css` | none (own `@theme` values) | |
 | `animations.css` | none | |
 | `tailwind-preset` | the CSS variables named in its colour map, `--radius`, `--field-radius` | tokens.css or the app theme |
 

package/tokens/src/css/type-scale.css

@@ -0,0 +1,61 @@
+/*
+ * @vvedantb/ui/tokens/css/type-scale.css: the `text-*` scale with size-specific
+ * tracking. tokens.css imports it. Apps that pick files one by one can import
+ * it alone, after tailwindcss.
+ *
+ * Tracking is never one value for all sizes. Small UI text gets positive
+ * letter-spacing to stay legible. Display text gets negative letter-spacing,
+ * because letters look further apart as they grow. Line heights are the
+ * Tailwind defaults, so only tracking changes for the standard tiers.
+ *
+ * `3xs` (10px), `2xs` (11px) and `2sm` (13px) fill the gaps below `text-base`,
+ * so call sites do not need arbitrary `text-[11px]` classes.
+ *
+ * An explicit `tracking-*` or `leading-*` utility still wins. To change a tier,
+ * set its variable in the app's own `@theme` block.
+ */
+
+@theme {
+  --text-3xs: 0.625rem;
+  --text-3xs--line-height: 0.875rem;
+  --text-3xs--letter-spacing: 0.01em;
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
+  --text-2xs--letter-spacing: 0.01em;
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-xs--letter-spacing: 0.005em;
+  --text-2sm: 0.8125rem;
+  --text-2sm--line-height: 1.125rem;
+  --text-2sm--letter-spacing: 0.005em;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-sm--letter-spacing: 0em;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-base--letter-spacing: -0.006em;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-lg--letter-spacing: -0.01em;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-xl--letter-spacing: -0.012em;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-2xl--letter-spacing: -0.015em;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-3xl--letter-spacing: -0.018em;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+  --text-4xl--letter-spacing: -0.022em;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-5xl--letter-spacing: -0.025em;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-6xl--letter-spacing: -0.028em;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-7xl--letter-spacing: -0.03em;
+}

package/tokens/src/tokens.css

@@ -23,11 +23,15 @@
  * modal / tabs motion variables. Every rule sits in a Tailwind layer and the
  * timings and strengths are `:root` variables, so app rules and app `:root`
  * values win.
+ *
+ * It also brings the `text-*` type scale with size-specific
+ * tracking (css/type-scale.css), including the `3xs`, `2xs` and `2sm` tiers.
  */
 
 @import "./css/clear-input.css";
 @import "./css/scrollbar-thin.css";
 @import "./css/motion.css";
+@import "./css/type-scale.css";
 
 @custom-variant dark (&:where(.dark, .dark *));