@stevegreco/design-system 0.0.2 → 0.0.4

package/dist/css/tokens.css

@@ -219,20 +219,20 @@
   --component-alert-gap: 12px;
   --component-alert-font-size: 14px;
   --component-alert-title-font-weight: 600;
-  --component-alert-success-bg: #e3ecd9;
-  --component-alert-success-fg: #4a6b3d;
+  --component-alert-success-background: #e3ecd9;
+  --component-alert-success-foreground: #4a6b3d;
   --component-alert-success-icon-color: #6b8e5a;
   --component-alert-success-border: #e3ecd9;
-  --component-alert-danger-bg: #f5dbd0;
-  --component-alert-danger-fg: #84301c;
+  --component-alert-danger-background: #f5dbd0;
+  --component-alert-danger-foreground: #84301c;
   --component-alert-danger-icon-color: #b8472a;
   --component-alert-danger-border: #f5dbd0;
-  --component-alert-warning-bg: #f7edce;
-  --component-alert-warning-fg: #823f1e;
+  --component-alert-warning-background: #f7edce;
+  --component-alert-warning-foreground: #823f1e;
   --component-alert-warning-icon-color: #c06d1f;
   --component-alert-warning-border: #f7edce;
-  --component-alert-info-bg: #d6e1ea;
-  --component-alert-info-fg: #2f5973;
+  --component-alert-info-background: #d6e1ea;
+  --component-alert-info-foreground: #2f5973;
   --component-alert-info-icon-color: #4a7896;
   --component-alert-info-border: #d6e1ea;
   --component-badge-radius: 9999px;
@@ -240,23 +240,23 @@
   --component-badge-padding-y: 1px;
   --component-badge-font-size: 12px;
   --component-badge-font-weight: 500;
-  --component-badge-default-bg: #e0e7e3;
-  --component-badge-default-fg: #3b4a43;
+  --component-badge-default-background: #e0e7e3;
+  --component-badge-default-foreground: #3b4a43;
   --component-badge-default-border: #c1cec7;
-  --component-badge-accent-bg: #f7edce;
-  --component-badge-accent-fg: #a0501d;
+  --component-badge-accent-background: #f7edce;
+  --component-badge-accent-foreground: #a0501d;
   --component-badge-accent-border: #efda98;
-  --component-badge-success-bg: #e3ecd9;
-  --component-badge-success-fg: #4a6b3d;
+  --component-badge-success-background: #e3ecd9;
+  --component-badge-success-foreground: #4a6b3d;
   --component-badge-success-border: #e3ecd9;
-  --component-badge-danger-bg: #f5dbd0;
-  --component-badge-danger-fg: #84301c;
+  --component-badge-danger-background: #f5dbd0;
+  --component-badge-danger-foreground: #84301c;
   --component-badge-danger-border: #f5dbd0;
-  --component-badge-warning-bg: #f7edce;
-  --component-badge-warning-fg: #823f1e;
+  --component-badge-warning-background: #f7edce;
+  --component-badge-warning-foreground: #823f1e;
   --component-badge-warning-border: #f7edce;
-  --component-badge-info-bg: #d6e1ea;
-  --component-badge-info-fg: #2f5973;
+  --component-badge-info-background: #d6e1ea;
+  --component-badge-info-foreground: #2f5973;
   --component-badge-info-border: #d6e1ea;
   --component-button-radius-md: 10px;
   --component-button-radius-full: 9999px;
@@ -268,45 +268,45 @@
   --component-button-font-weight: 500;
   --component-button-font-size: 14px;
   --component-button-transition: 140ms;
-  --component-button-primary-bg: #a0501d;
-  --component-button-primary-bg-hover: #823f1e;
-  --component-button-primary-bg-press: #6b341c;
-  --component-button-primary-fg: #faf6f0;
+  --component-button-primary-background: #a0501d;
+  --component-button-primary-background-hover: #823f1e;
+  --component-button-primary-background-press: #6b341c;
+  --component-button-primary-foreground: #faf6f0;
   --component-button-primary-border: #a0501d;
-  --component-button-secondary-bg: rgba(0, 0, 0, 0);
-  --component-button-secondary-bg-hover: #e0e7e3;
-  --component-button-secondary-bg-press: #e0e7e3;
-  --component-button-secondary-fg: #3b4a43;
+  --component-button-secondary-background: rgba(0, 0, 0, 0);
+  --component-button-secondary-background-hover: #e0e7e3;
+  --component-button-secondary-background-press: #e0e7e3;
+  --component-button-secondary-foreground: #3b4a43;
   --component-button-secondary-border: #c1cec7;
-  --component-button-ghost-bg: rgba(0, 0, 0, 0);
-  --component-button-ghost-bg-hover: #e0e7e3;
-  --component-button-ghost-fg: #171c1a;
+  --component-button-ghost-background: rgba(0, 0, 0, 0);
+  --component-button-ghost-background-hover: #e0e7e3;
+  --component-button-ghost-foreground: #171c1a;
   --component-button-ghost-border: rgba(0, 0, 0, 0);
-  --component-button-danger-bg: #b8472a;
-  --component-button-danger-bg-hover: #84301c;
-  --component-button-danger-fg: #ffffff;
+  --component-button-danger-background: #b8472a;
+  --component-button-danger-background-hover: #84301c;
+  --component-button-danger-foreground: #ffffff;
   --component-button-danger-border: #b8472a;
-  --component-card-bg: #ffffff;
+  --component-card-background: #ffffff;
   --component-card-border: #c1cec7;
   --component-card-radius: 14px;
   --component-card-shadow: 0 1px 2px rgba(61, 26, 11, 0.05), 0 2px 4px rgba(61, 26, 11, 0.04);
   --component-card-shadow-hover: 0 2px 4px rgba(61, 26, 11, 0.05), 0 6px 14px rgba(61, 26, 11, 0.07);
   --component-card-padding: 24px;
   --component-card-gap: 16px;
-  --component-card-warm-bg: #f7edce;
+  --component-card-warm-background: #f7edce;
   --component-card-warm-border: #efda98;
-  --component-input-bg: #ffffff;
-  --component-input-bg-disabled: #e0e7e3;
+  --component-input-background: #ffffff;
+  --component-input-background-disabled: #e0e7e3;
   --component-input-border: #c1cec7;
   --component-input-border-hover: #9aaea4;
   --component-input-border-focus: #a0501d;
   --component-input-border-error: #b8472a;
-  --component-input-fg: #171c1a;
-  --component-input-fg-placeholder: #7a9086;
-  --component-input-fg-disabled: #5b7168;
-  --component-input-label-fg: #3b4a43;
-  --component-input-hint-fg: #5b7168;
-  --component-input-error-fg: #84301c;
+  --component-input-foreground: #171c1a;
+  --component-input-foreground-placeholder: #7a9086;
+  --component-input-foreground-disabled: #5b7168;
+  --component-input-label-foreground: #3b4a43;
+  --component-input-hint-foreground: #5b7168;
+  --component-input-error-foreground: #84301c;
   --component-input-radius: 6px;
   --component-input-padding-x: 12px;
   --component-input-padding-y: 8px;

package/dist/tokens/components.json

@@ -0,0 +1,144 @@
+{
+  "component": {
+    "alert": {
+      "radius": "10px",
+      "padding": "16px",
+      "gap": "12px",
+      "fontSize": "14px",
+      "titleFontWeight": 600,
+      "success": {
+        "background": "#e3ecd9",
+        "foreground": "#4a6b3d",
+        "iconColor": "#6b8e5a",
+        "border": "#e3ecd9"
+      },
+      "danger": {
+        "background": "#f5dbd0",
+        "foreground": "#84301c",
+        "iconColor": "#b8472a",
+        "border": "#f5dbd0"
+      },
+      "warning": {
+        "background": "#f7edce",
+        "foreground": "#823f1e",
+        "iconColor": "#c06d1f",
+        "border": "#f7edce"
+      },
+      "info": {
+        "background": "#d6e1ea",
+        "foreground": "#2f5973",
+        "iconColor": "#4a7896",
+        "border": "#d6e1ea"
+      }
+    },
+    "badge": {
+      "radius": "9999px",
+      "paddingX": "8px",
+      "paddingY": "1px",
+      "fontSize": "12px",
+      "fontWeight": 500,
+      "default": {
+        "background": "#e0e7e3",
+        "foreground": "#3b4a43",
+        "border": "#c1cec7"
+      },
+      "accent": {
+        "background": "#f7edce",
+        "foreground": "#a0501d",
+        "border": "#efda98"
+      },
+      "success": {
+        "background": "#e3ecd9",
+        "foreground": "#4a6b3d",
+        "border": "#e3ecd9"
+      },
+      "danger": {
+        "background": "#f5dbd0",
+        "foreground": "#84301c",
+        "border": "#f5dbd0"
+      },
+      "warning": {
+        "background": "#f7edce",
+        "foreground": "#823f1e",
+        "border": "#f7edce"
+      },
+      "info": {
+        "background": "#d6e1ea",
+        "foreground": "#2f5973",
+        "border": "#d6e1ea"
+      }
+    },
+    "button": {
+      "radiusMd": "10px",
+      "radiusFull": "9999px",
+      "paddingX": "16px",
+      "paddingY": "12px",
+      "paddingXSm": "12px",
+      "paddingYSm": "8px",
+      "fontFamily": "'Source Sans 3', system-ui, -apple-system, sans-serif",
+      "fontWeight": 500,
+      "fontSize": "14px",
+      "transition": "140ms",
+      "primary": {
+        "background": "#a0501d",
+        "backgroundHover": "#823f1e",
+        "backgroundPress": "#6b341c",
+        "foreground": "#faf6f0",
+        "border": "#a0501d"
+      },
+      "secondary": {
+        "background": "#00000000",
+        "backgroundHover": "#e0e7e3",
+        "backgroundPress": "#e0e7e3",
+        "foreground": "#3b4a43",
+        "border": "#c1cec7"
+      },
+      "ghost": {
+        "background": "#00000000",
+        "backgroundHover": "#e0e7e3",
+        "foreground": "#171c1a",
+        "border": "#00000000"
+      },
+      "danger": {
+        "background": "#b8472a",
+        "backgroundHover": "#84301c",
+        "foreground": "#ffffff",
+        "border": "#b8472a"
+      }
+    },
+    "card": {
+      "background": "#ffffff",
+      "border": "#c1cec7",
+      "radius": "14px",
+      "shadow": "0 1px 2px rgba(61, 26, 11, 0.05), 0 2px 4px rgba(61, 26, 11, 0.04)",
+      "shadowHover": "0 2px 4px rgba(61, 26, 11, 0.05), 0 6px 14px rgba(61, 26, 11, 0.07)",
+      "padding": "24px",
+      "gap": "16px",
+      "warm": {
+        "background": "#f7edce",
+        "border": "#efda98"
+      }
+    },
+    "input": {
+      "background": "#ffffff",
+      "backgroundDisabled": "#e0e7e3",
+      "border": "#c1cec7",
+      "borderHover": "#9aaea4",
+      "borderFocus": "#a0501d",
+      "borderError": "#b8472a",
+      "foreground": "#171c1a",
+      "foregroundPlaceholder": "#7a9086",
+      "foregroundDisabled": "#5b7168",
+      "labelForeground": "#3b4a43",
+      "hintForeground": "#5b7168",
+      "errorForeground": "#84301c",
+      "radius": "6px",
+      "paddingX": "12px",
+      "paddingY": "8px",
+      "shadow": "inset 0 1px 2px rgba(61, 26, 11, 0.08)",
+      "shadowFocus": "0 1px 2px rgba(61, 26, 11, 0.06)",
+      "fontFamily": "'Source Sans 3', system-ui, -apple-system, sans-serif",
+      "fontSize": "14px"
+    }
+  }
+}

package/dist/tokens/primitives.json

@@ -100,7 +100,7 @@
       "caps": "0.08em"
     },
     "space": {
-      "0": "0",
+      "0": 0,
       "1": "4px",
       "2": "8px",
       "3": "12px",
@@ -117,7 +117,7 @@
       "px": "1px"
     },
     "radius": {
-      "none": "0",
+      "none": 0,
       "xs": "3px",
       "sm": "6px",
       "md": "10px",

package/dist/tokens/semantic.dark.json

@@ -0,0 +1,60 @@
+{
+  "semantic": {
+    "color": {
+      "background": {
+        "default": "#171c1a",
+        "raised": "#2c3531",
+        "sunken": "#0e1211",
+        "muted": "#323d38"
+      },
+      "foreground": {
+        "default": "#faf6f0",
+        "muted": "#c1cec7",
+        "subtle": "#9aaea4",
+        "faint": "#5b7168",
+        "onAccent": "#171c1a",
+        "inverse": "#171c1a"
+      },
+      "border": {
+        "default": "#323d38",
+        "strong": "#3b4a43",
+        "subtle": "#2c3531",
+        "warm": "#823f1e"
+      },
+      "accent": {
+        "default": "#e1ac3e",
+        "hover": "#e8c468",
+        "press": "#d98f27",
+        "soft": "#3a2e1e",
+        "foreground": "#171c1a"
+      },
+      "secondary": {
+        "default": "#c1cec7",
+        "hover": "#faf6f0",
+        "soft": "#323d38"
+      },
+      "status": {
+        "success": {
+          "default": "#6b8e5a",
+          "foreground": "#e3ecd9",
+          "background": "#394739"
+        },
+        "danger": {
+          "default": "#b8472a",
+          "foreground": "#f5dbd0",
+          "background": "#483930"
+        },
+        "warning": {
+          "default": "#d98f27",
+          "foreground": "#f7edce",
+          "background": "#51432d"
+        },
+        "info": {
+          "default": "#4a7896",
+          "foreground": "#d6e1ea",
+          "background": "#34464a"
+        }
+      }
+    }
+  }
+}

package/dist/tokens/semantic.light.json

@@ -0,0 +1,60 @@
+{
+  "semantic": {
+    "color": {
+      "background": {
+        "default": "#faf6f0",
+        "raised": "#ffffff",
+        "sunken": "#f2ebdf",
+        "muted": "#e0e7e3"
+      },
+      "foreground": {
+        "default": "#171c1a",
+        "muted": "#3b4a43",
+        "subtle": "#5b7168",
+        "faint": "#7a9086",
+        "onAccent": "#faf6f0",
+        "inverse": "#faf6f0"
+      },
+      "border": {
+        "default": "#c1cec7",
+        "strong": "#9aaea4",
+        "subtle": "#e6d8c3",
+        "warm": "#efda98"
+      },
+      "accent": {
+        "default": "#a0501d",
+        "hover": "#823f1e",
+        "press": "#6b341c",
+        "soft": "#f7edce",
+        "foreground": "#faf6f0"
+      },
+      "secondary": {
+        "default": "#3b4a43",
+        "hover": "#323d38",
+        "soft": "#e0e7e3"
+      },
+      "status": {
+        "success": {
+          "default": "#6b8e5a",
+          "foreground": "#4a6b3d",
+          "background": "#e3ecd9"
+        },
+        "danger": {
+          "default": "#b8472a",
+          "foreground": "#84301c",
+          "background": "#f5dbd0"
+        },
+        "warning": {
+          "default": "#c06d1f",
+          "foreground": "#823f1e",
+          "background": "#f7edce"
+        },
+        "info": {
+          "default": "#4a7896",
+          "foreground": "#2f5973",
+          "background": "#d6e1ea"
+        }
+      }
+    }
+  }
+}

package/mcp/index.js

@@ -0,0 +1,376 @@
+#!/usr/bin/env node
+import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+import { readFileSync, statSync, readdirSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(__dirname, "..");
+
+// Maps CSS properties to the token type and path hints used for scoring.
+// hints are substrings matched against token paths (case-insensitive).
+const CSS_PROPERTY_MAP = {
+  "background-color":          { type: "color",       hints: ["bg", "background"] },
+  "background":                { type: "color",       hints: ["bg", "background"] },
+  "color":                     { type: "color",       hints: ["fg", "foreground"] },
+  "border-color":              { type: "color",       hints: ["border"] },
+  "outline-color":             { type: "color",       hints: ["border", "focus"] },
+  "fill":                      { type: "color",       hints: ["fg", "foreground"] },
+  "stroke":                    { type: "color",       hints: ["border", "fg"] },
+  "caret-color":               { type: "color",       hints: ["fg", "accent"] },
+  "border-radius":             { type: "dimension",   hints: ["radius"] },
+  "border-width":              { type: "dimension",   hints: ["border"] },
+  "padding":                   { type: "dimension",   hints: ["padding"] },
+  "padding-top":               { type: "dimension",   hints: ["paddingY", "padding"] },
+  "padding-bottom":            { type: "dimension",   hints: ["paddingY", "padding"] },
+  "padding-left":              { type: "dimension",   hints: ["paddingX", "padding"] },
+  "padding-right":             { type: "dimension",   hints: ["paddingX", "padding"] },
+  "gap":                       { type: "dimension",   hints: ["gap", "space"] },
+  "margin":                    { type: "dimension",   hints: ["space"] },
+  "font-size":                 { type: "dimension",   hints: ["fontSize", "text"] },
+  "letter-spacing":            { type: "dimension",   hints: ["tracking"] },
+  "line-height":               { type: "number",      hints: ["leading"] },
+  "font-family":               { type: "fontFamily",  hints: ["fontFamily", "font"] },
+  "font-weight":               { type: "fontWeight",  hints: ["fontWeight", "weight"] },
+  "box-shadow":                { type: "shadow",      hints: ["shadow"] },
+  "transition-duration":       { type: "duration",    hints: ["duration", "transition"] },
+  "animation-duration":        { type: "duration",    hints: ["duration"] },
+  "transition-timing-function":{ type: "cubicBezier", hints: ["ease"] },
+  "width":                     { type: "dimension",   hints: ["layout", "space"] },
+  "max-width":                 { type: "dimension",   hints: ["layout"] },
+};
+
+const TIER_BONUS = { component: 0.3, semantic: 0.2, primitive: 0.1 };
+
+const DIST = {
+  primitives: join(ROOT, "dist/tokens/primitives.json"),
+  semanticLight: join(ROOT, "dist/tokens/semantic.light.json"),
+  semanticDark: join(ROOT, "dist/tokens/semantic.dark.json"),
+  components: join(ROOT, "dist/tokens/components.json"),
+};
+
+function sourceFiles() {
+  const base = [
+    join(ROOT, "tokens/primitives.tokens.json"),
+    join(ROOT, "tokens/semantic/light.tokens.json"),
+    join(ROOT, "tokens/semantic/dark.tokens.json"),
+  ];
+  try {
+    const components = readdirSync(join(ROOT, "tokens/components"))
+      .filter((f) => f.endsWith(".tokens.json"))
+      .map((f) => join(ROOT, "tokens/components", f));
+    return [...base, ...components];
+  } catch {
+    return base;
+  }
+}
+
+function isStale() {
+  try {
+    const srcMax = Math.max(
+      ...sourceFiles().map((f) => {
+        try { return statSync(f).mtimeMs; } catch { return 0; }
+      })
+    );
+    const distMin = Math.min(
+      ...Object.values(DIST).map((f) => {
+        try { return statSync(f).mtimeMs; } catch { return 0; }
+      })
+    );
+    return srcMax > distMin;
+  } catch {
+    return false;
+  }
+}
+
+function inferType(value) {
+  if (typeof value === "number") return "fontWeight";
+  const v = String(value);
+  if (/^#[0-9a-f]{3,8}$/i.test(v) || /^(rgb|hsl)a?\(/.test(v)) return "color";
+  if (/^-?\d+(\.\d+)?(px|rem|em|%)$/.test(v)) return "dimension";
+  if (/^\d+ms$/.test(v)) return "duration";
+  if (/^cubic-bezier/.test(v)) return "cubicBezier";
+  // shadows: multi-part strings containing px and spaces, or inset keyword
+  if (/^inset /.test(v) || (v.includes(" ") && v.includes("px"))) return "shadow";
+  // font families: quoted strings or comma-separated lists (not function calls)
+  if (v.includes("'") || v.includes('"') || (v.includes(",") && !v.includes("("))) return "fontFamily";
+  if (/^-?\d+(\.\d+)?$/.test(v)) return "number";
+  return "string";
+}
+
+function flatten(obj, parts = []) {
+  const tokens = [];
+  for (const [key, val] of Object.entries(obj)) {
+    const path = [...parts, key];
+    if (val !== null && typeof val === "object" && !Array.isArray(val)) {
+      tokens.push(...flatten(val, path));
+    } else {
+      const root = path[0];
+      tokens.push({
+        path: path.join("."),
+        cssVariable: "--" + path.join("-"),
+        value: String(val),
+        type: inferType(val),
+        tier:
+          root === "primitives" ? "primitive"
+          : root === "semantic" ? "semantic"
+          : "component",
+      });
+    }
+  }
+  return tokens;
+}
+
+function loadTokens(theme = "light") {
+  const semanticFile = theme === "dark" ? DIST.semanticDark : DIST.semanticLight;
+  const tokens = [];
+  for (const file of [DIST.primitives, semanticFile, DIST.components]) {
+    try {
+      tokens.push(...flatten(JSON.parse(readFileSync(file, "utf-8"))));
+    } catch {
+      // dist not yet built
+    }
+  }
+  return tokens;
+}
+
+const server = new McpServer({
+  name: "design-system-tokens",
+  version: "1.0.0",
+});
+
+server.registerTool(
+  "search_tokens",
+  {
+    description:
+      "Search design tokens by keyword. Matches against token paths and resolved values. " +
+      "Returns path, CSS variable name, resolved value, type, and tier for each result.",
+    inputSchema: z.object({
+      query: z.string().describe(
+        "Substring to search for in token paths and resolved values (e.g. 'danger', 'border', '#b8472a')"
+      ),
+      tier: z
+        .enum(["primitive", "semantic", "component"])
+        .optional()
+        .describe("Restrict results to a single tier"),
+      type: z
+        .string()
+        .optional()
+        .describe("Restrict results to a token type (e.g. color, dimension, fontFamily, duration)"),
+      theme: z
+        .enum(["light", "dark"])
+        .optional()
+        .describe("Theme variant for semantic tokens. Defaults to light."),
+    }),
+  },
+  async ({ query, tier, type, theme = "light" }) => {
+    const tokens = loadTokens(theme);
+    const q = query.toLowerCase();
+
+    let results = tokens.filter(
+      (t) => t.path.toLowerCase().includes(q) || t.value.toLowerCase().includes(q)
+    );
+    if (tier) results = results.filter((t) => t.tier === tier);
+    if (type) results = results.filter((t) => t.type === type);
+
+    const stale = isStale() ? "\n\n⚠ Token files may be out of date — run pnpm build" : "";
+
+    if (results.length === 0) {
+      return {
+        content: [{ type: "text", text: `No tokens found matching "${query}".${stale}` }],
+      };
+    }
+    return {
+      content: [{ type: "text", text: JSON.stringify(results, null, 2) + stale }],
+    };
+  }
+);
+
+server.registerTool(
+  "get_token",
+  {
+    description:
+      "Get a single design token by its exact dot-separated path. " +
+      "Returns path, CSS variable name, resolved value, type, and tier.",
+    inputSchema: z.object({
+      path: z
+        .string()
+        .describe("Exact token path (e.g. component.button.primary.bg)"),
+      theme: z
+        .enum(["light", "dark"])
+        .optional()
+        .describe("Theme variant for semantic tokens. Defaults to light."),
+    }),
+  },
+  async ({ path, theme = "light" }) => {
+    const tokens = loadTokens(theme);
+    const token = tokens.find((t) => t.path === path);
+    const stale = isStale() ? "\n\n⚠ Token files may be out of date — run pnpm build" : "";
+
+    if (!token) {
+      return {
+        content: [{ type: "text", text: `Token not found: "${path}".${stale}` }],
+        isError: true,
+      };
+    }
+    return {
+      content: [{ type: "text", text: JSON.stringify(token, null, 2) + stale }],
+    };
+  }
+);
+
+server.registerTool(
+  "suggest_token",
+  {
+    description:
+      "Suggest the best design token for a given CSS property and usage context. " +
+      "Returns up to 5 ranked suggestions, preferring component tokens over semantic and semantic over primitive.",
+    inputSchema: z.object({
+      property: z.string().describe(
+        "CSS property name (e.g. 'background-color', 'border-radius', 'font-size', 'box-shadow')"
+      ),
+      context: z.string().optional().describe(
+        "Plain-English usage context to narrow results (e.g. 'danger button', 'input focus state', 'card background')"
+      ),
+      theme: z.enum(["light", "dark"]).optional().describe(
+        "Theme variant for semantic tokens. Defaults to light."
+      ),
+    }),
+  },
+  async ({ property, context = "", theme = "light" }) => {
+    const tokens = loadTokens(theme);
+    const stale = isStale() ? "\n\n⚠ Token files may be out of date — run pnpm build" : "";
+    const hint = CSS_PROPERTY_MAP[property.toLowerCase()];
+    const contextKeywords = context.toLowerCase().split(/\W+/).filter(Boolean);
+
+    const scored = tokens
+      .map((token) => {
+        const pathLower = token.path.toLowerCase();
+        let score = 0;
+
+        // Hard filter by token type when the CSS property has a known mapping
+        if (hint?.type && token.type !== hint.type) return null;
+
+        // Score by how well the path matches the CSS property's expected path hints
+        for (const h of hint?.hints ?? []) {
+          if (pathLower.includes(h.toLowerCase())) score += 2;
+        }
+
+        // Score by context keyword overlap
+        for (const kw of contextKeywords) {
+          if (pathLower.includes(kw)) score += 1;
+        }
+
+        // If unknown CSS property, fall back to matching the property name itself
+        if (!hint) {
+          const propKeywords = property.toLowerCase().split(/[-\s]+/);
+          for (const kw of propKeywords) {
+            if (pathLower.includes(kw)) score += 1;
+          }
+        }
+
+        if (score === 0) return null;
+
+        return { score: score + TIER_BONUS[token.tier], token };
+      })
+      .filter(Boolean)
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 5)
+      .map(({ token }) => token);
+
+    if (scored.length === 0) {
+      const msg = hint
+        ? `No tokens found for "${property}"${context ? ` in context "${context}"` : ""}.`
+        : `Unknown CSS property "${property}". Try a standard property like "background-color", "border-radius", or "font-size".`;
+      return { content: [{ type: "text", text: msg + stale }] };
+    }
+
+    return {
+      content: [{ type: "text", text: JSON.stringify(scored, null, 2) + stale }],
+    };
+  }
+);
+
+// --- Resources ---
+
+server.registerResource(
+  "primitives",
+  "tokens://primitives",
+  {
+    title: "Primitive Tokens",
+    description: "Raw scale-based values: colors, spacing, typography, radius, shadow, motion.",
+    mimeType: "application/json",
+  },
+  async (uri) => ({
+    contents: [{ uri: uri.href, text: readFileSync(DIST.primitives, "utf-8") }],
+  })
+);
+
+server.registerResource(
+  "components",
+  "tokens://components",
+  {
+    title: "Component Tokens",
+    description: "Component-scoped tokens for button, input, card, badge, and alert.",
+    mimeType: "application/json",
+  },
+  async (uri) => ({
+    contents: [{ uri: uri.href, text: readFileSync(DIST.components, "utf-8") }],
+  })
+);
+
+server.registerResource(
+  "semantic",
+  new ResourceTemplate("tokens://semantic/{theme}", {
+    list: async () => ({
+      resources: [
+        { uri: "tokens://semantic/light", name: "Semantic Tokens — Light" },
+        { uri: "tokens://semantic/dark", name: "Semantic Tokens — Dark" },
+      ],
+    }),
+  }),
+  {
+    title: "Semantic Tokens",
+    description: "Intent-named tokens for background, foreground, border, accent, and status. Pass 'light' or 'dark'.",
+    mimeType: "application/json",
+  },
+  async (uri, { theme }) => {
+    const file = theme === "dark" ? DIST.semanticDark : DIST.semanticLight;
+    return { contents: [{ uri: uri.href, text: readFileSync(file, "utf-8") }] };
+  }
+);
+
+// --- Prompts ---
+
+server.registerPrompt(
+  "find-token",
+  {
+    title: "Find a Token",
+    description: "Describe what you need in plain English and get a suggestion for the right design token to use.",
+    argsSchema: {
+      description: z.string().describe(
+        "Plain-English description of what you need (e.g. 'a background color for a danger alert')"
+      ),
+    },
+  },
+  ({ description }) => ({
+    messages: [
+      {
+        role: "user",
+        content: {
+          type: "text",
+          text:
+            `I need a design token for: "${description}"\n\n` +
+            `Use the search_tokens tool to find the best match. ` +
+            `Prefer semantic or component tokens over primitives. ` +
+            `Reply with the token path, its CSS variable name, and the resolved value.`,
+        },
+      },
+    ],
+  })
+);
+
+const transport = new StdioServerTransport();
+await server.connect(transport);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stevegreco/design-system",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Design tokens distributed as CSS and JSON artifacts.",
   "type": "module",
   "main": "./dist/tokens/primitives.json",
@@ -8,10 +8,17 @@
   "exports": {
     ".": "./dist/tokens/primitives.json",
     "./css": "./dist/css/tokens.css",
-    "./tokens": "./dist/tokens/primitives.json"
+    "./tokens/primitives": "./dist/tokens/primitives.json",
+    "./tokens/semantic-light": "./dist/tokens/semantic.light.json",
+    "./tokens/semantic-dark": "./dist/tokens/semantic.dark.json",
+    "./tokens/components": "./dist/tokens/components.json"
+  },
+  "bin": {
+    "design-system-mcp": "mcp/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "mcp"
   ],
   "keywords": [
     "design-system",
@@ -26,11 +33,16 @@
   "devDependencies": {
     "style-dictionary": "latest"
   },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "zod": "^4.4.3"
+  },
   "scripts": {
     "clean": "rm -rf dist",
     "build": "pnpm run clean && node build-tokens.js && node build-css.js",
     "showcase": "node generate-showcase.js",
     "dashboard": "open examples/dashboard.html",
-    "food": "open examples/food-order.html"
+    "food": "open examples/food-order.html",
+    "mcp": "node mcp/index.js"
   }
 }

package/README.md

@@ -1,64 +0,0 @@
-# design-system
-
-Design token package with DTCG-style source tokens and generated distribution artifacts.
-
-## Source of truth
-
-- DTCG-style tokens: `tokens/primitives.tokens.json`
-- Semantic token examples:
-  - `tokens/semantic/light.tokens.json`
-  - `tokens/semantic/dark.tokens.json`
-
-## Build outputs
-
-- CSS variables (single file): `dist/css/tokens.css`
-- JSON tokens: `dist/tokens/primitives.json`
-- The CSS file contains:
-  - primitives in `:root` with `--primitives-*` names
-  - semantic light tokens in `:root`
-  - semantic dark overrides in `:root[data-theme="dark"]`
-
-## Install
-
-```bash
-pnpm install
-```
-
-## Build
-
-```bash
-pnpm run build
-```
-
-## Consume in CSS projects
-
-```css
-@import "design-system/css";
-```
-
-Or via JS:
-
-```js
-import "design-system/css";
-```
-
-Semantic layers:
-The single CSS entry already includes both light and dark semantic layers.
-The sample semantic token is `--semantic-color-background-brand`.
-
-## Consume JSON tokens
-
-```js
-import tokens from "design-system/tokens";
-```
-
-## Publish checklist
-
-1. Run `pnpm run build`
-2. Bump version in `package.json`
-3. Publish with `pnpm publish`
-
-## Notes
-
-- The package uses Style Dictionary to generate platform outputs.
-- Keep editing tokens in `tokens/primitives.tokens.json` rather than editing `dist/*` files directly.