@softure-ai/theme-notion 0.0.0-stage → 0.1.0

package/dist/ui/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AAEhD,SAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAAW,GAAG,YAAY,EAC1B,GAAG,KAAK,EACwC;IAChD,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,iBACP,MAAM,sBACE,WAAW,EAC7B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CACX,8DAA8D,EAC9D,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,MAAM,gBAAgB,GAAG,GAAG,CAC1B,mRAAmR,EACnR;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,UAAU;YACnB,IAAI,EAAE,sBAAsB;SAC7B;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;KAChB;CACF,CACF,CAAA;AAED,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,GAAG,KAAK,EAE6B;IACrC,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,iBACP,WAAW,kBACP,OAAO,EACrB,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KACnD,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,aAAa,CAAC,OAAO,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,gwBAAgwB,EAChwB,uRAAuR,EACvR,2LAA2L,EAC3L,keAAke,EACle,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,aAAa,CAAC,OAAO,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/ui/textarea.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };
+//# sourceMappingURL=textarea.d.ts.map

package/dist/ui/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/ui/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAW1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/ui/textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-field px-2.5 py-1.5 text-base transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:ring-destructive/40", className), ...props }));
+}
+export { Textarea };
+//# sourceMappingURL=textarea.js.map

package/dist/ui/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/ui/textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAEpC,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoC;IACzE,OAAO,CACL,gCACY,UAAU,EACpB,SAAS,EAAE,EAAE,CACX,iaAAia,EACja,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/ui/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/ui/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAEtD,iBAAS,eAAe,CAAC,EACvB,aAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,qBAQxD;AAED,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAEpD;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAEvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAgBvD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/ui/tooltip.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+function TooltipProvider({ delayDuration = 0, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+function Tooltip({ ...props }) {
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-sm bg-tooltip px-2 py-1 text-xs font-medium text-balance text-tooltip-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className), ...props, children: children }) }));
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.js.map

package/dist/ui/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/ui/tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAEtD,SAAS,eAAe,CAAC,EACvB,aAAa,GAAG,CAAC,EACjB,GAAG,KAAK,EAC+C;IACvD,OAAO,CACL,KAAC,gBAAgB,CAAC,QAAQ,iBACd,kBAAkB,EAC5B,aAAa,EAAE,aAAa,KACxB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,EACf,GAAG,KAAK,EAC2C;IACnD,OAAO,KAAC,gBAAgB,CAAC,IAAI,iBAAW,SAAS,KAAK,KAAK,GAAI,CAAA;AACjE,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EAC8C;IACtD,OAAO,KAAC,gBAAgB,CAAC,OAAO,iBAAW,iBAAiB,KAAK,KAAK,GAAI,CAAA;AAC5E,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAU,GAAG,CAAC,EACd,QAAQ,EACR,GAAG,KAAK,EAC8C;IACtD,OAAO,CACL,KAAC,gBAAgB,CAAC,MAAM,cACtB,KAAC,gBAAgB,CAAC,OAAO,iBACb,iBAAiB,EAC3B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,EAAE,CACX,kbAAkb,EAClb,SAAS,CACV,KACG,KAAK,YAER,QAAQ,GACgB,GACH,CAC3B,CAAA;AACH,CAAC;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,71 @@
 {
   "name": "@softure-ai/theme-notion",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "SOFTURE AI Notion theme: shadcn/ui components (new-york v4, Radix, Tailwind CSS v4, lucide) with the Notion design system's tokens and deltas, ready to import.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SOFTURE/AI.git",
+    "directory": "themes/theme-notion"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "exports": {
+    ".": {
+      "@softure-ai/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": "./dist/theme.css",
+    "./sft-bridge.css": "./dist/sft-bridge.css"
+  },
+  "softureTheme": {
+    "sources": [
+      "./ui",
+      "./notion"
+    ],
+    "imports": [
+      "tw-animate-css"
+    ],
+    "stylesheets": [
+      "sft-bridge.css"
+    ]
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && softure-theme-css"
+  },
+  "dependencies": {
+    "@softure-ai/theme-kit": "^0.1.0",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.61.0",
+    "radix-ui": "^1.8.1",
+    "sonner": "^2.0.8",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@softure-ai/ui": "^0.3.4",
+    "zod": "^4.6.5"
+  }
+}

package/src/index.ts

@@ -0,0 +1,50 @@
+// The Notion theme: tokens, cn, the shadcn/ui components with the theme's deltas, and the compositions.
+// The stylesheets are separate entries: `@softure-ai/theme-notion/theme.css` and `/sft-bridge.css`.
+export { NOTION_THEME, theme } from "./tokens.js";
+export { cn } from "./lib/utils.js";
+export { notionMessages, type NotionMessages } from "./messages/index.js";
+
+export * from "./ui/accordion.js";
+export * from "./ui/alert.js";
+export * from "./ui/alert-dialog.js";
+export * from "./ui/avatar.js";
+export * from "./ui/badge.js";
+export * from "./ui/breadcrumb.js";
+export * from "./ui/button.js";
+export * from "./ui/button-group.js";
+export * from "./ui/card.js";
+export * from "./ui/checkbox.js";
+export * from "./ui/collapsible.js";
+export * from "./ui/command.js";
+export * from "./ui/dialog.js";
+export * from "./ui/dropdown-menu.js";
+export * from "./ui/empty.js";
+export * from "./ui/field.js";
+export * from "./ui/input.js";
+export * from "./ui/input-group.js";
+export * from "./ui/item.js";
+export * from "./ui/kbd.js";
+export * from "./ui/label.js";
+export * from "./ui/popover.js";
+export * from "./ui/progress.js";
+export * from "./ui/scroll-area.js";
+export * from "./ui/select.js";
+export * from "./ui/separator.js";
+export * from "./ui/sheet.js";
+export * from "./ui/sidebar.js";
+export * from "./ui/skeleton.js";
+export * from "./ui/sonner.js";
+export * from "./ui/spinner.js";
+export * from "./ui/switch.js";
+export { SWITCH_THUMB_SHADOW_CLASS } from "./ui/switch-thumb.js";
+export * from "./ui/table.js";
+export * from "./ui/tabs.js";
+export * from "./ui/textarea.js";
+export * from "./ui/tooltip.js";
+
+export { ICON_STROKE_WIDTH } from "./notion/icon-stroke.js";
+export { PALETTE_COLORS, type PaletteColor } from "./notion/palette.js";
+export { PageFrame, type PageFrameProps } from "./notion/PageFrame.js";
+export { PageHeader, type PageCrumb, type PageHeaderProps } from "./notion/PageHeader.js";
+export { PropertyList, type Property, type PropertyListProps } from "./notion/PropertyList.js";
+export { Status, type StatusProps } from "./notion/Status.js";

package/src/lib/utils.ts

@@ -0,0 +1,9 @@
+import { createThemeCn } from "@softure-ai/theme-kit";
+
+import { NOTION_THEME } from "../tokens.js";
+
+/**
+ * shadcn/ui's `cn` for the Notion theme: a later Tailwind utility wins over an earlier one of the same kind, and the
+ * theme's named text styles (`text-body`) and shadows (`shadow-menu`) merge as their own kinds.
+ */
+export const cn = createThemeCn(NOTION_THEME);

package/src/messages/en.ts

@@ -0,0 +1,12 @@
+/**
+ * The built-in English copy of the components: accessible names a screen reader announces. Every text has a prop to
+ * replace it with the app's own wording from its message layer.
+ */
+export const en = {
+  breadcrumb: { label: "breadcrumb", more: "More" },
+  dialog: { close: "Close" },
+  sheet: { close: "Close" },
+  sidebar: { mobileTitle: "Sidebar", mobileDescription: "Displays the mobile sidebar.", toggle: "Toggle Sidebar" },
+  spinner: { label: "Loading" },
+  command: { title: "Command Palette", description: "Search for a command to run..." },
+} as const;

package/src/messages/index.ts

@@ -0,0 +1,6 @@
+import { en } from "./en.js";
+
+/** The built-in English dictionary; replace a text through the component's prop (README, "Copy"). */
+export const notionMessages = { en };
+
+export type NotionMessages = typeof en;

package/src/notion/PageFrame.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+export interface PageFrameProps {
+  children: ReactNode;
+}
+
+/**
+ * A page outside the app shell (the sign-in and account pages of the packages, the not-found page): the window's
+ * height on the Notion background, with the package's `--sft-*` tokens re-pointed at the Notion theme
+ * (`src/app/sft-bridge.css`). No `data-slot`: the scoped preflight stays off the package pages.
+ */
+export function PageFrame({ children }: PageFrameProps) {
+  return (
+    <div data-page-frame="" className="min-h-dvh bg-background font-sans text-ui text-foreground">
+      {children}
+    </div>
+  );
+}

package/src/notion/PageHeader.tsx

@@ -0,0 +1,62 @@
+import { Fragment, type ReactNode } from "react";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../ui/breadcrumb.js";
+import { cn } from "../lib/utils.js";
+
+export interface PageCrumb {
+  label: string;
+  // Absent on the current page, the last crumb.
+  href?: string;
+}
+
+export interface PageHeaderProps {
+  title: ReactNode;
+  crumbs?: PageCrumb[];
+  // A lucide icon, never an emoji.
+  icon?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  // Content right under the title, before the description (a status line, a picker).
+  children?: ReactNode;
+  className?: string;
+}
+
+// The page's header, once per screen: breadcrumb, page icon, the 40 px title, what follows it, a description and actions.
+export function PageHeader({ title, crumbs, icon, description, actions, children, className }: PageHeaderProps) {
+  return (
+    <header data-slot="page-header" className={cn("flex flex-col", className)}>
+      {crumbs && crumbs.length > 0 ? (
+        <Breadcrumb>
+          <BreadcrumbList>
+            {crumbs.map((crumb, index) => (
+              <Fragment key={`${index}-${crumb.label}`}>
+                {index > 0 ? <BreadcrumbSeparator /> : null}
+                <BreadcrumbItem>
+                  {crumb.href === undefined ? (
+                    <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
+                  )}
+                </BreadcrumbItem>
+              </Fragment>
+            ))}
+          </BreadcrumbList>
+        </Breadcrumb>
+      ) : null}
+      {icon ? (
+        <div className="mt-6 mb-2 flex size-14 items-center justify-center rounded-xl bg-secondary [&>svg]:size-8">{icon}</div>
+      ) : null}
+      <h1 className="text-page-title text-balance">{title}</h1>
+      {children}
+      {description ? <p className="mt-1 text-body text-muted-foreground">{description}</p> : null}
+      {actions ? <div className="mt-3 flex flex-wrap gap-1">{actions}</div> : null}
+    </header>
+  );
+}

package/src/notion/PropertyList.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+import { Field, FieldGroup, FieldLabel } from "../ui/field.js";
+import { cn } from "../lib/utils.js";
+
+export interface Property {
+  label: string;
+  value: ReactNode;
+  icon?: ReactNode;
+}
+
+export interface PropertyListProps {
+  items: Property[];
+  className?: string;
+}
+
+// Properties as in a Notion database page: a 160 px label with its type icon, then the value.
+export function PropertyList({ items, className }: PropertyListProps) {
+  return (
+    <FieldGroup data-slot="property-list" className={cn("gap-0.5", className)}>
+      {items.map((item) => (
+        <Field
+          key={item.label}
+          orientation="horizontal"
+          className="min-h-row-height items-center gap-0 [&>[data-slot=field-label]]:flex-none"
+        >
+          <FieldLabel className="w-40 flex-none gap-1.5 px-1.5 font-normal text-muted-foreground [&>svg]:size-4">
+            {item.icon}
+            {item.label}
+          </FieldLabel>
+          <div className="flex min-h-row-height min-w-0 flex-1 flex-wrap items-center gap-1 rounded-xs px-2 hover:bg-accent">
+            {item.value}
+          </div>
+        </Field>
+      ))}
+    </FieldGroup>
+  );
+}

package/src/notion/Status.tsx

@@ -0,0 +1,44 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Badge } from "../ui/badge.js";
+import { cn } from "../lib/utils.js";
+
+import { ICON_STROKE_WIDTH } from "./icon-stroke.js";
+import type { PaletteColor } from "./palette.js";
+
+// Literal class names, so Tailwind generates each one.
+const TEXT_COLOR: Record<PaletteColor, string> = {
+  gray: "text-gray",
+  brown: "text-brown",
+  orange: "text-orange",
+  yellow: "text-yellow",
+  green: "text-green",
+  blue: "text-blue",
+  purple: "text-purple",
+  pink: "text-pink",
+  red: "text-red",
+};
+
+export interface StatusProps {
+  color: PaletteColor;
+  icon: LucideIcon;
+  // The word: a status always carries one, so states read apart without telling colours apart.
+  children: ReactNode;
+  className?: string;
+}
+
+// A state of something (booked, to pay, overdue): a ghost badge with a line icon and a word in a palette colour.
+export function Status({ color, icon: Icon, children, className }: StatusProps) {
+  return (
+    <Badge
+      variant="ghost"
+      data-slot="status"
+      data-color={color}
+      className={cn("gap-1.5 px-0 text-sm font-normal [&>svg]:size-4", TEXT_COLOR[color], className)}
+    >
+      <Icon aria-hidden="true" strokeWidth={ICON_STROKE_WIDTH} />
+      {children}
+    </Badge>
+  );
+}

package/src/notion/icon-stroke.ts

@@ -0,0 +1,2 @@
+// The design system's icon line: lucide icons at 1.75 instead of lucide's default 2 (docs/design-system.md, "Icons").
+export const ICON_STROKE_WIDTH = 1.75;

package/src/notion/palette.ts

@@ -0,0 +1,5 @@
+// The design system's nine palette colours. A colour marks an area (a tag) or a state (a status, a callout), never
+// decoration, and always means the same thing; each app keeps its own table of which meaning takes which colour.
+export const PALETTE_COLORS = ["gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"] as const;
+
+export type PaletteColor = (typeof PALETTE_COLORS)[number];

package/src/sft-bridge.css

@@ -0,0 +1,47 @@
+/*
+ * The bridge from the `--sft-*` tokens of @softure-ai/ui to the Notion theme. Pages rendered by the SOFTURE packages
+ * (sign-in, password, MCP access, OAuth consent) read `--sft-*`; inside a `PageFrame` (any `[data-page-frame]`
+ * element) those tokens point at the Notion values, so the package pages take the theme's colours, type, radii and
+ * shadows. Scoped to the frame, not `:root`: screens still on `--sft-*` keep their look until they move. The Notion
+ * colours and shadows switch scheme by themselves, so the bridge needs no dark block. Spacing, text sizes and
+ * durations stay the package's: the scales already match, and the theme has no motion tokens.
+ *
+ * Import it after `theme.css`, through the app's Tailwind (it reads the theme with `--theme()`).
+ */
+@layer base {
+  [data-page-frame] {
+    --sft-font-sans: --theme(--font-sans);
+    --sft-font-heading: --theme(--font-sans);
+    --sft-font-mono: --theme(--font-mono);
+
+    --sft-radius-control: --theme(--radius-md);
+    --sft-radius-card: --theme(--radius-lg);
+    --sft-radius-pill: --theme(--radius-full);
+
+    --sft-color-background: var(--background);
+    --sft-color-surface: var(--card);
+    --sft-color-surface-raised: var(--popover);
+    --sft-color-foreground: var(--foreground);
+    --sft-color-muted: var(--muted-foreground);
+    --sft-color-border: var(--border);
+    --sft-color-border-strong: var(--control-off);
+    --sft-color-accent: var(--primary);
+    --sft-color-accent-fill: var(--primary);
+    --sft-color-accent-fill-hover: var(--primary-hover);
+    --sft-color-on-accent: var(--primary-foreground);
+    --sft-color-danger: var(--red);
+    --sft-color-success: var(--green);
+    --sft-color-warning: var(--orange);
+    --sft-color-focus: var(--ring);
+    --sft-color-overlay: var(--overlay);
+
+    --sft-shadow-1: var(--shadow-card);
+    --sft-shadow-2: var(--shadow-dialog);
+  }
+
+  /* A page in a frame fills the window: no browser margin, the Notion background behind everything. */
+  body:has([data-page-frame]) {
+    margin: 0;
+    background-color: var(--background);
+  }
+}

package/src/tokens.ts

@@ -0,0 +1,140 @@
+import { defineTheme } from "@softure-ai/theme-kit";
+
+/**
+ * The Notion theme: the token values of the Notion design system (shadcn/ui new-york v4 with Notion's colours, type,
+ * radii and shadows). `tests/tokens.test.ts` keeps them equal to the design system's token snapshot
+ * (`tests/fixtures/notion-tokens.json`); the kit's `softure-theme-css` turns them into `theme.css`.
+ */
+export const NOTION_THEME = defineTheme({
+  name: "Notion",
+  colors: {
+    background: { light: "#ffffff", dark: "#191919" },
+    foreground: { light: "#37352f", dark: "#d4d4d4" },
+    card: { light: "#ffffff", dark: "#202020" },
+    "card-foreground": { light: "#37352f", dark: "#d4d4d4" },
+    popover: { light: "#ffffff", dark: "#252525" },
+    "popover-foreground": { light: "#37352f", dark: "#d4d4d4" },
+    primary: { light: "#2383e2", dark: "#2383e2" },
+    "primary-foreground": { light: "#ffffff", dark: "#ffffff" },
+    "primary-hover": { light: "#0077d4", dark: "#0077d4" },
+    secondary: { light: "#f1f1ef", dark: "#2f2f2f" },
+    "secondary-foreground": { light: "#37352f", dark: "#d4d4d4" },
+    muted: { light: "#f7f7f5", dark: "#202020" },
+    "muted-foreground": { light: "#787774", dark: "#9b9b9b" },
+    accent: { light: "rgba(55, 53, 47, 0.08)", dark: "rgba(255, 255, 255, 0.055)" },
+    "accent-foreground": { light: "#37352f", dark: "#d4d4d4" },
+    "accent-strong": { light: "rgba(55, 53, 47, 0.16)", dark: "rgba(255, 255, 255, 0.1)" },
+    destructive: { light: "#eb5757", dark: "#eb5757" },
+    "destructive-foreground": { light: "#ffffff", dark: "#ffffff" },
+    border: { light: "#e9e9e7", dark: "#2f2f2f" },
+    input: { light: "rgba(15, 15, 15, 0.1)", dark: "rgba(255, 255, 255, 0.075)" },
+    field: { light: "rgba(242, 241, 238, 0.6)", dark: "rgba(255, 255, 255, 0.055)" },
+    "control-off": { light: "rgba(135, 131, 120, 0.3)", dark: "rgba(202, 196, 183, 0.15)" },
+    ring: { light: "rgba(35, 131, 226, 0.57)", dark: "rgba(35, 131, 226, 0.57)" },
+    sidebar: { light: "#f7f7f5", dark: "#202020" },
+    "sidebar-foreground": { light: "#5f5e5b", dark: "#9b9b9b" },
+    "sidebar-primary": { light: "#2383e2", dark: "#2383e2" },
+    "sidebar-primary-foreground": { light: "#ffffff", dark: "#ffffff" },
+    "sidebar-accent": { light: "rgba(55, 53, 47, 0.08)", dark: "rgba(255, 255, 255, 0.055)" },
+    "sidebar-accent-foreground": { light: "#37352f", dark: "#d4d4d4" },
+    "sidebar-border": { light: "#ededeb", dark: "#2a2a2a" },
+    "sidebar-ring": { light: "rgba(35, 131, 226, 0.57)", dark: "rgba(35, 131, 226, 0.57)" },
+    tooltip: { light: "#0f0f0f", dark: "#373737" },
+    "tooltip-foreground": { light: "rgba(255, 255, 255, 0.9)", dark: "rgba(255, 255, 255, 0.9)" },
+    overlay: { light: "rgba(15, 15, 15, 0.6)", dark: "rgba(0, 0, 0, 0.6)" },
+    gray: { light: "#787774", dark: "#9b9b9b" },
+    "gray-bg": { light: "#f1f1ef", dark: "#2f2f2f" },
+    "gray-tag": { light: "#e3e2e0", dark: "#5a5a5a" },
+    "gray-tag-foreground": { light: "#32302c", dark: "rgba(255, 255, 255, 0.81)" },
+    brown: { light: "#9f6b53", dark: "#ba856f" },
+    "brown-bg": { light: "#f4eeee", dark: "#4a3228" },
+    "brown-tag": { light: "#eee0da", dark: "#603b2c" },
+    "brown-tag-foreground": { light: "#442a1e", dark: "rgba(255, 255, 255, 0.81)" },
+    orange: { light: "#d9730d", dark: "#c77d48" },
+    "orange-bg": { light: "#fbecdd", dark: "#5c3b23" },
+    "orange-tag": { light: "#fadec9", dark: "#854c1d" },
+    "orange-tag-foreground": { light: "#49290e", dark: "rgba(255, 255, 255, 0.81)" },
+    yellow: { light: "#cb912f", dark: "#ca984d" },
+    "yellow-bg": { light: "#fbf3db", dark: "#564328" },
+    "yellow-tag": { light: "#fdecc8", dark: "#89632a" },
+    "yellow-tag-foreground": { light: "#402c1b", dark: "rgba(255, 255, 255, 0.81)" },
+    green: { light: "#448361", dark: "#529e72" },
+    "green-bg": { light: "#edf3ec", dark: "#243d30" },
+    "green-tag": { light: "#dbeddb", dark: "#2b593f" },
+    "green-tag-foreground": { light: "#1c3829", dark: "rgba(255, 255, 255, 0.81)" },
+    blue: { light: "#337ea9", dark: "#379ad3" },
+    "blue-bg": { light: "#e7f3f8", dark: "#143a4e" },
+    "blue-tag": { light: "#d3e5ef", dark: "#28456c" },
+    "blue-tag-foreground": { light: "#183347", dark: "rgba(255, 255, 255, 0.81)" },
+    purple: { light: "#9065b0", dark: "#9d68d3" },
+    "purple-bg": { light: "#f6f3f9", dark: "#3c2d49" },
+    "purple-tag": { light: "#e8deee", dark: "#492f64" },
+    "purple-tag-foreground": { light: "#412454", dark: "rgba(255, 255, 255, 0.81)" },
+    pink: { light: "#c14c8a", dark: "#d15796" },
+    "pink-bg": { light: "#faf1f5", dark: "#4e2c3c" },
+    "pink-tag": { light: "#f5e0e9", dark: "#69314c" },
+    "pink-tag-foreground": { light: "#4c2337", dark: "rgba(255, 255, 255, 0.81)" },
+    red: { light: "#d44c47", dark: "#df5452" },
+    "red-bg": { light: "#fdebec", dark: "#522e2a" },
+    "red-tag": { light: "#ffe2dd", dark: "#6e3630" },
+    "red-tag-foreground": { light: "#5d1715", dark: "rgba(255, 255, 255, 0.81)" },
+    "default-tag": { light: "#f1f0ef", dark: "#373737" },
+    "default-tag-foreground": { light: "#32302c", dark: "#d4d4d4" },
+    "chart-1": { alias: "blue" },
+    "chart-2": { alias: "orange" },
+    "chart-3": { alias: "green" },
+    "chart-4": { alias: "purple" },
+    "chart-5": { alias: "pink" },
+  },
+  shadows: {
+    menu: {
+      light: "0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.1), 0 9px 24px rgba(15, 15, 15, 0.2)",
+      dark: "0 0 0 1px rgba(255, 255, 255, 0.094), 0 3px 6px rgba(0, 0, 0, 0.2), 0 9px 24px rgba(0, 0, 0, 0.4)",
+    },
+    dialog: {
+      light: "0 0 0 1px rgba(15, 15, 15, 0.05), 0 5px 10px rgba(15, 15, 15, 0.1), 0 15px 40px rgba(15, 15, 15, 0.2)",
+      dark: "0 0 0 1px rgba(255, 255, 255, 0.094), 0 5px 10px rgba(0, 0, 0, 0.3), 0 15px 40px rgba(0, 0, 0, 0.5)",
+    },
+    card: {
+      light: "0 0 0 1px rgba(15, 15, 15, 0.1), 0 2px 4px rgba(15, 15, 15, 0.1)",
+      dark: "0 0 0 1px rgba(255, 255, 255, 0.094), 0 2px 4px rgba(0, 0, 0, 0.3)",
+    },
+  },
+  fonts: {
+    sans: "ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI Variable Display\", \"Segoe UI\", Helvetica, Arial, sans-serif",
+    mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
+    serif: "ui-serif, Georgia, Cambria, \"Times New Roman\", serif",
+  },
+  textStyles: {
+    "page-title": { fontSize: "40px", lineHeight: "48px", fontWeight: 700, letterSpacing: "-0.01em" },
+    "heading-1": { fontSize: "30px", lineHeight: "39px", fontWeight: 600 },
+    "heading-2": { fontSize: "24px", lineHeight: "31px", fontWeight: 600 },
+    "heading-3": { fontSize: "20px", lineHeight: "26px", fontWeight: 600 },
+    body: { fontSize: "16px", lineHeight: "24px", fontWeight: 400 },
+    ui: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 },
+    "ui-medium": { fontSize: "14px", lineHeight: "20px", fontWeight: 500 },
+    small: { fontSize: "12px", lineHeight: "16px", fontWeight: 400 },
+    "section-label": { fontSize: "12px", lineHeight: "16px", fontWeight: 500, letterSpacing: "0.01em" },
+    code: { fontSize: "13px", lineHeight: "20px", fontWeight: 400 },
+  },
+  radii: {
+    xs: "3px",
+    sm: "4px",
+    md: "6px",
+    lg: "8px",
+    xl: "10px",
+    full: "9999px",
+  },
+  sizes: {
+    "sidebar-width": "240px",
+    "content-width": "708px",
+    "content-width-wide": "1152px",
+    "control-height": "28px",
+    "row-height": "34px",
+  },
+  // The design system allows only its own colours, so no raw Tailwind colour utility exists.
+  clearDefaultPalette: true,
+});
+
+/** The theme under the name every theme package exports, so an app swaps themes by the import path alone. */
+export const theme = NOTION_THEME;