@mcptoolshop/site-theme 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +49 -2
  2. package/components/ApiList.astro +2 -2
  3. package/components/BaseLayout.astro +10 -10
  4. package/components/CodeCardGrid.astro +2 -2
  5. package/components/DataTable.astro +4 -4
  6. package/components/FeatureGrid.astro +2 -2
  7. package/components/Hero.astro +10 -10
  8. package/components/Section.astro +1 -1
  9. package/package.json +2 -1
  10. package/styles/theme.css +39 -1
  11. package/templates/global.css.tpl +1 -0
package/README.md CHANGED
@@ -1,6 +1,10 @@
1
1
  # @mcptoolshop/site-theme
2
2
 
3
- Shared Astro theme for MCP Tool Shop org repo landing pages. Dark zinc palette, Tailwind CSS v4, config-driven content.
3
+ Shared Astro theme for MCP Tool Shop org repo landing pages. Dark palette, Tailwind CSS v4, config-driven content, fully customizable via design tokens.
4
+
5
+ <p align="center">
6
+ <img src="https://raw.githubusercontent.com/mcp-tool-shop-org/site-theme/main/assets/preview.png" alt="site-theme preview" width="800" />
7
+ </p>
4
8
 
5
9
  ## Quick Start
6
10
 
@@ -35,6 +39,48 @@ export const config: SiteConfig = {
35
39
  };
36
40
  ```
37
41
 
42
+ ## Design Tokens
43
+
44
+ The theme ships semantic design tokens via `styles/theme.css`. Components reference these tokens instead of hardcoded colors, so you can reskin the entire theme by overriding a few values.
45
+
46
+ ### Default tokens
47
+
48
+ | Token | Default | Used for |
49
+ |-------|---------|----------|
50
+ | `--color-surface` | `#09090b` | Page background |
51
+ | `--color-surface-raised` | `#18181b` | Elevated elements, code blocks |
52
+ | `--color-surface-strong` | `#27272a` | Badges, emphasized backgrounds |
53
+ | `--color-edge` | `#27272a` | Primary borders |
54
+ | `--color-edge-subtle` | `#18181b` | Card / table borders |
55
+ | `--color-heading` | `#fafafa` | Headings, primary text |
56
+ | `--color-body` | `#e4e4e7` | Body / secondary text |
57
+ | `--color-muted` | `#d4d4d8` | Muted text |
58
+ | `--color-dim` | `#a1a1aa` | Labels, descriptions |
59
+ | `--color-accent` | `#34d399` | Status indicators |
60
+ | `--color-action` | `#fafafa` | Primary button background |
61
+ | `--color-action-text` | `#09090b` | Primary button text |
62
+ | `--color-action-hover` | `#e4e4e7` | Primary button hover |
63
+
64
+ ### Customizing
65
+
66
+ Override any token in your site's `global.css` by adding a `@theme` block after the import:
67
+
68
+ ```css
69
+ @import "tailwindcss";
70
+ @import "@mcptoolshop/site-theme/styles/theme.css";
71
+ @source "../../../node_modules/@mcptoolshop/site-theme";
72
+
73
+ /* Override tokens */
74
+ @theme {
75
+ --color-accent: #60a5fa; /* blue status dot */
76
+ --color-surface: #0a0a1a; /* navy background */
77
+ --color-action: #60a5fa; /* blue buttons */
78
+ --color-action-hover: #3b82f6;
79
+ }
80
+ ```
81
+
82
+ Tokens generate standard Tailwind v4 utilities (`bg-surface`, `text-heading`, `border-edge`, etc.) so you can also use them in your own components.
83
+
38
84
  ## Components
39
85
 
40
86
  Import components individually from the package:
@@ -113,10 +159,11 @@ Sections render in the order they appear in the array.
113
159
 
114
160
  ## Tailwind Setup
115
161
 
116
- The theme uses Tailwind CSS v4. Your site's `global.css` needs the `@source` directive to scan theme components:
162
+ The theme uses Tailwind CSS v4. Your site's `global.css` imports the theme tokens and scans components:
117
163
 
118
164
  ```css
119
165
  @import "tailwindcss";
166
+ @import "@mcptoolshop/site-theme/styles/theme.css";
120
167
  @source "../../../node_modules/@mcptoolshop/site-theme";
121
168
  ```
122
169
 
package/components/ApiList.astro CHANGED
@@ -4,9 +4,9 @@ const { apis } = Astro.props;
4
4
 
5
5
  <div class="mt-8 grid gap-6">
6
6
  {apis.map((a: { signature: string; description: string }) => (
7
- <div class="rounded-2xl border border-zinc-900 bg-zinc-950 p-6">
7
+ <div class="rounded-2xl border border-edge-subtle bg-surface p-6">
8
8
  <h3 class="text-lg font-semibold"><code set:html={a.signature} /></h3>
9
- <p class="mt-2 text-sm text-zinc-400" set:html={a.description} />
9
+ <p class="mt-2 text-sm text-dim" set:html={a.description} />
10
10
  </div>
11
11
  ))}
12
12
  </div>
package/components/BaseLayout.astro CHANGED
@@ -21,26 +21,26 @@ const {
21
21
  <title>{title}</title>
22
22
  </head>
23
23
 
24
- <body class="min-h-screen bg-zinc-950 text-zinc-50 antialiased">
24
+ <body class="min-h-screen bg-surface text-heading antialiased">
25
25
  <div class="mx-auto max-w-6xl px-4">
26
26
  <header class="flex items-center justify-between py-6">
27
27
  <a href="/" class="flex items-center gap-2 font-semibold tracking-tight">
28
- <span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-zinc-800">
28
+ <span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-surface-strong">
29
29
  {logoBadge}
30
30
  </span>
31
31
  <span>{brandName}</span>
32
32
  </a>
33
33
 
34
- <nav class="hidden items-center gap-6 text-sm text-zinc-300 md:flex">
34
+ <nav class="hidden items-center gap-6 text-sm text-muted md:flex">
35
35
  {nav.map((item: { href: string; label: string }) => (
36
- <a href={item.href} class="hover:text-zinc-50">{item.label}</a>
36
+ <a href={item.href} class="hover:text-heading">{item.label}</a>
37
37
  ))}
38
38
  </nav>
39
39
 
40
40
  <div class="flex items-center gap-3">
41
41
  {npmUrl && (
42
42
  <a
43
- class="hidden rounded-xl border border-zinc-800 px-4 py-2 text-sm text-zinc-200 hover:bg-zinc-900 md:inline-flex"
43
+ class="hidden rounded-xl border border-edge px-4 py-2 text-sm text-body hover:bg-surface-raised md:inline-flex"
44
44
  href={npmUrl}
45
45
  target="_blank"
46
46
  rel="noreferrer"
@@ -49,7 +49,7 @@ const {
49
49
  </a>
50
50
  )}
51
51
  <a
52
- class="inline-flex rounded-xl bg-zinc-50 px-4 py-2 text-sm font-medium text-zinc-950 hover:bg-zinc-200"
52
+ class="inline-flex rounded-xl bg-action px-4 py-2 text-sm font-medium text-action-text hover:bg-action-hover"
53
53
  href={repoUrl}
54
54
  target="_blank"
55
55
  rel="noreferrer"
@@ -63,15 +63,15 @@ const {
63
63
  <slot />
64
64
  </main>
65
65
 
66
- <footer class="border-t border-zinc-900 py-10 text-sm text-zinc-400">
66
+ <footer class="border-t border-edge-subtle py-10 text-sm text-dim">
67
67
  <div class="flex flex-col justify-between gap-4 md:flex-row">
68
68
  <p set:html={footerText} />
69
69
  <div class="flex gap-4">
70
70
  {npmUrl && (
71
- <a class="hover:text-zinc-200" href={npmUrl} target="_blank" rel="noreferrer">npm</a>
71
+ <a class="hover:text-body" href={npmUrl} target="_blank" rel="noreferrer">npm</a>
72
72
  )}
73
- <a class="hover:text-zinc-200" href={repoUrl} target="_blank" rel="noreferrer">GitHub</a>
74
- <a class="hover:text-zinc-200" href="https://opensource.org/license/mit/" target="_blank" rel="noreferrer">License</a>
73
+ <a class="hover:text-body" href={repoUrl} target="_blank" rel="noreferrer">GitHub</a>
74
+ <a class="hover:text-body" href="https://opensource.org/license/mit/" target="_blank" rel="noreferrer">License</a>
75
75
  </div>
76
76
  </div>
77
77
  </footer>
package/components/CodeCardGrid.astro CHANGED
@@ -4,9 +4,9 @@ const { cards } = Astro.props;
4
4
 
5
5
  <div class="mt-6 grid gap-6 md:grid-cols-2">
6
6
  {cards.map((c: { title: string; code: string }) => (
7
- <div class="rounded-2xl border border-zinc-900 bg-zinc-950 p-6">
7
+ <div class="rounded-2xl border border-edge-subtle bg-surface p-6">
8
8
  <h3 class="text-lg font-semibold">{c.title}</h3>
9
- <pre class="mt-4 overflow-x-auto rounded-xl bg-zinc-900 p-4 text-sm text-zinc-200"><code set:html={c.code} /></pre>
9
+ <pre class="mt-4 overflow-x-auto rounded-xl bg-surface-raised p-4 text-sm text-body"><code set:html={c.code} /></pre>
10
10
  </div>
11
11
  ))}
12
12
  </div>
package/components/DataTable.astro CHANGED
@@ -3,15 +3,15 @@ const { columns, rows } = Astro.props;
3
3
  const colCount = columns.length;
4
4
  ---
5
5
 
6
- <div class="mt-8 overflow-hidden rounded-2xl border border-zinc-900">
7
- <div class={`grid gap-0 bg-zinc-950 text-xs text-zinc-400`} style={`grid-template-columns: repeat(${colCount}, minmax(0, 1fr))`}>
6
+ <div class="mt-8 overflow-hidden rounded-2xl border border-edge-subtle">
7
+ <div class={`grid gap-0 bg-surface text-xs text-dim`} style={`grid-template-columns: repeat(${colCount}, minmax(0, 1fr))`}>
8
8
  {columns.map((col: string) => (
9
- <div class="border-b border-zinc-900 p-4">{col}</div>
9
+ <div class="border-b border-edge-subtle p-4">{col}</div>
10
10
  ))}
11
11
 
12
12
  {rows.map((row: string[]) => (
13
13
  row.map((cell: string, i: number) => (
14
- <div class={`border-b border-zinc-900 p-4${i === 0 ? ' font-medium text-zinc-200' : ''}`}>{cell}</div>
14
+ <div class={`border-b border-edge-subtle p-4${i === 0 ? ' font-medium text-body' : ''}`}>{cell}</div>
15
15
  ))
16
16
  ))}
17
17
  </div>
package/components/FeatureGrid.astro CHANGED
@@ -4,9 +4,9 @@ const { features } = Astro.props;
4
4
 
5
5
  <div class="mt-8 grid gap-6 md:grid-cols-3">
6
6
  {features.map((f: { title: string; desc: string }) => (
7
- <div class="rounded-2xl border border-zinc-900 bg-zinc-950 p-6">
7
+ <div class="rounded-2xl border border-edge-subtle bg-surface p-6">
8
8
  <h3 class="text-lg font-semibold">{f.title}</h3>
9
- <p class="mt-2 text-sm text-zinc-400">{f.desc}</p>
9
+ <p class="mt-2 text-sm text-dim">{f.desc}</p>
10
10
  </div>
11
11
  ))}
12
12
  </div>
package/components/Hero.astro CHANGED
@@ -10,32 +10,32 @@ const {
10
10
  } = Astro.props;
11
11
  ---
12
12
 
13
- <section class="relative overflow-hidden rounded-3xl border border-zinc-800 bg-gradient-to-b from-zinc-900/60 to-zinc-950 px-6 py-16 md:px-12">
13
+ <section class="relative overflow-hidden rounded-3xl border border-edge bg-gradient-to-b from-surface-raised/60 to-surface px-6 py-16 md:px-12">
14
14
  <div class="absolute inset-0 opacity-40 [background:radial-gradient(900px_circle_at_20%_20%,rgba(255,255,255,0.10),transparent_60%),radial-gradient(700px_circle_at_80%_30%,rgba(255,255,255,0.06),transparent_60%)]"></div>
15
15
 
16
16
  <div class="relative">
17
- <div class="inline-flex items-center gap-2 rounded-full border border-zinc-800 bg-zinc-950/60 px-3 py-1 text-xs text-zinc-300">
18
- <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
17
+ <div class="inline-flex items-center gap-2 rounded-full border border-edge bg-surface/60 px-3 py-1 text-xs text-muted">
18
+ <span class="h-2 w-2 rounded-full bg-accent"></span>
19
19
  <span set:html={badge} />
20
20
  </div>
21
21
 
22
22
  <h1 class="mt-6 text-4xl font-semibold tracking-tight md:text-6xl">
23
23
  {headline}
24
- <span class="text-zinc-300"> {headlineAccent}</span>
24
+ <span class="text-muted"> {headlineAccent}</span>
25
25
  </h1>
26
26
 
27
- <p class="mt-4 max-w-2xl text-lg text-zinc-300" set:html={description} />
27
+ <p class="mt-4 max-w-2xl text-lg text-muted" set:html={description} />
28
28
 
29
29
  <div class="mt-8 flex flex-col gap-3 sm:flex-row">
30
30
  <a
31
31
  href={primaryCta.href}
32
- class="inline-flex items-center justify-center rounded-xl bg-zinc-50 px-5 py-3 text-sm font-medium text-zinc-950 hover:bg-zinc-200"
32
+ class="inline-flex items-center justify-center rounded-xl bg-action px-5 py-3 text-sm font-medium text-action-text hover:bg-action-hover"
33
33
  >
34
34
  {primaryCta.label}
35
35
  </a>
36
36
  <a
37
37
  href={secondaryCta.href}
38
- class="inline-flex items-center justify-center rounded-xl border border-zinc-800 px-5 py-3 text-sm text-zinc-200 hover:bg-zinc-900"
38
+ class="inline-flex items-center justify-center rounded-xl border border-edge px-5 py-3 text-sm text-body hover:bg-surface-raised"
39
39
  >
40
40
  {secondaryCta.label}
41
41
  </a>
@@ -44,9 +44,9 @@ const {
44
44
  {previews.length > 0 && (
45
45
  <div class="mt-10 grid gap-4 md:grid-cols-3">
46
46
  {previews.map((p: { label: string; code: string }) => (
47
- <div class="rounded-2xl border border-zinc-800 bg-zinc-950/60 p-5">
48
- <p class="text-xs text-zinc-400">{p.label}</p>
49
- <p class="mt-2 text-sm text-zinc-200"><code>{p.code}</code></p>
47
+ <div class="rounded-2xl border border-edge bg-surface/60 p-5">
48
+ <p class="text-xs text-dim">{p.label}</p>
49
+ <p class="mt-2 text-sm text-body"><code>{p.code}</code></p>
50
50
  </div>
51
51
  ))}
52
52
  </div>
package/components/Section.astro CHANGED
@@ -5,7 +5,7 @@ const { id, title, subtitle } = Astro.props;
5
5
  <section id={id} class="mt-20">
6
6
  <h2 class="text-3xl font-semibold tracking-tight">{title}</h2>
7
7
  {subtitle && (
8
- <p class="mt-2 max-w-2xl text-zinc-400">{subtitle}</p>
8
+ <p class="mt-2 max-w-2xl text-dim">{subtitle}</p>
9
9
  )}
10
10
  <slot />
11
11
  </section>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcptoolshop/site-theme",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "type": "module",
5
5
  "description": "Shared Astro theme for MCP Tool Shop org repo landing pages",
6
6
  "keywords": ["astro-component", "withastro", "theme", "mcp"],
@@ -13,6 +13,7 @@
13
13
  "homepage": "https://github.com/mcp-tool-shop-org/site-theme",
14
14
  "exports": {
15
15
  ".": "./types/config.ts",
16
+ "./styles/theme.css": "./styles/theme.css",
16
17
  "./components/BaseLayout.astro": "./components/BaseLayout.astro",
17
18
  "./components/Hero.astro": "./components/Hero.astro",
18
19
  "./components/Section.astro": "./components/Section.astro",
package/styles/theme.css CHANGED
@@ -1 +1,39 @@
1
- @import "tailwindcss";
1
+ /*
2
+ * @mcptoolshop/site-theme — Design tokens
3
+ *
4
+ * Import in your site's global.css AFTER @import "tailwindcss".
5
+ * Override any token with your own @theme block after the import.
6
+ *
7
+ * @import "tailwindcss";
8
+ * @import "@mcptoolshop/site-theme/styles/theme.css";
9
+ * @source "../../../node_modules/@mcptoolshop/site-theme";
10
+ *
11
+ * @theme {
12
+ * --color-accent: #60a5fa;
13
+ * }
14
+ */
15
+
16
+ @theme {
17
+ /* ── Surfaces ─────────────────────────────────── */
18
+ --color-surface: #09090b; /* page background */
19
+ --color-surface-raised: #18181b; /* elevated / code blocks */
20
+ --color-surface-strong: #27272a; /* badges, emphasized bg */
21
+
22
+ /* ── Borders ──────────────────────────────────── */
23
+ --color-edge: #27272a; /* primary border */
24
+ --color-edge-subtle: #18181b; /* card / table border */
25
+
26
+ /* ── Text ─────────────────────────────────────── */
27
+ --color-heading: #fafafa; /* headings, primary text */
28
+ --color-body: #e4e4e7; /* body / secondary text */
29
+ --color-muted: #d4d4d8; /* muted text */
30
+ --color-dim: #a1a1aa; /* labels, descriptions */
31
+
32
+ /* ── Accent ───────────────────────────────────── */
33
+ --color-accent: #34d399; /* status indicators */
34
+
35
+ /* ── Actions (primary button = inverted) ──────── */
36
+ --color-action: #fafafa; /* button background */
37
+ --color-action-text: #09090b; /* button text */
38
+ --color-action-hover: #e4e4e7; /* button hover bg */
39
+ }
package/templates/global.css.tpl CHANGED
@@ -1,2 +1,3 @@
1
1
  @import "tailwindcss";
2
+ @import "@mcptoolshop/site-theme/styles/theme.css";
2
3
  @source "../../../node_modules/@mcptoolshop/site-theme";