rebly-sections 1.3.1 → 1.4.0

package/assets/data/component-library/testimonials-slider.liquid

@@ -1,85 +1,253 @@
-{%- comment -%} rebly-sections: Testimonials Slider | Category: social-proof | OS2.0 {%- endcomment -%}
+{%- comment -%} rebly-sections: Testimonials Slider | Category: social-proof | OS2.0 | CSS scroll-snap carousel {%- endcomment -%}
+{%- assign font = section.settings.heading_font -%}
+{%- assign heading_tag = section.settings.heading_tag -%}
+{%- assign block_count = section.blocks | where: 'type', 'testimonial' | size -%}
 
-<section id="section-{{ section.id }}" class="testimonials-slider" style="--bg: {{ section.settings.background_color }};">
-  <div class="testimonials-slider__container">
+{{ font | font_face: font_display: 'swap' }}
+
+<section id="section-{{ section.id }}" class="testimonials-slider color-{{ section.settings.color_scheme }}">
+  <div class="testimonials-slider__container" style="
+    --pt: {{ section.settings.padding_top }}px;
+    --pb: {{ section.settings.padding_bottom }}px;
+    --heading-size: {{ section.settings.heading_font_size }}px;
+    --heading-font: {{ font.family }}, {{ font.fallback_families }};
+    --heading-weight: {{ font.weight }};
+    --slide-count: {{ block_count }};
+  ">
 
     {%- if section.settings.heading != blank -%}
-      <h2 class="testimonials-slider__heading">{{ section.settings.heading | escape }}</h2>
+      <{{ heading_tag }} class="testimonials-slider__heading">{{ section.settings.heading | escape }}</{{ heading_tag }}>
     {%- endif -%}
 
-    <div class="testimonials-slider__track">
-      {%- for block in section.blocks -%}
-        {%- if block.type == 'testimonial' -%}
-          <div class="testimonials-slider__slide" {{ block.shopify_attributes }}>
-            <blockquote class="testimonials-slider__quote">
-              {%- if block.settings.quote != blank -%}
-                <p class="testimonials-slider__text">{{ block.settings.quote | escape }}</p>
+    {%- comment -%} CSS scroll-snap carousel — no JS library, GPU-only scroll {%- endcomment -%}
+    <div class="testimonials-slider__viewport" id="ts-viewport-{{ section.id }}">
+      <div class="testimonials-slider__track">
+        {%- for block in section.blocks -%}
+          {%- if block.type == 'testimonial' -%}
+            <article class="testimonials-slider__slide" {{ block.shopify_attributes }} id="ts-slide-{{ section.id }}-{{ forloop.index }}">
+              {%- comment -%} Decorative oversized quote mark {%- endcomment -%}
+              <span class="testimonials-slider__quote-mark" aria-hidden="true">&#8220;</span>
+
+              {%- if block.settings.rating > 0 -%}
+                <div class="testimonials-slider__stars" aria-label="{{ block.settings.rating }} out of 5 stars">
+                  {%- for i in (1..5) -%}
+                    <span class="testimonials-slider__star{% if i <= block.settings.rating %} testimonials-slider__star--filled{% endif %}" aria-hidden="true">&#9733;</span>
+                  {%- endfor -%}
+                </div>
               {%- endif -%}
-              <footer class="testimonials-slider__author">
-                {%- if block.settings.avatar != blank -%}
-                  <div class="testimonials-slider__avatar">
-                    {{- block.settings.avatar | image_url: width: 80 | image_tag: loading: 'lazy', alt: block.settings.author -}}
-                  </div>
+
+              <blockquote class="testimonials-slider__blockquote">
+                {%- if block.settings.quote != blank -%}
+                  <p class="testimonials-slider__text">{{ block.settings.quote | escape }}</p>
                 {%- endif -%}
-                <div>
-                  {%- if block.settings.author != blank -%}
-                    <cite class="testimonials-slider__name">{{ block.settings.author | escape }}</cite>
-                  {%- endif -%}
-                  {%- if block.settings.role != blank -%}
-                    <span class="testimonials-slider__role">{{ block.settings.role | escape }}</span>
+                <footer class="testimonials-slider__author">
+                  {%- if block.settings.avatar != blank -%}
+                    <div class="testimonials-slider__avatar">
+                      <img
+                        src="{{ block.settings.avatar | image_url: width: 96 }}"
+                        srcset="{{ block.settings.avatar | image_url: width: 96 }} 1x, {{ block.settings.avatar | image_url: width: 192 }} 2x"
+                        loading="lazy"
+                        alt="{{ block.settings.author | escape }}"
+                        width="48" height="48"
+                      >
+                    </div>
+                  {%- else -%}
+                    <div class="testimonials-slider__avatar testimonials-slider__avatar--initials" aria-hidden="true">
+                      {{ block.settings.author | slice: 0 | upcase }}
+                    </div>
                   {%- endif -%}
-                </div>
-              </footer>
-            </blockquote>
-          </div>
-        {%- endif -%}
-      {%- endfor -%}
+                  <div class="testimonials-slider__meta">
+                    {%- if block.settings.author != blank -%}
+                      <cite class="testimonials-slider__name">{{ block.settings.author | escape }}</cite>
+                    {%- endif -%}
+                    {%- if block.settings.role != blank -%}
+                      <span class="testimonials-slider__role">{{ block.settings.role | escape }}</span>
+                    {%- endif -%}
+                  </div>
+                </footer>
+              </blockquote>
+            </article>
+          {%- endif -%}
+        {%- endfor -%}
+      </div>
     </div>
 
+    {%- comment -%} Navigation dots — JS-driven active state, CSS-only styling {%- endcomment -%}
+    {%- if block_count > 1 -%}
+      <nav class="testimonials-slider__dots" aria-label="Testimonial navigation">
+        {%- for block in section.blocks -%}
+          {%- if block.type == 'testimonial' -%}
+            <button
+              class="testimonials-slider__dot{% if forloop.first %} is-active{% endif %}"
+              data-index="{{ forloop.index0 }}"
+              aria-label="Go to testimonial {{ forloop.index }}"
+            ></button>
+          {%- endif -%}
+        {%- endfor -%}
+      </nav>
+    {%- endif -%}
+
   </div>
 </section>
 
 <style>
-  #section-{{ section.id }} { background: var(--bg, #f9f9f9); }
-  #section-{{ section.id }} .testimonials-slider__container { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; }
-  #section-{{ section.id }} .testimonials-slider__heading { text-align: center; font-size: 2rem; margin: 0 0 2.5rem; color: inherit; }
+  /* ── Layout ── */
+  #section-{{ section.id }} .testimonials-slider__container {
+    max-width: 1100px; margin: 0 auto;
+    padding: var(--pt, 80px) 2rem var(--pb, 80px);
+  }
+  #section-{{ section.id }} .testimonials-slider__heading {
+    font-family: var(--heading-font); font-weight: var(--heading-weight);
+    font-size: clamp(1.75rem, 3vw, var(--heading-size, 2.5rem));
+    text-align: center; margin: 0 0 3rem; color: rgb(var(--color-foreground));
+  }
+  /* ── Scroll-snap viewport ── */
+  #section-{{ section.id }} .testimonials-slider__viewport {
+    overflow: hidden; /* JS scrolls underlying track */
+  }
   #section-{{ section.id }} .testimonials-slider__track {
-    display: flex; gap: 1.5rem; overflow-x: auto;
-    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
-    scrollbar-width: none; padding-bottom: 1rem;
+    display: flex; gap: 1.5rem;
+    /* scroll-snap on the track so CSS-only fallback works too */
+    overflow-x: auto; scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch; scrollbar-width: none;
+    scroll-behavior: smooth;
   }
   #section-{{ section.id }} .testimonials-slider__track::-webkit-scrollbar { display: none; }
+  /* ── Slide cards ── */
   #section-{{ section.id }} .testimonials-slider__slide {
     flex: 0 0 calc(33.333% - 1rem); min-width: 280px;
-    scroll-snap-align: start; background: #fff;
-    border-radius: 8px; padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    scroll-snap-align: start;
+    background: rgb(var(--color-background));
+    border: 1px solid rgba(var(--color-foreground), 0.1);
+    border-radius: 16px; padding: 2.25rem; position: relative;
+    overflow: hidden;
+    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
+    will-change: transform;
+  }
+  #section-{{ section.id }} .testimonials-slider__slide:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 20px 60px rgba(var(--color-foreground), 0.1);
+  }
+  /* ── Decorative quote mark ── */
+  #section-{{ section.id }} .testimonials-slider__quote-mark {
+    position: absolute; top: -0.25rem; right: 1.25rem;
+    font-size: 6rem; line-height: 1; opacity: 0.08;
+    color: rgb(var(--color-foreground)); pointer-events: none;
+    font-family: Georgia, serif;
+  }
+  /* ── Stars ── */
+  #section-{{ section.id }} .testimonials-slider__stars { margin-bottom: 1rem; }
+  #section-{{ section.id }} .testimonials-slider__star { font-size: 1rem; opacity: 0.25; color: rgb(var(--color-foreground)); }
+  #section-{{ section.id }} .testimonials-slider__star--filled { opacity: 1; color: #f5a623; }
+  /* ── Quote text ── */
+  #section-{{ section.id }} .testimonials-slider__blockquote { margin: 0; }
+  #section-{{ section.id }} .testimonials-slider__text {
+    font-size: 1rem; line-height: 1.75; margin: 0 0 1.75rem;
+    font-style: italic; color: rgb(var(--color-foreground)); opacity: 0.85;
+  }
+  /* ── Author ── */
+  #section-{{ section.id }} .testimonials-slider__author { display: flex; align-items: center; gap: 0.875rem; }
+  #section-{{ section.id }} .testimonials-slider__avatar {
+    width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
+    flex-shrink: 0; background: rgba(var(--color-button), 0.15);
   }
-  #section-{{ section.id }} .testimonials-slider__text { font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.5rem; font-style: italic; color: inherit; }
-  #section-{{ section.id }} .testimonials-slider__author { display: flex; align-items: center; gap: 0.75rem; }
-  #section-{{ section.id }} .testimonials-slider__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
   #section-{{ section.id }} .testimonials-slider__avatar img { width: 100%; height: 100%; object-fit: cover; }
-  #section-{{ section.id }} .testimonials-slider__name { display: block; font-weight: 600; font-style: normal; color: inherit; }
-  #section-{{ section.id }} .testimonials-slider__role { font-size: 0.875rem; opacity: 0.65; color: inherit; }
-  @media (max-width: 749px) { #section-{{ section.id }} .testimonials-slider__slide { flex: 0 0 85%; } }
+  #section-{{ section.id }} .testimonials-slider__avatar--initials {
+    display: grid; place-items: center;
+    font-weight: 700; font-size: 1.1rem; color: rgb(var(--color-button));
+  }
+  #section-{{ section.id }} .testimonials-slider__meta { display: flex; flex-direction: column; gap: 0.15rem; }
+  #section-{{ section.id }} .testimonials-slider__name {
+    font-style: normal; font-weight: 700; font-size: 0.9375rem;
+    color: rgb(var(--color-foreground));
+  }
+  #section-{{ section.id }} .testimonials-slider__role { font-size: 0.8125rem; opacity: 0.6; color: rgb(var(--color-foreground)); }
+  /* ── Navigation dots ── */
+  #section-{{ section.id }} .testimonials-slider__dots {
+    display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem;
+  }
+  #section-{{ section.id }} .testimonials-slider__dot {
+    width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer;
+    background: rgba(var(--color-foreground), 0.2);
+    transition: background 0.3s ease, transform 0.3s ease;
+    padding: 0;
+  }
+  #section-{{ section.id }} .testimonials-slider__dot.is-active {
+    background: rgb(var(--color-button)); transform: scale(1.4);
+  }
+  /* ── Reduced motion ── */
+  @media (prefers-reduced-motion: reduce) {
+    #section-{{ section.id }} .testimonials-slider__track { scroll-behavior: auto; }
+    #section-{{ section.id }} .testimonials-slider__slide { transition: none; }
+    #section-{{ section.id }} .testimonials-slider__dot { transition: none; }
+  }
+  /* ── Responsive ── */
+  @media (max-width: 989px) {
+    #section-{{ section.id }} .testimonials-slider__slide { flex: 0 0 calc(50% - 0.75rem); }
+  }
+  @media (max-width: 749px) {
+    #section-{{ section.id }} .testimonials-slider__slide { flex: 0 0 88%; }
+    #section-{{ section.id }} .testimonials-slider__container { padding-left: 1.25rem; padding-right: 1.25rem; }
+  }
 </style>
 
+<script>
+/* Dot-nav + keyboard navigation for scroll-snap carousel */
+(function() {
+  var viewport = document.getElementById('ts-viewport-{{ section.id }}');
+  var track = viewport && viewport.querySelector('.testimonials-slider__track');
+  var dots = document.querySelectorAll('#section-{{ section.id }} .testimonials-slider__dot');
+  var slides = document.querySelectorAll('#section-{{ section.id }} .testimonials-slider__slide');
+  if (!track || !slides.length) return;
+
+  function scrollToSlide(index) {
+    var slide = slides[index];
+    if (!slide) return;
+    track.scrollTo({ left: slide.offsetLeft, behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+  }
+
+  dots.forEach(function(dot) {
+    dot.addEventListener('click', function() { scrollToSlide(parseInt(this.dataset.index, 10)); });
+  });
+
+  /* Update active dot on scroll */
+  var io = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry) {
+      if (!entry.isIntersecting) return;
+      var idx = Array.prototype.indexOf.call(slides, entry.target);
+      dots.forEach(function(d, i) { d.classList.toggle('is-active', i === idx); });
+    });
+  }, { root: track, threshold: 0.6 });
+  slides.forEach(function(s) { io.observe(s); });
+})();
+</script>
+
 {% schema %}
 {
   "name": "Testimonials Slider",
   "tag": "section",
   "class": "section-testimonials-slider",
   "settings": [
+    { "type": "color_scheme", "id": "color_scheme", "label": "Color Scheme", "default": "scheme-1" },
+    { "type": "font_picker", "id": "heading_font", "label": "Heading Font", "default": "helvetica_n4" },
+    { "type": "range", "id": "heading_font_size", "label": "Heading Size (px)", "min": 20, "max": 56, "step": 2, "default": 40 },
+    { "type": "select", "id": "heading_tag", "label": "Heading Tag", "options": [
+      { "value": "h1", "label": "H1" }, { "value": "h2", "label": "H2" },
+      { "value": "h3", "label": "H3" }, { "value": "h4", "label": "H4" }
+    ], "default": "h2" },
     { "type": "text", "id": "heading", "label": "Heading", "default": "What our customers say" },
-    { "type": "color_background", "id": "background_color", "label": "Background Color", "default": "#f9f9f9" }
+    { "type": "range", "id": "padding_top", "label": "Padding Top (px)", "min": 0, "max": 160, "step": 8, "default": 80 },
+    { "type": "range", "id": "padding_bottom", "label": "Padding Bottom (px)", "min": 0, "max": 160, "step": 8, "default": 80 }
   ],
   "blocks": [
     {
       "type": "testimonial",
       "name": "Testimonial",
       "settings": [
-        { "type": "textarea", "id": "quote", "label": "Quote", "default": "This product changed my life. Absolutely love it!" },
+        { "type": "range", "id": "rating", "label": "Star Rating", "min": 0, "max": 5, "step": 1, "default": 5 },
+        { "type": "textarea", "id": "quote", "label": "Quote", "default": "This product completely transformed how I work. Absolutely worth every penny." },
         { "type": "text", "id": "author", "label": "Author Name", "default": "Happy Customer" },
-        { "type": "text", "id": "role", "label": "Role / Title" },
+        { "type": "text", "id": "role", "label": "Role / Title", "default": "Verified Buyer" },
         { "type": "image_picker", "id": "avatar", "label": "Avatar Image" }
       ]
     },
@@ -87,7 +255,9 @@
   ],
   "presets": [{
     "name": "Testimonials Slider",
-    "blocks": [{ "type": "testimonial" }, { "type": "testimonial" }, { "type": "testimonial" }]
+    "blocks": [
+      { "type": "testimonial" }, { "type": "testimonial" }, { "type": "testimonial" }
+    ]
   }]
 }
 {% endschema %}

package/assets/data/design-tokens.csv

@@ -91,3 +91,45 @@ No,Token Name,Category,Value,CSS Variable,Keywords,Usage,Notes
 90,font-family-sans,typography,"system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",--font-family-sans,font family sans serif system stack body,font-family: var(--font-family-sans),System sans-serif stack for body text
 91,font-family-serif,typography,"Georgia, 'Times New Roman', serif",--font-family-serif,font family serif classic editorial heading,font-family: var(--font-family-serif),Classic serif stack for editorial headings
 92,font-family-mono,typography,"'SF Mono', 'Fira Code', 'Courier New', monospace",--font-family-mono,font family monospace code technical,font-family: var(--font-family-mono),Monospace stack for code and technical content
+93,color-foreground,color,var(--color-scheme-foreground),--color-foreground,"color foreground text primary scheme","color: var(--color-foreground)",Primary text color mapped to Shopify color_scheme foreground
+94,color-background-scheme,color,var(--color-scheme-background),--color-background-scheme,"color background surface scheme page","background: var(--color-background-scheme)",Page/section background mapped to Shopify color_scheme background
+95,color-primary-scheme,color,var(--color-scheme-primary),--color-primary-scheme,"color primary brand accent cta button scheme","background: var(--color-primary-scheme); color: var(--color-primary-scheme)",Brand primary / CTA buttons mapped to Shopify color_scheme primary
+96,color-secondary-scheme,color,var(--color-scheme-secondary),--color-secondary-scheme,"color secondary scheme complement","color: var(--color-secondary-scheme)",Secondary elements mapped to Shopify color_scheme secondary
+97,color-primary-text,color,var(--color-scheme-primary-text),--color-primary-text,"color text contrast primary on-primary scheme","color: var(--color-primary-text)",Text on primary/brand background for contrast
+98,color-overlay,color,"rgba(var(--color-foreground-rgb), 0.5)",--color-overlay,"color overlay modal hero backdrop dim","background: var(--color-overlay)",Semi-transparent overlay for modals and hero backgrounds
+99,color-border-subtle,color,"rgba(var(--color-foreground-rgb), 0.1)",--color-border-subtle,"color border divider line subtle thin","border-color: var(--color-border-subtle)",Subtle borders and dividers using foreground RGB
+100,color-surface-elevated,color,"color-mix(in srgb, var(--color-scheme-background) 95%, var(--color-scheme-foreground))",--color-surface-elevated,"color surface card elevated panel raised","background: var(--color-surface-elevated)",Elevated surfaces / cards; slightly different from page background
+101,color-muted,color,"rgba(var(--color-foreground-rgb), 0.6)",--color-muted,"color muted secondary text subdued hint","color: var(--color-muted)",Muted/secondary text color at 60% opacity
+102,color-success-semantic,color,#16a34a,--color-success-semantic,"color success green status positive valid","color: var(--color-success-semantic); background: var(--color-success-semantic)",Success states; accessible green
+103,color-warning-semantic,color,#ca8a04,--color-warning-semantic,"color warning yellow status caution alert","color: var(--color-warning-semantic); background: var(--color-warning-semantic)",Warning states; accessible amber
+104,color-error-semantic,color,#dc2626,--color-error-semantic,"color error red status danger invalid negative","color: var(--color-error-semantic); border-color: var(--color-error-semantic)",Error states; accessible red
+105,color-focus-ring-semantic,color,var(--color-scheme-primary),--color-focus-ring-semantic,"color focus ring accessibility keyboard outline","outline-color: var(--color-focus-ring-semantic)",Focus outline for keyboard navigation using brand primary
+106,font-size-xs-fluid,typography,"clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem)",--font-size-xs-fluid,"font size xs caption small fluid responsive clamp","font-size: var(--font-size-xs-fluid)",Fluid extra small text; captions and fine print; scales with viewport
+107,font-size-sm-fluid,typography,"clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem)",--font-size-sm-fluid,"font size sm label small fluid responsive clamp","font-size: var(--font-size-sm-fluid)",Fluid small text; labels and metadata; scales with viewport
+108,font-size-base-fluid,typography,"clamp(0.9rem, 0.85rem + 0.25vw, 1rem)",--font-size-base-fluid,"font size base body paragraph fluid responsive clamp","font-size: var(--font-size-base-fluid)",Fluid body text; responsive base size
+109,font-size-md-fluid,typography,"clamp(1rem, 0.9rem + 0.5vw, 1.125rem)",--font-size-md-fluid,"font size md medium fluid responsive clamp lead","font-size: var(--font-size-md-fluid)",Fluid medium text; slightly larger body and lead text
+110,font-size-lg-fluid,typography,"clamp(1.1rem, 1rem + 0.5vw, 1.25rem)",--font-size-lg-fluid,"font size lg large fluid responsive clamp heading","font-size: var(--font-size-lg-fluid)",Fluid large text; small headings and prominent labels
+111,font-size-xl-fluid,typography,"clamp(1.25rem, 1rem + 1.25vw, 1.75rem)",--font-size-xl-fluid,"font size xl heading h4 fluid responsive clamp","font-size: var(--font-size-xl-fluid)",Fluid H4 headings; scales from 1.25rem to 1.75rem
+112,font-size-2xl-fluid,typography,"clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem)",--font-size-2xl-fluid,"font size 2xl heading h3 fluid responsive clamp","font-size: var(--font-size-2xl-fluid)",Fluid H3 headings; scales from 1.5rem to 2.25rem
+113,font-size-3xl-fluid,typography,"clamp(1.875rem, 1.5rem + 1.875vw, 3rem)",--font-size-3xl-fluid,"font size 3xl heading h2 fluid responsive clamp","font-size: var(--font-size-3xl-fluid)",Fluid H2 headings; scales from 1.875rem to 3rem
+114,font-size-4xl-fluid,typography,"clamp(2.25rem, 1.75rem + 2.5vw, 4rem)",--font-size-4xl-fluid,"font size 4xl heading h1 fluid responsive clamp hero","font-size: var(--font-size-4xl-fluid)",Fluid H1 headings; scales from 2.25rem to 4rem for maximum impact
+115,font-weight-normal-scale,typography,400,--font-weight-normal-scale,"font weight normal regular 400 body","font-weight: var(--font-weight-normal-scale)",Normal weight 400 for body text; part of semantic weight scale
+116,font-weight-medium-scale,typography,500,--font-weight-medium-scale,"font weight medium 500 emphasis label","font-weight: var(--font-weight-medium-scale)",Medium weight 500 for UI labels and moderate emphasis
+117,font-weight-bold-scale,typography,700,--font-weight-bold-scale,"font weight bold 700 heading strong","font-weight: var(--font-weight-bold-scale)",Bold weight 700 for headings and strong emphasis
+118,duration-instant,animation,50ms,--duration-instant,"duration instant fast micro feedback toggle checkbox","transition-duration: var(--duration-instant)",Instant feedback transitions for checkboxes and toggles
+119,duration-fast,animation,150ms,--duration-fast,"duration fast hover focus interactive quick","transition-duration: var(--duration-fast)",Fast transitions for hover and focus states
+120,duration-normal,animation,300ms,--duration-normal,"duration normal standard expand reveal transition","transition-duration: var(--duration-normal)",Standard animation duration for expand and reveal effects
+121,duration-slow,animation,500ms,--duration-slow,"duration slow complex modal slide panel","transition-duration: var(--duration-slow)",Slower transitions for complex elements like modals and slide panels
+122,duration-slower,animation,800ms,--duration-slower,"duration slower entrance scroll reveal animation","transition-duration: var(--duration-slower)",Entrance animations for scroll-triggered reveal effects
+123,ease-out,animation,"cubic-bezier(0.4, 0, 0.2, 1)",--ease-out,"easing ease out decelerate standard material","transition-timing-function: var(--ease-out)",Standard deceleration easing; elements entering the screen
+124,ease-in-out,animation,"cubic-bezier(0.4, 0, 0.2, 1)",--ease-in-out,"easing ease in out symmetric balanced","transition-timing-function: var(--ease-in-out)",Symmetric easing for elements moving across the screen
+125,ease-spring,animation,"cubic-bezier(0.34, 1.56, 0.64, 1)",--ease-spring,"easing spring bounce overshoot playful","transition-timing-function: var(--ease-spring)",Bouncy spring easing with slight overshoot for playful interactions
+126,shadow-sm-semantic,shadow,"0 1px 2px rgba(0,0,0,0.05)",--shadow-sm-semantic,"shadow small subtle elevation minimal","box-shadow: var(--shadow-sm-semantic)",Minimal shadow for slight elevation; form inputs and badges
+127,shadow-md-semantic,shadow,"0 4px 6px -1px rgba(0,0,0,0.1)",--shadow-md-semantic,"shadow medium card elevation default","box-shadow: var(--shadow-md-semantic)",Card-level elevation shadow; standard depth for content cards
+128,shadow-lg-semantic,shadow,"0 10px 15px -3px rgba(0,0,0,0.1)",--shadow-lg-semantic,"shadow large dropdown modal overlay floating","box-shadow: var(--shadow-lg-semantic)",Dropdown and modal elevation; floating UI elements
+129,shadow-xl-semantic,shadow,"0 20px 25px -5px rgba(0,0,0,0.1)",--shadow-xl-semantic,"shadow extra large hero overlay dramatic high","box-shadow: var(--shadow-xl-semantic)",Hero and overlay elevation; maximum depth for prominent elements
+130,shadow-glow,shadow,"0 0 15px rgba(var(--color-primary-rgb),0.3)",--shadow-glow,"shadow glow primary cta attention highlight brand","box-shadow: var(--shadow-glow)",Glow effect for CTA buttons using brand primary color RGB
+131,breakpoint-sm-shopify,breakpoint,640px,--breakpoint-sm-shopify,"breakpoint small mobile 640px sm","@media (min-width: 640px) { }",Small breakpoint; mobile landscape and small mobile devices
+132,breakpoint-md-shopify,breakpoint,749px,--breakpoint-md-shopify,"breakpoint medium tablet 749px shopify mobile","@media (min-width: 749px) { }",Shopify Dawn mobile/tablet breakpoint; official Shopify threshold
+133,breakpoint-lg-shopify,breakpoint,990px,--breakpoint-lg-shopify,"breakpoint large desktop 990px shopify desktop","@media (min-width: 990px) { }",Shopify Dawn desktop breakpoint; official Shopify desktop threshold
+134,breakpoint-xl-shopify,breakpoint,1200px,--breakpoint-xl-shopify,"breakpoint extra large wide 1200px desktop wide","@media (min-width: 1200px) { }",Wide desktop breakpoint; large monitor and wide viewport layouts

package/assets/scripts/core.py

@@ -52,6 +52,11 @@ CSV_CONFIG = {
         "file": "settings-profiles.csv",
         "search_cols": ["Section Type", "Setting ID", "Notes"],
         "output_cols": ["Section Type", "Setting ID", "Setting Type", "Label", "Default", "Required", "Notes", "Frequency Rank"]
+    },
+    "animations": {
+        "file": "animations.csv",
+        "search_cols": ["name", "use_case", "keywords", "category"],
+        "output_cols": ["name", "category", "css_keyframes", "easing", "duration", "trigger", "reduced_motion_fallback", "use_case"]
     }
 }
 
@@ -164,7 +169,8 @@ domain_keywords = {
     "themes": ["theme", "dawn", "impulse", "impact", "craft", "detect", "dna", "theme profile"],
     "practices": ["best practice", "performance", "accessibility", "seo", "os2", "lazy load", "responsive", "a11y"],
     "block-patterns": ["block", "blocks", "block type", "block config", "block pattern", "block setting"],
-    "settings-profiles": ["profile", "settings profile", "recommended settings", "section settings", "setting profile"]
+    "settings-profiles": ["profile", "settings profile", "recommended settings", "section settings", "setting profile"],
+    "animations": ["animation", "animate", "motion", "transition", "easing", "keyframe", "hover", "scroll", "entrance", "parallax", "fade", "slide", "reveal"]
 }
 
 

package/assets/scripts/quality-gate-design-checks.py

@@ -0,0 +1,101 @@
+#!/usr/bin/env python3
+"""Design quality advisory checks — GPU animations, motion, responsive, etc.
+
+Each function returns (passed: bool, message: str).
+DESIGN_CHECKS is a list of (name, check_fn) tuples consumed by quality-gate.py.
+"""
+
+import re
+
+
+def check_animation_performance(content):
+    """ADVISORY: Animations should use GPU-accelerated properties only."""
+    bad_props = re.findall(
+        r'transition[^;]*(?:top|left|right|bottom|width|height|margin|padding)[^;]*;',
+        content
+    )
+    if not bad_props:
+        return True, "GPU-accelerated animations (transform/opacity)"
+    return False, f"non-GPU animated properties found: use transform instead of top/left/width/height"
+
+
+def check_reduced_motion(content):
+    """ADVISORY: Should include prefers-reduced-motion when animations are present."""
+    has_animation = bool(re.search(r'@keyframes|animation:|transition:', content))
+    if not has_animation:
+        return True, "no animations — reduced-motion not needed"
+    has_reduced_motion = 'prefers-reduced-motion' in content
+    if has_reduced_motion:
+        return True, "prefers-reduced-motion support present"
+    return False, "has animations but missing @media (prefers-reduced-motion: reduce)"
+
+
+def check_responsive_breakpoints(content):
+    """ADVISORY: Should have at least 2 responsive breakpoints."""
+    breakpoints = re.findall(
+        r'@media[^{]*(?:max-width|min-width)\s*:\s*(\d+)',
+        content
+    )
+    unique = set(breakpoints)
+    count = len(unique)
+    if count >= 2:
+        return True, f"responsive: {count} breakpoints ({', '.join(sorted(unique, key=int))}px)"
+    if count == 1:
+        return False, f"only 1 breakpoint ({list(unique)[0]}px) — add tablet/desktop breakpoint (990px)"
+    return False, "no responsive breakpoints found — add @media queries for mobile + tablet"
+
+
+def check_css_custom_properties(content):
+    """ADVISORY: Should use CSS custom properties for colors instead of hardcoded hex."""
+    # Isolate CSS portion (before schema block)
+    if '{%- schema -%}' in content:
+        css_part = content.split('{%- schema -%}')[0]
+    elif '{% schema %}' in content:
+        css_part = content.split('{% schema %}')[0]
+    else:
+        css_part = content
+
+    # Strip Liquid output tags to avoid false positives from {{ section.id }}
+    css_part = re.sub(r'\{\{.*?\}\}', '', css_part)
+
+    hardcoded = re.findall(r'#[0-9a-fA-F]{3,8}\b', css_part)
+    # Filter out CSS ID selectors (e.g. #section-xxx) — length >= 4 = color, not selector
+    real_hardcoded = [h for h in hardcoded if not h.startswith('#section') and len(h) >= 4]
+    if not real_hardcoded:
+        return True, "no hardcoded colors in CSS — using custom properties"
+    return False, f"{len(real_hardcoded)} hardcoded color(s) in CSS — use CSS custom properties instead"
+
+
+def check_responsive_images(content):
+    """ADVISORY: Images should use srcset or image_url with width for responsive loading."""
+    has_images = bool(re.search(r'<img|image_url|img_url', content))
+    if not has_images:
+        return True, "no images — srcset not needed"
+    has_responsive = bool(re.search(r'srcset|image_url.*width|img_url.*\d+x', content))
+    if has_responsive:
+        return True, "responsive images (srcset/image_url)"
+    return False, "images found but no srcset or image_url width — add responsive image handling"
+
+
+def check_intersection_observer(content):
+    """ADVISORY: Scroll animations should use Intersection Observer for performance."""
+    has_scroll_animation = bool(re.search(
+        r'\.is-visible|\.animate|scroll.*animation|animation.*scroll',
+        content, re.IGNORECASE
+    ))
+    if not has_scroll_animation:
+        return True, "no scroll animations — Intersection Observer not needed"
+    has_observer = 'IntersectionObserver' in content
+    if has_observer:
+        return True, "uses Intersection Observer for scroll animations"
+    return False, "scroll animations detected but no Intersection Observer — add for performance"
+
+
+DESIGN_CHECKS = [
+    ("animation_performance", check_animation_performance),
+    ("reduced_motion", check_reduced_motion),
+    ("responsive_breakpoints", check_responsive_breakpoints),
+    ("css_custom_properties", check_css_custom_properties),
+    ("responsive_images", check_responsive_images),
+    ("intersection_observer", check_intersection_observer),
+]

package/assets/scripts/quality-gate.py

@@ -22,6 +22,16 @@ try:
 except (FileNotFoundError, AttributeError):
     pass
 
+# Import design quality checks (animation, responsive, a11y)
+_design_mod = None
+try:
+    _dc_path = Path(__file__).parent / 'quality-gate-design-checks.py'
+    _dc_spec = importlib.util.spec_from_file_location('qg_design', _dc_path)
+    _design_mod = importlib.util.module_from_spec(_dc_spec)
+    _dc_spec.loader.exec_module(_design_mod)
+except (FileNotFoundError, AttributeError):
+    pass
+
 # Core checks (PASS/FAIL)
 QUALITY_CHECKS = [
     ("schema_valid_json", "Schema block contains valid JSON"),
@@ -229,6 +239,22 @@ def run_quality_gate(filepath):
             warned += 1
             results.append(f"⚠ {description}: ERROR ({e})")
 
+    # Design quality advisory checks (separate section)
+    design_passed = 0
+    design_total = 0
+    design_results = []
+    if _design_mod and hasattr(_design_mod, "DESIGN_CHECKS"):
+        for name, check_fn in _design_mod.DESIGN_CHECKS:
+            design_total += 1
+            try:
+                ok, msg = check_fn(content)
+                if ok:
+                    design_passed += 1
+                icon = "✓" if ok else "⚠"
+                design_results.append(f"{icon} {msg}")
+            except Exception as e:
+                design_results.append(f"⚠ {name}: ERROR ({e})")
+
     total = passed + failed + warned
     summary = f"\n## Quality Gate: {path.name}\n"
     summary += f"**Score:** {passed}/{total} checks passed"
@@ -237,6 +263,11 @@ def run_quality_gate(filepath):
     summary += "\n\n"
     summary += "\n".join(results)
 
+    if design_results:
+        summary += "\n\n--- Design Quality Advisory ---\n"
+        summary += "\n".join(design_results)
+        summary += f"\n\nDesign Quality: {design_passed}/{design_total} advisory checks passed"
+
     if failed == 0:
         summary += "\n\n**Result: PASS** ✓"
         if warned:

package/assets/scripts/section-generator.py

@@ -28,6 +28,13 @@ search_settings_profile = _hm.search_settings_profile
 search_theme_dna = _hm.search_theme_dna
 search_design_tokens = _hm.search_design_tokens
 
+# Import ux-bridge module (kebab-case filename requires importlib)
+_ub_path = Path(__file__).parent / 'ux-bridge.py'
+_ub_spec = _ilu.spec_from_file_location('ux_bridge', _ub_path)
+_ub_mod = _ilu.module_from_spec(_ub_spec)
+_ub_spec.loader.exec_module(_ub_mod)
+build_ux_context = _ub_mod.build_ux_context
+
 TEMPLATE_DIR = Path(__file__).parent.parent / "templates"
 
 # UTF-8 stdout
@@ -99,39 +106,14 @@ def search_best_practices(description, max_results=5):
     return "\n".join(output)
 
 
-def try_ui_ux_bridge(ui_style_keywords):
-    """Optional: query ui-ux-pro-max if available. Returns empty string if N/A."""
-    try:
-        ux_search_path = Path(__file__).parent.parent.parent.parent / ".claude" / "skills" / "ui-ux-pro-max" / "scripts" / "core.py"
-        if not ux_search_path.exists():
-            ux_search_path = Path(__file__).parent.parent.parent.parent / ".research" / "ui-ux-pro-max-skill" / "src" / "ui-ux-pro-max" / "scripts" / "core.py"
-
-        if ux_search_path.exists():
-            import importlib.util
-            spec = importlib.util.spec_from_file_location("ux_core", ux_search_path)
-            ux_module = importlib.util.module_from_spec(spec)
-            spec.loader.exec_module(ux_module)
-            result = ux_module.search(ui_style_keywords, domain="style", max_results=2)
-            if result.get("results"):
-                lines = ["<design_recommendations>", "**UI/UX Style Recommendations:**"]
-                for r in result["results"]:
-                    lines.append(f"- {r.get('Style Category', '')}: {r.get('Keywords', '')}")
-                    lines.append(f"  Effects: {r.get('Effects & Animation', '')}")
-                lines.append("</design_recommendations>")
-                return "\n".join(lines)
-    except Exception:
-        pass
-    # Return empty string instead of N/A to avoid wasting prompt tokens
-    return ""
-
-
 def _strip_empty_xml_tags(content):
     """Remove XML tags whose body is empty or whitespace-only"""
     return re.sub(r'<([\w-]+)>\s*</\1>', '', content)
 
 
 def assemble_context(name, description, theme_profile, component, schema,
-                     practices, design_recs, block_patterns="",
+                     practices, design_system_ctx="", animation_ctx="",
+                     ux_guidelines_ctx="", block_patterns="",
                      settings_profile="", theme_dna="",
                      design_tokens="", refinement=""):
     """Merge all context into generation prompt"""
@@ -146,7 +128,9 @@ def assemble_context(name, description, theme_profile, component, schema,
         content = content.replace("{{ component_pattern_content }}", component)
         content = content.replace("{{ schema_search_results }}", schema)
         content = content.replace("{{ best_practices_results }}", practices)
-        content = content.replace("{{ ui_ux_recommendations }}", design_recs)
+        content = content.replace("{{ design_system_context }}", design_system_ctx)
+        content = content.replace("{{ animation_framework_context }}", animation_ctx)
+        content = content.replace("{{ ux_guidelines_context }}", ux_guidelines_ctx)
         content = content.replace("{{ block_patterns_results }}", block_patterns)
         content = content.replace("{{ settings_profile_results }}", settings_profile)
         content = content.replace("{{ theme_dna_context }}", theme_dna)
@@ -175,7 +159,7 @@ def main():
     component = search_components(f"{args.name} {args.description}")
     schema = search_schema_settings(f"shopify section settings {args.description}")
     practices = search_best_practices(f"shopify section {args.name} best practices")
-    design_recs = try_ui_ux_bridge(args.name + " " + args.description)
+    ux_ctx = build_ux_context(args.name, args.description)
     blocks = search_block_patterns(f"{args.name} {args.description}")
     profile = search_settings_profile(args.name)
     dna = search_theme_dna(args.name)
@@ -203,8 +187,13 @@ def main():
                               f"```liquid\n{existing[:3000]}\n```\n</refinement>")
 
     context = assemble_context(args.name, args.description, theme, component, schema,
-                               practices, design_recs, blocks, profile, dna,
-                               design_tokens=tokens, refinement=refinement)
+                               practices,
+                               design_system_ctx=ux_ctx.get("design_system", ""),
+                               animation_ctx=ux_ctx.get("animations", ""),
+                               ux_guidelines_ctx=ux_ctx.get("ux_guidelines", ""),
+                               block_patterns=blocks, settings_profile=profile,
+                               theme_dna=dna, design_tokens=tokens,
+                               refinement=refinement)
     print(context)