[MNY-237] SDK: Update theme colors, minor UI tweaks (#8305)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview

This PR focuses on updating theme colors and making minor UI tweaks across various React components in the `thirdweb` package.

### Detailed summary

- Updated `weight` from `600` to `500` in multiple components' `Text`.
- Adjusted `border` styles in `Container` components.
- Modified padding and margin in several layout elements.
- Enhanced UI elements with consistent `letterSpacing` and `fontSize`.
- Added new theme stories for `darkThemeObj` and `lightThemeObj`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
    - Added Storybook theme showcase displaying color tokens and design system palette
- **Bug Fixes**
    - Improved loading skeleton UI with better scrollable layout and visual consistency
- **Style**
    - Refactored theme system with explicit color objects
    - Updated button styling with adjusted border radius and padding
    - Refined typography (font weights) across UI components
    - Adjusted layout spacing and padding throughout Bridge and wallet components
    - Increased QR code size for improved visibility
- **Chores**
    - Added changeset documentation for patch release

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

.changeset/wise-actors-attack.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Update theme colors and minor UI tweaks in React Components

packages/thirdweb/src/react/core/design-system/index.ts

@@ -1,48 +1,3 @@
-type ThemeColors = {
-  base1: string;
-  base2: string;
-  base3: string;
-  base4: string;
-  primaryText: string;
-  secondaryText: string;
-  danger: string;
-  success: string;
-  overlay: string;
-  accentText: string;
-  accentBg: string;
-  textOnAccent: string;
-};
-
-const darkColors = {
-  accentBg: "hsl(216 100% 50%)",
-  accentText: "#3385FF",
-  base1: "hsl(230 11.63% 8.43%)",
-  base2: "hsl(230 11.63% 12%)",
-  base3: "hsl(230 11.63% 15%)",
-  base4: "hsl(230 11.63% 17%)",
-  danger: "#e5484D",
-  overlay: "rgba(0, 0, 0, 0.7)",
-  primaryText: "#eeeef0",
-  secondaryText: "#7c7a85",
-  success: "#30A46C",
-  textOnAccent: "#eeeef0",
-} as const satisfies ThemeColors;
-
-const lightColors = {
-  accentBg: "hsl(216 100% 50%)",
-  accentText: "#3385FF",
-  base1: "#fdfcfd",
-  base2: "#f2eff3",
-  base3: "#e3dfe6",
-  base4: "#dbd8e0",
-  danger: "#e5484D",
-  overlay: "rgba(0, 0, 0, 0.7)",
-  primaryText: "#211f26",
-  secondaryText: "#6f6d78",
-  success: "#30A46C",
-  textOnAccent: "#fdfcfd",
-} as const satisfies ThemeColors;
-
 /**
  * @theme
  */
@@ -95,64 +50,77 @@ export type Theme = {
   fontFamily: string;
 };
 
-/**
- * @internal
- */
-function createThemeObj(type: "dark" | "light", colors: ThemeColors): Theme {
-  return {
-    colors: {
-      accentButtonBg: colors.accentBg,
-      accentButtonText: colors.textOnAccent,
-      accentText: colors.accentText,
-
-      borderColor: colors.base4,
-
-      connectedButtonBg: colors.base1,
-      connectedButtonBgHover: colors.base2,
-
-      danger: colors.danger,
-
-      inputAutofillBg: colors.base1,
-
-      modalBg: colors.base1,
-
-      modalOverlayBg: colors.overlay,
-
-      primaryButtonBg: colors.primaryText,
-      primaryButtonText: colors.base1,
-      primaryText: colors.primaryText,
-      scrollbarBg: colors.base2,
-
-      secondaryButtonBg: colors.base3,
-      secondaryButtonHoverBg: colors.base4,
-      secondaryButtonText: colors.primaryText,
-
-      secondaryIconColor: colors.secondaryText,
-      secondaryIconHoverBg: colors.base3,
-      secondaryIconHoverColor: colors.primaryText,
-      secondaryText: colors.secondaryText,
-      selectedTextBg: colors.primaryText,
-
-      selectedTextColor: colors.base1,
-
-      separatorLine: colors.base4,
-      skeletonBg: colors.base4,
-      success: colors.success,
-      tertiaryBg: colors.base2,
-
-      tooltipBg: colors.primaryText,
-      tooltipText: colors.base1,
-    },
-    fontFamily: "inherit",
-    type,
-  };
-}
+export const darkThemeObj: Theme = {
+  type: "dark",
+  colors: {
+    accentButtonBg: "hsl(221 83% 54%)",
+    accentButtonText: "hsl(0 0% 100%)",
+    accentText: "hsl(209.61deg 100% 65.31%)",
+    borderColor: "hsl(0 0% 15%)",
+    connectedButtonBg: "hsl(0 0% 3.92%)",
+    connectedButtonBgHover: "hsl(0 0% 11%)",
+    danger: "hsl(360 72% 55%)",
+    inputAutofillBg: "hsl(0 0% 11%)",
+    modalBg: "hsl(0 0% 3.92%)",
+    primaryButtonBg: "hsl(0 0% 100%)",
+    primaryButtonText: "hsl(0 0% 0%)",
+    primaryText: "hsl(0 0% 98%)",
+    scrollbarBg: "hsl(0 0% 11%)",
+    secondaryButtonBg: "hsl(0 0% 9%)",
+    modalOverlayBg: "rgba(0, 0, 0, 0.7)",
+    secondaryButtonHoverBg: "hsl(0 0% 9%/80%)",
+    secondaryButtonText: "hsl(0 0% 98%)",
+    secondaryIconColor: "hsl(0 0% 63%)",
+    secondaryIconHoverBg: "hsl(0 0% 11%)",
+    secondaryIconHoverColor: "hsl(0 0% 98%)",
+    secondaryText: "hsl(0 0% 63%)",
+    selectedTextBg: "hsl(0 0% 100%)",
+    selectedTextColor: "hsl(0 0% 0%)",
+    separatorLine: "hsl(0 0% 15%)",
+    skeletonBg: "hsl(0 0% 12%)",
+    success: "hsl(142 75% 50%)",
+    tertiaryBg: "hsl(0 0% 11%/50%)",
+    tooltipBg: "hsl(0 0% 11%)",
+    tooltipText: "hsl(0 0% 98%)",
+  },
+  fontFamily: "inherit",
+};
 
-export const darkThemeObj = /* @__PURE__ */ createThemeObj("dark", darkColors);
-export const lightThemeObj = /* @__PURE__ */ createThemeObj(
-  "light",
-  lightColors,
-);
+export const lightThemeObj: Theme = {
+  type: "light",
+  colors: {
+    accentButtonBg: "hsl(221 83% 54%)",
+    accentButtonText: "hsl(0 0% 100%)",
+    accentText: "hsl(211.23deg 100% 44.47%)",
+    borderColor: "hsl(0 0% 85%)",
+    connectedButtonBg: "hsl(0 0% 100%)",
+    connectedButtonBgHover: "hsl(0 0% 93%)",
+    danger: "hsl(360 72% 60%)",
+    inputAutofillBg: "hsl(0 0% 93%)",
+    modalBg: "hsl(0 0% 100%)",
+    primaryButtonBg: "hsl(0 0% 4%)",
+    primaryButtonText: "hsl(0 0% 100%)",
+    primaryText: "hsl(0 0% 4%)",
+    scrollbarBg: "hsl(0 0% 93%)",
+    secondaryButtonBg: "hsl(0 0% 93%)",
+    modalOverlayBg: "rgba(0, 0, 0, 0.7)",
+    secondaryButtonHoverBg: "hsl(0 0% 93%/80%)",
+    secondaryButtonText: "hsl(0 0% 4%)",
+    secondaryIconColor: "hsl(0 0% 40%)",
+    secondaryIconHoverBg: "hsl(0 0% 93%)",
+    secondaryIconHoverColor: "hsl(0 0% 4%)",
+    secondaryText: "hsl(0 0% 40%)",
+    selectedTextBg: "hsl(0 0% 4%)",
+    selectedTextColor: "hsl(0 0% 100%)",
+    separatorLine: "hsl(0 0% 85%)",
+    skeletonBg: "hsl(0 0% 85%)",
+    success: "hsl(142.09 70.56% 35.29%)",
+    tertiaryBg: "hsl(0 0% 93%/70%)",
+    tooltipBg: "hsl(0 0% 100%)",
+    tooltipText: "hsl(0 0% 4%)",
+  },
+  fontFamily: "inherit",
+};
 
 /**
  * @theme

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

@@ -5,7 +5,6 @@ import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { checksumAddress } from "../../../../../utils/address.js";
 import { formatNumber } from "../../../../../utils/formatNumber.js";
 import { toTokens } from "../../../../../utils/units.js";
-import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
   iconSize,
   radius,
@@ -62,8 +61,6 @@ export function FiatProviderSelection({
   currency,
   country,
 }: FiatProviderSelectionProps) {
-  const theme = useCustomTheme();
-
   // Fetch quotes for all providers
   const quoteQueries = useBuyWithFiatQuotesForProviders({
     amount: toAmount || "0",
@@ -122,9 +119,9 @@ export function FiatProviderSelection({
                 fullWidth
                 onClick={() => onProviderSelected(provider.id)}
                 style={{
-                  border: `1px solid ${theme.colors.borderColor}`,
-                  borderRadius: radius.md,
+                  borderRadius: radius.lg,
                   textAlign: "left",
+                  padding: `${spacing.md}`,
                 }}
                 variant="secondary"
               >

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -269,7 +269,7 @@ export function PaymentSelection({
   }
 
   return (
-    <Container flex="column" px="md" pb="md" pt="md+">
+    <Container flex="column" px="md" pt="md+">
       <ModalHeader onBack={getBackHandler()} title={getStepTitle()} />
       <Spacer y="lg" />