@robert-stackflow/oneui 0.1.0 → 0.3.0

package/components/MultiSelect.d.ts

@@ -1,6 +1,6 @@
 import { type FieldOptions } from "./field";
 import type { SelectOption } from "./types";
-export declare function MultiSelect({ value, onChange, options, label, disabled, readOnly, required, name, id: controlId, error, hint, maxSelected, clearable, placeholder, ...aria }: FieldOptions & {
+export declare function MultiSelect({ value, onChange, options, label, disabled, readOnly, required, name, id: controlId, error, hint, maxSelected, clearable, placeholder, display, ...aria }: FieldOptions & {
     value: string[];
     onChange(value: string[]): void;
     options: SelectOption[];
@@ -9,4 +9,5 @@ export declare function MultiSelect({ value, onChange, options, label, disabled,
     maxSelected?: number;
     clearable?: boolean;
     placeholder?: string;
+    display?: "summary" | "tags";
 }): import("react").JSX.Element;

package/components/MultiSelect.js

@@ -9,6 +9,9 @@ import { Popover } from "./Popover.js";
 import { usePopover } from "./usePopover.js";
 import { Button } from "./Button.js";
 import s from "./MultiSelect.module.css";
+import { SelectionTag } from "./SelectionTag.js";
+import { DisclosureChevron } from "./DisclosureChevron.js";
+import { joinIds } from "./field.js";
 function MultiSelect({
   value,
   onChange,
@@ -24,6 +27,7 @@ function MultiSelect({
   maxSelected = Infinity,
   clearable = true,
   placeholder = "\u8BF7\u9009\u62E9",
+  display = "summary",
   ...aria
 }) {
   const field = useFieldControl({
@@ -37,7 +41,10 @@ function MultiSelect({
     hint,
     ...aria
   });
-  const pop = usePopover(field.disabled || field.readOnly), [query, setQuery] = useState(""), list = useRef(null), search = useRef(null), id = useId();
+  const pop = usePopover(
+    field.disabled || field.readOnly
+  ), [query, setQuery] = useState(""), list = useRef(null), search = useRef(null), id = useId();
+  const { disabled: triggerDisabled, ...tagField } = fieldTriggerProps(field);
   const reserveIcon = options.some((option) => !!option.icon);
   const filtered = options.filter(
     (item) => item.label.toLowerCase().includes(query.toLowerCase())
@@ -54,9 +61,65 @@ function MultiSelect({
       search.current?.focus();
     }
   }, [pop.open]);
+  const remove = (id2) => {
+    if (field.disabled || field.readOnly || options.find((option) => option.value === id2)?.disabled)
+      return;
+    onChange(value.filter((v) => v !== id2));
+    pop.anchor.current?.focus();
+  };
   const summary = value.length ? options.filter((item) => value.includes(item.value)).map((item) => item.label).slice(0, 2).join("\u3001") + (value.length > 2 ? ` +${value.length - 2}` : "") : placeholder;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    display === "tags" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...tagField,
+          ref: pop.anchor,
+          role: "combobox",
+          "aria-expanded": pop.open,
+          "aria-controls": id,
+          "aria-haspopup": "dialog",
+          "aria-disabled": field.disabled || void 0,
+          "aria-describedby": joinIds(field.descriptionId, id + "-summary"),
+          "data-disabled": triggerDisabled,
+          "data-readonly": field.readOnly || void 0,
+          className: s.tagTrigger,
+          tabIndex: field.disabled ? -1 : 0,
+          onClick: pop.toggle,
+          onKeyDown: (event) => {
+            if (event.target !== event.currentTarget || field.disabled || field.readOnly)
+              return;
+            if (["ArrowDown", "Enter", " "].includes(event.key)) {
+              event.preventDefault();
+              pop.show();
+            }
+            if (event.key === "Backspace" && value.length) {
+              event.preventDefault();
+              remove(value[value.length - 1]);
+            }
+          },
+          children: [
+            value.map((id2) => {
+              const option = options.find((option2) => option2.value === id2);
+              return /* @__PURE__ */ jsx(
+                SelectionTag,
+                {
+                  label: option?.label || id2,
+                  icon: option?.icon,
+                  disabled: field.disabled || option?.disabled,
+                  onRemove: field.readOnly ? void 0 : () => remove(id2),
+                  removeLabel: "\u79FB\u9664 " + (option?.label || id2)
+                },
+                id2
+              );
+            }),
+            !value.length && /* @__PURE__ */ jsx("span", { className: s.tagPlaceholder, children: placeholder }),
+            /* @__PURE__ */ jsx("span", { className: s.tagChevron, children: /* @__PURE__ */ jsx(DisclosureChevron, { expanded: pop.open }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: id + "-summary", className: s.hidden, children: value.length ? "\u5DF2\u9009\u62E9 " + summary : "\u672A\u9009\u62E9" })
+    ] }) : /* @__PURE__ */ jsx(
       SelectTrigger,
       {
         ...fieldTriggerProps(field),
@@ -88,6 +151,7 @@ function MultiSelect({
         onClose: pop.close,
         label,
         width: 270,
+        matchAnchorWidth: display === "tags",
         onKeyDown: (event) => moveMenuFocus(event, list.current),
         children: [
           /* @__PURE__ */ jsxs("div", { className: s.multiSearch, children: [

package/components/MultiSelect.module.css

@@ -8,6 +8,43 @@
   max-width: 280px;
   padding: 5px 10px;
 }
+.tagTrigger {
+  composes: surface from "./Control.module.css";
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+  min-width: 0;
+  padding: 5px 8px;
+  cursor: pointer;
+}
+.tagTrigger.tagTrigger {
+  height: auto;
+  min-height: var(--control-height);
+}
+.tagPlaceholder {
+  color: var(--placeholder);
+}
+.tagChevron {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  color: var(--muted);
+}
+.tagChevron > svg {
+  width: 16px;
+  height: 16px;
+}
+.hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
 .multiTrigger span {
   white-space: nowrap;
   overflow: hidden;
@@ -38,6 +75,7 @@
   color: var(--muted);
 }
 .multiList {
+  composes: stack from "./OptionList.module.css";
   padding: 5px 0;
   max-height: 220px;
   overflow: auto;

package/components/NumberInput.js

@@ -40,6 +40,7 @@ function NumberInput({
     {
       className: s.number,
       "data-disabled": disabled,
+      "data-readonly": readOnly || void 0,
       "aria-invalid": field.invalid || invalid,
       children: [
         /* @__PURE__ */ jsx(

package/components/OptionList.module.css

@@ -0,0 +1,12 @@
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-item-spacing, 1px);
+}
+.stack > * {
+  flex-shrink: 0;
+}
+.stack.stack > [data-menu-item],
+.stack.stack > * > [data-menu-item] {
+  margin: 0;
+}

package/components/PasswordField.js

@@ -20,6 +20,7 @@ function PasswordField({
       {
         className: s.control,
         "data-disabled": field.disabled,
+        "data-readonly": field.readOnly || void 0,
         "aria-invalid": field.invalid,
         children: [
           /* @__PURE__ */ jsx(

package/components/PinInput.js

@@ -61,6 +61,7 @@ function PinInput({
       ref: root,
       className: s.root,
       "data-disabled": field.disabled,
+      "data-readonly": field.readOnly || void 0,
       onPointerDown: (event) => {
         if (event.button !== 0 || field.disabled) return;
         event.preventDefault();

package/components/Popover.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode, type RefObject } from "react";
-export declare function Popover({ open: requestedOpen, onClose, anchor, children, width, label, role, id, onKeyDown, descriptionId, }: {
+export declare function Popover({ open: requestedOpen, onClose, anchor, children, width, label, role, id, onKeyDown, descriptionId, autoFocus, matchAnchorWidth, className, }: {
     open: boolean;
     onClose(): void;
     anchor: RefObject<HTMLElement | null>;
@@ -10,4 +10,7 @@ export declare function Popover({ open: requestedOpen, onClose, anchor, children
     id?: string;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     descriptionId?: string;
+    autoFocus?: boolean;
+    matchAnchorWidth?: boolean;
+    className?: string;
 }): import("react").ReactPortal;

package/components/Popover.js

@@ -19,7 +19,10 @@ function Popover({
   role = "dialog",
   id,
   onKeyDown,
-  descriptionId
+  descriptionId,
+  autoFocus = true,
+  matchAnchorWidth = false,
+  className = ""
 }) {
   const owner = useSurfacePortal(), portalHost = owner?.host || document.body, open = requestedOpen && owner?.active !== false;
   const ref = useRef(null), close = useRef(onClose);
@@ -64,7 +67,10 @@ function Popover({
       const viewportBottom = viewportTop + (viewport?.height ?? innerHeight);
       const rect = trigger.getBoundingClientRect(), available = Math.max(0, viewportBottom - viewportTop - 24);
       surface.style.maxHeight = available + "px";
-      const actualWidth = Math.min(width, Math.max(0, viewportWidth - 24));
+      const actualWidth = Math.min(
+        matchAnchorWidth ? rect.width : width,
+        Math.max(0, viewportWidth - 24)
+      );
       surface.style.width = actualWidth + "px";
       const height = Math.min(surface.scrollHeight + 2, available);
       surface.style.left = Math.max(
@@ -86,7 +92,7 @@ function Popover({
       "enter",
       surface.dataset.side === "top" ? "top" : "bottom"
     );
-    if (role !== "listbox")
+    if (autoFocus && role !== "listbox")
       (surface.querySelector("[data-autofocus]") || surface.querySelector(
         'input:not([disabled]),button:not([disabled]),[tabindex="0"]'
       ))?.focus({ preventScroll: true });
@@ -126,7 +132,7 @@ function Popover({
       window.visualViewport?.removeEventListener("resize", position);
       window.visualViewport?.removeEventListener("scroll", position);
     };
-  }, [open, anchor, width, role, portalHost]);
+  }, [open, anchor, width, role, portalHost, autoFocus, matchAnchorWidth]);
   return createPortal(
     /* @__PURE__ */ jsx(
       "div",
@@ -138,7 +144,7 @@ function Popover({
         "aria-label": label,
         "aria-describedby": descriptionId,
         onKeyDown,
-        className: s.popover,
+        className: s.popover + " " + className,
         children: /* @__PURE__ */ jsx(FieldContext, { value: null, children })
       }
     ),

package/components/Popover.module.css

@@ -14,3 +14,6 @@
 .popover[inert] {
   pointer-events: none;
 }
+.popover:not(:popover-open) {
+  display: none;
+}

package/components/RadioGroup.module.css

@@ -46,7 +46,7 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--accent);
+  background: var(--accent-fill, var(--accent));
   transform: scale(0.25);
   opacity: 0;
   transition:
@@ -54,7 +54,7 @@
     opacity var(--motion-hover);
 }
 .group input:checked + .mark {
-  border-color: var(--accent);
+  border-color: var(--accent-fill, var(--accent));
 }
 .group input:checked + .mark::after {
   transform: scale(1);

package/components/SearchField.js

@@ -20,6 +20,7 @@ function SearchField({
     "div",
     {
       "data-disabled": props.disabled,
+      "data-readonly": props.readOnly || void 0,
       "aria-busy": loading || void 0,
       className: `${s.search} ${className}`,
       children: [

package/components/Select.js

@@ -136,6 +136,7 @@ function Select({
         ),
         label,
         role: "listbox",
+        className: s.options,
         children: [
           !options.length && /* @__PURE__ */ jsx("p", { className: s.empty, children: emptyText }),
           options.map((option, index) => /* @__PURE__ */ jsx(

package/components/Select.module.css

@@ -10,6 +10,9 @@
   gap: 18px;
   text-align: left;
 }
+.options {
+  composes: stack from "./OptionList.module.css";
+}
 
 .select svg {
   color: var(--muted);

package/components/SelectionTag.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export declare function SelectionTag({ label, icon, disabled, onRemove, removeLabel, }: {
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onRemove?(): void;
+    removeLabel?: string;
+}): import("react").JSX.Element;

package/components/SelectionTag.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import s from "./TagInput.module.css";
+function SelectionTag({
+  label,
+  icon,
+  disabled,
+  onRemove,
+  removeLabel = "\u5220\u9664\u6807\u7B7E " + label
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: s.tag, children: [
+    icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { children: label }),
+    onRemove && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": removeLabel,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: (event) => {
+          event.stopPropagation();
+          onRemove();
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Backspace" || event.key === "Delete") {
+            event.preventDefault();
+            event.stopPropagation();
+            onRemove();
+          }
+        },
+        children: /* @__PURE__ */ jsx(X, {})
+      }
+    )
+  ] });
+}
+export {
+  SelectionTag
+};

package/components/SettingsLayout.d.ts

@@ -1,8 +1,10 @@
 import type { ReactNode } from "react";
-export declare function SettingsLayout({ value, onChange, children, }: {
+import { type IndicatorGroup } from "./Indicator";
+export declare function SettingsLayout({ value, onChange, children, groups, }: {
     value: string;
     onChange(value: string): void;
     children: ReactNode;
+    groups?: IndicatorGroup<string>[];
 }): import("react").JSX.Element;
 export declare function SettingsCard({ children }: {
     children: ReactNode;

package/components/SettingsLayout.js

@@ -1,20 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Settings2, Palette } from "lucide-react";
 import { Indicator } from "./Indicator.js";
+import { Select } from "./Select.js";
 import s from "./SettingsLayout.module.css";
 function SettingsLayout({
   value,
   onChange,
-  children
+  children,
+  groups
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: s.layout, children: [
+  return /* @__PURE__ */ jsxs("div", { className: s.layout, "data-grouped": groups ? true : void 0, children: [
     /* @__PURE__ */ jsx(
       Indicator,
       {
         label: "\u8BBE\u7F6E\u5206\u7C7B",
         value,
         onChange,
-        groups: [
+        groups: groups ?? [
           {
             id: "settings",
             items: [
@@ -33,6 +35,20 @@ function SettingsLayout({
         ]
       }
     ),
+    groups && /* @__PURE__ */ jsx("div", { className: s.mobileCategories, children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "\u8BBE\u7F6E\u5206\u7C7B",
+        value,
+        onChange,
+        options: groups.flatMap(
+          (group) => group.items.map((item) => ({
+            value: item.value,
+            label: (group.label ? group.label + " \xB7 " : "") + item.label
+          }))
+        )
+      }
+    ) }),
     /* @__PURE__ */ jsx("div", { className: s.panel, children })
   ] });
 }

package/components/SettingsLayout.module.css

@@ -8,6 +8,13 @@
   position: sticky;
   top: 0;
 }
+.layout[data-grouped] {
+  grid-template-columns: 164px minmax(0, 1fr);
+}
+.mobileCategories {
+  display: none;
+  min-width: 0;
+}
 .panel {
   min-width: 0;
 }
@@ -21,12 +28,25 @@
   border: 1px solid var(--line);
   border-radius: var(--radius);
   background: var(--surface);
+  box-shadow: var(--card-shadow, none);
   margin-bottom: 28px;
 }
 .card > :last-child {
   border-bottom: 0;
 }
 @media (max-width: 800px) {
+  .layout[data-grouped] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .layout[data-grouped] > nav {
+    display: none;
+  }
+  .mobileCategories {
+    display: block;
+  }
+  .mobileCategories > button {
+    width: 100%;
+  }
   .layout {
     grid-template-columns: 1fr;
     gap: 24px;

package/components/Switch.module.css

@@ -30,16 +30,19 @@
   border-color: var(--muted);
 }
 .switch[aria-checked="true"] {
-  background: var(--accent);
-  border-color: var(--accent);
+  background: var(--switch-on, var(--accent));
+  border-color: var(--switch-on, var(--accent));
 }
 .switch[aria-checked="true"]:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--accent) 88%, var(--fg));
-  border-color: var(--accent);
+  background: var(
+    --switch-on-hover,
+    color-mix(in srgb, var(--accent) 88%, var(--fg))
+  );
+  border-color: var(--switch-on, var(--accent));
 }
 .switch[aria-checked="true"] span {
   transform: translateX(14px);
-  background: var(--on-accent);
+  background: var(--switch-thumb-on, var(--on-accent));
 }
 .switch:active:not(:disabled) span {
   width: 17px;

package/components/Table.d.ts

@@ -1,12 +1,16 @@
-import type { ReactNode } from "react";
+import type { ReactNode, HTMLAttributes, CSSProperties } from "react";
 export interface Column<T> {
     key: string;
     title: ReactNode;
     render: (row: T) => ReactNode;
+    align?: "left" | "center" | "right";
+    width?: CSSProperties["width"];
 }
-export declare function Table<T>({ columns, rows, rowKey, label, }: {
+export declare function Table<T>({ columns, rows, rowKey, label, role, rowAttributes, }: {
     columns: Column<T>[];
     rows: T[];
     rowKey: (row: T) => string;
     label: string;
+    role?: "table" | "treegrid";
+    rowAttributes?(row: T): HTMLAttributes<HTMLTableRowElement>;
 }): import("react").JSX.Element;

package/components/Table.js

@@ -4,13 +4,23 @@ function Table({
   columns,
   rows,
   rowKey,
-  label
+  label,
+  role,
+  rowAttributes
 }) {
-  return /* @__PURE__ */ jsx("div", { className: s.scroll, role: "region", "aria-label": label, tabIndex: 0, children: /* @__PURE__ */ jsxs("table", { className: s.table, children: [
+  return /* @__PURE__ */ jsx("div", { className: s.scroll, role: "region", "aria-label": label, tabIndex: 0, children: /* @__PURE__ */ jsxs("table", { className: s.table, role, children: [
     /* @__PURE__ */ jsx("caption", { className: s.caption, children: label }),
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((c) => /* @__PURE__ */ jsx("th", { scope: "col", children: c.title }, c.key)) }) }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((c) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        scope: "col",
+        style: { textAlign: c.align, width: c.width },
+        children: c.title
+      },
+      c.key
+    )) }) }),
     /* @__PURE__ */ jsxs("tbody", { children: [
-      rows.map((r) => /* @__PURE__ */ jsx("tr", { children: columns.map((c) => /* @__PURE__ */ jsx("td", { children: c.render(r) }, c.key)) }, rowKey(r))),
+      rows.map((r) => /* @__PURE__ */ jsx("tr", { ...rowAttributes?.(r), children: columns.map((c) => /* @__PURE__ */ jsx("td", { style: { textAlign: c.align }, children: c.render(r) }, c.key)) }, rowKey(r))),
       rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: s.empty, children: "\u6682\u65E0\u7ED3\u679C" }) })
     ] })
   ] }) });

package/components/TagInput.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { X } from "lucide-react";
+import { SelectionTag } from "./SelectionTag.js";
 import { FormField } from "./FormField.js";
 import { joinIds, useFieldControl } from "./field.js";
 import s from "./TagInput.module.css";
@@ -63,31 +63,19 @@ function TagInput({
         ref: root,
         className: s.control,
         "data-disabled": field.disabled,
+        "data-readonly": field.readOnly || void 0,
         "aria-invalid": field.invalid || !!error,
         onClick: () => input.current?.focus(),
         children: [
-          value.map((tag, index) => /* @__PURE__ */ jsxs("span", { className: s.tag, children: [
-            /* @__PURE__ */ jsx("span", { children: tag }),
-            !field.readOnly && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                disabled: field.disabled,
-                "aria-label": "\u5220\u9664\u6807\u7B7E " + tag,
-                onClick: (event) => {
-                  event.stopPropagation();
-                  remove(index);
-                },
-                onKeyDown: (event) => {
-                  if (event.key === "Backspace" || event.key === "Delete") {
-                    event.preventDefault();
-                    remove(index);
-                  }
-                },
-                children: /* @__PURE__ */ jsx(X, {})
-              }
-            )
-          ] }, tag)),
+          value.map((tag, index) => /* @__PURE__ */ jsx(
+            SelectionTag,
+            {
+              label: tag,
+              disabled: field.disabled,
+              onRemove: field.readOnly ? void 0 : () => remove(index)
+            },
+            tag
+          )),
           /* @__PURE__ */ jsx(
             "input",
             {

package/components/TagInput.module.css

@@ -49,7 +49,7 @@
   border-radius: 3px;
   color: var(--muted);
 }
-.tag button:hover {
+.tag button:hover:not(:disabled) {
   background: var(--hover);
   color: var(--fg);
 }

package/components/ThemeProvider.js

@@ -1,7 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from "react";
 import { UIProvider } from "./UIProvider.js";
-import { appearanceDefaults } from "./appearance.js";
+import {
+  appearanceDefaults,
+  normalizeAppearance
+} from "./appearance.js";
 function ThemeProvider({
   theme: suppliedTheme = "minimal",
   mode: suppliedMode = "system",
@@ -17,7 +20,10 @@ function ThemeProvider({
       const dark = mode === "system" ? media.matches : mode === "dark";
       root.dataset.uiTheme = theme;
       root.dataset.theme = dark ? "dark" : "light";
-      const prefs = appearance ?? appearanceDefaults(theme), baseline = appearanceDefaults(theme);
+      const prefs = normalizeAppearance(
+        appearance ?? appearanceDefaults(theme),
+        theme
+      ), baseline = appearanceDefaults(theme);
       const palette = [
         theme,
         dark,
@@ -41,13 +47,21 @@ function ThemeProvider({
       delete root.dataset.radius;
       const rgb = prefs.accent.slice(1).match(/../g).map((v) => parseInt(v, 16));
       const customAccent = prefs.accent.toLowerCase() !== baseline.accent.toLowerCase();
+      const onAccent = rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 > 155 ? "#141414" : "#fff";
       const background = dark ? "darkBackground" : "lightBackground", foreground = dark ? "darkForeground" : "lightForeground";
       const overrides = {
         "--surface": prefs[background] !== baseline[background] ? prefs[background] : void 0,
         "--fg": prefs[foreground] !== baseline[foreground] ? prefs[foreground] : void 0,
         "--text": prefs[foreground] !== baseline[foreground] ? prefs[foreground] : void 0,
         "--accent": customAccent ? prefs.accent : void 0,
-        "--on-accent": customAccent ? rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 > 155 ? "#141414" : "#fff" : void 0,
+        "--on-accent": customAccent ? onAccent : void 0,
+        "--accent-soft": customAccent ? `color-mix(in srgb, ${prefs.accent} 12%, var(--surface))` : void 0,
+        "--accent-fill": customAccent ? prefs.accent : void 0,
+        "--accent-fill-hover": customAccent ? `color-mix(in srgb, ${prefs.accent} 86%, var(--surface))` : void 0,
+        "--on-accent-fill": customAccent ? onAccent : void 0,
+        "--switch-on": customAccent ? prefs.accent : void 0,
+        "--switch-on-hover": customAccent ? `color-mix(in srgb, ${prefs.accent} 88%, var(--fg))` : void 0,
+        "--switch-thumb-on": customAccent ? onAccent : void 0,
         "--radius": prefs.radius !== baseline.radius ? prefs.radius + "px" : void 0,
         "--radius-lg": prefs.radius !== baseline.radius ? "calc(var(--radius) + 4px)" : void 0,
         "--ui-font": prefs.font === "system" ? void 0 : '"' + prefs.font + '", sans-serif'