@aggc/ui 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aggc/ui",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Shared Vue UI primitives, patterns, and tokens for AGGC desktop and web.",
   "type": "module",
   "license": "MIT",

package/src/components/ResultPanel.styles.ts

@@ -6,6 +6,9 @@ export const resultPanelClass = cva({
   base: {
     borderWidth: "1px",
     padding: "5",
+    _dark: {
+      borderColor: "border.default",
+    },
   },
   variants: {
     ok: {
@@ -40,12 +43,13 @@ export const resultPanelSummaryClass = css({
 
 export const resultPanelIconClass = cva({
   base: {
-    width: "10",
-    height: "10",
+    width: "9",
+    height: "9",
     borderRadius: "full",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    flexShrink: "0",
   },
   variants: {
     ok: {
@@ -65,6 +69,7 @@ export const resultPanelTitleClass = css({
   fontSize: "lg",
   fontWeight: "700",
   color: "text.primary",
+  lineHeight: "1.3",
 });
 
 export const resultPanelSectionClass = cva({

package/src/components/SectionCard.styles.ts

@@ -26,7 +26,7 @@ export const sectionCardHeaderClass = pageHeaderRootClass;
 export const sectionCardHeaderWithGapClass = css({
   position: "relative",
   zIndex: "1",
-  mb: "5",
+  mb: "4",
 });
 
 export const sectionCardHeaderCollapsedGapClass = css({

package/src/components/StatusBadge.styles.ts

@@ -7,17 +7,14 @@ export const statusBadgeClass = cva({
     justifyContent: "center",
     borderRadius: "full",
     borderWidth: "1px",
-    px: "3",
-    py: "1.5",
+    px: "2.5",
+    py: "1",
     fontSize: "xs",
     fontWeight: "700",
     textTransform: "uppercase",
-    letterSpacing: "0.1em",
-    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)",
-    },
+    letterSpacing: "0.06em",
+    lineHeight: "1",
+    whiteSpace: "nowrap",
   },
   variants: {
     tone: {
@@ -41,6 +38,11 @@ export const statusBadgeClass = cva({
         color: "badge.neutralText",
         borderColor: "badge.neutralBorder",
       },
+      danger: {
+        bg: "badge.dangerBg",
+        color: "badge.dangerText",
+        borderColor: "badge.dangerBorder",
+      },
     },
   },
   defaultVariants: {

package/src/components/StatusBadge.vue

@@ -3,7 +3,7 @@ import { statusBadgeClass } from "./StatusBadge.styles";
 
 const props = withDefaults(
   defineProps<{
-    tone?: "success" | "warning" | "info" | "neutral";
+    tone?: "success" | "warning" | "info" | "danger" | "neutral";
   }>(),
   {
     tone: "neutral",

package/src/components/UiButton.vue

@@ -10,6 +10,8 @@ import {
 withDefaults(
   defineProps<{
     variant?: "solid" | "outline" | "subtle";
+    size?: "sm" | "md" | "lg";
+    tone?: "default" | "danger";
     loading?: boolean;
     loadingLabel?: string;
     disabled?: boolean;
@@ -18,6 +20,8 @@ withDefaults(
   }>(),
   {
     variant: "solid",
+    size: "md",
+    tone: "default",
     loading: false,
     loadingLabel: "Working...",
     disabled: false,
@@ -33,7 +37,7 @@ withDefaults(
     :disabled="disabled || loading"
     :aria-busy="loading || undefined"
     :aria-label="ariaLabel"
-    :class="uiButtonClass({ variant, disabled, loading })"
+    :class="uiButtonClass({ variant, size, tone, disabled, loading })"
   >
     <span :class="[uiButtonContentClass, loading ? uiButtonHiddenContentClass : undefined]">
       <slot />

package/src/components/UiCheckbox.styles.ts

@@ -7,30 +7,28 @@ export const uiCheckboxRootClass = cva({
     alignItems: "flex-start",
     gap: "3",
     textAlign: "left",
-    borderRadius: "2xl",
+    borderRadius: "xl",
     borderWidth: "1px",
     px: "4",
     py: "3.5",
     color: "text.primary",
-    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)",
   },
   variants: {
     checked: {
       true: {
         borderColor: "border.accent",
         bg: "bg.selected",
-        boxShadow: "0 18px 40px -30px rgba(49,94,255,0.56)",
       },
       false: {
         borderColor: "border.default",
         bg: "bg.input",
-        boxShadow: "0 14px 32px -30px rgba(15,23,42,0.42)",
       },
     },
     disabled: {
       true: {
         cursor: "not-allowed",
-        opacity: 0.5,
+        opacity: 0.45,
       },
       false: {
         cursor: "pointer",
@@ -44,7 +42,6 @@ export const uiCheckboxRootClass = cva({
       css: {
         _hover: {
           borderColor: "border.accent",
-          transform: "translateY(-1px)",
         },
       },
     },
@@ -54,7 +51,6 @@ export const uiCheckboxRootClass = cva({
       css: {
         _hover: {
           borderColor: "border.strong",
-          transform: "translateY(-1px)",
         },
       },
     },
@@ -72,11 +68,11 @@ export const uiCheckboxIndicatorClass = cva({
     width: "22px",
     height: "22px",
     borderRadius: "md",
-    borderWidth: "1px",
+    borderWidth: "1.5px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    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), color 160ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
   },
   variants: {
     checked: {
@@ -84,13 +80,13 @@ export const uiCheckboxIndicatorClass = cva({
         borderColor: "border.accent",
         bg: "bg.accentStrong",
         color: "text.inverse",
-        boxShadow: "0 12px 24px -16px rgba(49,94,255,0.7)",
+        transform: "scale(1)",
       },
       false: {
         borderColor: "border.default",
         bg: "bg.buttonOutline",
         color: "transparent",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.32)",
+        transform: "scale(1)",
       },
     },
   },

package/src/components/UiField.styles.ts

@@ -16,7 +16,7 @@ export const uiFieldTopRowClass = css({
 
 export const uiFieldLabelWrapClass = css({
   display: "grid",
-  gap: "1",
+  gap: "0.5",
   minWidth: "0",
 });
 
@@ -24,7 +24,7 @@ export const uiFieldEyebrowClass = eyebrowClass;
 
 export const uiFieldLabelClass = css({
   fontSize: "sm",
-  fontWeight: "700",
+  fontWeight: "600",
   color: "text.primary",
 });
 

package/src/components/UiLoadingState.styles.ts

@@ -21,8 +21,8 @@ export const uiLoadingStatePulseClass = css({
   borderRadius: "full",
   flexShrink: "0",
   bg: "text.accent",
-  boxShadow: "0 0 0 0 rgba(49,94,255,0.35)",
-  animation: "loadingPulse 1.2s ease-out infinite",
+  boxShadow: "0 0 0 0 var(--colors-bg-accentSoft, rgba(49, 94, 255, 0.3))",
+  animation: "loadingPulse 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite",
 });
 
 export const uiLoadingStateContentClass = css({

package/src/components/UiSegmentedControl.styles.ts

@@ -9,8 +9,9 @@ export const segmentedControlContainerClass = css({
   bg: "bg.input",
   padding: "1",
   gap: "1",
-  backdropFilter: "blur(18px) saturate(140%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.18)",
+  _dark: {
+    borderColor: "border.strong",
+  },
 });
 
 export const segmentedControlOptionClass = cva({
@@ -22,7 +23,12 @@ export const segmentedControlOptionClass = cva({
     fontWeight: "600",
     cursor: "pointer",
     borderWidth: "1px",
-    transition: "all 160ms ease",
+    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)",
+    _focusVisible: {
+      outline: "2px solid",
+      outlineColor: "text.accent",
+      outlineOffset: "2px",
+    },
   },
   variants: {
     active: {
@@ -30,10 +36,14 @@ export const segmentedControlOptionClass = cva({
         borderColor: "border.accent",
         bg: "bg.accentStrong",
         color: "text.inverse",
-        boxShadow: "0 14px 26px -16px rgba(49,94,255,0.68)",
         _hover: {
           bg: "bg.accentStrong",
         },
+        _dark: {
+          bg: "rgba(138, 180, 255, 0.2)",
+          color: "text.accent",
+          borderColor: "border.accent",
+        },
       },
       false: {
         borderColor: "transparent",

package/src/components/UiSelect.styles.ts

@@ -26,8 +26,7 @@ export const uiSelectTriggerClass = cva({
     borderWidth: "1px",
     fontSize: "sm",
     overflow: "hidden",
-    backdropFilter: "blur(24px) saturate(145%)",
-    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)",
   },
   variants: {
     size: {
@@ -48,12 +47,14 @@ export const uiSelectTriggerClass = cva({
       true: {
         borderColor: "border.accent",
         bg: "bg.cardStrong",
-        boxShadow: "0 18px 42px -28px rgba(49,94,255,0.42)",
+        _dark: {
+          borderColor: "border.accent",
+          bg: "bg.input",
+        },
       },
       false: {
         borderColor: "border.default",
         bg: "bg.input",
-        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22)",
       },
     },
     selected: {
@@ -63,10 +64,15 @@ export const uiSelectTriggerClass = cva({
     disabled: {
       true: {
         cursor: "not-allowed",
-        opacity: 0.55,
+        opacity: 0.45,
       },
       false: {
         cursor: "pointer",
+        _focusVisible: {
+          outline: "2px solid",
+          outlineColor: "text.accent",
+          outlineOffset: "2px",
+        },
       },
     },
   },
@@ -77,6 +83,9 @@ export const uiSelectTriggerClass = cva({
         _hover: {
           borderColor: "border.strong",
           bg: "bg.cardStrong",
+          _dark: {
+            bg: "bg.input",
+          },
         },
       },
     },
@@ -120,7 +129,7 @@ export const uiSelectValueTextClass = css({
 export const uiSelectChevronClass = cva({
   base: {
     color: "text.muted",
-    transition: "transform 160ms ease",
+    transition: "transform 160ms cubic-bezier(0.25, 0.1, 0.25, 1)",
   },
   variants: {
     open: {
@@ -141,20 +150,25 @@ export const uiSelectOptionClass = cva({
     justifyContent: "space-between",
     gap: "3",
     textAlign: "left",
-    borderRadius: "xl",
+    borderRadius: "lg",
     px: "3",
     borderWidth: "1px",
     cursor: "pointer",
-    transition: "all 140ms ease",
+    transition: "border-color 140ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 140ms cubic-bezier(0.25, 0.1, 0.25, 1), color 140ms cubic-bezier(0.25, 0.1, 0.25, 1)",
     _hover: {
       bg: "bg.selected",
       borderColor: "border.accent",
     },
+    _focusVisible: {
+      outline: "2px solid",
+      outlineColor: "text.accent",
+      outlineOffset: "-2px",
+    },
   },
   variants: {
     size: {
       sm: { py: "2.5" },
-      md: { py: "3" },
+      md: { py: "2.5" },
     },
     active: {
       true: {
@@ -200,7 +214,7 @@ export const uiSelectOptionDescriptionClass = css({
 export const uiSelectCheckClass = cva({
   base: {
     color: "text.accent",
-    transition: "opacity 140ms ease",
+    transition: "opacity 140ms cubic-bezier(0.25, 0.1, 0.25, 1)",
   },
   variants: {
     selected: {

package/src/components/UiSkeleton.styles.ts

@@ -4,19 +4,22 @@ export const skeletonClass = cva({
   base: {
     position: "relative",
     overflow: "hidden",
+    bg: "bg.cardAlt",
+    borderRadius: "md",
     _before: {
       content: "\"\"",
       position: "absolute",
       inset: "0",
       background:
-        "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0) 100%)",
+        "linear-gradient(90deg, transparent 0%, var(--colors-bg-overlay, rgba(255,255,255,0.36)) 50%, transparent 100%)",
       transform: "translateX(-100%)",
-      animation: "aggc-shimmer 1.45s ease-in-out infinite",
+      animation: "aggc-shimmer 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite",
     },
     _dark: {
+      bg: "rgba(255, 255, 255, 0.04)",
       _before: {
         background:
-          "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(186,204,236,0.22) 50%, rgba(255,255,255,0) 100%)",
+          "linear-gradient(90deg, transparent 0%, rgba(186, 204, 236, 0.1) 50%, transparent 100%)",
       },
     },
   },
@@ -25,65 +28,33 @@ export const skeletonClass = cva({
       text: {
         width: "100%",
         height: "0.875rem",
-        borderRadius: "md",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)",
-        },
       },
       title: {
         width: "100%",
         height: "1.75rem",
-        borderRadius: "xl",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)",
-        },
+        borderRadius: "md",
       },
       rect: {
         width: "100%",
         height: "5rem",
-        borderRadius: "xl",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)",
-        },
       },
       pill: {
         width: "5rem",
         height: "1.75rem",
         borderRadius: "999px",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)",
-        },
       },
       circle: {
         width: "2.75rem",
         height: "2.75rem",
         borderRadius: "999px",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)",
-        },
       },
       stat: {
         width: "100%",
         height: "4.75rem",
-        borderRadius: "xl",
-        bg: "rgba(117, 138, 178, 0.16)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.11)",
-        },
       },
       action: {
         width: "100%",
         height: "2.75rem",
-        borderRadius: "xl",
-        bg: "rgba(127, 146, 184, 0.14)",
-        _dark: {
-          bg: "rgba(210, 220, 240, 0.09)",
-        },
       },
     },
   },

package/src/css/base.css

@@ -8,14 +8,17 @@ html {
 
 body {
   margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 .aggc-spin {
-  animation: aggc-spin 800ms linear infinite;
+  animation: aggc-spin 700ms linear infinite;
 }
 
 [data-ui-loading-pulse] {
-  animation: loadingPulse 1.2s ease-out infinite;
+  animation: loadingPulse 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
 }
 
 [data-ui-skeleton]::before {
@@ -29,25 +32,57 @@ body {
 
 @keyframes loadingPulse {
   0% {
-    transform: scale(0.96);
-    box-shadow: 0 0 0 0 rgba(49, 94, 255, 0.35);
+    transform: scale(0.92);
+    box-shadow: 0 0 0 0 var(--colors-text-accent, rgba(49, 94, 255, 0.3));
   }
-  70% {
+  50% {
     transform: scale(1);
-    box-shadow: 0 0 0 10px rgba(49, 94, 255, 0);
+  }
+  70% {
+    box-shadow: 0 0 0 8px var(--colors-text-accent, rgba(49, 94, 255, 0));
   }
   100% {
-    transform: scale(0.96);
-    box-shadow: 0 0 0 0 rgba(49, 94, 255, 0);
+    transform: scale(0.92);
+    box-shadow: 0 0 0 0 var(--colors-text-accent, rgba(49, 94, 255, 0));
   }
 }
 
 @keyframes aggc-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
   100% {
     transform: translateX(100%);
   }
 }
 
+@keyframes aggc-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes aggc-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes aggc-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .aggc-spin,
   [data-ui-loading-pulse] {
@@ -57,6 +92,6 @@ body {
   [data-ui-skeleton]::before {
     animation: none !important;
     transform: translateX(0);
-    opacity: 0.45;
+    opacity: 0.4;
   }
 }

package/src/styles/layouts/page.ts

@@ -19,4 +19,9 @@ export const pageScrollRegionClass = css({
   overflowY: "auto",
   paddingRight: "1",
   alignContent: "start",
+  scrollbarWidth: "thin",
+  scrollbarColor: "rgba(148, 163, 184, 0.3) transparent",
+  _dark: {
+    scrollbarColor: "rgba(255, 255, 255, 0.12) transparent",
+  },
 });

package/src/styles/primitives/feedback.ts

@@ -9,6 +9,7 @@ export const errorTextClass = css({
   color: "text.error",
   fontSize: "sm",
   fontWeight: "600",
+  lineHeight: "1.5",
 });
 
 export const mutedTextClass = css({

package/src/styles/primitives/fields.ts

@@ -12,17 +12,20 @@ export const fieldControlClass = css({
   lineHeight: "1.5",
   px: "4",
   py: "3",
-  backdropFilter: "blur(22px) saturate(145%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 14px 28px -28px rgba(15,23,42,0.42)",
-  transition: "border-color 160ms ease, background 160ms ease, transform 160ms ease",
+  transition: "border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease",
   _hover: {
     borderColor: "border.strong",
   },
   _placeholder: {
     color: "text.muted",
   },
+  _focusVisible: {
+    outline: "none",
+    borderColor: "border.accent",
+    boxShadow: "0 0 0 3px rgba(82, 121, 255, 0.18)",
+  },
   _dark: {
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
+    borderColor: "border.strong",
   },
 });
 
@@ -38,17 +41,20 @@ export const fieldControlSmClass = css({
   lineHeight: "1.45",
   px: "3",
   py: "2.5",
-  backdropFilter: "blur(20px) saturate(145%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.2)",
-  transition: "border-color 160ms ease, background 160ms ease",
+  transition: "border-color 160ms ease, background-color 160ms ease",
   _hover: {
     borderColor: "border.strong",
   },
   _placeholder: {
     color: "text.muted",
   },
+  _focusVisible: {
+    outline: "none",
+    borderColor: "border.accent",
+    boxShadow: "0 0 0 3px rgba(82, 121, 255, 0.18)",
+  },
   _dark: {
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
+    borderColor: "border.strong",
   },
 });
 
@@ -65,12 +71,16 @@ export const fieldTextareaClass = css({
   lineHeight: "1.6",
   px: "4",
   py: "4",
-  backdropFilter: "blur(24px) saturate(145%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.24), 0 18px 36px -32px rgba(15,23,42,0.42)",
+  transition: "border-color 160ms ease, background-color 160ms ease",
   _hover: {
     borderColor: "border.strong",
   },
+  _focusVisible: {
+    outline: "none",
+    borderColor: "border.accent",
+    boxShadow: "0 0 0 3px rgba(82, 121, 255, 0.18)",
+  },
   _dark: {
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.03)",
+    borderColor: "border.strong",
   },
 });