sdtk-design-kit 0.1.0 → 0.1.2

package/src/lib/style-presets.js

@@ -0,0 +1,150 @@
+"use strict";
+
+const { ValidationError } = require("./errors");
+
+const DEFAULT_STYLE = "minimal-saas";
+
+const STYLE_PRESETS = {
+  "minimal-saas": {
+    label: "Minimal SaaS",
+    summary: "Clean solo-founder SaaS default with practical hierarchy, quiet surfaces, and low-decoration components.",
+    typography: [
+      "Use system UI, Segoe UI, Roboto, Helvetica, Arial, sans-serif.",
+      "Use a clear 32/24/18/15/13px hierarchy for page, section, card, body, and label text.",
+      "Keep letter spacing at 0 except optional uppercase micro-labels at 0.04em.",
+    ],
+    colors: [
+      "`color-bg`: #F7F8FA for the application background.",
+      "`color-surface`: #FFFFFF for panels, forms, and lists.",
+      "`color-text`: #1F2933 for primary text.",
+      "`color-muted`: #667085 for secondary text.",
+      "`color-primary`: #2563EB for the main CTA and selected states.",
+      "`color-success`: #0F8A5F, `color-warning`: #B7791F, `color-danger`: #B42318.",
+      "`color-border`: #D9DEE7 for quiet dividers and input borders.",
+    ],
+    surface: "Use white cards on a soft gray page. Prefer borders over shadows and keep radius at 8px or less.",
+    density: "Use medium density: 16px form/list gaps, 24px section gaps, and compact repeated cards.",
+    cta: "One filled primary CTA per screen; secondary actions should be outlined or text-only.",
+    dashboard: "Use 3-4 summary cards, a simple list/table, status pills with text, and an obvious empty state.",
+    mobile: "Collapse grids to one column under 760px and keep controls at least 44px tall.",
+    accessibility: "Prioritize contrast, visible focus, labeled inputs, and text labels for status.",
+    components: [
+      "Metric card: label, value, short delta.",
+      "Lead card/table row: status, name, next action, note metadata.",
+      "Form row: label, input, helper or inline error.",
+    ],
+  },
+  "premium-dashboard": {
+    label: "Premium Dashboard",
+    summary: "Dashboard-first MVP style with stronger density, metrics, cards, tables, and command surfaces.",
+    typography: [
+      "Use Inter-like system sans with tabular numerals for metrics.",
+      "Use a 34/24/18/14/12px hierarchy with heavier labels and compact metadata.",
+      "Reserve monospace only for technical IDs, timestamps, or compact metric labels.",
+    ],
+    colors: [
+      "`color-bg`: #0B1020 for a deep operational shell or #F5F7FB for light dashboards.",
+      "`color-surface`: #FFFFFF for light cards or #111827 for dark panels.",
+      "`color-text`: #111827 on light surfaces and #F8FAFC on dark surfaces.",
+      "`color-muted`: #64748B for secondary text.",
+      "`color-primary`: #0F766E for primary actions and active states.",
+      "`color-accent`: #2563EB for one chart or selected metric highlight.",
+      "`color-border`: #D8E0EA for light mode or rgba(255,255,255,0.10) for dark panels.",
+    ],
+    surface: "Use a structured dashboard shell with cards, tables, and status surfaces. Shadows can be slightly stronger but must stay functional.",
+    density: "Use higher density: 12px row gaps, 14-16px card padding, aligned KPI tracks, and scannable table rows.",
+    cta: "Primary CTA should be compact and task-oriented, such as Add lead or Review pipeline.",
+    dashboard: "Lead with 4 KPI cards, then a pipeline/list region. Keep status, follow-up, and note snippets visible without opening details.",
+    mobile: "Stack metric cards into two columns then one column; avoid horizontal scrolling for core lead data.",
+    accessibility: "Status color must always pair with text. Keep focus rings visible on dense controls.",
+    components: [
+      "KPI card: label, value, trend, comparison.",
+      "Pipeline panel: status pill, count, next action.",
+      "Command surface: compact primary action plus one secondary filter/control.",
+    ],
+  },
+  "bold-founder": {
+    label: "Bold Founder",
+    summary: "High-contrast launch style for marketing-heavy MVPs with decisive type and CTA hierarchy.",
+    typography: [
+      "Use a heavy display face fallback stack: Impact, Arial Black, Inter, system-ui.",
+      "Use a 56/36/24/16/13px hierarchy and keep body copy short.",
+      "Use uppercase labels sparingly for proof points and section markers.",
+    ],
+    colors: [
+      "`color-bg`: #111111 for dark launch sections or #FFF7ED for high-contrast light sections.",
+      "`color-surface`: #FFFFFF or #18181B for framed proof blocks.",
+      "`color-text`: #FAFAFA on dark and #111827 on light.",
+      "`color-muted`: #A1A1AA for secondary text.",
+      "`color-primary`: #F97316 for the main CTA.",
+      "`color-accent`: #22C55E for one success/proof highlight.",
+      "`color-border`: #27272A or #111827 for strong edges.",
+    ],
+    surface: "Use bold framed sections, hard borders, and clear contrast. Avoid decorative clutter.",
+    density: "Use lower density in hero areas, then compact proof cards and feature rows.",
+    cta: "CTA should be visually dominant, direct, and above the fold.",
+    dashboard: "If a dashboard is needed, use bold stat cards and clear status blocks rather than subtle utility chrome.",
+    mobile: "Reduce hero type, keep CTA full-width, and stack proof points in a single column.",
+    accessibility: "High contrast is required; do not use accent-only meaning.",
+    components: [
+      "Hero lockup: large headline, short proof line, primary CTA.",
+      "Proof card: metric, label, customer-facing implication.",
+      "Status badge: strong text label plus color.",
+    ],
+  },
+  "warm-editorial": {
+    label: "Warm Editorial",
+    summary: "Softer consultant/service-product style with restrained serif-led hierarchy and warm surfaces.",
+    typography: [
+      "Use Georgia, Charter, or Times New Roman for display; use system sans for UI labels and forms.",
+      "Use a 44/30/22/16/13px hierarchy with generous line-height for reading.",
+      "Use serif display for promise, stats, and narrative sections; keep forms sans and literal.",
+    ],
+    colors: [
+      "`color-bg`: #FAF7F2 warm off-white.",
+      "`color-surface`: #FFFFFF for elevated content.",
+      "`color-text`: #1C1A17 near-black.",
+      "`color-muted`: #8A817A for metadata and secondary copy.",
+      "`color-primary`: #C0512F terracotta for primary CTA.",
+      "`color-accent`: #2F5B4F forest for tags and section dividers.",
+      "`color-border`: rgba(47,91,79,0.16) for restrained structure.",
+    ],
+    surface: "Use warm paper backgrounds, restrained cards, and minimal shadows.",
+    density: "Use generous spacing for landing and onboarding, then moderate density for dashboard cards.",
+    cta: "Primary CTA uses terracotta fill; secondary actions stay outlined.",
+    dashboard: "Use readable cards and notes-first presentation for relationship-led work, not heavy analytics chrome.",
+    mobile: "Keep reading width narrow, stack cards, and reduce vertical spacing by about one third.",
+    accessibility: "Warm palettes still need contrast checks; avoid low-contrast tan-on-cream labels.",
+    components: [
+      "Editorial hero: serif headline, concise support copy, terracotta CTA.",
+      "Relationship card: lead, latest note, next follow-up.",
+      "Tag row: forest-accent labels with readable text.",
+    ],
+  },
+};
+
+function availableStyleNames() {
+  return Object.keys(STYLE_PRESETS);
+}
+
+function resolveStyleName(style) {
+  const normalized = String(style || DEFAULT_STYLE).trim().toLowerCase();
+  if (STYLE_PRESETS[normalized]) {
+    return normalized;
+  }
+  throw new ValidationError(
+    `Unsupported --style "${style}". Supported styles: ${availableStyleNames().join(", ")}. No project files were changed.`
+  );
+}
+
+function getStylePreset(style) {
+  return STYLE_PRESETS[resolveStyleName(style)];
+}
+
+module.exports = {
+  DEFAULT_STYLE,
+  STYLE_PRESETS,
+  availableStyleNames,
+  getStylePreset,
+  resolveStyleName,
+};