@aggc/ui 0.4.0 → 0.5.0

package/src/styles/recipes/button.recipe.ts

@@ -0,0 +1,115 @@
+import { cva } from "@styled/css";
+
+export const buttonRecipe = cva({
+  base: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "2",
+    borderRadius: "xl",
+    px: "4",
+    py: "3",
+    fontSize: "sm",
+    fontWeight: "700",
+    letterSpacing: "0.01em",
+    backdropFilter: "blur(22px) saturate(140%)",
+    transition: "all 160ms ease",
+    userSelect: "none",
+    whiteSpace: "nowrap",
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: "linear-gradient(135deg, rgba(31,67,182,0.96) 0%, rgba(49,94,255,0.92) 100%)",
+        color: "text.inverse",
+        borderWidth: "1px",
+        borderColor: "rgba(255,255,255,0.18)",
+        boxShadow: "0 22px 36px -24px rgba(49,94,255,0.78), inset 0 1px 0 rgba(255,255,255,0.24)",
+        _dark: {
+          color: "#f7f9fd",
+          borderColor: "rgba(255,255,255,0.06)",
+          boxShadow: "0 22px 40px -24px rgba(71,121,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18)",
+        },
+      },
+      outline: {
+        bg: "bg.buttonOutline",
+        color: "text.secondary",
+        borderWidth: "1px",
+        borderColor: "border.default",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)",
+        _dark: {
+          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
+        },
+      },
+      subtle: {
+        bg: "bg.accentSoft",
+        color: "text.accent",
+        borderWidth: "1px",
+        borderColor: "badge.infoBorder",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)",
+        _dark: {
+          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
+        },
+      },
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        opacity: 0.5,
+      },
+      false: {
+        cursor: "pointer",
+      },
+    },
+    loading: {
+      true: {
+        cursor: "not-allowed",
+        opacity: 0.5,
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      disabled: false,
+      loading: false,
+      css: {
+        _hover: {
+          transform: "translateY(-1px)",
+          boxShadow: "0 24px 42px -24px rgba(49,94,255,0.82), inset 0 1px 0 rgba(255,255,255,0.28)",
+        },
+      },
+    },
+    {
+      variant: "outline",
+      disabled: false,
+      loading: false,
+      css: {
+        _hover: {
+          color: "text.primary",
+          borderColor: "border.strong",
+          bg: "bg.cardStrong",
+          transform: "translateY(-1px)",
+        },
+      },
+    },
+    {
+      variant: "subtle",
+      disabled: false,
+      loading: false,
+      css: {
+        _hover: {
+          bg: "bg.selected",
+          borderColor: "border.accent",
+          transform: "translateY(-1px)",
+        },
+      },
+    },
+  ],
+  defaultVariants: {
+    variant: "solid",
+    disabled: false,
+    loading: false,
+  },
+});

package/src/styles/recipes/card.recipe.ts

@@ -0,0 +1,64 @@
+import { cva } from "@styled/css";
+
+export const cardRecipe = cva({
+  base: {
+    minWidth: "0",
+    borderWidth: "1px",
+    transition: "all 160ms ease",
+  },
+  variants: {
+    variant: {
+      surface: {
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: "3xl",
+        borderColor: "border.subtle",
+        bg: "bg.card",
+        backdropFilter: "blur(28px) saturate(155%)",
+        boxShadow: "0 25px 30px -35px rgba(15,23,42,0.42)",
+      },
+      inset: {
+        borderRadius: "2xl",
+        borderColor: "border.soft",
+        bg: "bg.cardAlt",
+        backdropFilter: "blur(24px) saturate(145%)",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)",
+      },
+      elevated: {
+        borderRadius: "2xl",
+        borderColor: "border.default",
+        bg: "bg.cardStrong",
+        backdropFilter: "blur(24px) saturate(145%)",
+        boxShadow: "0 16px 32px -28px rgba(15,23,42,0.42)",
+      },
+      selectable: {
+        borderRadius: "2xl",
+        borderColor: "border.default",
+        bg: "bg.cardAlt",
+        cursor: "pointer",
+        _hover: {
+          borderColor: "border.strong",
+          bg: "bg.card",
+          transform: "translateY(-1px)",
+        },
+      },
+    },
+    padding: {
+      none: {},
+      sm: { p: "3" },
+      md: { p: "4" },
+      lg: { p: "5" },
+      xl: { p: "6" },
+    },
+    selected: {
+      true: {
+        borderColor: "border.accent",
+        bg: "bg.cardStrong",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "surface",
+    padding: "md",
+  },
+});

package/src/styles/recipes/dropdown.recipe.ts

@@ -0,0 +1,40 @@
+import { cva } from "@styled/css";
+
+export const dropdownRecipe = cva({
+  base: {
+    borderWidth: "1px",
+    borderColor: "border.subtle",
+    bg: "bg.menu",
+    backdropFilter: "blur(34px) saturate(165%)",
+    boxShadow: "0 32px 70px -40px rgba(15,23,42,0.5)",
+  },
+  variants: {
+    placement: {
+      anchored: {
+        position: "absolute",
+        top: "calc(100% + 10px)",
+        left: "0",
+        right: "0",
+      },
+      floating: {
+        position: "fixed",
+      },
+    },
+    density: {
+      cozy: {
+        borderRadius: "2xl",
+        p: "2",
+        gap: "1",
+      },
+      compact: {
+        borderRadius: "xl",
+        p: "1.5",
+        gap: "0.5",
+      },
+    },
+  },
+  defaultVariants: {
+    placement: "anchored",
+    density: "cozy",
+  },
+});

package/src/styles/recipes/input.recipe.ts

@@ -0,0 +1,59 @@
+import { cva } from "@styled/css";
+
+export const inputRecipe = cva({
+  base: {
+    width: "100%",
+    borderWidth: "1px",
+    borderColor: "border.default",
+    bg: "bg.input",
+    color: "text.primary",
+    fontSize: "sm",
+    backdropFilter: "blur(22px) saturate(145%)",
+    transition: "border-color 160ms ease, background 160ms ease",
+    _placeholder: {
+      color: "text.muted",
+    },
+    _hover: {
+      borderColor: "border.strong",
+    },
+    _dark: {
+      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        minHeight: "40px",
+        borderRadius: "lg",
+        px: "3",
+        py: "2.5",
+        lineHeight: "1.45",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.2)",
+      },
+      md: {
+        minHeight: "48px",
+        borderRadius: "xl",
+        px: "4",
+        py: "3",
+        lineHeight: "1.5",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 14px 28px -28px rgba(15,23,42,0.42)",
+      },
+    },
+    kind: {
+      input: {},
+      textarea: {
+        minHeight: "420px",
+        borderRadius: "2xl",
+        px: "4",
+        py: "4",
+        lineHeight: "1.6",
+        fontFamily: "mono",
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 18px 36px -32px rgba(15,23,42,0.42)",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    kind: "input",
+  },
+});

package/src/styles.ts

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

package/src/test/setup.ts

@@ -0,0 +1 @@
+// Shared test setup placeholder for future global mocks.

package/src/tokens/colors.ts

@@ -0,0 +1,16 @@
+import { coreColorTokens } from "./core-colors";
+import { desktopColorTokens } from "./desktop-colors";
+
+/**
+ * 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 const colorTokens = {
+  ...coreColorTokens,
+  ...desktopColorTokens,
+} as const;
+
+export { coreColorTokens } from "./core-colors";
+export { desktopColorTokens } from "./desktop-colors";

package/src/tokens/core-colors.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 const coreColorTokens = {
+  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)" } },
+  },
+} as const;

package/src/tokens/desktop-colors.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 const desktopColorTokens = {
+  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" } },
+  },
+} as const;

package/src/tokens/index.ts

@@ -0,0 +1,8 @@
+export * from "./colors";
+export * from "./motion";
+export * from "./radius";
+export * from "./spacing";
+export * from "./typography";
+// Named subpath re-exports (consumed via @aggc/ui/tokens/core and @aggc/ui/tokens/desktop-only)
+export { coreColorTokens } from "./core-colors";
+export { desktopColorTokens } from "./desktop-colors";

package/src/tokens/motion.ts

@@ -0,0 +1,6 @@
+export const motionTokens = {
+  durations: {
+    moderate: { value: "160ms" },
+    emphasized: { value: "240ms" },
+  },
+} as const;

package/src/tokens/radius.ts

@@ -0,0 +1,3 @@
+export const radiusTokens = {
+  "4xl": { value: "2rem" },
+} as const;

package/src/tokens/spacing.ts

@@ -0,0 +1,4 @@
+export const spacingTokens = {
+  18: { value: "4.5rem" },
+  22: { value: "5.5rem" },
+} as const;

package/src/tokens/typography.ts

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

package/src/tokens-core.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/src/tokens-desktop.ts

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

package/src/tokens.ts

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