@oddsmith/ui 0.0.0

package/src/components/sf-leaderboard/shared/components/table/table.ts

@@ -0,0 +1,111 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../../../../../lib/lit/component.js';
+import { scss } from '../../../../../../lib/lit/scss.js';
+import {
+  SF_LEADERBOARD_PLAYER_AVATAR,
+  SF_LEADERBOARD_RANK_BADGE,
+  SF_LEADERBOARD_TABLE,
+} from '../../constants/tags.js';
+import { SF_LEADERBOARD_PLAYER_SELECT } from '../../types/events.js';
+import { sfLeaderboardTheme } from '../../../theme/styles.js';
+import type { Player } from '../../types/data.js';
+import { formatCurrency } from '../../utils/utils.js';
+import '../rank-badge/rank-badge.js';
+import '../player-avatar/player-avatar.js';
+import type { TableHost } from './table.host.js';
+import renderTemplate from './table.html?lit-html';
+import styles from './table.scss?inline';
+
+@Component({ selector: SF_LEADERBOARD_TABLE })
+export class SfLeaderboardTable extends LitElement implements TableHost {
+  static styles = [sfLeaderboardTheme, scss(styles)];
+
+  @property({ type: Array }) players: Player[] = [];
+
+  private handlePlayerClick(player: Player) {
+    this.dispatchEvent(
+      new CustomEvent(SF_LEADERBOARD_PLAYER_SELECT, {
+        detail: player,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private createStreakCell(player: Player): HTMLElement {
+    const cell = document.createElement('div');
+    cell.className = 'col-streak stat-cell streak hide-mobile';
+    if (player.streak > 0) {
+      const icon = document.createElement('span');
+      icon.className = 'icon';
+      icon.textContent = '🔥';
+      cell.append(icon, document.createTextNode(String(player.streak)));
+    } else {
+      const dash = document.createElement('span');
+      dash.textContent = '-';
+      cell.append(dash);
+    }
+    return cell;
+  }
+
+  private createRow(player: Player, index: number): HTMLElement {
+    const isTop3 = player.rank <= 3;
+    const highWinRate = player.winRate >= 60;
+
+    const row = document.createElement('div');
+    row.className = `table-row ${isTop3 ? 'top-3' : ''}`;
+    row.style.animationDelay = `${index * 50}ms`;
+    row.addEventListener('click', () => this.handlePlayerClick(player));
+
+    const rankCol = document.createElement('div');
+    rankCol.className = 'col-rank';
+    const badge = document.createElement(SF_LEADERBOARD_RANK_BADGE);
+    badge.rank = player.rank;
+    badge.previousRank = player.previousRank || player.rank;
+    badge.size = 'sm';
+    rankCol.append(badge);
+
+    const playerCol = document.createElement('div');
+    playerCol.className = 'col-player player-cell';
+    const avatar = document.createElement(SF_LEADERBOARD_PLAYER_AVATAR);
+    avatar.username = player.username;
+    avatar.avatar = player.avatar || '';
+    avatar.size = 'sm';
+    avatar.isOnline = player.isOnline;
+    avatar.highlight = isTop3;
+    const details = document.createElement('div');
+    details.className = 'player-details';
+    const name = document.createElement('div');
+    name.className = `player-name ${isTop3 ? 'highlight' : ''}`;
+    name.textContent = player.username;
+    const level = document.createElement('span');
+    level.className = 'player-level';
+    level.textContent = `LVL ${player.level}`;
+    details.append(name, level);
+    playerCol.append(avatar, details);
+
+    const gamesCol = document.createElement('div');
+    gamesCol.className = 'col-games stat-cell hide-mobile';
+    gamesCol.innerHTML = `<span class="icon">🏆</span>${player.gamesPlayed.toLocaleString()}`;
+
+    const winRateCol = document.createElement('div');
+    winRateCol.className = `col-win-rate stat-cell win-rate ${highWinRate ? 'high' : ''} hide-mobile`;
+    winRateCol.innerHTML = `<span class="icon">🎯</span>${player.winRate}%`;
+
+    const winningsCol = document.createElement('div');
+    winningsCol.className = 'col-winnings winnings-cell';
+    winningsCol.innerHTML = `<span class="winnings ${isTop3 ? 'highlight' : ''}">${formatCurrency(player.totalWinnings)}</span><span class="chevron">→</span>`;
+
+    row.append(rankCol, playerCol, gamesCol, winRateCol, this.createStreakCell(player), winningsCol);
+    return row;
+  }
+
+  renderRows() {
+    return this.players.map((player, index) => this.createRow(player, index));
+  }
+
+  render() {
+    return renderTemplate(this);
+  }
+}

package/src/components/sf-leaderboard/shared/constants/defaults.ts

@@ -0,0 +1,7 @@
+import type { Category, TimeFrame } from '../types/data.js';
+
+export const DEFAULT_LB_TITLE = 'Leaderboard';
+export const DEFAULT_LB_SUBTITLE = 'Real-time rankings';
+
+export const DEFAULT_TIMEFRAME: TimeFrame = 'week';
+export const DEFAULT_CATEGORY: Category = 'all';

package/src/components/sf-leaderboard/shared/constants/filters.ts

@@ -0,0 +1,16 @@
+import type { Category, TimeFrame } from '../types/data.js';
+
+export const TIMEFRAME_OPTIONS: { label: string; value: TimeFrame }[] = [
+  { label: 'Today', value: 'today' },
+  { label: 'This Week', value: 'week' },
+  { label: 'This Month', value: 'month' },
+  { label: 'All Time', value: 'all' },
+];
+
+export const CATEGORY_OPTIONS: { label: string; value: Category }[] = [
+  { label: 'All Games', value: 'all' },
+  { label: 'Poker', value: 'poker' },
+  { label: 'Blackjack', value: 'blackjack' },
+  { label: 'Roulette', value: 'roulette' },
+  { label: 'Slots', value: 'slots' },
+];

package/src/components/sf-leaderboard/shared/constants/index.ts

@@ -0,0 +1,5 @@
+export * from './tags.js';
+export * from './defaults.js';
+export * from './player-stats.js';
+export * from './filters.js';
+export * from './stats-overview.js';

package/src/components/sf-leaderboard/shared/constants/player-stats.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_PLAYER_STATS_TITLE = 'Your Position';
+export const DEFAULT_PLAYER_STATS_MESSAGE = "You're in the top 5% of players!";
+export const DEFAULT_PLAYER_STATS_RANK = 42;

package/src/components/sf-leaderboard/shared/constants/stats-overview.ts

@@ -0,0 +1,38 @@
+export interface SfLeaderboardOverviewStat {
+  label: string;
+  value: string;
+  icon: string;
+  trendValue: number;
+  trendPositive: boolean;
+}
+
+export const DEFAULT_OVERVIEW_STATS: SfLeaderboardOverviewStat[] = [
+  {
+    label: 'Total Players',
+    value: '12,847',
+    icon: '👥',
+    trendValue: 12.5,
+    trendPositive: true,
+  },
+  {
+    label: 'Total Wagered',
+    value: '$84.2M',
+    icon: '💰',
+    trendValue: 8.3,
+    trendPositive: true,
+  },
+  {
+    label: 'Active Games',
+    value: '1,247',
+    icon: '🎮',
+    trendValue: 3.2,
+    trendPositive: true,
+  },
+  {
+    label: 'Biggest Win',
+    value: '$125K',
+    icon: '⚡',
+    trendValue: 45.8,
+    trendPositive: true,
+  },
+];

package/src/components/sf-leaderboard/shared/constants/tags.ts

@@ -0,0 +1,16 @@
+/** Custom element tag names for the sf-leaderboard package. */
+export const SF_LEADERBOARD_TAG = 'sf-leaderboard';
+export const SF_LEADERBOARD_STAT_CARD = 'sf-leaderboard-stat-card';
+export const SF_LEADERBOARD_FILTERS = 'sf-leaderboard-filters';
+export const SF_LEADERBOARD_TABLE = 'sf-leaderboard-table';
+export const SF_LEADERBOARD_PODIUM = 'sf-leaderboard-podium';
+export const SF_LEADERBOARD_ACTIVITY_FEED = 'sf-leaderboard-activity-feed';
+export const SF_LEADERBOARD_RANK_BADGE = 'sf-leaderboard-rank-badge';
+export const SF_LEADERBOARD_PLAYER_AVATAR = 'sf-leaderboard-player-avatar';
+export const SF_LEADERBOARD_PLAYER_STATS_CARD =
+  'sf-leaderboard-player-stats-card';
+export const SF_LEADERBOARD_HEADER_SECTION = 'sf-leaderboard-header-section';
+export const SF_LEADERBOARD_STATS_SECTION = 'sf-leaderboard-stats-section';
+export const SF_LEADERBOARD_RANKING_SECTION = 'sf-leaderboard-ranking-section';
+export const SF_LEADERBOARD_TABLE_SECTION = 'sf-leaderboard-table-section';
+export const SF_LEADERBOARD_FOOTER_SECTION = 'sf-leaderboard-footer-section';

package/src/components/sf-leaderboard/shared/styles/_section.scss

@@ -0,0 +1,35 @@
+.section {
+  margin-bottom: clamp(1.5rem, 5vw, 3rem);
+  min-width: 0;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.section-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.elite-badge {
+  font-size: 0.65rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: var(--radius-sm);
+  background: var(--medal-gold-bg);
+  border: 1px solid var(--medal-gold-border);
+  color: var(--gold);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 639px) {
+  .section-title {
+    font-size: 1rem;
+  }
+}

package/src/components/sf-leaderboard/shared/types/data.ts

@@ -0,0 +1,29 @@
+export interface Player {
+  id: string;
+  username: string;
+  avatar?: string;
+  rank: number;
+  previousRank?: number;
+  totalWinnings: number;
+  winRate: number;
+  gamesPlayed: number;
+  streak: number;
+  level: number;
+  badges: string[];
+  isOnline?: boolean;
+}
+
+export interface Activity {
+  id: string;
+  type: 'win' | 'jackpot' | 'streak' | 'achievement';
+  player: {
+    username: string;
+    avatar?: string;
+  };
+  message: string;
+  amount?: number;
+  timestamp: Date;
+}
+
+export type TimeFrame = 'today' | 'week' | 'month' | 'all';
+export type Category = 'all' | 'poker' | 'blackjack' | 'roulette' | 'slots';

package/src/components/sf-leaderboard/shared/types/events.ts

@@ -0,0 +1,30 @@
+import type { Category, Player, TimeFrame } from './data.js';
+
+export const SF_LEADERBOARD_TIMEFRAME_CHANGE = 'timeframe-change';
+export const SF_LEADERBOARD_CATEGORY_CHANGE = 'category-change';
+export const SF_LEADERBOARD_SEARCH_CHANGE = 'search-change';
+export const SF_LEADERBOARD_PLAYER_SELECT = 'player-select';
+export const SF_LEADERBOARD_REFRESH = 'refresh';
+export const SF_LEADERBOARD_VIEW_STATS = 'view-stats';
+
+export interface SfLeaderboardRefreshDetail {
+  /** Optional hook for clients that batch refresh with timeframe/category. */
+  timeframe: TimeFrame;
+  category: Category;
+}
+
+export interface SfLeaderboardTimeframeChangeDetail {
+  timeframe: TimeFrame;
+}
+
+export interface SfLeaderboardCategoryChangeDetail {
+  category: Category;
+}
+
+export interface SfLeaderboardSearchChangeDetail {
+  query: string;
+}
+
+export interface SfLeaderboardPlayerSelectDetail {
+  player: Player;
+}

package/src/components/sf-leaderboard/shared/types/player-stats.ts

@@ -0,0 +1,3 @@
+export type PlayerStatsPlacement = 'left' | 'right';
+
+export type PlayerStatsRegion = 'top-champions' | 'rankings';

package/src/components/sf-leaderboard/shared/types/sections.ts

@@ -0,0 +1,100 @@
+import type { Category, Player, TimeFrame } from './data.js';
+
+/** Top bar: title, optional subtitle, live badge, back control. Omit `header` to hide. */
+export interface SfLeaderboardHeaderSection {
+  title: string;
+  subtitle?: string;
+  icon?: string;
+  showLive?: boolean;
+  /** When set, renders the back button (`label` defaults to "Back"). */
+  backButton?: {
+    label?: string;
+  };
+  isRefreshing?: boolean;
+}
+
+/** One overview tile (`sf-leaderboard-stat-card`). */
+export interface SfLeaderboardStatItem {
+  label: string;
+  value: string;
+  icon: string;
+  trendValue?: number;
+  trendPositive?: boolean;
+}
+
+/**
+ * Overview stat cards (2×2 grid, 4-across on wide screens).
+ * Omit `stats` to hide the whole section.
+ */
+export interface SfLeaderboardStatsSection {
+  title?: string;
+  items: SfLeaderboardStatItem[];
+}
+
+/** Podium block inside `ranking` (left column). Omit to hide podium. */
+export interface SfLeaderboardPodiumSection {
+  title?: string;
+  badge?: string;
+  players: Player[];
+}
+
+/** Player stats block inside `ranking` (right column). Omit to hide. */
+export interface SfLeaderboardPlayerStatsSection {
+  title?: string;
+  rank: number;
+  percentile?: number;
+  message?: string;
+  username?: string;
+  earnings?: string;
+  winRate?: number;
+  gamesPlayed?: number;
+  winStreak?: number;
+  level?: number;
+}
+
+/**
+ * Ranking row: podium (left) + player stats (right).
+ * Omit `ranking` entirely to hide the whole section.
+ */
+export interface SfLeaderboardRankingSection {
+  podium?: SfLeaderboardPodiumSection;
+  playerStats?: SfLeaderboardPlayerStatsSection;
+}
+
+/** Filters bar for the table. Omit on `table` to hide filters UI. */
+export interface SfLeaderboardTableFiltersSection {
+  searchQuery?: string;
+  timeframe?: TimeFrame;
+  category?: Category;
+}
+
+/**
+ * Rankings table (bottom). Omit `table` to hide.
+ */
+export interface SfLeaderboardTableSection {
+  title?: string;
+  subtitle?: string;
+  players: Player[];
+  filters?: SfLeaderboardTableFiltersSection;
+  footer?: {
+    text?: string;
+  };
+}
+
+/** Page footer (below table). Omit `footer` to hide. */
+export interface SfLeaderboardFooterSection {
+  text: string;
+}
+
+/**
+ * Layout config for `<sf-leaderboard>`.
+ * Only keys you pass are rendered, in order:
+ * header → stats → ranking → table → footer.
+ */
+export interface SfLeaderboardLayout {
+  header?: SfLeaderboardHeaderSection;
+  stats?: SfLeaderboardStatsSection;
+  ranking?: SfLeaderboardRankingSection;
+  table?: SfLeaderboardTableSection;
+  footer?: SfLeaderboardFooterSection;
+}

package/src/components/sf-leaderboard/shared/utils/utils.ts

@@ -0,0 +1,17 @@
+export function formatCurrency(amount: number): string {
+  if (amount >= 1000000) return `$${(amount / 1000000).toFixed(2)}M`;
+  if (amount >= 1000) return `$${(amount / 1000).toFixed(1)}K`;
+  return `$${amount.toFixed(2)}`;
+}
+
+export function formatTime(date: Date): string {
+  const now = new Date();
+  const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
+  if (diff < 60) return `${diff}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  return `${Math.floor(diff / 3600)}h ago`;
+}
+
+export function getInitials(name: string): string {
+  return name.slice(0, 2).toUpperCase();
+}

package/src/components/sf-leaderboard/theme/THEMING.md

@@ -0,0 +1,54 @@
+# Theming
+
+## Folder layout
+
+```
+src/
+  components/sf-leaderboard/   # Lit UI (podium, table, demo, package index)
+  old-components/              # Legacy packages (streaks, v1/v2 leaderboard, …)
+  theme/
+    themes/*.theme.json        # Brand JSON files
+    load-theme.ts              # fetch + parse JSON
+    inject-theme.ts            # write CSS vars to DOM (:root)
+    theme-to-css-vars.ts       # theme object → --color-* map
+    scss/_colors.scss          # map-get / color.base(1) helpers
+    scss/shared.scss           # semantic aliases + .card rules
+  sf-leaderboard/              # package API: data, constants, demo, types
+```
+
+## Flow (required order)
+
+1. **Load** — `const theme = await loadThemeFromJson('/src/theme/themes/fallback.json')`
+2. **Inject** — `injectTheme(theme)` → sets variables on `document.documentElement`
+3. **Style** — SCSS uses `@use 'colors' as c` and `color.base(1)` → `var(--color-base-1, fallback)`
+
+Variables inherit into every component shadow root automatically.
+
+## SCSS
+
+```scss
+@use 'colors' as color;
+
+.panel {
+  background: color.base(2);
+  color: color.primary(1);
+  border-color: color.place-first-icon();
+}
+```
+
+Vite `loadPaths` includes `src/theme/scss` so `@use 'colors'` resolves to `_colors.scss`.
+
+## Client
+
+```ts
+import {
+  loadThemeFromJson,
+  injectTheme,
+  parseThemeJson,
+} from '@skinforge/sf-leaderboard';
+
+const theme = await loadThemeFromJson('/assets/themes/brand.theme.json');
+injectTheme(theme);
+```
+
+Demo loads `themes/fallback.json` on mount (see `components/sf-leaderboard/demo/main.ts`).

package/src/components/sf-leaderboard/theme/context.ts

@@ -0,0 +1,16 @@
+import { DEFAULT_SF_LEADERBOARD_THEME } from './default-theme.js';
+import type { SfLeaderboardTheme } from './types.js';
+
+let activeTheme: SfLeaderboardTheme = DEFAULT_SF_LEADERBOARD_THEME;
+
+export function setActiveTheme(theme: SfLeaderboardTheme): void {
+  activeTheme = theme;
+}
+
+export function getActiveTheme(): SfLeaderboardTheme {
+  return activeTheme;
+}
+
+export function getThemeLabel(key: string, fallback: string): string {
+  return activeTheme.labels?.[key] ?? fallback;
+}

package/src/components/sf-leaderboard/theme/default-theme.ts

@@ -0,0 +1,4 @@
+import defaultThemeJson from '../../../../../../shared/sf-leaderboard/themes/fallback.json';
+import type { SfLeaderboardTheme } from './types.js';
+
+export const DEFAULT_SF_LEADERBOARD_THEME = defaultThemeJson as SfLeaderboardTheme;

package/src/components/sf-leaderboard/theme/hex-to-rgb.ts

@@ -0,0 +1,25 @@
+/** `#RRGGBB` or `#RGB` → `r, g, b` for use in `rgba(var(--x-rgb), α)`. */
+export function hexToRgbChannels(hex: string): string | null {
+  const normalized = hex.trim().replace(/^#/, '');
+  if (!/^[0-9a-fA-F]{3,8}$/.test(normalized)) {
+    return null;
+  }
+
+  let r: number;
+  let g: number;
+  let b: number;
+
+  if (normalized.length === 3) {
+    r = parseInt(normalized[0] + normalized[0], 16);
+    g = parseInt(normalized[1] + normalized[1], 16);
+    b = parseInt(normalized[2] + normalized[2], 16);
+  } else if (normalized.length === 6) {
+    r = parseInt(normalized.slice(0, 2), 16);
+    g = parseInt(normalized.slice(2, 4), 16);
+    b = parseInt(normalized.slice(4, 6), 16);
+  } else {
+    return null;
+  }
+
+  return `${r}, ${g}, ${b}`;
+}

package/src/components/sf-leaderboard/theme/index.ts

@@ -0,0 +1,18 @@
+export type {
+  SfLeaderboardTheme,
+  SfLeaderboardPaletteTheme,
+  SfLeaderboardPlacementTheme,
+  SfLeaderboardTableColumnTheme,
+  SfLeaderboardTypographyTheme,
+  TableColumnId,
+  ColorBaseStep,
+  ColorPrimaryStep,
+} from './types.js';
+
+export { sfLeaderboardTheme } from './styles.js';
+export { loadThemeFromJson, parseThemeJson } from './load-theme.js';
+export { injectTheme, clearTheme } from './inject-theme.js';
+export { getActiveTheme, getThemeLabel, setActiveTheme } from './context.js';
+export { mergeSfLeaderboardTheme } from './merge-theme.js';
+export { themeToCssVars } from './theme-to-css-vars.js';
+export { DEFAULT_SF_LEADERBOARD_THEME } from './default-theme.js';

package/src/components/sf-leaderboard/theme/inject-theme.ts

@@ -0,0 +1,39 @@
+import { setActiveTheme } from './context.js';
+import { themeToCssVars } from './theme-to-css-vars.js';
+import type { SfLeaderboardTheme } from './types.js';
+
+const THEME_ATTR = 'data-sf-theme';
+
+/**
+ * Injects theme CSS variables into the DOM so every component shadow root inherits them.
+ * Default target is `document.documentElement` (:root).
+ */
+export function injectTheme(
+  theme: SfLeaderboardTheme,
+  root: HTMLElement = document.documentElement,
+): void {
+  const vars = themeToCssVars(theme);
+  root.setAttribute(THEME_ATTR, theme.id);
+  setActiveTheme(theme);
+
+  for (const [key, value] of Object.entries(vars)) {
+    root.style.setProperty(key, value);
+  }
+}
+
+/** Removes theme variables injected on a DOM node. */
+export function clearTheme(
+  root: HTMLElement = document.documentElement,
+): void {
+  root.removeAttribute(THEME_ATTR);
+  const toRemove: string[] = [];
+  for (let i = 0; i < root.style.length; i++) {
+    const name = root.style.item(i);
+    if (name.startsWith('--color-') || name.startsWith('--place-') || name.startsWith('--table-col-') || name.startsWith('--font-')) {
+      toRemove.push(name);
+    }
+  }
+  for (const name of toRemove) {
+    root.style.removeProperty(name);
+  }
+}

package/src/components/sf-leaderboard/theme/load-theme.ts

@@ -0,0 +1,26 @@
+import { mergeSfLeaderboardTheme } from './merge-theme.js';
+import { DEFAULT_SF_LEADERBOARD_THEME } from './default-theme.js';
+import type { SfLeaderboardTheme } from './types.js';
+
+/** Load theme JSON from a URL (dev server, CDN, CMS). */
+export async function loadThemeFromJson(url: string): Promise<SfLeaderboardTheme> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to load theme: ${response.status} ${url}`);
+  }
+  const json: unknown = await response.json();
+  return parseThemeJson(json);
+}
+
+/** Parse theme JSON already fetched or bundled. Supports `{ theme: {…} }` or flat root. */
+export function parseThemeJson(json: unknown): SfLeaderboardTheme {
+  if (!json || typeof json !== 'object') {
+    throw new Error('Invalid theme JSON: expected an object');
+  }
+  const root = json as Record<string, unknown>;
+  const payload = (root.theme ?? root) as Partial<SfLeaderboardTheme>;
+  if (!payload.palette || !payload.placement || !payload.typography) {
+    throw new Error('Invalid theme JSON: missing palette, placement, or typography');
+  }
+  return mergeSfLeaderboardTheme(DEFAULT_SF_LEADERBOARD_THEME, payload);
+}

package/src/components/sf-leaderboard/theme/merge-theme.ts

@@ -0,0 +1,59 @@
+import type { SfLeaderboardTheme } from './types.js';
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/** Deep-merge client theme onto defaults (client wins). */
+export function mergeSfLeaderboardTheme(
+  base: SfLeaderboardTheme,
+  overrides?: Partial<SfLeaderboardTheme> | null,
+): SfLeaderboardTheme {
+  if (!overrides) {
+    return base;
+  }
+
+  const result = structuredClone(base);
+
+  if (overrides.id) result.id = overrides.id;
+  if (overrides.name) result.name = overrides.name;
+  if (overrides.labels) {
+    result.labels = { ...result.labels, ...overrides.labels };
+  }
+
+  if (overrides.palette) {
+    result.palette = {
+      ...result.palette,
+      ...overrides.palette,
+      base: { ...result.palette.base, ...overrides.palette.base },
+      primary: { ...result.palette.primary, ...overrides.palette.primary },
+      semantic: { ...result.palette.semantic, ...overrides.palette.semantic },
+      surface: { ...result.palette.surface, ...overrides.palette.surface },
+    };
+  }
+
+  if (overrides.typography) {
+    result.typography = { ...result.typography, ...overrides.typography };
+  }
+
+  if (overrides.placement) {
+    result.placement = {
+      first: { ...result.placement.first, ...overrides.placement.first },
+      second: { ...result.placement.second, ...overrides.placement.second },
+      third: { ...result.placement.third, ...overrides.placement.third },
+    };
+  }
+
+  if (overrides.table?.columns) {
+    for (const [key, value] of Object.entries(overrides.table.columns)) {
+      if (!isPlainObject(value)) continue;
+      const existing = result.table.columns[key as keyof typeof result.table.columns];
+      result.table.columns[key as keyof typeof result.table.columns] = {
+        ...existing,
+        ...value,
+      } as (typeof result.table.columns)[keyof typeof result.table.columns];
+    }
+  }
+
+  return result;
+}