@anyknown/ui 0.6.0 → 0.7.0

package/dist/components/slider/Slider.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useId, useRef, useState } from "react";
+import { color, font, motion, radius, shadow, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const ARROW_FRACTION = 0.05;
+const styles = stylex.create({
+    root: { display: "flex", flexDirection: "column", gap: space.xs, fontFamily: font.body },
+    label: { fontSize: text.sm, fontWeight: 500, color: color.text },
+    control: {
+        position: "relative",
+        height: "1.5rem",
+        borderRadius: radius.full,
+        backgroundColor: color.layer4,
+        cursor: "pointer",
+        touchAction: "none",
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 2,
+    },
+    disabled: { cursor: "not-allowed", opacity: 0.5 },
+    fill: {
+        position: "absolute",
+        insetInlineStart: 0,
+        insetBlock: 0,
+        borderRadius: radius.full,
+        backgroundColor: color.borderStrong,
+    },
+    thumb: {
+        position: "absolute",
+        insetBlock: "0.2rem",
+        width: "1.6rem",
+        borderRadius: radius.md,
+        backgroundColor: color.surfaceRaised,
+        boxShadow: shadow.raised,
+        transitionProperty: "inset-inline-start",
+        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
+        transitionTimingFunction: motion.easeOut,
+    },
+    still: { transitionDuration: { default: "0s", [REDUCED]: "0s" } },
+    grown: (ratio) => ({ width: `calc(1.6rem + (100% - 1.6rem) * ${ratio})` }),
+    slid: (ratio) => ({ insetInlineStart: `calc((100% - 1.6rem) * ${ratio})` }),
+});
+function snap(raw, min, max, step) {
+    const clamped = Math.min(max, Math.max(min, raw));
+    if (step <= 0)
+        return clamped;
+    const decimals = (String(step).split(".")[1] ?? "").length;
+    const stepped = min + Math.round((clamped - min) / step) * step;
+    return Number(Math.min(max, Math.max(min, stepped)).toFixed(decimals));
+}
+export function Slider({ value, onChange, min = 0, max = 1, step = 0.01, label, valueText, disabled = false, sx, "aria-label": ariaLabel, }) {
+    const labelId = useId();
+    const control = useRef(null);
+    const thumb = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const current = snap(value, min, max, step);
+    const ratio = max === min ? 0 : (current - min) / (max - min);
+    function emit(raw) {
+        const next = snap(raw, min, max, step);
+        if (next !== current)
+            onChange(next);
+    }
+    function ratioAt(clientX) {
+        const track = control.current;
+        const knob = thumb.current;
+        if (track == null || knob == null)
+            return ratio;
+        const rect = track.getBoundingClientRect();
+        const span = rect.width - knob.offsetWidth;
+        if (span <= 0)
+            return ratio;
+        return (clientX - rect.left - knob.offsetWidth / 2) / span;
+    }
+    function drag(event) {
+        emit(min + ratioAt(event.clientX) * (max - min));
+    }
+    return (_jsxs("div", { ...stylex.props(styles.root, sx), children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.label), children: label })), _jsxs("div", { ref: control, role: "slider", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current, "aria-valuetext": valueText?.(current), "aria-orientation": "horizontal", "aria-disabled": disabled || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-label": ariaLabel, onPointerDown: (event) => {
+                    if (disabled)
+                        return;
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    event.currentTarget.focus();
+                    setDragging(true);
+                    drag(event);
+                }, onPointerMove: (event) => {
+                    if (dragging)
+                        drag(event);
+                }, onPointerUp: () => setDragging(false), onPointerCancel: () => setDragging(false), onKeyDown: (event) => {
+                    if (disabled)
+                        return;
+                    const nudge = (max - min) * ARROW_FRACTION;
+                    if (event.key === "ArrowRight" || event.key === "ArrowUp")
+                        emit(current + nudge);
+                    else if (event.key === "ArrowLeft" || event.key === "ArrowDown")
+                        emit(current - nudge);
+                    else if (event.key === "Home")
+                        emit(min);
+                    else if (event.key === "End")
+                        emit(max);
+                    else
+                        return;
+                    event.preventDefault();
+                }, ...stylex.props(styles.control, disabled && styles.disabled), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.fill, styles.grown(ratio)) }), _jsx("span", { ref: thumb, "aria-hidden": "true", ...stylex.props(styles.thumb, dragging && styles.still, styles.slid(ratio)) })] })] }));
+}

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { Checkbox, type CheckboxProps } from "./components/checkbox/Checkbox.js"
 export { Radio, type RadioProps } from "./components/radio/Radio.js";
 export { RadioGroup, type RadioGroupProps } from "./components/radio/RadioGroup.js";
 export { Switch, type SwitchProps } from "./components/switch/Switch.js";
+export { Slider, type SliderProps } from "./components/slider/Slider.js";
 export { Select, SelectGroup, SelectItem, type SelectProps, type SelectGroupProps, type SelectItemProps, } from "./components/select/Select.js";
 export { DropdownMenu, DropdownItem, DropdownCheckboxItem, DropdownGroup, DropdownSeparator, DropdownSub, type DropdownMenuProps, type DropdownItemProps, type DropdownCheckboxItemProps, type DropdownGroupProps, type DropdownSubProps, } from "./components/dropdown/DropdownMenu.js";
 export { Dialog, DialogTrigger, DialogContent, DialogActions, DialogClose, ConfirmDialog, } from "./components/dialog/Dialog.js";
@@ -42,7 +43,9 @@ export type { HandoffReceiptProps, HandoffReason } from "./components/handoff-re
 export { Composer } from "./components/composer/Composer.js";
 export type { ComposerProps, SourceRef, SlashCommand } from "./components/composer/Composer.js";
 export { VoiceIndicator, type VoiceIndicatorProps } from "./components/voice-indicator/VoiceIndicator.js";
+export { LiveDot, type LiveDotProps } from "./components/live-dot/LiveDot.js";
 export type { VoiceState } from "./lib/voice.js";
+export { layerUp, type LayerName } from "./lib/layers.js";
 export { PasswordInput, defaultScorer } from "./components/password-input/PasswordInput.js";
 export type { PasswordInputProps } from "./components/password-input/PasswordInput.js";
 export { RecoveryKey, type RecoveryKeyProps } from "./components/recovery-key/RecoveryKey.js";

package/dist/index.js

@@ -9,6 +9,7 @@ export { Checkbox } from "./components/checkbox/Checkbox.js";
 export { Radio } from "./components/radio/Radio.js";
 export { RadioGroup } from "./components/radio/RadioGroup.js";
 export { Switch } from "./components/switch/Switch.js";
+export { Slider } from "./components/slider/Slider.js";
 export { Select, SelectGroup, SelectItem, } from "./components/select/Select.js";
 export { DropdownMenu, DropdownItem, DropdownCheckboxItem, DropdownGroup, DropdownSeparator, DropdownSub, } from "./components/dropdown/DropdownMenu.js";
 export { Dialog, DialogTrigger, DialogContent, DialogActions, DialogClose, ConfirmDialog, } from "./components/dialog/Dialog.js";
@@ -30,6 +31,8 @@ export { PermissionCard, DecisionCard } from "./components/interaction-card/Inte
 export { HandoffReceipt } from "./components/handoff-receipt/HandoffReceipt.js";
 export { Composer } from "./components/composer/Composer.js";
 export { VoiceIndicator } from "./components/voice-indicator/VoiceIndicator.js";
+export { LiveDot } from "./components/live-dot/LiveDot.js";
+export { layerUp } from "./lib/layers.js";
 export { PasswordInput, defaultScorer } from "./components/password-input/PasswordInput.js";
 export { RecoveryKey } from "./components/recovery-key/RecoveryKey.js";
 export { Dropzone, UploadList } from "./components/dropzone/Dropzone.js";

package/dist/lib/layers.d.ts

@@ -0,0 +1,7 @@
+/** rail → main → 訊息 → fold → 列。數字越大越深,面與面靠深淺分,不靠邊框。 */
+export type LayerName = "layer1" | "layer2" | "layer3" | "layer4" | "layer5";
+/**
+ * hover 升一階:一塊面的 hover 底色就是下一階。
+ * layer5 已經是最深的一階,再深的那一階沒有名字,用 borderStrong。
+ */
+export declare const layerUp: Record<LayerName, string>;

package/dist/lib/layers.js

@@ -0,0 +1,12 @@
+import { color } from "../tokens.stylex.js";
+/**
+ * hover 升一階:一塊面的 hover 底色就是下一階。
+ * layer5 已經是最深的一階,再深的那一階沒有名字,用 borderStrong。
+ */
+export const layerUp = {
+    layer1: color.layer2,
+    layer2: color.layer3,
+    layer3: color.layer4,
+    layer4: color.layer5,
+    layer5: color.borderStrong,
+};

package/dist/themes.stylex.d.ts

@@ -24,6 +24,11 @@ export declare const lightColor: stylex.Theme<stylex.VarGroup<Readonly<{
     sheen: string;
     successHl: string;
     dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
 }>, symbol>, symbol>;
 export declare const lightYarn: stylex.Theme<stylex.VarGroup<Readonly<{
     un: string;
@@ -108,6 +113,11 @@ export declare const darkColor: stylex.Theme<stylex.VarGroup<Readonly<{
     sheen: string;
     successHl: string;
     dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
 }>, symbol>, symbol>;
 export declare const darkYarn: stylex.Theme<stylex.VarGroup<Readonly<{
     un: string;
@@ -167,6 +177,99 @@ export declare const darkShadow: stylex.Theme<stylex.VarGroup<Readonly<{
     popover: string;
     raised: string;
 }>, symbol>, symbol>;
+export declare const neutralColor: stylex.Theme<stylex.VarGroup<Readonly<{
+    bg: string;
+    surface: string;
+    surfaceRaised: string;
+    border: string;
+    borderStrong: string;
+    text: string;
+    textMuted: string;
+    textFaint: string;
+    accent: string;
+    accentText: string;
+    accentSubtle: string;
+    danger: string;
+    dangerSubtle: string;
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    info: string;
+    infoSubtle: string;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
+}>, symbol>, symbol>;
+export declare const neutralLightColor: stylex.Theme<stylex.VarGroup<Readonly<{
+    bg: string;
+    surface: string;
+    surfaceRaised: string;
+    border: string;
+    borderStrong: string;
+    text: string;
+    textMuted: string;
+    textFaint: string;
+    accent: string;
+    accentText: string;
+    accentSubtle: string;
+    danger: string;
+    dangerSubtle: string;
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    info: string;
+    infoSubtle: string;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
+}>, symbol>, symbol>;
+export declare const neutralDarkColor: stylex.Theme<stylex.VarGroup<Readonly<{
+    bg: string;
+    surface: string;
+    surfaceRaised: string;
+    border: string;
+    borderStrong: string;
+    text: string;
+    textMuted: string;
+    textFaint: string;
+    accent: string;
+    accentText: string;
+    accentSubtle: string;
+    danger: string;
+    dangerSubtle: string;
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    info: string;
+    infoSubtle: string;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
+}>, symbol>, symbol>;
 /** 套在 root element 上:`<div {...stylex.props(...light)}>` */
 export declare const light: readonly [stylex.Theme<stylex.VarGroup<Readonly<{
     bg: string;
@@ -193,6 +296,11 @@ export declare const light: readonly [stylex.Theme<stylex.VarGroup<Readonly<{
     sheen: string;
     successHl: string;
     dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
 }>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
     un: string;
     sh: string;
@@ -271,6 +379,209 @@ export declare const dark: readonly [stylex.Theme<stylex.VarGroup<Readonly<{
     sheen: string;
     successHl: string;
     dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    popover: string;
+    raised: string;
+}>, symbol>, symbol>];
+/** neutral palette。`neutral` 跟隨系統 scheme,另外兩個鎖定。 */
+export declare const neutral: readonly [stylex.Theme<stylex.VarGroup<Readonly<{
+    bg: string;
+    surface: string;
+    surfaceRaised: string;
+    border: string;
+    borderStrong: string;
+    text: string;
+    textMuted: string;
+    textFaint: string;
+    accent: string;
+    accentText: string;
+    accentSubtle: string;
+    danger: string;
+    dangerSubtle: string;
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    info: string;
+    infoSubtle: string;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
+}>, symbol>, symbol>];
+export declare const neutralLight: readonly [stylex.Theme<stylex.VarGroup<Readonly<{
+    bg: string;
+    surface: string;
+    surfaceRaised: string;
+    border: string;
+    borderStrong: string;
+    text: string;
+    textMuted: string;
+    textFaint: string;
+    accent: string;
+    accentText: string;
+    accentSubtle: string;
+    danger: string;
+    dangerSubtle: string;
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    info: string;
+    infoSubtle: string;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+    shadow: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    un: string;
+    sh: string;
+    y0: string;
+    y1: string;
+    y2: string;
+    y3: string;
+    y4: string;
+    hi: string;
+}>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
+    popover: string;
+    raised: string;
+}>, symbol>, symbol>];
+export declare const neutralDark: readonly [stylex.Theme<stylex.VarGroup<Readonly<{
+    bg: string;
+    surface: string;
+    surfaceRaised: string;
+    border: string;
+    borderStrong: string;
+    text: string;
+    textMuted: string;
+    textFaint: string;
+    accent: string;
+    accentText: string;
+    accentSubtle: string;
+    danger: string;
+    dangerSubtle: string;
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    info: string;
+    infoSubtle: string;
+    focusRing: string;
+    bone: string;
+    sheen: string;
+    successHl: string;
+    dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
 }>, symbol>, symbol>, stylex.Theme<stylex.VarGroup<Readonly<{
     un: string;
     sh: string;

package/dist/themes.stylex.js

@@ -3,8 +3,11 @@
 //
 // 給有使用者切換主題的 app(例如 next-themes)。tokens 本身跟隨 OS,套上 theme 才會鎖定。
 // **要套就整組套**:只套 color 會讓布停在另一個主題,深色布配深色字。
+//
+// palette 是另一個維度:neutral 只換 color(紙與墨),布跟著亮暗走。
 import * as stylex from "@stylexjs/stylex";
 import { color, yarn, yarnSecondary, yarnGhost, yarnDanger, yarnSubtle, shadow } from "./tokens.stylex.js";
+const DARK = "@media (prefers-color-scheme: dark)";
 export const lightColor = stylex.createTheme(color, {
     bg: "#FAFAF6",
     surface: "#FFFFFF",
@@ -30,6 +33,11 @@ export const lightColor = stylex.createTheme(color, {
     sheen: "#F6F4EC",
     successHl: "#C6E0C6",
     dangerHl: "#EFCEC3",
+    layer1: "#EFECE3",
+    layer2: "#FAFAF6",
+    layer3: "#F1EFE7",
+    layer4: "#E8E5DA",
+    layer5: "#DEDACD",
 });
 export const lightYarn = stylex.createTheme(yarn, {
     un: "#11362C",
@@ -114,6 +122,11 @@ export const darkColor = stylex.createTheme(color, {
     sheen: "#35302A",
     successHl: "#2F4A2E",
     dangerHl: "#573328",
+    layer1: "#0E0C09",
+    layer2: "#181613",
+    layer3: "#211E19",
+    layer4: "#2B2721",
+    layer5: "#35302A",
 });
 export const darkYarn = stylex.createTheme(yarn, {
     un: "#173629",
@@ -173,6 +186,99 @@ export const darkShadow = stylex.createTheme(shadow, {
     popover: "0 8px 24px rgba(0, 0, 0, 0.4)",
     raised: "0 1px 2px rgba(0, 0, 0, 0.3)",
 });
+export const neutralColor = stylex.createTheme(color, {
+    bg: { default: "#FFFFFF", [DARK]: "#000000" },
+    surface: { default: "#F5F5F7", [DARK]: "#1C1C1E" },
+    surfaceRaised: { default: "#FFFFFF", [DARK]: "#2C2C2E" },
+    border: { default: "#E5E5EA", [DARK]: "#38383A" },
+    borderStrong: { default: "#C7C7CC", [DARK]: "#48484A" },
+    text: { default: "#1D1D1F", [DARK]: "#F5F5F7" },
+    textMuted: { default: "#6E6E73", [DARK]: "#98989D" },
+    textFaint: { default: "#86868B", [DARK]: "#8E8E93" },
+    accent: { default: "#1D1D1F", [DARK]: "#F5F5F7" },
+    accentText: { default: "#FFFFFF", [DARK]: "#000000" },
+    accentSubtle: { default: "#E8E8ED", [DARK]: "#2C2C2E" },
+    danger: { default: "#B3402E", [DARK]: "#DD7059" },
+    dangerSubtle: { default: "#F7E7E3", [DARK]: "#3D231E" },
+    success: { default: "#23705A", [DARK]: "#4FA184" },
+    successSubtle: { default: "#E7F0EB", [DARK]: "#22352E" },
+    warning: { default: "#B25000", [DARK]: "#FFB340" },
+    warningSubtle: { default: "#F5EBD9", [DARK]: "#3A2F1D" },
+    info: { default: "#2C5C86", [DARK]: "#6FA3CE" },
+    infoSubtle: { default: "#E4EDF5", [DARK]: "#1E2C38" },
+    focusRing: { default: "#1D1D1F", [DARK]: "#F5F5F7" },
+    bone: { default: "#E6E6EA", [DARK]: "#2C2C2E" },
+    sheen: { default: "#F2F2F5", [DARK]: "#3F3F42" },
+    successHl: { default: "#C6E0C6", [DARK]: "#2F4A2E" },
+    dangerHl: { default: "#EFCEC3", [DARK]: "#573328" },
+    layer1: { default: "#EFEFF2", [DARK]: "#000000" },
+    layer2: { default: "#FFFFFF", [DARK]: "#161618" },
+    layer3: { default: "#F2F2F5", [DARK]: "#242426" },
+    layer4: { default: "#E6E6EA", [DARK]: "#323234" },
+    layer5: { default: "#D9D9DE", [DARK]: "#3F3F42" },
+});
+export const neutralLightColor = stylex.createTheme(color, {
+    bg: "#FFFFFF",
+    surface: "#F5F5F7",
+    surfaceRaised: "#FFFFFF",
+    border: "#E5E5EA",
+    borderStrong: "#C7C7CC",
+    text: "#1D1D1F",
+    textMuted: "#6E6E73",
+    textFaint: "#86868B",
+    accent: "#1D1D1F",
+    accentText: "#FFFFFF",
+    accentSubtle: "#E8E8ED",
+    danger: "#B3402E",
+    dangerSubtle: "#F7E7E3",
+    success: "#23705A",
+    successSubtle: "#E7F0EB",
+    warning: "#B25000",
+    warningSubtle: "#F5EBD9",
+    info: "#2C5C86",
+    infoSubtle: "#E4EDF5",
+    focusRing: "#1D1D1F",
+    bone: "#E6E6EA",
+    sheen: "#F2F2F5",
+    successHl: "#C6E0C6",
+    dangerHl: "#EFCEC3",
+    layer1: "#EFEFF2",
+    layer2: "#FFFFFF",
+    layer3: "#F2F2F5",
+    layer4: "#E6E6EA",
+    layer5: "#D9D9DE",
+});
+export const neutralDarkColor = stylex.createTheme(color, {
+    bg: "#000000",
+    surface: "#1C1C1E",
+    surfaceRaised: "#2C2C2E",
+    border: "#38383A",
+    borderStrong: "#48484A",
+    text: "#F5F5F7",
+    textMuted: "#98989D",
+    textFaint: "#8E8E93",
+    accent: "#F5F5F7",
+    accentText: "#000000",
+    accentSubtle: "#2C2C2E",
+    danger: "#DD7059",
+    dangerSubtle: "#3D231E",
+    success: "#4FA184",
+    successSubtle: "#22352E",
+    warning: "#FFB340",
+    warningSubtle: "#3A2F1D",
+    info: "#6FA3CE",
+    infoSubtle: "#1E2C38",
+    focusRing: "#F5F5F7",
+    bone: "#2C2C2E",
+    sheen: "#3F3F42",
+    successHl: "#2F4A2E",
+    dangerHl: "#573328",
+    layer1: "#000000",
+    layer2: "#161618",
+    layer3: "#242426",
+    layer4: "#323234",
+    layer5: "#3F3F42",
+});
 /** 套在 root element 上:`<div {...stylex.props(...light)}>` */
 export const light = [
     lightColor,
@@ -192,3 +298,23 @@ export const dark = [
     darkYarnSubtle,
     darkShadow,
 ];
+/** neutral palette。`neutral` 跟隨系統 scheme,另外兩個鎖定。 */
+export const neutral = [neutralColor];
+export const neutralLight = [
+    neutralLightColor,
+    lightYarn,
+    lightYarnSecondary,
+    lightYarnGhost,
+    lightYarnDanger,
+    lightYarnSubtle,
+    lightShadow,
+];
+export const neutralDark = [
+    neutralDarkColor,
+    darkYarn,
+    darkYarnSecondary,
+    darkYarnGhost,
+    darkYarnDanger,
+    darkYarnSubtle,
+    darkShadow,
+];