Update style

.eslintrc.js

@@ -10,7 +10,8 @@ module.exports = {
     defineEmits: true,
     defineProps: true,
     __APP_ENV__: true,
-    __basedir: true
+    __basedir: true,
+    __tailwindCSSTaxonPagesConfigPath: true
   },
   rules: {
     'vue/no-v-html': 'off'

config/header.yml

@@ -1,8 +1,6 @@
 ---
   header_logo_url: https://i.ibb.co/5n5jMWL/SiteLogo.jpg
   header_logo_text: Orthoptera Species File
-  header_class: bg-[#89a741]
-  header_link_class: text-white 
   header_links:
     - label: Home
       link: /

config/vendor/tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    require(__basedir + '/tailwind.config.js')
+    require(__tailwindCSSTaxonPagesConfigPath)
   ]
 }

src/assets/css/main.css

@@ -2,25 +2,3 @@
 @import 'leaflet/dist/leaflet.css';
 @import '@/assets/css/leaflet.css';
 @import '@/assets/css/webkit.css';
-
-* {
-  box-sizing: content-box;
-}
-
-body {
-  background-color: #f5f7fb;
-  @apply 
-    font-main
-    dark:bg-slate-900
-    dark:text-slate-400;
-}
-
-a {
-  @apply 
-    text-primary-500
-    hover:text-gray-900;
-}
-
-.dark {
-  color-scheme: dark;
-}

src/assets/css/tailwind.css

@@ -1,3 +1,54 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --color-primary: 137, 167, 65;
+    --color-primary-content: 255, 255, 255;
+
+    --color-secondary: 14, 165, 233;
+    --color-secondary-content: 255, 255, 255;
+
+    --color-base-0: 255, 255, 255;
+    --color-base-100: 245, 247, 251;
+    --color-base-200: 226, 232, 240;
+    --color-base-300: 203, 213, 225;
+    --color-base-content: 0, 0, 0;
+  }
+
+  .dark {
+    --color-primary: 14, 165, 233;
+    --color-primary-content: 255, 255, 255;
+
+    --color-secondary: 14, 165, 233;
+    --color-secondary-content: 255, 255, 255;
+
+    --color-base-0: 17,24,39;
+    --color-base-100: 15, 23, 42;
+    --color-base-200: 30, 41, 59;
+    --color-base-300: 30, 41, 59;
+    --color-base-content: 255, 255, 255;
+  }
+
+  * {
+    box-sizing: content-box;
+  }
+
+  body {
+    @apply 
+      font-main
+      bg-base-100
+      dark:text-slate-400;
+  }
+
+  a {
+    @apply 
+      text-secondary-color;
+      hover:text-gray-900;
+  }
+
+  .dark {
+    color-scheme: dark;
+  }
+}

src/components/Autocomplete/Autocomplete.global.vue

@@ -9,18 +9,7 @@
       w-fit"
   >
     <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-      <svg
-        class="w-5 h-5 text-gray-500"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-          clip-rule="evenodd"
-        />
-      </svg>
+      <IconSearch class="w-5 h-5 text-gray-500" />
     </div>
     <input
       v-model="typed"
@@ -30,12 +19,11 @@
         block
         box-border
         min-w-full
-        p-2
+        p-1.5
         pl-10
         text-gray-900
-        bg-gray-50
         dark:bg-slate-800
-        rounded-md
+        rounded
         border
         sm:text-sm
         dark:text-white

src/components/Breadcrumb.vue

@@ -5,53 +5,38 @@
       :key="item.id"
       class="inline-flex items-center"
     >
-      <svg
+      <IconArrowRight
         v-if="index"
-        class="w-4 h-4 text-gray-400"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-          clip-rule="evenodd"
-        />
-      </svg>
+        class="w-3 h-3 mr-0.5 ml-0.5 opacity-50" 
+      />
       <router-link 
         v-if="item.length === 1"
-        class="inline-flex items-center text-sm text-accent-100 hover:text-gray-900 dark:hover:text-gray-500 text-primary-500"
+        class="
+          inline-flex 
+          items-center 
+          text-sm 
+          text-accent-100 
+          hover:text-gray-900 
+          dark:hover:text-gray-500 
+          text-secondary-color
+        "
         :to="{ name: 'otus-id', params: { id: item[0].id } }"
       >
         {{ key }}
       </router-link>
-      <breadcrumb-dropdown 
+      <BreadcrumbDropdown
         v-else 
         :list="item.map(o => ({ ...o, name: o.name || key }))"
       >
         {{ key }}
-      </breadcrumb-dropdown>
+      </BreadcrumbDropdown>
     </li>
 
     <li 
-      class="inline-flex items-center ml-0"
+      class="inline-flex items-center ml-0 text-sm"
     >
-      <svg
-        class="w-4 h-4 text-gray-400"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-          clip-rule="evenodd"
-        />
-      </svg>
-      <span
-        class="text-sm"
-        v-html="current.name_string"
-      />
+      <IconArrowRight class="w-3 h-3 mr-0.5 ml-0.5 opacity-50" />
+      <span v-html="current.name_string" />
     </li>
   </ul>
 </template>

src/components/Button/ButtonExpand.global.vue

@@ -3,20 +3,20 @@
     type="button"
     class="
       button-expand
-      bg-white
-      dark:text-gray-400
-      dark:bg-gray-900 border
-      border-black
-      w-[14px]
-      h-[14px]
-      min-w-[14px]
-      min-h-[14px]
-      rounded
-      leading-3"
+      bg-base-0
+      text-secondary-color
+      w-5
+      h-5"
     @click="isExpanded = !isExpanded"
   >
-    <span v-if="isExpanded">-</span>
-    <span v-else>+</span>
+    <IconMinusCircle
+      v-if="isExpanded" 
+      class="w-5 h-5"
+    />
+    <IconPlusCircle
+      v-else
+      class="w-5 h-5"
+    />
   </button>
 </template>
 

src/components/Card/VCard.global.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border-1 card dark:border-slate-700 bg-white print:shadow-none print:border-0 dark:bg-slate-800 rounded">
+  <div class="border-1 card border-base-2 bg-base-0 print:shadow-none print:border-0 rounded">
     <slot />
   </div>
 </template>

src/components/Card/VCardContent.global.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 pl-5 pr-5 dark:text-slate-400 text-slate-800">
+  <div class="p-4 pl-5 pr-5">
     <slot />
   </div>
 </template>

src/components/Card/VCardHeader.global.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 pl-5 pr-5 text dark:text-slate-200 border-b font-medium dark:border-b-slate-700">
+  <div class="p-4 pl-5 pr-5 border-b font-medium border-base-200">
     <slot />
   </div>
 </template>

src/components/Gallery/GalleryImage.global.vue

@@ -6,9 +6,9 @@
         justify-center 
         border
         print:hidden
-        bg-white  
-        dark:bg-slate-800 
-        dark:border-slate-600"
+        bg-base-0
+        border-base-200
+      "
     >
       <div class="h-80 max-h-80 flex items-center justify-center">
         <img

src/components/Gallery/GalleryThumbnail.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 max-h-20 h-20 dark:border-gray-600 rounded-md border-2"
+    class="bg-base-0 flex flex-col justify-center cursor-pointer w-24 max-h-20 h-20 border-base-200 rounded-md border-2"
     :title="title"
   >
     <img 

src/components/Gallery/GalleryThumbnailList.vue

@@ -9,7 +9,7 @@
     >
       <GalleryThumbnail
         :image="image"
-        :class="{ 'border-2 border-primary-500 dark:border-primary-500': current === index }"
+        :class="{ 'border-2 border-secondary-color': current === index }"
         :title="image.depictions.map(d => d.label).join(';')"
         @click="emit('selectIndex', index)"
       />

src/components/Icon/IconArrowDown.global.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M19 9l-7 7-7-7"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>

src/components/Icon/IconArrowLeft.global.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      class="drop-shadow"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M15 19l-7-7 7-7"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>

src/components/Icon/IconArrowRight.global.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      class="drop-shadow"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M9 5l7 7-7 7"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>

src/components/Icon/IconMinusCircle.global.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>