feat: Dark Mode (#7471)

app/javascript/dashboard/components/ui/ContextMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="context-menu-container"
+    class="fixed outline-none z-[9999] cursor-pointer"
     :style="style"
     tabindex="0"
     @blur="$emit('close')"
@@ -40,11 +40,3 @@ export default {
   },
 };
 </script>
-<style>
-.context-menu-container {
-  position: fixed;
-  z-index: var(--z-index-very-high);
-  outline: none;
-  cursor: pointer;
-}
-</style>

app/javascript/dashboard/components/ui/Label.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="labelClass" :style="labelStyle" :title="description">
     <span v-if="icon" class="label-action--button">
-      <fluent-icon :icon="icon" size="12" class="label--icon" />
+      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
     </span>
     <span
       v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
@@ -103,145 +103,98 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-
 .label {
-  display: inline-flex;
-  align-items: center;
-  font-weight: var(--font-weight-medium);
-  gap: var(--space-smaller);
-  margin-right: var(--space-smaller);
-  margin-bottom: var(--space-smaller);
-  padding: var(--space-smaller);
-  background: var(--s-50);
-  color: var(--s-800);
-  border: 1px solid var(--s-75);
-  height: var(--space-medium);
+  @apply inline-flex items-center font-medium gap-1 mr-1 rtl:ml-1 rtl:mr-0 mb-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
 
   &.small {
-    font-size: var(--font-size-mini);
-    padding: var(--space-micro) var(--space-smaller);
-    line-height: 1.2;
-    height: var(--space-two);
-  }
-
-  .label--icon {
-    cursor: pointer;
+    @apply text-xs py-0.5 px-1 leading-tight h-5;
   }
 
   &.small .label--icon,
   &.small .close--icon {
-    font-size: var(--font-size-nano);
+    @apply text-[0.5rem];
   }
 
   a {
-    font-size: var(--font-size-mini);
+    @apply text-xs;
     &:hover {
-      text-decoration: underline;
+      @apply underline;
     }
   }
 
   /* Color Schemes */
   &.primary {
-    background: var(--w-100);
-    color: var(--w-900);
-    border: 1px solid var(--w-200);
+    @apply bg-woot-100 dark:bg-woot-100 text-woot-900 dark:text-woot-900 border border-solid border-woot-200;
+
     a {
-      color: var(--w-900);
+      @apply text-woot-900 dark:text-woot-900;
     }
     .label-color-dot {
-      background: var(--w-600);
+      @apply bg-woot-600 dark:bg-woot-600;
     }
   }
   &.secondary {
-    background: var(--s-100);
-    color: var(--s-900);
-    border: 1px solid var(--s-200);
+    @apply bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+
     a {
-      color: var(--s-900);
+      @apply text-slate-900 dark:text-slate-100;
     }
     .label-color-dot {
-      background: var(--s-600);
+      @apply bg-slate-600 dark:bg-slate-600;
     }
   }
   &.success {
-    background: var(--g-100);
-    color: var(--g-900);
-    border: 1px solid var(--g-200);
+    @apply bg-green-100 dark:bg-green-700 text-green-900 dark:text-green-100 border border-solid border-green-200 dark:border-green-600;
+
     a {
-      color: var(--g-900);
+      @apply text-green-900 dark:text-green-100;
     }
     .label-color-dot {
-      background: var(--g-600);
+      @apply bg-green-600 dark:bg-green-600;
     }
   }
   &.alert {
-    background: var(--r-100);
-    color: var(--r-900);
-    border: 1px solid var(--r-200);
+    @apply bg-red-100 dark:bg-red-700 text-red-900 dark:text-red-100 border border-solid border-red-200 dark:border-red-600;
+
     a {
-      color: var(--r-900);
+      @apply text-red-900 dark:text-red-100;
     }
     .label-color-dot {
-      background: var(--r-600);
+      @apply bg-red-600 dark:bg-red-600;
     }
   }
   &.warning {
-    background: var(--y-100);
-    color: var(--y-900);
-    border: 1px solid var(--y-200);
+    @apply bg-yellow-100 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 border border-solid border-yellow-200 dark:border-yellow-600;
+
     a {
-      color: var(--y-900);
+      @apply text-yellow-900 dark:text-yellow-100;
     }
     .label-color-dot {
-      background: var(--y-900);
+      @apply bg-yellow-900 dark:bg-yellow-900;
     }
   }
 
   &.smooth {
-    background: transparent;
-    color: var(--s-700);
-    border: 1px solid var(--s-100);
+    @apply bg-transparent text-slate-700 dark:text-slate-100 border border-solid border-slate-100 dark:border-slate-700;
   }
 
   &.dashed {
-    background: transparent;
-    color: var(--s-700);
-    border: 1px dashed var(--s-100);
+    @apply bg-transparent text-slate-700 dark:text-slate-100 border border-dashed border-slate-100 dark:border-slate-700;
   }
 }
 
 .label-close--button {
-  color: var(--s-800);
-  margin-bottom: var(--space-minus-micro);
-  border-radius: var(--border-radius-small);
-  cursor: pointer;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    background: var(--s-100);
-  }
+  @apply text-slate-800 dark:text-slate-100 -mb-0.5 rounded-sm cursor-pointer flex items-center justify-center hover:bg-slate-100 dark:hover:bg-slate-700;
 }
 
 .label-action--button {
-  display: flex;
-  margin-right: var(--space-smaller);
+  @apply flex mr-1;
 }
 
 .label-color-dot {
-  display: inline-block;
-  width: var(--space-slab);
-  height: var(--space-slab);
-  border-radius: var(--border-radius-small);
-  box-shadow: var(--shadow-small);
+  @apply inline-block w-3 h-3 rounded-sm shadow-sm;
 }
 .label.small .label-color-dot {
-  width: var(--space-small);
-  height: var(--space-small);
-  border-radius: var(--border-radius-small);
-  box-shadow: var(--shadow-small);
+  @apply w-2 h-2 rounded-sm shadow-sm;
 }
 </style>

app/javascript/dashboard/components/ui/PreviewCard.vue

@@ -1,20 +1,30 @@
 <template>
-  <div class="preview-card--wrap" :class="{ activecard: active }">
+  <div class="preview-card--wrap" :class="{ 'active-card': active }">
     <div class="header--wrap" :class="{ active: active }">
-      <div class="heading-wrap text-block-title">{{ heading }}</div>
+      <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
       <fluent-icon
         v-if="active"
         icon="checkmark-circle"
         type="solid"
         size="24"
-        class="checkmark"
+        class="text-woot-500 dark:text-woot-500"
       />
     </div>
-    <div class="content-wrap">
+    <div
+      class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
+    >
       {{ content }}
     </div>
-    <div v-if="src" class="image-wrap">
-      <img :src="src" class="image" :class="{ activeimage: active }" />
+    <div v-if="src" class="p-3">
+      <img
+        :src="src"
+        class="border border-solid rounded-md"
+        :class="
+          active
+            ? 'border-woot-75 dark:border-woot-700'
+            : 'border-slate-50 dark:border-slate-600'
+        "
+      />
     </div>
     <slot v-else />
   </div>
@@ -49,66 +59,18 @@ export default {
 
 <style lang="scss" scoped>
 .preview-card--wrap {
-  border-radius: var(--border-radius-normal);
-  border: 1px solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  max-height: 21.25rem;
-  max-width: 23.75rem;
-  min-width: 15rem;
+  @apply flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600;
 
   .header--wrap {
-    background: var(--s-50);
-    border-bottom: 1px solid var(--color-border);
-    border-top-left-radius: var(--border-radius-normal);
-    border-top-right-radius: var(--border-radius-normal);
-    display: flex;
-    height: 2.5rem;
-    justify-content: space-between;
-    padding: var(--space-small);
-    width: 100%;
+    @apply flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600;
   }
 
   .active {
-    background: var(--w-50);
-    border-bottom: 1px solid var(--w-75);
-  }
-
-  .heading-wrap {
-    align-items: center;
-    display: flex;
-    font-weight: var(--font-weight-medium);
-    padding: var(--space-smaller);
-  }
-
-  .checkmark {
-    color: var(--w-500);
-  }
-
-  .content-wrap {
-    color: var(--s-700);
-    font-size: var(--font-size-mini);
-    line-height: 1.4;
-    padding: var(--space-slab) var(--space-slab) 0 var(--space-slab);
-    text-align: start;
-  }
-
-  .image-wrap {
-    padding: var(--space-slab);
-  }
-
-  .image {
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-normal);
-  }
-
-  .activeimage {
-    border: 1px solid var(--w-75);
+    @apply bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700;
   }
 }
 
-.activecard {
-  background: var(--w-25);
-  border: 1px solid var(--w-300);
+.active-card {
+  @apply bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400;
 }
 </style>

app/javascript/dashboard/components/ui/Switch.vue

@@ -26,10 +26,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .toggle-button {
+  @apply bg-slate-200 dark:bg-slate-600;
   --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
     rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
     rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  background-color: var(--s-200);
   border-radius: var(--border-radius-large);
   border: 2px solid transparent;
   cursor: pointer;
@@ -61,8 +61,8 @@ export default {
   }
 
   span {
+    @apply bg-white dark:bg-slate-900;
     --space-one-point-five: 0.9375rem;
-    background-color: var(--white);
     border-radius: 100%;
     box-shadow: var(--toggle-button-box-shadow);
     display: inline-block;

app/javascript/dashboard/components/ui/Tabs/TabsItem.vue

@@ -7,9 +7,11 @@
   >
     <a @click="onTabClick">
       {{ name }}
-      <span v-if="showBadge" class="badge">
-        {{ getItemCount }}
-      </span>
+      <div v-if="showBadge" class="badge">
+        <span>
+          {{ getItemCount }}
+        </span>
+      </div>
     </a>
   </li>
 </template>

app/javascript/dashboard/components/ui/TimeAgo.vue

@@ -5,7 +5,7 @@
       delay: { show: 1500, hide: 0 },
       hideOnClick: true,
     }"
-    class="text-xxs text-black-600 leading-4 ml-auto hover:text-black-900"
+    class="text-xxs text-slate-500 dark:text-slate-500 leading-4 ml-auto hover:text-slate-900 dark:hover:text-slate-100"
   >
     <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
   </div>

app/javascript/dashboard/components/ui/Wizard.vue

@@ -11,8 +11,10 @@
       class="item"
       :class="{ active: isActive(item), over: isOver(item) }"
     >
-      <div class="flex-align-center">
-        <h3 class="text-truncate">
+      <div class="flex items-center">
+        <h3
+          class="overflow-hidden whitespace-nowrap text-ellipsis leading-tight"
+        >
           {{ item.title }}
         </h3>
         <span v-if="isOver(item)" class="completed">
@@ -42,7 +44,7 @@ export default {
   },
   computed: {
     classObject() {
-      return 'full-width';
+      return 'w-full';
     },
     activeIndex() {
       return this.items.findIndex(i => i.route === this.$route.name);