rebly-sections 1.6.0 → 1.7.0

package/assets/data/component-library/blog-posts-grid.liquid

@@ -1,35 +1,40 @@
 {%- comment -%} rebly-sections: Blog Posts Grid | Category: content | OS2.0 {%- endcomment -%}
+{%- liquid
+  assign section_id = section.id
+  assign color_mode = section.settings.color_mode | default: 'preset'
+  assign preset = section.settings.style_preset | default: 'light'
+-%}
 
-<section id="section-{{ section.id }}" class="blog-posts-grid">
-  <div class="blog-posts-grid__container">
+<section id="section-{{ section_id }}" class="rebly-blog-posts-grid{% if color_mode == 'theme' %} color-{{ section.settings.color_scheme }}{% else %} rebly-section--{{ preset }}{% endif %}">
+  <div class="rebly-blog-posts-grid__container">
 
     {%- if section.settings.heading != blank -%}
-      <h2 class="blog-posts-grid__heading">{{ section.settings.heading | escape }}</h2>
+      <h2 class="rebly-blog-posts-grid__heading">{{ section.settings.heading | escape }}</h2>
     {%- endif -%}
 
     {%- for block in section.blocks -%}<div {{ block.shopify_attributes }}></div>{%- endfor -%}
     {%- assign blog = blogs[section.settings.blog] -%}
-    <div class="blog-posts-grid__items" style="--cols: {{ section.settings.columns }};">
+    <div class="rebly-blog-posts-grid__items" style="--cols: {{ section.settings.columns }};">
       {%- if blog != blank -%}
         {%- for article in blog.articles limit: section.settings.posts_to_show -%}
-          <article class="blog-posts-grid__card">
+          <article class="rebly-blog-posts-grid__card">
             {%- if article.image != blank -%}
-              <a href="{{ article.url }}" class="blog-posts-grid__card-img-link">
+              <a href="{{ article.url }}" class="rebly-blog-posts-grid__card-img-link">
                 {{- article.image | image_url: width: 600 | image_tag: loading: 'lazy', alt: article.title -}}
               </a>
             {%- endif -%}
-            <div class="blog-posts-grid__card-body">
+            <div class="rebly-blog-posts-grid__card-body">
               {%- if section.settings.show_date -%}
-                <time class="blog-posts-grid__date" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">
+                <time class="rebly-blog-posts-grid__date" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">
                   {{ article.published_at | date: '%B %d, %Y' }}
                 </time>
               {%- endif -%}
-              <h3 class="blog-posts-grid__card-title"><a href="{{ article.url }}">{{ article.title }}</a></h3>
+              <h3 class="rebly-blog-posts-grid__card-title"><a href="{{ article.url }}">{{ article.title }}</a></h3>
               {%- if section.settings.show_author -%}
-                <p class="blog-posts-grid__author">{{ article.author }}</p>
+                <p class="rebly-blog-posts-grid__author">{{ article.author }}</p>
               {%- endif -%}
               {%- if section.settings.show_excerpt and article.excerpt != blank -%}
-                <p class="blog-posts-grid__excerpt">{{ article.excerpt | strip_html | truncate: 120 }}</p>
+                <p class="rebly-blog-posts-grid__excerpt">{{ article.excerpt | strip_html | truncate: 120 }}</p>
               {%- endif -%}
             </div>
           </article>
@@ -43,35 +48,170 @@
 </section>
 
 <style>
-  #section-{{ section.id }} .blog-posts-grid__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
-  #section-{{ section.id }} .blog-posts-grid__heading { font-size: 2rem; text-align: center; margin: 0 0 2rem; color: inherit; }
-  #section-{{ section.id }} .blog-posts-grid__items { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 2rem; }
-  #section-{{ section.id }} .blog-posts-grid__card-img-link img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; display: block; }
-  #section-{{ section.id }} .blog-posts-grid__card-body { padding: 1rem 0; }
-  #section-{{ section.id }} .blog-posts-grid__date { font-size: 0.8rem; opacity: 0.6; display: block; margin-bottom: 0.4rem; color: inherit; }
-  #section-{{ section.id }} .blog-posts-grid__card-title { font-size: 1.1rem; margin: 0 0 0.4rem; color: inherit; }
-  #section-{{ section.id }} .blog-posts-grid__card-title a { text-decoration: none; color: inherit; }
-  #section-{{ section.id }} .blog-posts-grid__author { font-size: 0.85rem; opacity: 0.65; margin: 0 0 0.5rem; color: inherit; }
-  #section-{{ section.id }} .blog-posts-grid__excerpt { font-size: 0.9rem; line-height: 1.5; opacity: 0.8; margin: 0; color: inherit; }
-  @media (max-width: 989px) { #section-{{ section.id }} .blog-posts-grid__items { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 749px) { #section-{{ section.id }} .blog-posts-grid__items { grid-template-columns: 1fr; } }
+  /* Style preset: scoped CSS vars */
+  {%- if color_mode == 'preset' -%}
+    {%- case preset -%}
+      {%- when 'dark' -%}
+        #section-{{ section_id }} { --section-bg: #111827; --section-fg: #f9fafb; --section-accent: #60a5fa; }
+      {%- when 'accent' -%}
+        #section-{{ section_id }} { --section-bg: #2563eb; --section-fg: #ffffff; --section-accent: #93c5fd; }
+      {%- when 'custom' -%}
+        #section-{{ section_id }} { --section-bg: {{ section.settings.bg_color }}; --section-fg: {{ section.settings.text_color }}; --section-accent: {{ section.settings.accent_color }}; }
+      {%- else -%}
+        #section-{{ section_id }} { --section-bg: #ffffff; --section-fg: #111827; --section-accent: #2563eb; }
+    {%- endcase -%}
+    #section-{{ section_id }} { background-color: var(--section-bg); color: var(--section-fg); }
+  {%- endif -%}
+
+  #section-{{ section_id }} .rebly-blog-posts-grid__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
+  #section-{{ section_id }} .rebly-blog-posts-grid__heading { font-size: 2rem; text-align: center; margin: 0 0 2rem; color: var(--section-fg, inherit); }
+  #section-{{ section_id }} .rebly-blog-posts-grid__items { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 2rem; }
+  #section-{{ section_id }} .rebly-blog-posts-grid__card-img-link img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; display: block; }
+  #section-{{ section_id }} .rebly-blog-posts-grid__card-body { padding: 1rem 0; }
+  #section-{{ section_id }} .rebly-blog-posts-grid__date { font-size: 0.8rem; opacity: 0.6; display: block; margin-bottom: 0.4rem; color: var(--section-fg, inherit); }
+  #section-{{ section_id }} .rebly-blog-posts-grid__card-title { font-size: 1.1rem; margin: 0 0 0.4rem; color: var(--section-fg, inherit); }
+  #section-{{ section_id }} .rebly-blog-posts-grid__card-title a { text-decoration: none; color: var(--section-fg, inherit); }
+  #section-{{ section_id }} .rebly-blog-posts-grid__author { font-size: 0.85rem; opacity: 0.65; margin: 0 0 0.5rem; color: var(--section-fg, inherit); }
+  #section-{{ section_id }} .rebly-blog-posts-grid__excerpt { font-size: 0.9rem; line-height: 1.5; opacity: 0.8; margin: 0; color: var(--section-fg, inherit); }
+  @media (max-width: 989px) { #section-{{ section_id }} .rebly-blog-posts-grid__items { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 749px) { #section-{{ section_id }} .rebly-blog-posts-grid__items { grid-template-columns: 1fr; } }
 </style>
 
 {% schema %}
 {
-  "name": "Blog Posts Grid",
+  "name": "Rebly: Blog Posts Grid",
   "tag": "section",
-  "class": "section-blog-posts-grid",
+  "class": "rebly-section",
   "settings": [
-    { "type": "text", "id": "heading", "label": "Heading", "default": "Latest Articles" },
-    { "type": "blog", "id": "blog", "label": "Blog" },
-    { "type": "range", "id": "posts_to_show", "label": "Posts to Show", "min": 2, "max": 9, "step": 1, "default": 3 },
-    { "type": "range", "id": "columns", "label": "Columns", "min": 2, "max": 4, "step": 1, "default": 3 },
-    { "type": "checkbox", "id": "show_date", "label": "Show Date", "default": true },
-    { "type": "checkbox", "id": "show_author", "label": "Show Author", "default": false },
-    { "type": "checkbox", "id": "show_excerpt", "label": "Show Excerpt", "default": true }
+    {
+      "type": "header",
+      "content": "Color Mode"
+    },
+    {
+      "type": "select",
+      "id": "color_mode",
+      "label": "Color mode",
+      "default": "preset",
+      "options": [
+        {
+          "value": "theme",
+          "label": "Theme colors"
+        },
+        {
+          "value": "preset",
+          "label": "Custom preset"
+        }
+      ]
+    },
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "Color scheme",
+      "default": "scheme-1"
+    },
+    {
+      "type": "select",
+      "id": "style_preset",
+      "label": "Style preset",
+      "default": "light",
+      "options": [
+        {
+          "value": "light",
+          "label": "Light"
+        },
+        {
+          "value": "dark",
+          "label": "Dark"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        },
+        {
+          "value": "custom",
+          "label": "Custom"
+        }
+      ]
+    },
+    {
+      "type": "color",
+      "id": "bg_color",
+      "label": "Background color",
+      "default": "#ffffff"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text color",
+      "default": "#111827"
+    },
+    {
+      "type": "color",
+      "id": "accent_color",
+      "label": "Accent color",
+      "default": "#2563eb"
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Heading",
+      "default": "Latest Articles"
+    },
+    {
+      "type": "blog",
+      "id": "blog",
+      "label": "Blog"
+    },
+    {
+      "type": "range",
+      "id": "posts_to_show",
+      "label": "Posts to Show",
+      "min": 2,
+      "max": 9,
+      "step": 1,
+      "default": 3
+    },
+    {
+      "type": "range",
+      "id": "columns",
+      "label": "Columns",
+      "min": 2,
+      "max": 4,
+      "step": 1,
+      "default": 3
+    },
+    {
+      "type": "checkbox",
+      "id": "show_date",
+      "label": "Show Date",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "show_author",
+      "label": "Show Author",
+      "default": false
+    },
+    {
+      "type": "checkbox",
+      "id": "show_excerpt",
+      "label": "Show Excerpt",
+      "default": true
+    }
+  ],
+  "blocks": [
+    {
+      "type": "@app"
+    }
   ],
-  "blocks": [{ "type": "@app" }],
-  "presets": [{ "name": "Blog Posts Grid" }]
+  "presets": [
+    {
+      "name": "Rebly: Blog Posts Grid — Light",
+      "settings": {
+        "color_mode": "preset",
+        "style_preset": "light"
+      }
+    }
+  ]
 }
 {% endschema %}

package/assets/data/component-library/collection-list.liquid

@@ -1,27 +1,32 @@
 {%- comment -%} rebly-sections: Collection List | Category: product | OS2.0 {%- endcomment -%}
+{%- liquid
+  assign section_id = section.id
+  assign color_mode = section.settings.color_mode | default: 'preset'
+  assign preset = section.settings.style_preset | default: 'light'
+-%}
 
-<section id="section-{{ section.id }}" class="collection-list">
-  <div class="collection-list__container">
+<section id="section-{{ section_id }}" class="rebly-collection-list{% if color_mode == 'theme' %} color-{{ section.settings.color_scheme }}{% else %} rebly-section--{{ preset }}{% endif %}">
+  <div class="rebly-collection-list__container">
 
     {%- if section.settings.heading != blank -%}
-      <h2 class="collection-list__heading">{{ section.settings.heading | escape }}</h2>
+      <h2 class="rebly-collection-list__heading">{{ section.settings.heading | escape }}</h2>
     {%- endif -%}
 
-    <div class="collection-list__grid">
+    <div class="rebly-collection-list__grid">
       {%- for block in section.blocks -%}
         {%- if block.type == 'collection' -%}
           {%- assign col = collections[block.settings.collection] -%}
-          <a href="{{ col.url }}" class="collection-list__card" {{ block.shopify_attributes }}>
-            <div class="collection-list__card-image">
+          <a href="{{ col.url }}" class="rebly-collection-list__card" {{ block.shopify_attributes }}>
+            <div class="rebly-collection-list__card-image">
               {%- if col.image != blank -%}
                 {{- col.image | image_url: width: 600 | image_tag: loading: 'lazy', alt: col.title -}}
               {%- else -%}
                 {{ 'collection-1' | placeholder_svg_tag }}
               {%- endif -%}
             </div>
-            <div class="collection-list__card-info">
-              <h3 class="collection-list__card-title">{{ col.title }}</h3>
-              <span class="collection-list__card-count">{{ col.products_count }} products</span>
+            <div class="rebly-collection-list__card-info">
+              <h3 class="rebly-collection-list__card-title">{{ col.title }}</h3>
+              <span class="rebly-collection-list__card-count">{{ col.products_count }} products</span>
             </div>
           </a>
         {%- endif -%}
@@ -32,40 +37,150 @@
 </section>
 
 <style>
-  #section-{{ section.id }} .collection-list__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
-  #section-{{ section.id }} .collection-list__heading { font-size: 2rem; text-align: center; margin: 0 0 2rem; color: inherit; }
-  #section-{{ section.id }} .collection-list__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
-  #section-{{ section.id }} .collection-list__card { text-decoration: none; color: inherit; display: block; border-radius: 6px; overflow: hidden; }
-  #section-{{ section.id }} .collection-list__card-image img,
-  #section-{{ section.id }} .collection-list__card-image svg { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
-  #section-{{ section.id }} .collection-list__card-info { padding: 0.75rem; }
-  #section-{{ section.id }} .collection-list__card-title { font-size: 1.1rem; margin: 0 0 0.25rem; color: inherit; }
-  #section-{{ section.id }} .collection-list__card-count { font-size: 0.85rem; opacity: 0.6; color: inherit; }
-  @media (max-width: 989px) { #section-{{ section.id }} .collection-list__grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 749px) { #section-{{ section.id }} .collection-list__grid { grid-template-columns: repeat(2, 1fr); } }
+  /* Style preset: scoped CSS vars */
+  {%- if color_mode == 'preset' -%}
+    {%- case preset -%}
+      {%- when 'dark' -%}
+        #section-{{ section_id }} { --section-bg: #111827; --section-fg: #f9fafb; --section-accent: #60a5fa; }
+      {%- when 'accent' -%}
+        #section-{{ section_id }} { --section-bg: #2563eb; --section-fg: #ffffff; --section-accent: #93c5fd; }
+      {%- when 'custom' -%}
+        #section-{{ section_id }} { --section-bg: {{ section.settings.bg_color }}; --section-fg: {{ section.settings.text_color }}; --section-accent: {{ section.settings.accent_color }}; }
+      {%- else -%}
+        #section-{{ section_id }} { --section-bg: #ffffff; --section-fg: #111827; --section-accent: #2563eb; }
+    {%- endcase -%}
+    #section-{{ section_id }} { background-color: var(--section-bg); color: var(--section-fg); }
+  {%- endif -%}
+
+  #section-{{ section_id }} .rebly-collection-list__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
+  #section-{{ section_id }} .rebly-collection-list__heading { font-size: 2rem; text-align: center; margin: 0 0 2rem; color: var(--section-fg, inherit); }
+  #section-{{ section_id }} .rebly-collection-list__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
+  #section-{{ section_id }} .rebly-collection-list__card { text-decoration: none; color: var(--section-fg, inherit); display: block; border-radius: 6px; overflow: hidden; }
+  #section-{{ section_id }} .rebly-collection-list__card-image img,
+  #section-{{ section_id }} .rebly-collection-list__card-image svg { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
+  #section-{{ section_id }} .rebly-collection-list__card-info { padding: 0.75rem; }
+  #section-{{ section_id }} .rebly-collection-list__card-title { font-size: 1.1rem; margin: 0 0 0.25rem; color: var(--section-fg, inherit); }
+  #section-{{ section_id }} .rebly-collection-list__card-count { font-size: 0.85rem; opacity: 0.6; color: var(--section-fg, inherit); }
+  @media (max-width: 989px) { #section-{{ section_id }} .rebly-collection-list__grid { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 749px) { #section-{{ section_id }} .rebly-collection-list__grid { grid-template-columns: repeat(2, 1fr); } }
 </style>
 
 {% schema %}
 {
-  "name": "Collection List",
+  "name": "Rebly: Collection List",
   "tag": "section",
-  "class": "section-collection-list",
+  "class": "rebly-section",
   "settings": [
-    { "type": "text", "id": "heading", "label": "Heading", "default": "Shop by Collection" }
+    {
+      "type": "header",
+      "content": "Color Mode"
+    },
+    {
+      "type": "select",
+      "id": "color_mode",
+      "label": "Color mode",
+      "default": "preset",
+      "options": [
+        {
+          "value": "theme",
+          "label": "Theme colors"
+        },
+        {
+          "value": "preset",
+          "label": "Custom preset"
+        }
+      ]
+    },
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "Color scheme",
+      "default": "scheme-1"
+    },
+    {
+      "type": "select",
+      "id": "style_preset",
+      "label": "Style preset",
+      "default": "light",
+      "options": [
+        {
+          "value": "light",
+          "label": "Light"
+        },
+        {
+          "value": "dark",
+          "label": "Dark"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        },
+        {
+          "value": "custom",
+          "label": "Custom"
+        }
+      ]
+    },
+    {
+      "type": "color",
+      "id": "bg_color",
+      "label": "Background color",
+      "default": "#ffffff"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text color",
+      "default": "#111827"
+    },
+    {
+      "type": "color",
+      "id": "accent_color",
+      "label": "Accent color",
+      "default": "#2563eb"
+    },
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Heading",
+      "default": "Shop by Collection"
+    }
   ],
   "blocks": [
     {
       "type": "collection",
       "name": "Collection",
       "settings": [
-        { "type": "collection", "id": "collection", "label": "Collection" }
+        {
+          "type": "collection",
+          "id": "collection",
+          "label": "Collection"
+        }
       ]
     },
-    { "type": "@app" }
+    {
+      "type": "@app"
+    }
   ],
-  "presets": [{
-    "name": "Collection List",
-    "blocks": [{ "type": "collection" }, { "type": "collection" }, { "type": "collection" }]
-  }]
+  "presets": [
+    {
+      "name": "Rebly: Collection List — Light",
+      "settings": {
+        "color_mode": "preset",
+        "style_preset": "light"
+      },
+      "blocks": [
+        {
+          "type": "collection"
+        },
+        {
+          "type": "collection"
+        },
+        {
+          "type": "collection"
+        }
+      ]
+    }
+  ]
 }
 {% endschema %}

package/assets/data/component-library/cta-banner.liquid

@@ -1,17 +1,27 @@
 {%- comment -%} rebly-sections: CTA Banner | Category: conversion | OS2.0 {%- endcomment -%}
+{%- liquid
+  assign section_id = section.id
+  assign color_mode = section.settings.color_mode | default: 'preset'
+  assign preset = section.settings.style_preset | default: 'light'
+  assign heading_font = section.settings.heading_font
+  assign btn_style = section.settings.button_style | default: 'filled'
+-%}
 
-<section id="section-{{ section.id }}" class="cta-banner">
+<section
+  id="section-{{ section_id }}"
+  class="rebly-cta-banner{% if color_mode == 'theme' %} color-{{ section.settings.color_scheme }}{% else %} rebly-section--{{ preset }}{% endif %}"
+>
   {%- for block in section.blocks -%}<div {{ block.shopify_attributes }}></div>{%- endfor -%}
-  <div class="cta-banner__inner" style="--bg: {{ section.settings.background_color }}; --color: {{ section.settings.text_color }};">
-    <div class="cta-banner__content">
+  <div class="rebly-cta-banner__inner">
+    <div class="rebly-cta-banner__content">
       {%- if section.settings.heading != blank -%}
-        <h2 class="cta-banner__heading">{{ section.settings.heading | escape }}</h2>
+        <h2 class="rebly-cta-banner__heading">{{ section.settings.heading | escape }}</h2>
       {%- endif -%}
       {%- if section.settings.text != blank -%}
-        <p class="cta-banner__text">{{ section.settings.text | escape }}</p>
+        <p class="rebly-cta-banner__text">{{ section.settings.text | escape }}</p>
       {%- endif -%}
       {%- if section.settings.button_label != blank -%}
-        <a href="{{ section.settings.button_link }}" class="cta-banner__btn">
+        <a href="{{ section.settings.button_link }}" class="rebly-cta-banner__btn rebly-cta-banner__btn--{{ btn_style }}">
           {{ section.settings.button_label | escape }}
         </a>
       {%- endif -%}
@@ -20,39 +30,94 @@
 </section>
 
 <style>
-  #section-{{ section.id }} .cta-banner__inner {
-    background: var(--bg, #000);
-    color: var(--color, #fff);
-    padding: 4rem 2rem;
-    text-align: center;
+  /*/* Font: system font guard — must be inside style tag */
+  {%- if heading_font -%}
+    {%- unless heading_font.system? -%}
+      {{ heading_font | font_face: font_display: 'swap' }}
+    {%- endunless -%}
+    #section-{{ section_id }} {
+      --heading-font: {{ heading_font.family }}, {{ heading_font.fallback_families }};
+      --heading-weight: {{ heading_font.weight }};
+    }
+  {%- endif -%}
+
+  /* Style preset: scoped CSS vars */
+  {%- if color_mode == 'preset' -%}
+    {%- case preset -%}
+      {%- when 'dark' -%}
+        #section-{{ section_id }} { --section-bg: #111827; --section-fg: #f9fafb; --section-accent: #60a5fa; }
+      {%- when 'accent' -%}
+        #section-{{ section_id }} { --section-bg: #2563eb; --section-fg: #ffffff; --section-accent: #93c5fd; }
+      {%- when 'custom' -%}
+        #section-{{ section_id }} { --section-bg: {{ section.settings.bg_color }}; --section-fg: {{ section.settings.text_color }}; --section-accent: {{ section.settings.accent_color }}; }
+      {%- else -%}
+        #section-{{ section_id }} { --section-bg: #ffffff; --section-fg: #111827; --section-accent: #2563eb; }
+    {%- endcase -%}
+    #section-{{ section_id }} { background-color: var(--section-bg); color: var(--section-fg); }
+  {%- endif -%}
+
+  #section-{{ section_id }} .rebly-cta-banner__inner { padding: 4rem 2rem; text-align: center; }
+  #section-{{ section_id }} .rebly-cta-banner__content { max-width: 700px; margin: 0 auto; }
+  #section-{{ section_id }} .rebly-cta-banner__heading {
+    font-family: var(--heading-font); font-weight: var(--heading-weight);
+    font-size: 2.25rem; margin: 0 0 1rem; color: var(--section-fg, inherit);
   }
-  #section-{{ section.id }} .cta-banner__content { max-width: 700px; margin: 0 auto; }
-  #section-{{ section.id }} .cta-banner__heading { font-size: 2.25rem; margin: 0 0 1rem; color: var(--color, #ffffff); }
-  #section-{{ section.id }} .cta-banner__text { font-size: 1.125rem; margin: 0 0 1.5rem; opacity: 0.85; color: var(--color, #ffffff); }
-  #section-{{ section.id }} .cta-banner__btn {
+  #section-{{ section_id }} .rebly-cta-banner__text { font-size: 1.125rem; margin: 0 0 1.5rem; opacity: 0.85; color: var(--section-fg, inherit); }
+  /* Button variants */
+  #section-{{ section_id }} .rebly-cta-banner__btn {
     display: inline-block; padding: 0.85rem 2rem;
-    border: 2px solid currentColor; border-radius: 4px;
-    text-decoration: none; color: inherit; font-weight: 600;
-    transition: background 0.2s, color 0.2s;
+    border-radius: {{ section.settings.button_border_radius }}px;
+    text-decoration: none; font-weight: 600; cursor: pointer;
+    transition: filter 0.2s ease;
+  }
+  #section-{{ section_id }} .rebly-cta-banner__btn:hover { filter: brightness(0.9); }
+  #section-{{ section_id }} .rebly-cta-banner__btn--filled { background: var(--section-accent); color: var(--section-bg); border: none; }
+  #section-{{ section_id }} .rebly-cta-banner__btn--outline { background: transparent; color: var(--section-accent); border: 2px solid var(--section-accent); }
+  #section-{{ section_id }} .rebly-cta-banner__btn--ghost { background: transparent; color: var(--section-fg); border: none; }
+  #section-{{ section_id }} .rebly-cta-banner__btn--link { background: none; border: none; color: var(--section-accent); text-decoration: underline; padding: 0; }
+  @media (prefers-reduced-motion: reduce) {
+    #section-{{ section_id }} .rebly-cta-banner__btn { transition: none; }
+  }
+  @media (max-width: 749px) {
+    #section-{{ section_id }} .rebly-cta-banner__heading { font-size: 1.75rem; }
   }
-  #section-{{ section.id }} .cta-banner__btn:hover { background: var(--color, #fff); color: var(--bg, #000); }
-  @media (max-width: 749px) { #section-{{ section.id }} .cta-banner__heading { font-size: 1.75rem; } }
 </style>
 
 {% schema %}
 {
-  "name": "CTA Banner",
+  "name": "Rebly: CTA Banner",
   "tag": "section",
-  "class": "section-cta-banner",
+  "class": "rebly-section",
   "settings": [
+    { "type": "header", "content": "Color Mode" },
+    { "type": "select", "id": "color_mode", "label": "Color mode", "default": "preset", "options": [
+      { "value": "theme", "label": "Theme colors" }, { "value": "preset", "label": "Custom preset" }
+    ] },
+    { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-1" },
+    { "type": "select", "id": "style_preset", "label": "Style preset", "default": "dark", "options": [
+      { "value": "light", "label": "Light" }, { "value": "dark", "label": "Dark" },
+      { "value": "accent", "label": "Accent" }, { "value": "custom", "label": "Custom" }
+    ] },
+    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#000000" },
+    { "type": "color", "id": "text_color", "label": "Text color", "default": "#ffffff" },
+    { "type": "color", "id": "accent_color", "label": "Accent color", "default": "#60a5fa" },
+    { "type": "header", "content": "Content" },
+    { "type": "font_picker", "id": "heading_font", "label": "Heading font", "default": "assistant_n4" },
     { "type": "text", "id": "heading", "label": "Heading", "default": "Ready to get started?" },
     { "type": "text", "id": "text", "label": "Text", "default": "Join thousands of happy customers." },
-    { "type": "text", "id": "button_label", "label": "Button Label", "default": "Shop Now" },
-    { "type": "url", "id": "button_link", "label": "Button Link" },
-    { "type": "color_background", "id": "background_color", "label": "Background", "default": "#000000" },
-    { "type": "color", "id": "text_color", "label": "Text Color", "default": "#ffffff" }
+    { "type": "header", "content": "Button" },
+    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop Now" },
+    { "type": "url", "id": "button_link", "label": "Button link" },
+    { "type": "select", "id": "button_style", "label": "Button style", "default": "filled", "options": [
+      { "value": "filled", "label": "Filled" }, { "value": "outline", "label": "Outline" },
+      { "value": "ghost", "label": "Ghost" }, { "value": "link", "label": "Link" }
+    ] },
+    { "type": "range", "id": "button_border_radius", "label": "Button radius (px)", "min": 0, "max": 50, "step": 2, "default": 4, "unit": "px" }
   ],
   "blocks": [{ "type": "@app" }],
-  "presets": [{ "name": "CTA Banner" }]
+  "presets": [
+    { "name": "Rebly: CTA Banner — Dark", "settings": { "color_mode": "preset", "style_preset": "dark" } },
+    { "name": "Rebly: CTA Banner — Accent", "settings": { "color_mode": "preset", "style_preset": "accent" } }
+  ]
 }
 {% endschema %}