@stevegreco/design-system 0.0.1 → 0.0.3

package/dist/css/tokens.css

@@ -214,104 +214,104 @@
  */
 
 :root {
-  --component-button-secondary-bg: rgba(0, 0, 0, 0);
-  --component-button-ghost-bg: rgba(0, 0, 0, 0);
+  --component-alert-radius: 10px;
+  --component-alert-padding: 16px;
+  --component-alert-gap: 12px;
+  --component-alert-font-size: 14px;
+  --component-alert-title-font-weight: 600;
+  --component-alert-success-background: #e3ecd9;
+  --component-alert-success-foreground: #4a6b3d;
+  --component-alert-success-icon-color: #6b8e5a;
+  --component-alert-success-border: #e3ecd9;
+  --component-alert-danger-background: #f5dbd0;
+  --component-alert-danger-foreground: #84301c;
+  --component-alert-danger-icon-color: #b8472a;
+  --component-alert-danger-border: #f5dbd0;
+  --component-alert-warning-background: #f7edce;
+  --component-alert-warning-foreground: #823f1e;
+  --component-alert-warning-icon-color: #c06d1f;
+  --component-alert-warning-border: #f7edce;
+  --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;
+  --component-badge-padding-x: 8px;
+  --component-badge-padding-y: 1px;
+  --component-badge-font-size: 12px;
+  --component-badge-font-weight: 500;
+  --component-badge-default-background: #e0e7e3;
+  --component-badge-default-foreground: #3b4a43;
+  --component-badge-default-border: #c1cec7;
+  --component-badge-accent-background: #f7edce;
+  --component-badge-accent-foreground: #a0501d;
+  --component-badge-accent-border: #efda98;
+  --component-badge-success-background: #e3ecd9;
+  --component-badge-success-foreground: #4a6b3d;
+  --component-badge-success-border: #e3ecd9;
+  --component-badge-danger-background: #f5dbd0;
+  --component-badge-danger-foreground: #84301c;
+  --component-badge-danger-border: #f5dbd0;
+  --component-badge-warning-background: #f7edce;
+  --component-badge-warning-foreground: #823f1e;
+  --component-badge-warning-border: #f7edce;
+  --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;
+  --component-button-padding-x: 16px;
+  --component-button-padding-y: 12px;
+  --component-button-padding-x-sm: 12px;
+  --component-button-padding-y-sm: 8px;
+  --component-button-font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
+  --component-button-font-weight: 500;
+  --component-button-font-size: 14px;
+  --component-button-transition: 140ms;
+  --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-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-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-alert-radius: var(--radius-md);
-  --component-alert-padding: var(--space-4);
-  --component-alert-gap: var(--space-3);
-  --component-alert-font-size: var(--text-sm);
-  --component-alert-title-font-weight: var(--weight-semibold);
-  --component-badge-radius: var(--radius-full);
-  --component-badge-padding-x: var(--space-2);
-  --component-badge-padding-y: var(--space-px);
-  --component-badge-font-size: var(--text-xs);
-  --component-badge-font-weight: var(--weight-medium);
-  --component-button-radius-md: var(--radius-md);
-  --component-button-radius-full: var(--radius-full);
-  --component-button-padding-x: var(--space-4);
-  --component-button-padding-y: var(--space-3);
-  --component-button-padding-x-sm: var(--space-3);
-  --component-button-padding-y-sm: var(--space-2);
-  --component-button-font-family: var(--font-sans);
-  --component-button-font-weight: var(--weight-medium);
-  --component-button-font-size: var(--text-sm);
-  --component-button-transition: var(--duration-fast);
-  --component-button-danger-fg: var(--color-white);
-  --component-card-radius: var(--radius-lg);
-  --component-card-shadow: var(--shadow-sm);
-  --component-card-shadow-hover: var(--shadow-md);
-  --component-card-padding: var(--space-6);
-  --component-card-gap: var(--space-4);
-  --component-input-radius: var(--radius-sm);
-  --component-input-padding-x: var(--space-3);
-  --component-input-padding-y: var(--space-2);
-  --component-input-shadow: var(--shadow-inset);
-  --component-input-shadow-focus: var(--shadow-xs);
-  --component-input-font-family: var(--font-sans);
-  --component-input-font-size: var(--text-sm);
-  --component-alert-success-bg: var(--semantic-color-status-success-background);
-  --component-alert-success-fg: var(--semantic-color-status-success-foreground);
-  --component-alert-success-icon-color: var(--semantic-color-status-success-default);
-  --component-alert-success-border: var(--semantic-color-status-success-background);
-  --component-alert-danger-bg: var(--semantic-color-status-danger-background);
-  --component-alert-danger-fg: var(--semantic-color-status-danger-foreground);
-  --component-alert-danger-icon-color: var(--semantic-color-status-danger-default);
-  --component-alert-danger-border: var(--semantic-color-status-danger-background);
-  --component-alert-warning-bg: var(--semantic-color-status-warning-background);
-  --component-alert-warning-fg: var(--semantic-color-status-warning-foreground);
-  --component-alert-warning-icon-color: var(--semantic-color-status-warning-default);
-  --component-alert-warning-border: var(--semantic-color-status-warning-background);
-  --component-alert-info-bg: var(--semantic-color-status-info-background);
-  --component-alert-info-fg: var(--semantic-color-status-info-foreground);
-  --component-alert-info-icon-color: var(--semantic-color-status-info-default);
-  --component-alert-info-border: var(--semantic-color-status-info-background);
-  --component-badge-default-bg: var(--semantic-color-background-muted);
-  --component-badge-default-fg: var(--semantic-color-foreground-muted);
-  --component-badge-default-border: var(--semantic-color-border-default);
-  --component-badge-accent-bg: var(--semantic-color-accent-soft);
-  --component-badge-accent-fg: var(--semantic-color-accent-default);
-  --component-badge-accent-border: var(--semantic-color-border-warm);
-  --component-badge-success-bg: var(--semantic-color-status-success-background);
-  --component-badge-success-fg: var(--semantic-color-status-success-foreground);
-  --component-badge-success-border: var(--semantic-color-status-success-background);
-  --component-badge-danger-bg: var(--semantic-color-status-danger-background);
-  --component-badge-danger-fg: var(--semantic-color-status-danger-foreground);
-  --component-badge-danger-border: var(--semantic-color-status-danger-background);
-  --component-badge-warning-bg: var(--semantic-color-status-warning-background);
-  --component-badge-warning-fg: var(--semantic-color-status-warning-foreground);
-  --component-badge-warning-border: var(--semantic-color-status-warning-background);
-  --component-badge-info-bg: var(--semantic-color-status-info-background);
-  --component-badge-info-fg: var(--semantic-color-status-info-foreground);
-  --component-badge-info-border: var(--semantic-color-status-info-background);
-  --component-button-primary-bg: var(--semantic-color-accent-default);
-  --component-button-primary-bg-hover: var(--semantic-color-accent-hover);
-  --component-button-primary-bg-press: var(--semantic-color-accent-press);
-  --component-button-primary-fg: var(--semantic-color-accent-foreground);
-  --component-button-primary-border: var(--semantic-color-accent-default);
-  --component-button-secondary-bg-hover: var(--semantic-color-secondary-soft);
-  --component-button-secondary-bg-press: var(--semantic-color-secondary-soft);
-  --component-button-secondary-fg: var(--semantic-color-secondary-default);
-  --component-button-secondary-border: var(--semantic-color-border-default);
-  --component-button-ghost-bg-hover: var(--semantic-color-secondary-soft);
-  --component-button-ghost-fg: var(--semantic-color-foreground-default);
-  --component-button-danger-bg: var(--semantic-color-status-danger-default);
-  --component-button-danger-bg-hover: var(--semantic-color-status-danger-foreground);
-  --component-button-danger-border: var(--semantic-color-status-danger-default);
-  --component-card-bg: var(--semantic-color-background-raised);
-  --component-card-border: var(--semantic-color-border-default);
-  --component-card-warm-bg: var(--semantic-color-accent-soft);
-  --component-card-warm-border: var(--semantic-color-border-warm);
-  --component-input-bg: var(--semantic-color-background-raised);
-  --component-input-bg-disabled: var(--semantic-color-background-muted);
-  --component-input-border: var(--semantic-color-border-default);
-  --component-input-border-hover: var(--semantic-color-border-strong);
-  --component-input-border-focus: var(--semantic-color-accent-default);
-  --component-input-border-error: var(--semantic-color-status-danger-default);
-  --component-input-fg: var(--semantic-color-foreground-default);
-  --component-input-fg-placeholder: var(--semantic-color-foreground-faint);
-  --component-input-fg-disabled: var(--semantic-color-foreground-subtle);
-  --component-input-label-fg: var(--semantic-color-foreground-muted);
-  --component-input-hint-fg: var(--semantic-color-foreground-subtle);
-  --component-input-error-fg: var(--semantic-color-status-danger-foreground);
+  --component-button-danger-background: #b8472a;
+  --component-button-danger-background-hover: #84301c;
+  --component-button-danger-foreground: #ffffff;
+  --component-button-danger-border: #b8472a;
+  --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-background: #f7edce;
+  --component-card-warm-border: #efda98;
+  --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-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;
+  --component-input-shadow: inset 0 1px 2px rgba(61, 26, 11, 0.08);
+  --component-input-shadow-focus: 0 1px 2px rgba(61, 26, 11, 0.06);
+  --component-input-font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
+  --component-input-font-size: 14px;
 }

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

@@ -1,162 +1,164 @@
 {
-  "color": {
-    "white": "#ffffff",
-    "black": "#000000",
-    "robRoy": {
-      "50": "#fdf9ed",
-      "100": "#f7edce",
-      "200": "#efda98",
-      "300": "#e8c468",
-      "400": "#e1ac3e",
-      "500": "#d98f27",
-      "600": "#c06d1f",
-      "700": "#a0501d",
-      "800": "#823f1e",
-      "900": "#6b341c",
-      "950": "#3d1a0b"
+  "primitives": {
+    "color": {
+      "white": "#ffffff",
+      "black": "#000000",
+      "robRoy": {
+        "50": "#fdf9ed",
+        "100": "#f7edce",
+        "200": "#efda98",
+        "300": "#e8c468",
+        "400": "#e1ac3e",
+        "500": "#d98f27",
+        "600": "#c06d1f",
+        "700": "#a0501d",
+        "800": "#823f1e",
+        "900": "#6b341c",
+        "950": "#3d1a0b"
+      },
+      "blueSmoke": {
+        "50": "#f6f7f7",
+        "100": "#e0e7e3",
+        "200": "#c1cec7",
+        "300": "#9aaea4",
+        "400": "#7a9086",
+        "500": "#5b7168",
+        "600": "#475a52",
+        "700": "#3b4a43",
+        "800": "#323d38",
+        "900": "#2c3531",
+        "950": "#171c1a"
+      },
+      "clay": {
+        "50": "#faf6f0",
+        "100": "#f2ebdf",
+        "200": "#e6d8c3",
+        "300": "#d4bea0",
+        "400": "#b89977",
+        "500": "#9a7a58",
+        "600": "#7c6044",
+        "700": "#5e4733",
+        "800": "#3f2f22",
+        "900": "#221a13"
+      },
+      "moss": {
+        "100": "#e3ecd9",
+        "500": "#6b8e5a",
+        "700": "#4a6b3d",
+        "900": "#394739"
+      },
+      "rust": {
+        "100": "#f5dbd0",
+        "500": "#b8472a",
+        "700": "#84301c",
+        "900": "#483930"
+      },
+      "sky": {
+        "100": "#d6e1ea",
+        "500": "#4a7896",
+        "700": "#2f5973",
+        "900": "#34464a"
+      }
     },
-    "blueSmoke": {
-      "50": "#f6f7f7",
-      "100": "#e0e7e3",
-      "200": "#c1cec7",
-      "300": "#9aaea4",
-      "400": "#7a9086",
-      "500": "#5b7168",
-      "600": "#475a52",
-      "700": "#3b4a43",
-      "800": "#323d38",
-      "900": "#2c3531",
-      "950": "#171c1a"
+    "font": {
+      "display": "'Lora', Georgia, serif",
+      "sans": "'Source Sans 3', system-ui, -apple-system, sans-serif",
+      "mono": "'JetBrains Mono', 'SF Mono', Menlo, monospace"
     },
-    "clay": {
-      "50": "#faf6f0",
-      "100": "#f2ebdf",
-      "200": "#e6d8c3",
-      "300": "#d4bea0",
-      "400": "#b89977",
-      "500": "#9a7a58",
-      "600": "#7c6044",
-      "700": "#5e4733",
-      "800": "#3f2f22",
-      "900": "#221a13"
+    "text": {
+      "2xs": "11px",
+      "xs": "12px",
+      "sm": "14px",
+      "base": "16px",
+      "md": "18px",
+      "lg": "20px",
+      "xl": "24px",
+      "2xl": "30px",
+      "3xl": "38px",
+      "4xl": "48px",
+      "5xl": "60px",
+      "6xl": "76px"
     },
-    "moss": {
-      "100": "#e3ecd9",
-      "500": "#6b8e5a",
-      "700": "#4a6b3d",
-      "900": "#394739"
+    "weight": {
+      "light": 300,
+      "regular": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700
     },
-    "rust": {
-      "100": "#f5dbd0",
-      "500": "#b8472a",
-      "700": "#84301c",
-      "900": "#483930"
+    "leading": {
+      "tight": "1.15",
+      "snug": "1.25",
+      "normal": "1.5",
+      "relaxed": "1.65"
     },
-    "sky": {
-      "100": "#d6e1ea",
-      "500": "#4a7896",
-      "700": "#2f5973",
-      "900": "#34464a"
+    "tracking": {
+      "tight": "-0.02em",
+      "snug": "-0.01em",
+      "normal": "0em",
+      "wide": "0.04em",
+      "caps": "0.08em"
+    },
+    "space": {
+      "0": 0,
+      "1": "4px",
+      "2": "8px",
+      "3": "12px",
+      "4": "16px",
+      "5": "20px",
+      "6": "24px",
+      "8": "32px",
+      "10": "40px",
+      "12": "48px",
+      "16": "64px",
+      "20": "80px",
+      "24": "96px",
+      "32": "128px",
+      "px": "1px"
+    },
+    "radius": {
+      "none": 0,
+      "xs": "3px",
+      "sm": "6px",
+      "md": "10px",
+      "lg": "14px",
+      "xl": "20px",
+      "2xl": "28px",
+      "full": "9999px"
+    },
+    "shadow": {
+      "xs": "0 1px 2px rgba(61, 26, 11, 0.06)",
+      "sm": "0 1px 2px rgba(61, 26, 11, 0.05), 0 2px 4px rgba(61, 26, 11, 0.04)",
+      "md": "0 2px 4px rgba(61, 26, 11, 0.05), 0 6px 14px rgba(61, 26, 11, 0.07)",
+      "lg": "0 4px 8px rgba(61, 26, 11, 0.06), 0 16px 32px rgba(61, 26, 11, 0.10)",
+      "xl": "0 8px 16px rgba(61, 26, 11, 0.08), 0 32px 64px rgba(61, 26, 11, 0.14)",
+      "inset": "inset 0 1px 2px rgba(61, 26, 11, 0.08)",
+      "insetLg": "inset 0 2px 6px rgba(61, 26, 11, 0.10)",
+      "none": "0 0 #0000"
+    },
+    "ease": {
+      "out": "cubic-bezier(0.22, 0.61, 0.36, 1)",
+      "in": "cubic-bezier(0.55, 0.06, 0.68, 0.19)",
+      "inout": "cubic-bezier(0.65, 0.05, 0.36, 1)",
+      "soft": "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "duration": {
+      "fast": "140ms",
+      "base": "220ms",
+      "slow": "360ms",
+      "xslow": "600ms"
+    },
+    "layout": {
+      "narrow": "640px",
+      "prose": "720px",
+      "wide": "960px",
+      "xwide": "1200px",
+      "max": "1440px"
+    },
+    "border": {
+      "none": "0px",
+      "thin": "1px",
+      "thick": "2px"
     }
-  },
-  "font": {
-    "display": "'Lora', Georgia, serif",
-    "sans": "'Source Sans 3', system-ui, -apple-system, sans-serif",
-    "mono": "'JetBrains Mono', 'SF Mono', Menlo, monospace"
-  },
-  "text": {
-    "2xs": "11px",
-    "xs": "12px",
-    "sm": "14px",
-    "base": "16px",
-    "md": "18px",
-    "lg": "20px",
-    "xl": "24px",
-    "2xl": "30px",
-    "3xl": "38px",
-    "4xl": "48px",
-    "5xl": "60px",
-    "6xl": "76px"
-  },
-  "weight": {
-    "light": 300,
-    "regular": 400,
-    "medium": 500,
-    "semibold": 600,
-    "bold": 700
-  },
-  "leading": {
-    "tight": "1.15",
-    "snug": "1.25",
-    "normal": "1.5",
-    "relaxed": "1.65"
-  },
-  "tracking": {
-    "tight": "-0.02em",
-    "snug": "-0.01em",
-    "normal": "0em",
-    "wide": "0.04em",
-    "caps": "0.08em"
-  },
-  "space": {
-    "0": "0",
-    "1": "4px",
-    "2": "8px",
-    "3": "12px",
-    "4": "16px",
-    "5": "20px",
-    "6": "24px",
-    "8": "32px",
-    "10": "40px",
-    "12": "48px",
-    "16": "64px",
-    "20": "80px",
-    "24": "96px",
-    "32": "128px",
-    "px": "1px"
-  },
-  "radius": {
-    "none": "0",
-    "xs": "3px",
-    "sm": "6px",
-    "md": "10px",
-    "lg": "14px",
-    "xl": "20px",
-    "2xl": "28px",
-    "full": "9999px"
-  },
-  "shadow": {
-    "xs": "0 1px 2px rgba(61, 26, 11, 0.06)",
-    "sm": "0 1px 2px rgba(61, 26, 11, 0.05), 0 2px 4px rgba(61, 26, 11, 0.04)",
-    "md": "0 2px 4px rgba(61, 26, 11, 0.05), 0 6px 14px rgba(61, 26, 11, 0.07)",
-    "lg": "0 4px 8px rgba(61, 26, 11, 0.06), 0 16px 32px rgba(61, 26, 11, 0.10)",
-    "xl": "0 8px 16px rgba(61, 26, 11, 0.08), 0 32px 64px rgba(61, 26, 11, 0.14)",
-    "inset": "inset 0 1px 2px rgba(61, 26, 11, 0.08)",
-    "insetLg": "inset 0 2px 6px rgba(61, 26, 11, 0.10)",
-    "none": "0 0 #0000"
-  },
-  "ease": {
-    "out": "cubic-bezier(0.22, 0.61, 0.36, 1)",
-    "in": "cubic-bezier(0.55, 0.06, 0.68, 0.19)",
-    "inout": "cubic-bezier(0.65, 0.05, 0.36, 1)",
-    "soft": "cubic-bezier(0.4, 0, 0.2, 1)"
-  },
-  "duration": {
-    "fast": "140ms",
-    "base": "220ms",
-    "slow": "360ms",
-    "xslow": "600ms"
-  },
-  "layout": {
-    "narrow": "640px",
-    "prose": "720px",
-    "wide": "960px",
-    "xwide": "1200px",
-    "max": "1440px"
-  },
-  "border": {
-    "none": "0px",
-    "thin": "1px",
-    "thick": "2px"
   }
 }

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.1",
+  "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.