@oddsmith/ui 0.0.0 → 1.0.0

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

@@ -1,101 +0,0 @@
-@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

@@ -1,123 +0,0 @@
-@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

@@ -1,6 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,62 +0,0 @@
-{
-  "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

@@ -1,62 +0,0 @@
-{
-  "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

@@ -1,71 +0,0 @@
-/** 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

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

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

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

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

@@ -1,24 +0,0 @@
-: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

@@ -1,27 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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>