Merge from Space v2.2.0

Author: thomaskimura

.DS_Store

@@ -1,9 +1,10 @@
 {
-  "name": "space-toolkit",
+  "name": "space",
+  "version": "2.2.0",
   "scripts": {
     "dev": "npm-run-all --parallel vite_dev shopify_dev",
-    "pull": "shopify theme pull --nodelete --store brickspacetestingstore.myshopify.com",
-    "shopify_dev": "shopify theme dev --store brickspacetestingstore.myshopify.com",
+    "pull": "shopify theme pull --nodelete --store high-variant-combined-testing-store.myshopify.com",
+    "shopify_dev": "shopify theme dev --store high-variant-combined-testing-store.myshopify.com",
     "vite_dev": "vite dev",
     "test": "vitest",
     "coverage": "vitest run --coverage",
@@ -17,30 +18,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@shopify/prettier-plugin-liquid": "^1.5.2",
+    "@shopify/prettier-plugin-liquid": "^1.6.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/forms": "^0.5.9",
     "autoprefixer": "^10.4.20",
-    "jsdom": "^21.1.1",
+    "jsdom": "^25.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.47",
-    "postcss-import": "^15.1.0",
-    "postcss-nested": "^6.0.1",
-    "prettier": "^3.1.0",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "^3.4.13",
-    "vite": "^4.2.0",
-    "vite-plugin-shopify": "^2.0.2",
-    "vitest": "^0.29.7"
+    "postcss": "^8.4.49",
+    "postcss-import": "^16.1.0",
+    "postcss-nested": "^7.0.2",
+    "prettier": "^3.4.1",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^3.4.15",
+    "vite": "^5.4.11",
+    "vite-plugin-shopify": "^3.1.0",
+    "vitest": "^2.1.8"
   },
   "dependencies": {
-    "@alpinejs/focus": "^3.12.0",
-    "@alpinejs/intersect": "^3.12.0",
-    "@alpinejs/persist": "^3.12.0",
-    "alpinejs": "^3.12.0",
-    "instant.page": "5.1.1"
+    "@alpinejs/focus": "^3.14.6",
+    "@alpinejs/intersect": "^3.14.6",
+    "@alpinejs/persist": "^3.14.6",
+    "alpinejs": "^3.14.6",
+    "instant.page": "5.2.0"
   },
   "config": {
-    "store": "brickspacetestingstore.myshopify.com"
+    "store": "high-variant-combined-testing-store.myshopify.com"
   }
 }

package-lock.json

@@ -1,8 +1,8 @@
 module.exports = {
   plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
-  }
-}
+  },
+};

package.json

@@ -3,7 +3,6 @@
 /* ======= */
 
 @layer base {
-  
   /* basic inputs */
   input[type="text"],
   input[type="password"],
@@ -20,7 +19,7 @@
   select,
   select[multiple],
   textarea {
-    @apply animation-300 border__input min-h-[44px] w-full appearance-none py-1.5 color__border-input color__bg-input color__input border--input-padding;
+    @apply animation-300 border__input color__border-input color__bg-input color__input border--input-padding min-h-[44px] w-full appearance-none py-1.5;
     &:hover {
       @apply border__input--hover;
     }
@@ -44,7 +43,7 @@
   input[type="tel"],
   select,
   select[multiple] {
-    @apply border__input--radius
+    @apply border__input--radius;
   }
   textarea {
     @apply border__textarea--radius;
@@ -64,7 +63,7 @@
 
   /* checkboxes and radios */
   input[type="checkbox"] {
-    @apply cursor-pointer color__link color__border-input;
+    @apply color__link color__border-input cursor-pointer;
     &:checked {
       @apply bg-current;
     }
@@ -76,7 +75,7 @@
     }
   }
   input[type="radio"] {
-    @apply rounded-full cursor-pointer color__link color__border-input;
+    @apply color__link color__border-input cursor-pointer rounded-full;
     &:checked {
       @apply bg-current;
     }
@@ -88,16 +87,20 @@
     }
   }
 
-  [type='checkbox']:focus, [type='radio']:focus {
+  [type="checkbox"]:focus,
+  [type="radio"]:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
     --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
     --tw-ring-offset-width: 2px;
     --tw-ring-offset-color: var(--color__background-body);
     --tw-ring-color: var(--color__border-selected-1);
-    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
   }
 
   /* buttons */

postcss.config.js

@@ -7,7 +7,7 @@
     @apply relative;
   }
   img:after {
-    @apply items-center justify-center hidden md:type--smaller color__text md:absolute md:top-0 md:flex md:h-full md:w-full md:flex-col md:justify-center md:whitespace-normal md:p-4 md:text-center color__bg-overlay-1;
+    @apply md:type--smaller color__text color__bg-overlay-1 hidden items-center justify-center md:absolute md:top-0 md:flex md:h-full md:w-full md:flex-col md:justify-center md:whitespace-normal md:p-4 md:text-center;
     content: "" attr(alt) !important;
   }
 }

src/css/base/forms.css

@@ -3,7 +3,6 @@
 /* ======= */
 
 @layer base {
-
   /* body */
   html,
   body,
@@ -72,31 +71,32 @@
     @apply type__body text-[16px];
   }
   label {
-    @apply cursor-pointer type__body type--small;
+    @apply type__body type--small cursor-pointer;
   }
 
   /* links  */
   a {
-    @apply underline animation-300;
+    @apply animation-300 underline;
 
     &:hover {
       @apply underline md:opacity-75;
     }
 
-    @media (max-width:1024px) {
+    @media (max-width: 1024px) {
       &:focus {
         @apply border--focus-simple;
       }
     }
-    @media (min-width:1024px) {
+    @media (min-width: 1024px) {
       &:focus-visible {
         @apply border--focus;
       }
     }
   }
 
   /* spacing */
-  .rte, #product-description {
+  .rte,
+  #product-description {
     @apply space-y-4;
   }
   .rte {
@@ -105,10 +105,10 @@
     }
   }
   ul {
-    @apply pl-4 list-disc;
+    @apply list-disc pl-4;
   }
   ol {
-    @apply pl-4 list-decimal;
+    @apply list-decimal pl-4;
   }
 
   /* font weight */
@@ -121,5 +121,4 @@
     background: none;
     font-weight: bold;
   }
-  
 }

src/css/base/images.css

@@ -4,7 +4,7 @@
 @layer components {
   /* standard button */
   .btn {
-    @apply type__nav border__button--radius color__button-primary border__button animation-500 inline-flex w-auto cursor-pointer items-center justify-center overflow-hidden px-6 py-2 text-center animation-300 !no-underline;
+    @apply type__nav border__button--radius color__button-primary border__button animation-500 animation-300 inline-flex w-auto cursor-pointer items-center justify-center overflow-hidden px-6 py-2 text-center !no-underline;
     text-transform: var(--type__button-capiliziation) !important;
 
     * {
@@ -13,7 +13,7 @@
     }
 
     &__content {
-      @apply flex items-center type__nav;
+      @apply type__nav flex items-center;
     }
 
     /* states */
@@ -27,24 +27,24 @@
     }
     &--disabled,
     &:disabled {
-      @apply opacity-50 cursor-not-allowed;
+      @apply cursor-not-allowed opacity-50;
     }
 
     /* sizes */
     &--small {
-      @apply px-4 type--small;
+      @apply type--small px-4;
     }
     &--small > * {
       @apply type--small;
     }
     &--smaller {
-      @apply px-4 py-1 type--smaller;
+      @apply type--smaller px-4 py-1;
     }
     &--smaller > * {
       @apply type--smaller;
     }
     &--big {
-      @apply py-3 type--big px-9;
+      @apply type--big px-9 py-3;
     }
     &--big > * {
       @apply type--big;
@@ -69,7 +69,7 @@
     &--unshade {
       @apply color__button-unshade backdrop-blur-sm;
     }
-    &--diff{
+    &--diff {
       background-color: #fff;
       border-color: #fff;
       color: #000;
@@ -100,12 +100,12 @@
     &--minimal {
       background-color: transparent;
       color: var(--color__text-light);
-      @apply min-w-0 min-h-0 p-0 normal-case border-none rounded-none type__body;
+      @apply type__body min-h-0 min-w-0 rounded-none border-none p-0 normal-case;
       &:hover {
-        @apply shadow-none border--focus-simple;
+        @apply border--focus-simple shadow-none;
       }
       &:focus-visible {
-        @apply shadow-none border--focus-simple;
+        @apply border--focus;
       }
       * {
         color: var(--color__text-light);
@@ -115,12 +115,12 @@
     &--minimal-alt {
       background-color: transparent;
       color: var(--color__text-dark);
-      @apply min-w-0 min-h-0 p-0 normal-case border-none rounded-none type__body;
+      @apply type__body min-h-0 min-w-0 rounded-none border-none p-0 normal-case;
       &:hover {
-        @apply shadow-none border--focus-simple;
+        @apply border--focus-simple shadow-none;
       }
       &:focus-visible {
-        @apply shadow-none border--focus-simple;
+        @apply border--focus;
       }
       * {
         color: var(--color__text-dark);
@@ -137,9 +137,9 @@
     }
     /* - make sure spinner is spinner */
     &__spinner {
-      @apply absolute flex items-center justify-center invisible w-11/12 transform left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 bg-inherit;
+      @apply invisible absolute left-2/4 top-2/4 flex w-11/12 -translate-x-2/4 -translate-y-2/4 transform items-center justify-center bg-inherit;
       svg {
-        @apply m-0 m-auto animate-spin-slow;
+        @apply animate-spin-slow m-0 m-auto;
       }
     }
     /* - when loading class used, hide content and show spinner */

src/css/base/typography.css

@@ -26,18 +26,18 @@
   .max--wide {
     @apply md:max-w-[96vw] lg:max-w-[92vw] xl:max-w-[88vw];
   }
-  
+
   /* scroll containers */
   .scrollwindow--narrow {
-    @apply scroll-px-4 px-4 m-auto md:scroll-px-[8vw] lg:scroll-px-[16vw] xl:scroll-px-[24vw] md:px-[8vw] lg:px-[16vw] xl:px-[24vw];
+    @apply m-auto scroll-px-4 px-4 md:scroll-px-[8vw] md:px-[8vw] lg:scroll-px-[16vw] lg:px-[16vw] xl:scroll-px-[24vw] xl:px-[24vw];
   }
   .scrollwindow {
-    @apply scroll-px-4 px-4 m-auto md:scroll-px-[4vw] lg:scroll-px-[8vw] xl:scroll-px-[12vw] md:px-[4vw] lg:px-[8vw] xl:px-[12vw];
+    @apply m-auto scroll-px-4 px-4 md:scroll-px-[4vw] md:px-[4vw] lg:scroll-px-[8vw] lg:px-[8vw] xl:scroll-px-[12vw] xl:px-[12vw];
   }
   .scrollwindow--wide {
-    @apply scroll-px-4 px-4 m-auto md:scroll-px-[2vw] lg:scroll-px-[4vw] xl:scroll-px-[6vw] md:px-[2vw] lg:px-[4vw] xl:px-[6vw];
+    @apply m-auto scroll-px-4 px-4 md:scroll-px-[2vw] md:px-[2vw] lg:scroll-px-[4vw] lg:px-[4vw] xl:scroll-px-[6vw] xl:px-[6vw];
   }
   .scrollwindow--full {
-    @apply scroll-px-4 px-4 m-auto;
+    @apply m-auto scroll-px-4 px-4;
   }
 }

src/css/components/buttons.css

@@ -3,7 +3,6 @@
 /* ======= */
 
 @layer utilities {
-  
   /* animation timing */
   /* - add classes to any element to enable animation at set duration */
   /* - add --all to transition all properties, using class without --all will only transition default css values */
@@ -64,7 +63,6 @@
   /* scroll animations */
   /* - will only work where animation-range supports a percentage */
   @supports (animation-range: 10%) {
-    
     /* blur and zoom in animation, used in banners */
     .scroll-blurinzoom-2-20 {
       filter: blur(8px);
@@ -106,9 +104,7 @@
       animation-timeline: view();
       animation-range: var(--offset-1) var(--offset-2);
     }
-
   }
-  
 }
 
 @keyframes spin {
@@ -122,13 +118,13 @@
 
 @keyframes hop {
   0% {
-   transform: 'translateY(0)'
+    transform: "translateY(0)";
   }
   50% {
-     transform: 'translateY(-50%)'
+    transform: "translateY(-50%)";
   }
   100% {
-    transform: 'translateY(0)'
+    transform: "translateY(0)";
   }
 }
 
@@ -214,4 +210,4 @@
   100% {
     opacity: 0.1;
   }
-}
+}