@agentiffai/design 0.1.11 → 0.1.12

package/dist/layout/index.js

@@ -138,7 +138,7 @@ var NavigationContainer = styled9.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 6px;
+  padding-top: ${tokens.spacing.xs};
   gap: ${tokens.spacing.xs};
   width: 100%;
   height: 100%;
@@ -191,7 +191,7 @@ var CategoryButton = styled9.button`
 var CategoryLabel = styled9.span`
   font-size: 9px;
   color: ${tokens.colors.text.tertiary};
-  margin-top: 2px;
+  margin-top: ${tokens.spacing.xs};
   text-align: center;
   max-width: 56px;
   overflow: hidden;
@@ -1040,7 +1040,7 @@ WorkflowStatusCard.displayName = "WorkflowStatusCard";
 var DarkNotificationCardContainer = styled9.div`
   display: flex;
   flex-direction: column;
-  padding: 6px;
+  padding: ${tokens.spacing.xs};
   background: ${tokens.colors.surface.base};
   border-radius: ${tokens.borderRadius.md};
   gap: ${tokens.spacing.xs};
@@ -1053,7 +1053,7 @@ var DarkSectionHeader = styled9.button`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: ${tokens.spacing.xs} 2px;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.xs};
   border: none;
   background: transparent;
   font-family: ${tokens.typography.fontFamily.primary};
@@ -1095,18 +1095,18 @@ var DarkChevronIcon = styled9.span`
 var DarkSectionContent = styled9.div`
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: ${tokens.spacing.xs};
   padding-left: ${tokens.spacing.xs};
-  margin-top: 2px;
+  margin-top: ${tokens.spacing.xs};
   min-width: 0;
   overflow: hidden;
 `;
 var DarkNotificationItemWrapper = styled9.button`
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: ${tokens.spacing.xs};
   width: 100%;
-  padding: ${tokens.spacing.xs} 6px;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.xs};
   border: none;
   cursor: pointer;
   text-align: left;
@@ -1162,7 +1162,7 @@ var DarkItemIcon = styled9.span`
 
   /* Custom icon (emoji or colored icon) styling */
   ${(props) => props.$hasCustomIcon && `
-    padding: 2px;
+    padding: ${tokens.spacing.xs};
   `}
 `;
 var DarkItemText = styled9.span`
@@ -1440,7 +1440,7 @@ var TabButton = styled9.button`
   flex-shrink: 0;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 10px ${tokens.spacing.md};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: ${tokens.typography.fontSize.xs};
   }
 
@@ -1538,7 +1538,7 @@ styled9.button`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 10px ${tokens.spacing.md};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: 13px;
     gap: ${tokens.spacing.sm};
   }
@@ -1620,7 +1620,7 @@ var CategoryTitle = styled9.div`
   gap: ${tokens.spacing.sm};
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
+    gap: ${tokens.spacing.xs};
   }
 `;
 styled9.img`
@@ -1677,7 +1677,7 @@ var CategoryDisclosurePanel = styled9(DisclosurePanel)`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding-left: 2px;
+    padding-left: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -1699,7 +1699,7 @@ var ItemContainer = styled9.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
-  padding: 10px ${tokens.spacing.sm}; // Increased vertical padding from 4px to 10px for better breathing room
+  padding: ${tokens.spacing.sm} ${tokens.spacing.sm}; // Increased vertical padding from 4px to 8px for better breathing room
   border-radius: ${tokens.borderRadius.sm};
   cursor: pointer;
   transition: background-color ${tokens.transitions.fast};
@@ -1707,8 +1707,8 @@ var ItemContainer = styled9.div`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
-    padding: ${tokens.spacing.sm} 6px; // Increased vertical padding from 4px to 8px for mobile
+    gap: ${tokens.spacing.xs};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.xs}; // Increased vertical padding from 4px to 8px for mobile
   }
 
   &:hover {
@@ -1749,7 +1749,7 @@ var ItemHeader = styled9(Button)`
   }
 `;
 var ItemDisclosurePanel = styled9(DisclosurePanel)`
-  padding: 6px;
+  padding: ${tokens.spacing.xs};
   background-color: ${tokens.colors.overlay};
   border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
   margin-top: -${tokens.spacing.xs};
@@ -1760,7 +1760,7 @@ var ItemDisclosurePanel = styled9(DisclosurePanel)`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 6px;
+    padding: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -2081,7 +2081,7 @@ function ItemWithLogs({
     isExpanded && /* @__PURE__ */ jsx(ItemDisclosurePanel, { children: run.customContent ? (
       // Render custom content directly
       /* @__PURE__ */ jsx("div", { style: { padding: "16px" }, children: run.customContent })
-    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
+    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsx("div", { style: { color: tokens.colors.text.tertiary, fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
   ] });
 }
 function normalizeCategory(category) {
@@ -2116,7 +2116,7 @@ function WorkflowGroupItem({
     /* @__PURE__ */ jsx(Heading, { level: 4, children: /* @__PURE__ */ jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
       /* @__PURE__ */ jsxs(CategoryTitle, { children: [
         /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: group.workflowName }),
-        /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: "#72767D", marginLeft: "8px" }, children: [
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
           "(",
           group.runs.length,
           ")"
@@ -2326,7 +2326,7 @@ function ConnectionsTabContent({
   return /* @__PURE__ */ jsxs(ConnectionsContainer, { children: [
     /* @__PURE__ */ jsx(ConnectionDescription, { children: descriptionText }),
     /* @__PURE__ */ jsx(GoogleButton, { ...buttonProps, ref, $isConnected: isConnected, children: buttonText }),
-    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: "#B9BBBE" }, children: [
+    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: tokens.colors.text.secondary }, children: [
       "Connected services: ",
       googleConnection.scopes.join(", ")
     ] })