Theme token manifest

interlace-ui/theme-tokens

FreeUtility

@interlace/ui — the registry of themes and the list of every `--interlace-*` token a theme must define. A missing token does not throw; it silently inherits the previous theme's value.

Install it

npx shadcn@latest add https://ds.interlace.tools/r/theme-tokens.json

Source

registry/interlace-ui/lib/theme-tokens.tsds.interlace.tools/r/theme-tokens.json

1export const THEME_TOKENS = [
2  'primary',
3  'primary-hover',
4  'primary-active',
5  'primary-foreground',
6  'primary-subtle',
7  'primary-subtle-foreground',
8  'background',
9  'foreground',
10  'card',
11  'card-foreground',
12  'popover',
13  'popover-foreground',
14  'muted',
15  'muted-foreground',
16  'border',
17  'input',
18  'ring',
19  'accent',
20  'accent-foreground',
21  'secondary',
22  'secondary-foreground',
23  'destructive',
24  'destructive-foreground',
25  'success',
26  'success-foreground',
27  'warning',
28  'warning-foreground',
29  'info',
30  'info-foreground',
31  'caution',
32  'caution-foreground',
33  'scrim',
34  'scrim-foreground',
35  'hero-star',
36  'hero-trail',
37  'hero-meteor',
38  'hero-surface',
39  'hero-surface-deep',
40  'hero-foreground',
41  'window-control-close',
42  'window-control-minimize',
43  'window-control-zoom',
44  'chart-1',
45  'chart-2',
46  'chart-3',
47  'chart-4',
48  'chart-5',
49  'viz-grid',
50  'viz-axis',
51  'viz-edge',
52  'radius-sm',
53  'radius-md',
54  'radius-lg',
55  'brand-mark-bar-o',
56  'brand-mark-bar-g',
57] as const;
58 
59/** A token name from the manifest, without the `--interlace-` prefix. */
60export type ThemeToken = (typeof THEME_TOKENS)[number];
61 
62/** The colour-scheme axis. Orthogonal to the theme axis. */
63export const SCHEMES = ['light', 'dark'] as const;
64export type Scheme = (typeof SCHEMES)[number];
65 
66/**
67 * The theme registry.
68 *
69 * `name` is the literal written to `<html data-theme="…">` — except for the
70 * default, which writes NO attribute at all (`:root` is Interlace, so an
71 * attribute would be redundant and would make "no preference" and "chose the
72 * default" indistinguishable in the DOM).
73 */
74export const THEMES = [
75  {
76    name: 'interlace',
77    label: 'Interlace',
78    /** Burnt orange + brand green, warm neutrals. `styles/interlace-theme.css`. */
79    description: 'Warm burnt orange — the Interlace brand.',
80    default: true,
81  },
82  {
83    name: 'harbor',
84    label: 'Harbor',
85    /** Deep harbour blue on cool slate. `styles/themes/harbor.css`. */
86    description: 'Deep harbour blue on cool slate.',
87    default: false,
88  },
89] as const;
90 
91/** A registered theme name. */
92export type ThemeName = (typeof THEMES)[number]['name'];
93 
94/** The theme that `:root` already is — written as no attribute at all. */
95export const DEFAULT_THEME: ThemeName = 'interlace';
96 
97/** Narrow an arbitrary string to a registered theme name. */
98export function isThemeName(value: unknown): value is ThemeName {
99  return (
100    typeof value === 'string' &&
101// … truncated

More from interlace-ui

All 140 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
cn — class-name merge utilitycn	interlace-ui	Utilities	Free	no deps
No-flash theme bootstrap scripttheme-script	interlace-ui	Utilities	Free	no deps
useReducedMotion hookuse-reduced-motion	interlace-ui	Utilities	Free	no deps
useTheme hookuse-theme	interlace-ui	Utilities	Free	no deps

Theme token manifest

Install it

Source

More from interlace-ui

Built for the same person as BlockDex