@ashwa-io/ui 0.0.3 → 0.0.5

package/dist/components/ui/select.js

@@ -0,0 +1,75 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import "react";
+import { Select } from "@base-ui/react/select";
+// src/components/ui/select.tsx
+const Select$1 = Select.Root;
+const SelectValue = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		"data-slot": "select-value",
+		className: cn("flex flex-1 text-left", className),
+		...props
+	});
+};
+const SelectTrigger = ({ className, size = "default", children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" }) })]
+	});
+};
+const SelectContent = ({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		alignItemWithTrigger,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Select.Popup, {
+			"data-slot": "select-content",
+			"data-align-trigger": alignItemWithTrigger,
+			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 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(Select.List, { children }),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+};
+const SelectItem = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		"data-slot": "select-item",
+		className: cn("focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
+			children
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+};
+const SelectScrollUpButton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+	});
+};
+const SelectScrollDownButton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+	});
+};
+export { Select$1 as Select, SelectContent, SelectItem, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue };

package/dist/components/ui/switch.js

@@ -0,0 +1,18 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+// src/components/ui/switch.tsx
+const Switch$1 = ({ className, size = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": "switch",
+		"data-size": size,
+		className: cn("peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, {
+			"data-slot": "switch-thumb",
+			className: "bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
+		})
+	});
+};
+export { Switch$1 as Switch };

package/dist/components/ui/textarea.js

@@ -0,0 +1,12 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+// src/components/ui/textarea.tsx
+const Textarea = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		...props
+	});
+};
+export { Textarea };

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

@@ -3,19 +3,48 @@ import { Badge, BadgeProps } from "./components/atomic/Badge/Badge.js";
 import "./components/atomic/Button/index.js";
 import { ButtonVariant } from "./components/atomic/Button/buttonVariant.js";
 import { Button, ButtonProps } from "./components/atomic/Button/Button.js";
+import "./components/atomic/Checkbox/index.js";
+import { Checkbox, CheckboxProps } from "./components/atomic/Checkbox/Checkbox.js";
+import "./components/atomic/ColorInput/index.js";
+import { ColorInput, ColorInputProps } from "./components/atomic/ColorInput/ColorInput.js";
 import "./components/atomic/Divider/index.js";
 import { Divider, DividerProps } from "./components/atomic/Divider/Divider.js";
 import "./components/atomic/Heading/index.js";
 import { Heading, HeadingLevel, HeadingProps } from "./components/atomic/Heading/Heading.js";
+import "./components/atomic/Switch/index.js";
+import { Switch, SwitchProps } from "./components/atomic/Switch/Switch.js";
 import "./components/atomic/Text/index.js";
 import { Text, TextProps, TextSize, TextTone, TextWeight } from "./components/atomic/Text/Text.js";
+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";
+import { Select, SelectOption, SelectProps } from "./components/atomic/Select/Select.js";
 import "./components/atomic/Skeleton/index.js";
 import { Skeleton, SkeletonProps, SkeletonShape } from "./components/atomic/Skeleton/Skeleton.js";
 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/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 { IconComponent, Size, Tone } from "./lib/types.js";
-export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Divider, type DividerProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Text, 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, 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, type MenuItem, Modal, type ModalProps, type ModalSize, 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

@@ -1,10 +1,25 @@
 import { Badge } from "./components/atomic/Badge/Badge.js";
 import { Button } from "./components/atomic/Button/Button.js";
+import { Checkbox } from "./components/atomic/Checkbox/Checkbox.js";
+import { ColorInput } from "./components/atomic/ColorInput/ColorInput.js";
 import { Divider } from "./components/atomic/Divider/Divider.js";
 import { Heading } from "./components/atomic/Heading/Heading.js";
+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 { 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, Divider, HStack, Heading, IconButton, Skeleton, Spinner, Stack, Text, VStack };
+export { Badge, Button, Checkbox, ColorInput, ConfirmDialog, Divider, DropdownMenu, 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,9 +2,27 @@ 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;
   'aria-hidden'?: boolean;
   'data-icon'?: string;
-}>;
+}>;
+/** Label, help and error props every form input shares (rendered by FormField). */
+export interface FieldBaseProps {
+  /** Accessible name; always required, even when hidden. */
+  label: string;
+  /** Hides the label visually; screen readers still announce it. */
+  hideLabel?: boolean;
+  description?: string;
+  /** Message shown under the field; also sets aria-invalid. */
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  id?: string;
+  'data-testid'?: 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.3",
+  "version": "0.0.5",
   "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%);
 }