@oddsmith/ui 0.0.0

package/src/components/sf-leaderboard/theme/scss/_colors.scss

@@ -0,0 +1,101 @@
+@use 'sass:map';
+
+// Canonical palette maps — values are CSS variables with compile-time fallbacks.
+// Runtime: set the same keys on <sf-leaderboard> via applySfLeaderboardTheme().
+
+$color-base: (
+  4: var(--color-base-4, #00061a),
+  3: var(--color-base-3, #000c35),
+  2: var(--color-base-2, #00114f),
+  1: var(--color-base-1, #0a0c14),
+);
+
+$color-primary: (
+  3: var(--color-primary-3, linear-gradient(256deg, #ffeec2 0%, #ffc431 100%)),
+  2: var(--color-primary-2, #00e5ff),
+  1: var(--color-primary-1, #00d4ff),
+);
+
+$color-semantic: (
+  success: var(--color-success, #00d26a),
+  warning: var(--color-warning, #ffa502),
+  error: var(--color-error, #ff4757),
+  informative: var(--color-informative, #2388fb),
+);
+
+$color-neutral: var(--color-neutral, #f0f0f5);
+
+$color-surface: (
+  divider: var(--color-surface-divider, rgba(42, 47, 66, 0.55)),
+  muted: var(--color-surface-muted, #808090),
+  success-bright: var(--color-surface-success-bright, #15bf81),
+);
+
+// Placement (1st / 2nd / 3rd) — overridable per slot role
+$place-first-icon: var(--place-first-table-icon, #ffd700);
+$place-first-podium-slot: var(--place-first-podium-slot, #ffd700);
+$place-first-podium-number: var(--place-first-podium-number, #ffd700);
+
+$place-second-icon: var(--place-second-table-icon, #c0c0c0);
+$place-second-podium-slot: var(--place-second-podium-slot, #c0c0c0);
+$place-second-podium-number: var(--place-second-podium-number, #c0c0c0);
+
+$place-third-icon: var(--place-third-table-icon, #cd7f32);
+$place-third-podium-slot: var(--place-third-podium-slot, #cd7f32);
+$place-third-podium-number: var(--place-third-podium-number, #cd7f32);
+
+@function base($step) {
+  @return map.get($color-base, $step);
+}
+
+@function primary($step) {
+  @return map.get($color-primary, $step);
+}
+
+@function semantic($name) {
+  @return map.get($color-semantic, $name);
+}
+
+@function neutral() {
+  @return $color-neutral;
+}
+
+@function surface($name) {
+  @return map.get($color-surface, $name);
+}
+
+@function place-first-icon() {
+  @return $place-first-icon;
+}
+
+@function place-first-podium-slot() {
+  @return $place-first-podium-slot;
+}
+
+@function place-first-podium-number() {
+  @return $place-first-podium-number;
+}
+
+@function place-second-icon() {
+  @return $place-second-icon;
+}
+
+@function place-second-podium-slot() {
+  @return $place-second-podium-slot;
+}
+
+@function place-second-podium-number() {
+  @return $place-second-podium-number;
+}
+
+@function place-third-icon() {
+  @return $place-third-icon;
+}
+
+@function place-third-podium-slot() {
+  @return $place-third-podium-slot;
+}
+
+@function place-third-podium-number() {
+  @return $place-third-podium-number;
+}

package/src/components/sf-leaderboard/theme/scss/shared.scss

@@ -0,0 +1,123 @@
+@use 'colors' as c;
+
+:host {
+  /* ── Semantic aliases (derived from canonical --color-* tokens) ── */
+  --background: #{c.base(1)};
+  --foreground: #{c.neutral()};
+  --card: #{c.base(2)};
+  --card-foreground: #{c.neutral()};
+  --primary: #{c.primary(1)};
+  --primary-rgb: var(--color-primary-1-rgb, 0, 212, 255);
+  --primary-foreground: #{c.base(3)};
+  --secondary: #{c.base(2)};
+  --secondary-foreground: #{c.neutral()};
+  --muted: #{c.base(2)};
+  --muted-foreground: #{c.surface(muted)};
+  --accent: #{c.primary(2)};
+  --accent-foreground: #{c.base(3)};
+  --destructive: #{c.semantic(error)};
+  --destructive-rgb: var(--color-error-rgb, 255, 71, 87);
+  --border: #{c.base(2)};
+  --border-subtle: #{c.surface(divider)};
+  --success: #{c.semantic(success)};
+  --success-rgb: var(--color-success-rgb, 0, 210, 106);
+  --warning: #{c.semantic(warning)};
+  --warning-rgb: var(--color-warning-rgb, 255, 165, 2);
+  --informative: #{c.semantic(informative)};
+
+  /* Placement → legacy medal aliases */
+  --gold: #{c.place-first-icon()};
+  --gold-rgb: var(--place-first-table-icon-rgb, 255, 215, 0);
+  --silver: #{c.place-second-icon()};
+  --silver-rgb: var(--place-second-table-icon-rgb, 192, 192, 192);
+  --bronze: #{c.place-third-icon()};
+  --bronze-rgb: var(--place-third-table-icon-rgb, 205, 127, 50);
+
+  --radius: 12px;
+  --radius-sm: 8px;
+  --radius-lg: 16px;
+  --font-sans: var(--font-primary, 'Inter', system-ui, sans-serif);
+  --transition-fast: 0.2s ease;
+  --transition-base: 0.3s ease;
+
+  --surface-gradient: linear-gradient(145deg, #{c.base(2)} 0%, #{c.base(1)} 100%);
+  --surface-border-color: color-mix(in srgb, #{c.primary(1)} 18%, transparent);
+  --surface-border-hover: color-mix(in srgb, #{c.primary(1)} 35%, transparent);
+  --surface-radius: var(--radius-lg);
+  --surface-padding: clamp(12px, 2vw, 18px);
+  --surface-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+  --surface-shadow-hover: 0 0 24px color-mix(in srgb, #{c.primary(1)} 12%, transparent);
+
+  --inset-bg: color-mix(in srgb, #{c.neutral()} 3%, transparent);
+  --inset-border: color-mix(in srgb, #{c.neutral()} 8%, transparent);
+  --inset-radius: var(--radius-sm);
+  --inset-hover-bg: color-mix(in srgb, #{c.primary(1)} 6%, transparent);
+  --inset-hover-border: color-mix(in srgb, #{c.primary(1)} 22%, transparent);
+
+  --accent-soft: color-mix(in srgb, #{c.primary(1)} 10%, transparent);
+  --accent-soft-strong: color-mix(in srgb, #{c.primary(1)} 18%, transparent);
+  --accent-border: color-mix(in srgb, #{c.primary(1)} 28%, transparent);
+  --accent-glow: color-mix(in srgb, #{c.primary(1)} 45%, transparent);
+  --accent-gradient: #{c.primary(3)};
+  --accent-text-glow: 0 0 16px color-mix(in srgb, #{c.primary(1)} 55%, transparent),
+    0 0 32px color-mix(in srgb, #{c.primary(1)} 28%, transparent);
+
+  --medal-gold-bg: color-mix(in srgb, #{c.place-first-icon()} 22%, transparent);
+  --medal-gold-border: color-mix(in srgb, #{c.place-first-icon()} 50%, transparent);
+  --medal-silver-bg: color-mix(in srgb, #{c.place-second-icon()} 18%, transparent);
+  --medal-silver-border: color-mix(in srgb, #{c.place-second-icon()} 40%, transparent);
+  --medal-bronze-bg: color-mix(in srgb, #{c.place-third-icon()} 18%, transparent);
+  --medal-bronze-border: color-mix(in srgb, #{c.place-third-icon()} 40%, transparent);
+  --medal-gold-gradient: linear-gradient(135deg, #{c.place-first-icon()} 0%, #{c.primary(1)} 100%);
+  --medal-silver-gradient: linear-gradient(135deg, #{c.place-second-icon()} 0%, #{c.base(2)} 100%);
+  --medal-bronze-gradient: linear-gradient(135deg, #{c.place-third-icon()} 0%, #{c.base(3)} 100%);
+  --medal-avatar-fg: #{c.base(3)};
+  --medal-gold-glow: color-mix(in srgb, #{c.place-first-icon()} 60%, transparent);
+  --medal-silver-glow: color-mix(in srgb, #{c.place-second-icon()} 50%, transparent);
+  --medal-bronze-glow: color-mix(in srgb, #{c.place-third-icon()} 50%, transparent);
+
+  --badge-success-bg: color-mix(in srgb, #{c.semantic(success)} 20%, transparent);
+  --badge-success-border: color-mix(in srgb, #{c.semantic(success)} 35%, transparent);
+  --badge-warning-bg: color-mix(in srgb, #{c.semantic(warning)} 20%, transparent);
+  --badge-warning-border: color-mix(in srgb, #{c.semantic(warning)} 35%, transparent);
+  --badge-accent-bg: var(--accent-soft);
+  --badge-accent-border: var(--accent-border);
+
+  font-family: var(--font-sans);
+  color: var(--foreground);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.card {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  background: var(--surface-gradient);
+  border: 1px solid var(--surface-border-color);
+  border-radius: var(--surface-radius);
+  box-shadow: var(--surface-shadow);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.card:hover {
+  border-color: var(--surface-border-hover);
+  box-shadow: var(--surface-shadow-hover);
+}
+
+.stat-item,
+.avatar-section,
+.percentile-badge {
+  background: var(--inset-bg);
+  border: 1px solid var(--inset-border);
+  border-radius: var(--inset-radius);
+}
+
+.stat-item:hover {
+  background: var(--inset-hover-bg);
+  border-color: var(--inset-hover-border);
+}

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

@@ -0,0 +1,6 @@
+import { scss } from '../../../../lib/lit/scss.js';
+import type { CSSResult } from 'lit';
+import sharedStyles from './scss/shared.scss?inline';
+
+/** Shared stylesheet for leaderboard components (semantic aliases + .card). */
+export const sfLeaderboardTheme: CSSResult = scss(sharedStyles);

package/src/components/sf-leaderboard/theme/theme-to-css-vars.ts

@@ -0,0 +1,99 @@
+import { hexToRgbChannels } from './hex-to-rgb.js';
+import type {
+  SfLeaderboardTheme,
+  TableColumnId,
+} from './types.js';
+
+const TABLE_COLUMN_IDS: TableColumnId[] = [
+  'rank',
+  'player',
+  'games',
+  'winRate',
+  'streak',
+  'winnings',
+];
+
+function setRgbFromHex(
+  vars: Record<string, string>,
+  cssKey: string,
+  hex: string | undefined,
+): void {
+  if (!hex || hex.includes('gradient')) {
+    return;
+  }
+  const channels = hexToRgbChannels(hex);
+  if (channels) {
+    vars[`${cssKey}-rgb`] = channels;
+  }
+}
+
+/**
+ * Flattens a theme object into CSS custom properties for the leaderboard host.
+ * Keys match `styles/_colors.scss` (`--color-base-1`, `--place-first-table-icon`, …).
+ */
+export function themeToCssVars(theme: SfLeaderboardTheme): Record<string, string> {
+  const { palette, typography, placement, table } = theme;
+  const vars: Record<string, string> = {};
+
+  for (const step of ['1', '2', '3', '4'] as const) {
+    vars[`--color-base-${step}`] = palette.base[step];
+  }
+
+  for (const step of ['1', '2', '3'] as const) {
+    vars[`--color-primary-${step}`] = palette.primary[step];
+  }
+
+  vars['--color-success'] = palette.semantic.success;
+  vars['--color-warning'] = palette.semantic.warning;
+  vars['--color-error'] = palette.semantic.error;
+  if (palette.semantic.informative) {
+    vars['--color-informative'] = palette.semantic.informative;
+  }
+
+  vars['--color-neutral'] = palette.neutral;
+  vars['--color-surface-divider'] = palette.surface.divider;
+  vars['--color-surface-muted'] = palette.surface.muted;
+  if (palette.surface.successBright) {
+    vars['--color-surface-success-bright'] = palette.surface.successBright;
+  }
+
+  vars['--font-primary'] = typography.primary;
+  vars['--font-secondary'] = typography.secondary;
+  if (typography.mono) {
+    vars['--font-mono'] = typography.mono;
+  }
+
+  const placements = [
+    ['first', placement.first],
+    ['second', placement.second],
+    ['third', placement.third],
+  ] as const;
+
+  for (const [key, p] of placements) {
+    vars[`--place-${key}-table-icon`] = p.tableIcon;
+    vars[`--place-${key}-podium-slot`] = p.podiumSlot;
+    vars[`--place-${key}-podium-number`] = p.podiumNumber;
+    setRgbFromHex(vars, `--place-${key}-table-icon`, p.tableIcon);
+  }
+
+  setRgbFromHex(vars, '--color-primary-1', palette.primary['1']);
+  setRgbFromHex(vars, '--color-success', palette.semantic.success);
+  setRgbFromHex(vars, '--color-warning', palette.semantic.warning);
+  setRgbFromHex(vars, '--color-error', palette.semantic.error);
+
+  for (const colId of TABLE_COLUMN_IDS) {
+    const col = table.columns[colId];
+    if (!col?.enabled) {
+      continue;
+    }
+    const kebab = colId.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+    if (col.color) {
+      vars[`--table-col-${kebab}-color`] = col.color;
+    }
+    if (col.fontSize) {
+      vars[`--table-col-${kebab}-font-size`] = col.fontSize;
+    }
+  }
+
+  return vars;
+}

package/src/components/sf-leaderboard/theme/themes/fallback.json

@@ -0,0 +1,62 @@
+{
+  "id": "sf-leaderboard-default",
+  "name": "SF Leaderboard Default",
+  "palette": {
+    "base": {
+      "4": "#060810",
+      "3": "#0a0c14",
+      "2": "#12151f",
+      "1": "#161a26"
+    },
+    "primary": {
+      "1": "#00d4ff",
+      "2": "#00e5ff",
+      "3": "linear-gradient(135deg, #00d4ff 0%, #00e5ff 100%)"
+    },
+    "semantic": {
+      "success": "#00d26a",
+      "warning": "#ffa502",
+      "error": "#ff4757",
+      "informative": "#2388fb"
+    },
+    "neutral": "#f0f0f5",
+    "surface": {
+      "divider": "rgba(42, 47, 66, 0.55)",
+      "muted": "#808090",
+      "successBright": "#15bf81"
+    }
+  },
+  "typography": {
+    "primary": "'Inter', system-ui, -apple-system, sans-serif",
+    "secondary": "'Inter', system-ui, -apple-system, sans-serif",
+    "mono": "'JetBrains Mono', monospace"
+  },
+  "placement": {
+    "first": {
+      "tableIcon": "#ffd700",
+      "podiumSlot": "#ffd700",
+      "podiumNumber": "#ffd700"
+    },
+    "second": {
+      "tableIcon": "#c0c0c0",
+      "podiumSlot": "#c0c0c0",
+      "podiumNumber": "#c0c0c0"
+    },
+    "third": {
+      "tableIcon": "#cd7f32",
+      "podiumSlot": "#cd7f32",
+      "podiumNumber": "#cd7f32"
+    }
+  },
+  "table": {
+    "columns": {
+      "rank": { "enabled": false },
+      "player": { "enabled": false },
+      "games": { "enabled": false },
+      "winRate": { "enabled": false },
+      "streak": { "enabled": false },
+      "winnings": { "enabled": false }
+    }
+  },
+  "labels": {}
+}

package/src/components/sf-leaderboard/theme/themes/red.json

@@ -0,0 +1,62 @@
+{
+  "id": "sf-leaderboard-neon-sunset",
+  "name": "SF Leaderboard Neon Sunset",
+  "palette": {
+    "base": {
+      "4": "#140B1A",
+      "3": "#1E1227",
+      "2": "#2A1835",
+      "1": "#342044"
+    },
+    "primary": {
+      "1": "#FF7A18",
+      "2": "#FF3D81",
+      "3": "linear-gradient(135deg, #FF7A18 0%, #FF3D81 55%, #9B5CFF 100%)"
+    },
+    "semantic": {
+      "success": "#3DFFB5",
+      "warning": "#FFD166",
+      "error": "#FF5A7A",
+      "informative": "#6EC5FF"
+    },
+    "neutral": "#F8F4FF",
+    "surface": {
+      "divider": "rgba(255, 255, 255, 0.08)",
+      "muted": "#B39BC8",
+      "successBright": "#7BFFCB"
+    }
+  },
+  "typography": {
+    "primary": "'Space Grotesk', system-ui, sans-serif",
+    "secondary": "'Inter', system-ui, sans-serif",
+    "mono": "'JetBrains Mono', monospace"
+  },
+  "placement": {
+    "first": {
+      "tableIcon": "#FFB703",
+      "podiumSlot": "#FFB703",
+      "podiumNumber": "#FFF3B0"
+    },
+    "second": {
+      "tableIcon": "#8ECAE6",
+      "podiumSlot": "#8ECAE6",
+      "podiumNumber": "#D9F3FF"
+    },
+    "third": {
+      "tableIcon": "#FB8500",
+      "podiumSlot": "#FB8500",
+      "podiumNumber": "#FFD6A5"
+    }
+  },
+  "table": {
+    "columns": {
+      "rank": { "enabled": true },
+      "player": { "enabled": true },
+      "games": { "enabled": true },
+      "winRate": { "enabled": true },
+      "streak": { "enabled": true },
+      "winnings": { "enabled": true }
+    }
+  },
+  "labels": {}
+}

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

@@ -0,0 +1,71 @@
+/** Base scale: 4 = deepest, 1 = primary surface */
+export type ColorBaseStep = '1' | '2' | '3' | '4';
+
+/** Primary scale: 1 = main brand, 3 = gradient / highlight */
+export type ColorPrimaryStep = '1' | '2' | '3';
+
+export type TableColumnId =
+  | 'rank'
+  | 'player'
+  | 'games'
+  | 'winRate'
+  | 'streak'
+  | 'winnings';
+
+/** Per-column table styling (header + body cells). */
+export interface SfLeaderboardTableColumnTheme {
+  enabled: boolean;
+  color?: string;
+  fontSize?: string;
+}
+
+/** Colors for a podium / table rank tier. */
+export interface SfLeaderboardPlacementTheme {
+  tableIcon: string;
+  podiumSlot: string;
+  podiumNumber: string;
+}
+
+export interface SfLeaderboardPaletteTheme {
+  base: Record<ColorBaseStep, string>;
+  primary: Record<ColorPrimaryStep, string>;
+  semantic: {
+    success: string;
+    warning: string;
+    error: string;
+    informative?: string;
+  };
+  neutral: string;
+  surface: {
+    divider: string;
+    muted: string;
+    successBright?: string;
+  };
+}
+
+export interface SfLeaderboardTypographyTheme {
+  primary: string;
+  secondary: string;
+  mono?: string;
+}
+
+/**
+ * Full theme contract for `<sf-leaderboard>`.
+ * Clients load JSON (or build this object) and pass it to the `theme` property.
+ */
+export interface SfLeaderboardTheme {
+  id: string;
+  name: string;
+  palette: SfLeaderboardPaletteTheme;
+  typography: SfLeaderboardTypographyTheme;
+  placement: {
+    first: SfLeaderboardPlacementTheme;
+    second: SfLeaderboardPlacementTheme;
+    third: SfLeaderboardPlacementTheme;
+  };
+  table: {
+    columns: Partial<Record<TableColumnId, SfLeaderboardTableColumnTheme>>;
+  };
+  /** Optional copy overrides (not applied to CSS) */
+  labels?: Record<string, string>;
+}

package/src/components/sf-live-feed/components/avatar/avatar.host.ts

@@ -0,0 +1,5 @@
+import type { TemplateResult } from 'lit';
+
+export interface AvatarHost {
+  renderAvatarContent(): TemplateResult;
+}

package/src/components/sf-live-feed/components/avatar/avatar.html

@@ -0,0 +1,3 @@
+<div class="avatar">
+  ${host.renderAvatarContent()}
+</div>

package/src/components/sf-live-feed/components/avatar/avatar.scss

@@ -0,0 +1,24 @@
+:host {
+  display: inline-block;
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  background: var(--card);
+  color: var(--foreground);
+  font-size: 0.7rem;
+  font-weight: 700;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

package/src/components/sf-live-feed/components/avatar/avatar.ts

@@ -0,0 +1,27 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SF_LIVE_FEED_AVATAR_TAG } from '../../constants.js';
+import { sfLiveFeedTheme } from '../../styles/theme.js';
+import { getInitials } from '../../utils.js';
+import type { AvatarHost } from './avatar.host.js';
+import renderTemplate from './avatar.html?lit-html';
+import styles from './avatar.scss?inline';
+import { scss } from '../../../../lib/lit/scss.js';
+
+@customElement(SF_LIVE_FEED_AVATAR_TAG)
+export class SfLiveFeedAvatar extends LitElement implements AvatarHost {
+  static styles = [sfLiveFeedTheme, scss(styles)];
+
+  @property({ type: String }) username = '';
+  @property({ type: String }) avatar = '';
+
+  renderAvatarContent() {
+    return this.avatar
+      ? html`<img src="${this.avatar}" alt="${this.username}" />`
+      : html`<span>${getInitials(this.username)}</span>`;
+  }
+
+  render() {
+    return renderTemplate(this);
+  }
+}

package/src/components/sf-live-feed/components/sf-live-feed/sf-live-feed.host.ts

@@ -0,0 +1,8 @@
+import type { TemplateResult } from 'lit';
+import type { LiveFeedActivity } from '../../types.js';
+
+export interface SfLiveFeedHost {
+  feedTitle: string;
+  activities: LiveFeedActivity[];
+  renderActivities(): TemplateResult;
+}

package/src/components/sf-live-feed/components/sf-live-feed/sf-live-feed.html

@@ -0,0 +1,10 @@
+<div class="feed-container">
+  <div class="feed-header">
+    <div class="header-left">
+      <div class="live-dot"></div>
+      <span class="header-title">${host.feedTitle}</span>
+    </div>
+    <span class="event-count">${host.activities.length} events</span>
+  </div>
+  <div class="feed-body">${host.renderActivities()}</div>
+</div>