@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/blocks/section-heading.liquid

@@ -0,0 +1,68 @@
+{% doc %}
+  Baseline section heading (spec: components/sections/spec.md): the heading group the starter sections open with, an
+  eyebrow over a designed headline (8px apart), a lead 20px below and nested Button blocks 20px below that, as Figma
+  draws them. The headline is a heading field on a content-ramp text style (ADR-0014), on the element its level needs.
+
+  @example
+  {% content_for 'block', type: 'section-heading', id: 'heading' %}
+{% enddoc %}
+<div class="bl-section-heading" data-align="{{ block.settings.alignment }}" {{ block.shopify_attributes }}>
+  {%- if block.settings.eyebrow != blank or block.settings.heading != blank -%}
+    <hgroup class="bl-section-heading__group">
+      {%- if block.settings.eyebrow != blank -%}
+        <p class="bl-section-heading__eyebrow">{{ block.settings.eyebrow }}</p>
+      {%- endif -%}
+      {%- if block.settings.heading != blank -%}
+        <{{ block.settings.tag }} class="bl-section-heading__title {{ block.settings.style }}">{{ block.settings.heading }}</{{ block.settings.tag }}>
+      {%- endif -%}
+    </hgroup>
+  {%- endif -%}
+  {%- if block.settings.lead != blank -%}
+    <div class="bl-section-heading__lead">{{ block.settings.lead }}</div>
+  {%- endif -%}
+  {%- capture actions -%}{% content_for 'blocks' %}{%- endcapture -%}
+  {%- if actions != blank -%}
+    <div class="bl-section-heading__actions">{{ actions }}</div>
+  {%- endif -%}
+</div>
+
+{% stylesheet %}
+  /* Mirrors the heading group of registry/src/blocks/hero-* (spacing/2 inside the group, spacing/5 to the lead and actions) */
+  .bl-section-heading { display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
+  .bl-section-heading[data-align='center'] { align-items: center; text-align: center; }
+  .bl-section-heading__group { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
+  .bl-section-heading__eyebrow { margin: 0; color: var(--primary); font-size: var(--bl-text-sm); line-height: var(--bl-text-sm--line-height); }
+  .bl-section-heading__title { margin: 0; text-wrap: balance; }
+  .bl-section-heading__lead { margin-top: 1.25rem; color: var(--muted-foreground); line-height: 1.75; text-wrap: pretty; }
+  .bl-section-heading__lead > * { margin: 0; }
+  .bl-section-heading__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
+  .bl-section-heading[data-align='center'] .bl-section-heading__actions { justify-content: center; }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:baseline.section_heading.name",
+  "tag": null,
+  "blocks": [{ "type": "button" }],
+  "settings": [
+    { "type": "text", "id": "eyebrow", "label": "t:baseline.section_heading.eyebrow" },
+    { "type": "inline_richtext", "id": "heading", "label": "t:baseline.section_heading.heading", "default": "Section heading" },
+    {
+      "type": "select", "id": "style", "label": "t:baseline.heading.style",
+      "options": [
+        { "value": "display-lg", "label": "Display LG" }, { "value": "display-md", "label": "Display MD" }, { "value": "display-sm", "label": "Display SM" },
+        { "value": "heading-xl", "label": "Heading XL" }, { "value": "heading-lg", "label": "Heading LG" }, { "value": "heading-md", "label": "Heading MD" }, { "value": "heading-sm", "label": "Heading SM" }
+      ],
+      "default": "heading-xl"
+    },
+    {
+      "type": "select", "id": "tag", "label": "t:baseline.heading.tag", "info": "t:baseline.heading.tag_info",
+      "options": [{ "value": "h1", "label": "h1" }, { "value": "h2", "label": "h2" }, { "value": "h3", "label": "h3" }, { "value": "p", "label": "p" }],
+      "default": "h2"
+    },
+    { "type": "richtext", "id": "lead", "label": "t:baseline.section_heading.lead" },
+    { "type": "select", "id": "alignment", "label": "t:labels.alignment", "options": [{ "value": "start", "label": "t:baseline.section_heading.start" }, { "value": "center", "label": "t:baseline.section_heading.center" }], "default": "start" }
+  ],
+  "presets": [{ "name": "t:baseline.section_heading.name" }]
+}
+{% endschema %}

package/templates/shopify/blocks/sheet.liquid

@@ -0,0 +1,90 @@
+{% doc %}
+  Baseline Sheet theme block (spec: components/sheet/spec.md): a wrapper around the `sheet` snippet. The trigger, side,
+  title and description are settings; nested theme blocks are the body, and a nested Sheet footer block (placed last)
+  becomes the footer at the bottom. Opens with no JavaScript (a native <dialog> and invoker commands).
+
+  @example
+  {% content_for 'block', type: 'sheet', id: 'sheet' %}
+{% enddoc %}
+
+{%- capture sheet_blocks -%}{% content_for 'blocks' %}{%- endcapture -%}
+{% render 'sheet',
+  id: block.id,
+  trigger: block.settings.trigger_label,
+  trigger_variant: block.settings.trigger_variant,
+  trigger_size: block.settings.trigger_size,
+  side: block.settings.side,
+  title: block.settings.title,
+  description: block.settings.description,
+  hide_close: block.settings.hide_close,
+  blocks: sheet_blocks,
+  attrs: block.shopify_attributes
+%}
+
+{% schema %}
+{
+  "name": "t:baseline.sheet.name",
+  "tag": null,
+  "blocks": [{ "type": "@theme" }, { "type": "_sheet-footer" }],
+  "settings": [
+    { "type": "text", "id": "trigger_label", "label": "t:baseline.dialog.trigger_label", "default": "Open" },
+    {
+      "type": "select",
+      "id": "trigger_variant",
+      "label": "t:baseline.button.variant",
+      "default": "outline",
+      "options": [
+        { "value": "default", "label": "t:baseline.variant.default" },
+        { "value": "secondary", "label": "t:baseline.variant.secondary" },
+        { "value": "outline", "label": "t:baseline.variant.outline" },
+        { "value": "ghost", "label": "t:baseline.variant.ghost" },
+        { "value": "link", "label": "t:baseline.variant.link" },
+        { "value": "destructive", "label": "t:baseline.variant.destructive" }
+      ]
+    },
+    {
+      "type": "select",
+      "id": "trigger_size",
+      "label": "t:baseline.button.size",
+      "default": "md",
+      "options": [
+        { "value": "xs", "label": "XS" },
+        { "value": "sm", "label": "SM" },
+        { "value": "md", "label": "MD" },
+        { "value": "lg", "label": "LG" }
+      ]
+    },
+    {
+      "type": "select",
+      "id": "side",
+      "label": "t:baseline.sheet.side",
+      "default": "right",
+      "options": [
+        { "value": "right", "label": "t:baseline.sheet.side_right" },
+        { "value": "left", "label": "t:baseline.sheet.side_left" },
+        { "value": "top", "label": "t:baseline.sheet.side_top" },
+        { "value": "bottom", "label": "t:baseline.sheet.side_bottom" }
+      ]
+    },
+    { "type": "text", "id": "title", "label": "t:baseline.dialog.title", "default": "Sheet title" },
+    { "type": "text", "id": "description", "label": "t:baseline.dialog.description" },
+    { "type": "checkbox", "id": "hide_close", "label": "t:baseline.dialog.hide_close", "default": false }
+  ],
+  "presets": [
+    {
+      "name": "t:baseline.sheet.name",
+      "settings": { "title": "Sheet title", "description": "A short supporting description." },
+      "blocks": {
+        "text": { "type": "text", "settings": { "text": "Sheet content.", "text_style": "text--normal" } },
+        "footer": {
+          "type": "_sheet-footer",
+          "settings": { "close_label": "Close" },
+          "blocks": { "button": { "type": "button", "settings": { "label": "Save changes" } } },
+          "block_order": ["button"]
+        }
+      },
+      "block_order": ["text", "footer"]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/blocks/tabs.liquid

@@ -0,0 +1,58 @@
+{% doc %}
+  Baseline Tabs theme block (spec: components/tabs/spec.md): a wrapper around the `tabs` snippet whose nested Tab blocks
+  are the tabs: product details / shipping / reviews beside the buy area, a size guide per region. The look is the
+  project's (one per site, ADR-0031), not a setting. Each Tab renders its button and its panel; the snippet sorts them
+  into the tablist and the panels and selects the first.
+
+  @example
+  {% content_for 'block', type: 'tabs', id: 'tabs' %}
+{% enddoc %}
+
+{%- capture tabs_items -%}{% content_for 'blocks' %}{%- endcapture -%}
+{% render 'tabs',
+  items: tabs_items,
+  orientation: block.settings.orientation,
+  aria_label: block.settings.aria_label,
+  attrs: block.shopify_attributes
+%}
+
+{% schema %}
+{
+  "name": "t:baseline.tabs.name",
+  "tag": null,
+  "blocks": [{ "type": "_tab" }],
+  "settings": [
+    { "type": "text", "id": "aria_label", "label": "t:baseline.tabs.aria_label", "default": "Product information" },
+    {
+      "type": "select",
+      "id": "orientation",
+      "label": "t:baseline.tabs.orientation",
+      "options": [
+        { "value": "horizontal", "label": "t:baseline.tabs.horizontal" },
+        { "value": "vertical", "label": "t:baseline.tabs.vertical" }
+      ],
+      "default": "horizontal"
+    }
+  ],
+  "presets": [
+    {
+      "name": "t:baseline.tabs.name",
+      "blocks": {
+        "details": {
+          "type": "_tab",
+          "settings": { "label": "Details" },
+          "blocks": { "text": { "type": "text", "settings": { "text": "Organic cotton, garment dyed. Machine wash cold.", "text_style": "text--normal" } } },
+          "block_order": ["text"]
+        },
+        "shipping": {
+          "type": "_tab",
+          "settings": { "label": "Shipping" },
+          "blocks": { "text": { "type": "text", "settings": { "text": "Free standard shipping on orders over $50. Express in 2-3 days.", "text_style": "text--normal" } } },
+          "block_order": ["text"]
+        }
+      },
+      "block_order": ["details", "shipping"]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/blocks/text.liquid

@@ -0,0 +1,59 @@
+{% doc %}
+  Renders a text block.
+
+  @example
+  {% content_for 'block', type: 'text', id: 'text' %}
+{% enddoc %}
+
+<div
+  class="text {{ block.settings.text_style }}"
+  style="--text-align: {{ block.settings.alignment }}"
+  {{ block.shopify_attributes }}
+>
+  {{ block.settings.text }}
+</div>
+
+{% stylesheet %}
+  .text {
+    text-align: var(--text-align);
+  }
+  .text--title {
+    font-size: 2rem;
+    font-weight: 700;
+  }
+  .text--subtitle {
+    font-size: 1.5rem;
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:general.text",
+  "settings": [
+    {
+      "type": "text",
+      "id": "text",
+      "label": "t:labels.text",
+      "default": "Text"
+    },
+    {
+      "type": "select",
+      "id": "text_style",
+      "label": "t:labels.text_style",
+      "options": [
+        { "value": "text--title", "label": "t:options.text_style.title" },
+        { "value": "text--subtitle", "label": "t:options.text_style.subtitle" },
+        { "value": "text--normal", "label": "t:options.text_style.normal" }
+      ],
+      "default": "text--title"
+    },
+    {
+      "type": "text_alignment",
+      "id": "alignment",
+      "label": "t:labels.alignment",
+      "default": "left"
+    }
+  ],
+  "presets": [{ "name": "t:general.text" }]
+}
+{% endschema %}

package/templates/shopify/build-js.mjs

@@ -0,0 +1,22 @@
+// Bundles the theme's scripts that import npm packages (spec: components/carousel/spec.md). Run by `npm run build`.
+// src/carousel.js is a copy of platforms/html/src/carousel.js (scripts/gen-html.mjs refreshes it in the monorepo); in a
+// store scaffolded from this theme, update Embla with `npm install embla-carousel@<v> embla-carousel-autoplay@<v>` and
+// run `npm run build` again: assets/carousel.js's banner names the version it was built with.
+import { build } from "esbuild";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const v = (p) => JSON.parse(readFileSync(join(here, "node_modules", p, "package.json"), "utf8")).version;
+await build({
+  entryPoints: [join(here, "src", "carousel.js")],
+  bundle: true,
+  minify: true,
+  format: "iife",
+  target: "es2020",
+  outfile: join(here, "assets", "carousel.js"),
+  banner: { js: `/* Baseline carousel (src/carousel.js) bundled with embla-carousel ${v("embla-carousel")} and embla-carousel-autoplay ${v("embla-carousel-autoplay")}. Generated: do not edit. */` },
+  logLevel: "warning",
+});
+console.log("build-js: assets/carousel.js");

package/templates/shopify/config/settings_data.json

@@ -0,0 +1,182 @@
+{
+  "current": {
+    "color_schemes": {
+      "scheme-1": {
+        "settings": {
+          "background": "#ffffff",
+          "foreground": "#0a0a0a",
+          "card": "#ffffff",
+          "card_foreground": "#0a0a0a",
+          "popover": "#ffffff",
+          "popover_foreground": "#0a0a0a",
+          "primary": "#4f39f6",
+          "primary_foreground": "#ffffff",
+          "secondary": "#f5f5f5",
+          "secondary_foreground": "#171717",
+          "muted": "#f5f5f5",
+          "muted_foreground": "#737373",
+          "accent": "#f5f5f5",
+          "accent_foreground": "#171717",
+          "destructive": "#e7000b",
+          "border": "#e5e5e5",
+          "input": "#e5e5e5",
+          "ring": "#4f39f6",
+          "chart_1": "#f54900",
+          "chart_2": "#009689",
+          "chart_3": "#104e64",
+          "chart_4": "#ffb900",
+          "chart_5": "#fe9a00",
+          "sidebar": "#fafafa",
+          "sidebar_foreground": "#0a0a0a",
+          "sidebar_primary": "#4f39f6",
+          "sidebar_primary_foreground": "#ffffff",
+          "sidebar_accent": "#f5f5f5",
+          "sidebar_accent_foreground": "#171717",
+          "sidebar_border": "#e5e5e5",
+          "sidebar_ring": "#4f39f6"
+        }
+      },
+      "scheme-2": {
+        "settings": {
+          "background": "#0a0a0a",
+          "foreground": "#fafafa",
+          "card": "#171717",
+          "card_foreground": "#fafafa",
+          "popover": "#171717",
+          "popover_foreground": "#fafafa",
+          "primary": "#615fff",
+          "primary_foreground": "#ffffff",
+          "secondary": "#262626",
+          "secondary_foreground": "#fafafa",
+          "muted": "#262626",
+          "muted_foreground": "#a1a1a1",
+          "accent": "#262626",
+          "accent_foreground": "#fafafa",
+          "destructive": "#ff6467",
+          "border": "#262626",
+          "input": "#262626",
+          "ring": "#615fff",
+          "chart_1": "#1447e6",
+          "chart_2": "#00bc7d",
+          "chart_3": "#fe9a00",
+          "chart_4": "#ad46ff",
+          "chart_5": "#ff2056",
+          "sidebar": "#171717",
+          "sidebar_foreground": "#fafafa",
+          "sidebar_primary": "#615fff",
+          "sidebar_primary_foreground": "#ffffff",
+          "sidebar_accent": "#262626",
+          "sidebar_accent_foreground": "#fafafa",
+          "sidebar_border": "#262626",
+          "sidebar_ring": "#615fff"
+        }
+      },
+      "error": {
+        "settings": {
+          "background": "#fef2f2",
+          "foreground": "#82181a",
+          "card": "#ffe2e2",
+          "card_foreground": "#82181a",
+          "popover": "#ffe2e2",
+          "popover_foreground": "#82181a",
+          "primary": "#c10007",
+          "primary_foreground": "#ffffff",
+          "secondary": "#ffe2e2",
+          "secondary_foreground": "#82181a",
+          "muted": "#ffc9c9",
+          "muted_foreground": "#e7000b",
+          "accent": "#ffc9c9",
+          "accent_foreground": "#82181a",
+          "destructive": "#c10007",
+          "border": "#ffc9c9",
+          "input": "#ffc9c9",
+          "ring": "#4f39f6",
+          "chart_1": "#2b7fff",
+          "chart_2": "#00bc7d",
+          "chart_3": "#fe9a00",
+          "chart_4": "#ff2056",
+          "chart_5": "#8e51ff",
+          "sidebar": "#ffe2e2",
+          "sidebar_foreground": "#82181a",
+          "sidebar_primary": "#c10007",
+          "sidebar_primary_foreground": "#ffffff",
+          "sidebar_accent": "#ffc9c9",
+          "sidebar_accent_foreground": "#82181a",
+          "sidebar_border": "#ffc9c9",
+          "sidebar_ring": "#4f39f6"
+        }
+      },
+      "success": {
+        "settings": {
+          "background": "#f0fdf4",
+          "foreground": "#0d542b",
+          "card": "#dcfce7",
+          "card_foreground": "#0d542b",
+          "popover": "#dcfce7",
+          "popover_foreground": "#0d542b",
+          "primary": "#008236",
+          "primary_foreground": "#ffffff",
+          "secondary": "#dcfce7",
+          "secondary_foreground": "#0d542b",
+          "muted": "#b9f8cf",
+          "muted_foreground": "#00a63e",
+          "accent": "#b9f8cf",
+          "accent_foreground": "#0d542b",
+          "destructive": "#c10007",
+          "border": "#b9f8cf",
+          "input": "#b9f8cf",
+          "ring": "#4f39f6",
+          "chart_1": "#2b7fff",
+          "chart_2": "#00bc7d",
+          "chart_3": "#fe9a00",
+          "chart_4": "#ff2056",
+          "chart_5": "#8e51ff",
+          "sidebar": "#dcfce7",
+          "sidebar_foreground": "#0d542b",
+          "sidebar_primary": "#008236",
+          "sidebar_primary_foreground": "#ffffff",
+          "sidebar_accent": "#b9f8cf",
+          "sidebar_accent_foreground": "#0d542b",
+          "sidebar_border": "#b9f8cf",
+          "sidebar_ring": "#4f39f6"
+        }
+      },
+      "warning": {
+        "settings": {
+          "background": "#fffbeb",
+          "foreground": "#7b3306",
+          "card": "#fef3c6",
+          "card_foreground": "#7b3306",
+          "popover": "#fef3c6",
+          "popover_foreground": "#7b3306",
+          "primary": "#ffb900",
+          "primary_foreground": "#461901",
+          "secondary": "#fef3c6",
+          "secondary_foreground": "#7b3306",
+          "muted": "#fee685",
+          "muted_foreground": "#e17100",
+          "accent": "#fee685",
+          "accent_foreground": "#7b3306",
+          "destructive": "#c10007",
+          "border": "#fee685",
+          "input": "#fee685",
+          "ring": "#4f39f6",
+          "chart_1": "#2b7fff",
+          "chart_2": "#00bc7d",
+          "chart_3": "#fe9a00",
+          "chart_4": "#ff2056",
+          "chart_5": "#8e51ff",
+          "sidebar": "#fef3c6",
+          "sidebar_foreground": "#7b3306",
+          "sidebar_primary": "#ffb900",
+          "sidebar_primary_foreground": "#461901",
+          "sidebar_accent": "#fee685",
+          "sidebar_accent_foreground": "#7b3306",
+          "sidebar_border": "#fee685",
+          "sidebar_ring": "#4f39f6"
+        }
+      }
+    },
+    "default_color_scheme": "scheme-1"
+  }
+}