@deframe-sdk/components 0.1.16 → 0.1.17

package/dist/index.mjs

@@ -231,14 +231,14 @@ function SecondaryButton(_a) {
   ].join(" ");
   const stateClasses = {
     enabled: [
-      "text-[color:var(--deframe-widget-color-text-secondary)]",
-      "border-[color:var(--deframe-widget-color-border-secondary)]",
+      "text-[color:var(--deframe-widget-color-brand-primary)]",
+      "border-[color:var(--deframe-widget-color-brand-primary)]",
       "hover:opacity-90",
       "cursor-pointer"
     ].join(" "),
     disabled: [
-      "text-[color:var(--deframe-widget-color-text-secondary-disabled)]",
-      "border-[color:var(--deframe-widget-color-border-secondary-disabled)]",
+      "text-[color:var(--deframe-widget-color-brand-primary-disabled)]",
+      "border-[color:var(--deframe-widget-color-brand-primary-disabled)]",
       "cursor-not-allowed"
     ].join(" ")
   };
@@ -368,14 +368,21 @@ function InputField(_a) {
     "transition-colors"
   ].join(" ");
   const stateClasses = {
-    error: "border border-[var(--deframe-widget-color-state-error)]",
+    default: [
+      "border border-[var(--deframe-widget-color-border-primary)]",
+      "bg-[var(--deframe-widget-color-bg-raised)]"
+    ].join(" "),
+    error: [
+      "border border-[var(--deframe-widget-color-state-error)]",
+      "bg-[var(--deframe-widget-color-bg-raised)]"
+    ].join(" "),
     disabled: [
       "border",
       "border-[var(--deframe-widget-color-border-primary-disabled)]",
+      "bg-[var(--deframe-widget-color-bg-raised-disabled)]",
       "opacity-60",
       "cursor-not-allowed"
-    ].join(" "),
-    default: "border border-[var(--deframe-widget-color-border-primary)]"
+    ].join(" ")
   };
   const stateKey = hasError ? "error" : disabled ? "disabled" : "default";
   const fieldClasses = twMerge(baseClasses, stateClasses[stateKey], className);
@@ -418,12 +425,12 @@ function Link(_a) {
   ].join(" ");
   const stateClasses = {
     enabled: [
-      "text-[color:var(--deframe-widget-color-text-highlight)]",
-      "underline",
+      "text-[color:var(--deframe-widget-color-text-primary)]",
+      "hover:underline",
       "cursor-pointer"
     ].join(" "),
     disabled: [
-      "text-[color:var(--deframe-widget-color-text-highlight-disabled)]",
+      "text-[color:var(--deframe-widget-color-text-primary-disabled)]",
       "cursor-not-allowed",
       "pointer-events-none"
     ].join(" ")
@@ -4406,7 +4413,7 @@ var SwapQuoteDetailsView = ({
         title: labels.headerLabel,
         items,
         defaultOpen: isVisible,
-        className: "bg-bg-subtle dark:bg-bg-subtle-dark rounded shadow-sm p-md flex flex-col lg:!bg-bg-raised"
+        className: "rounded shadow-sm p-md flex flex-col bg-[var(--deframe-widget-color-bg-subtle)] lg:bg-[var(--deframe-widget-color-bg-raised)]"
       },
       `details-${isVisible}`
     ),
@@ -4813,7 +4820,7 @@ var HistoryListSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "self-s
   /* @__PURE__ */ jsx(HistoryGroupSkeleton, {})
 ] });
 var WalletBalances = ({ cards, variant = "subtle", className }) => {
-  const bgClass = variant === "raised" ? "bg-bg-raised dark:bg-bg-raised-dark" : "bg-bg-subtle dark:bg-bg-subtle-dark";
+  const bgClass = variant === "raised" ? "bg-[var(--deframe-widget-color-bg-raised)]" : "bg-[var(--deframe-widget-color-bg-subtle)]";
   return /* @__PURE__ */ jsx("div", { className: twMerge("w-full flex flex-row gap-4 mt-md", className), children: cards.map((card) => /* @__PURE__ */ jsxs("div", { className: twMerge("flex-1 h-auto px-6 py-4 rounded shadow-sm flex flex-col items-start justify-start gap-xs", bgClass), children: [
     /* @__PURE__ */ jsx(TextBody, { variant: "text-small", children: card.label }),
     /* @__PURE__ */ jsx(TextHeading, { variant: "h3", children: card.value })