From 527a60c7cac74ac2e4e5b698a2e2b6e4b89fa9ac Mon Sep 17 00:00:00 2001
From: Petar Todorovic <petar@stakek.it>
Date: Thu, 11 Jun 2026 14:28:00 +0200
Subject: [PATCH] refactor(widget): align theme variant defaults

Move the Utila and Porto palettes into the base light and dark theme tokens.

Expose variant override resolution so theme behavior has direct coverage.

Apply dashboard variant styling branches and keep RWA yields first in sorting.
---
 .../src/components/atoms/button/styles.css.ts |  6 ++
 .../components/atoms/divider/styles.css.ts    |  5 +-
 .../components/atoms/max-button/styles.css.ts | 17 ++--
 .../atoms/select-modal/styles.css.ts          | 17 +---
 .../molecules/chain-modal/index.tsx           |  5 +-
 .../estimated-reward-amounts/index.tsx        |  8 +-
 .../molecules/summary-item/index.css.ts       | 78 ++++++++++---------
 packages/widget/src/domain/types/yields.ts    | 16 ++--
 packages/widget/src/main.tsx                  | 12 ++-
 .../common/components/styles.css.ts           | 11 ++-
 .../common/components/tabs/styles.css.ts      | 29 +++----
 .../overview/earn-page/index.tsx              |  6 +-
 .../overview/earn-page/styles.css.ts          | 12 +--
 .../overview/positions/styles.css.ts          |  6 +-
 .../widget/src/pages/components/page-cta.tsx  |  6 +-
 .../src/pages/components/powered-by/index.tsx |  3 +
 .../components/activity-filters/index.tsx     |  4 +-
 .../components/activity-filters/styles.css.ts | 13 +++-
 .../pages/details/details-page/styles.css.ts  |  2 +-
 .../select-token-section/styles.css.ts        | 31 +++++---
 .../components/select-yield-section/index.tsx | 17 ++--
 .../select-yield-reward-details.tsx           |  4 +-
 .../select-yield-section/styles.css.ts        |  2 +-
 .../earn-page/state/earn-page-context.tsx     | 14 +++-
 .../components/amount-block.tsx               |  2 +-
 .../widget/src/providers/theme-wrapper.tsx    | 47 ++++++-----
 packages/widget/src/standalone.css.ts         |  2 +-
 .../styles/theme/variant-overrides/finery.ts  |  2 +-
 .../styles/theme/variant-overrides/porto.ts   | 12 +++
 .../styles/theme/variant-overrides/utila.ts   | 11 +++
 .../src/styles/tokens/colors/contract.ts      |  7 ++
 .../widget/src/styles/tokens/colors/values.ts | 78 +++++++++++--------
 packages/widget/src/vite-env.d.ts             |  7 +-
 .../dashboard-yield-category-types.test.ts    | 24 ++++++
 .../tests/providers/theme-wrapper.test.ts     | 48 ++++++++++++
 35 files changed, 368 insertions(+), 196 deletions(-)
 create mode 100644 packages/widget/tests/providers/theme-wrapper.test.ts

diff --git a/packages/widget/src/components/atoms/button/styles.css.ts b/packages/widget/src/components/atoms/button/styles.css.ts
index e5a4e3b3..d718b467 100644
--- 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
index 8750164f..1da03a88 100644
--- 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
index 1c044c3f..30eb950c 100644
--- 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
index 4b648868..9d26c0fb 100644
--- 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,14 +87,12 @@ 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)`,
         },
       },
     },
@@ -103,15 +100,7 @@ export const selectedListItem = recipe({
   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
index 8e8d703d..fa277f83 100644
--- 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
index 7d494eb5..1ea31e72 100644
--- 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
index c5bb3764..ccd4a82c 100644
--- 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
index 52855af7..d34df06d 100644
--- 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
index 34b7287f..264da889 100644
--- 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 = () =>
diff --git a/packages/widget/src/pages-dashboard/common/components/styles.css.ts b/packages/widget/src/pages-dashboard/common/components/styles.css.ts
index 81898f29..bf83fa85 100644
--- a/packages/widget/src/pages-dashboard/common/components/styles.css.ts
+++ b/packages/widget/src/pages-dashboard/common/components/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 wrapper = recipe({
   base: [
@@ -18,7 +17,7 @@ export const wrapper = recipe({
   variants: {
     variant: {
       default: {
-        borderRadius: "30px",
+        borderRadius: "14px",
       },
       utila: {
         borderRadius: "14px",
@@ -80,13 +79,13 @@ export const tabPageDivider = recipe({
     variant: {
       default: [
         atoms({
-          background: "backgroundMuted",
+          background: "tabBorder",
         }),
       ],
       utila: [
-        {
-          background: utilaPalette.tabPageDivider,
-        },
+        atoms({
+          background: "tabBorder",
+        }),
       ],
     },
   },
diff --git a/packages/widget/src/pages-dashboard/common/components/tabs/styles.css.ts b/packages/widget/src/pages-dashboard/common/components/tabs/styles.css.ts
index e6a0e68a..7be421e5 100644
--- a/packages/widget/src/pages-dashboard/common/components/tabs/styles.css.ts
+++ b/packages/widget/src/pages-dashboard/common/components/tabs/styles.css.ts
@@ -1,10 +1,7 @@
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../../styles/theme/atoms.css";
-import {
-  portoPalette,
-  utilaPalette,
-} from "../../../../styles/theme/variant-overrides/palettes";
+import { vars } from "../../../../styles/theme/contract.css";
 
 export const divider = style({
   position: "absolute",
@@ -36,7 +33,7 @@ export const tab = recipe({
     variant: {
       default: [
         {
-          borderRadius: "9999px",
+          borderRadius: "8px",
           padding: "8px 16px",
         },
       ],
@@ -70,7 +67,7 @@ export const tab = recipe({
         state: "active",
         variant: "utila",
       },
-      style: [{ background: utilaPalette.greyOne }],
+      style: [atoms({ background: "stakeSectionBackground" })],
     },
     {
       variants: {
@@ -104,9 +101,7 @@ export const tabContainer = recipe({
   },
   variants: {
     variant: {
-      default: {
-        minWidth: "74px",
-      },
+      default: {},
       utila: {},
       porto: {},
       finery: {
@@ -131,7 +126,12 @@ export const tabText = recipe({
       selected: {},
     },
     variant: {
-      default: {},
+      default: [
+        atoms({ fontWeight: "semibold" }),
+        {
+          fontSize: "14px",
+        },
+      ],
       utila: [
         atoms({ fontWeight: "semibold" }),
         {
@@ -139,9 +139,8 @@ export const tabText = recipe({
         },
       ],
       porto: [
-        atoms({ fontWeight: "semibold" }),
+        atoms({ color: "textMuted", fontWeight: "semibold" }),
         {
-          color: portoPalette.greyFour,
           fontSize: "14px",
         },
       ],
@@ -154,7 +153,7 @@ export const tabText = recipe({
         state: "selected",
       },
       style: {
-        color: portoPalette.greyOne,
+        color: vars.color.background,
       },
     },
   ],
@@ -177,7 +176,9 @@ export const tabsContainer = recipe({
     variant: {
       default: {
         gap: "4px",
-        padding: "16px 24px",
+        padding: "8px",
+        paddingLeft: "24px",
+        paddingRight: "24px",
       },
       utila: {
         gap: "4px",
diff --git a/packages/widget/src/pages-dashboard/overview/earn-page/index.tsx b/packages/widget/src/pages-dashboard/overview/earn-page/index.tsx
index aa803d9d..baf87f55 100644
--- a/packages/widget/src/pages-dashboard/overview/earn-page/index.tsx
+++ b/packages/widget/src/pages-dashboard/overview/earn-page/index.tsx
@@ -31,7 +31,7 @@ const EarnKycGateSection = () => {
 };
 
 export const EarnPageContent = () => {
-  const { variant } = useSettings();
+  const { dashboardVariant, variant } = useSettings();
   const { cta } = useEarnPageContext();
 
   return (
@@ -55,7 +55,9 @@ export const EarnPageContent = () => {
         <ExtraArgsSelection />
       </Box>
 
-      {(variant === "utila" || variant === "porto") && <Divider />}
+      {(dashboardVariant || variant === "utila" || variant === "porto") && (
+        <Divider />
+      )}
 
       <Box>
         <Footer />
diff --git a/packages/widget/src/pages-dashboard/overview/earn-page/styles.css.ts b/packages/widget/src/pages-dashboard/overview/earn-page/styles.css.ts
index 445e2425..2baeb8c1 100644
--- a/packages/widget/src/pages-dashboard/overview/earn-page/styles.css.ts
+++ b/packages/widget/src/pages-dashboard/overview/earn-page/styles.css.ts
@@ -1,10 +1,6 @@
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { atoms } from "../../../styles/theme/atoms.css";
-import {
-  portoPalette,
-  utilaPalette,
-} from "../../../styles/theme/variant-overrides/palettes";
 
 export const container = style([
   atoms({
@@ -21,9 +17,9 @@ export const changeButton = recipe({
   base: [{ cursor: "pointer" }],
   variants: {
     variant: {
-      default: {},
-      utila: { color: utilaPalette.primaryBlue },
-      porto: { color: portoPalette.primaryPurple },
+      default: atoms({ color: "accent" }),
+      utila: atoms({ color: "accent" }),
+      porto: atoms({ color: "accent" }),
       finery: {},
     },
   },
@@ -35,7 +31,7 @@ export const changeButton = recipe({
 export const selectTokenTitleContainer = recipe({
   variants: {
     variant: {
-      default: {},
+      default: atoms({ marginBottom: "4" }),
       utila: atoms({ marginBottom: "4" }),
       porto: atoms({ marginBottom: "4" }),
     },
diff --git a/packages/widget/src/pages-dashboard/overview/positions/styles.css.ts b/packages/widget/src/pages-dashboard/overview/positions/styles.css.ts
index 00569b15..6071aa63 100644
--- a/packages/widget/src/pages-dashboard/overview/positions/styles.css.ts
+++ b/packages/widget/src/pages-dashboard/overview/positions/styles.css.ts
@@ -41,9 +41,9 @@ export const sectionTitle = style({
 export const positionsTitle = recipe({
   variants: {
     variant: {
-      default: atoms({
-        fontSize: "md",
-      }),
+      default: {
+        fontSize: "16px",
+      },
       utila: {
         fontSize: "16px",
       },
diff --git a/packages/widget/src/pages/components/page-cta.tsx b/packages/widget/src/pages/components/page-cta.tsx
index 09f96315..35781513 100644
--- a/packages/widget/src/pages/components/page-cta.tsx
+++ b/packages/widget/src/pages/components/page-cta.tsx
@@ -1,5 +1,6 @@
 import { Box } from "../../components/atoms/box";
 import { Button } from "../../components/atoms/button";
+import { useSettings } from "../../providers/settings";
 
 export type PageCta = {
   disabled: boolean;
@@ -11,10 +12,12 @@ export type PageCta = {
 } | null;
 
 export const PageCtaButton = ({ cta }: { cta: PageCta }) => {
+  const { dashboardVariant } = useSettings();
+
   if (!cta || cta.hide) return null;
 
   return (
-    <Box marginTop="auto">
+    <Box marginTop="auto" paddingTop={dashboardVariant ? undefined : "8"}>
       <Button
         data-rk={`footer-button-${cta.variant ?? "primary"}`}
         disabled={cta.disabled}
@@ -25,6 +28,7 @@ export const PageCtaButton = ({ cta }: { cta: PageCta }) => {
             cta.variant ??
             (cta.disabled || cta.isLoading ? "disabled" : "primary"),
           animation: "press",
+          size: dashboardVariant ? "compact" : "regular",
         }}
       >
         {cta.label}
diff --git a/packages/widget/src/pages/components/powered-by/index.tsx b/packages/widget/src/pages/components/powered-by/index.tsx
index 90ce93da..af673ca7 100644
--- a/packages/widget/src/pages/components/powered-by/index.tsx
+++ b/packages/widget/src/pages/components/powered-by/index.tsx
@@ -5,6 +5,7 @@ import { SKLogo } from "../../../components/atoms/icons/sk-logo";
 import { Text } from "../../../components/atoms/typography/text";
 import { useSyncElementHeight } from "../../../hooks/use-sync-element-height";
 import { useMountAnimation } from "../../../providers/mount-animation";
+import { useSettings } from "../../../providers/settings";
 import createStateContext from "../../../utils/create-state-context";
 
 export const [usePoweredByHeight, PoweredByHeightProvider] =
@@ -19,6 +20,7 @@ export const PoweredBy = ({ opacity }: { opacity?: number }) => {
   const { t } = useTranslation();
 
   const { state } = useMountAnimation();
+  const { dashboardVariant } = useSettings();
 
   return (
     <motion.div
@@ -34,6 +36,7 @@ export const PoweredBy = ({ opacity }: { opacity?: number }) => {
         display="flex"
         justifyContent="center"
         alignItems="center"
+        paddingTop={dashboardVariant ? undefined : "3"}
         marginBottom="3"
         gap="1"
       >
diff --git a/packages/widget/src/pages/details/activity-page/components/activity-filters/index.tsx b/packages/widget/src/pages/details/activity-page/components/activity-filters/index.tsx
index 14f4e695..36266c56 100644
--- a/packages/widget/src/pages/details/activity-page/components/activity-filters/index.tsx
+++ b/packages/widget/src/pages/details/activity-page/components/activity-filters/index.tsx
@@ -41,7 +41,7 @@ export const ActivityFilters = ({
           >
             <Text
               variant={{
-                type: isSelected ? "white" : "regular",
+                type: isSelected ? "base" : "regular",
                 size: "small",
                 weight: "medium",
               }}
@@ -56,7 +56,7 @@ export const ActivityFilters = ({
             >
               <Text
                 variant={{
-                  type: isSelected ? "white" : "muted",
+                  type: isSelected ? "base" : "muted",
                   size: "small",
                   weight: "medium",
                 }}
diff --git a/packages/widget/src/pages/details/activity-page/components/activity-filters/styles.css.ts b/packages/widget/src/pages/details/activity-page/components/activity-filters/styles.css.ts
index 39726358..eae9afa0 100644
--- a/packages/widget/src/pages/details/activity-page/components/activity-filters/styles.css.ts
+++ b/packages/widget/src/pages/details/activity-page/components/activity-filters/styles.css.ts
@@ -1,6 +1,7 @@
 import { 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";
 
 export const filtersContainer = style([
   atoms({ display: "flex", alignItems: "center", paddingBottom: "3" }),
@@ -29,8 +30,12 @@ export const filterPill = recipe({
   ],
   variants: {
     state: {
-      default: atoms({ background: "transparent", borderColor: "tabBorder" }),
-      active: atoms({ background: "text", borderColor: "text" }),
+      default: atoms({ background: "transparent", borderColor: "text" }),
+      active: atoms({
+        background: "text",
+        borderColor: "text",
+        color: "primary",
+      }),
     },
   },
   defaultVariants: {
@@ -51,7 +56,9 @@ export const filterCount = recipe({
   variants: {
     state: {
       default: atoms({ background: "backgroundMuted" }),
-      active: { background: "rgba(255, 255, 255, 0.2)" },
+      active: {
+        background: `color-mix(in srgb, ${vars.color.primary} 18%, transparent)`,
+      },
     },
   },
   defaultVariants: {
diff --git a/packages/widget/src/pages/details/details-page/styles.css.ts b/packages/widget/src/pages/details/details-page/styles.css.ts
index 76ddf8ca..e5b14022 100644
--- a/packages/widget/src/pages/details/details-page/styles.css.ts
+++ b/packages/widget/src/pages/details/details-page/styles.css.ts
@@ -38,7 +38,7 @@ export const divider = style({
 
 export const tabBorder = style([
   atoms({
-    background: "tabBorder",
+    background: "text",
     borderRadius: "full",
     position: "absolute",
   }),
diff --git a/packages/widget/src/pages/details/earn-page/components/select-token-section/styles.css.ts b/packages/widget/src/pages/details/earn-page/components/select-token-section/styles.css.ts
index a596eac9..cc17137b 100644
--- a/packages/widget/src/pages/details/earn-page/components/select-token-section/styles.css.ts
+++ b/packages/widget/src/pages/details/earn-page/components/select-token-section/styles.css.ts
@@ -2,10 +2,6 @@ import { 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 {
-  portoPalette,
-  utilaPalette,
-} from "../../../../../styles/theme/variant-overrides/palettes";
 
 export const priceTxt = style({
   flexGrow: 999,
@@ -17,9 +13,9 @@ export const selectTokenSection = recipe({
   }),
   variants: {
     variant: {
-      default: atoms({
-        background: "stakeSectionBackground",
-      }),
+      default: {
+        background: "transparent",
+      },
       utila: {
         background: "transparent",
       },
@@ -36,10 +32,20 @@ export const selectTokenSection = recipe({
   compoundVariants: [
     {
       variants: {
+        state: "danger",
+        variant: "default",
+      },
+      style: atoms({
+        borderColor: "textDanger",
+      }),
+    },
+    {
+      variants: {
+        state: "default",
         variant: "default",
       },
       style: {
-        borderColor: "transparent",
+        borderColor: vars.color.tokenSelectBorder,
       },
     },
     {
@@ -57,7 +63,7 @@ export const selectTokenSection = recipe({
         variant: "utila",
       },
       style: {
-        borderColor: utilaPalette.selectTokenBorder,
+        borderColor: vars.color.tokenSelectBorder,
       },
     },
     {
@@ -93,7 +99,7 @@ export const selectTokenSection = recipe({
         variant: "porto",
       },
       style: {
-        borderColor: portoPalette.primaryPurple,
+        borderColor: vars.color.tokenSelectBorder,
       },
     },
   ],
@@ -102,7 +108,9 @@ export const selectTokenSection = recipe({
 export const selectTokenTitle = recipe({
   variants: {
     variant: {
-      default: {},
+      default: {
+        fontSize: "14px",
+      },
       utila: {
         fontSize: "14px",
       },
@@ -137,7 +145,6 @@ export const minMaxContainer = recipe({
   variants: {
     variant: {
       default: atoms({
-        marginRight: "2",
         marginTop: "2",
       }),
       utila: atoms({
diff --git a/packages/widget/src/pages/details/earn-page/components/select-yield-section/index.tsx b/packages/widget/src/pages/details/earn-page/components/select-yield-section/index.tsx
index 9a2cbb3e..d9d80b99 100644
--- a/packages/widget/src/pages/details/earn-page/components/select-yield-section/index.tsx
+++ b/packages/widget/src/pages/details/earn-page/components/select-yield-section/index.tsx
@@ -33,6 +33,11 @@ export const SelectYieldSection = () => {
   const riskSummary = selectedStake
     .map((yieldDto) => <YieldRiskRatingSummary yieldDto={yieldDto} />)
     .extractNullable();
+  const showSectionTitle =
+    !dashboardVariant &&
+    variant !== "zerion" &&
+    variant !== "utila" &&
+    variant !== "porto";
 
   return isLoading ? (
     <Box marginTop="2">
@@ -56,13 +61,11 @@ export const SelectYieldSection = () => {
           </Box>
         ) : (
           <Box>
-            {variant !== "zerion" &&
-              variant !== "utila" &&
-              variant !== "porto" && (
-                <Box my="2">
-                  <Text>{t("details.earn")}</Text>
-                </Box>
-              )}
+            {showSectionTitle && (
+              <Box my="2">
+                <Text>{t("details.earn")}</Text>
+              </Box>
+            )}
 
             <Box
               data-rk="stake-yield-section"
diff --git a/packages/widget/src/pages/details/earn-page/components/select-yield-section/select-yield-reward-details.tsx b/packages/widget/src/pages/details/earn-page/components/select-yield-section/select-yield-reward-details.tsx
index 1fab308a..e69dc523 100644
--- a/packages/widget/src/pages/details/earn-page/components/select-yield-section/select-yield-reward-details.tsx
+++ b/packages/widget/src/pages/details/earn-page/components/select-yield-section/select-yield-reward-details.tsx
@@ -23,7 +23,7 @@ import { useEarnPageContext } from "../../state/earn-page-context";
 import { viaProviderImage } from "./styles.css";
 
 export const SelectYieldRewardDetails = () => {
-  const { variant } = useSettings();
+  const { dashboardVariant, variant } = useSettings();
   const { t } = useTranslation();
 
   const {
@@ -85,7 +85,7 @@ export const SelectYieldRewardDetails = () => {
               .map((details) => <YieldStrategyDetails {...details} />)
               .extractNullable()}
 
-            <Divider />
+            {dashboardVariant && <Divider />}
           </>
         )}
 
diff --git a/packages/widget/src/pages/details/earn-page/components/select-yield-section/styles.css.ts b/packages/widget/src/pages/details/earn-page/components/select-yield-section/styles.css.ts
index 506b8066..413a757d 100644
--- a/packages/widget/src/pages/details/earn-page/components/select-yield-section/styles.css.ts
+++ b/packages/widget/src/pages/details/earn-page/components/select-yield-section/styles.css.ts
@@ -17,7 +17,7 @@ export const selectOpportunityButton = recipe({
   ],
   variants: {
     variant: {
-      default: atoms({ background: "background" }),
+      default: atoms({ background: "tokenSelectBackground" }),
       utila: atoms({ background: "tokenSelectBackground" }),
       finery: [
         atoms({ background: "tokenSelectBackground" }),
diff --git a/packages/widget/src/pages/details/earn-page/state/earn-page-context.tsx b/packages/widget/src/pages/details/earn-page/state/earn-page-context.tsx
index 20d1f594..3793dff1 100644
--- a/packages/widget/src/pages/details/earn-page/state/earn-page-context.tsx
+++ b/packages/widget/src/pages/details/earn-page/state/earn-page-context.tsx
@@ -437,7 +437,11 @@ export const EarnPageContextProvider = ({
         .filter(() => shouldFetchValidators)
         .chain(() =>
           Maybe.fromNullable(yieldValidators.data).map((validators) => {
-            if (variant === "utila" || variant === "porto") {
+            if (
+              dashboardVariant ||
+              variant === "utila" ||
+              variant === "porto"
+            ) {
               return [...validators].sort(
                 (a, b) =>
                   (b.rewardRate?.total ?? 0) - (a.rewardRate?.total ?? 0)
@@ -447,7 +451,13 @@ export const EarnPageContextProvider = ({
             return validators;
           })
         ),
-    [selectedStake, shouldFetchValidators, variant, yieldValidators.data]
+    [
+      dashboardVariant,
+      selectedStake,
+      shouldFetchValidators,
+      variant,
+      yieldValidators.data,
+    ]
   );
 
   const onYieldSearch: SelectModalProps["onSearch"] = (val) =>
diff --git a/packages/widget/src/pages/position-details/components/amount-block.tsx b/packages/widget/src/pages/position-details/components/amount-block.tsx
index bc248dab..3315c769 100644
--- a/packages/widget/src/pages/position-details/components/amount-block.tsx
+++ b/packages/widget/src/pages/position-details/components/amount-block.tsx
@@ -73,7 +73,7 @@ export const AmountBlock = ({
   ...rest
 }: AmountBlockProps) => {
   const { t } = useTranslation();
-  const { variant, dashboardVariant } = useSettings();
+  const { dashboardVariant, variant } = useSettings();
 
   const minMaxUnstakeAmount = Maybe.fromPredicate(
     (v) => v.variant === "unstake",
diff --git a/packages/widget/src/providers/theme-wrapper.tsx b/packages/widget/src/providers/theme-wrapper.tsx
index 534898fb..4071ee0b 100644
--- a/packages/widget/src/providers/theme-wrapper.tsx
+++ b/packages/widget/src/providers/theme-wrapper.tsx
@@ -1,6 +1,5 @@
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import merge from "lodash.merge";
-import { Just } from "purify-ts";
 import type { PropsWithChildren } from "react";
 import { useMemo } from "react";
 import { vars } from "../styles/theme/contract.css";
@@ -9,31 +8,41 @@ import { lightTheme } from "../styles/theme/themes";
 import { getFineryThemeOverrides } from "../styles/theme/variant-overrides/finery";
 import { portoThemeOverrides } from "../styles/theme/variant-overrides/porto";
 import { utilaThemeOverrides } from "../styles/theme/variant-overrides/utila";
+import type { RecursivePartial } from "../types/utils";
 import { useSettings } from "./settings";
+import type { SettingsContextType } from "./settings/types";
+
+export const getThemeOverrides = ({
+  baseTheme,
+  variant,
+}: {
+  baseTheme: typeof lightTheme;
+  variant: SettingsContextType["variant"];
+}): RecursivePartial<typeof lightTheme> => {
+  if (variant === "utila") {
+    return utilaThemeOverrides;
+  }
+
+  if (variant === "finery") {
+    return getFineryThemeOverrides(baseTheme);
+  }
+
+  if (variant === "porto") {
+    return portoThemeOverrides;
+  }
+
+  return {};
+};
 
 export const ThemeWrapper = ({ children }: PropsWithChildren) => {
   const { theme, variant } = useSettings();
 
   const finalTheme = useMemo(() => {
     const baseTheme = merge(structuredClone(lightTheme), theme);
-
-    const overrides = Just(variant)
-      .map((v) => {
-        if (v === "utila") {
-          return utilaThemeOverrides;
-        }
-
-        if (v === "finery") {
-          return getFineryThemeOverrides(baseTheme);
-        }
-
-        if (v === "porto") {
-          return portoThemeOverrides;
-        }
-
-        return {};
-      })
-      .unsafeCoerce();
+    const overrides = getThemeOverrides({
+      baseTheme,
+      variant,
+    });
 
     return merge(structuredClone(lightTheme), theme, overrides);
   }, [theme, variant]);
diff --git a/packages/widget/src/standalone.css.ts b/packages/widget/src/standalone.css.ts
index 007dd7a3..ca42ebcf 100644
--- a/packages/widget/src/standalone.css.ts
+++ b/packages/widget/src/standalone.css.ts
@@ -39,7 +39,7 @@ export const rootClassName = recipe({
         theme: "dark",
       },
       style: {
-        background: "#211f25",
+        background: "#000000",
       },
     },
     {
diff --git a/packages/widget/src/styles/theme/variant-overrides/finery.ts b/packages/widget/src/styles/theme/variant-overrides/finery.ts
index 2025f5f8..3cfccad2 100644
--- a/packages/widget/src/styles/theme/variant-overrides/finery.ts
+++ b/packages/widget/src/styles/theme/variant-overrides/finery.ts
@@ -8,7 +8,7 @@ import {
 } from "./palettes";
 
 const getFineryPalette = (theme: typeof lightTheme) =>
-  theme.color.background === darkTheme.color.background
+  theme.color.primary === darkTheme.color.primary
     ? fineryDarkPalette
     : fineryLightPalette;
 
diff --git a/packages/widget/src/styles/theme/variant-overrides/porto.ts b/packages/widget/src/styles/theme/variant-overrides/porto.ts
index fb5d209e..f99d0742 100644
--- a/packages/widget/src/styles/theme/variant-overrides/porto.ts
+++ b/packages/widget/src/styles/theme/variant-overrides/porto.ts
@@ -27,6 +27,8 @@ export const portoThemeOverrides: RecursivePartial<typeof lightTheme> = {
     secondaryButton: "600",
   },
   color: {
+    accent: portoPalette.primaryPurple,
+    textMuted: portoPalette.greyFour,
     tooltipBackground: portoPalette.greyThree,
     summaryItemBackground: portoPalette.greyTwo,
     background: portoPalette.greyOne,
@@ -34,7 +36,9 @@ export const portoThemeOverrides: RecursivePartial<typeof lightTheme> = {
     stakeSectionBackground: portoPalette.greyTwo,
     tokenSelectBackground: portoPalette.greyTwo,
     tokenSelectHoverBackground: portoPalette.greyThree,
+    tokenSelectBorder: portoPalette.primaryPurple,
     dashboardDetailsSectionBackground: portoPalette.greyTwo,
+    tabBorder: portoPalette.greyThree,
 
     modalBodyBackground: portoPalette.greyOne,
 
@@ -45,6 +49,14 @@ export const portoThemeOverrides: RecursivePartial<typeof lightTheme> = {
     primaryButtonColor: vars.color.white,
 
     smallButtonBackground: portoPalette.greyThree,
+    smallLightButtonBackground: portoPalette.greyThree,
+
+    summaryLabelStakedBackground: portoPalette.greyThree,
+    summaryLabelStakedColor: vars.color.white,
+    summaryLabelApyBackground: portoPalette.greyThree,
+    summaryLabelApyColor: vars.color.white,
+    summaryLabelAvailableBackground: portoPalette.greyThree,
+    summaryLabelAvailableColor: vars.color.white,
 
     connectKit: {
       modalBackground: portoPalette.greyOne,
diff --git a/packages/widget/src/styles/theme/variant-overrides/utila.ts b/packages/widget/src/styles/theme/variant-overrides/utila.ts
index e10dd6f9..9d46d9ea 100644
--- a/packages/widget/src/styles/theme/variant-overrides/utila.ts
+++ b/packages/widget/src/styles/theme/variant-overrides/utila.ts
@@ -13,10 +13,12 @@ export const utilaThemeOverrides: RecursivePartial<typeof lightTheme> = {
     },
   },
   color: {
+    accent: utilaPalette.primaryBlue,
     summaryItemBackground: utilaPalette.greyOne,
     backgroundMuted: utilaPalette.greyOne,
     stakeSectionBackground: utilaPalette.greyOne,
     tokenSelectBackground: utilaPalette.greyOne,
+    tokenSelectBorder: utilaPalette.selectTokenBorder,
     dashboardDetailsSectionBackground: utilaPalette.greyOne,
     warningBoxBackground: utilaPalette.warningBackground,
 
@@ -24,5 +26,14 @@ export const utilaThemeOverrides: RecursivePartial<typeof lightTheme> = {
 
     primaryButtonBackground: utilaPalette.primaryBlue,
     primaryButtonColor: vars.color.white,
+    smallLightButtonColor: utilaPalette.maxButtonText,
+    smallLightButtonBackground: utilaPalette.maxButtonBackground,
+
+    summaryLabelStakedBackground: "#F6F0FF",
+    summaryLabelStakedColor: "#5A36C0",
+    summaryLabelApyBackground: "#F7ECFA",
+    summaryLabelApyColor: "#CA6CBD",
+    summaryLabelAvailableBackground: "#EEF7F3",
+    summaryLabelAvailableColor: "#327C5F",
   },
 };
diff --git a/packages/widget/src/styles/tokens/colors/contract.ts b/packages/widget/src/styles/tokens/colors/contract.ts
index df01b091..e91fc09f 100644
--- a/packages/widget/src/styles/tokens/colors/contract.ts
+++ b/packages/widget/src/styles/tokens/colors/contract.ts
@@ -16,6 +16,7 @@ const baseColorsContract = {
 
   tokenSelectBackground: "",
   tokenSelectHoverBackground: "",
+  tokenSelectBorder: "",
   tokenSelect: "",
 
   skeletonLoaderBase: "",
@@ -60,6 +61,12 @@ const baseColorsContract = {
   dashboardDetailsSectionBackground: "",
 
   summaryItemBackground: "",
+  summaryLabelStakedBackground: "",
+  summaryLabelStakedColor: "",
+  summaryLabelApyBackground: "",
+  summaryLabelApyColor: "",
+  summaryLabelAvailableBackground: "",
+  summaryLabelAvailableColor: "",
 };
 
 export const colorsContract: typeof baseColorsContract & {
diff --git a/packages/widget/src/styles/tokens/colors/values.ts b/packages/widget/src/styles/tokens/colors/values.ts
index a72afb48..94b1d574 100644
--- a/packages/widget/src/styles/tokens/colors/values.ts
+++ b/packages/widget/src/styles/tokens/colors/values.ts
@@ -123,7 +123,7 @@ export const lightThemeColors: typeof colorsContract = {
   white: sharedSemanticColors.base.white,
   transparent: sharedSemanticColors.base.transparent,
   primary: lightSemanticColors.brand.primary,
-  accent: lightSemanticColors.brand.accent,
+  accent: "#4A60FF",
   disabled: sharedSemanticColors.base.disabled,
 
   text: lightSemanticColors.foreground.default,
@@ -131,27 +131,28 @@ export const lightThemeColors: typeof colorsContract = {
   textDanger: lightSemanticColors.foreground.danger,
 
   background: vars.color.primary,
-  backgroundMuted: lightSemanticColors.background.muted,
+  backgroundMuted: "#f5f5f6",
 
-  tokenSelectBackground: vars.color.backgroundMuted,
+  tokenSelectBackground: "#f5f5f6",
   tokenSelectHoverBackground: lightSemanticColors.interaction.mutedHover,
+  tokenSelectBorder: "#C9CFFF",
   tokenSelect: vars.color.text,
 
-  tabBorder: lightSemanticColors.border.default,
+  tabBorder: "#e4e4e7",
 
   skeletonLoaderBase: vars.color.backgroundMuted,
   skeletonLoaderHighlight: vars.color.background,
 
-  warningBoxBackground: vars.color.backgroundMuted,
+  warningBoxBackground: "#FFE9BD",
 
-  stakeSectionBackground: vars.color.backgroundMuted,
+  stakeSectionBackground: "#f5f5f6",
 
   dropdownBackground: lightSemanticColors.background.dropdown,
 
   selectValidatorMultiSelectedBackground: sharedSemanticColors.status.selected,
   selectValidatorMultiDefaultBackground: vars.color.background,
 
-  positionsClaimRewardsBackground: sharedSemanticColors.status.success,
+  positionsClaimRewardsBackground: "#4BAA82",
   positionsActionRequiredBackground: sharedSemanticColors.status.danger,
   positionsPendingBackground: sharedSemanticColors.status.warning,
   positionsRewardRate: sharedSemanticColors.status.rewardRate,
@@ -162,7 +163,7 @@ export const lightThemeColors: typeof colorsContract = {
   tooltipBackground: lightSemanticColors.background.tooltip,
 
   primaryButtonColor: vars.color.white,
-  primaryButtonBackground: vars.color.accent,
+  primaryButtonBackground: "#4A60FF",
 
   secondaryButtonColor: vars.color.text,
   secondaryButtonBackground: vars.color.background,
@@ -170,8 +171,8 @@ export const lightThemeColors: typeof colorsContract = {
   smallButtonColor: vars.color.text,
   smallButtonBackground: vars.color.background,
 
-  smallLightButtonColor: vars.color.text,
-  smallLightButtonBackground: vars.color.backgroundMuted,
+  smallLightButtonColor: "#5C70FF",
+  smallLightButtonBackground: "#F4F5FF",
 
   disabledButtonColor: vars.color.white,
   disabledButtonBackground: vars.color.disabled,
@@ -185,38 +186,45 @@ export const lightThemeColors: typeof colorsContract = {
     modalBackdrop: sharedSemanticColors.overlay.modal,
   },
 
-  dashboardDetailsSectionBackground: primitiveColors.overlay.black2,
-  summaryItemBackground: vars.color.modalBodyBackground,
+  dashboardDetailsSectionBackground: "#f5f5f6",
+  summaryItemBackground: "#f5f5f6",
+  summaryLabelStakedBackground: "#F6F0FF",
+  summaryLabelStakedColor: "#5A36C0",
+  summaryLabelApyBackground: "#F7ECFA",
+  summaryLabelApyColor: "#CA6CBD",
+  summaryLabelAvailableBackground: "#EEF7F3",
+  summaryLabelAvailableColor: "#327C5F",
 };
 
 export const darkThemeColors: typeof colorsContract = {
   white: sharedSemanticColors.base.white,
   transparent: sharedSemanticColors.base.transparent,
-  primary: darkSemanticColors.brand.primary,
-  accent: darkSemanticColors.brand.accent,
+  primary: "#171717",
+  accent: "#AB95FF",
   disabled: sharedSemanticColors.base.disabled,
 
   text: darkSemanticColors.foreground.default,
-  textMuted: darkSemanticColors.foreground.muted,
+  textMuted: "#87899C",
   textDanger: darkSemanticColors.foreground.danger,
 
   background: vars.color.primary,
-  backgroundMuted: darkSemanticColors.background.muted,
+  backgroundMuted: "#333333",
 
-  tokenSelectBackground: vars.color.backgroundMuted,
-  tokenSelectHoverBackground: darkSemanticColors.interaction.mutedHover,
+  tokenSelectBackground: "#282828",
+  tokenSelectHoverBackground: "#333333",
+  tokenSelectBorder: "#AB95FF",
   tokenSelect: vars.color.text,
 
-  tabBorder: darkSemanticColors.border.default,
+  tabBorder: "#333333",
 
-  skeletonLoaderBase: vars.color.backgroundMuted,
-  skeletonLoaderHighlight: vars.color.background,
+  skeletonLoaderBase: "#282828",
+  skeletonLoaderHighlight: "#333333",
 
   warningBoxBackground: vars.color.backgroundMuted,
 
-  stakeSectionBackground: vars.color.backgroundMuted,
+  stakeSectionBackground: "#282828",
 
-  dropdownBackground: darkSemanticColors.background.dropdown,
+  dropdownBackground: "#333333",
 
   selectValidatorMultiSelectedBackground: sharedSemanticColors.status.selected,
   selectValidatorMultiDefaultBackground: vars.color.background,
@@ -229,19 +237,19 @@ export const darkThemeColors: typeof colorsContract = {
   modalOverlayBackground: sharedSemanticColors.overlay.modal,
   modalBodyBackground: vars.color.background,
 
-  tooltipBackground: darkSemanticColors.background.tooltip,
+  tooltipBackground: "#333333",
 
-  primaryButtonColor: primitiveColors.blackFull,
-  primaryButtonBackground: vars.color.white,
+  primaryButtonColor: vars.color.white,
+  primaryButtonBackground: "#AB95FF",
 
   secondaryButtonColor: vars.color.text,
   secondaryButtonBackground: vars.color.background,
 
   smallButtonColor: vars.color.text,
-  smallButtonBackground: vars.color.background,
+  smallButtonBackground: "#333333",
 
   smallLightButtonColor: vars.color.text,
-  smallLightButtonBackground: vars.color.backgroundMuted,
+  smallLightButtonBackground: "#333333",
 
   disabledButtonColor: primitiveColors.blackFull,
   disabledButtonBackground: vars.color.disabled,
@@ -250,11 +258,17 @@ export const darkThemeColors: typeof colorsContract = {
     ...connectKitTheme.darkMode.colors,
     modalBackground: vars.color.modalBodyBackground,
     profileForeground: vars.color.modalBodyBackground,
-    profileAction: vars.color.backgroundMuted,
-    profileActionHover: darkSemanticColors.interaction.mutedHover,
+    profileAction: "#282828",
+    profileActionHover: "#333333",
     modalBackdrop: sharedSemanticColors.overlay.modal,
   },
 
-  dashboardDetailsSectionBackground: primitiveColors.overlay.black2,
-  summaryItemBackground: vars.color.modalBodyBackground,
+  dashboardDetailsSectionBackground: "#282828",
+  summaryItemBackground: "#282828",
+  summaryLabelStakedBackground: "#333333",
+  summaryLabelStakedColor: vars.color.white,
+  summaryLabelApyBackground: "#333333",
+  summaryLabelApyColor: vars.color.white,
+  summaryLabelAvailableBackground: "#333333",
+  summaryLabelAvailableColor: vars.color.white,
 };
diff --git a/packages/widget/src/vite-env.d.ts b/packages/widget/src/vite-env.d.ts
index 3f6fc6d8..eed2d623 100644
--- a/packages/widget/src/vite-env.d.ts
+++ b/packages/widget/src/vite-env.d.ts
@@ -8,7 +8,12 @@ interface ImportMetaEnv {
   readonly VITE_ENABLE_MSW_MOCK: string;
   readonly VITE_FORCE_ADDRESS: string | undefined;
   readonly VITE_FORCE_DASHBOARD: string;
-  readonly VITE_APP_VARIANT: "utila" | undefined;
+  readonly VITE_APP_VARIANT:
+    | "default"
+    | "utila"
+    | "finery"
+    | "porto"
+    | undefined;
   readonly VITE_YIELDS_API_URL: string;
 }
 
diff --git a/packages/widget/tests/domain/dashboard-yield-category-types.test.ts b/packages/widget/tests/domain/dashboard-yield-category-types.test.ts
index 91f70e3b..b6547e45 100644
--- a/packages/widget/tests/domain/dashboard-yield-category-types.test.ts
+++ b/packages/widget/tests/domain/dashboard-yield-category-types.test.ts
@@ -2,6 +2,8 @@ import { describe, expect, it } from "vitest";
 import {
   dashboardYieldCategories,
   getApiYieldTypesForDashboardCategory,
+  getYieldTypesSortRank,
+  type YieldBase,
 } from "../../src/domain/types/yields";
 
 const allApiYieldTypes = [
@@ -50,3 +52,25 @@ describe("getApiYieldTypesForDashboardCategory", () => {
     expect(mapped.length).toBe(allApiYieldTypes.length);
   });
 });
+
+describe("getYieldTypesSortRank", () => {
+  const makeYield = (type: YieldBase["mechanics"]["type"]): YieldBase =>
+    ({
+      mechanics: {
+        type,
+      },
+      token: {
+        network: "ethereum",
+        symbol: "USDC",
+      },
+    }) as YieldBase;
+
+  it("ranks RWA yields before other API yield types", () => {
+    const rwaRank = getYieldTypesSortRank(makeYield("real_world_asset"));
+    const otherRanks = allApiYieldTypes
+      .filter((type) => type !== "real_world_asset")
+      .map((type) => getYieldTypesSortRank(makeYield(type)));
+
+    expect(rwaRank).toBeLessThan(Math.min(...otherRanks));
+  });
+});
diff --git a/packages/widget/tests/providers/theme-wrapper.test.ts b/packages/widget/tests/providers/theme-wrapper.test.ts
new file mode 100644
index 00000000..7275141c
--- /dev/null
+++ b/packages/widget/tests/providers/theme-wrapper.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { getThemeOverrides } from "../../src/providers/theme-wrapper";
+import { darkTheme, lightTheme } from "../../src/styles/theme/themes";
+import { portoThemeOverrides } from "../../src/styles/theme/variant-overrides/porto";
+import { utilaThemeOverrides } from "../../src/styles/theme/variant-overrides/utila";
+
+describe("getThemeOverrides", () => {
+  it("keeps the default variant unthemed", () => {
+    expect(
+      getThemeOverrides({
+        baseTheme: lightTheme,
+        variant: "default",
+      })
+    ).toEqual({});
+  });
+
+  it("keeps explicit Porto variant overrides", () => {
+    expect(
+      getThemeOverrides({
+        baseTheme: lightTheme,
+        variant: "porto",
+      })
+    ).toBe(portoThemeOverrides);
+  });
+
+  it("keeps the explicit Utila variant override", () => {
+    expect(
+      getThemeOverrides({
+        baseTheme: lightTheme,
+        variant: "utila",
+      })
+    ).toBe(utilaThemeOverrides);
+  });
+});
+
+describe("base themes", () => {
+  it("uses the Utila palette for light defaults", () => {
+    expect(lightTheme.color.primaryButtonBackground).toBe("#4A60FF");
+    expect(lightTheme.color.summaryItemBackground).toBe("#f5f5f6");
+    expect(lightTheme.color.tabBorder).toBe("#e4e4e7");
+  });
+
+  it("uses the Porto palette for dark defaults", () => {
+    expect(darkTheme.color.primary).toBe("#171717");
+    expect(darkTheme.color.primaryButtonBackground).toBe("#AB95FF");
+    expect(darkTheme.color.summaryItemBackground).toBe("#282828");
+  });
+});