Update toolkit for Paper 7.6.0

BrickspaceLab · Oct 11, 2024 · 350a897 · 350a897
1 parent e6a04c3
commit 350a897
Show file tree

Hide file tree

Showing 15 changed files with 4,212 additions and 632 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,9 +1,13 @@
 {
-  "name": "paper-toolkit",
+  "name": "paper",
+  "version": "7.6.0",
+  "description": "A feature rich and utilitarian Shopify theme",
   "scripts": {
     "dev": "npm-run-all --parallel vite_dev shopify_dev",
-    "pull": "shopify theme pull --nodelete --store $npm_package_config_store",
-    "shopify_dev": "shopify theme dev --store $npm_package_config_store",
+    "dev_sync": "npm-run-all --parallel vite_dev shopify_dev_sync",
+    "pull": "shopify theme pull --nodelete --store brickspacetestingstore.myshopify.com",
+    "shopify_dev": "shopify theme dev --store brickspacetestingstore.myshopify.com",
+    "shopify_dev_sync": "shopify theme dev --theme-editor-sync --store brickspacetestingstore.myshopify.com",
     "vite_dev": "vite dev",
     "test": "vitest",
     "coverage": "vitest run --coverage",
@@ -19,11 +23,11 @@
   "devDependencies": {
     "@shopify/prettier-plugin-liquid": "^1.0.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.9",
-    "autoprefixer": "^10.4.14",
+    "@tailwindcss/forms": "^0.5.7",
+    "autoprefixer": "^10.4.20",
     "jsdom": "^21.1.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.47",
     "postcss-import": "^15.1.0",
     "postcss-nested": "^6.0.1",
     "prettier": "^2.8.7",
@@ -37,10 +41,9 @@
     "@alpinejs/focus": "^3.12.0",
     "@alpinejs/intersect": "^3.12.0",
     "@alpinejs/persist": "^3.12.0",
+    "@by-association-only/vite-plugin-shopify-clean": "^1.0.1",
     "alpinejs": "^3.12.0",
+    "import": "^0.0.6",
     "instant.page": "5.1.1"
-  },
-  "config": {
-    "store": "paper-theme.myshopify.com"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,8 +1,8 @@
 module.exports = {
-  plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
-  }
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss'),
+    require('autoprefixer')
+  ]
 }
diff --git a/src/css/base/forms.css b/src/css/base/forms.css
@@ -19,15 +19,15 @@
   select,
   select[multiple],
   textarea {
-    @apply color__bg-overlay-1 animation-500 border__input--radius w-full appearance-none px-3 py-1.5 min-h-[44px] border__input;
+    @apply animation-500 border__input--radius w-full appearance-none px-3 py-1.5 min-h-[44px] border__input color__border-input color__bg-input border--input-padding;
     &::placeholder {
       @apply opacity-50 color__text;
     }
     &:hover {
       @apply border__input--hover;
     }
     &:focus-visible {
-      @apply border__input--focus color__bg-body;
+      @apply border__input--focus;
     }
   }
 
@@ -41,26 +41,26 @@
 
   /* checkboxes and radios */
   input[type="checkbox"] {
-    @apply cursor-pointer color__link color__bg-overlay-1 border__input;
+    @apply cursor-pointer color__text color__border-divider-1 color__border-selected-1;
     &:checked {
-      @apply bg-current !important;
+      @apply color__text !important;
     }
     &:hover {
       @apply border__input--hover;
     }
-    &:focus-visible {
+    &:focus {
       @apply border__input--focus;
     }
   }
   input[type="radio"] {
-    @apply rounded-full cursor-pointer color__link color__bg-overlay-1 border__input;
+    @apply rounded-full cursor-pointer color__text color__border-divider-1 color__border-selected-1;
     &:checked {
-      @apply bg-current !important;
+      @apply color__text !important;
     }
     &:hover {
       @apply border__input--hover;
     }
-    &:focus-visible {
+    &:focus {
       @apply border__input--focus;
     }
   }

diff --git a/src/css/base/images.css b/src/css/base/images.css
@@ -7,7 +7,7 @@
     @apply relative;
   }
   img:after {
-    @apply md:absolute md:type--smaller md:top-0 md:flex md:flex-col md:justify-center md:w-full md:h-full md:p-4 md:text-center md:whitespace-normal color__text items-center justify-center hidden;
+    @apply z-10 items-center justify-center hidden md:absolute md:type--smaller md:top-0 md:flex md:flex-col md:justify-center md:w-full md:h-full md:p-4 md:text-center md:whitespace-normal color__text color__bg-overlay-1;
     content: "" attr(alt) !important;
   }
 }
diff --git a/src/css/components/buttons.css b/src/css/components/buttons.css
@@ -4,22 +4,22 @@
 @layer components {
   /* standard button */
   .btn {
-    @apply type__nav border__button--radius color__button-primary border__button animation-500 inline-flex items-center justify-center w-auto px-6 py-2 overflow-hidden text-center no-underline cursor-pointer min-h-[44px] min-w-[44px];
-    text-transform: var(--type-button-capiliziation);
+    @apply inline-flex items-center justify-center w-auto px-6 py-2 overflow-hidden text-center no-underline cursor-pointer type__nav border__button--radius color__button-primary border__button animation-500;
+    text-transform: var(--type__button-capiliziation);
 
     * {
       @apply type__nav;
-      text-transform: var(--type-button-capiliziation);
+      text-transform: var(--type__button-capiliziation);
     }
 
     &__content {
-      @apply type__nav flex items-center;
+      @apply flex items-center type__nav;
     }
 
     /* states */
     &--hover,
     &:hover {
-      @apply border__button--hover no-underline opacity-75;
+      @apply no-underline opacity-75 border__button--hover;
     }
     &--focus,
     &:focus {
@@ -32,19 +32,19 @@
 
     /* sizes */
     &--small {
-      @apply type--small px-3;
+      @apply px-3 type--small;
     }
     &--small > * {
       @apply type--small;
     }
     &--smaller {
-      @apply type--smaller px-3 py-1;
+      @apply px-3 py-1 type--smaller;
     }
     &--smaller > * {
       @apply type--smaller;
     }
     &--big {
-      @apply type--big px-9 py-3;
+      @apply py-3 type--big px-9;
     }
     &--big > * {
       @apply type--big;
@@ -74,9 +74,9 @@
     }
     /* - make sure spinner is spinner */
     &__spinner {
-      @apply left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 bg-inherit absolute flex items-center justify-center invisible w-11/12 transform;
+      @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;
       svg {
-        @apply animate-spin-slow m-0 m-auto;
+        @apply m-0 m-auto animate-spin-slow;
       }
     }
     /* - when loading class used, hide content and show spinner */

diff --git a/src/css/utilities/animation.css b/src/css/utilities/animation.css
@@ -10,6 +10,9 @@
   .animation-300 {
     @apply transition duration-300;
   }
+  .animation-300--all {
+    @apply transition-all duration-300;
+  }
   .animation-500 {
     @apply transition duration-500;
   }

diff --git a/src/css/utilities/borders.css b/src/css/utilities/borders.css
@@ -7,57 +7,62 @@
   /* default borders */
   /* - default border width */
   .outline--width {
-    outline-width: var(--sizes__border-element-width);
+    outline-width: var(--size__border-element-width);
     outline-style: solid;
   }
   .border--width {
-    border-width: var(--sizes__border-element-width);
+    border-width: var(--size__border-element-width);
   }
   .border--t-width {
-    border-top-width: var(--sizes__border-element-width);
+    border-top-width: var(--size__border-element-width);
   }
   .border--r-width {
-    border-right-width: var(--sizes__border-element-width);
+    border-right-width: var(--size__border-element-width);
   }
   .border--b-width {
-    border-bottom-width: var(--sizes__border-element-width);
+    border-bottom-width: var(--size__border-element-width);
   }
   .border--l-width {
-    border-left-width: var(--sizes__border-element-width);
+    border-left-width: var(--size__border-element-width);
   }
   .border--button-width {
-    border-width: var(--sizes__border-button-width);
+    border-width: var(--size__border-button-width);
   }
   .border--t-button-width {
-    border-top-width: var(--sizes__border-button-width);
+    border-top-width: var(--size__border-button-width);
   }
   .border--r-button-width {
-    border-right-width: var(--sizes__border-button-width);
+    border-right-width: var(--size__border-button-width);
   }
   .border--b-button-width {
-    border-bottom-width: var(--sizes__border-button-width);
+    border-bottom-width: var(--size__border-button-width);
   }
   .border--l-button-width {
-    border-left-width: var(--sizes__border-button-width);
+    border-left-width: var(--size__border-button-width);
   }
   .border--input-width {
-    border-width: var(--sizes__border-input-width);
+    border-width: var(--size__border-input-width);
   }
   .border--t-input-width {
-    border-top-width: var(--sizes__border-input-width);
+    border-top-width: var(--sizes__border-input-width-top);
   }
   .border--r-input-width {
-    border-right-width: var(--sizes__border-input-width);
+    border-right-width: var(--sizes__border-input-width-right);
   }
   .border--b-input-width {
-    border-bottom-width: var(--sizes__border-input-width);
+    border-bottom-width: var(--sizes__border-input-width-bottom);
   }
   .border--l-input-width {
-    border-left-width: var(--sizes__border-input-width);
+    border-left-width: var(--sizes__border-input-width-left);
   }
+  .border--input-padding {
+    padding-left: var(--sizes__border-input-padding-left);
+    padding-right: var(--sizes__border-input-padding-right);
+  }
+
   /* - default border raidus */
   .border--radius {
-    border-radius: var(--sizes-border-element-radius);
+    border-radius: var(--size__element-radius);
   }
   .mobile-border--radius-t-0 {
     @media (max-width: 768px) {
@@ -71,18 +76,19 @@
       border-bottom-right-radius: 0;
     }
   }
+
   /* - default focus border */
   .border--focus {
-    box-shadow: var(--color__bg-body-light) 0px 0px 0px 2px,
-      var(--color__border-selected-light-1) 0px 0px 0px 4px;
+    box-shadow: var(--color__background-body) 0px 0px 0px 2px,
+      var(--color__border-selected-1) 0px 0px 0px 4px;
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
   .border--focus--inset {
     box-shadow: none;
-    outline: 2px solid var(--color__bg-body-light);
+    outline: 2px solid var(--color__background-body);
     outline-offset: -4px;
-    border: 2px solid var(--color__border-selected-light-1) !important;
+    border: 2px solid var(--color__border-selected-1) !important;
   }
 
   /* ======= */
@@ -96,22 +102,22 @@
   .border__button--hover {
   }
   .border__button--radius {
-    border-radius: var(--sizes-border-button-radius);
+    border-radius: var(--size__button-radius);
   }
 
   /* ======= */
   /* input borders */
   .border__input {
-    @apply border--input-width color__border-divider-2;
+    @apply border--t-input-width border--r-input-width border--b-input-width border--l-input-width;
   }
   .border__input--focus {
-    @apply border--focus color__border-divider-2;
+    @apply border--focus color__border-selected-1;
   }
   .border__input--hover {
     @apply color__border-selected-1;
   }
   .border__input--radius {
-    border-radius: var(--sizes-border-input-radius);
+    border-radius: var(--size__input-radius);
   }
 
 }