@stevegreco/design-system 0.0.1 → 0.0.2

package/dist/css/tokens.css

@@ -214,104 +214,104 @@
  */
 
 :root {
+  --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-bg: #e3ecd9;
+  --component-alert-success-fg: #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-icon-color: #b8472a;
+  --component-alert-danger-border: #f5dbd0;
+  --component-alert-warning-bg: #f7edce;
+  --component-alert-warning-fg: #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-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-bg: #e0e7e3;
+  --component-badge-default-fg: #3b4a43;
+  --component-badge-default-border: #c1cec7;
+  --component-badge-accent-bg: #f7edce;
+  --component-badge-accent-fg: #a0501d;
+  --component-badge-accent-border: #efda98;
+  --component-badge-success-bg: #e3ecd9;
+  --component-badge-success-fg: #4a6b3d;
+  --component-badge-success-border: #e3ecd9;
+  --component-badge-danger-bg: #f5dbd0;
+  --component-badge-danger-fg: #84301c;
+  --component-badge-danger-border: #f5dbd0;
+  --component-badge-warning-bg: #f7edce;
+  --component-badge-warning-fg: #823f1e;
+  --component-badge-warning-border: #f7edce;
+  --component-badge-info-bg: #d6e1ea;
+  --component-badge-info-fg: #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-bg: #a0501d;
+  --component-button-primary-bg-hover: #823f1e;
+  --component-button-primary-bg-press: #6b341c;
+  --component-button-primary-fg: #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-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-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-bg: #b8472a;
+  --component-button-danger-bg-hover: #84301c;
+  --component-button-danger-fg: #ffffff;
+  --component-button-danger-border: #b8472a;
+  --component-card-bg: #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-border: #efda98;
+  --component-input-bg: #ffffff;
+  --component-input-bg-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-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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stevegreco/design-system",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Design tokens distributed as CSS and JSON artifacts.",
   "type": "module",
   "main": "./dist/tokens/primitives.json",