feat: toast component

oku-ui · Sep 11, 2023 · 7388f9f · 7388f9f
1 parent 0e4a8a6
commit 7388f9f
Showing 1 changed file with 5 additions and 6 deletions.
diff --git a/components/primitives/OkuToast/index.vue b/components/primitives/OkuToast/index.vue
@@ -40,7 +40,6 @@ onMounted(() => {
 
 function setOpen(res: any) {
   open.value = res
-  console.log(res)
 }
 
 function oneWeekAway() {
@@ -67,29 +66,29 @@ function click() {
   <div class="flex items-center justify-center">
     <OkuToastProvider swipe-direction="right">
       <button
-        class="inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-white text-violet11 shadow-[0_2px_10px] shadow-blackOA7 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black"
+        class="inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-white dark:bg-blackOA-900 text-blackOA-900 dark:text-white shadow-[0_2px_10px] shadow-grayOA-200 dark:shadow-blackOA-900 outline-none hover:bg-grayOA-50 dark:hover:bg-blackOA-800 focus:shadow-[0_0_0_2px] focus:shadow-black dark:focus:shadow-grayOA-300"
         @click="click"
       >
         Add to calendar
       </button>
 
       <OkuToast
         v-model="open"
-        class="bg-white rounded-md shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] p-[15px] grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-slideIn data-[state=closed]:animate-hide data-[swipe=move]:translate-x-[var(--oku-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-swipeOut"
+        class="bg-white dark:bg-blackOA-900 rounded-md shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] p-[15px] grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-slideIn data-[state=closed]:animate-hide data-[swipe=move]:translate-x-[var(--oku-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-swipeOut"
       >
-        <OkuToastTitle class="[grid-area:_title] mb-[5px] font-medium text-slate12 text-[15px]">
+        <OkuToastTitle class="[grid-area:_title] mb-[5px] font-medium text-blackOA-950 dark:text-white text-[15px]">
           Scheduled: Catch up
         </OkuToastTitle>
         <OkuToastDescription as-child>
           <time
-            class="[grid-area:_description] m-0 text-slate11 text-[13px] leading-[1.3]"
+            class="[grid-area:_description] m-0 text-blackOA-800 dark:text-grayOA-200 text-[13px] leading-[1.3]"
             :dateTime="eventDateRef.toISOString()"
           >
             {{ prettyDate(eventDateRef) }}
           </time>
         </OkuToastDescription>
         <OkuToastAction class="[grid-area:_action]" as-child alt-text="Goto schedule to undo">
-          <button class="inline-flex items-center justify-center rounded font-medium text-xs px-[10px] leading-[25px] h-[25px] bg-green2 text-green11 shadow-[inset_0_0_0_1px] shadow-green7 hover:shadow-[inset_0_0_0_1px] hover:shadow-green8 focus:shadow-[0_0_0_2px] focus:shadow-green8">
+          <button class="inline-flex items-center justify-center rounded font-medium text-xs px-[10px] leading-[25px] h-[25px] bg-white dark:dark:bg-blackOA-900 dark:text-white dark:shadow-grayOA-400 text-blackOA-800 shadow-[inset_0_0_0_1px] shadow-blackOA-600 hover:shadow-[inset_0_0_0_1px] hover:shadow-blackOA-800 dark:hover:shadow-grayOA-300 focus:shadow-[0_0_0_2px] focus:shadow-black">
             Undo
           </button>
         </OkuToastAction>