@mohasinac/appkit 4.30.19 → 4.31.0

package/dist/ui/components/QuickCreateModal.style.css

@@ -1,84 +1,78 @@
-.appkit-quick-create-modal {
-  position: fixed;
-  inset: 0;
-  z-index: var(--appkit-z-modal, 1000);
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-}
-
-.appkit-quick-create-modal__backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgb(0 0 0 / 0.45);
-}
-
-.appkit-quick-create-modal__panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background: var(--appkit-color-surface, #ffffff);
-  color: var(--appkit-color-foreground, inherit);
-  width: 100%;
-  max-width: 560px;
-  margin: auto;
-  max-height: 92vh;
-  border-radius: 0.75rem;
-  box-shadow: var(--appkit-shadow-lg, 0 20px 40px rgb(0 0 0 / 0.25));
-  outline: none;
-}
-
-.appkit-quick-create-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--appkit-color-border, rgb(0 0 0 / 0.1));
-}
-
-.appkit-quick-create-modal__title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.appkit-quick-create-modal__body {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  padding: 1.25rem;
-}
-
-.appkit-quick-create-modal__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 1rem 1.25rem;
-  border-top: 1px solid var(--appkit-color-border, rgb(0 0 0 / 0.1));
-}
-
-.appkit-quick-create-modal__full-link {
-  font-size: 0.875rem;
-  color: var(--appkit-color-primary, #6366f1);
-  text-decoration: underline;
-}
-
-.appkit-quick-create-modal__actions {
-  gap: 0.5rem;
-}
-
-@media (max-width: 640px) {
-  .appkit-quick-create-modal {
-    align-items: flex-end;
-  }
-  .appkit-quick-create-modal__panel {
-    max-width: 100%;
-    margin: 0;
-    border-radius: 0.75rem 0.75rem 0 0;
-    max-height: 92vh;
-  }
-}
-
-[data-theme="default-dark"] .appkit-quick-create-modal__panel {
-  background: var(--appkit-color-surface-dark, #1e293b);
-}
+.appkit-quick-create-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-modal, 1000);
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.appkit-quick-create-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 0.45);
+}
+
+.appkit-quick-create-modal__panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--appkit-color-surface, #ffffff);
+  color: var(--appkit-color-foreground, inherit);
+  width: 100%;
+  max-width: 560px;
+  margin: auto;
+  max-height: 92vh;
+  border-radius: 0.75rem;
+  box-shadow: var(--appkit-shadow-lg, 0 20px 40px rgb(0 0 0 / 0.25));
+  outline: none;
+}
+
+.appkit-quick-create-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--appkit-color-border, rgb(0 0 0 / 0.1));
+}
+
+.appkit-quick-create-modal__title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.appkit-quick-create-modal__body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 1.25rem;
+}
+
+/* Chrome only — layout comes from ActionRow. Re-adding `display: flex` or
+   `justify-content` here would fight the row this class now decorates. */
+.appkit-quick-create-modal__footer {
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--appkit-color-border, rgb(0 0 0 / 0.1));
+}
+
+.appkit-quick-create-modal__full-link {
+  font-size: 0.875rem;
+  color: var(--appkit-color-primary, #6366f1);
+  text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+  .appkit-quick-create-modal {
+    align-items: flex-end;
+  }
+  .appkit-quick-create-modal__panel {
+    max-width: 100%;
+    margin: 0;
+    border-radius: 0.75rem 0.75rem 0 0;
+    max-height: 92vh;
+  }
+}
+
+[data-theme="default-dark"] .appkit-quick-create-modal__panel {
+  background: var(--appkit-color-surface-dark, #1e293b);
+}

package/dist/ui/components/RecordDetailModal.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Anchor, Badge, Code, Div, Modal, Row, Stack, Text } from "../index";
+import { ActionRow, Anchor, Badge, Code, Div, Modal, Row, Stack, Text } from "../index";
 import { MediaImage } from "../../features/media/MediaImage";
 export function RecordDetailModal({ isOpen, onClose, title, badges, description, fields, items, extra, metadata, footer, }) {
     const hasMetadata = Boolean(metadata && Object.keys(metadata).length > 0);
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: title, children: _jsxs(Stack, { gap: "md", children: [badges && badges.length > 0 && (_jsx(Row, { gap: "sm", align: "center", wrap: true, children: badges.map((b) => (_jsx(Badge, { variant: b.variant ?? "default", children: b.label }, b.label))) })), description && (_jsx(Div, { rounded: "lg", padding: "sm", surface: "muted", border: "default", children: _jsx(Text, { size: "sm", children: description }) })), fields && fields.length > 0 && (_jsx(Stack, { gap: "xs", children: fields.map((f) => (_jsxs(Row, { justify: "between", gap: "md", children: [_jsx(Text, { size: "sm", color: "muted", children: f.label }), _jsx(Text, { size: "sm", weight: "medium", className: "text-right", children: f.value })] }, f.label))) })), items && items.entries.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", weight: "semibold", color: "muted", children: [items.heading, " (", items.entries.length, ")"] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: items.entries.map((entry, i) => (_jsxs(Row, { gap: "sm", align: "center", justify: "between", paddingY: "y-xs-tall", padding: "x-sm", children: [_jsxs(Row, { gap: "sm", align: "center", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: entry.image, alt: entry.title, size: "thumbnail" }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [entry.href ? (_jsx(Anchor, { href: entry.href, tone: "brand", size: "sm", weight: "medium", children: entry.title })) : (_jsx(Text, { size: "sm", weight: "medium", className: "truncate", children: entry.title })), entry.subtitle && (_jsx(Text, { size: "xs", color: "muted", children: entry.subtitle }))] })] }), entry.trailing && (_jsx(Text, { size: "sm", weight: "medium", className: "shrink-0", children: entry.trailing }))] }, `${entry.title}-${i}`))) })] })), extra, hasMetadata && (_jsxs(Div, { rounded: "lg", padding: "sm", surface: "muted", border: "default", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", className: "mb-1", children: "Details" }), _jsx(Code, { size: "xs", className: "block whitespace-pre-wrap font-mono", children: JSON.stringify(metadata, null, 2) })] })), footer && _jsx(Row, { justify: "end", gap: "sm", children: footer })] }) }));
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: title, children: _jsxs(Stack, { gap: "md", children: [badges && badges.length > 0 && (_jsx(Row, { gap: "sm", align: "center", wrap: true, children: badges.map((b) => (_jsx(Badge, { variant: b.variant ?? "default", children: b.label }, b.label))) })), description && (_jsx(Div, { rounded: "lg", padding: "sm", surface: "muted", border: "default", children: _jsx(Text, { size: "sm", children: description }) })), fields && fields.length > 0 && (_jsx(Stack, { gap: "xs", children: fields.map((f) => (_jsxs(Row, { justify: "between", gap: "md", children: [_jsx(Text, { size: "sm", color: "muted", children: f.label }), _jsx(Text, { size: "sm", weight: "medium", className: "text-right", children: f.value })] }, f.label))) })), items && items.entries.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", weight: "semibold", color: "muted", children: [items.heading, " (", items.entries.length, ")"] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: items.entries.map((entry, i) => (_jsxs(Row, { gap: "sm", align: "center", justify: "between", paddingY: "y-xs-tall", padding: "x-sm", children: [_jsxs(Row, { gap: "sm", align: "center", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: entry.image, alt: entry.title, size: "thumbnail" }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [entry.href ? (_jsx(Anchor, { href: entry.href, tone: "brand", size: "sm", weight: "medium", children: entry.title })) : (_jsx(Text, { size: "sm", weight: "medium", className: "truncate", children: entry.title })), entry.subtitle && (_jsx(Text, { size: "xs", color: "muted", children: entry.subtitle }))] })] }), entry.trailing && (_jsx(Text, { size: "sm", weight: "medium", className: "shrink-0", children: entry.trailing }))] }, `${entry.title}-${i}`))) })] })), extra, hasMetadata && (_jsxs(Div, { rounded: "lg", padding: "sm", surface: "muted", border: "default", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", className: "mb-1", children: "Details" }), _jsx(Code, { size: "xs", className: "block whitespace-pre-wrap font-mono", children: JSON.stringify(metadata, null, 2) })] })), footer && _jsx(ActionRow, { align: "end", children: footer })] }) }));
 }

package/dist/ui/components/SideDrawer.d.ts

@@ -5,6 +5,14 @@ export interface SideDrawerProps {
     onClose: () => void;
     title: string;
     children: ReactNode;
+    /**
+     * Action buttons for the drawer's footer. Pass them bare — the slot supplies
+     * the row itself via `<ActionRow>`, so each button is sized from its own
+     * label and the group wraps rather than overflowing.
+     *
+     * 🛑 Do not wrap them in your own flex container or put `flex-1` on them:
+     * `important: true` makes a caller's utility beat ActionRow's CSS.
+     */
     footer?: ReactNode;
     /** Drawer mode controls header styling and unsaved-changes behaviour */
     mode?: DrawerMode;

package/dist/ui/components/SideDrawer.js

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { Button } from "./Button";
+import { ActionRow } from "./ActionRow";
 import { Row } from "./Layout";
 import { Heading, Span } from "./Typography";
 import { useSwipe } from "../../react";
@@ -156,5 +157,5 @@ export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "v
     return (_jsx(OverlayContext.Provider, { value: true, children: _jsx(AnimatePresence, { children: isOpen && (_jsxs(_Fragment, { children: [_jsx(motion.div, { className: UI_SIDE_DRAWER.backdrop, onClick: attemptClose, "aria-hidden": "true", initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }), _jsxs(motion.div, { ref: drawerRef, className: [UI_SIDE_DRAWER.root, positionClass].join(" "), role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-title", initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, "data-section": "sidedrawer-div-598", children: [_jsxs(Row, { justify: "between", gap: "none", className: [
                                     UI_SIDE_DRAWER.header,
                                     UI_SIDE_DRAWER.headerMode[mode],
-                                ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", reverse: hand === "left", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, "data-section": "sidedrawer-div-599", children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, "data-section": "sidedrawer-div-600", children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, "data-section": "sidedrawer-div-601", children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, "data-section": "sidedrawer-div-602", children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, "data-section": "sidedrawer-div-603", children: _jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { "data-section": "sidedrawer-div-604", children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx(Text, { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs("div", { className: UI_SIDE_DRAWER.warnActions, "data-section": "sidedrawer-div-605", children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] })) }) }));
+                                ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", reverse: hand === "left", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, "data-section": "sidedrawer-div-599", children: children }), footer && (_jsx("div", { className: UI_SIDE_DRAWER.footer, "data-section": "sidedrawer-div-600", children: _jsx(ActionRow, { children: footer }) }))] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, "data-section": "sidedrawer-div-601", children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, "data-section": "sidedrawer-div-602", children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, "data-section": "sidedrawer-div-603", children: _jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { "data-section": "sidedrawer-div-604", children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx(Text, { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs(ActionRow, { align: "end", gap: "md", className: UI_SIDE_DRAWER.warnActions, children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] })) }) }));
 }

package/dist/ui/components/SideDrawer.style.css

@@ -254,8 +254,11 @@
   color: var(--appkit-color-zinc-400);
 }
 
+/*
+ * Layout comes from ActionRow now — this class only survives as a hook for the
+ * dialog's own spacing. Re-adding `display: flex` / `justify-content` here
+ * would fight the row it wraps.
+ */
 .appkit-side-drawer__warn-actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
+  margin-top: 1rem;
 }

package/dist/ui/components/SideModal.d.ts

@@ -8,6 +8,16 @@ export interface SideModalProps {
     /** Width on desktop. Default: "60vw" clamped to max-w-2xl. */
     width?: string;
     children: React.ReactNode;
+    /**
+     * Action buttons pinned below the scrollable body. Pass them bare — the slot
+     * supplies the row itself via `<ActionRow>`, so each is sized from its own
+     * label and the group wraps rather than overflowing.
+     *
+     * This slot exists so a CTA inside a SideModal does not have to be hand-rolled
+     * in the body, which is what every other footer in the codebase did before
+     * they were unified.
+     */
+    footer?: React.ReactNode;
     /** Extra class on the panel Div. */
     className?: string;
 }
@@ -21,4 +31,4 @@ export interface SideModalProps {
  *  - backdrop click closes panel
  *  - role="dialog" + aria-modal + aria-labelledby
  */
-export declare function SideModal({ isOpen, onClose, title, side, children, className, }: SideModalProps): React.JSX.Element;
+export declare function SideModal({ isOpen, onClose, title, side, children, footer, className, }: SideModalProps): React.JSX.Element;

package/dist/ui/components/SideModal.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { Button, Div, Heading } from "..";
+import { ActionRow } from "./ActionRow";
 import { SPRING_SNAPPY } from "../../tokens/motion";
 import { useHandMode } from "../../_internal/client/hand-mode";
 /**
@@ -15,7 +16,7 @@ import { useHandMode } from "../../_internal/client/hand-mode";
  *  - backdrop click closes panel
  *  - role="dialog" + aria-modal + aria-labelledby
  */
-export function SideModal({ isOpen, onClose, title, side, children, className = "", }) {
+export function SideModal({ isOpen, onClose, title, side, children, footer, className = "", }) {
     const { hand } = useHandMode();
     const resolvedSide = side ?? hand;
     const panelRef = useRef(null);
@@ -63,5 +64,5 @@ export function SideModal({ isOpen, onClose, title, side, children, className =
                         className,
                     ]
                         .filter(Boolean)
-                        .join(" "), initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, children: [title && (_jsxs(Div, { className: hand === "left" ? "appkit-side-modal__header flex-row-reverse" : "appkit-side-modal__header", children: [_jsx(Heading, { level: 2, id: titleId.current, className: "text-base font-semibold text-[var(--appkit-color-text)] dark:text-white truncate", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close panel", className: hand === "left" ? "mr-2 flex-shrink-0" : "ml-2 flex-shrink-0", children: "\u2715" })] })), _jsx(Div, { className: "appkit-side-modal__body", children: children })] })] })) }));
+                        .join(" "), initial: reduced ? false : { x: slideX }, animate: { x: 0 }, exit: { x: slideX }, transition: SPRING_SNAPPY, children: [title && (_jsxs(Div, { className: hand === "left" ? "appkit-side-modal__header flex-row-reverse" : "appkit-side-modal__header", children: [_jsx(Heading, { level: 2, id: titleId.current, className: "text-base font-semibold text-[var(--appkit-color-text)] dark:text-white truncate", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close panel", className: hand === "left" ? "mr-2 flex-shrink-0" : "ml-2 flex-shrink-0", children: "\u2715" })] })), _jsx(Div, { className: "appkit-side-modal__body", children: children }), footer && (_jsx(Div, { className: "appkit-side-modal__footer", children: _jsx(ActionRow, { children: footer }) }))] })] })) }));
 }

package/dist/ui/components/SideModal.style.css

@@ -71,3 +71,17 @@
   overflow-y: auto;
   padding: 1.25rem;
 }
+
+/* -- Footer ------------------------------------------ */
+/* Chrome only — the action layout itself comes from ActionRow. */
+
+.appkit-side-modal__footer {
+  flex-shrink: 0;
+  border-top: 1px solid var(--appkit-color-border);
+  padding: 1rem 1.25rem;
+  padding-bottom: calc(1rem + var(--keyboard-inset-height, 0px));
+}
+
+.dark .appkit-side-modal__footer {
+  border-top-color: var(--appkit-color-zinc-700);
+}

package/dist/ui/components/Typography.style.css

@@ -111,12 +111,30 @@
   color: var(--appkit-color-text);
 }
 
+/* 🛑 The dimmed-text ladder reads THEME tokens, never the raw zinc ramp.
+ *
+ * `--appkit-color-zinc-*` is declared once under `:root` and is NOT overridden
+ * by any theme block, so anything reading it is theme-INVARIANT — the same
+ * near-white grey in `sunset` as in `default-dark`. `--appkit-color-text-muted`
+ * and `-text-faint` are declared per theme and already invert correctly, which
+ * is why the `.dark` overrides these rules used to carry are gone: the token
+ * does that job, and a second mechanism could only disagree with it.
+ *
+ * `--muted` also read `--appkit-color-text-FAINT`, one step lighter than its own
+ * name, for all ~1,039 `color="muted"` call sites — while the 597
+ * `className="text-muted"` sites resolved correctly through Tailwind. Two
+ * idioms, one intent, two different colours on screen.
+ */
 .appkit-color--secondary {
-  color: var(--appkit-color-zinc-500);
+  color: var(--appkit-color-text-muted);
 }
 
 .appkit-color--muted {
-  color: var(--appkit-color-text-faint);
+  color: var(--appkit-color-text-muted);
+  /* Muted carries no weight of its own elsewhere, so at these contrast ratios
+   * it read as washed out rather than deliberate. 450 is enough to hold the
+   * line without competing with `weight="medium"` (500). */
+  font-weight: 450;
 }
 
 .appkit-color--error {
@@ -132,7 +150,7 @@
 }
 
 .appkit-color--faint {
-  color: var(--appkit-color-zinc-400);
+  color: var(--appkit-color-text-faint);
 }
 
 .appkit-color--warning {
@@ -151,14 +169,12 @@
   color: var(--appkit-color-text);
 }
 
-.dark .appkit-color--secondary {
-  color: var(--appkit-color-zinc-400);
-}
-
-.dark .appkit-color--muted {
-  color: var(--appkit-color-zinc-500);
-}
-
+/* `.dark` IS live — ThemeProvider.tsx:92 adds the class alongside
+ * `data-theme` — so these are real overrides, not dead CSS. The three that
+ * used to sit here (`--secondary`, `--muted`, `--faint`) are gone because the
+ * tokens they now read already invert per theme. Keeping them would have
+ * re-broken exactly what the base rules fix: `.dark .appkit-color--faint`
+ * resolved to zinc-600 (#52525b) on a near-black page. */
 .dark .appkit-color--error {
   color: var(--appkit-color-rose-400);
 }
@@ -171,10 +187,6 @@
   color: var(--appkit-color-primary-400);
 }
 
-.dark .appkit-color--faint {
-  color: var(--appkit-color-zinc-600);
-}
-
 .dark .appkit-color--warning {
   color: var(--appkit-color-warning, #fbbf24);
 }
@@ -188,11 +200,10 @@
   margin-bottom: 0.375rem;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--appkit-color-zinc-500);
-}
-
-.dark .appkit-label {
-  color: var(--appkit-color-slate-300);
+  /* Was zinc-500 with a `.dark` slate-300 override — a hand-rolled light/dark
+   * pair off the raw ramp, which no theme overrides. Every form label in the
+   * app renders through this rule. */
+  color: var(--appkit-color-text-muted);
 }
 
 .appkit-label__required {
@@ -217,10 +228,8 @@
   color: var(--appkit-color-secondary-600);     /* dark green — readable on white */
 }
 
-.dark .appkit-caption--default {
-  color: var(--appkit-color-zinc-500);
-}
-
+/* `.appkit-caption--default` reads `--appkit-color-text-faint`, which already
+ * inverts per theme; this override pinned it back to a fixed grey in dark. */
 .dark .appkit-caption--accent {
   color: var(--appkit-color-primary-400);
 }

package/dist/ui/components/index.style.css

@@ -4,6 +4,7 @@
 @import "./OtpInput.style.css";
 @import "./Textarea.style.css";
 @import "./Select.style.css";
+@import "./ActionRow.style.css";
 @import "./Accordion.style.css";
 @import "./Breadcrumb.style.css";
 @import "./Badge.style.css";