@aggc/ui 0.4.0 → 0.5.0

package/dist/tokens/colors.d.ts

@@ -0,0 +1,360 @@
+/**
+ * Full semantic color token map — includes both core (web+desktop) and
+ * desktop-only tokens. Used by panda.config.ts in this repo.
+ *
+ * For a web-only consumer, import coreColorTokens instead.
+ */
+export declare const colorTokens: {
+    readonly result: {
+        readonly okBg: {
+            readonly value: {
+                readonly base: "rgba(48, 113, 255, 0.1)";
+                readonly _dark: "rgba(17, 43, 86, 0.88)";
+            };
+        };
+        readonly okBorder: {
+            readonly value: {
+                readonly base: "rgba(49, 94, 255, 0.18)";
+                readonly _dark: "rgba(138, 180, 255, 0.24)";
+            };
+        };
+        readonly failBg: {
+            readonly value: {
+                readonly base: "rgba(217, 45, 32, 0.08)";
+                readonly _dark: "rgba(77, 17, 11, 0.86)";
+            };
+        };
+        readonly failBorder: {
+            readonly value: {
+                readonly base: "rgba(217, 45, 32, 0.16)";
+                readonly _dark: "rgba(255, 142, 127, 0.24)";
+            };
+        };
+        readonly detailText: {
+            readonly value: {
+                readonly base: "#11203b";
+                readonly _dark: "#edf3ff";
+            };
+        };
+        readonly bodyText: {
+            readonly value: {
+                readonly base: "#42526b";
+                readonly _dark: "#cad2e0";
+            };
+        };
+        readonly warningLabel: {
+            readonly value: {
+                readonly base: "#9a5b05";
+                readonly _dark: "#ffd36b";
+            };
+        };
+        readonly warningBody: {
+            readonly value: {
+                readonly base: "#865210";
+                readonly _dark: "#f8dd95";
+            };
+        };
+        readonly errorLabel: {
+            readonly value: {
+                readonly base: "#b42318";
+                readonly _dark: "#ff9d91";
+            };
+        };
+        readonly errorBody: {
+            readonly value: {
+                readonly base: "#8f2118";
+                readonly _dark: "#ffc2ba";
+            };
+        };
+    };
+    readonly nav: {
+        readonly inactiveText: {
+            readonly value: {
+                readonly base: "#42526b";
+                readonly _dark: "#b7c3d7";
+            };
+        };
+    };
+    readonly sync: {
+        readonly generatedBg: {
+            readonly value: {
+                readonly base: "rgba(48, 113, 255, 0.08)";
+                readonly _dark: "rgba(15, 40, 84, 0.88)";
+            };
+        };
+        readonly generatedBorder: {
+            readonly value: {
+                readonly base: "rgba(49, 94, 255, 0.16)";
+                readonly _dark: "rgba(138, 180, 255, 0.24)";
+            };
+        };
+        readonly generatedLabel: {
+            readonly value: {
+                readonly base: "#2459d8";
+                readonly _dark: "#9ac1ff";
+            };
+        };
+        readonly generatedBody: {
+            readonly value: {
+                readonly base: "#264170";
+                readonly _dark: "#d7e5ff";
+            };
+        };
+        readonly skippedBg: {
+            readonly value: {
+                readonly base: "rgba(82, 102, 133, 0.06)";
+                readonly _dark: "rgba(14, 18, 24, 0.94)";
+            };
+        };
+        readonly skippedBorder: {
+            readonly value: {
+                readonly base: "rgba(109, 130, 164, 0.16)";
+                readonly _dark: "rgba(183, 195, 215, 0.18)";
+            };
+        };
+        readonly skippedLabel: {
+            readonly value: {
+                readonly base: "#42526b";
+                readonly _dark: "#b7c3d7";
+            };
+        };
+        readonly skippedBody: {
+            readonly value: {
+                readonly base: "#566883";
+                readonly _dark: "#c3cedf";
+            };
+        };
+    };
+    readonly text: {
+        readonly primary: {
+            readonly value: {
+                readonly base: "#0f1728";
+                readonly _dark: "#f7f9fd";
+            };
+        };
+        readonly secondary: {
+            readonly value: {
+                readonly base: "#405069";
+                readonly _dark: "#c8d1e0";
+            };
+        };
+        readonly muted: {
+            readonly value: {
+                readonly base: "#61708a";
+                readonly _dark: "#96a3b8";
+            };
+        };
+        readonly accent: {
+            readonly value: {
+                readonly base: "#315eff";
+                readonly _dark: "#8ab4ff";
+            };
+        };
+        readonly inverse: {
+            readonly value: {
+                readonly base: "#ffffff";
+                readonly _dark: "#08111f";
+            };
+        };
+        readonly error: {
+            readonly value: {
+                readonly base: "#d92d20";
+                readonly _dark: "#ff8e7f";
+            };
+        };
+    };
+    readonly bg: {
+        readonly canvas: {
+            readonly value: {
+                readonly base: "rgba(244, 248, 255, 0.8)";
+                readonly _dark: "rgba(0, 0, 0, 0.94)";
+            };
+        };
+        readonly card: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.62)";
+                readonly _dark: "rgba(0, 0, 0, 0.82)";
+            };
+        };
+        readonly cardStrong: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.78)";
+                readonly _dark: "rgba(7, 10, 15, 0.98)";
+            };
+        };
+        readonly cardAlt: {
+            readonly value: {
+                readonly base: "rgba(248, 251, 255, 0.56)";
+                readonly _dark: "rgba(10, 13, 19, 0.94)";
+            };
+        };
+        readonly sidebar: {
+            readonly value: {
+                readonly base: "rgba(251, 253, 255, 0.68)";
+                readonly _dark: "rgba(0, 0, 0, 0.9)";
+            };
+        };
+        readonly overlay: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.42)";
+                readonly _dark: "rgba(255, 255, 255, 0.02)";
+            };
+        };
+        readonly input: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.72)";
+                readonly _dark: "rgba(12, 16, 23, 0.98)";
+            };
+        };
+        readonly selected: {
+            readonly value: {
+                readonly base: "rgba(60, 111, 255, 0.12)";
+                readonly _dark: "rgba(138, 180, 255, 0.16)";
+            };
+        };
+        readonly hover: {
+            readonly value: {
+                readonly base: "rgba(49, 71, 115, 0.08)";
+                readonly _dark: "rgba(255, 255, 255, 0.06)";
+            };
+        };
+        readonly buttonOutline: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.48)";
+                readonly _dark: "rgba(14, 18, 26, 0.98)";
+            };
+        };
+        readonly header: {
+            readonly value: {
+                readonly base: "rgba(250, 252, 255, 0.58)";
+                readonly _dark: "rgba(0, 0, 0, 0.84)";
+            };
+        };
+        readonly menu: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.9)";
+                readonly _dark: "rgba(9, 12, 18, 0.99)";
+            };
+        };
+        readonly accentSoft: {
+            readonly value: {
+                readonly base: "rgba(49, 94, 255, 0.1)";
+                readonly _dark: "rgba(138, 180, 255, 0.18)";
+            };
+        };
+        readonly accentStrong: {
+            readonly value: {
+                readonly base: "rgba(49, 94, 255, 0.86)";
+                readonly _dark: "rgba(122, 170, 255, 0.82)";
+            };
+        };
+    };
+    readonly border: {
+        readonly soft: {
+            readonly value: {
+                readonly base: "rgba(148, 163, 184, 0.14)";
+                readonly _dark: "rgba(255, 255, 255, 0.035)";
+            };
+        };
+        readonly subtle: {
+            readonly value: {
+                readonly base: "rgba(125, 146, 182, 0.2)";
+                readonly _dark: "rgba(255, 255, 255, 0.09)";
+            };
+        };
+        readonly default: {
+            readonly value: {
+                readonly base: "rgba(109, 130, 164, 0.28)";
+                readonly _dark: "rgba(255, 255, 255, 0.14)";
+            };
+        };
+        readonly strong: {
+            readonly value: {
+                readonly base: "rgba(80, 98, 127, 0.42)";
+                readonly _dark: "rgba(255, 255, 255, 0.22)";
+            };
+        };
+        readonly accent: {
+            readonly value: {
+                readonly base: "rgba(82, 121, 255, 0.5)";
+                readonly _dark: "rgba(125, 171, 255, 0.44)";
+            };
+        };
+    };
+    readonly badge: {
+        readonly successBg: {
+            readonly value: {
+                readonly base: "rgba(19, 163, 74, 0.12)";
+                readonly _dark: "rgba(19, 80, 58, 0.7)";
+            };
+        };
+        readonly successText: {
+            readonly value: {
+                readonly base: "#136c45";
+                readonly _dark: "#7ff2c7";
+            };
+        };
+        readonly successBorder: {
+            readonly value: {
+                readonly base: "rgba(21, 128, 61, 0.22)";
+                readonly _dark: "rgba(127, 242, 199, 0.32)";
+            };
+        };
+        readonly warningBg: {
+            readonly value: {
+                readonly base: "rgba(245, 158, 11, 0.12)";
+                readonly _dark: "rgba(89, 58, 8, 0.76)";
+            };
+        };
+        readonly warningText: {
+            readonly value: {
+                readonly base: "#9a5b05";
+                readonly _dark: "#ffd36b";
+            };
+        };
+        readonly warningBorder: {
+            readonly value: {
+                readonly base: "rgba(217, 119, 6, 0.22)";
+                readonly _dark: "rgba(255, 211, 107, 0.32)";
+            };
+        };
+        readonly infoBg: {
+            readonly value: {
+                readonly base: "rgba(59, 130, 246, 0.11)";
+                readonly _dark: "rgba(24, 48, 92, 0.82)";
+            };
+        };
+        readonly infoText: {
+            readonly value: {
+                readonly base: "#2459d8";
+                readonly _dark: "#9ac1ff";
+            };
+        };
+        readonly infoBorder: {
+            readonly value: {
+                readonly base: "rgba(37, 99, 235, 0.2)";
+                readonly _dark: "rgba(154, 193, 255, 0.3)";
+            };
+        };
+        readonly neutralBg: {
+            readonly value: {
+                readonly base: "rgba(99, 115, 148, 0.08)";
+                readonly _dark: "rgba(21, 26, 35, 0.92)";
+            };
+        };
+        readonly neutralText: {
+            readonly value: {
+                readonly base: "#4b5d7a";
+                readonly _dark: "#d0d7e4";
+            };
+        };
+        readonly neutralBorder: {
+            readonly value: {
+                readonly base: "rgba(109, 130, 164, 0.18)";
+                readonly _dark: "rgba(183, 195, 215, 0.22)";
+            };
+        };
+    };
+};
+export { coreColorTokens } from "./core-colors";
+export { desktopColorTokens } from "./desktop-colors";

package/dist/tokens/core-colors.d.ts

@@ -0,0 +1,238 @@
+/**
+ * Core semantic color tokens — shared between desktop and web consumers.
+ *
+ * These tokens cover the universal design language: text, backgrounds,
+ * borders and badge indicators. Any app that uses @aggc/ui can rely on these.
+ */
+export declare const coreColorTokens: {
+    readonly text: {
+        readonly primary: {
+            readonly value: {
+                readonly base: "#0f1728";
+                readonly _dark: "#f7f9fd";
+            };
+        };
+        readonly secondary: {
+            readonly value: {
+                readonly base: "#405069";
+                readonly _dark: "#c8d1e0";
+            };
+        };
+        readonly muted: {
+            readonly value: {
+                readonly base: "#61708a";
+                readonly _dark: "#96a3b8";
+            };
+        };
+        readonly accent: {
+            readonly value: {
+                readonly base: "#315eff";
+                readonly _dark: "#8ab4ff";
+            };
+        };
+        readonly inverse: {
+            readonly value: {
+                readonly base: "#ffffff";
+                readonly _dark: "#08111f";
+            };
+        };
+        readonly error: {
+            readonly value: {
+                readonly base: "#d92d20";
+                readonly _dark: "#ff8e7f";
+            };
+        };
+    };
+    readonly bg: {
+        readonly canvas: {
+            readonly value: {
+                readonly base: "rgba(244, 248, 255, 0.8)";
+                readonly _dark: "rgba(0, 0, 0, 0.94)";
+            };
+        };
+        readonly card: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.62)";
+                readonly _dark: "rgba(0, 0, 0, 0.82)";
+            };
+        };
+        readonly cardStrong: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.78)";
+                readonly _dark: "rgba(7, 10, 15, 0.98)";
+            };
+        };
+        readonly cardAlt: {
+            readonly value: {
+                readonly base: "rgba(248, 251, 255, 0.56)";
+                readonly _dark: "rgba(10, 13, 19, 0.94)";
+            };
+        };
+        readonly sidebar: {
+            readonly value: {
+                readonly base: "rgba(251, 253, 255, 0.68)";
+                readonly _dark: "rgba(0, 0, 0, 0.9)";
+            };
+        };
+        readonly overlay: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.42)";
+                readonly _dark: "rgba(255, 255, 255, 0.02)";
+            };
+        };
+        readonly input: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.72)";
+                readonly _dark: "rgba(12, 16, 23, 0.98)";
+            };
+        };
+        readonly selected: {
+            readonly value: {
+                readonly base: "rgba(60, 111, 255, 0.12)";
+                readonly _dark: "rgba(138, 180, 255, 0.16)";
+            };
+        };
+        readonly hover: {
+            readonly value: {
+                readonly base: "rgba(49, 71, 115, 0.08)";
+                readonly _dark: "rgba(255, 255, 255, 0.06)";
+            };
+        };
+        readonly buttonOutline: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.48)";
+                readonly _dark: "rgba(14, 18, 26, 0.98)";
+            };
+        };
+        readonly header: {
+            readonly value: {
+                readonly base: "rgba(250, 252, 255, 0.58)";
+                readonly _dark: "rgba(0, 0, 0, 0.84)";
+            };
+        };
+        readonly menu: {
+            readonly value: {
+                readonly base: "rgba(255, 255, 255, 0.9)";
+                readonly _dark: "rgba(9, 12, 18, 0.99)";
+            };
+        };
+        readonly accentSoft: {
+            readonly value: {
+                readonly base: "rgba(49, 94, 255, 0.1)";
+                readonly _dark: "rgba(138, 180, 255, 0.18)";
+            };
+        };
+        readonly accentStrong: {
+            readonly value: {
+                readonly base: "rgba(49, 94, 255, 0.86)";
+                readonly _dark: "rgba(122, 170, 255, 0.82)";
+            };
+        };
+    };
+    readonly border: {
+        readonly soft: {
+            readonly value: {
+                readonly base: "rgba(148, 163, 184, 0.14)";
+                readonly _dark: "rgba(255, 255, 255, 0.035)";
+            };
+        };
+        readonly subtle: {
+            readonly value: {
+                readonly base: "rgba(125, 146, 182, 0.2)";
+                readonly _dark: "rgba(255, 255, 255, 0.09)";
+            };
+        };
+        readonly default: {
+            readonly value: {
+                readonly base: "rgba(109, 130, 164, 0.28)";
+                readonly _dark: "rgba(255, 255, 255, 0.14)";
+            };
+        };
+        readonly strong: {
+            readonly value: {
+                readonly base: "rgba(80, 98, 127, 0.42)";
+                readonly _dark: "rgba(255, 255, 255, 0.22)";
+            };
+        };
+        readonly accent: {
+            readonly value: {
+                readonly base: "rgba(82, 121, 255, 0.5)";
+                readonly _dark: "rgba(125, 171, 255, 0.44)";
+            };
+        };
+    };
+    readonly badge: {
+        readonly successBg: {
+            readonly value: {
+                readonly base: "rgba(19, 163, 74, 0.12)";
+                readonly _dark: "rgba(19, 80, 58, 0.7)";
+            };
+        };
+        readonly successText: {
+            readonly value: {
+                readonly base: "#136c45";
+                readonly _dark: "#7ff2c7";
+            };
+        };
+        readonly successBorder: {
+            readonly value: {
+                readonly base: "rgba(21, 128, 61, 0.22)";
+                readonly _dark: "rgba(127, 242, 199, 0.32)";
+            };
+        };
+        readonly warningBg: {
+            readonly value: {
+                readonly base: "rgba(245, 158, 11, 0.12)";
+                readonly _dark: "rgba(89, 58, 8, 0.76)";
+            };
+        };
+        readonly warningText: {
+            readonly value: {
+                readonly base: "#9a5b05";
+                readonly _dark: "#ffd36b";
+            };
+        };
+        readonly warningBorder: {
+            readonly value: {
+                readonly base: "rgba(217, 119, 6, 0.22)";
+                readonly _dark: "rgba(255, 211, 107, 0.32)";
+            };
+        };
+        readonly infoBg: {
+            readonly value: {
+                readonly base: "rgba(59, 130, 246, 0.11)";
+                readonly _dark: "rgba(24, 48, 92, 0.82)";
+            };
+        };
+        readonly infoText: {
+            readonly value: {
+                readonly base: "#2459d8";
+                readonly _dark: "#9ac1ff";
+            };
+        };
+        readonly infoBorder: {
+            readonly value: {
+                readonly base: "rgba(37, 99, 235, 0.2)";
+                readonly _dark: "rgba(154, 193, 255, 0.3)";
+            };
+        };
+        readonly neutralBg: {
+            readonly value: {
+                readonly base: "rgba(99, 115, 148, 0.08)";
+                readonly _dark: "rgba(21, 26, 35, 0.92)";
+            };
+        };
+        readonly neutralText: {
+            readonly value: {
+                readonly base: "#4b5d7a";
+                readonly _dark: "#d0d7e4";
+            };
+        };
+        readonly neutralBorder: {
+            readonly value: {
+                readonly base: "rgba(109, 130, 164, 0.18)";
+                readonly _dark: "rgba(183, 195, 215, 0.22)";
+            };
+        };
+    };
+};