@anyknown/ui 0.6.1 → 0.7.0

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,
+];

package/dist/tokens.css

@@ -33,6 +33,12 @@ html {
 	--ak-success-hl: #c6e0c6;
 	--ak-danger-hl: #efcec3;
 
+	--ak-layer1: #efece3;
+	--ak-layer2: #fafaf6;
+	--ak-layer3: #f1efe7;
+	--ak-layer4: #e8e5da;
+	--ak-layer5: #dedacd;
+
 	--ak-shadow-popover: 0 8px 24px rgba(35, 33, 29, 0.1);
 	--ak-shadow-raised: 0 1px 2px rgba(35, 33, 29, 0.08);
 
@@ -81,12 +87,23 @@ html {
 		--ak-success-hl: #2f4a2e;
 		--ak-danger-hl: #573328;
 
+		--ak-layer1: #0e0c09;
+		--ak-layer2: #181613;
+		--ak-layer3: #211e19;
+		--ak-layer4: #2b2721;
+		--ak-layer5: #35302a;
+
 		--ak-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.4);
 		--ak-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3);
 	}
 }
 
 [data-theme="dark"] {
+	--ak-layer1: #0e0c09;
+	--ak-layer2: #181613;
+	--ak-layer3: #211e19;
+	--ak-layer4: #2b2721;
+	--ak-layer5: #35302a;
 	--ak-bone: #2a2620;
 	--ak-sheen: #35302a;
 	--ak-success-hl: #2f4a2e;
@@ -114,3 +131,76 @@ html {
 	--ak-info-subtle: #1e2c38;
 	--ak-focus-ring: #4fa184;
 }
+
+/* neutral palette:紙與墨換一套,語意色(danger / success / info)不換。
+ * 掛在 <html> 上:data-palette="neutral";亮暗照樣跟系統,data-theme 才鎖。 */
+[data-palette="neutral"] {
+	--ak-bg: #ffffff;
+	--ak-surface: #f5f5f7;
+	--ak-surface-raised: #ffffff;
+	--ak-border: #e5e5ea;
+	--ak-border-strong: #c7c7cc;
+	--ak-text: #1d1d1f;
+	--ak-text-muted: #6e6e73;
+	--ak-text-faint: #86868b;
+	--ak-accent: #1d1d1f;
+	--ak-accent-text: #ffffff;
+	--ak-accent-subtle: #e8e8ed;
+	--ak-warning: #b25000;
+	--ak-focus-ring: #1d1d1f;
+	--ak-bone: #e6e6ea;
+	--ak-sheen: #f2f2f5;
+	--ak-layer1: #efeff2;
+	--ak-layer2: #ffffff;
+	--ak-layer3: #f2f2f5;
+	--ak-layer4: #e6e6ea;
+	--ak-layer5: #d9d9de;
+}
+
+@media (prefers-color-scheme: dark) {
+	[data-palette="neutral"]:not([data-theme="light"]) {
+		--ak-bg: #000000;
+		--ak-surface: #1c1c1e;
+		--ak-surface-raised: #2c2c2e;
+		--ak-border: #38383a;
+		--ak-border-strong: #48484a;
+		--ak-text: #f5f5f7;
+		--ak-text-muted: #98989d;
+		--ak-text-faint: #8e8e93;
+		--ak-accent: #f5f5f7;
+		--ak-accent-text: #000000;
+		--ak-accent-subtle: #2c2c2e;
+		--ak-warning: #ffb340;
+		--ak-focus-ring: #f5f5f7;
+		--ak-bone: #2c2c2e;
+		--ak-sheen: #3f3f42;
+		--ak-layer1: #000000;
+		--ak-layer2: #161618;
+		--ak-layer3: #242426;
+		--ak-layer4: #323234;
+		--ak-layer5: #3f3f42;
+	}
+}
+
+[data-palette="neutral"][data-theme="dark"] {
+	--ak-bg: #000000;
+	--ak-surface: #1c1c1e;
+	--ak-surface-raised: #2c2c2e;
+	--ak-border: #38383a;
+	--ak-border-strong: #48484a;
+	--ak-text: #f5f5f7;
+	--ak-text-muted: #98989d;
+	--ak-text-faint: #8e8e93;
+	--ak-accent: #f5f5f7;
+	--ak-accent-text: #000000;
+	--ak-accent-subtle: #2c2c2e;
+	--ak-warning: #ffb340;
+	--ak-focus-ring: #f5f5f7;
+	--ak-bone: #2c2c2e;
+	--ak-sheen: #3f3f42;
+	--ak-layer1: #000000;
+	--ak-layer2: #161618;
+	--ak-layer3: #242426;
+	--ak-layer4: #323234;
+	--ak-layer5: #3f3f42;
+}

package/dist/tokens.stylex.d.ts

@@ -24,6 +24,11 @@ export declare const color: stylex.VarGroup<Readonly<{
     sheen: string;
     successHl: string;
     dangerHl: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
 }>, symbol>;
 export declare const yarn: stylex.VarGroup<Readonly<{
     un: string;

package/dist/tokens.stylex.js

@@ -28,6 +28,13 @@ export const color = stylex.defineVars({
     sheen: { default: "#F6F4EC", [DARK]: "#35302A" },
     successHl: { default: "#C6E0C6", [DARK]: "#2F4A2E" },
     dangerHl: { default: "#EFCEC3", [DARK]: "#573328" },
+    // 分層底色:rail → main → 訊息 → fold → 列,越深的一階數字越大。
+    // 面與面靠深淺分,不靠邊框;hover 升一階,對應表在 lib/layers.ts。
+    layer1: { default: "#EFECE3", [DARK]: "#0E0C09" },
+    layer2: { default: "#FAFAF6", [DARK]: "#181613" },
+    layer3: { default: "#F1EFE7", [DARK]: "#211E19" },
+    layer4: { default: "#E8E5DA", [DARK]: "#2B2721" },
+    layer5: { default: "#DEDACD", [DARK]: "#35302A" },
 });
 // 織體紗線階(TEXTURE-GUIDE §3.4):un 底紗、sh 縫隙陰影、y0–y4 面紗(深→淺)、hi 挑面亮紗、
 // shadow 是整塊布的落影(§3.3「實心感落地」,掛在元件的 CSS filter 上)