finished up the components, added showcase view, and documentation

2026-06-01 17:32:42 -06:00
parent d34d61458b
commit db2ddadff3
6 changed files with 833 additions and 0 deletions
@@ -0,0 +1,121 @@
+{
+  "meta": {
+    "project": "mk-design-system",
+    "sourceApproach": "tailwindcss-v4",
+    "primaryFont": "Roboto",
+    "fontType": "variable-woff2",
+    "colorMode": "light",
+    "version": "0.1.0"
+  },
+  "colors": {
+    "primary":   { "DEFAULT": "#e91e63", "gradientStart": "#EC407A", "gradientEnd": "#D81B60" },
+    "secondary": { "DEFAULT": "#7b809a", "gradientStart": "#747b8a", "gradientEnd": "#495361" },
+    "semantic": {
+      "success": { "DEFAULT": "#4caf50", "gradientStart": "#66bb6a", "gradientEnd": "#43a047" },
+      "warning": { "DEFAULT": "#fb8c00", "gradientStart": "#ffa726", "gradientEnd": "#fb8c00" },
+      "danger":  { "DEFAULT": "#f44335", "gradientStart": "#ef5350", "gradientEnd": "#e53935" },
+      "info":    { "DEFAULT": "#1a73e8", "gradientStart": "#49a3f1", "gradientEnd": "#1a73e8" }
+    },
+    "neutrals": {
+      "white": "#ffffff",
+      "black": "#000000",
+      "light": "#f0f2f5",
+      "dark":  "#344767",
+      "gray": {
+        "100": "#f8f9fa",
+        "200": "#f0f2f5",
+        "300": "#dee2e6",
+        "500": "#adb5bd",
+        "600": "#6c757d",
+        "900": "#212529"
+      }
+    }
+  },
+  "typography": {
+    "fontFamilies": {
+      "sans":  "Roboto, Helvetica, Arial, sans-serif",
+      "serif": "Roboto Slab, serif",
+      "mono":  "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
+    },
+    "fontFiles": {
+      "roboto":     "public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2",
+      "robotoItalic":"public/fonts/roboto/Roboto-Italic-VariableFont_wdth-wght.woff2",
+      "robotoSlab": "public/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2",
+      "materialIcons":"public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2"
+    },
+    "weightRange": "100–900 (variable font)",
+    "sizes": {
+      "xs":   "0.75rem",
+      "sm":   "0.875rem",
+      "base": "1rem",
+      "lg":   "1.125rem",
+      "xl":   "1.25rem",
+      "2xl":  "1.5rem",
+      "3xl":  "1.875rem",
+      "4xl":  "2.25rem",
+      "5xl":  "3rem"
+    },
+    "lineHeights": { "base": "1.5", "tight": "1.25", "relaxed": "1.75" }
+  },
+  "spacing": {
+    "note": "Tailwind v4 default scale — rem-based, no custom overrides needed",
+    "common": {
+      "1": "0.25rem",  "2": "0.5rem",  "3": "0.75rem",
+      "4": "1rem",     "6": "1.5rem",  "8": "2rem",
+      "12": "3rem",    "16": "4rem",   "24": "6rem"
+    }
+  },
+  "shadows": {
+    "soft": {
+      "xs": "0 2px 9px -5px rgba(0,0,0,0.15)",
+      "sm": "0 0.3125rem 0.625rem 0 rgba(0,0,0,0.12)",
+      "md": "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)",
+      "lg": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)"
+    },
+    "blur": "0 20px 27px rgba(0,0,0,0.05)",
+    "colored": {
+      "note": "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba({r},{g},{b},0.4)",
+      "primary":   "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(233,30,99,0.4)",
+      "secondary": "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(210,210,210,0.4)",
+      "success":   "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(76,175,80,0.4)",
+      "warning":   "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(251,140,0,0.4)",
+      "danger":    "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(244,67,54,0.4)",
+      "info":      "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(26,115,232,0.4)",
+      "dark":      "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(64,64,64,0.4)"
+    }
+  },
+  "borders": {
+    "radius": {
+      "xs":  "0.1rem",
+      "sm":  "0.125rem",
+      "md":  "0.375rem",
+      "lg":  "0.5rem",
+      "xl":  "0.75rem",
+      "2xl": "1rem",
+      "full":"9999px"
+    },
+    "width": { "default": "1px" }
+  },
+  "gradients": {
+    "angle": "195deg",
+    "note": "All gradients use the 195deg angle — do not change",
+    "variants": {
+      "primary":   "linear-gradient(195deg, #EC407A, #D81B60)",
+      "secondary": "linear-gradient(195deg, #747b8a, #495361)",
+      "success":   "linear-gradient(195deg, #66bb6a, #43a047)",
+      "warning":   "linear-gradient(195deg, #ffa726, #fb8c00)",
+      "danger":    "linear-gradient(195deg, #ef5350, #e53935)",
+      "info":      "linear-gradient(195deg, #49a3f1, #1a73e8)",
+      "dark":      "linear-gradient(195deg, #42424a, #191919)",
+      "light":     "linear-gradient(195deg, #ebeff4, #ced4da)"
+    }
+  },
+  "breakpoints": {
+    "note": "Tailwind v4 defaults",
+    "sm":  "640px",
+    "md":  "768px",
+    "lg":  "1024px",
+    "xl":  "1280px",
+    "2xl": "1536px"
+  }
+}