@anyknown/ui 0.6.1 → 0.8.0

package/dist/themes.stylex.js

@@ -2,193 +2,91 @@
 // 重生成:pnpm gen:themes(themes.test.ts 會擋住不同步)
 //
 // 給有使用者切換主題的 app(例如 next-themes)。tokens 本身跟隨 OS,套上 theme 才會鎖定。
-// **要套就整組套**:只套 color 會讓布停在另一個主題,深色布配深色字。
+// **要套就整組套**:只套 color 會讓陰影與 tone 停在另一個主題。
 import * as stylex from "@stylexjs/stylex";
-import { color, yarn, yarnSecondary, yarnGhost, yarnDanger, yarnSubtle, shadow } from "./tokens.stylex.js";
+import { color, shadow, tone } from "./tokens.stylex.js";
 export const lightColor = stylex.createTheme(color, {
-    bg: "#FAFAF6",
-    surface: "#FFFFFF",
+    bg: "#FFFFFF",
+    surface: "#F5F5F7",
     surfaceRaised: "#FFFFFF",
-    border: "#E3E0D5",
-    borderStrong: "#C8C3B4",
-    text: "#23211D",
-    textMuted: "#635D52",
-    textFaint: "#9C958A",
-    accent: "#23705A",
-    accentText: "#FCFCF9",
-    accentSubtle: "#E7F0EB",
+    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: "#9A6A1B",
+    warning: "#B25000",
     warningSubtle: "#F5EBD9",
     info: "#2C5C86",
     infoSubtle: "#E4EDF5",
-    focusRing: "#23705A",
-    bone: "#ECE9DF",
-    sheen: "#F6F4EC",
+    focusRing: "#1D1D1F",
+    bone: "#E6E6EA",
+    sheen: "#F2F2F5",
     successHl: "#C6E0C6",
     dangerHl: "#EFCEC3",
-});
-export const lightYarn = stylex.createTheme(yarn, {
-    un: "#11362C",
-    sh: "#123C31",
-    y0: "#1E6250",
-    y1: "#216A55",
-    y2: "#23705A",
-    y3: "#28795F",
-    y4: "#2E8266",
-    hi: "#5CAA89",
-    shadow: "drop-shadow(0 1px 1.5px rgba(18, 60, 49, 0.3))",
-});
-export const lightYarnSecondary = stylex.createTheme(yarnSecondary, {
-    un: "#CBC5B4",
-    sh: "#C9C4B4",
-    y0: "#E4E0D3",
-    y1: "#E8E5D9",
-    y2: "#EDEAE0",
-    y3: "#F1EEE6",
-    y4: "#F5F3EC",
-    hi: "#FFFFFF",
-    shadow: "drop-shadow(0 1px 1.5px rgba(80, 74, 60, 0.22))",
-});
-export const lightYarnGhost = stylex.createTheme(yarnGhost, {
-    un: "transparent",
-    sh: "transparent",
-    y0: "#DCD8CA",
-    y1: "#DFDBCE",
-    y2: "#E3E0D5",
-    y3: "#E7E4D9",
-    y4: "#EBE8DE",
-    hi: "#C8C3B4",
-    shadow: "none",
-});
-export const lightYarnDanger = stylex.createTheme(yarnDanger, {
-    un: "#401209",
-    sh: "#4A170D",
-    y0: "#8F3122",
-    y1: "#A13928",
-    y2: "#B3402E",
-    y3: "#BC4F3C",
-    y4: "#C55E4A",
-    hi: "#E39781",
-    shadow: "drop-shadow(0 1px 1.5px rgba(74, 23, 13, 0.3))",
-});
-export const lightYarnSubtle = stylex.createTheme(yarnSubtle, {
-    un: "#CFE2D9",
-    sh: "#CBDFD5",
-    y0: "#DFEBE5",
-    y1: "#E3EEE8",
-    y2: "#E7F0EB",
-    y3: "#ECF3EF",
-    y4: "#F1F7F3",
-    hi: "#FFFFFF",
+    layer1: "#EFEFF2",
+    layer2: "#FFFFFF",
+    layer3: "#F2F2F5",
+    layer4: "#E6E6EA",
+    layer5: "#D9D9DE",
 });
 export const lightShadow = stylex.createTheme(shadow, {
     popover: "0 8px 24px rgba(35, 33, 29, 0.1)",
     raised: "0 1px 2px rgba(35, 33, 29, 0.08)",
 });
+export const lightTone = stylex.createTheme(tone, {
+    layer6: "#CDCDD3",
+    faint: "#86868B",
+    railLayer2: "#FFFFFF",
+    railLayer3: "#E6E6EA",
+});
 export const darkColor = stylex.createTheme(color, {
-    bg: "#181613",
-    surface: "#201D18",
-    surfaceRaised: "#282420",
-    border: "#35302A",
-    borderStrong: "#4A443C",
-    text: "#EAE6DC",
-    textMuted: "#B0A697",
-    textFaint: "#736A5D",
-    accent: "#4FA184",
-    accentText: "#14120F",
-    accentSubtle: "#22352E",
+    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: "#D9A254",
+    warning: "#FFB340",
     warningSubtle: "#3A2F1D",
     info: "#6FA3CE",
     infoSubtle: "#1E2C38",
-    focusRing: "#4FA184",
-    bone: "#2A2620",
-    sheen: "#35302A",
+    focusRing: "#F5F5F7",
+    bone: "#2C2C2E",
+    sheen: "#3F3F42",
     successHl: "#2F4A2E",
     dangerHl: "#573328",
-});
-export const darkYarn = stylex.createTheme(yarn, {
-    un: "#173629",
-    sh: "#1B4437",
-    y0: "#3F8A70",
-    y1: "#47957A",
-    y2: "#4FA184",
-    y3: "#56A98B",
-    y4: "#5EB193",
-    hi: "#8FD2B4",
-    shadow: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))",
-});
-export const darkYarnSecondary = stylex.createTheme(yarnSecondary, {
-    un: "#0E0C09",
-    sh: "#15120E",
-    y0: "#2B2620",
-    y1: "#2F2A23",
-    y2: "#332E26",
-    y3: "#38322A",
-    y4: "#3D372E",
-    hi: "#5E5546",
-    shadow: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))",
-});
-export const darkYarnGhost = stylex.createTheme(yarnGhost, {
-    un: "transparent",
-    sh: "transparent",
-    y0: "#2A251F",
-    y1: "#2F2A23",
-    y2: "#35302A",
-    y3: "#39342D",
-    y4: "#3E3830",
-    hi: "#57503F",
-    shadow: "none",
-});
-export const darkYarnDanger = stylex.createTheme(yarnDanger, {
-    un: "#38130B",
-    sh: "#451A10",
-    y0: "#C25842",
-    y1: "#D0644E",
-    y2: "#DD7059",
-    y3: "#E17E68",
-    y4: "#E58C77",
-    hi: "#F4BCA9",
-    shadow: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))",
-});
-export const darkYarnSubtle = stylex.createTheme(yarnSubtle, {
-    un: "#141F1B",
-    sh: "#17231E",
-    y0: "#1D2E27",
-    y1: "#20312B",
-    y2: "#22352E",
-    y3: "#263A32",
-    y4: "#2A4038",
-    hi: "#3E5F50",
+    layer1: "#000000",
+    layer2: "#161618",
+    layer3: "#242426",
+    layer4: "#323234",
+    layer5: "#3F3F42",
 });
 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 darkTone = stylex.createTheme(tone, {
+    layer6: "#4C4C50",
+    faint: "#8E8E93",
+    railLayer2: "#242426",
+    railLayer3: "#323234",
+});
 /** 套在 root element 上:`<div {...stylex.props(...light)}>` */
-export const light = [
-    lightColor,
-    lightYarn,
-    lightYarnSecondary,
-    lightYarnGhost,
-    lightYarnDanger,
-    lightYarnSubtle,
-    lightShadow,
-];
-export const dark = [
-    darkColor,
-    darkYarn,
-    darkYarnSecondary,
-    darkYarnGhost,
-    darkYarnDanger,
-    darkYarnSubtle,
-    darkShadow,
-];
+export const light = [lightColor, lightShadow, lightTone];
+export const dark = [darkColor, darkShadow, darkTone];

package/dist/tokens.css

@@ -1,4 +1,4 @@
-/* Ledger tokens as plain CSS variables — for non-StyleX consumers
+/* Tokens as plain CSS variables — for non-StyleX consumers
  * (desktop uses Tailwind v4 @theme; reference these vars there).
  * Source of truth: tokens.stylex.ts. Keep values in sync manually for now. */
 
@@ -8,35 +8,41 @@ html {
 }
 
 :root {
-	--ak-bg: #fafaf6;
-	--ak-surface: #ffffff;
+	--ak-bg: #ffffff;
+	--ak-surface: #f5f5f7;
 	--ak-surface-raised: #ffffff;
-	--ak-border: #e3e0d5;
-	--ak-border-strong: #c8c3b4;
-	--ak-text: #23211d;
-	--ak-text-muted: #635d52;
-	--ak-text-faint: #9c958a;
-	--ak-accent: #23705a;
-	--ak-accent-text: #fcfcf9;
-	--ak-accent-subtle: #e7f0eb;
+	--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-danger: #b3402e;
 	--ak-danger-subtle: #f7e7e3;
 	--ak-success: #23705a;
 	--ak-success-subtle: #e7f0eb;
-	--ak-warning: #9a6a1b;
+	--ak-warning: #b25000;
 	--ak-warning-subtle: #f5ebd9;
 	--ak-info: #2c5c86;
 	--ak-info-subtle: #e4edf5;
-	--ak-focus-ring: #23705a;
-	--ak-bone: #ece9df;
-	--ak-sheen: #f6f4ec;
+	--ak-focus-ring: #1d1d1f;
+	--ak-bone: #e6e6ea;
+	--ak-sheen: #f2f2f5;
 	--ak-success-hl: #c6e0c6;
 	--ak-danger-hl: #efcec3;
 
+	--ak-layer1: #efeff2;
+	--ak-layer2: #ffffff;
+	--ak-layer3: #f2f2f5;
+	--ak-layer4: #e6e6ea;
+	--ak-layer5: #d9d9de;
+
 	--ak-shadow-popover: 0 8px 24px rgba(35, 33, 29, 0.1);
 	--ak-shadow-raised: 0 1px 2px rgba(35, 33, 29, 0.08);
 
-	--ak-font-display: "Newsreader Variable", Georgia, "Times New Roman", serif;
+	--ak-font-display: "Geist Variable", system-ui, sans-serif;
 	--ak-font-body: "Geist Variable", system-ui, sans-serif;
 	--ak-font-mono: "Geist Mono Variable", ui-monospace, monospace;
 
@@ -56,61 +62,72 @@ html {
 
 @media (prefers-color-scheme: dark) {
 	:root:not([data-theme="light"]) {
-		--ak-bg: #181613;
-		--ak-surface: #201d18;
-		--ak-surface-raised: #282420;
-		--ak-border: #35302a;
-		--ak-border-strong: #4a443c;
-		--ak-text: #eae6dc;
-		--ak-text-muted: #b0a697;
-		--ak-text-faint: #736a5d;
-		--ak-accent: #4fa184;
-		--ak-accent-text: #14120f;
-		--ak-accent-subtle: #22352e;
+		--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-danger: #dd7059;
 		--ak-danger-subtle: #3d231e;
 		--ak-success: #4fa184;
 		--ak-success-subtle: #22352e;
-		--ak-warning: #d9a254;
+		--ak-warning: #ffb340;
 		--ak-warning-subtle: #3a2f1d;
 		--ak-info: #6fa3ce;
 		--ak-info-subtle: #1e2c38;
-		--ak-focus-ring: #4fa184;
-		--ak-bone: #2a2620;
-		--ak-sheen: #35302a;
+		--ak-focus-ring: #f5f5f7;
+		--ak-bone: #2c2c2e;
+		--ak-sheen: #3f3f42;
 		--ak-success-hl: #2f4a2e;
 		--ak-danger-hl: #573328;
 
+		--ak-layer1: #000000;
+		--ak-layer2: #161618;
+		--ak-layer3: #242426;
+		--ak-layer4: #323234;
+		--ak-layer5: #3f3f42;
+
 		--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-bone: #2a2620;
-	--ak-sheen: #35302a;
+	--ak-layer1: #000000;
+	--ak-layer2: #161618;
+	--ak-layer3: #242426;
+	--ak-layer4: #323234;
+	--ak-layer5: #3f3f42;
+	--ak-bone: #2c2c2e;
+	--ak-sheen: #3f3f42;
 	--ak-success-hl: #2f4a2e;
 	--ak-danger-hl: #573328;
 	--ak-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.4);
 	--ak-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3);
-	--ak-bg: #181613;
-	--ak-surface: #201d18;
-	--ak-surface-raised: #282420;
-	--ak-border: #35302a;
-	--ak-border-strong: #4a443c;
-	--ak-text: #eae6dc;
-	--ak-text-muted: #b0a697;
-	--ak-text-faint: #736a5d;
-	--ak-accent: #4fa184;
-	--ak-accent-text: #14120f;
-	--ak-accent-subtle: #22352e;
+	--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-danger: #dd7059;
 	--ak-danger-subtle: #3d231e;
 	--ak-success: #4fa184;
 	--ak-success-subtle: #22352e;
-	--ak-warning: #d9a254;
+	--ak-warning: #ffb340;
 	--ak-warning-subtle: #3a2f1d;
 	--ak-info: #6fa3ce;
 	--ak-info-subtle: #1e2c38;
-	--ak-focus-ring: #4fa184;
+	--ak-focus-ring: #f5f5f7;
 }

package/dist/tokens.stylex.d.ts

@@ -24,64 +24,18 @@ export declare const color: stylex.VarGroup<Readonly<{
     sheen: string;
     successHl: string;
     dangerHl: string;
-}>, symbol>;
-export declare const yarn: stylex.VarGroup<Readonly<{
-    un: string;
-    sh: string;
-    y0: string;
-    y1: string;
-    y2: string;
-    y3: string;
-    y4: string;
-    hi: string;
-    shadow: string;
-}>, symbol>;
-export declare const yarnSecondary: stylex.VarGroup<Readonly<{
-    un: string;
-    sh: string;
-    y0: string;
-    y1: string;
-    y2: string;
-    y3: string;
-    y4: string;
-    hi: string;
-    shadow: string;
-}>, symbol>;
-export declare const yarnGhost: stylex.VarGroup<Readonly<{
-    un: string;
-    sh: string;
-    y0: string;
-    y1: string;
-    y2: string;
-    y3: string;
-    y4: string;
-    hi: string;
-    shadow: string;
-}>, symbol>;
-export declare const yarnDanger: stylex.VarGroup<Readonly<{
-    un: string;
-    sh: string;
-    y0: string;
-    y1: string;
-    y2: string;
-    y3: string;
-    y4: string;
-    hi: string;
-    shadow: string;
-}>, symbol>;
-export declare const yarnSubtle: stylex.VarGroup<Readonly<{
-    un: string;
-    sh: string;
-    y0: string;
-    y1: string;
-    y2: string;
-    y3: string;
-    y4: string;
-    hi: string;
+    layer1: string;
+    layer2: string;
+    layer3: string;
+    layer4: string;
+    layer5: string;
 }>, symbol>;
 export declare const shadow: stylex.VarGroup<Readonly<{
     popover: string;
     raised: string;
+    pop: string;
+    sheet: string;
+    dock: string;
 }>, symbol>;
 export declare const font: stylex.VarGroup<Readonly<{
     display: string;
@@ -126,3 +80,36 @@ export declare const motion: stylex.VarGroup<Readonly<{
     easeOut: string;
     spring: string;
 }>, symbol>;
+export declare const type: stylex.VarGroup<Readonly<{
+    t1: string;
+    t2: string;
+    t3: string;
+    t4: string;
+    body: string;
+    tight: string;
+    snug: string;
+}>, symbol>;
+export declare const tone: stylex.VarGroup<Readonly<{
+    layer6: string;
+    faint: string;
+    railLayer2: string;
+    railLayer3: string;
+}>, symbol>;
+export declare const corner: stylex.VarGroup<Readonly<{
+    card: string;
+    ib: string;
+    md: string;
+    btn: string;
+    sm: string;
+    xs: string;
+}>, symbol>;
+export declare const ink: stylex.VarGroup<Readonly<{
+    n4: string;
+    n5: string;
+    n6: string;
+    n8: string;
+    n10: string;
+    n12: string;
+    n14: string;
+    n18: string;
+}>, symbol>;