@central-ui/react 0.1.1 → 0.2.0

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

@@ -2,7 +2,7 @@
 @layer components {
   :where(:not([data-style-disabled])) {
     &:where([data-component='numberinput-input']) {
-      @apply min-w-12 flex-1 h-7 rounded-none border-0 bg-transparent px-2.5 py-0 text-sm text-neutral-950 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-500 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-400;
+      @apply min-w-12 flex-1 h-8 rounded-none border-0 bg-transparent px-2.5 py-0 text-sm text-neutral-950 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-600 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-400;
     }
 
     &:where([data-component='numberinput-container']) {
@@ -26,7 +26,7 @@
     }
 
     &:where([data-component='numberinput-addon']) {
-      @apply inline-flex h-7 shrink-0 items-center gap-2 empty:hidden px-2 py-1;
+      @apply inline-flex h-8 shrink-0 items-center gap-2 empty:hidden px-2 py-1;
       &[data-variant='emphasized'] {
         @apply bg-neutral-200/60;
       }
@@ -52,15 +52,24 @@
     }
 
     &:where([data-component='numberinput-inputgroup']) {
-      @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-200 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'] {
+      @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-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;
       }
     }
 
+    &:where([data-component='numberinput-inputgroup'])
+      :where(
+        svg:not([data-style-disabled]):not(
+            [data-component='combobox-chipremovebuttonicon']
+          ):not([data-component='chip-closebuttonicon'])
+      ) {
+      @apply text-neutral-600;
+    }
+
     &:where([data-component='numberinput-buttonslist']) {
       @apply flex w-fit shrink-0 flex-col justify-center overflow-hidden p-0.5 h-7;
     }
@@ -70,7 +79,7 @@
     }
 
     &:where([data-component='numberinput-incrementbutton']) {
-      @apply flex h-2.5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-t-xl p-0 text-neutral-600 bg-neutral-200 active:bg-neutral-300 hover:bg-neutral-300 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-blue-500;
+      @apply flex h-3 w-5 shrink-0 cursor-pointer items-center justify-center rounded-t-xl p-0 text-neutral-600 bg-neutral-200 active:bg-neutral-300 hover:bg-neutral-300 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-blue-500;
     }
 
     &:where([data-component='numberinput-incrementbuttonicon']) {
@@ -78,7 +87,7 @@
     }
 
     &:where([data-component='numberinput-decrementbutton']) {
-      @apply flex h-2.5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-b-xl p-0 text-neutral-600 bg-neutral-200 active:bg-neutral-300 hover:bg-neutral-300 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-blue-500;
+      @apply flex h-3 w-5 shrink-0 cursor-pointer items-center justify-center rounded-b-xl p-0 text-neutral-600 bg-neutral-200 active:bg-neutral-300 hover:bg-neutral-300 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-blue-500;
     }
 
     &:where([data-component='numberinput-decrementbuttonicon']) {

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

@@ -2,11 +2,11 @@
 @layer components {
   :where(:not([data-style-disabled])) {
     &:where([data-component='otpinput-input']) {
-      @apply m-0 h-8.25 aspect-square w-8.25 rounded-xl border border-neutral-200 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;
-      &[data-tone='invalid'] {
+      @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-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

@@ -2,19 +2,28 @@
 @layer components {
   :where(:not([data-style-disabled])) {
     &:where([data-component='passwordinput-input']) {
-      @apply min-w-12 flex-1 h-7 rounded-none border-0 bg-transparent px-2.5 py-0 text-sm text-neutral-950 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-500 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-400;
+      @apply min-w-12 flex-1 h-8 rounded-none border-0 bg-transparent px-2.5 py-0 text-sm text-neutral-950 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-600 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-400;
     }
 
     &:where([data-component='passwordinput-inputgroup']) {
-      @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-200 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'] {
+      @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-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;
       }
     }
 
+    &:where([data-component='passwordinput-inputgroup'])
+      :where(
+        svg:not([data-style-disabled]):not(
+            [data-component='combobox-chipremovebuttonicon']
+          ):not([data-component='chip-closebuttonicon'])
+      ) {
+      @apply text-neutral-600;
+    }
+
     &:where([data-component='passwordinput-container']) {
       @apply flex flex-col gap-1.5 w-full;
     }
@@ -36,7 +45,7 @@
     }
 
     &:where([data-component='passwordinput-addon']) {
-      @apply inline-flex h-7 shrink-0 items-center gap-2 empty:hidden px-2 py-1;
+      @apply inline-flex h-8 shrink-0 items-center gap-2 empty:hidden px-2 py-1;
       &[data-variant='emphasized'] {
         @apply bg-neutral-200/60;
       }

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

@@ -10,7 +10,7 @@
     }
 
     &:where([data-component='select-openbuttonvalue']) {
-      @apply min-w-0 shrink-0 truncate text-left text-inherit data-placeholder:text-neutral-500 data-disabled:text-neutral-400;
+      @apply min-w-0 shrink-0 truncate text-left text-inherit data-placeholder:text-neutral-600 data-disabled:text-neutral-400;
     }
 
     &:where([data-component='select-scrollarea']) {
@@ -30,7 +30,7 @@
     }
 
     &:where([data-component='select-item']) {
-      @apply flex h-8 w-full shrink-0 cursor-pointer items-center justify-between gap-2 rounded-lg px-2 text-sm font-normal text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-30 data-highlighted:bg-neutral-100 active:bg-neutral-200;
+      @apply flex h-7 w-full shrink-0 cursor-pointer items-center justify-between gap-2 rounded-xl px-2 text-sm font-normal text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-30 data-highlighted:bg-neutral-100 active:bg-neutral-200;
     }
 
     &:where([data-component='select-popup']) {
@@ -57,15 +57,24 @@
     }
 
     &:where([data-component='select-openbutton']) {
-      @apply flex h-7.5 w-fit shrink-0 cursor-pointer items-center justify-center gap-0 overflow-hidden rounded-xl border border-neutral-200 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'] {
+      @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-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;
       }
     }
 
+    &:where([data-component='select-openbutton'])
+      :where(
+        svg:not([data-style-disabled]):not(
+            [data-component='combobox-chipremovebuttonicon']
+          ):not([data-component='chip-closebuttonicon'])
+      ) {
+      @apply text-neutral-600;
+    }
+
     &:where([data-component='select-grouplabel']) {
       @apply shrink-0 px-2 py-1 text-xs leading-4 font-normal text-neutral-600;
     }
@@ -91,7 +100,7 @@
     }
 
     &:where([data-component='select-openbuttonicon']) {
-      @apply ml-1.75 h-4 w-fit shrink-0 text-inherit;
+      @apply ml-1.75 h-4 w-fit shrink-0 text-neutral-600;
     }
 
     &:where([data-component='select-itemindicator']) {

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

@@ -2,19 +2,28 @@
 @layer components {
   :where(:not([data-style-disabled])) {
     &:where([data-component='textarea-textarea']) {
-      @apply min-h-36 w-full min-w-0 flex-1 self-stretch resize-none rounded-none border-0 bg-transparent px-2.5 py-2 text-sm text-neutral-950 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-500 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-500;
+      @apply min-h-41 w-full min-w-0 flex-1 self-stretch resize-none rounded-none border-0 bg-transparent px-2.5 py-2 text-sm text-neutral-950 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-600 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-500;
     }
 
     &: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-200 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'] {
+      @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-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;
       }
     }
 
+    &:where([data-component='textarea-textareagroup'])
+      :where(
+        svg:not([data-style-disabled]):not(
+            [data-component='combobox-chipremovebuttonicon']
+          ):not([data-component='chip-closebuttonicon'])
+      ) {
+      @apply text-neutral-600;
+    }
+
     &:where([data-component='textarea-container']) {
       @apply flex flex-col gap-1.5 w-full;
     }

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

@@ -0,0 +1,43 @@
+/* toast */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='toast-toast']) {
+      @apply absolute bottom-0 left-0 w-full rounded-lg bg-neutral-800 px-3.5 py-3.25 text-white shadow-lg;
+      &[data-tone='error'] {
+        @apply bg-red-600;
+      }
+    }
+
+    &:where([data-component='toast-toast'])
+      &:where([data-component='toast-toast-1']) {
+      @apply grid w-full grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-2 transition-opacity duration-250 data-behind:opacity-0 data-expanded:opacity-100;
+    }
+
+    &:where([data-component='toast-icon']) {
+      @apply col-start-1 row-start-1 h-5 w-fit shrink-0 text-white;
+      &[data-tone='success'] {
+        @apply text-green-400;
+      }
+    }
+
+    &:where([data-component='toast-title']) {
+      @apply text-sm font-semibold leading-normal text-white;
+    }
+
+    &:where([data-component='toast-description']) {
+      @apply min-w-0 text-sm leading-normal text-white;
+    }
+
+    &:where([data-component='toast-closebutton']) {
+      @apply col-start-4 row-start-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg text-white outline-none hover:bg-white/15 active:bg-white/25 focus-visible:outline-2 focus-visible:outline-white disabled:pointer-events-none disabled:opacity-30;
+    }
+
+    &:where([data-component='toast-actionbutton']) {
+      @apply col-start-3 row-start-1 flex h-7.5 w-fit cursor-pointer items-center justify-center gap-1 rounded-lg bg-white px-[0.7rem] text-[0.8rem] font-semibold text-nowrap 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] 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='toast-closebuttonicon']) {
+      @apply h-4 w-fit shrink-0;
+    }
+  }
+}

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

@@ -39,6 +39,7 @@
 @import './shopify-polaris-divider.css';
 @import './shopify-polaris-breadcrumb.css';
 @import './shopify-polaris-form.css';
+@import './shopify-polaris-toast.css';
 
 /* Global foundation and animations shared by the Polaris preset. */
 @custom-variant screen-mobile (@media (max-width: 400px));
@@ -378,3 +379,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-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];
+    }
+  }
+}