oneslash-design-system 1.8.4 → 2.0.0

package/dist/components/sharedStyles.d.ts

@@ -1,9 +1,9 @@
-export declare const focusRing = "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-light-text-primary dark:focus-visible:outline-dark-text-primary";
-export declare const focusRingDanger = "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-light-error-main dark:focus-visible:outline-dark-error-main";
-export declare const stateTransition = "transition duration-150 ease-out motion-reduce:transition-none";
+export declare const focusRing = "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg-primary";
+export declare const focusRingDanger = "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-error-main";
+export declare const stateTransition = "transition duration-[var(--os-duration-fast)] ease-out motion-reduce:transition-none";
 export declare const pressFeedback = "enabled:active:scale-[0.97]";
 export declare const pressFeedbackAny = "active:scale-[0.97]";
-export declare const overlayTransition = "transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none";
+export declare const overlayTransition = "transition-[opacity,transform] duration-[var(--os-duration-fast)] ease-emphasized motion-reduce:transition-none";
 export declare const overlayHidden = "opacity-0 scale-[0.96]";
 export declare const overlayVisible = "opacity-100 scale-100";
-export declare const popTransition = "transition-transform duration-150 ease-[cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none";
+export declare const popTransition = "transition-transform duration-[var(--os-duration-fast)] ease-spring motion-reduce:transition-none";

package/dist/components/sharedStyles.jsx

@@ -3,18 +3,18 @@
 // Keyboard focus indicator for every interactive element. Uses the primary text
 // color (black in light, near-white in dark): the accent yellow is 1.9:1 on the
 // light background and too faint to see.
-export var focusRing = 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-light-text-primary dark:focus-visible:outline-dark-text-primary';
-export var focusRingDanger = 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-light-error-main dark:focus-visible:outline-dark-error-main';
+export var focusRing = 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg-primary';
+export var focusRingDanger = 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-error-main';
 // Motion is quick and snappy everywhere, and off for prefers-reduced-motion.
 // Hover/selected/disabled changes plus press feedback: colors, opacity and transform
-export var stateTransition = 'transition duration-150 ease-out motion-reduce:transition-none';
+export var stateTransition = 'transition duration-[var(--os-duration-fast)] ease-out motion-reduce:transition-none';
 // Pressed controls dip slightly. `enabled:` skips disabled <button>s.
 export var pressFeedback = 'enabled:active:scale-[0.97]';
 // For clickable elements that aren't <button>s
 export var pressFeedbackAny = 'active:scale-[0.97]';
 // Overlays (Modal, Popover, Select menu) fade and scale in
-export var overlayTransition = 'transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none';
+export var overlayTransition = 'transition-[opacity,transform] duration-[var(--os-duration-fast)] ease-emphasized motion-reduce:transition-none';
 export var overlayHidden = 'opacity-0 scale-[0.96]';
 export var overlayVisible = 'opacity-100 scale-100';
 // Small marks (checkbox tick, radio dot) pop in with a slight overshoot
-export var popTransition = 'transition-transform duration-150 ease-[cubic-bezier(0.34,1.56,0.64,1)] motion-reduce:transition-none';
+export var popTransition = 'transition-transform duration-[var(--os-duration-fast)] ease-spring motion-reduce:transition-none';

package/dist/components/tab.jsx

@@ -22,8 +22,8 @@ export default function Tab(_a) {
     }[size];
     // Inside a TabsContainer the container's sliding pill is the selected background
     var selectedClasses = inContainer
-        ? 'text-light-text-contrast dark:text-dark-text-contrast'
-        : 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast';
+        ? 'text-primary-contrast'
+        : 'bg-primary-dark text-primary-contrast';
     return (<div data-tab-selected={isSelected} role="tab" aria-selected={isSelected} 
     // Inside a container only the selected tab is in the Tab order; arrow keys move between tabs
     tabIndex={inContainer && !isSelected ? -1 : 0} onKeyDown={function (e) {
@@ -31,9 +31,9 @@ export default function Tab(_a) {
                 e.preventDefault();
                 handleClick();
             }
-        }} className={"\n        relative flex items-center space-x-1 rounded-[8px] cursor-pointer justify-start ".concat(stateTransition, " ").concat(pressFeedbackAny, " ").concat(focusRing, "\n        ").concat(sizeClasses.tab, "\n        ").concat(isSelected
+        }} className={"\n        relative flex items-center space-x-1 rounded-control cursor-pointer justify-start ".concat(stateTransition, " ").concat(pressFeedbackAny, " ").concat(focusRing, "\n        ").concat(sizeClasses.tab, "\n        ").concat(isSelected
             ? selectedClasses
-            : 'text-light-text-primary dark:text-dark-text-primary hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200', "\n      ")} onClick={handleClick}>
+            : 'text-fg-primary hover:bg-background-accent200', "\n      ")} onClick={handleClick}>
       {IconLeft && <IconLeft className={sizeClasses.icon} strokeWidth={2}/>}
       <div className={"flex flex-col text-center ".concat(sizeClasses.label)}>
         <span className="whitespace-nowrap">

package/dist/components/tableCell.jsx

@@ -5,7 +5,7 @@ export default function TableCell(_a) {
     var alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
     var widthStyle = width ? { width: width, minWidth: minWidth || width } : {};
     var flexClass = width ? '' : 'flex-1';
-    return (<div role="cell" className={"".concat(flexClass, " p-2 text-body2 text-light-text-primary dark:text-dark-text-primary border-t border-light-misc-divider dark:border-dark-misc-divider ").concat(alignClass)} style={widthStyle}>
+    return (<div role="cell" className={"".concat(flexClass, " p-2 text-body2 text-fg-primary border-t border-misc-divider ").concat(alignClass)} style={widthStyle}>
 						{children}
 				</div>);
 }

package/dist/components/tableContainer.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 export default function TableContainer(_a) {
     var children = _a.children;
-    return (<div role="table" className="w-full overflow-x-auto bg-light-background-default dark:bg-dark-background-default">
+    return (<div role="table" className="w-full overflow-x-auto bg-background-default">
 						{children}
 				</div>);
 }

package/dist/components/tableHeader.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 export default function TableHeader(_a) {
     var children = _a.children;
-    return (<div role="rowgroup" className="bg-light-background-default dark:bg-dark-background-default">
+    return (<div role="rowgroup" className="bg-background-default">
 						{children}
 				</div>);
 }

package/dist/components/tableHeaderCell.jsx

@@ -5,7 +5,7 @@ export default function TableHeaderCell(_a) {
     var alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
     var widthStyle = width ? { width: width, minWidth: minWidth || width } : {};
     var flexClass = width ? '' : 'flex-1';
-    return (<div role="columnheader" className={"".concat(flexClass, " p-2 text-body2 text-light-text-secondary dark:text-dark-text-secondary ").concat(alignClass)} style={widthStyle}>
+    return (<div role="columnheader" className={"".concat(flexClass, " p-2 text-body2 text-fg-secondary ").concat(alignClass)} style={widthStyle}>
 						{children}
 				</div>);
 }

package/dist/components/tabsContainer.jsx

@@ -77,11 +77,11 @@ export default function TabsContainer(_a) {
             e.preventDefault();
             tabs[next].focus();
             tabs[next].click();
-        }} className={"\n          relative flex gap-0.5 p-1 rounded-[12px] overflow-x-auto\n          ".concat(tabCount > 0 ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' : 'bg-transparent', "\n        ")} style={{
+        }} className={"\n          relative flex gap-0.5 p-1 rounded-container overflow-x-auto\n          ".concat(tabCount > 0 ? 'bg-background-accent100' : 'bg-transparent', "\n        ")} style={{
             scrollbarWidth: 'none',
             msOverflowStyle: 'none',
         }}>
-        {indicator && (<span aria-hidden className={"absolute rounded-[8px] pointer-events-none bg-light-primary-dark dark:bg-dark-primary-dark\n              ".concat(indicator.animate ? 'transition-[transform,width,height] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none' : '')} style={{
+        {indicator && (<span aria-hidden className={"absolute rounded-control pointer-events-none bg-primary-dark\n              ".concat(indicator.animate ? 'transition-[transform,width,height] duration-[var(--os-duration-slide)] ease-emphasized motion-reduce:transition-none' : '')} style={{
                 top: 0,
                 left: 0,
                 transform: "translate(".concat(indicator.x, "px, ").concat(indicator.y, "px)"),

package/dist/components/tag.jsx

@@ -2,47 +2,47 @@
 import React from 'react';
 import { icons } from 'lucide-react';
 import { focusRing, pressFeedbackAny, stateTransition } from './sharedStyles';
-// Light: the -dark shade with white text; dark: the -main shade with black text.
-// Both keep text at 4.4:1 or better.
+// Filled tags use the status `fill` with `onFill` text; text-only tags use the status `text` token.
+// Each pair is checked at 4.5:1 by `npm run check:contrast`.
 var colorConfig = {
     default: {
-        bg: 'bg-light-secondary-light dark:bg-dark-secondary-light',
-        text: 'text-light-text-primary dark:text-dark-text-primary',
-        textOnly: 'text-light-text-secondary dark:text-dark-text-secondary',
-        border: 'border-light-misc-divider dark:border-dark-misc-divider',
-        dot: 'bg-light-text-secondary dark:bg-dark-text-secondary',
+        bg: 'bg-secondary-light',
+        text: 'text-fg-primary',
+        textOnly: 'text-fg-secondary',
+        border: 'border-misc-divider',
+        dot: 'bg-fg-secondary',
         hasBorderTextOnly: false,
     },
     success: {
-        bg: 'bg-light-success-dark dark:bg-dark-success-main',
-        text: 'text-light-text-contrast dark:text-dark-text-contrast',
-        textOnly: 'text-light-success-dark dark:text-dark-success-main',
-        border: 'border-light-success-dark dark:border-dark-success-main',
-        dot: 'bg-light-success-main dark:bg-dark-success-main',
+        bg: 'bg-success-fill',
+        text: 'text-success-onFill',
+        textOnly: 'text-success-text',
+        border: 'border-success-fill',
+        dot: 'bg-success-main',
         hasBorderTextOnly: true,
     },
     warning: {
-        bg: 'bg-light-warning-dark dark:bg-dark-warning-main',
-        text: 'text-light-text-contrast dark:text-dark-text-contrast',
-        textOnly: 'text-light-warning-dark dark:text-dark-warning-main',
-        border: 'border-light-warning-dark dark:border-dark-warning-main',
-        dot: 'bg-light-warning-main dark:bg-dark-warning-main',
+        bg: 'bg-warning-fill',
+        text: 'text-warning-onFill',
+        textOnly: 'text-warning-text',
+        border: 'border-warning-fill',
+        dot: 'bg-warning-main',
         hasBorderTextOnly: true,
     },
     error: {
-        bg: 'bg-light-error-dark dark:bg-dark-error-main',
-        text: 'text-light-text-contrast dark:text-dark-text-contrast',
-        textOnly: 'text-light-error-dark dark:text-dark-error-light',
-        border: 'border-light-error-dark dark:border-dark-error-main',
-        dot: 'bg-light-error-main dark:bg-dark-error-main',
+        bg: 'bg-error-fill',
+        text: 'text-error-onFill',
+        textOnly: 'text-error-text',
+        border: 'border-error-fill',
+        dot: 'bg-error-main',
         hasBorderTextOnly: true,
     },
     info: {
-        bg: 'bg-light-info-dark dark:bg-dark-info-main',
-        text: 'text-light-text-contrast dark:text-dark-text-contrast',
-        textOnly: 'text-light-info-dark dark:text-dark-info-main',
-        border: 'border-light-info-dark dark:border-dark-info-main',
-        dot: 'bg-light-info-main dark:bg-dark-info-main',
+        bg: 'bg-info-fill',
+        text: 'text-info-onFill',
+        textOnly: 'text-info-text',
+        border: 'border-info-fill',
+        dot: 'bg-info-main',
         hasBorderTextOnly: true,
     },
 };
@@ -69,29 +69,29 @@ export default function Tag(_a) {
         bgClasses = variant === 'contained' ? colorStyles.bg : '';
     }
     else if (isSelected && variant === 'contained') {
-        bgClasses = 'bg-light-accent-main dark:bg-dark-accent-main';
+        bgClasses = 'bg-accent-main';
     }
     else if (variant === 'contained') {
-        bgClasses = 'bg-light-background-accent300 dark:bg-dark-background-accent300';
+        bgClasses = 'bg-background-accent300';
     }
     // Font color
     var fontClasses = '';
     if (variant === 'dot') {
-        fontClasses = 'text-light-text-primary dark:text-dark-text-primary';
+        fontClasses = 'text-fg-primary';
     }
     else if (colorStyles) {
         fontClasses = variant === 'textOnly' ? colorStyles.textOnly : colorStyles.text;
     }
     else if (isSelected && variant === 'contained') {
         // Selected contained tags sit on accent-main — use the accent contrast token
-        fontClasses = 'text-light-accent-contrast dark:text-dark-accent-contrast';
+        fontClasses = 'text-accent-contrast';
     }
     else if (isSelected) {
         // No fill behind the text: the accent border marks the selection
-        fontClasses = 'text-light-text-primary dark:text-dark-text-primary';
+        fontClasses = 'text-fg-primary';
     }
     else {
-        fontClasses = 'text-light-text-primary dark:text-dark-text-primary';
+        fontClasses = 'text-fg-primary';
     }
     // Border styles. Every tag has a 1px border (transparent when hidden) so all variants share a height
     var borderClasses = 'border border-transparent';
@@ -107,16 +107,16 @@ export default function Tag(_a) {
         }
     }
     else if (isSelected && variant === 'textOnly') {
-        borderClasses = 'border border-light-accent-main dark:border-dark-accent-main';
+        borderClasses = 'border border-accent-main';
     }
     else if (variant === 'contained') {
-        borderClasses = 'border border-light-misc-divider dark:border-dark-misc-divider';
+        borderClasses = 'border border-misc-divider';
     }
     // Dot color
     var dotColor = (colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.dot) || colorConfig.default.dot;
     // Hover (only when not selected, no color, and onClick is provided)
     var hoverClasses = !isSelected && !color && variant === 'contained' && onClick
-        ? 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200'
+        ? 'hover:bg-background-accent200'
         : '';
     var cursorClass = onClick && !isSelected ? 'cursor-pointer' : '';
     // inline-flex so a tag wraps its content instead of stretching to its container

package/dist/components/textField.jsx

@@ -19,20 +19,20 @@ export default function TextField(_a) {
         small: 'text-body2 p-2 leading-[18px]', // body2 (14px), padding 8px
         tiny: 'text-caption p-1 leading-[16px]', // caption (12px), padding 4px
     }[size];
-    var baseClasses = "w-full border rounded-[8px] outline-none ".concat(stateTransition, "\n    placeholder:text-light-text-disabled dark:placeholder:text-dark-text-disabled");
+    var baseClasses = "w-full border rounded-control outline-none ".concat(stateTransition, "\n    placeholder:text-fg-disabled");
     // One background and text color per state, so disabled can't be overridden by the enabled ones
     var colorClasses = disabled
-        ? 'bg-transparent text-light-text-disabled dark:text-dark-text-disabled cursor-not-allowed'
-        : 'bg-light-background-default dark:bg-dark-background-default text-light-text-primary dark:text-dark-text-primary';
+        ? 'bg-transparent text-fg-disabled cursor-not-allowed'
+        : 'bg-background-default text-fg-primary';
     // Border: error > focus (2px offset outline, the same weight as Button) > hover > default
     var getBorderColor = function () {
         if (error) {
-            return 'border-light-error-main dark:border-dark-error-main focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-light-error-main dark:focus:outline-dark-error-main';
+            return 'border-error-main focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-error-main';
         }
         if (disabled) {
-            return 'border-light-text-disabled dark:border-dark-text-disabled';
+            return 'border-fg-disabled';
         }
-        return "border-light-text-disabled dark:border-dark-text-disabled\n      hover:border-light-text-secondary dark:hover:border-dark-text-secondary\n      focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-light-text-primary dark:focus:outline-dark-text-primary";
+        return "border-fg-disabled\n      hover:border-fg-secondary\n      focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-fg-primary";
     };
     var errorId = "".concat(id, "-error");
     // Get inputMode for mobile keyboard optimization
@@ -58,13 +58,13 @@ export default function TextField(_a) {
         'aria-describedby': error ? errorId : undefined,
     };
     return (<div className="flex flex-col w-full">
-      {label && (<label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
-          {label}{required && <span className="text-light-error-main dark:text-dark-error-main ml-0.5">*</span>}
+      {label && (<label htmlFor={id} className="mb-1 text-body2 text-fg-secondary">
+          {label}{required && <span className="text-error-main ml-0.5">*</span>}
         </label>)}
       <div className="relative">
         {multiline ? (<textarea id={id} rows={maxRows} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} autoComplete="off" {...errorProps}/>) : (<input id={id} type={type} inputMode={getInputMode()} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} autoComplete="off" {...errorProps}/>)}
       </div>
-      {error && (<p id={errorId} className="mt-1 text-light-error-main dark:text-dark-error-main text-body2">
+      {error && (<p id={errorId} className="mt-1 text-error-main text-body2">
           {errorText}
         </p>)}
     </div>);

package/dist/components/textarea.jsx

@@ -43,31 +43,31 @@ export default function Textarea(_a) {
         small: 'text-body2 p-2 leading-[18px]', // body2 (14px), padding 8px
         tiny: 'text-caption p-1 leading-[16px]', // caption (12px), padding 4px
     }[size];
-    var baseClasses = "block w-full border rounded-[8px] outline-none resize-none [&::-webkit-scrollbar]:hidden ".concat(stateTransition, "\n    placeholder:text-light-text-disabled dark:placeholder:text-dark-text-disabled");
+    var baseClasses = "block w-full border rounded-control outline-none resize-none [&::-webkit-scrollbar]:hidden ".concat(stateTransition, "\n    placeholder:text-fg-disabled");
     // One background and text color per state, so disabled can't be overridden by the enabled ones
     var colorClasses = disabled
-        ? 'bg-transparent text-light-text-disabled dark:text-dark-text-disabled cursor-not-allowed'
-        : 'bg-light-background-default dark:bg-dark-background-default text-light-text-primary dark:text-dark-text-primary';
+        ? 'bg-transparent text-fg-disabled cursor-not-allowed'
+        : 'bg-background-default text-fg-primary';
     // Border: error > focus (2px offset outline, the same weight as Button) > hover > default
     var getBorderColor = function () {
         if (error) {
-            return 'border-light-error-main dark:border-dark-error-main focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-light-error-main dark:focus:outline-dark-error-main';
+            return 'border-error-main focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-error-main';
         }
         if (disabled) {
-            return 'border-light-text-disabled dark:border-dark-text-disabled';
+            return 'border-fg-disabled';
         }
-        return "border-light-text-disabled dark:border-dark-text-disabled\n      hover:border-light-text-secondary dark:hover:border-dark-text-secondary\n      focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-light-text-primary dark:focus:outline-dark-text-primary";
+        return "border-fg-disabled\n      hover:border-fg-secondary\n      focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-fg-primary";
     };
     var containerClasses = "\n    ".concat(colorClasses, "\n    ").concat(baseClasses, "\n    ").concat(sizeClasses, "\n    ").concat(getBorderColor(), "\n  ");
     var errorId = "".concat(id, "-error");
     return (<div className="flex flex-col w-full">
-      {label && (<label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
+      {label && (<label htmlFor={id} className="mb-1 text-body2 text-fg-secondary">
           {label}
         </label>)}
       <div className="relative">
         <textarea ref={textareaRef} id={id} rows={1} className={containerClasses} value={value} onChange={onChange} onInput={adjustHeight} placeholder={placeholder} onFocus={onFocus} onBlur={onBlur} onKeyDown={handleKeyDown} onCompositionStart={onCompositionStart} onCompositionEnd={onCompositionEnd} autoFocus={autoFocus} disabled={disabled} autoComplete="off" aria-invalid={error || undefined} aria-describedby={error ? errorId : undefined}/>
       </div>
-      {error && (<p id={errorId} className="mt-1 text-light-error-main dark:text-dark-error-main text-body2">
+      {error && (<p id={errorId} className="mt-1 text-error-main text-body2">
           {errorText}
         </p>)}
     </div>);

package/dist/components/timeStamp.jsx

@@ -96,8 +96,8 @@ export default function TimeStamp(_a) {
     var sizeClass = textSize === 'medium' ? 'text-body2' : textSize === 'large' ? 'text-body1' : 'text-caption';
     // Determine text color classes
     var colorClass = textColor === 'primary'
-        ? 'text-light-text-primary dark:text-dark-text-primary'
-        : 'text-light-text-secondary dark:text-dark-text-secondary';
+        ? 'text-fg-primary'
+        : 'text-fg-secondary';
     return (
     // Relative times differ between server and client render, which is expected
     <time dateTime={isNaN(new Date(createdAt).getTime()) ? undefined : new Date(createdAt).toISOString()} className={"block ".concat(sizeClass, " ").concat(colorClass)} suppressHydrationWarning>

package/dist/components/tooltip.jsx

@@ -88,7 +88,7 @@ export default function Tooltip(_a) {
     onFocus={function () { return show(0); }} onBlur={hide} onClick={hide} className="relative inline-block">
       {children}
       {/* Rendered in <body> so no parent's overflow or stacking context can clip or cover it */}
-      {mounted && createPortal(<div ref={tooltipRef} id={tooltipId} role="tooltip" className={"fixed z-[1000] w-max max-w-[min(320px,calc(100vw-16px))] break-words text-caption rounded-[8px] py-1 px-2 pointer-events-none\n            dark:bg-light-background-accent300 bg-dark-background-accent300\n            dark:text-light-text-primary text-dark-text-primary\n            transition-opacity duration-150 ease-out motion-reduce:transition-none ".concat(visible && coords ? 'opacity-100' : 'opacity-0')} style={{ top: (_b = coords === null || coords === void 0 ? void 0 : coords.top) !== null && _b !== void 0 ? _b : 0, left: (_c = coords === null || coords === void 0 ? void 0 : coords.left) !== null && _c !== void 0 ? _c : 0 }}>
+      {mounted && createPortal(<div ref={tooltipRef} id={tooltipId} role="tooltip" className={"fixed z-[var(--os-z-tooltip)] w-max max-w-[min(320px,calc(100vw-16px))] break-words text-caption rounded-control py-1 px-2 pointer-events-none\n            bg-misc-tooltipBg\n            text-misc-tooltipText\n            transition-opacity duration-[var(--os-duration-fast)] ease-out motion-reduce:transition-none ".concat(visible && coords ? 'opacity-100' : 'opacity-0')} style={{ top: (_b = coords === null || coords === void 0 ? void 0 : coords.top) !== null && _b !== void 0 ? _b : 0, left: (_c = coords === null || coords === void 0 ? void 0 : coords.left) !== null && _c !== void 0 ? _c : 0 }}>
           {title}
         </div>, document.body)}
     </div>);

package/dist/components/useDarkMode.d.ts

@@ -1 +1,4 @@
+export declare function resolveDarkMode(classList: {
+    contains(c: string): boolean;
+}, prefersDark: boolean, mode?: string): boolean;
 export default function useDarkMode(): boolean;

package/dist/components/useDarkMode.js

@@ -1,18 +1,34 @@
 'use client';
 import { useState, useEffect } from 'react';
+var QUERY = '(prefers-color-scheme: dark)';
+export function resolveDarkMode(classList, prefersDark, mode) {
+    // The loaded theme file declares the mode it renders via --os-mode; it wins over the class/media rule.
+    if (mode === 'dark')
+        return true;
+    if (mode === 'light')
+        return false;
+    if (classList.contains('dark'))
+        return true;
+    if (classList.contains('light'))
+        return false;
+    return prefersDark;
+}
 export default function useDarkMode() {
-    var _a = useState(function () {
-        if (typeof document === 'undefined')
-            return false;
-        return document.documentElement.classList.contains('dark');
-    }), isDark = _a[0], setIsDark = _a[1];
+    var _a = useState(false), isDark = _a[0], setIsDark = _a[1];
     useEffect(function () {
         var el = document.documentElement;
-        var observer = new MutationObserver(function () {
-            setIsDark(el.classList.contains('dark'));
-        });
+        var mq = window.matchMedia ? window.matchMedia(QUERY) : null;
+        var update = function () {
+            return setIsDark(resolveDarkMode(el.classList, mq ? mq.matches : false, getComputedStyle(el).getPropertyValue('--os-mode').trim()));
+        };
+        var observer = new MutationObserver(update);
         observer.observe(el, { attributes: true, attributeFilter: ['class'] });
-        return function () { return observer.disconnect(); };
+        mq === null || mq === void 0 ? void 0 : mq.addEventListener('change', update);
+        update();
+        return function () {
+            observer.disconnect();
+            mq === null || mq === void 0 ? void 0 : mq.removeEventListener('change', update);
+        };
     }, []);
     return isDark;
 }

package/dist/components/userImage.jsx

@@ -33,11 +33,14 @@ export default function UserImage(_a) {
     var lightBg = "hsl(".concat(hue, ", ").concat(saturation, "%, 80%)");
     // Dark mode: darker, vibrant variant
     var darkBg = "hsl(".concat(hue, ", ").concat(saturation, "%, 30%)");
-    return (<div style={{
+    return (
+    // Per-user hue computed in JS, not a theme token, so the dark: variant stays here (one of the two documented
+    // `dark:` exemptions, see the overlay rings in Menu/Popover/Modal). The dark: variant follows whatever dark variant the app's preset/@theme defines (class-only or OS-aware).
+    <div style={{
             '--light-bg': lightBg,
             '--dark-bg': darkBg,
-        }} className="flex items-center justify-center w-6 h-6 rounded-full overflow-hidden bg-[var(--light-bg)] dark:bg-[var(--dark-bg)] text-light-text-primary dark:text-dark-text-primary">
-      {userImgUrl ? (<img src={userImgUrl} alt={userHandle} className="w-full h-full object-cover rounded-full"/>) : (<span className="text-body1 text-light-text-primary dark:text-dark-text-primary">
+        }} className="flex items-center justify-center w-6 h-6 rounded-full overflow-hidden bg-[var(--light-bg)] dark:bg-[var(--dark-bg)] text-fg-primary">
+      {userImgUrl ? (<img src={userImgUrl} alt={userHandle} className="w-full h-full object-cover rounded-full"/>) : (<span className="text-body1 text-fg-primary">
           {displayInitial}
         </span>)}
     </div>);