Implement various theming updates

diff --git a/client/components/ConfirmModal.vue b/client/components/ConfirmModal.vue
index 8617fb08acb1014ce3bc7aa479e56ef2c7586edb..502213ada768265f46a5354f962a9229211091b7 100644 (file)
--- a/client/components/ConfirmModal.vue
+++ b/client/components/ConfirmModal.vue
@@ -1,7 +1,7 @@
 <template>
   <Modal
     ref="modal"
-    :class="{ 'border border-l-4 border-l-theme-failure': isDanger }"
+    :class="{ 'border-l-theme-danger border border-l-4': isDanger }"
     :closeHandler="cancelHandler"
   >
     <!-- Title -->
@@ -11,7 +11,7 @@
     <!-- Buttons -->
     <div class="flex justify-end">
       <CustomButton label="Cancel" @click="cancelHandler" class="mr-2" />
-      <CustomButton label="Confirm" @click="confirmHandler" isCta />
+      <CustomButton :label="confirmButtonText" @click="confirmHandler" danger />
     </div>
   </Modal>
 </template>
@@ -25,6 +25,7 @@ import Modal from "./Modal.vue";
 const props = defineProps({
   title: { type: String, default: "Confirmation" },
   message: String,
+  confirmButtonText: { type: String, default: "Confirm" },
   isDanger: Boolean,
 });
 const emit = defineEmits(["confirm", "cancel"]);

diff --git a/client/components/CustomButton.vue b/client/components/CustomButton.vue
index 64f92d945eed39348b9eafe4ebabeb550a637350..f958a411184033dfb3cd368e5759887a992cecb3 100644 (file)
--- a/client/components/CustomButton.vue
+++ b/client/components/CustomButton.vue
@@ -1,9 +1,10 @@
 <template>
   <button
-    class="rounded px-2 py-1 hover:bg-theme-background-tint hover:dark:bg-theme-background-elevated"
+    class="rounded px-2 py-1"
     :class="{
-      'text-theme-text-muted': !isCta,
-      'border border-theme-border': isCta,
+      'bg-theme-background text-theme-text-muted hover:bg-theme-background-elevated':
+        !danger,
+      'bg-theme-danger hover:bg-theme-danger/80 text-slate-50': danger,
     }"
   >
     <IconLabel :iconPath="iconPath" :iconSize="iconSize" :label="label" />
@@ -17,6 +18,6 @@ defineProps({
   iconPath: String,
   iconSize: String,
   label: String,
-  isCta: Boolean,
+  danger: Boolean,
 });
 </script>

diff --git a/client/components/Modal.vue b/client/components/Modal.vue
index d858ce36baf13c91a1978d3eab4240dcfbd8dbe0..e1f8ec1ea48b652f499be2044998bd536241a7f1 100644 (file)
--- a/client/components/Modal.vue
+++ b/client/components/Modal.vue
@@ -2,7 +2,7 @@
   <!-- Mask -->
   <div
     v-if="isVisible"
-    class="fixed left-0 top-0 z-50 flex h-dvh w-dvw items-center justify-center bg-theme-background-tint/40 backdrop-blur-sm"
+    class="fixed left-0 top-0 z-50 flex h-dvh w-dvw items-center justify-center backdrop-blur-sm"
   >
     <!-- Modal -->
     <div

diff --git a/client/components/PrimeMenu.vue b/client/components/PrimeMenu.vue
index 7092d4123630c4026d31c11911342e11bf73c119..f879e0ebad23ddb655245e65f2814a21acada6af 100644 (file)
--- a/client/components/PrimeMenu.vue
+++ b/client/components/PrimeMenu.vue
@@ -22,9 +22,9 @@ const style = {
   menuitem: ({ context }) => ({
     class: [
       "text-theme-text-muted rounded px-2 py-1",
-      "hover:bg-theme-background-tint hover:dark:bg-theme-background-elevated hover:cursor-pointer",
+      "hover:bg-theme-background-elevated hover:cursor-pointer",
       {
-        "bg-theme-background-tint dark:bg-theme-background-elevated":
+        "bg-theme-background-elevated":
           context.focused,
       },
     ],

diff --git a/client/components/PrimeToast.vue b/client/components/PrimeToast.vue
index 5250d4d69053faa48ffc357a02a621c91ee00d4b..8c8e1cdeca820d504143dcf5a3e8179803f271d9 100644 (file)
--- a/client/components/PrimeToast.vue
+++ b/client/components/PrimeToast.vue
@@ -10,10 +10,10 @@ const style = {
   container: ({ props }) => ({
     class: [
       "mt-2 px-3 py-2 rounded-lg max-w-96",
-      "bg-theme-background-elevated border border-l-2 border-theme-border shadow-md",
+      "dark:bg-theme-background-elevated border border-l-2 border-theme-border shadow-md",
       {
         "border-l-theme-success": props.message.severity == "success",
-        "border-l-theme-failure": props.message.severity == "error",
+        "border-l-theme-danger": props.message.severity == "error",
       },
     ],
   }),

diff --git a/client/components/TextInput.vue b/client/components/TextInput.vue
index 4f93c3ed015cb3a9c6716e678149f2175e169ad0..fb143b70ea39f4e0ed88173c4779e4e9a9a22f89 100644 (file)
--- a/client/components/TextInput.vue
+++ b/client/components/TextInput.vue
@@ -1,7 +1,7 @@
 <template>
   <input
     type="text"
-    class="w-full rounded border border-theme-border bg-theme-background-elevated px-3 py-2 focus:outline-none focus:ring-1"
+    class="w-full rounded border border-theme-border px-3 py-2 focus:outline-none focus:ring-1 dark:bg-theme-background-elevated"
     placeholder="Search"
     v-model="model"
     ref="input"

diff --git a/client/components/toastui/toastui-editor-overrides.scss b/client/components/toastui/toastui-editor-overrides.scss
index 033e3e8b282edb1b4a7367e937e0e11ac5fd1c2a..81665e7a5aacb4f41e0629fb4969c2bafbec9d3f 100644 (file)
--- a/client/components/toastui/toastui-editor-overrides.scss
+++ b/client/components/toastui/toastui-editor-overrides.scss
@@ -137,7 +137,7 @@
 // Code Block
 .toastui-editor-contents pre,
 .toastui-editor-md-code-block-line-background {
-  background-color: rgb(var(--theme-background-tint));
+  background-color: rgb(var(--theme-background-elevated));
 }
 
 .dark-theme .toastui-editor-contents pre,
@@ -156,7 +156,7 @@
 // Tables
 .toastui-editor-contents table th {
   color: rgb(var(--theme-text));
-  background-color: rgb(var(--theme-background-tint));
+  background-color: rgb(var(--theme-background-elevated));
 }
 
 .toastui-editor-contents table {
@@ -199,7 +199,7 @@
 }
 
 .toastui-editor-defaultUI .tab-item {
-  background-color: rgb(var(--theme-background-tint));
+  background-color: rgb(var(--theme-background-elevated));
   color: rgb(var(--theme-text-muted));
   border-color: rgb(var(--theme-border));
 }
@@ -218,7 +218,7 @@
 }
 
 .toastui-editor-defaultUI-toolbar button:not(:disabled):hover {
-  background-color: rgb(var(--theme-background-tint));
+  background-color: rgb(var(--theme-background-elevated));
   border: 1px solid rgb(var(--theme-background));
 }
 
@@ -228,7 +228,7 @@
 
 .toastui-editor-md-code,
 .toastui-editor-contents code {
-  background-color: rgb(var(--theme-background-tint));
+  background-color: rgb(var(--theme-background-elevated));
 }
 
 .dark-theme .toastui-editor-md-code,
@@ -258,7 +258,7 @@
 }
 
 .toastui-editor-popup-add-heading ul li:hover {
-  background-color: rgb(var(--theme-background-highlight));
+  background-color: rgb(var(--theme-background-elevated));
 }
 
 .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item {

diff --git a/client/style.css b/client/style.css
index 6c0306f8b0f94cc8a654c52ee1dfa3fa39117e85..634af87bb328e7f0838eb4cf629fcac5005582f4 100644 (file)
--- a/client/style.css
+++ b/client/style.css
@@ -15,9 +15,7 @@
         --theme-brand: 248 166 107;\r
 \r
         --theme-background: 255 255 255;\r
-        --theme-background-elevated: 255 255 255;\r
-        --theme-background-tint: 243 244 245;\r
-        --theme-background-highlight: 239 243 255;\r
+        --theme-background-elevated: 243 244 245;\r
 \r
         --theme-text: 44 49 57;\r
         --theme-text-muted: 136 145 161;\r
@@ -32,8 +30,6 @@
 \r
         --theme-background: 34 38 44;\r
         --theme-background-elevated: 44 49 57;\r
-        --theme-background-tint: 34 38 44;\r
-        --theme-background-highlight: 136 145 161;\r
 \r
         --theme-text: 193 199 208;\r
         --theme-text-muted: 136 145 161;\r

diff --git a/client/views/Note.vue b/client/views/Note.vue
index 2a9579e4328f61eab38576a72582ab1a92e492b6..2e2033536e38fd821bf8848b1f9dc72591f8dfd3 100644 (file)
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -4,6 +4,7 @@
     ref="deleteConfirmModal"
     title="Confirm Deletion"
     :message="`Are you sure you want to delete the note '${note.title}'?`"
+    confirmButtonText="Delete"
     isDanger
     @confirm="deleteConfirmedHandler"
   />

diff --git a/client/views/SearchResults.vue b/client/views/SearchResults.vue
index 900bb160cf5e2933a940c80e56ced4cbb1cd5bd4..93f95ee8ce2b36cb1b72564cfb2b81ed1d06d961 100644 (file)
--- a/client/views/SearchResults.vue
+++ b/client/views/SearchResults.vue
@@ -10,7 +10,7 @@
     <LoadingIndicator ref="loadingIndicator" class="max-w-[700px] flex-1">
       <div
         v-for="result in results"
-        class="mb-4 cursor-pointer rounded px-2 py-1 hover:bg-theme-background-tint dark:hover:bg-theme-background-elevated"
+        class="mb-4 cursor-pointer rounded px-2 py-1 hover:bg-theme-background-elevated"
       >
         <RouterLink :to="result.href">
           <!-- Title and Tags -->

diff --git a/tailwind.config.js b/tailwind.config.js
index a5e32514af5b82dd88bff45c04f07a688f5afc76..657e55d9d9305712f0e17e9b332fb5ca7a8225c4 100644 (file)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,10 +20,6 @@ module.exports = {
         "theme-background": "rgb(var(--theme-background) / <alpha-value>)",\r
         "theme-background-elevated":\r
           "rgb(var(--theme-background-elevated) / <alpha-value>)",\r
-        "theme-background-tint":\r
-          "rgb(var(--theme-background-tint) / <alpha-value>)",\r
-        "theme-background-highlight":\r
-          "rgb(var(--theme-background-highlight) / <alpha-value>)",\r
         "theme-text": "rgb(var(--theme-text) / <alpha-value>)",\r
         "theme-text-muted": "rgb(var(--theme-text-muted) / <alpha-value>)",\r
         "theme-text-very-muted":\r
@@ -32,7 +28,7 @@ module.exports = {
         "theme-border": "rgb(var(--theme-border) / <alpha-value>)",\r
         // Static\r
         "theme-success": colors.emerald[500],\r
-        "theme-failure": colors.red[500],\r
+        "theme-danger": colors.rose[600],\r
       },\r
     },\r
   },\r