@anyknown/ui 0.7.0 → 0.8.0

package/dist/themes.stylex.js

@@ -2,222 +2,10 @@
 // 重生成:pnpm gen:themes(themes.test.ts 會擋住不同步)
 //
 // 給有使用者切換主題的 app(例如 next-themes)。tokens 本身跟隨 OS,套上 theme 才會鎖定。
-// **要套就整組套**:只套 color 會讓布停在另一個主題,深色布配深色字。
-//
-// palette 是另一個維度:neutral 只換 color(紙與墨),布跟著亮暗走。
+// **要套就整組套**:只套 color 會讓陰影與 tone 停在另一個主題。
 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)";
+import { color, shadow, tone } from "./tokens.stylex.js";
 export const lightColor = stylex.createTheme(color, {
-    bg: "#FAFAF6",
-    surface: "#FFFFFF",
-    surfaceRaised: "#FFFFFF",
-    border: "#E3E0D5",
-    borderStrong: "#C8C3B4",
-    text: "#23211D",
-    textMuted: "#635D52",
-    textFaint: "#9C958A",
-    accent: "#23705A",
-    accentText: "#FCFCF9",
-    accentSubtle: "#E7F0EB",
-    danger: "#B3402E",
-    dangerSubtle: "#F7E7E3",
-    success: "#23705A",
-    successSubtle: "#E7F0EB",
-    warning: "#9A6A1B",
-    warningSubtle: "#F5EBD9",
-    info: "#2C5C86",
-    infoSubtle: "#E4EDF5",
-    focusRing: "#23705A",
-    bone: "#ECE9DF",
-    sheen: "#F6F4EC",
-    successHl: "#C6E0C6",
-    dangerHl: "#EFCEC3",
-    layer1: "#EFECE3",
-    layer2: "#FAFAF6",
-    layer3: "#F1EFE7",
-    layer4: "#E8E5DA",
-    layer5: "#DEDACD",
-});
-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",
-});
-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 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",
-    danger: "#DD7059",
-    dangerSubtle: "#3D231E",
-    success: "#4FA184",
-    successSubtle: "#22352E",
-    warning: "#D9A254",
-    warningSubtle: "#3A2F1D",
-    info: "#6FA3CE",
-    infoSubtle: "#1E2C38",
-    focusRing: "#4FA184",
-    bone: "#2A2620",
-    sheen: "#35302A",
-    successHl: "#2F4A2E",
-    dangerHl: "#573328",
-    layer1: "#0E0C09",
-    layer2: "#181613",
-    layer3: "#211E19",
-    layer4: "#2B2721",
-    layer5: "#35302A",
-});
-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",
-});
-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",
@@ -248,7 +36,17 @@ export const neutralLightColor = stylex.createTheme(color, {
     layer4: "#E6E6EA",
     layer5: "#D9D9DE",
 });
-export const neutralDarkColor = stylex.createTheme(color, {
+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: "#000000",
     surface: "#1C1C1E",
     surfaceRaised: "#2C2C2E",
@@ -279,42 +77,16 @@ export const neutralDarkColor = stylex.createTheme(color, {
     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,
-];
-/** 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,
-];
+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,41 +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: #efece3;
-	--ak-layer2: #fafaf6;
-	--ak-layer3: #f1efe7;
-	--ak-layer4: #e8e5da;
-	--ak-layer5: #dedacd;
+	--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;
 
@@ -62,103 +62,6 @@ 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-danger: #dd7059;
-		--ak-danger-subtle: #3d231e;
-		--ak-success: #4fa184;
-		--ak-success-subtle: #22352e;
-		--ak-warning: #d9a254;
-		--ak-warning-subtle: #3a2f1d;
-		--ak-info: #6fa3ce;
-		--ak-info-subtle: #1e2c38;
-		--ak-focus-ring: #4fa184;
-		--ak-bone: #2a2620;
-		--ak-sheen: #35302a;
-		--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;
-	--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-danger: #dd7059;
-	--ak-danger-subtle: #3d231e;
-	--ak-success: #4fa184;
-	--ak-success-subtle: #22352e;
-	--ak-warning: #d9a254;
-	--ak-warning-subtle: #3a2f1d;
-	--ak-info: #6fa3ce;
-	--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;
@@ -170,19 +73,43 @@ html {
 		--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: #ffb340;
+		--ak-warning-subtle: #3a2f1d;
+		--ak-info: #6fa3ce;
+		--ak-info-subtle: #1e2c38;
 		--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-palette="neutral"][data-theme="dark"] {
+[data-theme="dark"] {
+	--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: #000000;
 	--ak-surface: #1c1c1e;
 	--ak-surface-raised: #2c2c2e;
@@ -194,13 +121,13 @@ html {
 	--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: #ffb340;
+	--ak-warning-subtle: #3a2f1d;
+	--ak-info: #6fa3ce;
+	--ak-info-subtle: #1e2c38;
 	--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

@@ -30,63 +30,12 @@ export declare const color: stylex.VarGroup<Readonly<{
     layer4: string;
     layer5: 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;
-}>, 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;
@@ -131,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>;