@aggc/ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,132 @@
+/**
+ * Desktop-only semantic color tokens.
+ *
+ * These tokens model concepts that only exist in the desktop app:
+ * - result.*  — pass/fail result panels (sync results, validation output)
+ * - nav.*     — sidebar navigation item states
+ * - sync.*    — sync operation row statuses (generated, skipped, etc.)
+ *
+ * Web consumers should NOT import these. Use coreColorTokens instead.
+ */
+export declare const desktopColorTokens: {
+    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";
+            };
+        };
+    };
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./colors";
+export * from "./motion";
+export * from "./radius";
+export * from "./spacing";
+export * from "./typography";
+export { coreColorTokens } from "./core-colors";
+export { desktopColorTokens } from "./desktop-colors";

package/dist/tokens/motion.d.ts

@@ -0,0 +1,10 @@
+export declare const motionTokens: {
+    readonly durations: {
+        readonly moderate: {
+            readonly value: "160ms";
+        };
+        readonly emphasized: {
+            readonly value: "240ms";
+        };
+    };
+};

package/dist/tokens/radius.d.ts

@@ -0,0 +1,5 @@
+export declare const radiusTokens: {
+    readonly "4xl": {
+        readonly value: "2rem";
+    };
+};

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,8 @@
+export declare const spacingTokens: {
+    readonly 18: {
+        readonly value: "4.5rem";
+    };
+    readonly 22: {
+        readonly value: "5.5rem";
+    };
+};

package/dist/tokens/typography.d.ts

@@ -0,0 +1,10 @@
+export declare const typographyTokens: {
+    readonly fonts: {
+        readonly body: {
+            readonly value: "\"IBM Plex Sans\", \"Segoe UI\", sans-serif";
+        };
+        readonly heading: {
+            readonly value: "\"Space Grotesk\", \"IBM Plex Sans\", sans-serif";
+        };
+    };
+};

package/dist/tokens-core.d.ts

@@ -0,0 +1,5 @@
+export { coreColorTokens } from "./tokens/core-colors";
+export * from "./tokens/motion";
+export * from "./tokens/radius";
+export * from "./tokens/spacing";
+export * from "./tokens/typography";

package/dist/tokens-core.js

@@ -0,0 +1,69 @@
+const a = {
+  text: {
+    primary: { value: { base: "#0f1728", _dark: "#f7f9fd" } },
+    secondary: { value: { base: "#405069", _dark: "#c8d1e0" } },
+    muted: { value: { base: "#61708a", _dark: "#96a3b8" } },
+    accent: { value: { base: "#315eff", _dark: "#8ab4ff" } },
+    inverse: { value: { base: "#ffffff", _dark: "#08111f" } },
+    error: { value: { base: "#d92d20", _dark: "#ff8e7f" } }
+  },
+  bg: {
+    canvas: { value: { base: "rgba(244, 248, 255, 0.8)", _dark: "rgba(0, 0, 0, 0.94)" } },
+    card: { value: { base: "rgba(255, 255, 255, 0.62)", _dark: "rgba(0, 0, 0, 0.82)" } },
+    cardStrong: { value: { base: "rgba(255, 255, 255, 0.78)", _dark: "rgba(7, 10, 15, 0.98)" } },
+    cardAlt: { value: { base: "rgba(248, 251, 255, 0.56)", _dark: "rgba(10, 13, 19, 0.94)" } },
+    sidebar: { value: { base: "rgba(251, 253, 255, 0.68)", _dark: "rgba(0, 0, 0, 0.9)" } },
+    overlay: { value: { base: "rgba(255, 255, 255, 0.42)", _dark: "rgba(255, 255, 255, 0.02)" } },
+    input: { value: { base: "rgba(255, 255, 255, 0.72)", _dark: "rgba(12, 16, 23, 0.98)" } },
+    selected: { value: { base: "rgba(60, 111, 255, 0.12)", _dark: "rgba(138, 180, 255, 0.16)" } },
+    hover: { value: { base: "rgba(49, 71, 115, 0.08)", _dark: "rgba(255, 255, 255, 0.06)" } },
+    buttonOutline: { value: { base: "rgba(255, 255, 255, 0.48)", _dark: "rgba(14, 18, 26, 0.98)" } },
+    header: { value: { base: "rgba(250, 252, 255, 0.58)", _dark: "rgba(0, 0, 0, 0.84)" } },
+    menu: { value: { base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(9, 12, 18, 0.99)" } },
+    accentSoft: { value: { base: "rgba(49, 94, 255, 0.1)", _dark: "rgba(138, 180, 255, 0.18)" } },
+    accentStrong: { value: { base: "rgba(49, 94, 255, 0.86)", _dark: "rgba(122, 170, 255, 0.82)" } }
+  },
+  border: {
+    soft: { value: { base: "rgba(148, 163, 184, 0.14)", _dark: "rgba(255, 255, 255, 0.035)" } },
+    subtle: { value: { base: "rgba(125, 146, 182, 0.2)", _dark: "rgba(255, 255, 255, 0.09)" } },
+    default: { value: { base: "rgba(109, 130, 164, 0.28)", _dark: "rgba(255, 255, 255, 0.14)" } },
+    strong: { value: { base: "rgba(80, 98, 127, 0.42)", _dark: "rgba(255, 255, 255, 0.22)" } },
+    accent: { value: { base: "rgba(82, 121, 255, 0.5)", _dark: "rgba(125, 171, 255, 0.44)" } }
+  },
+  badge: {
+    successBg: { value: { base: "rgba(19, 163, 74, 0.12)", _dark: "rgba(19, 80, 58, 0.7)" } },
+    successText: { value: { base: "#136c45", _dark: "#7ff2c7" } },
+    successBorder: { value: { base: "rgba(21, 128, 61, 0.22)", _dark: "rgba(127, 242, 199, 0.32)" } },
+    warningBg: { value: { base: "rgba(245, 158, 11, 0.12)", _dark: "rgba(89, 58, 8, 0.76)" } },
+    warningText: { value: { base: "#9a5b05", _dark: "#ffd36b" } },
+    warningBorder: { value: { base: "rgba(217, 119, 6, 0.22)", _dark: "rgba(255, 211, 107, 0.32)" } },
+    infoBg: { value: { base: "rgba(59, 130, 246, 0.11)", _dark: "rgba(24, 48, 92, 0.82)" } },
+    infoText: { value: { base: "#2459d8", _dark: "#9ac1ff" } },
+    infoBorder: { value: { base: "rgba(37, 99, 235, 0.2)", _dark: "rgba(154, 193, 255, 0.3)" } },
+    neutralBg: { value: { base: "rgba(99, 115, 148, 0.08)", _dark: "rgba(21, 26, 35, 0.92)" } },
+    neutralText: { value: { base: "#4b5d7a", _dark: "#d0d7e4" } },
+    neutralBorder: { value: { base: "rgba(109, 130, 164, 0.18)", _dark: "rgba(183, 195, 215, 0.22)" } }
+  }
+}, e = {
+  durations: {
+    moderate: { value: "160ms" },
+    emphasized: { value: "240ms" }
+  }
+}, r = {
+  "4xl": { value: "2rem" }
+}, b = {
+  18: { value: "4.5rem" },
+  22: { value: "5.5rem" }
+}, s = {
+  fonts: {
+    body: { value: '"IBM Plex Sans", "Segoe UI", sans-serif' },
+    heading: { value: '"Space Grotesk", "IBM Plex Sans", sans-serif' }
+  }
+};
+export {
+  a as coreColorTokens,
+  e as motionTokens,
+  r as radiusTokens,
+  b as spacingTokens,
+  s as typographyTokens
+};

package/dist/tokens-desktop.d.ts

@@ -0,0 +1 @@
+export { desktopColorTokens } from "./tokens/desktop-colors";

package/dist/tokens-desktop.js

@@ -0,0 +1,30 @@
+const a = {
+  result: {
+    okBg: { value: { base: "rgba(48, 113, 255, 0.1)", _dark: "rgba(17, 43, 86, 0.88)" } },
+    okBorder: { value: { base: "rgba(49, 94, 255, 0.18)", _dark: "rgba(138, 180, 255, 0.24)" } },
+    failBg: { value: { base: "rgba(217, 45, 32, 0.08)", _dark: "rgba(77, 17, 11, 0.86)" } },
+    failBorder: { value: { base: "rgba(217, 45, 32, 0.16)", _dark: "rgba(255, 142, 127, 0.24)" } },
+    detailText: { value: { base: "#11203b", _dark: "#edf3ff" } },
+    bodyText: { value: { base: "#42526b", _dark: "#cad2e0" } },
+    warningLabel: { value: { base: "#9a5b05", _dark: "#ffd36b" } },
+    warningBody: { value: { base: "#865210", _dark: "#f8dd95" } },
+    errorLabel: { value: { base: "#b42318", _dark: "#ff9d91" } },
+    errorBody: { value: { base: "#8f2118", _dark: "#ffc2ba" } }
+  },
+  nav: {
+    inactiveText: { value: { base: "#42526b", _dark: "#b7c3d7" } }
+  },
+  sync: {
+    generatedBg: { value: { base: "rgba(48, 113, 255, 0.08)", _dark: "rgba(15, 40, 84, 0.88)" } },
+    generatedBorder: { value: { base: "rgba(49, 94, 255, 0.16)", _dark: "rgba(138, 180, 255, 0.24)" } },
+    generatedLabel: { value: { base: "#2459d8", _dark: "#9ac1ff" } },
+    generatedBody: { value: { base: "#264170", _dark: "#d7e5ff" } },
+    skippedBg: { value: { base: "rgba(82, 102, 133, 0.06)", _dark: "rgba(14, 18, 24, 0.94)" } },
+    skippedBorder: { value: { base: "rgba(109, 130, 164, 0.16)", _dark: "rgba(183, 195, 215, 0.18)" } },
+    skippedLabel: { value: { base: "#42526b", _dark: "#b7c3d7" } },
+    skippedBody: { value: { base: "#566883", _dark: "#c3cedf" } }
+  }
+};
+export {
+  a as desktopColorTokens
+};

package/dist/tokens.d.ts

@@ -0,0 +1 @@
+export * from "./tokens/index";

package/dist/tokens.js

@@ -0,0 +1,16 @@
+import { coreColorTokens as o } from "./tokens-core.js";
+import { motionTokens as t, radiusTokens as T, spacingTokens as m, typographyTokens as i } from "./tokens-core.js";
+import { desktopColorTokens as r } from "./tokens-desktop.js";
+const n = {
+  ...o,
+  ...r
+};
+export {
+  n as colorTokens,
+  o as coreColorTokens,
+  r as desktopColorTokens,
+  t as motionTokens,
+  T as radiusTokens,
+  m as spacingTokens,
+  i as typographyTokens
+};