oneslash-design-system 1.8.4 → 2.0.0

package/README.md

@@ -4,17 +4,31 @@ React components and design tokens for oneSlash apps.
 
 ## Using the design system in an app
 
-The package ships Tailwind class names, not compiled CSS, and its components are untranspiled `.jsx`. Each app compiles both itself:
-
-1. **Next.js:** add `transpilePackages: ["oneslash-design-system"]` to `next.config`.
-2. **Tailwind v3:** add `./node_modules/oneslash-design-system/dist/**/*.{js,jsx}` to `content`, and build `theme.extend.colors` and `fontSize` from `require("oneslash-design-system/tokens")`.
-3. **Tailwind v4:** add `@source "../node_modules/oneslash-design-system/dist/**/*.jsx";` to your CSS. For the tokens, point `@config` at a JS config that builds them from `oneslash-design-system/tokens` (see oneslash-homepage's `tailwind.config.ts`).
+The package ships Tailwind class names, CSS variables and untranspiled `.jsx`. Each app compiles the components itself and picks a theme. Full steps and class renames are in [MIGRATION_GUIDE.md](./MIGRATION_GUIDE.md).
+
+1. **Import one theme file** (it includes `tokens.css`):
+   - light/dark toggle that sets `.dark` on `<html>`: `oneslash-design-system/themes/default.css`
+   - follows the OS: `oneslash-design-system/themes/default-auto.css` (`.light` opts out of OS dark)
+   - Scindo: `themes/forest.css` / `themes/forest-auto.css`
+2. **Tailwind v3:** `presets: [require("oneslash-design-system/tailwind")]` (toggle) or `oneslash-design-system/tailwind-auto` (OS). Without the preset the components render unstyled.
+3. **Tailwind v4:** import `oneslash-design-system/theme.css` (toggle) or `theme-auto.css` (OS), plus `typography.css` if you want the type scale.
+4. **Next.js:** `transpilePackages: ["oneslash-design-system"]` in `next.config`.
+5. **Scan the components:** v3 `content` gets `./node_modules/oneslash-design-system/dist/**/*.{js,jsx}`; v4 CSS gets `@source "../node_modules/oneslash-design-system/dist/**/*.jsx";`.
+
+```css
+/* Tailwind v4, OS-driven dark mode */
+@import "tailwindcss";
+@import "oneslash-design-system/themes/default-auto.css";
+@import "oneslash-design-system/theme-auto.css";
+@import "oneslash-design-system/typography.css";
+@source "../node_modules/oneslash-design-system/dist/**/*.jsx";
+```
 
 Use class names that mean the same thing in Tailwind v3 and v4 inside components, since apps on both versions compile them.
 
 ## Releasing
 
-Bump `version` in `package.json`, run `npm run build`, and merge to `main`. The Release workflow publishes to npm, creates the tag and GitHub Release with notes from the merged PR titles, and updates the docs site.
+Bump `version` in `package.json`, run `npm run build`, and merge to `main`. The Release workflow runs the tests and `npm run check:contrast`, then publishes to npm, creates the tag and GitHub Release with notes from the merged PR titles, and updates the docs site.
 
 This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 

package/dist/components/alert.jsx

@@ -2,18 +2,18 @@
 import React, { useEffect, useRef, useState } from 'react';
 import IconButton from './iconButton';
 var bgClassMap = {
-    error: 'bg-light-error-alertBg dark:bg-dark-error-alertBg',
-    warning: 'bg-light-warning-alertBg dark:bg-dark-warning-alertBg',
-    info: 'bg-light-info-alertBg dark:bg-dark-info-alertBg',
-    success: 'bg-light-success-alertBg dark:bg-dark-success-alertBg',
-    default: 'bg-light-secondary-light dark:bg-dark-secondary-light',
+    error: 'bg-error-alertBg',
+    warning: 'bg-warning-alertBg',
+    info: 'bg-info-alertBg',
+    success: 'bg-success-alertBg',
+    default: 'bg-secondary-light',
 };
 var AUTO_DISMISS_MS = 5000;
 var EXIT_MS = 150;
 // Toasts slide in from the top edge (position + opacity only), overshooting once, and leave quickly
 var motionClasses = {
-    enter: 'duration-[220ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]',
-    exit: 'duration-150 ease-in',
+    enter: 'duration-[var(--os-duration-pop)] ease-spring',
+    exit: 'duration-[var(--os-duration-fast)] ease-in',
 };
 export default function Alert(_a) {
     var _b;
@@ -64,8 +64,8 @@ export default function Alert(_a) {
     var bgClasses = (_b = bgClassMap[type]) !== null && _b !== void 0 ? _b : bgClassMap.default;
     var alertContent = (<div 
     // Errors interrupt screen readers; everything else is announced politely
-    role={type === 'error' ? 'alert' : 'status'} onMouseEnter={function () { return setIsPaused(true); }} onMouseLeave={function () { return setIsPaused(false); }} onFocus={function () { return setIsPaused(true); }} onBlur={function () { return setIsPaused(false); }} className={"flex ".concat(secondMessage ? 'items-start' : 'items-center', " justify-between w-full p-2 rounded-[8px] transition-[opacity,transform] ").concat(isVisible ? motionClasses.enter : motionClasses.exit, " motion-reduce:transition-none ").concat(bgClasses, " ").concat(isVisible ? 'opacity-100 translate-y-0' : variant === 'toast' ? 'opacity-0 -translate-y-[calc(100%+1rem)]' : 'opacity-0', " ").concat(variant === 'toast' ? 'max-w-md pointer-events-auto' : '')}>
-      <div className="flex items-start gap-2 text-light-text-primary dark:text-dark-text-primary">
+    role={type === 'error' ? 'alert' : 'status'} onMouseEnter={function () { return setIsPaused(true); }} onMouseLeave={function () { return setIsPaused(false); }} onFocus={function () { return setIsPaused(true); }} onBlur={function () { return setIsPaused(false); }} className={"flex ".concat(secondMessage ? 'items-start' : 'items-center', " justify-between w-full p-2 rounded-control transition-[opacity,transform] ").concat(isVisible ? motionClasses.enter : motionClasses.exit, " motion-reduce:transition-none ").concat(bgClasses, " ").concat(isVisible ? 'opacity-100 translate-y-0' : variant === 'toast' ? 'opacity-0 -translate-y-[calc(100%+1rem)]' : 'opacity-0', " ").concat(variant === 'toast' ? 'max-w-md pointer-events-auto' : '')}>
+      <div className="flex items-start gap-2 text-fg-primary">
         {/* With two lines, nudge the text so its first line centers on the close button */}
         <div className={"flex flex-col text-left ".concat(secondMessage && showCloseButton ? 'pt-[3px]' : '')}>
           <span className="text-body2">{message}</span>
@@ -79,7 +79,7 @@ export default function Alert(_a) {
     if (variant === 'inline') {
         return alertContent;
     }
-    return (<div className="fixed top-4 inset-x-0 z-50 flex justify-center pointer-events-none">
+    return (<div className="fixed top-4 inset-x-0 z-[var(--os-z-overlay)] flex justify-center pointer-events-none">
       {alertContent}
     </div>);
 }

package/dist/components/button.jsx

@@ -25,48 +25,48 @@ export default function Button(_a) {
     var spinnerSize = { large: 'large', medium: 'small', small: 'tiny', tiny: 'tiny' }[size];
     var baseTypeClasses = {
         default: {
-            primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
-            secondary: 'bg-light-secondary-main dark:bg-dark-secondary-main text-light-text-primary dark:text-dark-text-primary',
-            tertiary: 'bg-light-background-accent100 dark:bg-dark-background-accent100 text-light-text-primary dark:text-dark-text-primary',
-            textOnly: 'text-light-text-primary dark:text-dark-text-primary',
+            primary: 'bg-accent-main text-accent-contrast',
+            secondary: 'bg-secondary-main text-fg-primary',
+            tertiary: 'bg-background-accent100 text-fg-primary',
+            textOnly: 'text-fg-primary',
         },
         danger: {
-            primary: 'bg-light-error-main dark:bg-dark-error-main text-light-error-contrast dark:text-dark-error-contrast',
-            secondary: 'bg-light-error-alertBg dark:bg-dark-error-alertBg text-light-error-dark dark:text-dark-error-light',
+            primary: 'bg-error-main text-error-contrast',
+            secondary: 'bg-error-alertBg text-error-text',
             // Inset ring instead of a border so it adds no height
-            tertiary: 'bg-transparent ring-1 ring-inset ring-light-error-main dark:ring-dark-error-main text-light-error-main dark:text-dark-error-main',
-            textOnly: 'text-light-error-main dark:text-dark-error-main',
+            tertiary: 'bg-transparent ring-1 ring-inset ring-error-main text-error-main',
+            textOnly: 'text-error-main',
         },
     }[color][type];
     var hoverTypeClasses = {
         default: {
-            primary: 'hover:bg-light-accent-dark dark:hover:bg-dark-accent-dark',
-            secondary: 'hover:bg-light-secondary-dark dark:hover:bg-dark-secondary-dark',
-            tertiary: 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200',
-            textOnly: 'hover:bg-light-background-accent100 dark:hover:bg-dark-background-accent100',
+            primary: 'hover:bg-accent-dark',
+            secondary: 'hover:bg-secondary-dark',
+            tertiary: 'hover:bg-background-accent200',
+            textOnly: 'hover:bg-background-accent100',
         },
         danger: {
-            primary: 'hover:bg-light-error-dark dark:hover:bg-dark-error-dark',
-            secondary: 'hover:bg-light-error-light/60 dark:hover:bg-dark-error-dark/60',
-            tertiary: 'hover:bg-light-error-main/10 dark:hover:bg-dark-error-main/10',
-            textOnly: 'hover:bg-light-error-main/10 dark:hover:bg-dark-error-main/10',
+            primary: 'hover:bg-error-dark',
+            secondary: 'hover:bg-error-tint/60',
+            tertiary: 'hover:bg-error-main/10',
+            textOnly: 'hover:bg-error-main/10',
         },
     }[color][type];
     // Same outline as real keyboard focus (focusRing), so the demo state matches it and
     // paints no box behind a transparent textOnly button
     var focusedOutline = color === 'danger'
-        ? 'outline outline-2 outline-offset-2 outline-light-error-main dark:outline-dark-error-main'
-        : 'outline outline-2 outline-offset-2 outline-light-text-primary dark:outline-dark-text-primary';
+        ? 'outline outline-2 outline-offset-2 outline-error-main'
+        : 'outline outline-2 outline-offset-2 outline-fg-primary';
     var stateClasses = {
         enabled: 'cursor-pointer',
         focused: focusedOutline,
         disabled: type === 'textOnly'
-            ? 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-transparent'
-            : 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
-        selected: 'cursor-pointer bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast',
+            ? 'cursor-not-allowed text-fg-disabled bg-transparent'
+            : 'cursor-not-allowed text-fg-disabled bg-actionBackground-disabled',
+        selected: 'cursor-pointer bg-primary-dark text-primary-contrast',
     };
     // Hover is pure CSS; `state="hovered"` and `state="focused"` only exist to show those states in docs
-    var buttonClasses = "\n    flex flex-row items-center rounded-[8px] justify-between ".concat(stateTransition, " ").concat(pressFeedback, "\n    ").concat(color === 'danger' ? focusRingDanger : focusRing, "\n    ").concat(sizeClasses, "\n    ").concat(state === 'selected' ? stateClasses.selected : '', "\n    ").concat(state === 'enabled' || state === 'hovered' ? "".concat(baseTypeClasses, " ").concat(loading ? 'cursor-wait' : "".concat(stateClasses.enabled, " ").concat(hoverTypeClasses)) : '', "\n    ").concat(state === 'focused' ? "".concat(baseTypeClasses, " ").concat(hoverTypeClasses, " ").concat(stateClasses.focused) : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : '', "\n    ").concat(className, "\n  ");
+    var buttonClasses = "\n    flex flex-row items-center rounded-control justify-between ".concat(stateTransition, " ").concat(pressFeedback, "\n    ").concat(color === 'danger' ? focusRingDanger : focusRing, "\n    ").concat(sizeClasses, "\n    ").concat(state === 'selected' ? stateClasses.selected : '', "\n    ").concat(state === 'enabled' || state === 'hovered' ? "".concat(baseTypeClasses, " ").concat(loading ? 'cursor-wait' : "".concat(stateClasses.enabled, " ").concat(hoverTypeClasses)) : '', "\n    ").concat(state === 'focused' ? "".concat(baseTypeClasses, " ").concat(hoverTypeClasses, " ").concat(stateClasses.focused) : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : '', "\n    ").concat(className, "\n  ");
     return (<button type="button" className={buttonClasses} disabled={state === 'disabled' || loading} aria-busy={loading || undefined} onClick={onClickButton}>
       {/* Group IconLeft and label in a flex container for left alignment */}
       <div className={"flex items-center ".concat(size === 'tiny' ? 'gap-0.5' : 'gap-1')}>

package/dist/components/checkBox.jsx

@@ -17,30 +17,30 @@ export default function Checkbox(_a) {
     return (<label className={"group flex items-start ".concat(disabled ? 'cursor-not-allowed' : 'cursor-pointer')}>
       {/* Native input keeps keyboard focus, Space to toggle and screen-reader semantics */}
       <input type="checkbox" className="peer sr-only" checked={isChecked} disabled={disabled} onChange={handleChange}/>
-      <span className={"relative flex flex-shrink-0 items-center justify-center w-6 h-6 rounded-full ".concat(stateTransition, "\n          peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-0 peer-focus-visible:outline-light-text-primary dark:peer-focus-visible:outline-dark-text-primary\n          ").concat(disabled ? '' : 'group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected')}>
+      <span className={"relative flex flex-shrink-0 items-center justify-center w-6 h-6 rounded-full ".concat(stateTransition, "\n          peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-0 peer-focus-visible:outline-fg-primary\n          ").concat(disabled ? '' : 'group-hover:bg-action-selected')}>
         {/* Checkbox */}
         <span className={"relative w-4 h-4 border-2 rounded ".concat(stateTransition, " ").concat(disabled
             ? isChecked
-                ? 'bg-light-text-disabled dark:bg-dark-text-disabled border-transparent'
-                : 'border-light-text-disabled dark:border-dark-text-disabled'
+                ? 'bg-fg-disabled border-transparent'
+                : 'border-fg-disabled'
             : isChecked
-                ? 'bg-light-text-primary dark:bg-dark-text-primary border-transparent'
-                : 'border-light-text-secondary dark:border-dark-text-secondary', " flex items-center justify-center")}>
+                ? 'bg-fg-primary border-transparent'
+                : 'border-fg-secondary', " flex items-center justify-center")}>
           {/* Always rendered so the tick can scale in and out */}
-          <svg className={"w-3 h-3 text-light-text-contrast dark:text-dark-text-contrast ".concat(popTransition, " ").concat(isChecked ? 'scale-100' : 'scale-0')} fill="none" stroke="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+          <svg className={"w-3 h-3 text-fg-contrast ".concat(popTransition, " ").concat(isChecked ? 'scale-100' : 'scale-0')} fill="none" stroke="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden>
             <path strokeWidth="2" d="M1 6l4 3 6-7"/>
           </svg>
         </span>
       </span>
       {(label || secondLabel) && (<span className="flex flex-col ml-2">
           {label && (<span className={"text-body1 ".concat(disabled
-                    ? 'text-light-text-disabled dark:text-dark-text-disabled'
-                    : 'text-light-text-primary dark:text-dark-text-primary')}>
+                    ? 'text-fg-disabled'
+                    : 'text-fg-primary')}>
               {label}
             </span>)}
           {secondLabel && (<span className={"text-body2 opacity-70 ".concat(disabled
-                    ? 'text-light-text-disabled dark:text-dark-text-disabled'
-                    : 'text-light-text-primary dark:text-dark-text-primary')}>
+                    ? 'text-fg-disabled'
+                    : 'text-fg-primary')}>
               {secondLabel}
             </span>)}
         </span>)}

package/dist/components/emptyBox.jsx

@@ -4,8 +4,8 @@ import { AlertCircle } from 'lucide-react';
 export default function EmptyBox(_a) {
     var text = _a.text, secondText = _a.secondText, size = _a.size;
     // The icon can be faint; the text needs readable contrast
-    var iconColor = 'text-light-text-disabled dark:text-dark-text-disabled';
-    var textColor = 'text-light-text-secondary dark:text-dark-text-secondary';
+    var iconColor = 'text-fg-disabled';
+    var textColor = 'text-fg-secondary';
     var height = size === 'small' ? 'py-6' : 'h-full';
     var iconSize = 'size-6';
     return (<div className={"flex flex-col space-y-2 justify-center items-center w-full ".concat(height)}>

package/dist/components/icon.jsx

@@ -8,14 +8,14 @@ var sizeMap = {
     large: 32,
 };
 var colorMap = {
-    primary: 'text-light-text-primary dark:text-dark-text-primary',
-    secondary: 'text-light-text-secondary dark:text-dark-text-secondary',
-    disabled: 'text-light-text-disabled dark:text-dark-text-disabled',
-    error: 'text-light-error-main dark:text-dark-error-main',
-    warning: 'text-light-warning-main dark:text-dark-warning-main',
-    success: 'text-light-success-main dark:text-dark-success-main',
-    info: 'text-light-info-main dark:text-dark-info-main',
-    accent: 'text-light-accent-main dark:text-dark-accent-main',
+    primary: 'text-fg-primary',
+    secondary: 'text-fg-secondary',
+    disabled: 'text-fg-disabled',
+    error: 'text-error-main',
+    warning: 'text-warning-main',
+    success: 'text-success-main',
+    info: 'text-info-main',
+    accent: 'text-accent-main',
     inherit: '',
 };
 export default function Icon(_a) {

package/dist/components/iconButton.jsx

@@ -24,41 +24,41 @@ export default function IconButton(_a) {
         tiny: 'size-4', // 16px
     };
     // Base classes (padding and corner radius)
-    var baseClasses = "".concat(sizeClasses[size], " rounded-[8px] leading-none relative");
+    var baseClasses = "".concat(sizeClasses[size], " rounded-control leading-none relative");
     // Background color
     var bgColor = isDisabled
-        ? (color === 'iconOnly' ? '' : 'bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled')
+        ? (color === 'iconOnly' ? '' : 'bg-actionBackground-disabled')
         : state === 'selected'
-            ? 'bg-light-primary-dark dark:bg-dark-primary-dark' // Selected state
+            ? 'bg-primary-dark' // Selected state
             : color === 'primary'
-                ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary
+                ? 'bg-accent-main' // Primary
                 : color === 'secondary'
-                    ? 'bg-light-secondary-main dark:bg-dark-secondary-main' // Secondary
+                    ? 'bg-secondary-main' // Secondary
                     : color === 'tertiary'
-                        ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' // Tertiary
+                        ? 'bg-background-accent100' // Tertiary
                         : ' '; // iconOnly: none
     // Background hover color; `enabled:` skips it while disabled or loading
     var bgColorHover = state === 'selected'
         ? '' // No hover effect when selected
         : color === 'primary'
-            ? 'enabled:hover:bg-light-accent-dark/75 dark:enabled:hover:bg-dark-accent-dark/75' // Primary
+            ? 'enabled:hover:bg-accent-dark/75' // Primary
             : color === 'secondary'
-                ? 'enabled:hover:bg-light-secondary-dark/75 dark:enabled:hover:bg-dark-secondary-dark/75' // Secondary
+                ? 'enabled:hover:bg-secondary-dark/75' // Secondary
                 : color === 'tertiary'
-                    ? 'enabled:hover:bg-light-background-accent200/75 dark:enabled:hover:bg-dark-background-accent200/75' // Tertiary
-                    : 'enabled:hover:bg-light-background-accent200/75 dark:enabled:hover:bg-dark-background-accent200/75'; // iconOnly
+                    ? 'enabled:hover:bg-background-accent200/75' // Tertiary
+                    : 'enabled:hover:bg-background-accent200/75'; // iconOnly
     // Icon color
     var iconColor = isDisabled
-        ? 'text-light-text-disabled dark:text-dark-text-disabled'
+        ? 'text-fg-disabled'
         : state === 'selected'
-            ? 'text-light-text-contrast dark:text-dark-text-contrast' // Selected state
+            ? 'text-primary-contrast' // Selected state
             : color === 'primary'
-                ? 'text-light-text-primary dark:text-dark-text-contrast' // Primary
+                ? 'text-accent-contrast' // Primary
                 : color === 'secondary'
-                    ? 'text-light-text-primary dark:text-dark-text-primary' // Secondary
+                    ? 'text-fg-primary' // Secondary
                     : color === 'tertiary'
-                        ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
-                        : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
+                        ? 'text-fg-primary' // Tertiary
+                        : 'text-fg-primary'; // iconOnly
     // State classes, including loading
     var stateClasses = loading
         ? 'cursor-wait' // Show a waiting cursor during loading

package/dist/components/line.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 export default function Line(_a) {
     var _b = _a.direction, direction = _b === void 0 ? 'horizontal' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
-    var baseClasses = 'bg-light-misc-divider dark:bg-dark-misc-divider';
+    var baseClasses = 'bg-misc-divider';
     if (direction === 'vertical') {
         return (<div className={"".concat(baseClasses, " w-px h-full ").concat(className)}/>);
     }

package/dist/components/link.jsx

@@ -19,24 +19,24 @@ export default function Link(_a) {
     // Light mode uses the -dark shade so link text keeps 4.5:1 on light backgrounds
     var colorClasses = {
         info: {
-            default: 'text-light-info-dark dark:text-dark-info-main',
-            hover: 'hover:underline-offset-[4px] dark:hover:text-dark-info-light',
-            visited: 'visited:text-light-info-dark dark:visited:text-dark-info-light',
+            default: 'text-info-text',
+            hover: 'hover:underline-offset-[4px] hover:text-info-textHover',
+            visited: 'visited:text-info-textHover',
         },
         error: {
-            default: 'text-light-error-dark dark:text-dark-error-main',
-            hover: 'hover:underline-offset-[4px] dark:hover:text-dark-error-light',
-            visited: 'visited:text-light-error-dark dark:visited:text-dark-error-light',
+            default: 'text-error-text',
+            hover: 'hover:underline-offset-[4px] hover:text-error-textHover',
+            visited: 'visited:text-error-textHover',
         },
         warning: {
-            default: 'text-light-warning-dark dark:text-dark-warning-main',
-            hover: 'hover:underline-offset-[4px] dark:hover:text-dark-warning-light',
-            visited: 'visited:text-light-warning-dark dark:visited:text-dark-warning-light',
+            default: 'text-warning-text',
+            hover: 'hover:underline-offset-[4px] hover:text-warning-textHover',
+            visited: 'visited:text-warning-textHover',
         },
         success: {
-            default: 'text-light-success-dark dark:text-dark-success-main',
-            hover: 'hover:underline-offset-[4px] dark:hover:text-dark-success-light',
-            visited: 'visited:text-light-success-dark dark:visited:text-dark-success-light',
+            default: 'text-success-text',
+            hover: 'hover:underline-offset-[4px] hover:text-success-textHover',
+            visited: 'visited:text-success-textHover',
         },
     };
     var selectedColorClasses = colorClasses[color];
@@ -58,7 +58,7 @@ export default function Link(_a) {
         body2: 'text-body2',
         caption: 'text-caption',
     }[size];
-    var linkClasses = "\n    ".concat(sizeClass, "\n    ").concat(selectedColorClasses.default, "\n    ").concat(selectedColorClasses.hover, "\n    ").concat(selectedColorClasses.visited, "\n    underline\n    underline-offset-[2px]\n    decoration-2\n    cursor-pointer\n    rounded-[2px]\n    transition-[color,text-underline-offset]\n    duration-150\n    ease-out\n    motion-reduce:transition-none\n    ").concat(focusRing, "\n    ").concat(className, "\n  ").trim().replace(/\s+/g, ' ');
+    var linkClasses = "\n    ".concat(sizeClass, "\n    ").concat(selectedColorClasses.default, "\n    ").concat(selectedColorClasses.hover, "\n    ").concat(selectedColorClasses.visited, "\n    underline\n    underline-offset-[2px]\n    decoration-2\n    cursor-pointer\n    rounded-inline\n    transition-[color,text-underline-offset]\n    duration-[var(--os-duration-fast)]\n    ease-out\n    motion-reduce:transition-none\n    ").concat(focusRing, "\n    ").concat(className, "\n  ").trim().replace(/\s+/g, ' ');
     var commonProps = __assign({ className: linkClasses }, (shouldOpenInNewTab && {
         target: '_blank',
         rel: 'noopener noreferrer',

package/dist/components/loadingScreen.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 export default function LoadingScreen() {
     return (<div role="status" aria-label="Loading" className="flex justify-center items-center h-full w-full min-h-[200px]">
-        <div className="w-12 h-12 rounded-full border-4 border-current border-t-transparent text-light-text-primary dark:text-dark-text-primary animate-spin"></div>
+        <div className="w-12 h-12 rounded-full border-4 border-current border-t-transparent text-fg-primary animate-spin"></div>
     </div>);
 }
 ;

package/dist/components/menu.jsx

@@ -2,7 +2,8 @@
 import React, { forwardRef } from 'react';
 var Menu = forwardRef(function (_a, ref) {
     var children = _a.children, width = _a.width, _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (<div ref={ref} className={"\n          bg-light-background-accent300 dark:bg-dark-background-accent100\n          rounded-[12px]\n          shadow-lg\n          dark:ring-1 dark:ring-dark-misc-divider\n          overflow-hidden\n          ".concat(className, "\n        ")} style={{ width: width || 'auto' }}>
+    // dark-only edge: a ring only in dark mode, so it keeps a dark: variant (it follows whatever dark variant the app's preset/@theme defines, class-only or OS-aware)
+    return (<div ref={ref} className={"\n          bg-background-overlay\n          rounded-container\n          shadow-overlay\n          dark:ring-1 dark:ring-misc-divider\n          overflow-hidden\n          ".concat(className, "\n        ")} style={{ width: width || 'auto' }}>
         {/* 4px padding keeps the 8px item corners concentric with the 12px menu corners */}
         <div className="p-1 flex flex-col gap-0.5">
           {children}

package/dist/components/menuItem.jsx

@@ -20,9 +20,9 @@ export default function MenuItem(_a) {
     var paddingClass = size === 'tiny' ? 'p-1' : 'p-2';
     var content = (<div id={id} role={href ? undefined : role} 
     // A link wrapper is already focusable; otherwise the row itself takes focus
-    tabIndex={href ? undefined : tabIndex} aria-selected={role === 'option' ? !!isSelected : undefined} className={"\n        flex items-center ".concat(paddingClass, " rounded-[8px] cursor-pointer justify-between text-left ").concat(stateTransition, " ").concat(pressFeedbackAny, " ").concat(focusRing, "\n        ").concat(isSelected
-            ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast'
-            : "hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200 ".concat(isActive ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' : ''), "\n        ").concat(className, "\n      ")} style={{ width: '100%' }} onClick={onClick} onKeyDown={function (e) {
+    tabIndex={href ? undefined : tabIndex} aria-selected={role === 'option' ? !!isSelected : undefined} className={"\n        flex items-center ".concat(paddingClass, " rounded-control cursor-pointer justify-between text-left ").concat(stateTransition, " ").concat(pressFeedbackAny, " ").concat(focusRing, "\n        ").concat(isSelected
+            ? 'bg-primary-dark text-primary-contrast'
+            : "hover:bg-background-accent200 ".concat(isActive ? 'bg-background-accent200' : ''), "\n        ").concat(className, "\n      ")} style={{ width: '100%' }} onClick={onClick} onKeyDown={function (e) {
             if (!href && e.target === e.currentTarget && (e.key === 'Enter' || e.key === ' ')) {
                 e.preventDefault();
                 e.currentTarget.click();
@@ -30,12 +30,12 @@ export default function MenuItem(_a) {
         }}>
       {/* Left group: icon/userImg + label with 8px gap */}
       <div className="flex items-center gap-2 min-w-0">
-        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : icon ? (<span className={"".concat(iconSize, " flex-shrink-0 flex items-center justify-center")}>{icon}</span>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " flex-shrink-0 ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary')} strokeWidth={2}/>))}
+        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : icon ? (<span className={"".concat(iconSize, " flex-shrink-0 flex items-center justify-center")}>{icon}</span>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " flex-shrink-0 ").concat(isSelected ? 'text-primary-contrast' : 'text-fg-secondary')} strokeWidth={2}/>))}
         <div className="flex flex-col min-w-0">
-          <span className={"truncate ".concat(labelClass, " ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-primary dark:text-dark-text-primary')}>
+          <span className={"truncate ".concat(labelClass, " ").concat(isSelected ? 'text-primary-contrast' : 'text-fg-primary')}>
             {label}
           </span>
-          {secondLabel && (<span className={"truncate ".concat(secondLabelClass, " opacity-70 ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-primary dark:text-dark-text-primary')}>
+          {secondLabel && (<span className={"truncate ".concat(secondLabelClass, " opacity-70 ").concat(isSelected ? 'text-primary-contrast' : 'text-fg-primary')}>
               {secondLabel}
             </span>)}
         </div>
@@ -46,11 +46,11 @@ export default function MenuItem(_a) {
         {tag && (<Tag variant={tag.variant || 'contained'} size={tagSize} label={tag.label} iconName={tag.iconName} 
         // 'default' has a fill that stays visible on the menu background
         color={(_b = tag.color) !== null && _b !== void 0 ? _b : 'default'}/>)}
-        {IconRight && (<IconRight className={"".concat(iconSize, " ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary', " flex-shrink-0")} strokeWidth={2}/>)}
+        {IconRight && (<IconRight className={"".concat(iconSize, " ").concat(isSelected ? 'text-primary-contrast' : 'text-fg-secondary', " flex-shrink-0")} strokeWidth={2}/>)}
         {rightAction && (<div onClick={function (e) { return e.stopPropagation(); }}>
             {rightAction}
           </div>)}
       </div>
     </div>);
-    return href ? <NextLink href={href} className={"block rounded-[8px] ".concat(focusRing)}>{content}</NextLink> : content;
+    return href ? <NextLink href={href} className={"block rounded-control ".concat(focusRing)}>{content}</NextLink> : content;
 }

package/dist/components/modal.jsx

@@ -70,19 +70,20 @@ export default function Modal(_a) {
     };
     if (!mounted)
         return null;
-    return (<div className={"fixed bg-light-misc-scrim/40 dark:bg-dark-misc-scrim/40 flex items-center justify-center z-50\n        transition-opacity duration-150 ease-out motion-reduce:transition-none ".concat(visible ? 'opacity-100' : 'opacity-0')} style={{ top: 0, left: 0, right: 0, bottom: 0 }} onClick={handleOverlayClick}>
-      <div ref={panelRef} role="dialog" aria-modal="true" aria-labelledby={title ? titleId : undefined} tabIndex={-1} className={"bg-light-background-default dark:bg-dark-background-accent100 dark:ring-1 dark:ring-dark-misc-divider rounded-[8px] ".concat(modalWidth, " flex flex-col outline-none\n          ").concat(overlayTransition, " ").concat(visible ? overlayVisible : overlayHidden)} style={{
+    // dark-only edge: a ring only in dark mode, so it keeps a dark: variant (it follows whatever dark variant the app's preset/@theme defines, class-only or OS-aware)
+    return (<div className={"fixed bg-misc-scrim/40 flex items-center justify-center z-[var(--os-z-overlay)]\n        transition-opacity duration-[var(--os-duration-fast)] ease-out motion-reduce:transition-none ".concat(visible ? 'opacity-100' : 'opacity-0')} style={{ top: 0, left: 0, right: 0, bottom: 0 }} onClick={handleOverlayClick}>
+      <div ref={panelRef} role="dialog" aria-modal="true" aria-labelledby={title ? titleId : undefined} tabIndex={-1} className={"bg-background-elevated dark:ring-1 dark:ring-misc-divider rounded-control ".concat(modalWidth, " flex flex-col outline-none\n          ").concat(overlayTransition, " ").concat(visible ? overlayVisible : overlayHidden)} style={{
             maxWidth: maxWidth,
             width: 'calc(100vw - 64px)',
             maxHeight: '90vh',
             overflow: 'hidden',
         }}>
-        {(title || actions) && (<div className="px-6 py-3 border-b border-light-misc-divider dark:border-dark-misc-divider flex justify-between items-start" style={{ flexShrink: 0 }}>
+        {(title || actions) && (<div className="px-6 py-3 border-b border-misc-divider flex justify-between items-start" style={{ flexShrink: 0 }}>
             {title && (<div className="flex flex-col">
-                <h2 id={titleId} className="text-h5 text-light-text-primary dark:text-dark-text-primary">
+                <h2 id={titleId} className="text-h5 text-fg-primary">
                   {title}
                 </h2>
-                {secondTitle && (<span className="text-body2 opacity-70 text-light-text-primary dark:text-dark-text-primary">
+                {secondTitle && (<span className="text-body2 opacity-70 text-fg-primary">
                     {secondTitle}
                   </span>)}
               </div>)}
@@ -91,7 +92,7 @@ export default function Modal(_a) {
               </div>)}
           </div>)}
 
-        <div className="text-body1 space-y-4 text-light-text-primary dark:text-dark-text-primary p-6" style={{
+        <div className="text-body1 space-y-4 text-fg-primary p-6" style={{
             overflowY: 'auto',
             flexGrow: 1,
             minHeight: 0,

package/dist/components/navigation.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 export default function Navigation(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (<nav className={"\n        bg-light-background-default dark:bg-dark-background-default\n        border-r border-light-misc-divider dark:border-dark-misc-divider\n        p-2 flex flex-col gap-0.5\n        ".concat(className, "\n      ")}>
+    return (<nav className={"\n        bg-background-default\n        border-r border-misc-divider\n        p-2 flex flex-col gap-0.5\n        ".concat(className, "\n      ")}>
       {children}
     </nav>);
 }

package/dist/components/popover.jsx

@@ -45,9 +45,10 @@ export default function Popover(_a) {
     if (!mounted || !hasMounted || !anchorEl)
         return null;
     // Render popover in a portal to prevent layout shifts and positioning issues
-    return createPortal(<div id={id} ref={setPopoverElement} style={styles.popper} {...attributes.popper} className="z-50" role="dialog">
+    // dark-only edge: a ring only in dark mode, so it keeps a dark: variant (it follows whatever dark variant the app's preset/@theme defines, class-only or OS-aware)
+    return createPortal(<div id={id} ref={setPopoverElement} style={styles.popper} {...attributes.popper} className="z-[var(--os-z-overlay)]" role="dialog">
       {/* Popper owns the outer transform, so the fade and scale go on this inner panel */}
-      <div className={"bg-light-background-accent300 dark:bg-dark-background-accent100 dark:ring-1 dark:ring-dark-misc-divider rounded-[8px] shadow-lg p-2 origin-top-left\n          ".concat(overlayTransition, " ").concat(visible ? overlayVisible : overlayHidden)}>
+      <div className={"bg-background-overlay dark:ring-1 dark:ring-misc-divider rounded-control shadow-overlay p-2 origin-top-left\n          ".concat(overlayTransition, " ").concat(visible ? overlayVisible : overlayHidden)}>
         {children}
       </div>
     </div>, document.body // Mounting the popover in the document body for isolation

package/dist/components/radioGroup.jsx

@@ -11,18 +11,18 @@ export default function RadioGroup(_a) {
             return (<label key={option.value} className="group flex items-start cursor-pointer">
             <input type="radio" name={groupName} value={option.value} checked={isSelected} onChange={function () { return onChange(option.value); }} className="peer sr-only"/>
             {/* Hover halo and hit area, same as Checkbox */}
-            <span className={"relative flex flex-shrink-0 items-center justify-center w-6 h-6 rounded-full ".concat(stateTransition, "\n                group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected\n                peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-0 peer-focus-visible:outline-light-text-primary dark:peer-focus-visible:outline-dark-text-primary")}>
+            <span className={"relative flex flex-shrink-0 items-center justify-center w-6 h-6 rounded-full ".concat(stateTransition, "\n                group-hover:bg-action-selected\n                peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-0 peer-focus-visible:outline-fg-primary")}>
               {/* outer circle */}
               <span className={"relative flex justify-center items-center w-4 h-4 rounded-full border-2 ".concat(stateTransition, "\n                  ").concat(isSelected
-                    ? 'border-light-text-primary dark:border-dark-text-primary'
-                    : 'border-light-text-secondary dark:border-dark-text-secondary', "\n                ")}>
+                    ? 'border-fg-primary'
+                    : 'border-fg-secondary', "\n                ")}>
                 {/* Inner circle; always rendered so it can scale in and out */}
-                <span className={"absolute w-2 h-2 rounded-full bg-light-text-primary dark:bg-dark-text-primary ".concat(popTransition, " ").concat(isSelected ? 'scale-100' : 'scale-0')}/>
+                <span className={"absolute w-2 h-2 rounded-full bg-fg-primary ".concat(popTransition, " ").concat(isSelected ? 'scale-100' : 'scale-0')}/>
               </span>
             </span>
             <span className="flex flex-col ml-2">
-              <span className="text-body1 text-light-text-primary dark:text-dark-text-primary">{option.label}</span>
-              {option.secondLabel && (<span className="text-body2 opacity-70 text-light-text-primary dark:text-dark-text-primary">{option.secondLabel}</span>)}
+              <span className="text-body1 text-fg-primary">{option.label}</span>
+              {option.secondLabel && (<span className="text-body2 opacity-70 text-fg-primary">{option.secondLabel}</span>)}
             </span>
           </label>);
         })}

package/dist/components/select.jsx

@@ -151,31 +151,31 @@ export default function Select(_a) {
     // Determine border and background styles based on state
     var getStateStyles = function () {
         if (disabled) {
-            return 'border border-light-actionOutlinedBorder-disabled dark:border-dark-actionOutlinedBorder-disabled bg-light-background-default dark:bg-dark-background-default';
+            return 'border border-actionOutlinedBorder-disabled bg-background-default';
         }
         if (isOpen) {
             // Same 2px offset outline as focus and Button
-            return 'border border-light-actionOutlinedBorder-enabled dark:border-dark-actionOutlinedBorder-enabled outline outline-2 outline-offset-2 outline-light-text-primary dark:outline-dark-text-primary bg-light-background-default dark:bg-dark-background-default';
+            return 'border border-actionOutlinedBorder-enabled outline outline-2 outline-offset-2 outline-fg-primary bg-background-default';
         }
-        return "border border-light-actionOutlinedBorder-enabled dark:border-dark-actionOutlinedBorder-enabled bg-light-background-default dark:bg-dark-background-default\n      hover:border-light-text-secondary dark:hover:border-dark-text-secondary hover:bg-light-action-hover dark:hover:bg-dark-action-hover";
+        return "border border-actionOutlinedBorder-enabled bg-background-default\n      hover:border-fg-secondary hover:bg-action-hover";
     };
     // Determine text color
     var getTextColor = function () {
         if (disabled) {
-            return 'text-light-text-disabled dark:text-dark-text-disabled';
+            return 'text-fg-disabled';
         }
-        return 'text-light-text-primary dark:text-dark-text-primary';
+        return 'text-fg-primary';
     };
     // Determine icon color
     var getIconColor = function () {
         if (disabled) {
-            return 'text-light-text-disabled dark:text-dark-text-disabled';
+            return 'text-fg-disabled';
         }
-        return 'text-light-text-secondary dark:text-dark-text-secondary';
+        return 'text-fg-secondary';
     };
     return (<div className={"relative ".concat(className)} style={{ width: width || '100%' }}>
       {/* Select Button */}
-      <div ref={selectRef} role="combobox" aria-haspopup="listbox" aria-expanded={isOpen} aria-controls={listboxId} aria-activedescendant={isOpen && activeIndex >= 0 ? optionId(activeIndex) : undefined} aria-disabled={disabled || undefined} className={"\n          rounded-[8px]\n          ".concat(getStateStyles(), "\n          ").concat(disabled ? 'cursor-not-allowed' : 'cursor-pointer', "\n          ").concat(stateTransition, "\n          ").concat(focusRing, "\n        ")} onClick={handleToggle} tabIndex={disabled ? -1 : 0} onKeyDown={handleKeyDown}>
+      <div ref={selectRef} role="combobox" aria-haspopup="listbox" aria-expanded={isOpen} aria-controls={listboxId} aria-activedescendant={isOpen && activeIndex >= 0 ? optionId(activeIndex) : undefined} aria-disabled={disabled || undefined} className={"\n          rounded-control\n          ".concat(getStateStyles(), "\n          ").concat(disabled ? 'cursor-not-allowed' : 'cursor-pointer', "\n          ").concat(stateTransition, "\n          ").concat(focusRing, "\n        ")} onClick={handleToggle} tabIndex={disabled ? -1 : 0} onKeyDown={handleKeyDown}>
         {/* Inner Content Container; 7px vertical padding makes the control 40px like Button and TextField */}
         <div className={"flex items-center justify-between px-2 py-[7px] ".concat(getTextColor())}>
           {/* Content Container */}
@@ -190,12 +190,12 @@ export default function Select(_a) {
           </div>
 
           {/* Chevron Icon */}
-          <ChevronDown className={"\n              w-6 h-6 flex-shrink-0 ml-1\n              ".concat(getIconColor(), "\n              transition-transform duration-150 ease-out motion-reduce:transition-none\n              ").concat(isOpen ? 'transform rotate-180' : '', "\n            ")} strokeWidth={2} aria-hidden/>
+          <ChevronDown className={"\n              w-6 h-6 flex-shrink-0 ml-1\n              ".concat(getIconColor(), "\n              transition-transform duration-[var(--os-duration-fast)] ease-out motion-reduce:transition-none\n              ").concat(isOpen ? 'transform rotate-180' : '', "\n            ")} strokeWidth={2} aria-hidden/>
         </div>
       </div>
 
       {/* Dropdown Menu */}
-      {menuMounted && (<div id={listboxId} role="listbox" aria-multiselectable={multiple || undefined} className={"absolute z-50 mt-1 left-0 origin-top ".concat(overlayTransition, " ").concat(menuVisible ? overlayVisible : overlayHidden)} style={{ width: width || '100%' }}>
+      {menuMounted && (<div id={listboxId} role="listbox" aria-multiselectable={multiple || undefined} className={"absolute z-[var(--os-z-overlay)] mt-1 left-0 origin-top ".concat(overlayTransition, " ").concat(menuVisible ? overlayVisible : overlayHidden)} style={{ width: width || '100%' }}>
           <Menu ref={menuRef} width={width || '100%'} className="max-h-[320px] overflow-y-auto">
             {options.map(function (option, index) { return (<MenuItem key={option.value} id={optionId(index)} role="option" tabIndex={-1} isActive={index === activeIndex} label={option.label} iconName={option.iconName} isSelected={isSelected(option.value)} onClick={function () { return handleSelect(option.value); }} className="w-full"/>); })}
           </Menu>