@djangocfg/ui-core 2.1.634 → 2.1.635

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.634",
+  "version": "2.1.635",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -119,7 +119,8 @@
     "./styles/presets/windows": "./src/styles/css/presets/windows.css",
     "./styles/presets/soft": "./src/styles/css/presets/soft.css",
     "./styles/presets/dense": "./src/styles/css/presets/dense.css",
-    "./styles/presets/high-contrast": "./src/styles/css/presets/high-contrast.css"
+    "./styles/presets/high-contrast": "./src/styles/css/presets/high-contrast.css",
+    "./styles/presets/notion": "./src/styles/css/presets/notion.css"
   },
   "files": [
     "dist",
@@ -138,8 +139,8 @@
     "check:docs": "node scripts/check-docs.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.634",
-    "@djangocfg/i18n": "^2.1.634",
+    "@djangocfg/api": "^2.1.635",
+    "@djangocfg/i18n": "^2.1.635",
     "consola": "^3.4.2",
     "lucide-react": "^1.68.0",
     "moment": "^2.30.1",
@@ -214,10 +215,10 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.634",
-    "@djangocfg/eslint-config": "^2.1.634",
-    "@djangocfg/i18n": "^2.1.634",
-    "@djangocfg/typescript-config": "^2.1.634",
+    "@djangocfg/api": "^2.1.635",
+    "@djangocfg/eslint-config": "^2.1.635",
+    "@djangocfg/i18n": "^2.1.635",
+    "@djangocfg/typescript-config": "^2.1.635",
     "@storybook/react-vite": "^10.6.5",
     "@types/node": "^24.13.3",
     "@types/react": "19.3.0",

package/src/components/data/badge/index.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { cn } from '../../../lib/utils';
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-[var(--radius)] border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-1 focus:ring-ring",
+  "inline-flex items-center rounded-(--badge-radius) border px-(--badge-px) py-(--badge-py) text-(length:--badge-font-size) font-(weight:--badge-weight) transition-colors focus:outline-none focus:ring-1 focus:ring-ring",
   {
     variants: {
       variant: {
@@ -15,6 +15,15 @@ const badgeVariants = cva(
         destructive:
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
         outline: "text-foreground",
+        gray: "border-transparent bg-(--tag-gray-bg) text-(--tag-gray-fg)",
+        brown: "border-transparent bg-(--tag-brown-bg) text-(--tag-brown-fg)",
+        orange: "border-transparent bg-(--tag-orange-bg) text-(--tag-orange-fg)",
+        yellow: "border-transparent bg-(--tag-yellow-bg) text-(--tag-yellow-fg)",
+        green: "border-transparent bg-(--tag-green-bg) text-(--tag-green-fg)",
+        blue: "border-transparent bg-(--tag-blue-bg) text-(--tag-blue-fg)",
+        purple: "border-transparent bg-(--tag-purple-bg) text-(--tag-purple-fg)",
+        pink: "border-transparent bg-(--tag-pink-bg) text-(--tag-pink-fg)",
+        red: "border-transparent bg-(--tag-red-bg) text-(--tag-red-fg)",
       },
     },
     defaultVariants: {

package/src/components/data/table/index.tsx

@@ -14,15 +14,25 @@ const Table = React.forwardRef<
      * double border and a radius that doesn't match the parent's.
      */
     frame?: boolean
+    /**
+     * A database grid, as in Notion: no header band, hairline column dividers, 36px rows,
+     * regular-weight column labels. Pair with `frame={false}` on a page-level table.
+     */
+    grid?: boolean
   }
->(({ className, containerClassName, frame = true, ...props }, ref) => {
+>(({ className, containerClassName, frame = true, grid = false, ...props }, ref) => {
   // Scroll container. Cap its height via `containerClassName`
   // (e.g. "max-h-80") to get a scrollable body with a sticky header.
   const scroll = (
     <div className={cn("w-full overflow-auto", containerClassName)}>
       <table
         ref={ref}
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn(
+          "w-full caption-bottom text-sm",
+          grid &&
+            "[&_thead]:bg-transparent [&_th]:h-8 [&_th]:border-r [&_th]:border-divider [&_th]:font-normal [&_td]:h-9 [&_td]:border-r [&_td]:border-divider [&_td]:py-0 [&_th:last-child]:border-r-0 [&_td:last-child]:border-r-0",
+          className
+        )}
         {...props}
       />
     </div>

package/src/components/forms/button/index.tsx

@@ -11,7 +11,7 @@ import { Link } from '../../navigation/link';
 import { buttonSizeClass, CONTROL_SIZE } from '../control-size';
 
 const buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-(weight:--button-weight) transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -40,7 +40,7 @@ const buttonVariants = cva(
         xs: cn(buttonSizeClass('xs'), "rounded-[var(--radius-sm)]"),
         lg: cn(buttonSizeClass('lg'), "rounded-[var(--radius)]"),
         huge: cn(buttonSizeClass('huge'), "rounded-[var(--radius)]"),
-        icon: cn(CONTROL_SIZE.default.height, "w-9"),
+        icon: cn(CONTROL_SIZE.default.height, "w-(--control-h-default)"),
       },
       // Most variants ship a baked-in `shadow`/`shadow-sm` for a lifted look.
       // `elevated={false}` flattens that (e.g. controls grouped inside a card —

package/src/components/forms/control-size.ts

@@ -22,32 +22,32 @@ import { cn } from '../../lib/utils';
  */
 export const CONTROL_SIZE = {
   xs: {
-    height: 'h-7',
-    minHeight: 'min-h-7',
+    height: 'h-(--control-h-xs)',
+    minHeight: 'min-h-(--control-h-xs)',
     button: 'px-2 py-1 text-xs',
     field: 'px-2 py-0.5 text-xs',
   },
   sm: {
-    height: 'h-8',
-    minHeight: 'min-h-8',
+    height: 'h-(--control-h-sm)',
+    minHeight: 'min-h-(--control-h-sm)',
     button: 'px-3 text-sm',
     field: 'px-2.5 py-1 text-sm',
   },
   default: {
-    height: 'h-9',
-    minHeight: 'min-h-9',
+    height: 'h-(--control-h-default)',
+    minHeight: 'min-h-(--control-h-default)',
     button: 'px-4 py-2',
     field: 'px-3 py-1 text-base md:text-sm',
   },
   lg: {
-    height: 'h-11',
-    minHeight: 'min-h-11',
+    height: 'h-(--control-h-lg)',
+    minHeight: 'min-h-(--control-h-lg)',
     button: 'px-8',
     field: 'px-4 py-2 text-base',
   },
   huge: {
-    height: 'h-14',
-    minHeight: 'min-h-14',
+    height: 'h-(--control-h-huge)',
+    minHeight: 'min-h-(--control-h-huge)',
     button: 'px-10 text-lg',
   },
 } as const;

package/src/components/navigation/context-menu/index.tsx

@@ -28,7 +28,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-(--menu-item-px) py-(--menu-item-py) text-(length:--menu-font-size) outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -47,7 +47,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-[1400] min-w-32 overflow-hidden rounded-[var(--radius-popover)] border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-75 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-98 motion-reduce:data-[state=open]:animate-none",
+      "z-[1400] min-w-32 overflow-hidden rounded-[var(--radius-popover)] border bg-popover p-(--menu-padding) text-popover-foreground shadow-(--popup-shadow) data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-75 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-98 motion-reduce:data-[state=open]:animate-none",
       className
     )}
     {...props}
@@ -63,7 +63,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-[1400] max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-75 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-98 motion-reduce:data-[state=open]:animate-none",
+        "z-[1400] max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover p-(--menu-padding) text-popover-foreground shadow-(--popup-shadow) data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-75 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-98 motion-reduce:data-[state=open]:animate-none",
         className
       )}
       {...props}
@@ -85,7 +85,7 @@ const ContextMenuItem = React.forwardRef<
     ref={ref}
     data-variant={variant}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-(--menu-item-px) py-(--menu-item-py) text-(length:--menu-font-size) outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",
       "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&[data-variant=destructive]_svg]:text-destructive",
       inset && "pl-8",
@@ -103,7 +103,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] py-1 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] py-(--menu-item-py) pl-8 pr-2 text-(length:--menu-font-size) outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       "[&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
@@ -128,7 +128,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] py-1 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] py-(--menu-item-py) pl-8 pr-2 text-(length:--menu-font-size) outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       "[&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
@@ -153,7 +153,7 @@ const ContextMenuLabel = React.forwardRef<
   <ContextMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      "px-(--menu-item-px) py-(--menu-item-py) text-(length:--menu-label-font-size) font-(weight:--menu-label-weight) text-(color:--menu-label-color) text-foreground",
       inset && "pl-8",
       className
     )}

package/src/components/navigation/dropdown-menu/index.tsx

@@ -46,7 +46,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-(--menu-item-px) py-(--menu-item-py) text-(length:--menu-font-size) outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -71,7 +71,7 @@ const DropdownMenuSubContent = React.forwardRef<
       // and clip. `min()` of the space Radix measured to the viewport edge and a
       // comfortable ceiling — a menu that spans the WHOLE screen reads as a page,
       // not a menu, so we stop well short of the viewport even when it would fit.
-      "z-[1400] max-h-[min(var(--radix-dropdown-menu-content-available-height),24rem)] min-w-32 overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
+      "z-[1400] max-h-[min(var(--radix-dropdown-menu-content-available-height),24rem)] min-w-32 overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-(--menu-padding) text-popover-foreground shadow-(--popup-shadow) data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
       className
     )}
     {...props}
@@ -106,7 +106,7 @@ const DropdownMenuContent = React.forwardRef<
         // render behind it (reported: language list clipped under the dialog).
         // So the layer order is: sheet(200) < shell(1000/1001) < dialog(1300) <
         // popover(1400). A popover always belongs on top of its opener.
-        "z-[1400] max-h-[min(var(--radix-dropdown-menu-content-available-height),24rem)] min-w-32 overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-md",
+        "z-[1400] max-h-[min(var(--radix-dropdown-menu-content-available-height),24rem)] min-w-32 overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-(--menu-padding) text-popover-foreground shadow-(--popup-shadow)",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
         className
       )}
@@ -127,7 +127,7 @@ const DropdownMenuItem = React.forwardRef<
   }
 >(({ className, inset, href, variant = "default", children, ...props }, ref) => {
   const classes = cn(
-    "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1 text-sm outline-none transition-colors focus:bg-foreground/[0.07] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+    "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-(--menu-item-px) py-(--menu-item-py) text-(length:--menu-font-size) outline-none transition-colors focus:bg-foreground/[0.07] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
     "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive",
     inset && "pl-8",
     className
@@ -163,7 +163,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-(--menu-item-py) pl-8 pr-2 text-(length:--menu-font-size) outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -187,7 +187,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-(--menu-item-py) pl-8 pr-2 text-(length:--menu-font-size) outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -211,7 +211,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
+      "px-(--menu-item-px) py-(--menu-item-py) text-(length:--menu-label-font-size) font-(weight:--menu-label-weight) text-(color:--menu-label-color)",
       inset && "pl-8",
       className
     )}

package/src/components/navigation/menubar/index.tsx

@@ -76,7 +76,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-(--menu-item-px) py-(--menu-item-py) text-(length:--menu-font-size) outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -95,7 +95,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-[1400] min-w-32 overflow-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
+      "z-[1400] min-w-32 overflow-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-(--menu-padding) text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
       className
     )}
     {...props}
@@ -118,7 +118,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-[1400] min-w-48 overflow-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
+          "z-[1400] min-w-48 overflow-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-(--menu-padding) text-popover-foreground shadow-(--popup-shadow) data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
           className
         )}
         {...props}
@@ -139,7 +139,7 @@ const MenubarItem = React.forwardRef<
   }
 >(({ className, inset, href, variant = "default", children, ...props }, ref) => {
   const classes = cn(
-    "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-(--menu-item-px) py-(--menu-item-py) text-(length:--menu-font-size) outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
     "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive",
     inset && "pl-8",
     className
@@ -175,7 +175,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-(--menu-item-py) pl-8 pr-2 text-(length:--menu-font-size) outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
@@ -198,7 +198,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-(--menu-item-py) pl-8 pr-2 text-(length:--menu-font-size) outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -222,7 +222,7 @@ const MenubarLabel = React.forwardRef<
   <MenubarPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
+      "px-(--menu-item-px) py-(--menu-item-py) text-(length:--menu-label-font-size) font-(weight:--menu-label-weight) text-(color:--menu-label-color)",
       inset && "pl-8",
       className
     )}

package/src/components/overlay/popover/index.tsx

@@ -57,7 +57,7 @@ const PopoverContent = React.forwardRef<
       // (in the class list below) caps the whole panel to.
       collisionPadding={collisionPadding}
       className={cn(
-        "popover-panel z-[1400] w-72 rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
+        "popover-panel z-[1400] w-72 rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-4 text-popover-foreground shadow-(--popup-shadow) outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
         className
       )}
       {...props}

package/src/components/select/select.tsx

@@ -147,7 +147,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-[1400] max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
+        "relative z-[1400] max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl text-popover-foreground shadow-(--popup-shadow) data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]: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",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -158,7 +158,7 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
+          "p-(--menu-padding)",
           position === "popper" &&
             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
@@ -177,7 +177,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    className={cn("px-(--menu-item-px) py-(--menu-item-py) text-(length:--menu-label-font-size) font-(weight:--menu-label-weight) text-(color:--menu-label-color)", className)}
     {...props}
   />
 ))
@@ -202,7 +202,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     value={value === '' ? EMPTY_SENTINEL : value}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-[var(--radius-sm)] py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-[var(--radius-sm)] py-(--menu-item-py) pl-2 pr-8 text-(length:--menu-font-size) outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}

package/src/styles/css/base.css

@@ -60,6 +60,63 @@
   --font-size-xl: 1.125rem;
   --line-height-base: 1.5;
   --letter-spacing-base: 0em;
+
+  /* Menu tokens — one density for dropdown, context menu, menubar and select panels.
+   * Components read these; a preset changes them in one place (never per-component literals). */
+  /* Chat prose follows the theme scale (Notion: 14px / 1.5). widget-chat reads these two. */
+  /* Notion-style tag colours: a tinted fill with matching ink (Badge variants gray…red). */
+  --tag-gray-bg: #e3e2e0;
+  --tag-gray-fg: #32302c;
+  --tag-brown-bg: #eee0da;
+  --tag-brown-fg: #442a1e;
+  --tag-orange-bg: #fadec9;
+  --tag-orange-fg: #49290e;
+  --tag-yellow-bg: #fdecc8;
+  --tag-yellow-fg: #402c1b;
+  --tag-green-bg: #dbeddb;
+  --tag-green-fg: #1c3829;
+  --tag-blue-bg: #d3e5ef;
+  --tag-blue-fg: #183347;
+  --tag-purple-bg: #e8deee;
+  --tag-purple-fg: #412454;
+  --tag-pink-bg: #f5e0e9;
+  --tag-pink-fg: #4c2337;
+  --tag-red-bg: #ffe2dd;
+  --tag-red-fg: #5d1715;
+  /* The control height ladder every Button, Input and Select reads (control-size.ts). */
+  --control-h-xs: 1.75rem;
+  --control-h-sm: 2rem;
+  --control-h-default: 2.25rem;
+  --control-h-lg: 2.75rem;
+  --control-h-huge: 3.5rem;
+  --button-weight: 600;
+  /* PrivateLayout sidebar rows (desktop). */
+  --sidebar-item-h: 2.25rem;
+  --sidebar-item-font: var(--font-size-sm);
+  --sidebar-item-radius: 0.5rem;
+  --sidebar-divider-h: 1px;
+  /* Badge metrics. Defaults keep the compact label; a preset widens them to a 20px tag. */
+  --badge-radius: var(--radius);
+  --badge-px: 0.625rem;
+  --badge-py: 0.125rem;
+  --badge-font-size: 0.75rem;
+  --badge-weight: 600;
+  --chat-text: var(--font-size-base);
+  --chat-leading: 1.5;
+  /* Side-panel title (widget-chat header): small caps by default, plain sentence case in Notion. */
+  --panel-title-weight: 600;
+  --panel-title-tracking: 0.025em;
+  --panel-title-color: var(--muted-foreground);
+  --panel-title-transform: uppercase;
+  /* Shadow of every popup surface (menus, select, popover). */
+  --popup-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --menu-font-size: var(--font-size-sm);
+  --menu-label-font-size: var(--menu-font-size);
+  --menu-label-weight: 600;
+  --menu-label-color: inherit;
+  --menu-item-px: 0.5rem;
+  --menu-item-py: 0.375rem;
+  --menu-padding: 0.25rem;
 }
 
 /* Base element styles */
@@ -200,3 +257,25 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+/* Tag colours on a dark page: translucent tints, near-white ink. */
+.dark {
+  --tag-gray-bg: rgba(255,252,235,.306);
+  --tag-gray-fg: #f0efed;
+  --tag-brown-bg: rgba(210,160,120,.40);
+  --tag-brown-fg: #f0e6df;
+  --tag-orange-bg: rgba(255,146,60,.45);
+  --tag-orange-fg: #fbeadb;
+  --tag-yellow-bg: rgba(255,188,53,.46);
+  --tag-yellow-fg: #f9f3dc;
+  --tag-green-bg: rgba(113,255,175,.337);
+  --tag-green-fg: #e8f1ec;
+  --tag-blue-bg: rgba(81,166,255,.494);
+  --tag-blue-fg: #e5f2fc;
+  --tag-purple-bg: rgba(208,147,255,.427);
+  --tag-purple-fg: #f3ebf9;
+  --tag-pink-bg: rgba(255,133,192,.427);
+  --tag-pink-fg: #faE9f1;
+  --tag-red-bg: rgba(255,116,105,.525);
+  --tag-red-fg: #fce9e7;
+}

package/src/styles/css/presets/notion.css

@@ -0,0 +1,168 @@
+/* Authoritative static preset: notion.
+ *
+ * Measured from app.notion.com on 2026-11-06 (its `:root, .notion-light-theme`
+ * custom properties), not eyeballed from a screenshot:
+ *   canvas #fff · rail #f9f8f7 · hover #f0efed · hairline #e6e5e3
+ *   ink #2c2c2b · secondary ink #7d7a75 · accent blue #2783de
+ * Notion is neutral: no brand colour on surfaces, one blue for the single
+ * primary action, and a warm-grey hover. Everything else is ink on white.
+ */
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(60 1% 17%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(60 1% 17%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(60 1% 17%);
+  /* Notion's blue is #2783de (white on it: 3.9:1). One lightness step deeper
+     keeps white button labels at AA (4.6:1) while staying the same hue. */
+  --primary: hsl(209 74% 47%);
+  --primary-foreground: hsl(0 0% 100%);
+  /* #f9f8f7 — Notion's "secondary background". */
+  --secondary: hsl(30 14% 97%);
+  --secondary-foreground: hsl(60 1% 17%);
+  /* #f0efed. 6.5 points under the white page: a visible chip, not a plate. */
+  --muted: hsl(40 9% 93.5%);
+  /* #7d7a75 darkened one step: AA on white and on the muted fill. */
+  --muted-foreground: hsl(37 3% 43%);
+  --surface-hover: hsl(40 9% 95%);
+  /* Hover on the page: the same warm grey as Notion's row hover. */
+  --accent: hsl(40 9% 93.5%);
+  --accent-foreground: hsl(60 1% 17%);
+  /* #cf5148 text red, #e56458 fill red; deeper for white labels. */
+  --destructive: hsl(5 62% 48%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --on-destructive: hsl(0 0% 100%);
+  /* #e6e5e3 */
+  --border: hsl(40 6% 90%);
+  /* Notion fields are white with a hairline, not a grey plate. */
+  --input: hsl(0 0% 100%);
+  --divider: hsl(40 6% 92%);
+  --ring: hsl(209 74% 52%);
+  --overlay: hsl(0 0% 0% / 0.4);
+  --radius: 0.375rem;
+  --shadow-card: 0 0 0 1px rgb(15 15 15 / 0.05), 0 3px 6px rgb(15 15 15 / 0.1);
+  /* Notion's sidebar is #f9f8f7 under #fff content; its hover is a ~8% ink
+     veil, 5 points down. */
+  --sidebar-background: hsl(30 14% 97%);
+  --sidebar-foreground: hsl(60 1% 17%);
+  --sidebar-primary: hsl(209 74% 47%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(40 7% 92%);
+  --sidebar-accent-foreground: hsl(60 1% 17%);
+  --sidebar-border: hsl(40 6% 90%);
+  --sidebar-ring: hsl(209 74% 52%);
+  --code: hsl(30 14% 97%);
+  --code-foreground: hsl(60 1% 17%);
+  --code-border: hsl(40 6% 90%);
+  --code-inline: hsl(40 9% 93.5%);
+  --code-inline-foreground: hsl(5 62% 42%);
+  --chart-1: hsl(209 74% 52%);
+  --chart-2: hsl(147 30% 47%);
+  --chart-3: hsl(277 30% 55%);
+  --chart-4: hsl(31 65% 51%);
+  --chart-5: hsl(5 62% 59%);
+  /* Status tints are Notion's *BacPri / *TexPri / *BorPri triples. */
+  --warning: hsl(39 60% 51%);
+  --warning-background: hsl(52 70% 96%);
+  --warning-foreground: hsl(45 53% 26%);
+  --warning-border: hsl(46 66% 82%);
+  --success: hsl(147 30% 47%);
+  --success-background: hsl(147 20% 96%);
+  --success-foreground: hsl(147 33% 25%);
+  --success-border: hsl(147 22% 87%);
+  --destructive-background: hsl(0 55% 97%);
+  --destructive-border: hsl(5 70% 92%);
+  --info: hsl(209 74% 52%);
+  --info-background: hsl(209 80% 97%);
+  --info-foreground: hsl(209 50% 29%);
+  --info-border: hsl(209 75% 91%);
+  /* Notion types in the system UI stack, 14px, with a 1.5 leading. */
+  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
+  --font-size-base: 0.875rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-xs: 0.75rem;
+  --line-height-base: 1.5;
+  /* Notion's menus: 14px type, 28px rows (4px vertical padding), 4px panel padding. */
+  /* Notion AI: messages 14px / 20px. */
+  /* Notion's controls are flat: the hairline does the work, no drop shadow. */
+  --shadow: 0 0 #0000;
+  --shadow-xs: 0 0 #0000;
+  --shadow-sm: 0 0 #0000;
+  /* Notion's controls are 24/28/32px, 14px type at weight 500. */
+  --control-h-xs: 1.5rem;
+  --control-h-sm: 1.75rem;
+  --control-h-default: 2rem;
+  --control-h-lg: 2.5rem;
+  --button-weight: 500;
+  /* Notion's sidebar row: 30px, 14px type, 6px corner. */
+  --sidebar-item-h: 1.875rem;
+  --sidebar-item-font: var(--font-size-base);
+  --sidebar-item-radius: 0.375rem;
+  /* Notion separates sidebar groups by space, not by a rule. */
+  --sidebar-divider-h: 0px;
+  /* Notion's top bar is 44px. */
+  --panel-header-h: 2.75rem;
+  /* Notion tags: 20px, 4px corner, 14px regular. */
+  --badge-radius: 0.25rem;
+  --badge-px: 0.375rem;
+  --badge-py: 0;
+  --badge-font-size: 0.875rem;
+  --badge-weight: 400;
+  --chat-text: var(--font-size-base);
+  --chat-leading: 1.5;
+  /* The AI composer is a raised 1px-ringed card (#202020 on #191919 in dark). */
+  --chat-composer-bg: var(--card);
+  --chat-composer-radius: 0.75rem;
+  --chat-composer-button-radius: 9999px;
+  --chat-composer-ring-w: 1px;
+  --chat-composer-ring: var(--border);
+  --chat-composer-ring-focus: var(--ring);
+  --panel-title-weight: 500;
+  --panel-title-tracking: 0;
+  --panel-title-color: var(--foreground);
+  --panel-title-transform: none;
+  --menu-font-size: var(--font-size-base);
+  /* Menu section labels: 12px / 500 in the muted ink. */
+  --menu-label-font-size: var(--font-size-xs);
+  --menu-label-weight: 500;
+  --menu-label-color: var(--muted-foreground);
+  --radius-popover: 0.625rem;
+  --popup-shadow: 0 0 0 1px rgb(15 15 15 / 0.05), 0 3px 6px rgb(15 15 15 / 0.1), 0 9px 24px rgb(15 15 15 / 0.2);
+  --menu-item-px: 0.5rem;
+  --menu-item-py: 0.25rem;
+  --menu-padding: 0.25rem;
+}
+
+/* Notion dark (#191919 page, #202020 rail, #2f2f2f hairline). */
+.dark {
+  --background: hsl(0 0% 10%);
+  --foreground: hsl(40 9% 93.5%);
+  --card: hsl(0 0% 12%);
+  --card-foreground: hsl(40 9% 93.5%);
+  --popover: hsl(0 0% 15%);
+  --popover-foreground: hsl(40 9% 93.5%);
+  --primary: hsl(209 74% 52%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 81%);
+  --muted: hsl(0 0% 15%);
+  --muted-foreground: hsl(0 0% 60%);
+  --accent: hsl(0 0% 17%);
+  --accent-foreground: hsl(0 0% 90%);
+  --border: hsl(0 0% 18%);
+  --input: hsl(0 0% 18%);
+  --divider: hsl(0 0% 15%);
+  --ring: hsl(209 74% 52%);
+  --sidebar-background: hsl(0 0% 12.5%);
+  --sidebar-foreground: hsl(0 0% 81%);
+  --sidebar-primary: hsl(209 74% 52%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(0 0% 17%);
+  --sidebar-accent-foreground: hsl(0 0% 90%);
+  --sidebar-border: hsl(0 0% 18%);
+  --sidebar-ring: hsl(209 74% 52%);
+  --chart-1: hsl(209 74% 58%);
+  /* Dark popups: a 1px #383836 ring plus a soft drop. */
+  --popup-shadow: 0 0 0 1px hsl(60 2% 22%), 0 14px 28px -6px rgb(0 0 0 / 0.2), 0 2px 4px -1px rgb(0 0 0 / 0.12);
+}

package/src/styles/css/theme/dark.css

@@ -19,21 +19,21 @@
    * panels and menus read as raised. muted recesses below the page.
    *   page ≈ bg-100   card ≈ bg-000(18.4%)   popover 18.8% (claude.ai menus) */
   --background: hsl(0 0% 10%);
-  --foreground: hsl(0 0% 97.6%);
-  --card: hsl(0 0% 13%);
-  --card-foreground: hsl(0 0% 97.6%);
-  --popover: hsl(0 0% 18.8%);
-  --popover-foreground: hsl(0 0% 97.6%);
+  --foreground: hsl(0 0% 81%);
+  --card: hsl(0 0% 12%);
+  --card-foreground: hsl(0 0% 81%);
+  --popover: hsl(0 0% 15%);
+  --popover-foreground: hsl(0 0% 81%);
   /* Brand clay #d97757 (Claude). Bright enough on dark chrome to carry the full swatch. */
-  --primary: hsl(15 63% 60%);
+  --primary: hsl(209 74% 52%);
   /* Dark label on clay — 5.8:1, stronger than white-on-clay (3.1:1) */
-  --primary-foreground: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 100%);
   /* Secondary: elevated warm-gray control surface + light label */
-  --secondary: hsl(0 0% 17%);
-  --secondary-foreground: hsl(0 0% 97.6%);
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 81%);
   /* Recessed surface — below the page (Claude bg-200), for input rest / chips. */
-  --muted: hsl(0 0% 8%);
-  --muted-foreground: hsl(0 0% 62%);
+  --muted: hsl(0 0% 15%);
+  --muted-foreground: hsl(0 0% 60%);
   /* Neutral interaction surface: a quiet lift above the current dark page. */
   --surface-hover: color-mix(in oklab, var(--card) 96%, var(--foreground));
   /* The counterpart to --surface-hover: a surface that reads as sunk BELOW the
@@ -49,8 +49,8 @@
    * and composites over whatever surface the band happens to sit on. */
   --surface-recessed: rgb(0 0 0 / 0.35);
   /* Hover/active surface (rails, menus, tabs) — a quiet warm lift above the page. */
-  --accent: hsl(0 0% 15.5%);
-  --accent-foreground: hsl(0 0% 97.6%);
+  --accent: hsl(0 0% 17%);
+  --accent-foreground: hsl(0 0% 90%);
   --destructive: hsl(0 67% 60%);
   --destructive-foreground: hsl(0 0% 98%);
   /* Soft warm border — Claude draws hairlines from a light border at low
@@ -61,7 +61,7 @@
      Capped by MAXIMUM_BORDER_GAP in check-preset-contrast.mjs. */
   --border: hsl(0 0% 18%);
   /* Input surface — a notch above card so fields read as raised controls. */
-  --input: hsl(0 0% 17%);
+  --input: hsl(0 0% 18%);
   /* Divider — TRANSLUCENT hairline (Apple-style): a light warm-gray at low alpha
    * that dissolves into whatever sits behind it, so structural separators
    * (columns, headers, rows) stay quiet on the dark page instead of reading as a
@@ -72,12 +72,12 @@
      left of "кондово" after the fills were calmed. Over a 12% card this
      lands at 15.4% (step 3.4) against the border's 18% (step 6.0): a clear
      hierarchy, frame first. */
-  --divider: hsl(0 0% 100% / 0.08);
+  --divider: hsl(0 0% 15%);
   /* Overlay — modal scrim / backdrop behind dialogs, drawers, sheets. Black in
    * both themes; slightly darker here so it still reads on the dark page. */
   --overlay: hsl(0 0% 0% / 0.7);
   /* Focus ring — blue (system-accent feel), independent of the cyan brand. */
-  --ring: hsl(217 91% 60%);
+  --ring: hsl(209 74% 52%);
   --shadow-card: none;
 
   /* Code surface — see light.css for the rationale. On dark we want
@@ -94,13 +94,13 @@
    * block; rail and page share one tone). A hair darker than --background for
    * subtle separation, not a hard black slab. */
   --sidebar-background: hsl(0 0% 12.5%);
-  --sidebar-foreground: hsl(0 0% 97.6%);
-  --sidebar-primary: hsl(15 63% 60%);
-  --sidebar-primary-foreground: hsl(0 0% 9%);
-  --sidebar-accent: hsl(0 0% 19%);
-  --sidebar-accent-foreground: hsl(0 0% 97.6%);
+  --sidebar-foreground: hsl(0 0% 81%);
+  --sidebar-primary: hsl(209 74% 52%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(0 0% 17%);
+  --sidebar-accent-foreground: hsl(0 0% 90%);
   --sidebar-border: hsl(0 0% 18%);
-  --sidebar-ring: hsl(217 91% 60%);
+  --sidebar-ring: hsl(209 74% 52%);
   /* ── Status surfaces (dark) ──────────────────────────────────────
    * Dark variants: dim backgrounds (~8-12% lightness) so banners
    * don't blow out against the near-black page. Foreground raised
@@ -148,7 +148,7 @@
   /* Chart colors — chart-1 aligned with brand.
    * Fully-wrapped hsl() like every other token (consume via `bg-chart-N` or
    * `var(--chart-N)`, never `hsl(var(--chart-N))`). */
-  --chart-1: hsl(15 63% 60%);
+  --chart-1: hsl(209 74% 58%);
   --chart-2: hsl(142 76% 36%);
   --chart-3: hsl(262 83% 58%);
   --chart-4: hsl(26 90% 57%);

package/src/styles/css/theme/light.css

@@ -1,13 +1,8 @@
 /**
- * Light Theme Colors
+ * Light Theme Colors — Notion-neutral (retuned 2026-11-06 from app.notion.com's own custom properties).
  *
- * Brand: Claude "clay" #d97757 (hsl 14.77 63% 60%). On **white** the 60% swatch with a white label
- * fails contrast, so `:root` `--primary` uses a deeper clay (`hsl 15 55% 45%`, white-on-fill 5.0:1 AA)
- * for buttons, links, and `text-primary`. The full-brightness clay is reserved for brand marks / dark
- * UI; the dark theme carries the brighter swatch via `.dark`.
- *
- * Neutrals follow Claude's current theme: a faintly WARM off-white canvas (hue ~60, not pure gray) so
- * cards and chips read against the page the way they do on claude.ai.
+ * White canvas, #f9f8f7 rail, warm-grey hover, one blue for the primary action. The previous Claude "clay"
+ * brand orange is gone from surfaces; the `notion` preset is a pinned copy of these values for side-by-side checks.
  *
  * Pairs `--primary` / `--primary-foreground` are tuned together. Prefer editing tokens over ad hoc classes.
  */
@@ -17,23 +12,23 @@
    * fills and a white raised card. Keep `muted` below `background` in light mode
    * so chips, message bubbles, and secondary controls never dissolve into the
    * page. */
-  --background: hsl(60 14% 97%);
-  --foreground: hsl(0 0% 7.5%);
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(60 1% 17%);
   --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 7.5%);
+  --card-foreground: hsl(60 1% 17%);
   --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 7.5%);
+  --popover-foreground: hsl(60 1% 17%);
   /* Interactive primary on white — deep clay (~#b6543a): readable white-on-fill (5.0:1) + calmer than the brand swatch */
-  --primary: hsl(15 55% 45%);
+  --primary: hsl(209 74% 47%);
   --primary-foreground: hsl(0 0% 100%);
-  --secondary: hsl(0 0% 7.5%);
-  --secondary-foreground: hsl(60 14% 97%);
-  --muted: hsl(52 12% 93%);
-  --muted-foreground: hsl(48 3% 46%);
+  --secondary: hsl(30 14% 97%);
+  --secondary-foreground: hsl(60 1% 17%);
+  --muted: hsl(40 9% 93.5%);
+  --muted-foreground: hsl(37 3% 43%);
   /* Neutral interaction surface: a quiet step below the current light canvas.
    * It deliberately keys off --background, not white --card, so hover remains
    * visible on translucent menus and on plain pages alike. */
-  --surface-hover: color-mix(in oklab, var(--background) 96%, var(--foreground));
+  --surface-hover: hsl(40 9% 95%);
   /* The counterpart to --surface-hover: a surface that reads as sunk BELOW the
    * page. A translucent black for the same reason as the dark theme's, but much
    * weaker: the same overlay costs far more contrast on a near-white ground,
@@ -41,23 +36,23 @@
   --surface-recessed: rgb(0 0 0 / 0.045);
   /* Neutral hover/active surface — quiet warm-gray lift (Claude bg-200), a
    * clear step (≥4L) below the 97% canvas. */
-  --accent: hsl(60 11% 92%);
-  --accent-foreground: hsl(0 0% 7.5%);
+  --accent: hsl(40 9% 93.5%);
+  --accent-foreground: hsl(60 1% 17%);
   /* Destructive — Claude danger-100 hsl(0 61% 52%). Slightly deeper for a solid
    * white-on-fill AA pass. */
-  --destructive: hsl(0 61% 50%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(50 10% 86%);
+  --destructive: hsl(5 62% 48%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --border: hsl(40 6% 90%);
   /* Input surface — faint warm fill so fields are visible on white cards. */
-  --input: hsl(60 14% 97%);
+  --input: hsl(40 6% 90%);
   /* Divider — hairline between rows; slightly darker than --border so it reads
    * on white cards. */
-  --divider: hsl(50 9% 87%);
+  --divider: hsl(40 6% 92%);
   /* Overlay — modal scrim / backdrop behind dialogs, drawers, sheets. A scrim
    * is black in both themes; the token owns the opacity. */
-  --overlay: hsl(0 0% 0% / 0.6);
+  --overlay: hsl(0 0% 0% / 0.4);
   /* Focus ring — blue (system-accent feel), independent of the cyan brand. */
-  --ring: hsl(217 91% 55%);
+  --ring: hsl(209 74% 52%);
   --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
 
   /* Code surface — used by markdown code fences, terminal blocks,
@@ -70,23 +65,23 @@
    * for body legibility. Border keeps the panel anchored.
    * Inline code shares the same surface for chip-on-chip cohesion.
    */
-  --code: hsl(0 0% 96%);
-  --code-foreground: hsl(0 0% 12%);
-  --code-border: hsl(0 0% 88%);
-  --code-inline: hsl(0 0% 93%);
-  --code-inline-foreground: hsl(0 0% 14%);
+  --code: hsl(30 14% 97%);
+  --code-foreground: hsl(60 1% 17%);
+  --code-border: hsl(40 6% 90%);
+  --code-inline: hsl(40 9% 93.5%);
+  --code-inline-foreground: hsl(5 62% 42%);
   /* Sidebar Light Theme — warm off-white, same family as the page (Claude keeps
    * rail and page in one tone). */
-  --sidebar-background: hsl(60 14% 96%);
-  --sidebar-foreground: hsl(0 0% 7.5%);
-  --sidebar-primary: hsl(15 55% 45%);
+  --sidebar-background: hsl(30 14% 97%);
+  --sidebar-foreground: hsl(60 1% 17%);
+  --sidebar-primary: hsl(209 74% 47%);
   --sidebar-primary-foreground: hsl(0 0% 100%);
   /* 90%, a clear (≥4L) step below the 96% rail — hover stays visible. See the
      2026-08-03 note: the dark pair steps ~12 points, so light must step too. */
-  --sidebar-accent: hsl(52 12% 90%);
-  --sidebar-accent-foreground: hsl(0 0% 7.5%);
-  --sidebar-border: hsl(50 10% 89%);
-  --sidebar-ring: hsl(217 91% 55%);
+  --sidebar-accent: hsl(40 7% 92%);
+  --sidebar-accent-foreground: hsl(60 1% 17%);
+  --sidebar-border: hsl(40 6% 90%);
+  --sidebar-ring: hsl(209 74% 52%);
   /* ── Status surfaces ─────────────────────────────────────────────
    * Each status has 4 tokens: icon/accent color, page background,
    * readable foreground text, and border ring.
@@ -100,23 +95,23 @@
    * ─────────────────────────────────────────────────────────────── */
 
   /* Warning — amber */
-  --warning: hsl(38 92% 50%);
-  --warning-background: hsl(48 100% 96%);
-  --warning-foreground: hsl(26 90% 25%);
-  --warning-border: hsl(38 70% 65%);
+  --warning: hsl(39 60% 51%);
+  --warning-background: hsl(52 70% 96%);
+  --warning-foreground: hsl(45 53% 26%);
+  --warning-border: hsl(46 66% 82%);
   /* Success — green */
-  --success: hsl(142 71% 45%);
-  --success-background: hsl(138 76% 97%);
-  --success-foreground: hsl(140 60% 20%);
-  --success-border: hsl(142 60% 65%);
+  --success: hsl(147 30% 47%);
+  --success-background: hsl(147 20% 96%);
+  --success-foreground: hsl(147 33% 25%);
+  --success-border: hsl(147 22% 87%);
   /* Destructive surface (separate from the filled button token) */
-  --destructive-background: hsl(0 100% 97%);
-  --destructive-border: hsl(0 84% 70%);
+  --destructive-background: hsl(0 55% 97%);
+  --destructive-border: hsl(5 70% 92%);
   /* Info — blue-cyan (brand-adjacent) */
-  --info: hsl(200 90% 40%);
-  --info-background: hsl(200 100% 97%);
-  --info-foreground: hsl(200 80% 20%);
-  --info-border: hsl(200 80% 65%);
+  --info: hsl(209 74% 52%);
+  --info-background: hsl(209 80% 97%);
+  --info-foreground: hsl(209 50% 29%);
+  --info-border: hsl(209 75% 91%);
 
   /* On-fill text/icon — readable color sitting ON the solid `*` fill
    * (badges, unread pills, filled chips), distinct from the `*-foreground`
@@ -129,16 +124,16 @@
   --on-success: hsl(0 0% 9%);
   --on-warning: hsl(0 0% 9%);
   --on-info: hsl(0 0% 9%);
-  --on-destructive: hsl(0 0% 9%);
+  --on-destructive: hsl(0 0% 100%);
   /* Surface gradient */
   --surface-gradient: linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--background) 80%, transparent));
 
   /* Chart colors — chart-1 aligned with brand hue.
    * Fully-wrapped hsl() like every other token (consume via `bg-chart-N` or
    * `var(--chart-N)`, never `hsl(var(--chart-N))`). */
-  --chart-1: hsl(15 55% 45%);
-  --chart-2: hsl(142 76% 36%);
-  --chart-3: hsl(262 83% 58%);
-  --chart-4: hsl(26 90% 57%);
-  --chart-5: hsl(346 77% 50%);
+  --chart-1: hsl(209 74% 52%);
+  --chart-2: hsl(147 30% 47%);
+  --chart-3: hsl(277 30% 55%);
+  --chart-4: hsl(31 65% 51%);
+  --chart-5: hsl(5 62% 59%);
 }

package/src/styles/presets/presets.ts

@@ -3,6 +3,7 @@ import type { ThemeStylePresetId } from './types';
 export const THEME_STYLE_PRESET_ORDER = [
   'default',
   'django-cfg',
+  'notion',
   'ios',
   'macos',
   'windows',

package/src/styles/presets/types.ts

@@ -13,4 +13,5 @@ export type ThemeStylePresetId =
   | 'windows'
   | 'soft'
   | 'dense'
-  | 'high-contrast';
+  | 'high-contrast'
+  | 'notion';