@stevegreco/design-system 0.0.2 → 0.0.3

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stevegreco/design-system",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Design tokens distributed as CSS and JSON artifacts.",
   "type": "module",
   "main": "./dist/tokens/primitives.json",
@@ -8,7 +8,10 @@
   "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"
   },
   "files": [
     "dist"
@@ -26,11 +29,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.