@central-ui/react 0.1.2 → 0.3.0

package/src/presets/shopify-polaris/shopify-polaris-exception.css

@@ -0,0 +1,40 @@
+/* exception */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='exception-surface']) {
+      @apply flex h-full w-full flex-1 flex-col items-center justify-center p-4;
+    }
+
+    &:where([data-component='exception-body']) {
+      @apply flex h-fit w-full max-w-150 flex-col items-center justify-center gap-1;
+    }
+
+    &:where([data-component='exception-title']) {
+      @apply text-sm font-semibold text-center text-neutral-950;
+    }
+
+    &:where([data-component='exception-title'][data-tone='critical']) {
+      @apply text-red-700;
+    }
+
+    &:where([data-component='exception-description']) {
+      @apply text-sm font-normal text-center text-neutral-600;
+    }
+
+    &:where([data-component='exception-image']) {
+      @apply mb-4 h-16 w-fit;
+    }
+
+    &:where([data-component='exception-icon']) {
+      @apply mb-2 h-8 w-fit text-neutral-950;
+    }
+
+    &:where([data-component='exception-actionslist']) {
+      @apply mt-3 flex w-fit items-center gap-4;
+    }
+
+    &:where([data-component='exception-helptext']) {
+      @apply mt-3 text-xs text-center text-neutral-500;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-fileupload.css

@@ -13,7 +13,7 @@
       @apply bg-white flex w-full cursor-pointer flex-col items-center gap-1 rounded-xl border border-dashed border-neutral-300 p-8 pt-8 shadow-xs hover:bg-neutral-50 data-[dragging]:border-blue-500 data-[dragging]:bg-blue-50;
     }
 
-    &:where([data-component='fileupload-filepickeropenbutton']) {
+    &:where([data-component='fileupload-pickerbutton']) {
       @apply mt-2 relative flex w-fit cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default min-h-7 px-4 py-1 text-[0.8rem] leading-4;
       &:not(:disabled) {
         @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300 aria-expanded:bg-neutral-300;

package/src/presets/shopify-polaris/shopify-polaris-horizontalbarchart.css

@@ -0,0 +1,60 @@
+/* horizontalbarchart */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='horizontalbarchart-gridline']) {
+      @apply stroke-neutral-200;
+    }
+
+    &:where([data-component='horizontalbarchart-xaxis-ticklabel']) {
+      @apply fill-neutral-500;
+    }
+
+    &:where([data-component='horizontalbarchart-xaxis-line']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='horizontalbarchart-xaxis-tickline']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='horizontalbarchart-hoverguide']) {
+      @apply stroke-neutral-400/50;
+    }
+
+    &:where([data-component='horizontalbarchart-bar']) {
+      @apply fill-[#13ACF0];
+    }
+
+    &:where([data-component='horizontalbarchart-bar'])[data-active] {
+      @apply opacity-80;
+    }
+
+    &:where([data-component='horizontalbarchart-label']) {
+      @apply fill-neutral-500;
+    }
+
+    &:where([data-component='horizontalbarchart-value']) {
+      @apply fill-neutral-500;
+    }
+
+    &:where([data-component='horizontalbarchart-tooltip']) {
+      @apply grid min-w-56 grid-cols-[auto_1fr] items-center gap-x-1 gap-y-2 rounded-md border border-neutral-700 bg-neutral-900 p-2.5 shadow-md;
+    }
+
+    &:where([data-component='horizontalbarchart-tooltiptitle']) {
+      @apply col-span-full row-start-1 text-xs font-semibold leading-4 text-neutral-200;
+    }
+
+    &:where([data-component='horizontalbarchart-tooltiplabel']) {
+      @apply col-start-2 row-start-2 text-xs font-medium leading-4 text-neutral-400;
+    }
+
+    &:where([data-component='horizontalbarchart-tooltipvalue']) {
+      @apply col-span-full row-start-3 justify-self-start rounded-md bg-neutral-600 px-1.25 py-0.5 font-mono text-sm font-medium leading-5 text-neutral-200 tabular-nums;
+    }
+
+    &:where([data-component='horizontalbarchart-tooltipcolorindicator']) {
+      @apply col-start-1 row-start-2 h-2.5 w-2.5 rounded-sm bg-[#13ACF0];
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-input.css

@@ -7,10 +7,10 @@
 
     &:where([data-component='input-inputgroup']) {
       @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-300 bg-white text-[0.8rem] text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/10 focus-within:shadow-sm data-disabled:cursor-not-allowed data-disabled:border-neutral-200 data-disabled:bg-white data-disabled:text-neutral-400 data-disabled:shadow-none data-disabled:hover:bg-white data-readonly:cursor-not-allowed data-readonly:border-neutral-200 data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50 data-readonly:shadow-none;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 focus-within:border-green-600 focus-within:ring-green-600/10;
       }
     }

package/src/presets/shopify-polaris/shopify-polaris-linechart.css

@@ -0,0 +1,68 @@
+/* linechart */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='linechart-gridline']) {
+      @apply stroke-neutral-200;
+    }
+
+    &:where([data-component='linechart-xaxis-ticklabel']) {
+      @apply fill-neutral-500;
+    }
+
+    &:where([data-component='linechart-yaxis-ticklabel']) {
+      @apply fill-neutral-500;
+    }
+
+    &:where([data-component='linechart-xaxis-line']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='linechart-yaxis-line']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='linechart-xaxis-tickline']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='linechart-yaxis-tickline']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='linechart-hoverguide']) {
+      @apply stroke-neutral-400/50;
+    }
+
+    &:where([data-component='linechart-line']) {
+      @apply stroke-[#13ACF0];
+    }
+
+    &:where([data-component='linechart-activedot']) {
+      @apply fill-[#13ACF0] stroke-white;
+    }
+
+    &:where([data-component='linechart-area']) {
+      @apply fill-[#13ACF0]/12;
+    }
+
+    &:where([data-component='linechart-tooltip']) {
+      @apply grid min-w-56 grid-cols-[auto_1fr] items-center gap-x-1 gap-y-2 rounded-md border border-neutral-700 bg-neutral-900 p-2.5 shadow-md;
+    }
+
+    &:where([data-component='linechart-tooltiptitle']) {
+      @apply col-span-full row-start-1 text-xs font-semibold leading-4 text-neutral-200;
+    }
+
+    &:where([data-component='linechart-tooltiplabel']) {
+      @apply col-start-2 row-start-2 text-xs font-medium leading-4 text-neutral-400;
+    }
+
+    &:where([data-component='linechart-tooltipvalue']) {
+      @apply col-span-full row-start-3 justify-self-start rounded-md bg-neutral-600 px-1.25 py-0.5 font-mono text-sm font-medium leading-5 text-neutral-200 tabular-nums;
+    }
+
+    &:where([data-component='linechart-tooltipcolorindicator']) {
+      @apply col-start-1 row-start-2 h-2.5 w-2.5 rounded-sm bg-[#13ACF0];
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-menu.css

@@ -135,3 +135,19 @@
     }
   }
 }
+
+/* menu action buttons, styled like a secondary Button */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='menu-openbutton']) {
+      @apply relative flex w-fit cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default min-h-7 px-4 py-1 text-[0.8rem] leading-4;
+
+      &:not(:disabled) {
+        @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300 aria-expanded:bg-neutral-300;
+      }
+      &:disabled {
+        @apply bg-black/3 text-neutral-400;
+      }
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-numberinput.css

@@ -53,10 +53,10 @@
 
     &:where([data-component='numberinput-inputgroup']) {
       @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-300 bg-white text-[0.8rem] text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/10 focus-within:shadow-sm data-disabled:cursor-not-allowed data-disabled:border-neutral-200 data-disabled:bg-white data-disabled:text-neutral-400 data-disabled:shadow-none data-disabled:hover:bg-white data-readonly:cursor-not-allowed data-readonly:border-neutral-200 data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50 data-readonly:shadow-none;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 focus-within:border-green-600 focus-within:ring-green-600/10;
       }
     }

package/src/presets/shopify-polaris/shopify-polaris-otpinput.css

@@ -3,10 +3,10 @@
   :where(:not([data-style-disabled])) {
     &:where([data-component='otpinput-input']) {
       @apply m-0 h-9.5 aspect-square w-9.5 rounded-xl border border-neutral-300 bg-white p-0 text-center text-base text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/10 focus:shadow-sm data-disabled:cursor-not-allowed data-disabled:bg-white data-disabled:text-neutral-400 data-disabled:shadow-none data-disabled:hover:bg-white data-readonly:bg-neutral-50 placeholder:text-neutral-600;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-500 focus:border-red-500 focus:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 focus:border-green-600 focus:ring-green-600/10;
       }
     }

package/src/presets/shopify-polaris/shopify-polaris-passwordinput.css

@@ -7,10 +7,10 @@
 
     &:where([data-component='passwordinput-inputgroup']) {
       @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-300 bg-white text-[0.8rem] text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/10 focus-within:shadow-sm data-disabled:cursor-not-allowed data-disabled:border-neutral-200 data-disabled:bg-white data-disabled:text-neutral-400 data-disabled:shadow-none data-disabled:hover:bg-white data-readonly:cursor-not-allowed data-readonly:border-neutral-200 data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50 data-readonly:shadow-none;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 focus-within:border-green-600 focus-within:ring-green-600/10;
       }
     }

package/src/presets/shopify-polaris/shopify-polaris-popover.css

@@ -45,3 +45,32 @@
     }
   }
 }
+
+/* popover action buttons, styled like a secondary Button */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='popover-openbutton']) {
+      @apply relative flex w-fit cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default min-h-7 px-4 py-1 text-[0.8rem] leading-4;
+
+      &:not(:disabled) {
+        @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300 aria-expanded:bg-neutral-300;
+      }
+      &:disabled {
+        @apply bg-black/3 text-neutral-400;
+      }
+    }
+  }
+}
+
+/* popover close button, cloned from Dialog's */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='popover-closebutton']) {
+      @apply absolute top-4 right-4 flex h-7 aspect-square w-7 shrink-0 cursor-pointer items-center justify-center rounded-full border border-neutral-200 bg-white p-0 text-neutral-950 shadow-sm hover:bg-neutral-100 hover:text-neutral-950 active:bg-neutral-200 active:text-neutral-950 focus-visible:outline-2 focus-visible:outline-blue-500;
+    }
+
+    &:where([data-component='popover-closebuttonicon']) {
+      @apply h-4 w-fit shrink-0 text-inherit;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-radio.css

@@ -19,10 +19,10 @@
 
     &:where([data-component='radio-itembutton']) {
       @apply mt-0.5 items-center justify-center flex aspect-square size-4 shrink-0 cursor-pointer rounded-full border border-neutral-300 bg-white shadow-xs transition-all data-checked:border-4 data-checked:border-neutral-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 data-disabled:cursor-not-allowed data-disabled:opacity-50;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-600 data-checked:border-red-600;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-700 data-checked:border-green-700;
       }
     }

package/src/presets/shopify-polaris/shopify-polaris-ratinginput.css

@@ -19,10 +19,10 @@
 
     &:where([data-component='ratinginput-staricon']) {
       @apply pointer-events-none h-5 w-fit text-neutral-950 data-highlighted:fill-current data-highlighted:data-half:fill-[var(--star-half-fill)] rtl:data-highlighted:data-half:fill-[var(--star-half-fill-rtl)];
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply text-green-700;
       }
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply text-red-600;
       }
     }

package/src/presets/shopify-polaris/shopify-polaris-select.css

@@ -58,10 +58,10 @@
 
     &:where([data-component='select-openbutton']) {
       @apply flex h-8.5 w-fit shrink-0 cursor-pointer items-center justify-center gap-0 overflow-hidden rounded-xl border border-neutral-300 bg-white px-2.5 text-sm font-normal text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-blue-500/10 focus-visible:shadow-sm disabled:pointer-events-none disabled:bg-white disabled:text-neutral-400 disabled:shadow-none data-popup-open:border-blue-500 data-popup-open:ring-2 data-popup-open:ring-blue-500/10 data-popup-open:shadow-sm;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/10 data-popup-open:border-red-500 data-popup-open:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 focus-visible:border-green-600 focus-visible:ring-green-600/10 data-popup-open:border-green-600 data-popup-open:ring-green-600/10;
       }
     }

package/src/presets/shopify-polaris/shopify-polaris-slider.css

@@ -32,10 +32,10 @@
       &[data-orientation='vertical'] {
         @apply h-auto w-full;
       }
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply bg-red-600;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply bg-green-700;
       }
     }

package/src/presets/shopify-polaris/shopify-polaris-stepper.css

@@ -53,3 +53,19 @@
     }
   }
 }
+
+/* stepper action buttons, styled like a secondary Button */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='stepper-nextbutton'], [data-component='stepper-previousbutton']) {
+      @apply relative flex w-fit cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default min-h-7 px-4 py-1 text-[0.8rem] leading-4;
+
+      &:not(:disabled) {
+        @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300 aria-expanded:bg-neutral-300;
+      }
+      &:disabled {
+        @apply bg-black/3 text-neutral-400;
+      }
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-switch.css

@@ -7,10 +7,10 @@
 
     &:where([data-component='switch-button']) {
       @apply col-start-1 row-start-1 inline-flex h-4.5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-neutral-300 bg-white transition-all hover:brightness-95 data-checked:border-neutral-950 data-checked:bg-neutral-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 data-disabled:cursor-not-allowed data-disabled:opacity-50;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-600 bg-red-50 data-checked:border-red-600 data-checked:bg-red-600;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-700 bg-green-50 data-checked:border-green-700 data-checked:bg-green-700;
       }
     }

package/src/presets/shopify-polaris/shopify-polaris-textarea.css

@@ -7,10 +7,10 @@
 
     &:where([data-component='textarea-textareagroup']) {
       @apply p-0 flex w-full min-w-0 flex-col items-stretch overflow-hidden rounded-xl border border-neutral-300 bg-white text-[0.8rem] text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/10 focus-within:shadow-sm data-disabled:cursor-not-allowed data-disabled:border-neutral-200 data-disabled:bg-white data-disabled:text-neutral-400 data-disabled:shadow-none data-disabled:hover:bg-white data-readonly:cursor-not-allowed data-readonly:border-neutral-200 data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50 data-readonly:shadow-none;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 focus-within:border-green-600 focus-within:ring-green-600/10;
       }
     }

package/src/presets/shopify-polaris/shopify-polaris-tooltip.css

@@ -29,3 +29,19 @@
     }
   }
 }
+
+/* tooltip action buttons, styled like a secondary Button */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='tooltip-openbutton']) {
+      @apply relative flex w-fit cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default min-h-7 px-4 py-1 text-[0.8rem] leading-4;
+
+      &:not(:disabled) {
+        @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300 aria-expanded:bg-neutral-300;
+      }
+      &:disabled {
+        @apply bg-black/3 text-neutral-400;
+      }
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris.css

@@ -29,10 +29,12 @@
 @import './shopify-polaris-chip.css';
 @import './shopify-polaris-textlink.css';
 @import './shopify-polaris-empty.css';
+@import './shopify-polaris-exception.css';
 @import './shopify-polaris-spinner.css';
 @import './shopify-polaris-popover.css';
 @import './shopify-polaris-table.css';
 @import './shopify-polaris-card.css';
+@import './shopify-polaris-carousel.css';
 @import './shopify-polaris-skeleton.css';
 @import './shopify-polaris-avatar.css';
 @import './shopify-polaris-metric.css';
@@ -379,3 +381,7 @@
     transition-duration: 0.01ms;
   }
 }
+@import './shopify-polaris-barchart.css';
+@import './shopify-polaris-linechart.css';
+@import './shopify-polaris-horizontalbarchart.css';
+@import './shopify-polaris-donutchart.css';

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-autocomplete.css

@@ -76,10 +76,10 @@
 
     &:where([data-component='autocomplete-inputgroup']) {
       @apply flex w-full min-w-0 items-center overflow-hidden rounded-lg border border-neutral-400 bg-white p-0 text-[0.8rem] text-neutral-900 outline-blue-600 outline-offset-1! hover:bg-neutral-50 focus-within:outline-2 data-disabled:cursor-not-allowed data-disabled:bg-neutral-100 data-disabled:text-neutral-500 data-disabled:hover:bg-neutral-100;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-800;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-700;
       }
     }

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-barchart.css

@@ -0,0 +1,64 @@
+/* barchart */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='barchart-gridline']) {
+      @apply stroke-neutral-200;
+    }
+
+    &:where([data-component='barchart-xaxis-ticklabel']) {
+      @apply fill-neutral-500;
+    }
+
+    &:where([data-component='barchart-yaxis-ticklabel']) {
+      @apply fill-neutral-500;
+    }
+
+    &:where([data-component='barchart-xaxis-line']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='barchart-yaxis-line']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='barchart-xaxis-tickline']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='barchart-yaxis-tickline']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='barchart-hoverguide']) {
+      @apply stroke-neutral-400/50;
+    }
+
+    &:where([data-component='barchart-bar']) {
+      @apply fill-[#13ACF0];
+    }
+
+    &:where([data-component='barchart-bar'])[data-active] {
+      @apply opacity-80;
+    }
+
+    &:where([data-component='barchart-tooltip']) {
+      @apply grid min-w-56 grid-cols-[auto_1fr] items-center gap-x-1 gap-y-2 rounded-md border border-neutral-700 bg-neutral-900 p-2.5 shadow-md;
+    }
+
+    &:where([data-component='barchart-tooltiptitle']) {
+      @apply col-span-full row-start-1 text-xs font-semibold leading-4 text-neutral-200;
+    }
+
+    &:where([data-component='barchart-tooltiplabel']) {
+      @apply col-start-2 row-start-2 text-xs font-medium leading-4 text-neutral-400;
+    }
+
+    &:where([data-component='barchart-tooltipvalue']) {
+      @apply col-span-full row-start-3 justify-self-start rounded-md bg-neutral-600 px-1.25 py-0.5 font-mono text-sm font-medium leading-5 text-neutral-200 tabular-nums;
+    }
+
+    &:where([data-component='barchart-tooltipcolorindicator']) {
+      @apply col-start-1 row-start-2 h-2.5 w-2.5 rounded-sm bg-[#13ACF0];
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-carousel.css

@@ -0,0 +1,55 @@
+/* carousel */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='carousel-slideslist']) {
+      @apply w-full rounded-lg;
+      &[data-orientation='vertical'] {
+        @apply h-72;
+      }
+    }
+
+    &:where([data-component='carousel-slide']) {
+      @apply basis-full;
+    }
+
+    &:where([data-component='carousel-previousbutton']),
+    &:where([data-component='carousel-nextbutton']) {
+      @apply flex size-7.5 shrink-0 cursor-pointer items-center justify-center rounded-lg p-0 bg-white text-neutral-700 outline-none focus-visible:outline-2 focus-visible:outline-blue-500 shadow-[0_-1px_0_0_#b5b5b5_inset,0_0_0_1px_rgba(0,0,0,0.1)_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-neutral-50 active:pt-[0.1rem] active:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset] disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='carousel-previousbuttonicon']),
+    &:where([data-component='carousel-nextbuttonicon']) {
+      @apply h-4 w-fit shrink-0;
+      &[data-orientation='vertical'] {
+        @apply rotate-90;
+      }
+    }
+
+    &:where([data-component='carousel-indicatorlist']) {
+      @apply flex items-center justify-center gap-1.5;
+      &[data-orientation='vertical'] {
+        @apply flex-col;
+      }
+    }
+
+    &:where([data-component='carousel-indicatorbutton']) {
+      @apply flex shrink-0 cursor-pointer items-center justify-center p-0 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 transition-[width,height,background-color,opacity] duration-300 motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-50;
+
+      /* A dot when empty, stretching into a pill while selected */
+      &:empty {
+        @apply size-2 rounded-full bg-neutral-300 hover:bg-neutral-400 data-selected:bg-neutral-800;
+        &[data-selected][data-orientation='horizontal'] {
+          @apply w-5;
+        }
+        &[data-selected][data-orientation='vertical'] {
+          @apply h-5;
+        }
+      }
+
+      /* Custom content, like a thumbnail, faded until selected */
+      &:not(:empty) {
+        @apply overflow-hidden rounded-md opacity-50 hover:opacity-80 data-selected:opacity-100;
+      }
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-checkbox.css

@@ -11,10 +11,10 @@
 
     &:where([data-component='checkbox-button']) {
       @apply mt-0.5 row-start-1 flex size-4.25 shrink-0 cursor-pointer items-center justify-center rounded-[0.3rem] border border-neutral-500 bg-neutral-50 text-white transition-all duration-150 data-checked:border-neutral-800 data-checked:bg-neutral-800 data-indeterminate:border-neutral-800 data-indeterminate:bg-neutral-800 data-disabled:cursor-not-allowed data-disabled:opacity-50;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-800 bg-red-100 data-checked:bg-red-800 data-indeterminate:bg-red-800;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-700 bg-green-100 data-checked:bg-green-700 data-indeterminate:bg-green-700;
       }
     }

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-combobox.css

@@ -84,10 +84,10 @@
 
     &:where([data-component='combobox-inputgroup']) {
       @apply flex w-full min-w-0 items-center overflow-hidden rounded-lg border border-neutral-400 bg-white p-0 text-[0.8rem] text-neutral-900 outline-blue-600 outline-offset-1! hover:bg-neutral-50 focus-within:outline-2 data-disabled:cursor-not-allowed data-disabled:bg-neutral-100 data-disabled:text-neutral-500 data-disabled:hover:bg-neutral-100;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-800;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-700;
       }
     }

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-datepicker.css

@@ -11,10 +11,10 @@
 
     &:where([data-component='datepicker-inputgroup']) {
       @apply flex w-full min-w-0 items-center overflow-hidden rounded-lg border border-neutral-400 bg-white p-0 text-[0.8rem] text-neutral-900 outline-blue-600 outline-offset-1! hover:bg-neutral-50 data-disabled:cursor-not-allowed data-disabled:bg-neutral-100 data-disabled:text-neutral-500 data-disabled:hover:bg-neutral-100 data-[focus-within]:outline-2;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-800;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-700;
       }
     }

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-dialog.css

@@ -38,3 +38,12 @@
     }
   }
 }
+
+/* dialog action buttons, styled like a secondary Button */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='dialog-openbutton']) {
+      @apply flex w-fit cursor-pointer items-center justify-center gap-1 text-nowrap font-semibold disabled:pointer-events-none disabled:opacity-50 h-7.5 px-[0.7rem] text-[0.8rem] rounded-lg bg-white text-neutral-700 shadow-[0_-1px_0_0_#b5b5b5_inset,0_0_0_1px_rgba(0,0,0,0.1)_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-neutral-50 active:pt-[0.1rem] aria-expanded:pt-[0.1rem] active:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset] aria-expanded:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset];
+    }
+  }
+}