fix(dialog): semantic classes for dark mode

frappe · Nov 25, 2024 · c2f70a9 · c2f70a9
1 parent 89bafec
commit c2f70a9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/src/components/Dialog.story.vue b/src/components/Dialog.story.vue
@@ -21,6 +21,10 @@ const createPromise = () => {
           title: 'Confirm',
           message: 'Are you sure you want to confirm this action?',
           size: 'xl',
+          icon: {
+            name: 'alert-triangle',
+            appearance: 'warning',
+          },
           actions: [
             {
               label: 'Confirm',

diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
@@ -23,7 +23,7 @@
           leave-to="opacity-0"
         >
           <div
-            class="fixed inset-0 bg-black-overlay-200 transition-opacity"
+            class="fixed inset-0 bg-black-overlay-200 transition-opacity dark:backdrop-filter dark:backdrop-blur-[1px]"
             :data-dialog="options.title"
           />
         </TransitionChild>
@@ -38,7 +38,7 @@
           leave-to="opacity-50 translate-y-4 translate-y-4 scale-95"
         >
           <DialogPanel
-            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-white text-left align-middle shadow-xl transition-all"
+            class="my-8 inline-block w-full transform overflow-hidden rounded-xl bg-surface-modal text-left align-middle shadow-xl transition-all"
             :class="{
               'max-w-7xl': options.size === '7xl',
               'max-w-6xl': options.size === '6xl',
@@ -55,7 +55,7 @@
           >
             <slot name="body">
               <slot name="body-main">
-                <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+                <div class="bg-surface-modal px-4 pb-6 pt-5 sm:px-6">
                   <div class="flex">
                     <div class="w-full flex-1">
                       <div class="mb-6 flex items-center justify-between">
@@ -75,7 +75,7 @@
                           <DialogTitle as="header">
                             <slot name="body-title">
                               <h3
-                                class="text-2xl font-semibold leading-6 text-gray-900"
+                                class="text-2xl font-semibold leading-6 text-ink-gray-9"
                               >
                                 {{ options.title || 'Untitled' }}
                               </h3>
@@ -90,12 +90,13 @@
                               viewBox="0 0 16 16"
                               fill="none"
                               xmlns="http://www.w3.org/2000/svg"
+                              class="text-ink-gray-9"
                             >
                               <path
                                 fill-rule="evenodd"
                                 clip-rule="evenodd"
                                 d="M12.8567 3.85355C13.052 3.65829 13.052 3.34171 12.8567 3.14645C12.6615 2.95118 12.3449 2.95118 12.1496 3.14645L8.00201 7.29405L3.85441 3.14645C3.65914 2.95118 3.34256 2.95118 3.1473 3.14645C2.95204 3.34171 2.95204 3.65829 3.1473 3.85355L7.29491 8.00116L3.14645 12.1496C2.95118 12.3449 2.95118 12.6615 3.14645 12.8567C3.34171 13.052 3.65829 13.052 3.85355 12.8567L8.00201 8.70827L12.1505 12.8567C12.3457 13.052 12.6623 13.052 12.8576 12.8567C13.0528 12.6615 13.0528 12.3449 12.8576 12.1496L8.70912 8.00116L12.8567 3.85355Z"
-                                fill="#383838"
+                                fill="currentColor"
                               />
                             </svg>
                           </template>
@@ -104,7 +105,7 @@
 
                       <slot name="body-content">
                         <p
-                          class="text-p-base text-gray-700"
+                          class="text-p-base text-ink-gray-7"
                           v-if="options.message"
                         >
                           {{ options.message }}
@@ -272,23 +273,23 @@ const dialogPositionClasses = computed(() => {
 
 const dialogIconBgClasses = computed(() => {
   const appearance = icon.value?.appearance
-  if (!appearance) return 'bg-gray-100'
+  if (!appearance) return 'bg-surface-gray-2'
   return {
-    warning: 'bg-yellow-100',
-    info: 'bg-blue-100',
-    danger: 'bg-red-100',
-    success: 'bg-green-100',
+    warning: 'bg-surface-amber-2',
+    info: 'bg-surface-blue-2',
+    danger: 'bg-surface-red-2',
+    success: 'bg-surface-green-2',
   }[appearance]
 })
 
 const dialogIconClasses = computed(() => {
   const appearance = icon.value?.appearance
-  if (!appearance) return 'text-gray-600'
+  if (!appearance) return 'text-ink-gray-5'
   return {
-    warning: 'text-yellow-600',
-    info: 'text-blue-600',
-    danger: 'text-red-600',
-    success: 'text-green-600',
+    warning: 'text-ink-amber-3',
+    info: 'text-ink-blue-3',
+    danger: 'text-ink-red-4',
+    success: 'text-ink-green-3',
   }[appearance]
 })
 </script>