@central-ui/react 0.1.1 → 0.2.0

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

@@ -10,7 +10,7 @@
     }
 
     &:where([data-component='combobox-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='combobox-input'])[data-in-chips] {
@@ -18,7 +18,7 @@
     }
 
     &:where([data-component='combobox-chipslist']) {
-      @apply flex min-w-0 w-full flex-wrap items-center gap-1 px-2.5 py-1 min-h-7;
+      @apply flex min-w-0 w-full flex-wrap items-center gap-1 px-2.5 py-1 min-h-8;
     }
 
     &:where([data-component='combobox-scrollarea']) {
@@ -38,7 +38,7 @@
     }
 
     &:where([data-component='combobox-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='combobox-popup']) {
@@ -65,7 +65,7 @@
     }
 
     &:where([data-component='combobox-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;
       }
@@ -83,21 +83,30 @@
     }
 
     &:where([data-component='combobox-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='combobox-inputgroup'])
+      :where(
+        svg:not([data-style-disabled]):not(
+            [data-component='combobox-chipremovebuttonicon']
+          ):not([data-component='chip-closebuttonicon'])
+      ) {
+      @apply text-neutral-600;
+    }
+
     &:where([data-component='combobox-chip']) {
-      @apply flex h-5 min-w-6 w-fit shrink-0 items-center justify-between gap-1 rounded-full bg-neutral-200 px-2 text-[0.8rem] leading-none font-medium text-nowrap text-neutral-950 data-disabled:opacity-50;
+      @apply flex h-5 min-w-6 w-fit shrink-0 items-center justify-between gap-1 rounded-md bg-neutral-100 px-2 text-[0.8rem] leading-none font-medium text-nowrap text-neutral-700 data-disabled:opacity-50;
     }
 
     &:where([data-component='combobox-chipremovebutton']) {
-      @apply -mr-1.75 flex h-4.25 aspect-square w-auto shrink-0 cursor-pointer items-center justify-center rounded-xl p-0 hover:bg-neutral-300 active:bg-neutral-300 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-50;
+      @apply -mr-1.75 flex h-4.25 aspect-square w-auto shrink-0 cursor-pointer items-center justify-center rounded-md p-0 hover:bg-neutral-200 active:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-50;
     }
 
     &:where([data-component='combobox-addonopenbutton']) {
@@ -153,7 +162,7 @@
     }
 
     &:where([data-component='combobox-chipremovebuttonicon']) {
-      @apply h-3.25 w-fit shrink-0 text-neutral-950;
+      @apply h-3.25 w-fit shrink-0 text-neutral-700;
     }
 
     &:where([data-component='combobox-addonloadingicon']) {

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

@@ -10,17 +10,26 @@
     }
 
     &:where([data-component='datepicker-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 data-[focus-within]:border-blue-500 data-[focus-within]:ring-2 data-[focus-within]:ring-blue-500/10 data-[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 data-[focus-within]:border-blue-500 data-[focus-within]:ring-2 data-[focus-within]:ring-blue-500/10 data-[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 data-[focus-within]:border-red-500 data-[focus-within]:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 data-[focus-within]:border-green-600 data-[focus-within]:ring-green-600/10;
       }
     }
 
+    &:where([data-component='datepicker-inputgroup'])
+      :where(
+        svg:not([data-style-disabled]):not(
+            [data-component='combobox-chipremovebuttonicon']
+          ):not([data-component='chip-closebuttonicon'])
+      ) {
+      @apply text-neutral-600;
+    }
+
     &:where([data-component='datepicker-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;
       }
@@ -54,7 +63,7 @@
     }
 
     &:where([data-component='datepicker-input']) {
-      @apply flex h-7 min-w-0 items-center bg-transparent px-2.5 py-0 text-sm text-neutral-950 data-disabled:text-neutral-400;
+      @apply flex h-8 min-w-0 items-center bg-transparent px-2.5 py-0 text-sm text-neutral-950 data-disabled:text-neutral-400;
     }
 
     &:where([data-component='datepicker-input'])[data-range-input] {
@@ -66,7 +75,7 @@
     }
 
     &:where([data-component='datepicker-segment']) {
-      @apply rounded-sm text-inherit [font:inherit] outline-none data-focused:bg-blue-100 data-placeholder:text-neutral-500;
+      @apply rounded-sm text-inherit [font:inherit] outline-none data-focused:bg-blue-100 data-placeholder:text-neutral-600;
     }
 
     &:where([data-component='datepicker-addonopenbutton']) {
@@ -78,21 +87,21 @@
     }
 
     &:where([data-component='datepicker-openbutton']) {
-      @apply flex h-7.5 w-fit shrink-0 cursor-pointer items-center justify-center gap-1.75 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 aria-expanded:border-blue-500 aria-expanded:ring-2 aria-expanded:ring-blue-500/10 aria-expanded:shadow-sm;
-      &[data-tone='invalid'] {
+      @apply flex h-8.5 w-fit shrink-0 cursor-pointer items-center justify-center gap-1.75 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 aria-expanded:border-blue-500 aria-expanded:ring-2 aria-expanded:ring-blue-500/10 aria-expanded:shadow-sm;
+      &[data-validation='error'] {
         @apply border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/10 aria-expanded:border-red-500 aria-expanded: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 aria-expanded:border-green-600 aria-expanded:ring-green-600/10;
       }
     }
 
     &:where([data-component='datepicker-openbuttonvalue']) {
-      @apply min-w-0 truncate text-left text-inherit data-disabled:text-neutral-400;
+      @apply min-w-0 truncate text-left text-inherit data-disabled:text-neutral-400 data-placeholder:text-neutral-600;
     }
 
     &:where([data-component='datepicker-openbuttonicon']) {
-      @apply h-4 w-fit shrink-0 text-inherit;
+      @apply h-4 w-fit shrink-0 text-neutral-600;
     }
 
     &:where([data-component='datepicker-popup']) {

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

@@ -38,3 +38,19 @@
     }
   }
 }
+
+/* dialog action buttons, styled like a secondary Button */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='dialog-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-donutchart.css

@@ -0,0 +1,172 @@
+/* donutchart */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='donutchart-track']) {
+      @apply fill-neutral-100;
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='0'] {
+      @apply fill-[#13ACF0];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='1'] {
+      @apply fill-[#5365F6];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='2'] {
+      @apply fill-[#8B5CF6];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='3'] {
+      @apply fill-[#B163E8];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='4'] {
+      @apply fill-[#00AEFF];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='5'] {
+      @apply fill-[#FF9500];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='6'] {
+      @apply fill-[#00FFB7];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='7'] {
+      @apply fill-[#FFDD46];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-inactive] {
+      @apply opacity-40;
+    }
+
+    &:where([data-component='donutchart-body']) {
+      @apply flex size-full flex-col items-center justify-center gap-1 text-center;
+    }
+
+    &:where([data-component='donutchart-bodytitle']) {
+      @apply max-w-full truncate text-sm leading-5 text-neutral-700;
+    }
+
+    &:where([data-component='donutchart-bodyvalue']) {
+      @apply max-w-full truncate text-2xl leading-8 font-semibold tabular-nums text-neutral-950;
+    }
+
+    &:where([data-component='donutchart-legendlist']) {
+      @apply flex min-w-48 flex-col gap-2;
+    }
+
+    &:where([data-component='donutchart-legendlist'])[data-position='right'] {
+      @apply pl-6;
+    }
+
+    &:where([data-component='donutchart-legendlist'])[data-position='bottom'] {
+      @apply pt-4;
+    }
+
+    &:where([data-component='donutchart-legenditem']) {
+      @apply grid grid-cols-[auto_1fr_auto] items-center gap-x-2 text-sm leading-5;
+    }
+
+    &:where([data-component='donutchart-legenditem'])[data-inactive] {
+      @apply opacity-40;
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator']) {
+      @apply size-3 rounded-sm;
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='0'] {
+      @apply bg-[#13ACF0];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='1'] {
+      @apply bg-[#5365F6];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='2'] {
+      @apply bg-[#8B5CF6];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='3'] {
+      @apply bg-[#B163E8];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='4'] {
+      @apply bg-[#00AEFF];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='5'] {
+      @apply bg-[#FF9500];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='6'] {
+      @apply bg-[#00FFB7];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='7'] {
+      @apply bg-[#FFDD46];
+    }
+
+    &:where([data-component='donutchart-legendlabel']) {
+      @apply min-w-0 truncate text-neutral-600;
+    }
+
+    &:where([data-component='donutchart-legendvalue']) {
+      @apply pl-6 text-right tabular-nums text-neutral-500;
+    }
+
+    &:where([data-component='donutchart-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='donutchart-tooltiptitle']) {
+      @apply col-span-full row-start-1 text-xs font-semibold leading-4 text-neutral-200;
+    }
+
+    &:where([data-component='donutchart-tooltiplabel']) {
+      @apply col-start-2 row-start-2 text-xs font-medium leading-4 text-neutral-400;
+    }
+
+    &:where([data-component='donutchart-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='donutchart-tooltipcolorindicator']) {
+      @apply col-start-1 row-start-2 h-2.5 w-2.5 rounded-sm;
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='0'] {
+      @apply bg-[#13ACF0];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='1'] {
+      @apply bg-[#5365F6];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='2'] {
+      @apply bg-[#8B5CF6];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='3'] {
+      @apply bg-[#B163E8];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='4'] {
+      @apply bg-[#00AEFF];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='5'] {
+      @apply bg-[#FF9500];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='6'] {
+      @apply bg-[#00FFB7];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='7'] {
+      @apply bg-[#FFDD46];
+    }
+  }
+}

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

@@ -38,3 +38,19 @@
     }
   }
 }
+
+/* drawer action buttons, styled like a secondary Button */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='drawer-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-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

@@ -2,19 +2,28 @@
 @layer components {
   :where(:not([data-style-disabled])) {
     &:where([data-component='input-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='input-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='input-inputgroup'])
+      :where(
+        svg:not([data-style-disabled]):not(
+            [data-component='combobox-chipremovebuttonicon']
+          ):not([data-component='chip-closebuttonicon'])
+      ) {
+      @apply text-neutral-600;
+    }
+
     &:where([data-component='input-container']) {
       @apply flex flex-col gap-1.5 w-full;
     }
@@ -36,7 +45,7 @@
     }
 
     &:where([data-component='input-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-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

@@ -37,14 +37,14 @@
     }
 
     &:where([data-component='menu-buttonitem']) {
-      @apply flex h-8 w-full cursor-pointer items-center gap-2 rounded-lg px-2 text-sm text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100 font-normal active:bg-neutral-200;
+      @apply flex h-7 w-full cursor-pointer items-center gap-2 rounded-2xl px-2 text-sm text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100 font-normal active:bg-neutral-200;
       &[data-tone='danger'] {
         @apply text-red-600 data-highlighted:bg-neutral-100;
       }
     }
 
     &:where([data-component='menu-linkitem']) {
-      @apply flex h-8 w-full cursor-pointer items-center gap-2 rounded-lg px-2 text-sm text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100 font-normal active:bg-neutral-200;
+      @apply flex h-7 w-full cursor-pointer items-center gap-2 rounded-2xl px-2 text-sm text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100 font-normal active:bg-neutral-200;
     }
 
     &:where([data-component='menu-radiogroup']) {
@@ -52,7 +52,7 @@
     }
 
     &:where([data-component='menu-submenuopenbutton']) {
-      @apply flex h-8 w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-2 text-sm text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100 data-open:bg-neutral-100 font-normal active:bg-neutral-200;
+      @apply flex h-7 w-full cursor-pointer items-center justify-between gap-2 rounded-2xl px-2 text-sm text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:opacity-30 data-highlighted:bg-neutral-100 data-open:bg-neutral-100 font-normal active:bg-neutral-200;
     }
 
     &:where([data-component='menu-separator']) {
@@ -64,11 +64,11 @@
     }
 
     &:where([data-component='menu-submenuopenbuttonicon']) {
-      @apply h-4 w-fit shrink-0 text-inherit;
+      @apply h-4 w-fit shrink-0 text-neutral-800;
     }
 
     &:where([data-component='menu-checkboxcontainer']) {
-      @apply flex min-h-8 w-full items-center gap-2 rounded-lg px-2 data-highlighted:bg-neutral-100;
+      @apply flex min-h-7 w-full items-center gap-2 rounded-2xl px-2 data-highlighted:bg-neutral-100;
     }
 
     &:where([data-component='menu-checkboxbuttonitem']) {
@@ -89,7 +89,7 @@
     }
 
     &:where([data-component='menu-radiocontainer']) {
-      @apply flex min-h-8 w-full items-center gap-2 rounded-lg px-2 data-highlighted:bg-neutral-100;
+      @apply flex min-h-7 w-full items-center gap-2 rounded-2xl px-2 data-highlighted:bg-neutral-100;
     }
 
     &:where([data-component='menu-radiobuttonitem']) {
@@ -108,5 +108,46 @@
       &:where([data-component='menu-radioitemindicator-1']) {
       @apply size-full rounded-full bg-white;
     }
+
+    &:where([data-component='menu-buttonitem'])[data-tone='neutral']
+      &:where([data-component='menu-icon']) {
+      @apply text-neutral-800;
+    }
+
+    &:where([data-component='menu-linkitem'])
+      &:where([data-component='menu-icon']) {
+      @apply text-neutral-800;
+    }
+
+    &:where([data-component='menu-submenuopenbutton'])
+      &:where([data-component='menu-icon']) {
+      @apply text-neutral-800;
+    }
+
+    &:where([data-component='menu-checkboxcontainer'])
+      &:where([data-component='menu-icon']) {
+      @apply text-neutral-800;
+    }
+
+    &:where([data-component='menu-radiocontainer'])
+      &:where([data-component='menu-icon']) {
+      @apply text-neutral-800;
+    }
+  }
+}
+
+/* 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;
+      }
+    }
   }
 }