shopify-accelerate-app 1.2.0 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-accelerate-app",
-  "version": "1.2.0",
+  "version": "1.2.11",
   "description": "Shopify App development with full Typescript Support",
   "author": "Felix Tellmann",
   "license": "MIT",

package/src/scaffold-theme/generate-liquid-files.ts

@@ -295,7 +295,8 @@ export const generateLiquidFiles = (final?: boolean, cssOutput?: string) => {
   const mergedTranslations = mergeLocales(translations, defaultSourceTranslations);
 
   const translationsJs = `<script>
-  window._listify_translations = ${JSON.stringify(transformTranslations(mergedTranslations), undefined, 2)};
+  window.__listify = window.__listify || {};
+  window.__listify.translations = ${JSON.stringify(transformTranslations(mergedTranslations), undefined, 2)};
 </script>
   `;
 
@@ -306,11 +307,6 @@ export const generateLiquidFiles = (final?: boolean, cssOutput?: string) => {
     .replace(/`/gi, '"')
     .replace(/}\n/gi, "};\n")
     .replace(/\n\n/gi, "\n")};
-declare global {
-  interface Window {
-    _listify_translations?: Translations;
-  }
-}
 `;
 
   writeCompareFile(

package/src/tailwind/tailwind.config.js

@@ -6,8 +6,18 @@ const { defaultExtractor: createDefaultExtractor } = require("tailwindcss/lib/li
 const { default: resolveConfig } = require("tailwindcss/lib/util/resolveConfig");
 const plugin = require("tailwindcss/plugin");
 import { dotenvLoad } from "dotenv-mono";
+
 const dotenv = dotenvLoad(); // Dotenv instance
 
+/** Generate a full shade scale (50–950 + DEFAULT) from a CSS variable name */
+function createColorScale(cssVar) {
+  const scale = { DEFAULT: `rgb(var(${cssVar}) / <alpha-value>)` };
+  for (const shade of [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]) {
+    scale[shade] = `rgb(var(${cssVar}-${shade}) / <alpha-value>)`;
+  }
+  return scale;
+}
+
 /*const defaultExtractor = createDefaultExtractor({
   tailwindConfig: resolveConfig([
     {
@@ -55,7 +65,6 @@ module.exports = {
     }[&>*]:pointer-events-auto`,
   ],
   darkMode: "class", // or 'media' or 'class'
-  // mode: process.env.NODE_ENV ? "jit" : undefined,
   // important: true,
   important: process.env.SHOPIFY_ACCELERATE_TAILWIND_IMPORTANT,
   prefix: process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : undefined,
@@ -74,6 +83,44 @@ module.exports = {
       "2xl": "16px",
       "3xl": "24px",
       full: "9999px",
+      0: "0px",
+      1: "1px",
+      2: "2px",
+      3: "3px",
+      4: "4px",
+      5: "5px",
+      6: "6px",
+      7: "7px",
+      8: "8px",
+      9: "9px",
+      10: "10px",
+      11: "11px",
+      12: "12px",
+      13: "13px",
+      14: "14px",
+      15: "15px",
+      16: "16px",
+      17: "17px",
+      18: "18px",
+      19: "19px",
+      20: "20px",
+      21: "21px",
+      22: "22px",
+      23: "23px",
+      24: "24px",
+      "theme-card": "var(--lx-card-radius)",
+      "theme-card-sm": "var(--lx-card-radius-sm)",
+      "theme-icon": "var(--lx-icon-radius)",
+      "theme-input": "var(--lx-input-radius, 6px)",
+    },
+    borderWidth: {
+      DEFAULT: "1px",
+      0: "0px",
+      2: "2px",
+      3: "3px",
+      4: "4px",
+      theme: "var(--lx-border-width)",
+      "theme-primary": "var(--lx-border-width-primary)",
     },
     columns: {
       auto: "auto",
@@ -137,6 +184,7 @@ module.exports = {
       "9xl": ["144px", { lineHeight: "1" }],
     },
     lineHeight: {
+      1: "1",
       none: "1",
       tight: "1.25",
       snug: "1.375",
@@ -184,8 +232,11 @@ module.exports = {
       3: "12px",
       3.5: "14px",
       4: "16px",
+      4.5: "18px",
       5: "20px",
+      5.5: "22px",
       6: "24px",
+      6.5: "26px",
       7: "28px",
       8: "32px",
       9: "36px",
@@ -211,6 +262,9 @@ module.exports = {
       96: "384px",
     },
     extend: {
+      transitionTimingFunction: {
+        "slide-in": "cubic-bezier(0.32, 0.72, 0, 1)",
+      },
       screens: {
         xxs: "373px" /* tiny phone*/,
         xs: "427px" /*smaller than iphone pro max*/,
@@ -289,6 +343,11 @@ module.exports = {
         "pulse-bg": {
           "50%": { "--tw-bg-opacity": "0.5" },
         },
+        shake: {
+          "0%, 100%": { transform: "translateX(0)" },
+          "20%, 60%": { transform: "translateX(-4px)" },
+          "40%, 80%": { transform: "translateX(4px)" },
+        },
       },
       animation: {
         slide: "slide 30s linear infinite",
@@ -298,9 +357,12 @@ module.exports = {
         dot: "dot 8.1s linear",
         typewriter: "typewriter 0.5s linear infinite",
         "pulse-bg": "pulse-bg 1s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        shake: "shake 0.4s ease-in-out",
       },
       colors: {
         theme: {
+          primary: { ...createColorScale("--lx-color-primary"), contrast: "rgb(var(--lx-color-primary-contrast) / <alpha-value>)" },
+          accent: createColorScale("--lx-color-accent"),
           "trigger-bg": "rgb(var(--lx-color-trigger-bg) / <alpha-value>)",
           "trigger-text": "rgb(var(--lx-color-trigger-text) / <alpha-value>)",
           bg: "rgb(var(--lx-color-bg) / <alpha-value>)",
@@ -358,6 +420,11 @@ module.exports = {
         },
         { values: theme("spacing") }
       );
+      matchUtilities({
+        bgi: (value) => ({
+          background: value,
+        }),
+      });
       matchUtilities(
         {
           "auto-col-flow": (value) => {
@@ -366,77 +433,61 @@ module.exports = {
               const calculatedGap = /^(\d|\.)*$/gi.test(gap?.trim()) ? `${+gap * 4}px` : gap;
 
               return {
-                gridAutoFlow: `column`,
+                gridAutoFlow: "column",
                 gridAutoColumns: ` calc((100% - (${calculatedGap} * (${cols} - 1))) / ${cols})`,
                 columnGap: `${calculatedGap}`,
               };
             }
             return {
-              gridAutoFlow: `column`,
+              gridAutoFlow: "column",
               gridAutoColumns: `${value}`,
             };
           },
         },
         { values: theme("width") }
       );
-      /*matchUtilities(
+      matchUtilities(
         {
-          "border-w": (value) => ({
-            borderWidth: `${value}`,
-          }),
+          "border-w": (value) => ({ borderWidth: value }),
         },
-        { values: theme("spacing") }
+        { values: theme("borderWidth") }
       );
       matchUtilities(
         {
-          "border-x-w": (value) => ({
-            borderLeftWidth: `${value}`,
-            borderRightWidth: `${value}`,
-          }),
+          "border-x-w": (value) => ({ borderLeftWidth: value, borderRightWidth: value }),
         },
-        { values: theme("spacing") }
+        { values: theme("borderWidth") }
       );
       matchUtilities(
         {
-          "border-l-w": (value) => ({
-            borderLeftWidth: `${value}`,
-          }),
+          "border-y-w": (value) => ({ borderTopWidth: value, borderBottomWidth: value }),
         },
-        { values: theme("spacing") }
+        { values: theme("borderWidth") }
       );
       matchUtilities(
         {
-          "border-r-w": (value) => ({
-            borderRightWidth: `${value}`,
-          }),
+          "border-t-w": (value) => ({ borderTopWidth: value }),
         },
-        { values: theme("spacing") }
+        { values: theme("borderWidth") }
       );
       matchUtilities(
         {
-          "border-y-w": (value) => ({
-            borderTopWidth: `${value}`,
-            borderBottomWidth: `${value}`,
-          }),
+          "border-r-w": (value) => ({ borderRightWidth: value }),
         },
-        { values: theme("spacing") }
+        { values: theme("borderWidth") }
       );
       matchUtilities(
         {
-          "border-t-w": (value) => ({
-            borderTopWidth: `${value}`,
-          }),
+          "border-b-w": (value) => ({ borderBottomWidth: value }),
         },
-        { values: theme("spacing") }
+        { values: theme("borderWidth") }
       );
       matchUtilities(
         {
-          "border-b-w": (value) => ({
-            borderBottomWidth: `${value}`,
-          }),
+          "border-l-w": (value) => ({ borderLeftWidth: value }),
         },
-        { values: theme("spacing") }
-      );*/
+        { values: theme("borderWidth") }
+      );
       addUtilities({
         ".shape-geometric-precision": {
           "shape-rendering": "geometricPrecision",