The theme registry: names, definitions, tokens

{
  "THEME_NAMES": [
    "sdv",
    "sdvTeam",
    "almanac",
    "athletic",
    "booktabs",
    "broadsheet",
    "brutalist",
    "drench",
    "gtutils",
    "kenpom",
    "midnight",
    "ncaa",
    "pl",
    "savant",
    "scoreboard",
    "sofa",
    "swiss",
    "terminal",
    "tier",
    "tufte"
  ],
  "THEMES.midnight is a function": true,
  "TOKEN_KEYS.length": 53,
  "midnight colour tokens": {
    "bg": "#0C0D10",
    "text": "#E8E9ED",
    "muted": "#9498A3",
    "accent": "#5b8def",
    "rule": "#24272E",
    "stripe": "transparent"
  },
  "midnight fonts": [
    "Chivo"
  ],
  "PAL_MIDNIGHT": [
    "#5B8DEF",
    "#3FBF87",
    "#E8E9ED",
    "#9498A3",
    "#24272E"
  ]
}

import { PAL_MIDNIGHT, THEMES, THEME_NAMES, TOKEN_KEYS, resolveTheme } from "@sportsdataverse/sdvtables";

// A theme is a function of { name, density, options } (THEMES[name]); resolveTheme picks and calls it.
// Its tokens (TOKEN_KEYS) become CSS custom properties on the table.
const midnight = resolveTheme({ name: "midnight", density: "comfortable" });
const { bg, text, muted, accent, rule, stripe } = midnight.tokens;

{
  THEME_NAMES,
  "THEMES.midnight is a function": typeof THEMES.midnight === "function",
  "TOKEN_KEYS.length": TOKEN_KEYS.length,
  "midnight colour tokens": { bg, text, muted, accent, rule, stripe },
  "midnight fonts": midnight.fonts.map((f) => f.family),
  PAL_MIDNIGHT,
};

Tags: theme · THEMES · THEME_NAMES · resolveTheme · TOKEN_KEYS · PAL_MIDNIGHT. All sdvtables examples.