@aggc/ui 0.6.0 → 0.7.0

package/src/styles/primitives/surfaces.ts

@@ -2,14 +2,15 @@ import { css } from "@styled/css";
 
 export const surfacePanelClass = css({
   position: "relative",
-  overflow: "hidden",
   borderRadius: "xl",
   borderWidth: "1px",
   borderColor: "border.subtle",
   bg: "bg.card",
-  boxShadow: "0 1px 3px 0 rgba(15,23,42,0.06)",
+  boxShadow: "0 1px 2px 0 rgba(15,23,42,0.04), 0 1px 3px 0 rgba(15,23,42,0.06)",
+  transition: "border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
   _dark: {
-    boxShadow: "0 1px 3px 0 rgba(0,0,0,0.24)",
+    borderColor: "border.default",
+    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.2), 0 1px 3px 0 rgba(0,0,0,0.24)",
   },
 });
 
@@ -18,6 +19,10 @@ export const insetPanelClass = css({
   borderWidth: "1px",
   borderColor: "border.soft",
   bg: "bg.cardAlt",
+  transition: "border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
+  _dark: {
+    borderColor: "border.subtle",
+  },
 });
 
 export const elevatedPanelClass = css({
@@ -25,8 +30,10 @@ export const elevatedPanelClass = css({
   borderWidth: "1px",
   borderColor: "border.default",
   bg: "bg.cardStrong",
-  boxShadow: "0 2px 8px -2px rgba(15,23,42,0.08)",
+  boxShadow: "0 1px 2px 0 rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.1)",
+  transition: "border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
   _dark: {
-    boxShadow: "0 2px 8px -2px rgba(0,0,0,0.32)",
+    borderColor: "border.strong",
+    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.24), 0 4px 12px -4px rgba(0,0,0,0.4)",
   },
 });

package/src/styles/primitives/typography.ts

@@ -3,21 +3,22 @@ import { css } from "@styled/css";
 export const eyebrowClass = css({
   fontSize: "xs",
   textTransform: "uppercase",
-  letterSpacing: "0.12em",
+  letterSpacing: "0.08em",
   color: "text.muted",
-  fontWeight: "700",
+  fontWeight: "600",
 });
 
 export const sectionTitleClass = css({
   fontFamily: "heading",
   fontSize: { base: "2xl", md: "3xl" },
-  lineHeight: "1",
+  lineHeight: "1.1",
   color: "text.primary",
+  textWrap: "balance",
 });
 
 export const sectionDescriptionClass = css({
   color: "text.secondary",
-  lineHeight: "1.65",
+  lineHeight: "1.6",
   fontSize: "sm",
 });
 

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

@@ -13,11 +13,6 @@ export const badgeRecipe = cva({
     fontWeight: "600",
     lineHeight: "1",
     whiteSpace: "nowrap",
-    backdropFilter: "blur(16px) saturate(140%)",
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.16)",
-    _dark: {
-      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.04)",
-    },
   },
   variants: {
     tone: {
@@ -41,6 +36,11 @@ export const badgeRecipe = cva({
         bg: "badge.warningBg",
         color: "badge.warningText",
       },
+      danger: {
+        borderColor: "badge.dangerBorder",
+        bg: "badge.dangerBg",
+        color: "badge.dangerText",
+      },
     },
     size: {
       sm: { px: "2.5", py: "1.5", fontSize: "xs" },

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

@@ -8,14 +8,17 @@ export const buttonRecipe = cva({
     justifyContent: "center",
     gap: "2",
     borderRadius: "lg",
-    px: "4",
-    py: "2.5",
     fontSize: "sm",
     fontWeight: "600",
-    letterSpacing: "0.01em",
-    transition: "background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease",
+    letterSpacing: "0.005em",
+    transition: "background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
     userSelect: "none",
     whiteSpace: "nowrap",
+    _focusVisible: {
+      outline: "2px solid",
+      outlineColor: "text.accent",
+      outlineOffset: "2px",
+    },
   },
   variants: {
     variant: {
@@ -25,7 +28,7 @@ export const buttonRecipe = cva({
         borderWidth: "1px",
         borderColor: "transparent",
         _dark: {
-          color: "#f7f9fd",
+          color: "text.inverse",
         },
       },
       outline: {
@@ -41,10 +44,40 @@ export const buttonRecipe = cva({
         borderColor: "badge.infoBorder",
       },
     },
+    size: {
+      sm: {
+        px: "3",
+        py: "1.5",
+        fontSize: "xs",
+        borderRadius: "md",
+      },
+      md: {
+        px: "4",
+        py: "2.5",
+      },
+      lg: {
+        px: "5",
+        py: "3",
+        fontSize: "md",
+        borderRadius: "xl",
+      },
+    },
+    tone: {
+      default: {},
+      danger: {
+        bg: "text.error",
+        color: "text.inverse",
+        borderWidth: "1px",
+        borderColor: "transparent",
+        _dark: {
+          color: "text.inverse",
+        },
+      },
+    },
     disabled: {
       true: {
         cursor: "not-allowed",
-        opacity: 0.5,
+        opacity: 0.45,
       },
       false: {
         cursor: "pointer",
@@ -53,24 +86,60 @@ export const buttonRecipe = cva({
     loading: {
       true: {
         cursor: "not-allowed",
-        opacity: 0.5,
+        opacity: 0.45,
       },
     },
   },
   compoundVariants: [
     {
       variant: "solid",
+      tone: "default",
       disabled: false,
       loading: false,
       css: {
         _hover: {
           bg: "text.accent",
-          opacity: 0.9,
+          boxShadow: "0 2px 8px -2px rgba(49, 94, 255, 0.4)",
+          _dark: {
+            boxShadow: "0 2px 8px -2px rgba(138, 180, 255, 0.3)",
+          },
+        },
+      },
+    },
+    {
+      variant: "solid",
+      tone: "danger",
+      disabled: false,
+      loading: false,
+      css: {
+        _hover: {
+          bg: "text.error",
+          boxShadow: "0 2px 8px -2px rgba(217, 45, 32, 0.4)",
+          _dark: {
+            boxShadow: "0 2px 8px -2px rgba(255, 142, 127, 0.3)",
+          },
+        },
+      },
+    },
+    {
+      variant: "outline",
+      tone: "danger",
+      disabled: false,
+      loading: false,
+      css: {
+        color: "text.error",
+        borderColor: "border.danger",
+        bg: "transparent",
+        _hover: {
+          bg: "badge.dangerBg",
+          borderColor: "text.error",
+          color: "text.error",
         },
       },
     },
     {
       variant: "outline",
+      tone: "default",
       disabled: false,
       loading: false,
       css: {
@@ -78,11 +147,15 @@ export const buttonRecipe = cva({
           color: "text.primary",
           borderColor: "border.strong",
           bg: "bg.cardStrong",
+          _dark: {
+            bg: "rgba(255, 255, 255, 0.06)",
+          },
         },
       },
     },
     {
       variant: "subtle",
+      tone: "default",
       disabled: false,
       loading: false,
       css: {
@@ -95,6 +168,8 @@ export const buttonRecipe = cva({
   ],
   defaultVariants: {
     variant: "solid",
+    size: "md",
+    tone: "default",
     disabled: false,
     loading: false,
   },

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

@@ -4,42 +4,53 @@ export const cardRecipe = cva({
   base: {
     minWidth: "0",
     borderWidth: "1px",
-    transition: "all 160ms ease",
+    transition: "border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
   },
   variants: {
     variant: {
       surface: {
         position: "relative",
-        overflow: "hidden",
-        borderRadius: "3xl",
+        borderRadius: "xl",
         borderColor: "border.subtle",
         bg: "bg.card",
-        backdropFilter: "blur(28px) saturate(155%)",
-        boxShadow: "0 25px 30px -35px rgba(15,23,42,0.42)",
+        boxShadow: "0 1px 2px 0 rgba(15,23,42,0.04), 0 1px 3px 0 rgba(15,23,42,0.06)",
+        _dark: {
+          borderColor: "border.default",
+          boxShadow: "0 1px 2px 0 rgba(0,0,0,0.2), 0 1px 3px 0 rgba(0,0,0,0.24)",
+        },
       },
       inset: {
-        borderRadius: "2xl",
+        borderRadius: "lg",
         borderColor: "border.soft",
         bg: "bg.cardAlt",
-        backdropFilter: "blur(24px) saturate(145%)",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)",
+        _dark: {
+          borderColor: "border.subtle",
+        },
       },
       elevated: {
-        borderRadius: "2xl",
+        borderRadius: "lg",
         borderColor: "border.default",
         bg: "bg.cardStrong",
-        backdropFilter: "blur(24px) saturate(145%)",
-        boxShadow: "0 16px 32px -28px rgba(15,23,42,0.42)",
+        boxShadow: "0 1px 2px 0 rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.1)",
+        _dark: {
+          borderColor: "border.strong",
+          boxShadow: "0 1px 2px 0 rgba(0,0,0,0.24), 0 4px 12px -4px rgba(0,0,0,0.4)",
+        },
       },
       selectable: {
-        borderRadius: "2xl",
+        borderRadius: "lg",
         borderColor: "border.default",
         bg: "bg.cardAlt",
         cursor: "pointer",
         _hover: {
           borderColor: "border.strong",
           bg: "bg.card",
-          transform: "translateY(-1px)",
+        },
+        _dark: {
+          borderColor: "border.strong",
+          _hover: {
+            borderColor: "border.accent",
+          },
         },
       },
     },

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

@@ -5,14 +5,17 @@ export const dropdownRecipe = cva({
     borderWidth: "1px",
     borderColor: "border.subtle",
     bg: "bg.menu",
-    backdropFilter: "blur(34px) saturate(165%)",
-    boxShadow: "0 32px 70px -40px rgba(15,23,42,0.5)",
+    boxShadow: "0 4px 16px -4px rgba(15,23,42,0.1), 0 8px 24px -8px rgba(15,23,42,0.08), 0 1px 2px 0 rgba(15,23,42,0.04)",
+    _dark: {
+      borderColor: "border.default",
+      boxShadow: "0 4px 16px -4px rgba(0,0,0,0.32), 0 8px 24px -8px rgba(0,0,0,0.24), 0 1px 2px 0 rgba(0,0,0,0.16)",
+    },
   },
   variants: {
     placement: {
       anchored: {
         position: "absolute",
-        top: "calc(100% + 10px)",
+        top: "calc(100% + 6px)",
         left: "0",
         right: "0",
       },
@@ -22,15 +25,15 @@ export const dropdownRecipe = cva({
     },
     density: {
       cozy: {
-        borderRadius: "2xl",
-        p: "2",
-        gap: "1",
-      },
-      compact: {
         borderRadius: "xl",
         p: "1.5",
         gap: "0.5",
       },
+      compact: {
+        borderRadius: "lg",
+        p: "1",
+        gap: "0.5",
+      },
     },
   },
   defaultVariants: {

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

@@ -8,16 +8,23 @@ export const inputRecipe = cva({
     bg: "bg.input",
     color: "text.primary",
     fontSize: "sm",
-    backdropFilter: "blur(22px) saturate(145%)",
-    transition: "border-color 160ms ease, background 160ms ease",
+    transition: "border-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
     _placeholder: {
       color: "text.muted",
     },
     _hover: {
       borderColor: "border.strong",
     },
+    _focusVisible: {
+      outline: "none",
+      borderColor: "border.accent",
+      boxShadow: "0 0 0 3px var(--colors-bg-accentSoft, rgba(49, 94, 255, 0.12))",
+    },
     _dark: {
-      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
+      borderColor: "border.strong",
+      _focusVisible: {
+        boxShadow: "0 0 0 3px var(--colors-bg-accentSoft, rgba(138, 180, 255, 0.14))",
+      },
     },
   },
   variants: {
@@ -28,7 +35,6 @@ export const inputRecipe = cva({
         px: "3",
         py: "2.5",
         lineHeight: "1.45",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.2)",
       },
       md: {
         minHeight: "48px",
@@ -36,7 +42,6 @@ export const inputRecipe = cva({
         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: {
@@ -48,7 +53,6 @@ export const inputRecipe = cva({
         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)",
       },
     },
   },

package/src/tokens/core-colors.ts

@@ -28,6 +28,7 @@ export const coreColorTokens = {
     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)" } },
+    dangerSoft: { value: { base: "rgba(217, 45, 32, 0.06)", _dark: "rgba(255, 142, 127, 0.08)" } },
   },
   border: {
     soft: { value: { base: "rgba(148, 163, 184, 0.14)", _dark: "rgba(255, 255, 255, 0.035)" } },
@@ -35,6 +36,7 @@ export const coreColorTokens = {
     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)" } },
+    danger: { value: { base: "rgba(217, 45, 32, 0.35)", _dark: "rgba(255, 142, 127, 0.35)" } },
   },
   badge: {
     successBg: { value: { base: "rgba(19, 163, 74, 0.12)", _dark: "rgba(19, 80, 58, 0.7)" } },
@@ -49,5 +51,8 @@ export const coreColorTokens = {
     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)" } },
+    dangerBg: { value: { base: "rgba(217, 45, 32, 0.12)", _dark: "rgba(255, 142, 127, 0.15)" } },
+    dangerText: { value: { base: "#b42318", _dark: "#ff8e7f" } },
+    dangerBorder: { value: { base: "rgba(217, 45, 32, 0.22)", _dark: "rgba(255, 142, 127, 0.3)" } },
   },
 } as const;

package/src/tokens/motion.ts

@@ -1,6 +1,14 @@
 export const motionTokens = {
   durations: {
+    fast: { value: "100ms" },
     moderate: { value: "160ms" },
     emphasized: { value: "240ms" },
+    slow: { value: "320ms" },
+  },
+  easings: {
+    default: { value: "cubic-bezier(0.25, 0.1, 0.25, 1)" },
+    out: { value: "cubic-bezier(0.16, 1, 0.3, 1)" },
+    inOut: { value: "cubic-bezier(0.45, 0, 0.55, 1)" },
+    spring: { value: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
   },
 } as const;

package/src/tokens/radius.ts

@@ -1,3 +1,6 @@
 export const radiusTokens = {
+  "2xs": { value: "0.125rem" },
+  "3xs": { value: "0.0625rem" },
   "4xl": { value: "2rem" },
+  "5xl": { value: "2.5rem" },
 } as const;