@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/blocks/button.liquid

@@ -0,0 +1,477 @@
+{% doc %}
+  Baseline Button theme block: a thin wrapper around the `button` snippet (spec: components/button/spec.md).
+  Colors come from the enclosing section's color scheme (.color-<id>); the block has no scheme control.
+  Code that needs a button (product form, cart) renders the snippet directly.
+
+  @example
+  {% content_for 'block', type: 'button', id: 'button' %}
+{% enddoc %}
+
+{% render 'button',
+  label: block.settings.label,
+  href: block.settings.link,
+  variant: block.settings.variant,
+  size: block.settings.size,
+  icon: block.settings.icon,
+  icon_position: block.settings.icon_position,
+  icon_only: block.settings.icon_only,
+  attrs: block.shopify_attributes
+%}
+
+{% schema %}
+{
+  "name": "t:baseline.button.name",
+  "tag": null,
+  "settings": [
+    {
+      "type": "text",
+      "id": "label",
+      "label": "t:baseline.button.label",
+      "default": "Button"
+    },
+    {
+      "type": "url",
+      "id": "link",
+      "label": "t:baseline.button.link"
+    },
+    {
+      "type": "select",
+      "id": "variant",
+      "label": "t:baseline.button.variant",
+      "default": "default",
+      "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": "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": "icon",
+      "label": "t:baseline.button.icon",
+      "default": "",
+      "options": [
+        {
+          "value": "",
+          "label": "t:baseline.icon.none"
+        },
+        {
+          "value": "arrow-down",
+          "label": "Arrow down"
+        },
+        {
+          "value": "arrow-left",
+          "label": "Arrow left"
+        },
+        {
+          "value": "arrow-right",
+          "label": "Arrow right"
+        },
+        {
+          "value": "arrow-up",
+          "label": "Arrow up"
+        },
+        {
+          "value": "arrow-up-down",
+          "label": "Arrow up down"
+        },
+        {
+          "value": "calendar",
+          "label": "Calendar"
+        },
+        {
+          "value": "cart",
+          "label": "Cart"
+        },
+        {
+          "value": "check",
+          "label": "Check"
+        },
+        {
+          "value": "chevron-down",
+          "label": "Chevron down"
+        },
+        {
+          "value": "chevron-left",
+          "label": "Chevron left"
+        },
+        {
+          "value": "chevron-right",
+          "label": "Chevron right"
+        },
+        {
+          "value": "chevron-up",
+          "label": "Chevron up"
+        },
+        {
+          "value": "chevrons-left",
+          "label": "Chevrons left"
+        },
+        {
+          "value": "chevrons-right",
+          "label": "Chevrons right"
+        },
+        {
+          "value": "chevrons-up-down",
+          "label": "Chevrons up down"
+        },
+        {
+          "value": "circle",
+          "label": "Circle"
+        },
+        {
+          "value": "clock",
+          "label": "Clock"
+        },
+        {
+          "value": "close",
+          "label": "Close"
+        },
+        {
+          "value": "close-circle",
+          "label": "Close circle"
+        },
+        {
+          "value": "copy",
+          "label": "Copy"
+        },
+        {
+          "value": "download",
+          "label": "Download"
+        },
+        {
+          "value": "edit",
+          "label": "Edit"
+        },
+        {
+          "value": "error",
+          "label": "Error"
+        },
+        {
+          "value": "external-link",
+          "label": "External link"
+        },
+        {
+          "value": "eye",
+          "label": "Eye"
+        },
+        {
+          "value": "eye-off",
+          "label": "Eye off"
+        },
+        {
+          "value": "file",
+          "label": "File"
+        },
+        {
+          "value": "filter",
+          "label": "Filter"
+        },
+        {
+          "value": "grip-vertical",
+          "label": "Grip vertical"
+        },
+        {
+          "value": "home",
+          "label": "Home"
+        },
+        {
+          "value": "image",
+          "label": "Image"
+        },
+        {
+          "value": "info",
+          "label": "Info"
+        },
+        {
+          "value": "link",
+          "label": "Link"
+        },
+        {
+          "value": "loader",
+          "label": "Loader"
+        },
+        {
+          "value": "lock",
+          "label": "Lock"
+        },
+        {
+          "value": "mail",
+          "label": "Mail"
+        },
+        {
+          "value": "menu",
+          "label": "Menu"
+        },
+        {
+          "value": "minus",
+          "label": "Minus"
+        },
+        {
+          "value": "more-horizontal",
+          "label": "More horizontal"
+        },
+        {
+          "value": "more-vertical",
+          "label": "More vertical"
+        },
+        {
+          "value": "pause",
+          "label": "Pause"
+        },
+        {
+          "value": "phone",
+          "label": "Phone"
+        },
+        {
+          "value": "play",
+          "label": "Play"
+        },
+        {
+          "value": "plus",
+          "label": "Plus"
+        },
+        {
+          "value": "refresh",
+          "label": "Refresh"
+        },
+        {
+          "value": "search",
+          "label": "Search"
+        },
+        {
+          "value": "settings",
+          "label": "Settings"
+        },
+        {
+          "value": "share",
+          "label": "Share"
+        },
+        {
+          "value": "sidebar",
+          "label": "Sidebar"
+        },
+        {
+          "value": "star",
+          "label": "Star"
+        },
+        {
+          "value": "success",
+          "label": "Success"
+        },
+        {
+          "value": "trash",
+          "label": "Trash"
+        },
+        {
+          "value": "upload",
+          "label": "Upload"
+        },
+        {
+          "value": "user",
+          "label": "User"
+        },
+        {
+          "value": "warning",
+          "label": "Warning"
+        },
+        {
+          "value": "brand-amazon",
+          "label": "Brand: Amazon"
+        },
+        {
+          "value": "brand-americanexpress",
+          "label": "Brand: Americanexpress"
+        },
+        {
+          "value": "brand-apple",
+          "label": "Brand: Apple"
+        },
+        {
+          "value": "brand-applepay",
+          "label": "Brand: Applepay"
+        },
+        {
+          "value": "brand-bluesky",
+          "label": "Brand: Bluesky"
+        },
+        {
+          "value": "brand-discord",
+          "label": "Brand: Discord"
+        },
+        {
+          "value": "brand-facebook",
+          "label": "Brand: Facebook"
+        },
+        {
+          "value": "brand-github",
+          "label": "Brand: Github"
+        },
+        {
+          "value": "brand-google",
+          "label": "Brand: Google"
+        },
+        {
+          "value": "brand-googlepay",
+          "label": "Brand: Googlepay"
+        },
+        {
+          "value": "brand-instagram",
+          "label": "Brand: Instagram"
+        },
+        {
+          "value": "brand-linkedin",
+          "label": "Brand: Linkedin"
+        },
+        {
+          "value": "brand-mastercard",
+          "label": "Brand: Mastercard"
+        },
+        {
+          "value": "brand-paypal",
+          "label": "Brand: Paypal"
+        },
+        {
+          "value": "brand-pinterest",
+          "label": "Brand: Pinterest"
+        },
+        {
+          "value": "brand-reddit",
+          "label": "Brand: Reddit"
+        },
+        {
+          "value": "brand-shopify",
+          "label": "Brand: Shopify"
+        },
+        {
+          "value": "brand-snapchat",
+          "label": "Brand: Snapchat"
+        },
+        {
+          "value": "brand-spotify",
+          "label": "Brand: Spotify"
+        },
+        {
+          "value": "brand-telegram",
+          "label": "Brand: Telegram"
+        },
+        {
+          "value": "brand-threads",
+          "label": "Brand: Threads"
+        },
+        {
+          "value": "brand-tiktok",
+          "label": "Brand: Tiktok"
+        },
+        {
+          "value": "brand-tripadvisor",
+          "label": "Brand: Tripadvisor"
+        },
+        {
+          "value": "brand-vimeo",
+          "label": "Brand: Vimeo"
+        },
+        {
+          "value": "brand-visa",
+          "label": "Brand: Visa"
+        },
+        {
+          "value": "brand-whatsapp",
+          "label": "Brand: Whatsapp"
+        },
+        {
+          "value": "brand-wordpress",
+          "label": "Brand: Wordpress"
+        },
+        {
+          "value": "brand-x",
+          "label": "Brand: X"
+        },
+        {
+          "value": "brand-yelp",
+          "label": "Brand: Yelp"
+        },
+        {
+          "value": "brand-youtube",
+          "label": "Brand: Youtube"
+        }
+      ]
+    },
+    {
+      "type": "select",
+      "id": "icon_position",
+      "label": "t:baseline.button.icon_position",
+      "default": "start",
+      "options": [
+        {
+          "value": "start",
+          "label": "t:baseline.position.start"
+        },
+        {
+          "value": "end",
+          "label": "t:baseline.position.end"
+        }
+      ],
+      "visible_if": "{{ block.settings.icon != blank }}"
+    },
+    {
+      "type": "checkbox",
+      "id": "icon_only",
+      "label": "t:baseline.button.icon_only",
+      "info": "t:baseline.button.icon_only_info",
+      "default": false,
+      "visible_if": "{{ block.settings.icon != blank }}"
+    }
+  ],
+  "presets": [
+    {
+      "name": "t:baseline.button.name"
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/blocks/card.liquid

@@ -0,0 +1,73 @@
+{% doc %}
+  Baseline Card theme block (spec: components/card/spec.md): a wrapper around the `card` snippet. Media, title,
+  description and size are settings; nested theme blocks are the content, each one a padded region, and a nested
+  Card footer block becomes the footer (bordered, muted, its own buttons). A nested Media block goes full bleed when
+  nothing renders before it (no image, title or description set). Colours come from the section's scheme.
+
+  @example
+  {% content_for 'block', type: 'card', id: 'card' %}
+{% enddoc %}
+
+{%- capture card_blocks -%}{% content_for 'blocks' %}{%- endcapture -%}
+{% render 'card',
+  image: block.settings.image,
+  image_alt: block.settings.image.alt,
+  title: block.settings.title,
+  title_tag: block.settings.title_tag,
+  description: block.settings.description,
+  bordered: block.settings.bordered,
+  size: block.settings.size,
+  blocks: card_blocks,
+  attrs: block.shopify_attributes
+%}
+
+{% schema %}
+{
+  "name": "t:baseline.card.name",
+  "tag": null,
+  "blocks": [{ "type": "@theme" }, { "type": "_card-footer" }],
+  "settings": [
+    { "type": "image_picker", "id": "image", "label": "t:baseline.card.image" },
+    { "type": "text", "id": "title", "label": "t:baseline.card.title", "default": "Card title" },
+    {
+      "type": "select",
+      "id": "title_tag",
+      "label": "t:baseline.card.title_tag",
+      "default": "h3",
+      "options": [
+        { "value": "h2", "label": "H2" },
+        { "value": "h3", "label": "H3" },
+        { "value": "h4", "label": "H4" },
+        { "value": "div", "label": "t:baseline.card.title_tag_none" }
+      ]
+    },
+    { "type": "text", "id": "description", "label": "t:baseline.card.description" },
+    { "type": "checkbox", "id": "bordered", "label": "t:baseline.card.bordered", "default": false },
+    {
+      "type": "select",
+      "id": "size",
+      "label": "t:baseline.button.size",
+      "default": "md",
+      "options": [
+        { "value": "md", "label": "MD" },
+        { "value": "sm", "label": "SM" }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "t:baseline.card.name",
+      "settings": { "title": "Card title", "description": "A short supporting description." },
+      "blocks": {
+        "text": { "type": "text", "settings": { "text": "Card content.", "text_style": "text--normal" } },
+        "footer": {
+          "type": "_card-footer",
+          "blocks": { "button": { "type": "button", "settings": { "label": "Action", "size": "sm" } } },
+          "block_order": ["button"]
+        }
+      },
+      "block_order": ["text", "footer"]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/blocks/carousel.liquid

@@ -0,0 +1,47 @@
+{% doc %}
+  Baseline Carousel theme block (spec: components/carousel/spec.md): the `carousel` snippet whose nested Carousel slide
+  blocks are the slides: product images, testimonials, featured collections. Settings: slides per view, loop,
+  autoplay, Previous / Next, dots.
+
+  @example
+  {% content_for 'block', type: 'carousel', id: 'carousel' %}
+{% enddoc %}
+
+{%- capture carousel_items -%}{% content_for 'blocks' %}{%- endcapture -%}
+{% render 'carousel',
+  items: carousel_items,
+  aria_label: block.settings.aria_label,
+  per_view: block.settings.per_view,
+  loop: block.settings.loop,
+  autoplay: block.settings.autoplay,
+  controls: block.settings.controls,
+  dots: block.settings.dots,
+  attrs: block.shopify_attributes
+%}
+
+{% schema %}
+{
+  "name": "t:baseline.carousel.name",
+  "tag": null,
+  "blocks": [{ "type": "_carousel-slide" }],
+  "settings": [
+    { "type": "text", "id": "aria_label", "label": "t:baseline.carousel.aria_label", "default": "Featured" },
+    { "type": "select", "id": "per_view", "label": "t:baseline.carousel.per_view", "options": [{ "value": "1", "label": "1" }, { "value": "2", "label": "2" }, { "value": "3", "label": "3" }], "default": "1" },
+    { "type": "checkbox", "id": "loop", "label": "t:baseline.carousel.loop", "default": false },
+    { "type": "range", "id": "autoplay", "label": "t:baseline.carousel.autoplay", "min": 0, "max": 15, "step": 1, "unit": "s", "default": 0 },
+    { "type": "checkbox", "id": "controls", "label": "t:baseline.carousel.controls", "default": true },
+    { "type": "checkbox", "id": "dots", "label": "t:baseline.carousel.dots", "default": true }
+  ],
+  "presets": [
+    {
+      "name": "t:baseline.carousel.name",
+      "blocks": {
+        "one": { "type": "_carousel-slide", "blocks": { "text": { "type": "text", "settings": { "text": "Slide one", "text_style": "text--normal" } } }, "block_order": ["text"] },
+        "two": { "type": "_carousel-slide", "blocks": { "text": { "type": "text", "settings": { "text": "Slide two", "text_style": "text--normal" } } }, "block_order": ["text"] },
+        "three": { "type": "_carousel-slide", "blocks": { "text": { "type": "text", "settings": { "text": "Slide three", "text_style": "text--normal" } } }, "block_order": ["text"] }
+      },
+      "block_order": ["one", "two", "three"]
+    }
+  ]
+}
+{% endschema %}

package/templates/shopify/blocks/columns.liquid

@@ -0,0 +1,73 @@
+{% doc %}
+  Baseline Columns theme block (spec: components/columns/spec.md): a grid of 1-5 tracks whose Column blocks each span
+  one or more tracks (1:2 = 3 columns, spans 1 and 2). It collapses as Figma's Device variants: one column below md
+  (Mobile); the tracks from md (Tablet), except four, which show as two until xl; a span is capped at the tracks shown
+  and cells that do not fill a row wrap. Invert order puts the last column first once stacked.
+
+  @example
+  {% content_for 'block', type: 'columns', id: 'columns' %}
+{% enddoc %}
+<div
+  class="bl-columns"
+  data-slot="columns"
+  data-columns="{{ block.settings.columns }}"
+  data-gap="{{ block.settings.gap }}"
+  {% if block.settings.invert_order %}data-invert-order{% endif %}
+  {{ block.shopify_attributes }}
+>
+  {% content_for 'blocks' %}
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/columns/columns.tsx (md = 48rem, xl = 80rem). --cols is the number of tracks shown at
+     each breakpoint; a column's span (its --span) is capped at it. */
+  .bl-columns {
+    --cols: 1;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .bl-columns > * { min-width: 0; }
+  .bl-columns[data-gap='none'] { gap: 0; }
+  .bl-columns[data-gap='xs'] { gap: var(--bl-spacing-responsive-xs); }
+  .bl-columns[data-gap='sm'] { gap: var(--bl-spacing-responsive-sm); }
+  .bl-columns[data-gap='md'] { gap: var(--bl-spacing-responsive-md); }
+  .bl-columns[data-gap='lg'] { gap: var(--bl-spacing-responsive-lg); }
+  .bl-columns[data-gap='xl'] { gap: var(--bl-spacing-responsive-xl); }
+  .bl-columns[data-gap='2xl'] { gap: var(--bl-spacing-responsive-2xl); }
+  @media (max-width: 47.999rem) {
+    .bl-columns[data-invert-order] > :last-child { order: -1; }
+  }
+  @media (min-width: 48rem) {
+    .bl-columns[data-columns='2'], .bl-columns[data-columns='4'] { --cols: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .bl-columns[data-columns='3'] { --cols: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .bl-columns[data-columns='5'] { --cols: 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
+    .bl-columns > .bl-column { grid-column: span min(var(--span, 1), var(--cols)); }
+  }
+  @media (min-width: 80rem) {
+    .bl-columns[data-columns='4'] { --cols: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  }
+{% endstylesheet %}
+
+{% schema %}
+{
+  "name": "t:baseline.columns.name",
+  "tag": null,
+  "blocks": [{ "type": "_column" }],
+  "settings": [
+    { "type": "range", "id": "columns", "label": "t:baseline.columns.columns", "info": "t:baseline.columns.columns_info", "min": 1, "max": 5, "step": 1, "default": 2 },
+    { "type": "checkbox", "id": "invert_order", "label": "t:baseline.columns.invert_order", "info": "t:baseline.columns.invert_order_info", "default": false },
+    { "type": "select", "id": "gap", "label": "t:baseline.columns.gap", "options": [{"value":"none","label":"None"},{"value":"xs","label":"XS"},{"value":"sm","label":"SM"},{"value":"md","label":"MD"},{"value":"lg","label":"LG"},{"value":"xl","label":"XL"},{"value":"2xl","label":"2XL"}], "default": "sm" }
+  ],
+  "presets": [
+    {
+      "name": "t:baseline.columns.name",
+      "settings": { "columns": 2 },
+      "blocks": {
+        "one": { "type": "_column", "blocks": { "text": { "type": "text", "settings": { "text": "Column one", "text_style": "text--normal" } } }, "block_order": ["text"] },
+        "two": { "type": "_column", "blocks": { "text": { "type": "text", "settings": { "text": "Column two", "text_style": "text--normal" } } }, "block_order": ["text"] }
+      },
+      "block_order": ["one", "two"]
+    }
+  ]
+}
+{% endschema %}