Update to work with Keystone 1.1.0

Author: thomaskimura

.shopifyignore

@@ -3,4 +3,5 @@ tsconfig.json
 tailwind.config.js
 postcss.config.js
 vite.config.ts
-README.md
+README.md
+manifest.json

package.json

@@ -1,5 +1,7 @@
 {
   "name": "keystone",
+  "type": "commonjs",
+  "version": "1.1.0",
   "scripts": {
     "dev": "npm-run-all --parallel vite_dev shopify_dev",
     "pull": "shopify theme pull --nodelete --store brickspacetestingstore.myshopify.com",

src/css/base/forms.css

@@ -3,6 +3,25 @@
 /* ======= */
 
 @layer base {
+  /* minimum height */
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="number"],
+  input[type="url"],
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="week"],
+  input[type="time"],
+  input[type="search"],
+  input[type="tel"],
+  select,
+  select[multiple],
+  textarea {
+    @apply min-h-[44px];
+  }
+  
   /* basic inputs */
   input[type="text"],
   input[type="password"],
@@ -16,16 +35,23 @@
   input[type="time"],
   input[type="search"],
   input[type="tel"],
+  input,
   select,
   select[multiple],
   textarea {
-    @apply animation-300 w-full appearance-none py-1.5 px-4 min-h-[44px] border__input border__input--radius color__border-input color__bg-input border--input-padding;
+    @apply animation-300 border__input border__input--radius color__border-input color__bg-input border--input-padding w-full appearance-none px-4 py-1.5;
+    &::placeholder {
+      @apply !color__input;
+    }
     &:hover {
       @apply border__input--hover;
     }
     &:focus-visible {
       @apply border__input--focus color__bg-body;
     }
+    &:focus-visible::placeholder {
+      @apply !color__text;
+    }
   }
   textarea {
     @apply min-h-[88px];
@@ -52,7 +78,7 @@
   input[type="tel"],
   select,
   select[multiple] {
-    @apply border__input--radius
+    @apply border__input--radius;
   }
   textarea {
     @apply border__textarea--radius;
@@ -72,7 +98,7 @@
 
   /* checkboxes and radios */
   input[type="checkbox"] {
-    @apply cursor-pointer color__text color__border-divider-1 color__border-selected-1;
+    @apply color__text color__border-divider-1 color__border-selected-1 cursor-pointer;
     &:checked {
       @apply !color__bg-text color__text;
     }
@@ -84,7 +110,7 @@
     }
   }
   input[type="radio"] {
-    @apply rounded-full cursor-pointer color__text color__border-divider-1 color__border-selected-1;
+    @apply color__text color__border-divider-1 color__border-selected-1 cursor-pointer rounded-full;
     &:checked {
       @apply !color__bg-text color__text;
     }
@@ -96,16 +122,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 */

src/css/utilities/borders.css

@@ -3,7 +3,6 @@
 /* ======= */
 
 @layer utilities {
-
   /* ======= */
   /* default borders */
   /* - default border width */
@@ -91,7 +90,9 @@
     @apply !no-underline;
     outline: 2px solid transparent;
     outline-offset: 2px;
-    box-shadow: var(--color__background-body) 0px 0px 0px 2px, var(--color__border-selected-1) 0px 0px 0px 4px;
+    box-shadow:
+      var(--color__background-body) 0px 0px 0px 2px,
+      var(--color__border-selected-1) 0px 0px 0px 4px;
   }
   .border--focus--inset {
     box-shadow: inset var(--color__border-selected-1) 0px 0px 0px 2px;
@@ -135,7 +136,6 @@
 
   /* shadow */
   .shadow--blur {
-    box-shadow: 0px 0px 100px 10px rgb(0 0 0 / 0.30);
+    box-shadow: 0px 0px 100px 10px rgb(0 0 0 / 0.3);
   }
-
 }

src/css/utilities/colors.css

@@ -132,10 +132,9 @@
     * {
       color: var(--color__text-light);
     }
-  }
-  .color__text::placeholder {
-    color: var(--color__text-light);
-    opacity: 0.75 !important;
+    *::placeholder, ::placeholder {
+      color: var(--color__text-light);
+    }
   }
 
   /* force text color, dark color that contrasts on light background */
@@ -144,10 +143,9 @@
     * {
       color: var(--color__text-light);
     }
-  }
-  .color__dark::placeholder {
-    color: var(--color__text-light) !important;
-    opacity: 0.75 !important;
+    *::placeholder, ::placeholder {
+      color: var(--color__text-light);
+    }
   }
 
   /* force text color, light color that contrasts on dark background */
@@ -156,10 +154,9 @@
     * {
       color: var(--color__text-dark);
     }
-  }
-  .color__light::placeholder {
-    color: var(--color__text-dark) !important;
-    opacity: 0.75 !important;
+    *::placeholder, ::placeholder {
+      color: var(--color__text-dark);
+    }
   }
 
   /* - link */
@@ -168,6 +165,9 @@
     * {
       color: var(--color__text-link);
     }
+    *::placeholder, ::placeholder {
+      color: var(--color__text-link);
+    }
   }
 
   /* - primary */
@@ -176,6 +176,9 @@
     * {
       color: var(--color__foreground-primary);
     }
+    *::placeholder, ::placeholder {
+      color: var(--color__foreground-primary);
+    }
   }
 
   /* - secondary */
@@ -184,6 +187,9 @@
     * {
       color: var(--color__foreground-secondary);
     }
+    *::placeholder, ::placeholder {
+      color: var(--color__foreground-secondary);
+    }
   }
 
   /* - tertiary */
@@ -192,6 +198,9 @@
     * {
       color: var(--color__foreground-tertiary);
     }
+    *::placeholder, ::placeholder {
+      color: var(--color__foreground-tertiary);
+    }
   }
 
   /* - neutral */
@@ -200,6 +209,9 @@
     * {
       color: var(--color__foregound-neutral);
     }
+    *::placeholder, ::placeholder {
+      color: var(--color__foreground-neutral);
+    }
   }
 
   /* - transparent */
@@ -208,6 +220,9 @@
     * {
       color: transparent;
     }
+    *::placeholder, ::placeholder {
+      color: transparent;
+    }
   }
 
   /* - inherit */
@@ -216,6 +231,17 @@
     * {
       color: inherit;
     }
+    *::placeholder, ::placeholder {
+      color: inherit;
+    }
+  }
+
+  /* inputs */
+  .color__input {
+    color: var(--inputs__text);
+    * {
+      color: var(--inputs__text);
+    }
   }
 
   /* ======= */

src/entrypoints/styles.css

@@ -50,18 +50,18 @@ html {
 }
 
 /* - fix for firefox range slider */
-input[type=range]::-moz-range-thumb {
-	pointer-events: all;
+input[type="range"]::-moz-range-thumb {
+  pointer-events: all;
   cursor: pointer;
-	-moz-appearance: none;
-	width: 32px;
-	height: 24px;
-/* @apply w-6 h-6 appearance-none pointer-events-auto; */
+  -moz-appearance: none;
+  width: 32px;
+  height: 24px;
+  /* @apply w-6 h-6 appearance-none pointer-events-auto; */
 }
 
 /* - strikethrough */
 .strikethrough {
-  @apply line-through decoration-2 decoration-[#00000050];
+  @apply line-through decoration-[#00000050] decoration-2;
 }
 
 /* - reset line-height */
@@ -104,9 +104,8 @@ input[type=range]::-moz-range-thumb {
 
 /* video */
 video::-webkit-media-controls-enclosure {
-  width:100%;
+  width: 100%;
   overflow: hidden;
-
 }
 video::-webkit-media-controls-panel {
   padding: var(--sizes__gap-width);
@@ -122,7 +121,7 @@ video::-webkit-media-controls-panel {
   @apply hidden;
 }
 .customscrollbar::-webkit-scrollbar {
-  @apply w-1 h-1 px-4 m-auto opacity-50;
+  @apply m-auto h-1 w-1 px-4 opacity-50;
 }
 .customscrollbar::-webkit-scrollbar-track {
   @apply color__bg-overlay-2 border__button--radius;
@@ -136,7 +135,7 @@ video::-webkit-media-controls-panel {
 
 /* - flag icons */
 .fi {
-  @apply relative inline-block pr-2 bg-center bg-no-repeat bg-contain rounded-full border--width color__border-divider-2;
+  @apply border--width color__border-divider-2 relative inline-block rounded-full bg-contain bg-center bg-no-repeat pr-2;
   width: 1.33333333em;
   line-height: 1em;
 }
@@ -203,4 +202,4 @@ video::-webkit-media-controls-panel {
 }
 .shopify-payment-button__more-options {
   @apply !color__bg-overlay-1 px-6 py-2;
-}
+}

src/prompts/DeleteThemes.md

@@ -0,0 +1,13 @@
+As a Shopify CLI expert, please analyze the provided theme list and generate commands to safely delete development themes. Your task is to:
+
+1. Identify development themes from the provided list
+2. Generate properly formatted CLI commands to delete these themes
+3. Exclude any production, live, or published themes from deletion
+
+Please provide:
+
+1. A list of themes that will be deleted
+2. The corresponding deletion commands in the format: `shopify theme delete --theme --force [THEMEID]`
+3. Any warnings or considerations before executing the commands
+
+When providing commands, ensure they follow the correct Shopify CLI syntax and include the --force flag for non-interactive deletion.

src/prompts/FormatJavaScript.md

@@ -0,0 +1,40 @@
+1. Indentation:
+
+   - Use consistent indentation throughout the code (2 spaces)
+   - Indent nested elements properly to improve readability
+
+2. Braces and Parentheses:
+
+   - Place opening braces on the same line as the statement or declaration
+   - Use a single space before the opening brace
+   - Place closing braces on a new line
+   - Use a single space after keywords like `if`, `for`, `while`, etc.
+   - Do not use spaces inside parentheses
+
+3. Semicolons:
+
+   - Always use semicolons at the end of statements
+
+4. Comments:
+
+   - Add comments to explain complex or non-obvious code sections
+   - Use comments to describe the purpose or functionality of specific functions or blocks of code
+   - Use single-line comments (`//`) for brief comments
+   - Use multi-line comments (`/* */`) for longer comments or to temporarily disable code
+
+5. Naming Conventions:
+
+   - Use camelCase for variable and function names
+   - Use PascalCase for constructor functions and class names
+   - Use UPPERCASE for constants
+   - Use descriptive and meaningful names
+
+6. Whitespace:
+
+   - Remove unnecessary whitespace, such as trailing spaces or multiple blank lines
+   - Add appropriate spacing around operators, commas, and after keywords
+   - Use blank lines to separate logical sections of code
+
+7. Line Length:
+   - Limit line length to a maximum of 80 characters for better readability
+   - If a line exceeds the limit, break it into multiple lines and indent accordingly