@central-ui/react 0.1.0 → 0.1.2

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

@@ -2,7 +2,7 @@
 @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;
+      @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'] {
         @apply border-red-500 focus:border-red-500 focus:ring-red-500/10;
       }

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

@@ -2,11 +2,11 @@
 @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;
+      @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'] {
         @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
       }
@@ -15,6 +15,15 @@
       }
     }
 
+    &: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-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,7 +57,7 @@
     }
 
     &: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;
+      @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'] {
         @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;
       }
@@ -66,6 +66,15 @@
       }
     }
 
+    &: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-textarea.css

@@ -2,11 +2,11 @@
 @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;
+      @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'] {
         @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
       }
@@ -15,6 +15,15 @@
       }
     }
 
+    &: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.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));