stakekit · Philippoes · Jun 11, 2026 · Jun 11, 2026
diff --git a/packages/widget/src/components/atoms/button/styles.css.ts b/packages/widget/src/components/atoms/button/styles.css.ts
@@ -147,6 +147,12 @@ export const buttonStyle = recipe({
     },
     size: {
       regular: atoms({ minHeight: "buttonMinHeight" }),
+      compact: [
+        atoms({ minHeight: "10" }),
+        {
+          borderRadius: vars.borderRadius.baseContract.lg,
+        },
+      ],
       small: [
         style({
           padding: "9.8px 13.1px",

diff --git a/packages/widget/src/components/atoms/divider/styles.css.ts b/packages/widget/src/components/atoms/divider/styles.css.ts
@@ -1,6 +1,5 @@
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
-import { utilaPalette } from "../../../styles/theme/variant-overrides/palettes";
 
 export const divider = recipe({
   base: atoms({
@@ -9,8 +8,8 @@ export const divider = recipe({
   }),
   variants: {
     variant: {
-      default: atoms({ background: "backgroundMuted" }),
-      utila: { background: utilaPalette.tabPageDivider },
+      default: atoms({ background: "tabBorder" }),
+      utila: atoms({ background: "tabBorder" }),
     },
   },
   defaultVariants: {

diff --git a/packages/widget/src/components/atoms/max-button/styles.css.ts b/packages/widget/src/components/atoms/max-button/styles.css.ts
@@ -1,6 +1,5 @@
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
-import { utilaPalette } from "../../../styles/theme/variant-overrides/palettes";
 
 export const container = recipe({
   base: [
@@ -12,10 +11,13 @@ export const container = recipe({
   ],
   variants: {
     variant: {
-      default: atoms({ background: "background", borderRadius: "xl" }),
+      default: atoms({
+        background: "smallLightButtonBackground",
+        borderRadius: "base",
+      }),
       utila: [
         { borderRadius: "4px" },
-        { background: utilaPalette.maxButtonBackground },
+        atoms({ background: "smallLightButtonBackground" }),
       ],
     },
   },
@@ -27,11 +29,12 @@ export const container = recipe({
 export const text = recipe({
   variants: {
     variant: {
-      default: atoms({ color: "text", fontWeight: "semibold" }),
+      default: atoms({
+        color: "smallLightButtonColor",
+        fontWeight: "normal",
+      }),
       utila: [
-        {
-          color: utilaPalette.maxButtonText,
-        },
+        atoms({ color: "smallLightButtonColor" }),
         atoms({
           fontWeight: "normal",
         }),

diff --git a/packages/widget/src/components/atoms/select-modal/styles.css.ts b/packages/widget/src/components/atoms/select-modal/styles.css.ts
@@ -2,7 +2,6 @@ import { keyframes, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
 import { vars } from "../../../styles/theme/contract.css";
-import { utilaPalette } from "../../../styles/theme/variant-overrides/palettes";
 import { breakpoints, minMediaQuery } from "../../../styles/tokens/breakpoints";
 
 const slideUp = keyframes({
@@ -88,30 +87,20 @@ export const selectModalGroupLabel = style({
 
 export const selectedListItem = recipe({
   base: [
-    atoms({
-      background: "tokenSelectHoverBackground",
-    }),
     {
+      background: `color-mix(in srgb, ${vars.color.accent} 8%, transparent)`,
       border: `1px solid ${vars.color.accent}`,
       selectors: {
         "&:hover": {
-          background: vars.color.tokenSelectHoverBackground,
+          background: `color-mix(in srgb, ${vars.color.accent} 8%, transparent)`,
         },
       },
     },
   ],
   variants: {
     variant: {
       default: {},
-      utila: {
-        background: `${utilaPalette.primaryBlue}14`,
-        border: `1px solid ${utilaPalette.primaryBlue}`,
-        selectors: {
-          "&:hover": {
-            background: `${utilaPalette.primaryBlue}14`,
-          },
-        },
-      },
+      utila: {},
     },
   },
   defaultVariants: {

diff --git a/packages/widget/src/components/molecules/chain-modal/index.tsx b/packages/widget/src/components/molecules/chain-modal/index.tsx
@@ -34,7 +34,10 @@ export const ChainModal = () => {
               display="flex"
               justifyContent="space-between"
               alignItems="center"
-              className={combineRecipeWithVariant({ variant, rec: container })}
+              className={combineRecipeWithVariant({
+                variant,
+                rec: container,
+              })}
               onClick={() => {
                 trackEvent("chainModalOpened");
                 openChainModal();

diff --git a/packages/widget/src/components/molecules/estimated-reward-amounts/index.tsx b/packages/widget/src/components/molecules/estimated-reward-amounts/index.tsx
@@ -16,11 +16,11 @@ export const EstimatedRewardAmounts = ({
   earnYearly,
   earnMonthly,
 }: EstimatedRewardAmountsProps) => {
-  const { variant } = useSettings();
+  const { dashboardVariant, variant } = useSettings();
 
-  if (variant === "utila" || variant === "porto") {
+  if (dashboardVariant || variant === "utila" || variant === "porto") {
     return (
-      <UtilaEarnYearlyOrMonthly
+      <CompactEarnYearlyOrMonthly
         earnMonthly={earnMonthly}
         earnYearly={earnYearly}
       />
@@ -111,7 +111,7 @@ const DefaultEarnYearlyOrMonthly = ({
   );
 };
 
-const UtilaEarnYearlyOrMonthly = ({
+const CompactEarnYearlyOrMonthly = ({
   earnMonthly,
   earnYearly,
 }: EstimatedRewardAmountsProps) => {

diff --git a/packages/widget/src/components/molecules/summary-item/index.css.ts b/packages/widget/src/components/molecules/summary-item/index.css.ts
@@ -1,11 +1,7 @@
 import { type RecipeVariants, recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
 import { vars } from "../../../styles/theme/contract.css";
-import {
-  fineryLightPalette,
-  portoPalette,
-  utilaPalette,
-} from "../../../styles/theme/variant-overrides/palettes";
+import { fineryLightPalette } from "../../../styles/theme/variant-overrides/palettes";
 
 export const summaryContainer = recipe({
   base: atoms({
@@ -15,11 +11,9 @@ export const summaryContainer = recipe({
   }),
   variants: {
     variant: {
-      default: [
-        atoms({
-          gap: "8",
-        }),
-      ],
+      default: {
+        gap: "24px",
+      },
       utila: {
         gap: "24px",
       },
@@ -53,18 +47,20 @@ export const summaryItem = recipe({
       default: [
         atoms({
           background: "summaryItemBackground",
+          borderColor: "tabBorder",
         }),
         {
-          boxShadow: "0px 15px 30px 0px #0000000D",
+          borderRadius: "8px",
+          borderWidth: "1px",
+          borderStyle: "solid",
         },
       ],
       utila: [
         atoms({
           background: "summaryItemBackground",
-          borderColor: "transparent",
+          borderColor: "tabBorder",
         }),
         {
-          borderColor: utilaPalette.border,
           borderRadius: "8px",
           borderWidth: "1px",
           borderStyle: "solid",
@@ -99,9 +95,14 @@ export const summaryItem = recipe({
 export const summaryNumber = recipe({
   variants: {
     variant: {
-      default: {
-        fontSize: "28px",
-      },
+      default: [
+        atoms({
+          fontWeight: "medium",
+        }),
+        {
+          fontSize: "18px",
+        },
+      ],
       utila: [
         atoms({
           fontWeight: "medium",
@@ -132,8 +133,8 @@ export const summaryLabelContainer = recipe({
   variants: {
     variant: {
       default: {
-        borderRadius: "9px",
-        padding: "12px 10px",
+        borderRadius: "4px",
+        padding: "2px 6px",
       },
       utila: {
         borderRadius: "4px",
@@ -150,16 +151,16 @@ export const summaryLabelContainer = recipe({
     },
     type: {
       staked: {
-        background: "#F0EDFA",
-        color: "#5A36C0",
+        background: vars.color.summaryLabelStakedBackground,
+        color: vars.color.summaryLabelStakedColor,
       },
       apy: {
-        background: "#EDF1F5",
-        color: "#0059AB",
+        background: vars.color.summaryLabelApyBackground,
+        color: vars.color.summaryLabelApyColor,
       },
       available: {
-        background: "#EDF6F3",
-        color: "#00794E",
+        background: vars.color.summaryLabelAvailableBackground,
+        color: vars.color.summaryLabelAvailableColor,
       },
     },
   },
@@ -170,8 +171,8 @@ export const summaryLabelContainer = recipe({
         type: "staked",
       },
       style: {
-        background: "#F6F0FF",
-        color: "#5A36C0",
+        background: vars.color.summaryLabelStakedBackground,
+        color: vars.color.summaryLabelStakedColor,
       },
     },
     {
@@ -180,8 +181,8 @@ export const summaryLabelContainer = recipe({
         type: "apy",
       },
       style: {
-        background: "#F7ECFA",
-        color: "#CA6CBD",
+        background: vars.color.summaryLabelApyBackground,
+        color: vars.color.summaryLabelApyColor,
       },
     },
     {
@@ -190,8 +191,8 @@ export const summaryLabelContainer = recipe({
         type: "available",
       },
       style: {
-        background: "#EEF7F3",
-        color: "#327C5F",
+        background: vars.color.summaryLabelAvailableBackground,
+        color: vars.color.summaryLabelAvailableColor,
       },
     },
     {
@@ -231,8 +232,8 @@ export const summaryLabelContainer = recipe({
       },
       style: [
         {
-          color: "white",
-          background: portoPalette.greyThree,
+          color: vars.color.summaryLabelStakedColor,
+          background: vars.color.summaryLabelStakedBackground,
         },
       ],
     },
@@ -243,8 +244,8 @@ export const summaryLabelContainer = recipe({
       },
       style: [
         {
-          color: "white",
-          background: portoPalette.greyThree,
+          color: vars.color.summaryLabelApyColor,
+          background: vars.color.summaryLabelApyBackground,
         },
       ],
     },
@@ -255,8 +256,8 @@ export const summaryLabelContainer = recipe({
       },
       style: [
         {
-          color: "white",
-          background: portoPalette.greyThree,
+          color: vars.color.summaryLabelAvailableColor,
+          background: vars.color.summaryLabelAvailableBackground,
         },
       ],
     },
@@ -266,7 +267,10 @@ export const summaryLabelContainer = recipe({
 export const summaryLabel = recipe({
   variants: {
     variant: {
-      default: {},
+      default: {
+        color: "inherit",
+        fontSize: "12px",
+      },
       utila: {
         color: "inherit",
         fontSize: "12px",

diff --git a/packages/widget/src/domain/types/yields.ts b/packages/widget/src/domain/types/yields.ts
@@ -412,14 +412,14 @@ export const getYieldTypeLabels = (
 };
 
 const yieldTypesSortRank: { [Key in ExtendedYieldType]: number } = {
-  staking: 1,
-  native_staking: 2,
-  pooled_staking: 3,
-  restaking: 4,
-  lending: 5,
-  vault: 6,
-  fixed_yield: 7,
-  real_world_asset: 8,
+  real_world_asset: 1,
+  staking: 2,
+  native_staking: 3,
+  pooled_staking: 4,
+  restaking: 5,
+  lending: 6,
+  vault: 7,
+  fixed_yield: 8,
   liquidity_pool: 9,
   concentrated_liquidity_pool: 10,
 };

diff --git a/packages/widget/src/main.tsx b/packages/widget/src/main.tsx
@@ -1,5 +1,6 @@
 import ReactDOM from "react-dom/client";
 import { SKApp, type SKAppProps } from "./App";
+import type { VariantProps } from "./providers/settings/types";
 import {
   rootClassName,
   toggleThemeButtonClassName,
@@ -9,17 +10,22 @@ import "./standalone.css";
 import { useLayoutEffect, useState } from "react";
 import { darkTheme, lightTheme } from "./styles/theme/themes";
 
-const variant: SKAppProps["variant"] =
+type StandaloneVariant = Exclude<VariantProps["variant"], "zerion">;
+
+const variant: StandaloneVariant =
   import.meta.env.VITE_APP_VARIANT ?? "default";
 
 const dashboardVariant: SKAppProps["dashboardVariant"] =
   import.meta.env.VITE_FORCE_DASHBOARD === "true";
 
 const StandaloneApp = () => {
-  const [themeVariant, setThemeVariant] = useState<"dark" | "light">("light");
+  const [themeVariant, setThemeVariant] = useState<"dark" | "light">("dark");
 
   useLayoutEffect(() => {
-    document.body.className = rootClassName({ theme: themeVariant, variant });
+    document.body.className = rootClassName({
+      theme: themeVariant,
+      variant,
+    });
   }, [themeVariant]);
 
   const toggleTheme = () =>