@psnext/design-system 1.2.0 → 1.3.0

package/dist/primitives/index.js

@@ -39,6 +39,7 @@ import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup,
 import { Kbd, KbdGroup } from "./Kbd/index.js";
 import { Link, linkVariants } from "./Link/index.js";
 import { t as Logo } from "../Logo.js";
+import { ThemeContext, ThemeProvider, useTheme } from "./ThemeProvider/index.js";
 import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./Menubar/index.js";
 import { NativeSelect, nativeSelectVariants } from "./NativeSelect/index.js";
 import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./NavigationMenu/index.js";
@@ -59,7 +60,6 @@ import { RichSwitchGroup, Switch, SwitchGroup } from "./Switch/index.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./Table/index.js";
 import { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants } from "./Tabs/index.js";
 import { Text, textVariants } from "./Text/index.js";
-import { ThemeContext, ThemeProvider, useTheme } from "./ThemeProvider/index.js";
 import { Toggle, toggleVariants } from "./Toggle/index.js";
 import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup/index.js";
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertContent, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxTree, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Credits, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Heading, HoverCard, HoverCardContent, HoverCardTrigger, ICON_NAMES, Icon, InfoBanner, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Link, Logo, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, NavRail, NavRailItem, NavRailMenu, NavRailMenuContent, NavRailMenuItem, NavRailMenuTrigger, NavRailSeparator, NavRailUser, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichCheckbox, RichRadioItem, RichSwitchGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkeletonAvatar, SkeletonLine, SkeletonObject, Slider, Spinner, Switch, SwitchGroup, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, Text, Textarea, ThemeContext, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, creditsVariants, emptyVariants, headingVariants, infoBannerVariants, inputVariants, linkVariants, nativeSelectVariants, navigationMenuTriggerStyle, tabsListVariants, tabsTriggerVariants, textVariants, textareaVariants, toggleVariants, useFormField, useSidebar, useTheme };

package/dist/styles/index.css

@@ -47,6 +47,9 @@
 /* ── Base layer (suite-wide defaults) ─────────────────────── */
 @import "./base.css";
 
+/* ── Global flow-content typography (raw/markdown tags) ────── */
+@import "./typography.css";
+
 /* Scan the design-system component source so the utility classes
    they use are emitted into the compiled stylesheet. */
 @source "../";

package/dist/styles/semantic.css

@@ -33,7 +33,28 @@
 
   /* ── States ───────────────────────────────────────────── */
   --destructive: var(--bg-destructive);
-  --destructive-foreground: var(--content-destructive-foreground);
+  /* NOTE: `--destructive-foreground` resolves to the destructive *content* red
+     (Figma content/destructive) — i.e. `text-destructive-foreground` is the red
+     text/icon color. The on-destructive foreground (white, for text ON a filled
+     destructive surface) is `--destructive-content-foreground`. */
+  --destructive-foreground: var(--content-destructive);
+  --destructive-content-foreground: var(--content-destructive-foreground);
+  --destructive-subtle: var(--bg-destructive-subtle);
+  --destructive-subtle-foreground: var(--content-destructive-subtle);
+  --destructive-alpha: var(--bg-destructive-alpha);
+  --destructive-border: var(--border-destructive-border);
+  --error: var(--bg-error);
+  --error-subtle: var(--bg-error-subtle);
+  --error-foreground: var(--content-error);
+  --error-bold-foreground: var(--content-error-bold);
+
+  /* Inverse surface — a dark fill + light text in light mode (flips in dark).
+     For tooltips, inverted cards/badges, and solid icon chips. Bound to the Figma
+     popover/popover token, which IS the design's inverse surface (#1f2832 light /
+     #ffffff dark) — note --popover (the menu/popover *semantic*) is deliberately
+     aliased to --card instead (tech-debt #6), so we reference the raw token here. */
+  --inverse: var(--popover-popover);
+  --inverse-foreground: var(--popover-popover-foreground);
 
   /* ── UI structure ─────────────────────────────────────── */
   --border: var(--border-border-2);
@@ -44,6 +65,7 @@
   --switch-background: var(--gray-200);
   --overlay: var(--bg-backdrop);
   --ring: var(--focus-ring);
+  --ring-error: var(--focus-ring-error);
 
   /* ── Sidebar ──────────────────────────────────────────── */
   --sidebar: var(--sidebar-sidebar);
@@ -87,7 +109,6 @@
   /* ── Component tokens ─────────────────────────────────── */
   --progress-analyzing: var(--sky-200);
   --progress-ingesting: var(--orange-200);
-  --logo-accent: var(--white);
 
   /* Gradient heading fill (Heading `gradient` variant). */
   --gradient-heading-from: var(--sky-600);
@@ -105,19 +126,9 @@
 .dark {
   --progress-analyzing: var(--sky-800);
   --progress-ingesting: var(--orange-800);
-  --logo-accent: var(--gray-200);
 
   --page-gradient-edge: var(--gray-950);
   --page-gradient-mid: var(--red-950);
-
-  /* The Figma dark `bg/destructive` (#6C0016) is near-black. `--destructive` is
-     used as BOTH the destructive button fill AND the text/icon/border colour, so
-     in dark mode every destructive component (button, alert, icon, field errors)
-     reads as too dark. Point the all-purpose token at the palette's vivid error
-     red instead. CSS-only override — the Figma token is left untouched.
-     TODO(design): revisit the Figma `bg/destructive` dark value so this override
-     can be removed — see docs/tech-debt.md. */
-  --destructive: var(--content-error);
 }
 
 /* Brand-aware page gradient: the middle stop is each brand's secondary tint. */

package/dist/styles/theme.css

@@ -34,12 +34,27 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  /* `*-destructive-foreground` = the destructive content red; the on-destructive
+     foreground (white) is `*-destructive-content-foreground`. See semantic.css. */
   --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
+  --color-destructive-content-foreground: var(--destructive-content-foreground);
+  --color-destructive-subtle: var(--destructive-subtle);
+  --color-destructive-subtle-foreground: var(--destructive-subtle-foreground);
+  --color-destructive-alpha: var(--destructive-alpha);
+  --color-destructive-border: var(--destructive-border);
+  --color-error: var(--error);
+  --color-error-subtle: var(--error-subtle);
+  --color-error-foreground: var(--error-foreground);
+  --color-error-bold-foreground: var(--error-bold-foreground);
+  /* Inverse surface pair (→ bg-inverse / text-inverse-foreground / fill-inverse). */
+  --color-inverse: var(--inverse);
+  --color-inverse-foreground: var(--inverse-foreground);
+  --color-border: var(--border); /* this is good */
   --color-input: var(--input);
   --color-switch-background: var(--switch-background);
   --color-input-background: var(--input-background);
   --color-ring: var(--ring);
+  --color-ring-error: var(--ring-error);
 
   /* ── Sidebar ──────────────────────────────────────────── */
   --color-sidebar: var(--sidebar);
@@ -70,11 +85,27 @@
   --color-brand-accent: var(--brand-accent);
   --color-brand-accent-foreground: var(--brand-accent-foreground);
 
+  /* ── Page Gradient ───────────────────── */
+  --color-page-gradient-edge: var(--page-gradient-edge);
+  --color-page-gradient-mid: var(--page-gradient-mid);
+
+  /* ── Glass Colors ───────────────────── */
+  --color-glass-heavy: var(--glass-heavy);
+  --color-glass-strong: var(--glass-strong);
+  --color-glass-subtle: var(--glass-subtle);
+  --color-glass-light: var(--glass-light);
+  --color-glass-medium: var(--glass-medium);
+
+  /* ── Blur ───────────────────── */
+  --blur-glass: var(--glass-blur);
+
   /* ── Radius (→ rounded-* utilities) ───────────────────── */
   --radius-xs: var(--rounded-xs);
   --radius-sm: var(--rounded-sm);
   --radius-md: var(--rounded-md);
   --radius-lg: var(--rounded-lg);
+  --radius-5: var(--rounded-5);
+  --radius-10: var(--rounded-10);
   --radius-xl: var(--rounded-xl);
   --radius-2xl: var(--rounded-2xl);
   --radius-3xl: var(--rounded-3xl);
@@ -89,7 +120,15 @@
   --shadow-2xl: var(--shadow-2xl);
 
   /* ── Font families (→ font-sans / font-heading / font-mono) ── */
-  --font-sans: var(--font-definitions-font-family-body);
-  --font-heading: var(--font-definitions-font-family-headings);
-  --font-mono: var(--font-definitions-font-family-monospace);
+  /* Brand font first, then a system fallback stack so text stays styled if the
+     web font fails to load / during FOUT. `--font-sans` also drives the base
+     body font (Tailwind's --default-font-family). */
+  --font-sans:
+    var(--font-definitions-font-family-body), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-heading: var(--font-definitions-font-family-headings), ui-sans-serif, system-ui,
+    -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: var(--font-definitions-font-family-monospace), ui-monospace, SFMono-Regular,
+    "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }

package/dist/styles/tokens/border-radius.css

@@ -7,9 +7,10 @@
   --rounded-none: 0;
   --rounded-xs: 2px;
   --rounded-sm: 4px;
+  --rounded-5: 5px;
   --rounded-md: 6px;
   --rounded-lg: 8px;
-  --radius: 10px;
+  --rounded-10: 10px;
   --rounded-xl: 12px;
   --rounded-2xl: 16px;
   --rounded-3xl: 24px;

package/dist/styles/tokens/mode-dark.css

@@ -10,7 +10,7 @@
   --bg-accent: #111827; /** Level 1, official */
   --bg-muted: #111827;
   --bg-destructive: #6c0016;
-  --bg-destructive-alpha: rgb(127 29 29 / 0.2);
+  --bg-destructive-alpha: rgb(220 38 38 / 0.2);
   --bg-destructive-subtle: #3d000d;
   --bg-input: rgb(255 255 255 / 0.05);
   --bg-page-bg-brand: #3d000d;

package/dist/styles/typography.css

@@ -0,0 +1,136 @@
+/* ============================================================
+   Global flow-content typography — default styling for raw HTML
+   tags (markdown / CMS output) rendered WITHOUT design-system
+   component classes.
+
+   Scoped to `:not([class]):not([data-slot])`: Tailwind's preflight strips margins,
+   list markers, link styling, etc., and DS components re-style their
+   own elements via utility classes — so anything that already has a
+   `class` is component-managed and left alone. Bare tags (what a
+   markdown renderer emits) get a readable default here.
+
+   `@layer base` so component/app utilities always win. All values
+   come from the design-system tokens.
+   ============================================================ */
+
+@layer base {
+  /* ── Vertical rhythm (block flow) ─────────────────────────── */
+  :where(p, ul, ol, blockquote, pre, table, hr, figure):not([class]):not([data-slot]) {
+    margin-block: 0 1rem;
+  }
+  :where(h1, h2, h3, h4, h5, h6):not([class]):not([data-slot]) {
+    margin-block: 1.5rem 0.5rem;
+  }
+  /* No leading gap on the first block of a flow container. */
+  :where(p, ul, ol, blockquote, pre, table, hr, figure, h1, h2, h3, h4, h5, h6):not(
+      [class]
+    ):first-child {
+    margin-block-start: 0;
+  }
+
+  /* ── Paragraph / inline text ──────────────────────────────── */
+  p:not([class]):not([data-slot]) {
+    font-size: var(--paragraph-regular-font-size);
+    line-height: var(--paragraph-regular-line-height);
+  }
+  a:not([class]):not([data-slot]) {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  a:not([class]):not([data-slot]):hover {
+    text-decoration-thickness: 2px;
+  }
+  strong:not([class]):not([data-slot]),
+  b:not([class]):not([data-slot]) {
+    font-weight: 600;
+  }
+  em:not([class]):not([data-slot]),
+  i:not([class]):not([data-slot]) {
+    font-style: italic;
+  }
+  small:not([class]):not([data-slot]) {
+    font-size: var(--paragraph-small-font-size);
+  }
+
+  /* ── Lists ────────────────────────────────────────────────── */
+  ul:not([class]):not([data-slot]),
+  ol:not([class]):not([data-slot]) {
+    padding-inline-start: 1.5rem;
+  }
+  ul:not([class]):not([data-slot]) {
+    list-style: disc;
+  }
+  ol:not([class]):not([data-slot]) {
+    list-style: decimal;
+  }
+  li:not([class]):not([data-slot]) {
+    margin-block: 0.25rem;
+  }
+  /* Nested lists tighten up and lose the extra block margin. */
+  :where(ul, ol):not([class]):not([data-slot]) :where(ul, ol):not([class]):not([data-slot]) {
+    margin-block: 0.25rem 0;
+  }
+
+  /* ── Code ─────────────────────────────────────────────────── */
+  code:not([class]):not([data-slot]),
+  kbd:not([class]):not([data-slot]),
+  samp:not([class]):not([data-slot]) {
+    font-family: var(--font-definitions-font-family-monospace);
+    font-size: 0.875em;
+  }
+  /* Inline code chip (a bare <code> not inside a <pre>). */
+  :not(pre) > code:not([class]):not([data-slot]) {
+    border-radius: var(--rounded-sm);
+    background-color: var(--muted);
+    padding: 0.125rem 0.375rem;
+  }
+  pre:not([class]):not([data-slot]) {
+    overflow-x: auto;
+    border-radius: var(--rounded-lg);
+    background-color: var(--muted);
+    padding: 1rem;
+    font-size: var(--paragraph-small-font-size);
+    line-height: var(--paragraph-small-line-height);
+  }
+  pre:not([class]):not([data-slot]) code {
+    font-family: var(--font-definitions-font-family-monospace);
+    background-color: transparent;
+    padding: 0;
+  }
+
+  /* ── Blockquote ───────────────────────────────────────────── */
+  blockquote:not([class]):not([data-slot]) {
+    border-inline-start: 3px solid var(--border);
+    padding-inline-start: 1rem;
+    color: var(--muted-foreground);
+    font-style: italic;
+  }
+
+  /* ── Rule / media ─────────────────────────────────────────── */
+  hr:not([class]):not([data-slot]) {
+    border: 0;
+    border-top: 1px solid var(--border);
+  }
+  img:not([class]):not([data-slot]),
+  video:not([class]):not([data-slot]) {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--rounded-lg);
+  }
+
+  /* ── Tables ───────────────────────────────────────────────── */
+  table:not([class]):not([data-slot]) {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--paragraph-small-font-size);
+  }
+  :where(th, td):not([class]):not([data-slot]) {
+    border-bottom: 1px solid var(--border);
+    padding: 0.5rem 0.75rem;
+    text-align: start;
+  }
+  th:not([class]):not([data-slot]) {
+    font-weight: 600;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psnext/design-system",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Sapient AI Products design system — primitives, patterns, and layouts.",
   "license": "UNLICENSED",
   "private": false,
@@ -100,6 +100,7 @@
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/coverage-v8": "^3.2.0",
     "axe-core": "^4.12.0",
+    "css-tree": "^3.2.1",
     "jsdom": "^26.1.0",
     "style-dictionary": "^4.3.0",
     "tailwindcss": "^4.1.12",
@@ -112,9 +113,13 @@
   "scripts": {
     "build": "tsdown && pnpm styles:copy",
     "tokens:css": "node style-dictionary.config.mjs",
+    "tokens:inventory": "node scripts/css-vars-inventory.mjs",
+    "tokens:components": "node scripts/css-vars-inventory.mjs && node scripts/component-vars-inventory.mjs",
+    "tokens:theme-usage": "node scripts/css-vars-inventory.mjs && node scripts/theme-usage-inventory.mjs",
     "styles:copy": "node scripts/copy-styles.mjs",
     "typecheck": "tsc --noEmit",
-    "lint": "biome check ./src",
+    "lint": "biome check ./src && pnpm lint:dark-variant",
+    "lint:dark-variant": "node scripts/check-no-dark-variant.mjs",
     "test": "vitest run --passWithNoTests",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",