@ashwa-io/ui 0.0.4 → 0.0.6

package/dist/components/ui/input-group.js

@@ -0,0 +1,63 @@
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+// src/components/ui/input-group.tsx
+const InputGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group border-input has-disabled:bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		...props
+	});
+};
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+const InputGroupAddon = ({ className, align = "inline-start", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+};
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+const InputGroupButton = ({ className, type = "button", variant = "ghost", size = "xs", ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+};
+const InputGroupInput = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+};
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput };

package/dist/components/ui/popover.js

@@ -0,0 +1,32 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Popover } from "@base-ui/react/popover";
+// src/components/ui/popover.tsx
+const Popover$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+};
+const PopoverTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+};
+const PopoverContent = ({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"data-slot": "popover-content",
+			className: cn("bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100", className),
+			...props
+		})
+	}) });
+};
+export { Popover$1 as Popover, PopoverContent, PopoverTrigger };

package/dist/components/ui/tooltip.js

@@ -0,0 +1,39 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/components/ui/tooltip.tsx
+const TooltipProvider = ({ delay = 0, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+};
+const Tooltip$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		"data-slot": "tooltip",
+		...props
+	});
+};
+const TooltipTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+};
+const TooltipContent = ({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+			"data-slot": "tooltip-content",
+			className: cn("bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })]
+		})
+	}) });
+};
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/index.d.ts

@@ -19,6 +19,8 @@ import "./components/atomic/TextArea/index.js";
 import { TextArea, TextAreaProps } from "./components/atomic/TextArea/TextArea.js";
 import "./components/atomic/TextInput/index.js";
 import { TextInput, TextInputProps, TextInputType } from "./components/atomic/TextInput/TextInput.js";
+import "./components/atomic/Tooltip/index.js";
+import { Tooltip, TooltipProps } from "./components/atomic/Tooltip/Tooltip.js";
 import "./components/atomic/IconButton/index.js";
 import { IconButton, IconButtonProps, IconButtonVariant } from "./components/atomic/IconButton/IconButton.js";
 import "./components/atomic/Select/index.js";
@@ -29,9 +31,29 @@ import "./components/atomic/Spinner/index.js";
 import { Spinner, SpinnerProps } from "./components/atomic/Spinner/Spinner.js";
 import "./components/layout/FormLayout/index.js";
 import { FormLayout, FormLayoutDirection, FormLayoutProps } from "./components/layout/FormLayout/FormLayout.js";
+import "./components/molecule/ConfirmDialog/index.js";
+import { ConfirmDialog, ConfirmDialogProps } from "./components/molecule/ConfirmDialog/ConfirmDialog.js";
+import "./components/molecule/DropdownMenu/index.js";
+import { DropdownMenu, DropdownMenuProps, MenuItem } from "./components/molecule/DropdownMenu/DropdownMenu.js";
+import "./components/molecule/FacetFilter/index.js";
+import { FacetOption } from "./components/molecule/FacetFilter/FacetList.js";
+import { FacetFilter, FacetFilterProps } from "./components/molecule/FacetFilter/FacetFilter.js";
+import "./components/molecule/FacetFilterSelect/index.js";
+import { FacetFilterSelect, FacetFilterSelectProps } from "./components/molecule/FacetFilterSelect/FacetFilterSelect.js";
+import "./components/molecule/FacetFilterNumber/index.js";
+import { FacetFilterNumber, FacetFilterNumberProps, NumberCondition, NumberFilterValue } from "./components/molecule/FacetFilterNumber/FacetFilterNumber.js";
+import "./components/molecule/FilterMenu/index.js";
+import { FilterCategory, FilterMenu, FilterMenuProps, FilterMenuValue } from "./components/molecule/FilterMenu/FilterMenu.js";
 import "./components/molecule/FormField/index.js";
 import { FormField, FormFieldControlProps, FormFieldProps } from "./components/molecule/FormField/FormField.js";
+import "./components/molecule/Modal/index.js";
+import { Modal, ModalProps, ModalSize } from "./components/molecule/Modal/Modal.js";
+import "./components/molecule/Popover/index.js";
+import { Popover, PopoverProps, PopoverWidth } from "./components/molecule/Popover/Popover.js";
+import "./components/molecule/Toaster/index.js";
+import { ToastOptions, toast } from "./components/molecule/Toaster/toast.js";
+import { Toaster } from "./components/molecule/Toaster/Toaster.js";
 import "./components/layout/Stack/index.js";
 import { HStack, HStackProps, Stack, StackAlign, StackGap, StackJustify, StackProps, VStack, VStackProps } from "./components/layout/Stack/Stack.js";
-import { FieldBaseProps, IconComponent, Size, Tone } from "./lib/types.js";
-export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, Divider, type DividerProps, type FieldBaseProps, FormField, type FormFieldControlProps, type FormFieldProps, FormLayout, type FormLayoutDirection, type FormLayoutProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, Select, type SelectOption, type SelectProps, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextInputType, type TextProps, type TextSize, type TextTone, type TextWeight, type Tone, VStack, type VStackProps };
+import { FieldBaseProps, IconComponent, OverlayAlign, OverlaySide, Size, Tone } from "./lib/types.js";
+export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, ConfirmDialog, type ConfirmDialogProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuProps, FacetFilter, FacetFilterNumber, type FacetFilterNumberProps, type FacetFilterProps, FacetFilterSelect, type FacetFilterSelectProps, type FacetOption, type FieldBaseProps, type FilterCategory, FilterMenu, type FilterMenuProps, type FilterMenuValue, FormField, type FormFieldControlProps, type FormFieldProps, FormLayout, type FormLayoutDirection, type FormLayoutProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, type MenuItem, Modal, type ModalProps, type ModalSize, type NumberCondition, type NumberFilterValue, type OverlayAlign, type OverlaySide, Popover, type PopoverProps, type PopoverWidth, Select, type SelectOption, type SelectProps, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextInputType, type TextProps, type TextSize, type TextTone, type TextWeight, type ToastOptions, Toaster, type Tone, Tooltip, type TooltipProps, VStack, type VStackProps, toast };

package/dist/index.js

@@ -8,11 +8,22 @@ import { Switch } from "./components/atomic/Switch/Switch.js";
 import { Text } from "./components/atomic/Text/Text.js";
 import { TextArea } from "./components/atomic/TextArea/TextArea.js";
 import { TextInput } from "./components/atomic/TextInput/TextInput.js";
+import { Tooltip } from "./components/atomic/Tooltip/Tooltip.js";
 import { IconButton } from "./components/atomic/IconButton/IconButton.js";
 import { Select } from "./components/atomic/Select/Select.js";
 import { Skeleton } from "./components/atomic/Skeleton/Skeleton.js";
 import { Spinner } from "./components/atomic/Spinner/Spinner.js";
 import { FormLayout } from "./components/layout/FormLayout/FormLayout.js";
+import { ConfirmDialog } from "./components/molecule/ConfirmDialog/ConfirmDialog.js";
+import { DropdownMenu } from "./components/molecule/DropdownMenu/DropdownMenu.js";
+import { FacetFilter } from "./components/molecule/FacetFilter/FacetFilter.js";
+import { FacetFilterSelect } from "./components/molecule/FacetFilterSelect/FacetFilterSelect.js";
+import { FacetFilterNumber } from "./components/molecule/FacetFilterNumber/FacetFilterNumber.js";
+import { FilterMenu } from "./components/molecule/FilterMenu/FilterMenu.js";
 import { FormField } from "./components/molecule/FormField/FormField.js";
+import { Modal } from "./components/molecule/Modal/Modal.js";
+import { Popover } from "./components/molecule/Popover/Popover.js";
+import { toast } from "./components/molecule/Toaster/toast.js";
+import { Toaster } from "./components/molecule/Toaster/Toaster.js";
 import { HStack, Stack, VStack } from "./components/layout/Stack/Stack.js";
-export { Badge, Button, Checkbox, ColorInput, Divider, FormField, FormLayout, HStack, Heading, IconButton, Select, Skeleton, Spinner, Stack, Switch, Text, TextArea, TextInput, VStack };
+export { Badge, Button, Checkbox, ColorInput, ConfirmDialog, Divider, DropdownMenu, FacetFilter, FacetFilterNumber, FacetFilterSelect, FilterMenu, FormField, FormLayout, HStack, Heading, IconButton, Modal, Popover, Select, Skeleton, Spinner, Stack, Switch, Text, TextArea, TextInput, Toaster, Tooltip, VStack, toast };

package/dist/lib/types.d.ts

@@ -2,6 +2,10 @@ import React from "react";
 /** Shared size scale for every public component. */
 export type Size = 'sm' | 'md' | 'lg';
 export type Tone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
+/** Which side of the trigger an overlay opens on. */
+export type OverlaySide = 'top' | 'bottom' | 'left' | 'right';
+/** How an overlay lines up with its trigger along that side. */
+export type OverlayAlign = 'start' | 'center' | 'end';
 /** An icon component (lucide-react, svgr): the design system controls its size and colour. */
 export type IconComponent = React.ComponentType<{
   className?: string;

package/dist/theme/brandTheme.d.ts

@@ -1,4 +1,4 @@
-export declare const DEFAULT_BRAND_HEX = "#8750f6";
+export declare const DEFAULT_BRAND_HEX = "#8556ef";
 export type BrandWarning = 'adjusted' | 'near-destructive' | 'invalid';
 export interface BrandTokens {
   '--brand': string;

package/dist/theme/brandTheme.js

@@ -4,7 +4,7 @@ useMode(modeRgb);
 useMode(modeLrgb);
 useMode(modeOklab);
 useMode(modeOklch);
-const DEFAULT_BRAND_HEX = "#8750f6";
+const DEFAULT_BRAND_HEX = "#8556ef";
 const SURFACES = {
 	light: [{
 		mode: "oklch",
@@ -13,12 +13,14 @@ const SURFACES = {
 	}],
 	dark: [{
 		mode: "oklch",
-		l: .145,
-		c: 0
+		l: .141,
+		c: .005,
+		h: 285.823
 	}, {
 		mode: "oklch",
-		l: .205,
-		c: 0
+		l: .21,
+		c: .006,
+		h: 285.885
 	}]
 };
 const DIRECTION = {
@@ -48,7 +50,7 @@ const BLACK = {
 	c: 0
 };
 const MIN_UI_CONTRAST = 3;
-const MIN_TEXT_CONTRAST = 4.5;
+const MIN_TEXT_CONTRAST = 4.55;
 const LIGHTNESS_STEP = .005;
 const MAX_STEPS = 200;
 const WHITE_LABEL_MAX_STEPS = 10;
@@ -137,10 +139,10 @@ const parseBrand = (hex) => {
 };
 /** Brand tokens for light and dark from one org hex. Never throws; bad input → default. */
 const brandTheme = (hex) => {
-	const input = parseBrand(hex ?? "#8750f6");
+	const input = parseBrand(hex ?? "#8556ef");
 	if (input) return buildTheme(input);
 	return {
-		...buildTheme(parseBrand("#8750f6") ?? BLACK),
+		...buildTheme(parseBrand("#8556ef") ?? BLACK),
 		warnings: ["invalid"]
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashwa-io/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Ashwa design system: locked React components on shadcn/ui (Base UI) and Tailwind v4, with per-org brand theming.",
   "license": "MIT",
   "type": "module",
@@ -102,6 +102,7 @@
     "class-variance-authority": "^0.7.1",
     "cn": "^0.5.2",
     "culori": "^4.0.2",
+    "sonner": "^2.0.8",
     "tw-animate-css": "^1.4.0"
   }
 }

package/src/styles/index.css

@@ -64,27 +64,27 @@
 :root {
   /* Brand group: defaults = brandTheme(DEFAULT_BRAND_HEX). Per-org values come from
      brandThemeCss(hex) in @ashwa-io/ui/theme, injected at runtime, and outrank these. */
-  --brand: oklch(0.585 0.233 293);
+  --brand: oklch(0.586 0.218 292.5);
   --brand-foreground: oklch(1 0 0);
-  --brand-text: oklch(0.585 0.233 293);
-  --brand-tint: oklch(0.965 0.018 293);
-  --brand-tint-foreground: oklch(0.565 0.233 293);
-  --brand-map: #8750f6;
+  --brand-text: oklch(0.586 0.218 292.5);
+  --brand-tint: oklch(0.965 0.018 292.5);
+  --brand-tint-foreground: oklch(0.561 0.218 292.5);
+  --brand-map: #8556ef;
 
   --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
   --primary: var(--brand);
   --primary-foreground: var(--brand-foreground);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
   /* Tailwind red-700, darker than base-nova's red-600: destructive text on its 10% tint
      (Button destructive) must reach WCAG AA 4.5:1; red-600 only reached 4:1. */
   --destructive: oklch(0.505 0.213 27.518);
@@ -93,58 +93,60 @@
   --success: oklch(0.448 0.119 151.328);
   --warning: oklch(0.473 0.137 46.201);
   --info: oklch(0.488 0.243 264.376);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
   --ring: var(--brand);
   --chart-1: var(--brand);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
   --radius: 0.5rem;
   --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
   --sidebar-primary: var(--brand);
   --sidebar-primary-foreground: var(--brand-foreground);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: var(--brand);
 }
 
 .dark {
-  --brand: oklch(0.585 0.233 293);
+  --brand: oklch(0.586 0.218 292.5);
   --brand-foreground: oklch(1 0 0);
-  --brand-text: oklch(0.625 0.223 293);
-  --brand-tint: oklch(0.3 0.04 293);
-  --brand-tint-foreground: oklch(0.685 0.183 293);
-  --brand-map: #8750f6;
+  --brand-text: oklch(0.626 0.218 292.5);
+  --brand-tint: oklch(0.3 0.04 292.5);
+  --brand-tint-foreground: oklch(0.686 0.181 292.5);
+  --brand-map: #8556ef;
 
-  --background: oklch(0.145 0 0);
+  --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.21 0.006 285.885);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
+  --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.269 0 0);
+  --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
+  /* Lighter than nigam's red-400: destructive text on its 20% tint must reach 4.5:1 on dialog
+     footers (red-400 only reached 4.2). */
+  --destructive: oklch(0.76 0.191 22.216);
   --success: oklch(0.792 0.209 151.711);
   --warning: oklch(0.828 0.189 84.429);
   --info: oklch(0.707 0.165 254.624);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
 }