@mindlogic-ai/logician-ui 4.0.0-alpha.8 → 4.0.0

package/dist/index.mjs

@@ -3,10 +3,20 @@ export { Accordion } from './components/Accordion/Accordion.mjs';
 export { AccordionButton } from './components/Accordion/AccordionButton.mjs';
 export { AccordionItem } from './components/Accordion/AccordionItem.mjs';
 export { AccordionPanel } from './components/Accordion/AccordionPanel.mjs';
+export { Appear } from './components/Appear/Appear.mjs';
 export { Avatar } from './components/Avatar/Avatar.mjs';
 export { Badge } from './components/Badge/Badge.mjs';
 export { baseStyles as badgeStyles, variantStyles as badgeVariantStyles } from './components/Badge/Badge.styles.mjs';
 export { Banner } from './components/Banner/Banner.mjs';
+export { BottomSheet } from './components/BottomSheet/BottomSheet.mjs';
+export { bottomSheetAnatomy, bottomSheetSlotRecipe } from './components/BottomSheet/BottomSheet.styles.mjs';
+export { BottomSheetBody } from './components/BottomSheet/BottomSheetBody.mjs';
+export { BottomSheetCloseButton } from './components/BottomSheet/BottomSheetCloseButton.mjs';
+export { BottomSheetContent } from './components/BottomSheet/BottomSheetContent.mjs';
+export { useBottomSheetContext } from './components/BottomSheet/BottomSheetContext.mjs';
+export { BottomSheetFooter } from './components/BottomSheet/BottomSheetFooter.mjs';
+export { BottomSheetHeader } from './components/BottomSheet/BottomSheetHeader.mjs';
+export { BottomSheetOverlay } from './components/BottomSheet/BottomSheetOverlay.mjs';
 export { Breadcrumb } from './components/Breadcrumb/Breadcrumb.mjs';
 export { BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.mjs';
 export { BreadcrumbLink } from './components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.mjs';
@@ -26,16 +36,28 @@ export { CollapsibleTrigger } from './components/Collapsible/CollapsibleTrigger.
 export { ColorModeProvider } from './components/ColorMode/ColorModeProvider.mjs';
 export { ColorModeToggle } from './components/ColorMode/ColorModeToggle.mjs';
 export { useColorMode, useColorModeValue } from './components/ColorMode/useColorMode.mjs';
+export { Confetti } from './components/Confetti/Confetti.mjs';
 export { Container } from './components/Container/Container.mjs';
 export { getContainerWidth } from './components/Container/useContainerSize.mjs';
 export { CopyableCode } from './components/CopyableCode/CopyableCode.mjs';
+export { CountUp } from './components/CountUp/CountUp.mjs';
 export { RangeDatePicker } from './components/DatePicker/RangeDatePicker.mjs';
 export { SingleDatePicker } from './components/DatePicker/SingleDatePicker.mjs';
 export { ErrorFallback } from './components/ErrorFallback/ErrorFallback.mjs';
 export { ExpandableText } from './components/ExpandableText/ExpandableText.mjs';
+export { FlyTo } from './components/FlyTo/FlyTo.mjs';
 export { FileInput } from './components/FileInput/FileInput.mjs';
 export { FileItem } from './components/FileItem/FileItem.mjs';
 export { FileList } from './components/FileList/FileList.mjs';
+export { FieldError } from './components/Form/FieldError/FieldError.mjs';
+export { FieldHelp } from './components/Form/FieldHelp/FieldHelp.mjs';
+export { FieldLabel } from './components/Form/FieldLabel/FieldLabel.mjs';
+export { FieldRow } from './components/Form/FieldRow/FieldRow.mjs';
+export { FormFooter } from './components/Form/FormFooter/FormFooter.mjs';
+export { FormModalFooter } from './components/Form/FormModalFooter/FormModalFooter.mjs';
+export { FormScrollArea } from './components/Form/FormScrollArea/FormScrollArea.mjs';
+export { FormSection } from './components/Form/FormSection/FormSection.mjs';
+export { FormSectionHeader } from './components/Form/FormSectionHeader/FormSectionHeader.mjs';
 export { FormControl } from './components/FormControl/FormControl.mjs';
 export { FormLabel } from './components/FormLabel/FormLabel.mjs';
 export { IconButton } from './components/IconButton/IconButton.mjs';
@@ -71,8 +93,10 @@ export { PasswordInput } from './components/PasswordInput/PasswordInput.mjs';
 export { PinInput } from './components/PinInput/PinInput.mjs';
 export { ProgressBar } from './components/ProgressBar/ProgressBar.mjs';
 export { default as RadialProgress } from './components/RadialProgress/RadialProgress.mjs';
+export { Pulse } from './components/Pulse/Pulse.mjs';
 export { Radio } from './components/Radio/Radio.mjs';
 export { RadioGroup } from './components/Radio/RadioGroup.mjs';
+export { Reveal } from './components/Reveal/Reveal.mjs';
 export { ScaledContext } from './components/ScaledContext/ScaledContext.mjs';
 export { SeeMoreButton } from './components/SeeMoreButton/SeeMoreButton.mjs';
 export { SegmentedControl } from './components/SegmentedControl/SegmentedControl.mjs';
@@ -83,6 +107,7 @@ export { ComboboxField } from './components/Select/ComboboxField.mjs';
 export { Select } from './components/Select/Select.mjs';
 export { SelectField } from './components/Select/SelectField.mjs';
 export { Icon as TagLeftIcon, Icon as TagRightIcon, createListCollection, createTreeCollection, useFilter, useListCollection } from '@chakra-ui/react';
+export { Shake } from './components/Shake/Shake.mjs';
 export { Slider } from './components/Slider/Slider.mjs';
 export { SliderControl } from './components/Slider/SliderControl/SliderControl.mjs';
 export { SliderFilledTrack } from './components/Slider/SliderFilledTrack/SliderFilledTrack.mjs';
@@ -91,6 +116,7 @@ export { SliderThumb } from './components/Slider/SliderThumb/SliderThumb.mjs';
 export { SliderThumbs } from './components/Slider/SliderThumbs/SliderThumbs.mjs';
 export { SliderTrack } from './components/Slider/SliderTrack/SliderTrack.mjs';
 export { Spinner } from './components/Spinner/Spinner.mjs';
+export { SwapTransition } from './components/SwapTransition/SwapTransition.mjs';
 export { Switch } from './components/Switch/Switch.mjs';
 export { ExpandingTr } from './components/Table/ExpandingTr/ExpandingTr.mjs';
 export { Table } from './components/Table/Table.mjs';
@@ -101,6 +127,7 @@ export { Th } from './components/Table/Th.mjs';
 export { Thead } from './components/Table/Thead.mjs';
 export { Tr } from './components/Table/Tr.mjs';
 export { Tab } from './components/Tabs/Tab/Tab.mjs';
+export { TAB_RAMP } from './components/Tabs/Tab/Tab.styles.mjs';
 export { TabList } from './components/Tabs/TabList/TabList.mjs';
 export { TabPanel } from './components/Tabs/TabPanel.mjs';
 export { TabPanels } from './components/Tabs/TabPanels.mjs';
@@ -111,7 +138,7 @@ export { TagCloseButton } from './components/Tag/TagCloseButton/TagCloseButton.m
 export { TagLabel } from './components/Tag/TagLabel/TagLabel.mjs';
 export { Textarea } from './components/Textarea/Textarea.mjs';
 export { Toast } from './components/Toast/Toast.mjs';
-export { closeButtonStyles, toastStyles } from './components/Toast/Toast.styles.mjs';
+export { TOAST_ACTION_DURATION, TOAST_DEFAULT_DURATION, actionStyles, closeButtonStyles, toastStyles } from './components/Toast/Toast.styles.mjs';
 export { Toaster, toaster } from './components/Toast/Toaster.mjs';
 export { useToast } from './components/Toast/useToast.mjs';
 export { Tooltip } from './components/Tooltip/Tooltip.mjs';
@@ -144,15 +171,17 @@ export { CARD_WIDTH, MAX_META_CHIPS, PORT_STYLE, metaChipStyles } from './compon
 export { workflowLabelProps } from './components/Workflow/canvas/workflowLabelProps.mjs';
 export { WorkflowGraphObserverContext, useWorkflowGraphObserver } from './components/Workflow/graphObserver.mjs';
 export { emptyGraph, graphReducer } from './components/Workflow/graphReducer.mjs';
+export { useWorkflowActions } from './components/Workflow/useWorkflowActions.mjs';
 export { Workflow } from './components/Workflow/Workflow.mjs';
 export { defineNodeType, resolveDefaultConfig } from './components/Workflow/Workflow.types.mjs';
 export { WorkflowProvider, useWorkflow, useWorkflowTranslate } from './components/Workflow/WorkflowContext/WorkflowContext.mjs';
+export { Caption } from './components/Typography/Caption.mjs';
 export { H1 } from './components/Typography/H1.mjs';
 export { H2 } from './components/Typography/H2.mjs';
 export { H3 } from './components/Typography/H3.mjs';
 export { H4 } from './components/Typography/H4.mjs';
 export { H5 } from './components/Typography/H5.mjs';
-export { Link } from './components/Typography/Link.mjs';
+export { LINK_RAMP, Link } from './components/Typography/Link.mjs';
 export { Overline } from './components/Typography/Overline.mjs';
 export { Subtext } from './components/Typography/Subtext.mjs';
 export { Subtitle } from './components/Typography/Subtitle.mjs';
@@ -161,4 +190,9 @@ export { useHasHover } from './hooks/useHasHover.mjs';
 export { LanguageContext, useLanguage } from './hooks/useLanguage.mjs';
 export { logicianConfig, system, theme } from './theme/index.mjs';
 export { colors, semanticTokens } from './theme/colors.mjs';
+export { noZoomOnFocus } from './theme/formControls.mjs';
+export { MOTION_DURATION_MS, MOTION_DURATION_S, MOTION_EASE, MOTION_EASE_CSS, MOTION_STAGGER_MAX, animationStyles, durations, easings } from './theme/motion.mjs';
+export { cubicBezier } from './utils/cubicBezier.mjs';
+export { staggerDelayMs, staggerProps } from './utils/staggerProps.mjs';
+export { polymorphic } from './types/polymorphic.mjs';
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Pure style objects, importable without the component barrel.
+ *
+ * The root entry (`@mindlogic-ai/logician-ui`) pulls in every component, and
+ * with them side-effect CSS imports such as `katex/dist/katex.min.css`. A
+ * bundler handles that; a plain Node loader does not, so a consumer's unit test
+ * that imports a style constant from the root fails to load the module at all
+ * (`Unknown file extension ".css"`). Importing a style object should not cost
+ * the whole design system.
+ *
+ * Everything re-exported here must stay free of runtime imports — types only —
+ * so this entry brings in nothing but the objects themselves.
+ *
+ * ```ts
+ * import { noZoomOnFocus } from '@mindlogic-ai/logician-ui/styles';
+ * ```
+ *
+ * These names are also on the root entry, so existing imports keep working.
+ */
+export { noZoomOnFocus } from './theme/formControls';
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,9 @@
+"use client";
+'use strict';
+
+var formControls = require('./theme/formControls.js');
+
+
+
+exports.noZoomOnFocus = formControls.noZoomOnFocus;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/styles.mjs

@@ -0,0 +1,3 @@
+"use client";
+export { noZoomOnFocus } from './theme/formControls.mjs';
+//# sourceMappingURL=styles.mjs.map

package/dist/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/theme/colors.d.ts

@@ -33,6 +33,32 @@
  * @see https://www.w3.org/TR/WCAG21/#contrast-minimum
  * @version 3.0.0
  */
+/**
+ * Semantic color tokens that map primitive colors to UI intent.
+ *
+ * Use these tokens in components instead of raw color values:
+ * - `primary.*`: Buttons, links, focus states
+ * - `secondary.*`: Accent elements, highlights
+ * - `success.*`: Success messages, confirmations
+ * - `warning.*`: Warning messages, caution states
+ * - `danger.*`: Error messages, destructive actions
+ *
+ * Each category includes:
+ * - `lightest`: Lightest backgrounds (ghost states, very subtle fills)
+ * - `extralight`: Extra-light backgrounds (badges, subtle fills)
+ * - `lighter`: Light backgrounds (toast backgrounds, subtle fills)
+ * - `light`: Medium backgrounds (hover states, medium fills)
+ * - `main`: Primary color (buttons, text, icons)
+ * - `dark`: Dark variant (text on light backgrounds)
+ * - `darker`: Darkest variant (high-contrast text)
+ *
+ * @example
+ * ```tsx
+ * <Button bgColor="primary.main" />
+ * <Alert bgColor="danger.lighter" color="danger.dark" />
+ * <Badge bgColor="success.lightest" color="success.dark" />
+ * ```
+ */
 export declare const semanticTokens: {
     readonly colors: {
         /**
@@ -344,103 +370,103 @@ export declare const semanticTokens: {
             readonly 0: {
                 readonly value: {
                     readonly base: "{colors.gray.0}";
-                    readonly _dark: "#0E1014";
+                    readonly _dark: "{colors.grayDark.1500}";
                 };
             };
             readonly 50: {
                 readonly value: {
                     readonly base: "{colors.gray.50}";
-                    readonly _dark: "#181A20";
+                    readonly _dark: "{colors.grayDark.1400}";
                 };
             };
             readonly 100: {
                 readonly value: {
                     readonly base: "{colors.gray.100}";
-                    readonly _dark: "#23262E";
+                    readonly _dark: "{colors.grayDark.1300}";
                 };
             };
             readonly 200: {
                 readonly value: {
                     readonly base: "{colors.gray.200}";
-                    readonly _dark: "#30343C";
+                    readonly _dark: "{colors.grayDark.1200}";
                 };
             };
             readonly 300: {
                 readonly value: {
                     readonly base: "{colors.gray.300}";
-                    readonly _dark: "#3C404B";
+                    readonly _dark: "{colors.grayDark.1100}";
                 };
             };
             readonly 400: {
                 readonly value: {
                     readonly base: "{colors.gray.400}";
-                    readonly _dark: "#4A4E5A";
+                    readonly _dark: "{colors.grayDark.1000}";
                 };
             };
             readonly 500: {
                 readonly value: {
                     readonly base: "{colors.gray.500}";
-                    readonly _dark: "#595E6B";
+                    readonly _dark: "{colors.grayDark.900}";
                 };
             };
             readonly 600: {
                 readonly value: {
                     readonly base: "{colors.gray.600}";
-                    readonly _dark: "#898E99";
+                    readonly _dark: "{colors.grayDark.fg600}";
                 };
             };
             readonly 700: {
                 readonly value: {
                     readonly base: "{colors.gray.700}";
-                    readonly _dark: "#8D919D";
+                    readonly _dark: "{colors.grayDark.fg700}";
                 };
             };
             readonly 800: {
                 readonly value: {
                     readonly base: "{colors.gray.800}";
-                    readonly _dark: "#8E939F";
+                    readonly _dark: "{colors.grayDark.600}";
                 };
             };
             readonly 900: {
                 readonly value: {
                     readonly base: "{colors.gray.900}";
-                    readonly _dark: "#A2A6B1";
+                    readonly _dark: "{colors.grayDark.500}";
                 };
             };
             readonly 1000: {
                 readonly value: {
                     readonly base: "{colors.gray.1000}";
-                    readonly _dark: "#B6BAC3";
+                    readonly _dark: "{colors.grayDark.400}";
                 };
             };
             readonly 1100: {
                 readonly value: {
                     readonly base: "{colors.gray.1100}";
-                    readonly _dark: "#D2D5DB";
+                    readonly _dark: "{colors.grayDark.300}";
                 };
             };
             readonly 1200: {
                 readonly value: {
                     readonly base: "{colors.gray.1200}";
-                    readonly _dark: "#E5E8EC";
+                    readonly _dark: "{colors.grayDark.200}";
                 };
             };
             readonly 1300: {
                 readonly value: {
                     readonly base: "{colors.gray.1300}";
-                    readonly _dark: "#F2F4F7";
+                    readonly _dark: "{colors.grayDark.100}";
                 };
             };
             readonly 1400: {
                 readonly value: {
                     readonly base: "{colors.gray.1400}";
-                    readonly _dark: "#F8F9FB";
+                    readonly _dark: "{colors.grayDark.50}";
                 };
             };
             readonly 1500: {
                 readonly value: {
                     readonly base: "{colors.gray.1500}";
-                    readonly _dark: "#FEFEFF";
+                    readonly _dark: "{colors.grayDark.0}";
                 };
             };
         };
@@ -459,61 +485,61 @@ export declare const semanticTokens: {
             readonly DEFAULT: {
                 readonly value: {
                     readonly _light: "{colors.white}";
-                    readonly _dark: "#0E1014";
+                    readonly _dark: "{colors.grayDark.1500}";
                 };
             };
             readonly canvas: {
                 readonly value: {
                     readonly base: "{colors.gray.0}";
-                    readonly _dark: "#0E1014";
+                    readonly _dark: "{colors.grayDark.1500}";
                 };
             };
             readonly surface: {
                 readonly value: {
                     readonly base: "{colors.white}";
-                    readonly _dark: "#181A20";
+                    readonly _dark: "{colors.grayDark.1400}";
                 };
             };
             readonly raised: {
                 readonly value: {
                     readonly base: "{colors.white}";
-                    readonly _dark: "#3C404B";
+                    readonly _dark: "{colors.grayDark.1100}";
                 };
             };
             readonly subtle: {
                 readonly value: {
-                    readonly base: "{colors.gray.50}";
-                    readonly _dark: "#23262E";
+                    readonly _light: "{colors.gray.50}";
+                    readonly _dark: "{colors.grayDark.1300}";
                 };
             };
             readonly muted: {
                 readonly value: {
-                    readonly base: "{colors.gray.100}";
-                    readonly _dark: "#30343C";
+                    readonly _light: "{colors.gray.100}";
+                    readonly _dark: "{colors.grayDark.1200}";
                 };
             };
             readonly inverse: {
                 readonly value: {
                     readonly base: "{colors.gray.1300}";
-                    readonly _dark: "#F8F9FB";
+                    readonly _dark: "{colors.grayDark.50}";
                 };
             };
             readonly sunken: {
                 readonly value: {
                     readonly base: "{colors.gray.50}";
-                    readonly _dark: "#0E1014";
+                    readonly _dark: "{colors.grayDark.1500}";
                 };
             };
             readonly track: {
                 readonly value: {
                     readonly base: "{colors.gray.300}";
-                    readonly _dark: "#30343C";
+                    readonly _dark: "{colors.grayDark.1200}";
                 };
             };
             readonly panel: {
                 readonly value: {
-                    readonly base: "{colors.white}";
-                    readonly _dark: "#181A20";
+                    readonly _light: "{colors.white}";
+                    readonly _dark: "{colors.grayDark.1400}";
                 };
             };
             /**
@@ -521,29 +547,40 @@ export declare const semanticTokens: {
              * validation-error rows, and transient highlights instead of
              * hand-picking `primary.*`/`danger.*` tints at the call site.
              *
-             * Values mirror `primary.lightest` / `danger.lightest` /
+             * Light mirrors `primary.lightest` / `danger.lightest` /
              * `warning.lightest` (this Chakra version doesn't resolve
-             * semantic→semantic token references, so the primitive pairs are
-             * repeated here — keep them in sync with the brand ramps above).
+             * semantic→semantic token references, so the primitive is repeated
+             * here — keep it in sync with the brand ramps above).
+             *
+             * Dark does NOT mirror `*.lightest`. There the "lightest" hue step is the
+             * `900` of the ramp, which is darker than `bg.surface` (`grayDark.1400`),
+             * so a selected row rendered as a block sunk *below* its neighbours
+             * instead of a tint lifted above them. Instead the hue's `200` step (the
+             * dark-mode `main`/hover step of each family) is mixed 20% into the row
+             * surface. That keeps the tint one step lighter than the surface
+             * (~1.4:1, the same separation the old value had, in the right
+             * direction), keeps `fg.default` on it above 8:1, and stays
+             * tenant-restageable because it reads the ramp rather than a literal.
+             * Primitives only inside the mix — see the note above on references.
              */
             readonly selected: {
                 readonly value: {
                     readonly base: "{colors.blue.25}";
-                    readonly _dark: "{colors.blue.900}";
+                    readonly _dark: "color-mix(in oklab, {colors.blue.200} 20%, {colors.grayDark.1400})";
                 };
             };
             readonly invalid: {
                 readonly subtle: {
                     readonly value: {
                         readonly base: "{colors.rose.25}";
-                        readonly _dark: "{colors.rose.900}";
+                        readonly _dark: "color-mix(in oklab, {colors.rose.200} 20%, {colors.grayDark.1400})";
                     };
                 };
             };
             readonly highlighted: {
                 readonly value: {
                     readonly base: "{colors.gold.25}";
-                    readonly _dark: "{colors.gold.900}";
+                    readonly _dark: "color-mix(in oklab, {colors.gold.200} 20%, {colors.grayDark.1400})";
                 };
             };
         };
@@ -559,37 +596,37 @@ export declare const semanticTokens: {
             readonly DEFAULT: {
                 readonly value: {
                     readonly _light: "{colors.black}";
-                    readonly _dark: "#F8F9FB";
+                    readonly _dark: "{colors.grayDark.50}";
                 };
             };
             readonly emphasized: {
                 readonly value: {
                     readonly base: "{colors.gray.1300}";
-                    readonly _dark: "#E5E8EC";
+                    readonly _dark: "{colors.grayDark.200}";
                 };
             };
             readonly default: {
                 readonly value: {
                     readonly base: "{colors.gray.1000}";
-                    readonly _dark: "#D2D5DB";
+                    readonly _dark: "{colors.grayDark.300}";
                 };
             };
             readonly muted: {
                 readonly value: {
-                    readonly base: "{colors.gray.900}";
-                    readonly _dark: "#B6BAC3";
+                    readonly _light: "{colors.gray.900}";
+                    readonly _dark: "{colors.grayDark.400}";
                 };
             };
             readonly subtle: {
                 readonly value: {
-                    readonly base: "{colors.gray.700}";
-                    readonly _dark: "#989DA9";
+                    readonly _light: "{colors.gray.700}";
+                    readonly _dark: "{colors.grayDark.fgSubtle}";
                 };
             };
             readonly inverse: {
                 readonly value: {
                     readonly base: "{colors.gray.0}";
-                    readonly _dark: "#181A20";
+                    readonly _dark: "{colors.grayDark.1400}";
                 };
             };
         };
@@ -604,25 +641,25 @@ export declare const semanticTokens: {
             readonly DEFAULT: {
                 readonly value: {
                     readonly _light: "{colors.gray.200}";
-                    readonly _dark: "#6A6F7C";
+                    readonly _dark: "{colors.grayDark.800}";
                 };
             };
             readonly default: {
                 readonly value: {
                     readonly base: "{colors.gray.300}";
-                    readonly _dark: "#3C404B";
+                    readonly _dark: "{colors.grayDark.1100}";
                 };
             };
             readonly subtle: {
                 readonly value: {
-                    readonly base: "{colors.gray.200}";
-                    readonly _dark: "#23262E";
+                    readonly _light: "{colors.gray.200}";
+                    readonly _dark: "{colors.grayDark.1300}";
                 };
             };
             readonly strong: {
                 readonly value: {
                     readonly base: "{colors.gray.500}";
-                    readonly _dark: "#595E6B";
+                    readonly _dark: "{colors.grayDark.900}";
                 };
             };
         };
@@ -920,6 +957,88 @@ export declare const colors: {
             value: string;
         };
     };
+    /**
+     * Dark-mode neutral palette — the halved-saturation counterpart of each
+     * primitive `gray.N` (same hue and lightness, HSL saturation cut by ~50%,
+     * e.g. `gray.1300` #1E2433 @ 26% → #23262E @ 13%). The blue-tinted `gray`
+     * ramp reads as the right neutral in light mode but turns muddy/
+     * over-chromatic as a dark surface, so every dark-mode neutral in the
+     * semantic layer (`slate.*`, and the `_dark` of `bg`/`fg`/`border`) resolves
+     * to a step of this scale instead of a raw `gray` step. Light mode is
+     * untouched — it keeps referencing `{colors.gray.*}` verbatim.
+     *
+     * Exposed as a primitive scale (rather than the previous inlined hex
+     * literals) so a consumer theme — e.g. FactChat's per-tenant
+     * `theme_color_overrides` — can rebrand dark mode by overriding these
+     * tokens, the same way overriding `blue.*` retints the `primary.*` ramp.
+     *
+     * The three `fg*` steps are the hand-tuned a11y lifts documented at their
+     * consuming tokens (`slate.600`/`slate.700`/`fg.subtle` in dark mode): the
+     * straight mirrors measured under WCAG AA 4.5:1 on the dark canvas/surface,
+     * so these sit slightly lighter than their scale neighbours.
+     */
+    grayDark: {
+        0: {
+            value: string;
+        };
+        50: {
+            value: string;
+        };
+        100: {
+            value: string;
+        };
+        200: {
+            value: string;
+        };
+        300: {
+            value: string;
+        };
+        400: {
+            value: string;
+        };
+        500: {
+            value: string;
+        };
+        600: {
+            value: string;
+        };
+        700: {
+            value: string;
+        };
+        800: {
+            value: string;
+        };
+        900: {
+            value: string;
+        };
+        1000: {
+            value: string;
+        };
+        1100: {
+            value: string;
+        };
+        1200: {
+            value: string;
+        };
+        1300: {
+            value: string;
+        };
+        1400: {
+            value: string;
+        };
+        1500: {
+            value: string;
+        };
+        fg600: {
+            value: string;
+        };
+        fg700: {
+            value: string;
+        };
+        fgSubtle: {
+            value: string;
+        };
+    };
     /**
      * Legacy purple palette (aliased to violet for backwards compatibility)
      * @deprecated Use `violet` instead

package/dist/theme/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/theme/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AA2DH,eAAO,MAAM,cAAc;;QAEvB;;;;;;;;;;;;WAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqCH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA6BH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyBH;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyBH;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyBH;;;;;;;;;;;;;;;;;;;;;;;;WAwBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA+CH;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAgED;;;;;;;;;eASG;;;;;;;;;;;;;;;;;;;;;;QAcL;;;;;;;WAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyCH;;;;;;WAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBG,CAAC;AAEX;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,kBAAkB,GAC1B,MACI,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,SAAS,GACT,UAAU,GACV,aAAa,EAAE,GACnB,mBAAmB,GACnB,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,EAAE,GACjE,UAAU,SAAS,GAAG,QAAQ,GAAG,QAAQ,EAAE,GAI3C,SACI,CAAC,GACD,EAAE,GACF,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,EAAE,GACV,WAAW,MAAM,GAAG,YAAY,EAAE,GAClC,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,IACzD,UAAU,GACV,YAAY,GACZ,SAAS,GACT,OAAO,GACP,MAAM,GACN,MAAM,GACN,QAAQ,EAAE,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,MAAM;IACjB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAcH;;;;;;;;;;OAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqBH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBJ,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/theme/colors.ts"],"names":[],"mappings":"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"}