@vvedantb/ui 0.17.0 → 0.17.1

package/README.md

@@ -1083,6 +1083,8 @@ Use this when the app defines shadcn-style variables as space-separated channels
 
 Shared CSS that is safe without `tokens.css`: `compat-shadcn-rgb.css`, `dialog.css`, `utilities.css`, `scrollbar-thin.css` (reads `--scrollbar`, which the compat file defines), `clear-input.css` and `motion.css` (import them yourself; `tokens.css` is what imports them otherwise), `modal.css` and `tabs.css` (both need the motion variables listed in `tokens/README.md` on the app `:root`, because `tokens.css` sets them), and `animations.css` (not with the Tailwind preset). `base.css` and `tabs-pills.css` read raw `--accent`, `--foreground`, `--muted`, `--segment` and `--default`; skip them unless the app defines those as full colour values.
 
+`text-muted` (the exceptions above) reads `--muted-foreground` under the compat file, so it stays grey text. `bg-muted` and `border-muted` still read the app's `--muted` fill (0.17.1).
+
 The compat file defines `.glass-panel-strong` for toasts, dialogs and hover cards as the solid popover colour (`rgb(var(--popover))`, as `bg-overlay`), the same as `tokens.css`. Before 0.15.0 it was `rgb(var(--card) / 0.95)` with a 12px blur. The rule is in `@layer components`, so an app `.glass-panel-strong` rule after the import wins.
 
 A fixture that renders the main components against sample light and dark RGB variables is in `tokens/examples/compat-shadcn-rgb/`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one 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), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

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

@@ -26,6 +26,11 @@
  * `--color-sidebar-accent` (sidebar nav row fill) reads the app's
  * `--sidebar-accent` when it is defined, else `--secondary`.
  *
+ * `text-muted` is grey text in tokens.css, but shadcn's `--muted` is a fill.
+ * `--text-color-muted` points the text utility (and its variants and opacity
+ * modifiers) at `--muted-foreground`. `bg-muted` and `border-muted` keep
+ * `--muted`.
+ *
  * `--color-card` and `--color-muted` are references to `--card` and `--muted`.
  * `SonnerToaster sonnerVars` reads them, along with `--color-border` and
  * `--color-foreground`. An app that already maps those names keeps its own
@@ -38,6 +43,7 @@
 @theme inline {
   --color-card: rgb(var(--card));
   --color-muted: rgb(var(--muted));
+  --text-color-muted: rgb(var(--muted-foreground));
   --color-default: rgb(var(--secondary));
   --color-default-foreground: rgb(var(--secondary-foreground));
   --color-surface: rgb(var(--card));