cranberries

src/interface/components/FormOperation.vue

@@ -12,7 +12,7 @@
       <button
         type="button"
         name="Delete condition"
-        class="my-auto flex-shrink-0 p-1 btn--raised btn--grows bg-[#AD4040] text-[#FED7D7]  rounded-full"
+        class="my-auto flex-shrink-0 p-1 btn--raised btn--grows bg-cranberry-700 text-cranberry-300  rounded-full"
         @click="emitDelete"
       >
         <TrashIcon class="h-5 w-5" />

src/interface/components/FormOperationsArrays.vue

@@ -16,7 +16,7 @@
       > 
         <div
           class="relative rounded-md transition duration-75"
-          :class="statuses[index] === 'ready to delete' ? 'ring ring-[#AD4040] ring-offset-4 ring-offset-denim-1000' : ''"
+          :class="statuses[index] === 'ready to delete' ? 'ring ring-cranberry-700 ring-offset-4 ring-offset-denim-1000' : ''"
         >
           <FormOperations
             :modelValue="operations"
@@ -27,7 +27,7 @@
             <button
               type="button"
               name="Delete condition"
-              class="p-2 text-base rounded-full bg-[#AD4040] text-[#FED7D7] flex-shrink-0 text-denim-100"
+              class="p-2 text-base rounded-full bg-cranberry-700 text-cranberry-300 flex-shrink-0 text-denim-100"
               @click="() => operationsArrayDelete(index)"
               @mouseenter="() => readyToDelete(index)"
               @focus="() => readyToDelete(index)"

src/interface/components/PopoverHelp.vue

@@ -29,6 +29,8 @@
               <p>This is a user interface for building CSS selectors, and for learning what types of CSS selectors are available.</p>
 
               <p>Use the <strong class="bg-gradient-to-r from-violet-600 to-violet-400 bg-clip-text text-transparent">plus button</strong> to start adding conditions for your selector, and use the <strong class="bg-gradient-to-r from-violet-600 to-violet-400 bg-clip-text text-transparent">OR button</strong> to combine a separate selector with the others that you've built.</p>
+
+              <p>Careful with the <strong class="bg-gradient-to-r from-cranberry-700 to-cranberry-500 bg-clip-text text-transparent">delete button</strong>! The small one deletes individual conditions, but the big one can delete an entire selector.</p>
 
               <p>As you build, you'll see the URL update with any new selector conditions you've created. You can <strong class="bg-gradient-to-r from-violet-600 to-violet-400 bg-clip-text text-transparent">share that URL</strong> with anyone to show them what you've built!</p>
             </article>

tailwind.config.js

@@ -25,6 +25,11 @@ module.exports = {
           '1100': '#0C1221',
           '1200': '#080D17',
         },
+        cranberry: {
+          '300': '#FED7D7',
+          '500': '#F58686',
+          '700': '#AD4040',
+        }
       },
       fontFamily: {
         sans: ['Inter', ...defaultTheme.fontFamily.sans],