From: Adam Dullage <redacted>
Date: Sun, 5 May 2024 17:51:01 +0000 (+0100)
Subject: Implement various theming updates
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=ed179347fe7c5db4f03a538f71238fa7aba47fcf;p=flatnotes.git

Implement various theming updates
---

diff --git a/client/components/ConfirmModal.vue b/client/components/ConfirmModal.vue
index 8617fb0..502213a 100644
--- 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 64f92d9..f958a41 100644
--- 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 d858ce3..e1f8ec1 100644
--- 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 7092d41..f879e0e 100644
--- 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 5250d4d..8c8e1cd 100644
--- 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 4f93c3e..fb143b7 100644
--- 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 033e3e8..81665e7 100644
--- 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 6c0306f..634af87 100644
--- a/client/style.css
+++ b/client/style.css
@@ -15,9 +15,7 @@
         --theme-brand: 248 166 107;
 
         --theme-background: 255 255 255;
-        --theme-background-elevated: 255 255 255;
-        --theme-background-tint: 243 244 245;
-        --theme-background-highlight: 239 243 255;
+        --theme-background-elevated: 243 244 245;
 
         --theme-text: 44 49 57;
         --theme-text-muted: 136 145 161;
@@ -32,8 +30,6 @@
 
         --theme-background: 34 38 44;
         --theme-background-elevated: 44 49 57;
-        --theme-background-tint: 34 38 44;
-        --theme-background-highlight: 136 145 161;
 
         --theme-text: 193 199 208;
         --theme-text-muted: 136 145 161;
diff --git a/client/views/Note.vue b/client/views/Note.vue
index 2a9579e..2e20335 100644
--- 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 900bb16..93f95ee 100644
--- 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 a5e3251..657e55d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,10 +20,6 @@ module.exports = {
         "theme-background": "rgb(var(--theme-background) / <alpha-value>)",
         "theme-background-elevated":
           "rgb(var(--theme-background-elevated) / <alpha-value>)",
-        "theme-background-tint":
-          "rgb(var(--theme-background-tint) / <alpha-value>)",
-        "theme-background-highlight":
-          "rgb(var(--theme-background-highlight) / <alpha-value>)",
         "theme-text": "rgb(var(--theme-text) / <alpha-value>)",
         "theme-text-muted": "rgb(var(--theme-text-muted) / <alpha-value>)",
         "theme-text-very-muted":
@@ -32,7 +28,7 @@ module.exports = {
         "theme-border": "rgb(var(--theme-border) / <alpha-value>)",
         // Static
         "theme-success": colors.emerald[500],
-        "theme-failure": colors.red[500],
+        "theme-danger": colors.rose[600],
       },
     },
   },