sdtk-design-kit 0.3.1 → 0.4.0

package/src/lib/style-presets.js

@@ -7,6 +7,7 @@ const DEFAULT_STYLE = "minimal-saas";
 const STYLE_PRESETS = {
   "minimal-saas": {
     label: "Minimal SaaS",
+    category: "SaaS & Productivity",
     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.",
@@ -36,6 +37,7 @@ const STYLE_PRESETS = {
   },
   "premium-dashboard": {
     label: "Premium Dashboard",
+    category: "Dashboard & Data",
     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.",
@@ -65,6 +67,7 @@ const STYLE_PRESETS = {
   },
   "bold-founder": {
     label: "Bold Founder",
+    category: "Marketing & Launch",
     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.",
@@ -94,6 +97,7 @@ const STYLE_PRESETS = {
   },
   "warm-editorial": {
     label: "Warm Editorial",
+    category: "Editorial & Content",
     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.",
@@ -121,6 +125,122 @@ const STYLE_PRESETS = {
       "Tag row: forest-accent labels with readable text.",
     ],
   },
+  "ecommerce-retail": {
+    label: "E-Commerce Retail",
+    category: "E-Commerce & Retail",
+    summary: "Product-forward storefront style with photography-led cards, a single confident accent for CTA and price, and a sticky cart/checkout rail.",
+    typography: [
+      "Use a clean geometric/grotesque system sans: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif.",
+      "Use a 36/26/20/15/13px hierarchy; keep product names at 15-16px medium weight and prices at 18-20px bold.",
+      "Use tabular numerals for prices and quantities; keep letter spacing at 0 except optional 0.06em uppercase micro-labels for badges (SALE, NEW).",
+    ],
+    colors: [
+      "`color-bg`: #FFFFFF for the product canvas; let photography carry the visual weight.",
+      "`color-surface`: #FFFFFF for product cards on a #F6F7F9 alternating page tint.",
+      "`color-text`: #1A1D21 for product names, prices, and primary copy.",
+      "`color-muted`: #6B7280 for secondary metadata, shipping notes, and review counts.",
+      "`color-primary`: #4338CA indigo for the add-to-cart / checkout CTA and active filters.",
+      "`color-accent`: #E8590C pumpkin for price emphasis, sale tags, and the wishlist heart.",
+      "`color-success`: #1B873F in-stock, `color-warning`: #B7791F low-stock, `color-danger`: #C2330E out-of-stock or error.",
+      "`color-border`: #E6E8EB for quiet card edges, dividers, and input outlines.",
+    ],
+    surface: "Use white product cards with 14-20px corner radius on a soft page tint; let product imagery sit edge-to-edge with gentle rounding. Prefer hairline borders over heavy shadows; reserve a soft lift only for the sticky cart panel.",
+    density: "Use a responsive product grid (2-4 columns) with 16-20px gutters and generous whitespace around hero and category bands; keep cart/line-item rows compact at 12-14px.",
+    cta: "One dominant filled primary CTA per surface (Add to cart / Checkout); secondary actions (wishlist, compare) stay outlined or icon-only. Keep price and CTA visually paired.",
+    dashboard: "For seller/order views, use order-status pills with text, a compact line-item table, and clear fulfillment states; do not borrow heavy analytics chrome onto the storefront.",
+    mobile: "Collapse the grid to two then one column under 760px; pin the add-to-cart / total bar to the bottom on product and cart screens; keep tap targets at least 44px.",
+    accessibility: "Never signal stock or price state by color alone — pair with text and icons; maintain 4.5:1 contrast on price and CTA text; keep focus rings visible on cards, filters, and quantity steppers.",
+    elevation: "Keep most surfaces flat with hairline borders; use a single soft shadow (0 8px 24px rgba(16,24,40,0.10)) only for the sticky cart/checkout rail and modal overlays; product cards lift only on hover, not at rest.",
+    dosAndDonts: [
+      "Do let product photography be the hero; keep chrome quiet around it.",
+      "Do pair price and the add-to-cart CTA so the buying decision is one glance.",
+      "Don't use more than one accent color; reserve the accent for price and sale signals.",
+      "Don't stack nested cards or decorative gradients that compete with product imagery.",
+    ],
+    components: [
+      "Product card: image, name, price, rating/review count, add-to-cart.",
+      "Cart line item: thumbnail, name, variant, quantity stepper, line total, remove.",
+      "Sticky order summary: subtotal, shipping, total, primary checkout CTA.",
+      "Filter rail: category, price range, in-stock toggle with applied-filter chips.",
+    ],
+  },
+  "fintech-trust": {
+    label: "Fintech Trust",
+    category: "Fintech & Data",
+    summary: "Trust-forward financial style with dense data surfaces, tabular numerals, a restrained palette, and strong status semantics.",
+    typography: [
+      "Use a precise system sans with tabular numerals enabled everywhere numbers appear: system-ui, Inter, Segoe UI, Roboto, sans-serif.",
+      "Use a 30/22/18/14/12px hierarchy with heavier labels and compact metadata; align figures on the decimal.",
+      "Reserve monospace for account IDs, reference numbers, and timestamps only.",
+    ],
+    colors: [
+      "`color-bg`: #F4F6FB for the application background.",
+      "`color-surface`: #FFFFFF for balance cards, statements, and tables.",
+      "`color-text`: #0F172A for balances, labels, and primary copy.",
+      "`color-muted`: #5A6678 for secondary metadata and helper text.",
+      "`color-primary`: #1E3A8A deep navy for primary actions and active states.",
+      "`color-accent`: #0E7C66 teal for positive balance highlights and one chart series.",
+      "`color-success`: #1B873F credit/up, `color-warning`: #B7791F pending/review, `color-danger`: #C2330E debit/down or error.",
+      "`color-border`: #DCE2EC for table rules, card edges, and input outlines.",
+    ],
+    surface: "Use structured white cards and tables with crisp 8-10px radius on a cool page tint; keep rules and dividers hairline. Money and status must read instantly; avoid decorative surfaces that obscure figures.",
+    density: "Use high density: 10-12px table row gaps, aligned numeric columns with right-aligned figures, and scannable statement rows; keep summary cards calm with one headline figure each.",
+    cta: "Primary CTA should be compact, explicit, and reassuring (Transfer, Confirm payment); destructive or irreversible actions require a clear confirm step.",
+    dashboard: "Lead with 3-4 balance/KPI cards (tabular figures + trend), then a transactions table with status pills; keep gains/losses signed and color-paired with text.",
+    mobile: "Stack balance cards to one column; keep transaction rows readable without horizontal scroll; pin the primary action for the active account.",
+    accessibility: "Never signal up/down or credit/debit by color alone — pair with sign, arrow, and text; maintain 4.5:1 contrast on figures; keep focus rings visible on dense controls and table actions.",
+    elevation: "Keep surfaces flat and trustworthy with hairline borders; use a single restrained shadow (0 1px 2px rgba(15,23,42,0.08)) for cards and a slightly stronger lift only for modals/confirm dialogs; avoid playful depth.",
+    dosAndDonts: [
+      "Do use tabular numerals and align figures so balances are scannable.",
+      "Do pair every up/down or credit/debit signal with a sign, arrow, and text.",
+      "Don't decorate money surfaces with gradients or imagery that reduce legibility.",
+      "Don't hide the active account's primary action below the fold on mobile.",
+    ],
+    components: [
+      "Balance card: account label, balance (tabular), signed trend, last-updated.",
+      "Transaction row: date, payee, category, signed amount, status pill.",
+      "Confirm dialog: amount, recipient, fee, irreversible-action confirm.",
+      "Status pill: text label plus color (cleared, pending, failed).",
+    ],
+  },
+  "editorial-content": {
+    label: "Editorial Content",
+    category: "Editorial & Content",
+    summary: "Reading-first content style with a narrow measure, serif-led hierarchy, warm surfaces, and minimal chrome for articles, blogs, and marketplace listings.",
+    typography: [
+      "Use a readable serif for headings and long-form body (Georgia, Charter, 'Iowan Old Style', Times New Roman, serif); use system sans for UI labels, nav, and forms.",
+      "Use a 44/30/22/18/14px hierarchy with generous line-height (1.6-1.7) for body and a comfortable 66-72ch reading measure.",
+      "Use serif for narrative and pull quotes; keep captions, bylines, and metadata in small sans at 13-14px.",
+    ],
+    colors: [
+      "`color-bg`: #FBF9F5 warm paper background.",
+      "`color-surface`: #FFFFFF for elevated cards and media frames.",
+      "`color-text`: #201C17 near-black ink for body and headings.",
+      "`color-muted`: #857D72 for bylines, dates, and secondary metadata.",
+      "`color-primary`: #9A3412 burnt-sienna for primary links, CTAs, and active nav.",
+      "`color-accent`: #2F5B4F forest for tags, section markers, and dividers.",
+      "`color-border`: rgba(32,28,23,0.12) for restrained rules and card edges.",
+    ],
+    surface: "Use warm paper backgrounds with a single centered reading column; frame media edge-to-edge with gentle rounding. Prefer rules and whitespace over cards; reserve cards for related-content and listing grids.",
+    density: "Use generous vertical rhythm for article body (paragraph spacing ~1em, section spacing ~2.5em); use a calm 2-3 column grid with 24px gutters for listing/related content.",
+    cta: "Primary CTA (Subscribe, Read more, Contact seller) uses the sienna link/fill; keep it understated and inline with the reading flow rather than dominant.",
+    dashboard: "For author/listing management, use readable rows and notes-first cards rather than heavy analytics chrome; surface publish status and last-edit clearly.",
+    mobile: "Keep the reading measure narrow and centered; stack listing cards to one column; reduce section spacing by about one third while preserving body line-height.",
+    accessibility: "Warm palettes still need contrast checks — keep body text at 4.5:1 on paper; never rely on sienna/forest color alone for links or tags, underline or label them; keep focus visible.",
+    elevation: "Stay almost flat: use hairline rules and whitespace for structure; reserve a soft shadow (0 6px 20px rgba(32,28,23,0.08)) only for related-content cards and image lightboxes.",
+    dosAndDonts: [
+      "Do hold a 66-72ch measure and generous line-height for long-form readability.",
+      "Do use serif for narrative and sans for UI labels and forms.",
+      "Don't widen body text to full-bleed or crowd paragraphs together.",
+      "Don't signal links by color alone on warm surfaces — underline or label them.",
+    ],
+    components: [
+      "Article hero: serif headline, byline, date, lead image with caption.",
+      "Reading body: 66-72ch measure, pull quotes, inline media with captions.",
+      "Listing card: media, title, short excerpt, tag row, price or read-time.",
+      "Tag row: forest-accent labels with readable text and clear focus.",
+    ],
+  },
 };
 
 function availableStyleNames() {
@@ -141,10 +261,50 @@ function getStylePreset(style) {
   return STYLE_PRESETS[resolveStyleName(style)];
 }
 
+// Extract the 6-digit hex swatches a preset declares, in author order, so a
+// visual gallery can render a color row without re-parsing the prose. Captures
+// every hex token across all `colors[]` lines (a single line may declare more
+// than one role, e.g. success/warning/danger), skips rgba()/named values, and
+// de-duplicates while preserving first-seen order.
+function paletteSwatches(preset) {
+  const swatches = [];
+  const seen = new Set();
+  for (const line of preset.colors || []) {
+    const matches = line.match(/#[0-9a-fA-F]{6}\b/g) || [];
+    for (const hex of matches) {
+      const value = hex.toUpperCase();
+      if (!seen.has(value)) {
+        seen.add(value);
+        swatches.push(value);
+      }
+    }
+  }
+  return swatches;
+}
+
+// Read-only serialization of the preset catalog for the (future) Style Gallery
+// endpoint. Carries only display-safe fields — no file paths, no secrets.
+function styleCatalog() {
+  return availableStyleNames().map((name) => {
+    const preset = STYLE_PRESETS[name];
+    return {
+      name,
+      label: preset.label,
+      category: preset.category || "General",
+      summary: preset.summary,
+      swatches: paletteSwatches(preset),
+      typographySample: (preset.typography && preset.typography[0]) || "",
+      component: (preset.components && preset.components[0]) || "",
+    };
+  });
+}
+
 module.exports = {
   DEFAULT_STYLE,
   STYLE_PRESETS,
   availableStyleNames,
   getStylePreset,
   resolveStyleName,
+  paletteSwatches,
+  styleCatalog,
 };