From 4fa2a4b0f667eb1b66d55f425abd83570c54c07c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Thu, 30 Jun 2022 22:06:29 -0300
Subject: [PATCH] CSS and tailwind changes

---
 src/assets/css/leaflet.scss                  | 17 ++++
 src/assets/css/main.scss                     |  7 ++
 src/components/Autocomplete/Autocomplete.vue | 33 ++++++-
 src/components/Breadcrumb.vue                | 10 +--
 src/components/BreadcrumbDropdown.vue        |  8 +-
 src/components/Card/VCardHeader.vue          |  2 +-
 src/components/Layout/LayoutHeader.vue       |  2 +-
 src/components/Map/VMap.vue                  |  3 +-
 src/content/about.md                         |  2 +-
 src/content/home.md                          |  2 +-
 tailwind.config.js                           | 90 +++++---------------
 11 files changed, 89 insertions(+), 87 deletions(-)
 create mode 100644 src/assets/css/leaflet.scss

diff --git a/src/assets/css/leaflet.scss b/src/assets/css/leaflet.scss
new file mode 100644
index 0000000..8167764
--- /dev/null
+++ b/src/assets/css/leaflet.scss
@@ -0,0 +1,17 @@
+:root {
+  --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
+}
+
+@media (prefers-color-scheme: dark) {
+  .map-tiles {
+    filter:var(--map-tiles-filter, none);
+  }
+}
+
+.dark {
+  color-scheme: dark;
+
+  .map-tiles {
+    filter:var(--map-tiles-filter, none);
+  }
+}
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index f718cb3..a4fbb55 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,12 +1,19 @@
 @import '@/assets/css/tailwind.css';
 @import 'leaflet/dist/leaflet.css';
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;500;700&display=swap');
+@import '@/assets/css/leaflet.scss';
 
 * {
   box-sizing: content-box;
 }
+
 body {
   @apply bg-gray-100;
   @apply dark:bg-gray-900;
   @apply font-inter;
+  @apply dark:text-slate-400;
+}
+
+.dark {
+  color-scheme: dark;
 }
diff --git a/src/components/Autocomplete/Autocomplete.vue b/src/components/Autocomplete/Autocomplete.vue
index 5a18e6f..771602a 100644
--- a/src/components/Autocomplete/Autocomplete.vue
+++ b/src/components/Autocomplete/Autocomplete.vue
@@ -25,7 +25,26 @@
     <input
       v-model="typed"
       type="text"
-      class="autocomplete__input block box-border min-w-full p-2 pl-10 text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:text-sm focus:ring-blue-500 focus:border-blue-500"
+      class="
+        autocomplete__input
+        block
+        box-border
+        min-w-full
+        p-2
+        pl-10
+        text-gray-900
+        bg-gray-50
+        dark:bg-slate-700
+        dark:text-white
+        rounded-md
+        border
+        dark:border-gray-800
+        border-gray-300
+        dark:border-gray-800
+        sm:text-sm
+        dark:placeholder:text-white
+        focus:ring-primary-500
+        focus:border-primary-500"
       :placeholder="placeholder"
     >
     <AutocompleteSpinner
@@ -35,12 +54,20 @@
 
     <ul
       v-if="list.length"
-      class="autocomplete__list list absolute z-[500] max-h-52 overflow-y-auto border bg-white"
+      class="autocomplete__list list absolute z-[500] max-h-52 overflow-y-auto border bg-white dark:bg-gray-800 dark:border-gray-700"
     >
       <li
         v-for="item in list"
         :key="item.id"
-        class="autocomplete__item p-2 border-b bg-white text-sm cursor-pointer hover:bg-gray-200"
+        class="
+          autocomplete__item
+          p-2 border-b 
+          bg-white
+          text-sm
+          cursor-pointer
+          hover:bg-gray-200
+          dark:border-gray-700
+          dark:bg-gray-800"
         @click="selectItem(item)"
       >
         <span v-html="item[label]" />
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 115fdc9..886dd15 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="inline-flex items-center space-x-1 flex-wrap">
+  <ul class="inline-flex items-center flex-wrap">
     <li
       v-for="(item, key, index) in list"
       :key="item.id"
@@ -20,7 +20,7 @@
       </svg>
       <router-link 
         v-if="item.length === 1"
-        class="inline-flex items-center text-sm text-accent-100 hover:text-gray-900"
+        class="inline-flex items-center text-sm text-accent-100 hover:text-gray-900 text-primary-500"
         :to="{ name: 'otus-id', params: { id: item[0].id } }"
       >
         {{ key }}
@@ -34,7 +34,7 @@
     </li>
 
     <li 
-      class="inline-flex items-center"
+      class="inline-flex items-center ml-0"
     >
       <svg
         class="w-4 h-4 text-gray-400"
@@ -57,9 +57,9 @@
 </template>
 
 <script setup>
-import BreadcrumbDropdown from './BreadcrumbDropdown.vue';
+import BreadcrumbDropdown from './BreadcrumbDropdown.vue'
 
-const props = defineProps({
+defineProps({
   list: {
     type: Object,
     default: () => ({})
diff --git a/src/components/BreadcrumbDropdown.vue b/src/components/BreadcrumbDropdown.vue
index 9aaa3ec..e7413fb 100644
--- a/src/components/BreadcrumbDropdown.vue
+++ b/src/components/BreadcrumbDropdown.vue
@@ -2,12 +2,12 @@
   <div class="relative">
     <div>
       <button
-        class="inline-flex items-center text-sm text-gray-700 hover:text-gray-900"
+        class="inline-flex items-center text-sm hover:text-gray-900 text-primary-500 dark:hover:text-gray-500"
         @click="dropdownOpen = !dropdownOpen"
       >
         <slot />
         <svg
-          class="h-5 w-5 text-gray-800 print:hidden"
+          class="h-5 w-5 text-primary-500 print:hidden"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
@@ -28,12 +28,12 @@
 
       <div
         v-if="dropdownOpen"
-        class="absolute right-0 py-2 bg-white rounded-md shadow-xl z-20"
+        class="absolute right-0 py-2 bg-white dark:bg-gray-900 rounded-md shadow-xl z-20"
       >
         <router-link
           v-for="otu in list"
           :key="otu.id"
-          class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"
+          class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-slate-400 hover:bg-gray-700 hover:text-white"
           :to="{ name: 'otus-id', params: { id: otu.id } }"
         >
           {{ otu.name || key }}
diff --git a/src/components/Card/VCardHeader.vue b/src/components/Card/VCardHeader.vue
index b537f0a..73664c2 100644
--- a/src/components/Card/VCardHeader.vue
+++ b/src/components/Card/VCardHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="text-fonts-500 p-4 uppercase text-sm dark:text-slate-200">
+  <div class="p-4 uppercase text-sm dark:text-slate-200">
     <slot />
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
index 47b65ef..b81538a 100644
--- a/src/components/Layout/LayoutHeader.vue
+++ b/src/components/Layout/LayoutHeader.vue
@@ -9,7 +9,7 @@
       rounded
       border-b
       dark:border-b-gray-800
-      dark:bg-gray-900
+      dark:bg-gray-800/50
       pl-4
       pr-4
       h-9
diff --git a/src/components/Map/VMap.vue b/src/components/Map/VMap.vue
index e3e36af..3e03977 100644
--- a/src/components/Map/VMap.vue
+++ b/src/components/Map/VMap.vue
@@ -83,7 +83,8 @@ let geoJSONGroup = new L.FeatureGroup()
 const leafletMap = ref(null)
 const tiles = {
   osm: L.tileLayer(map_server_tils, {
-    maxZoom: 18
+    maxZoom: 18,
+    className: 'map-tiles'
   })
 }
 
diff --git a/src/content/about.md b/src/content/about.md
index f8f3837..c496e59 100644
--- a/src/content/about.md
+++ b/src/content/about.md
@@ -5,7 +5,7 @@ copyright: All content is CC 0 so that it maybe be shared throughout the world i
 citation: Project collaborative. 2022. Website title. Available at https://example.com. 
 ---
 <div class="container mx-auto mt-4 pl-4 pr-4">
-  <div class="prose lg:prose-base max-w-none">
+  <div class="prose dark:prose-invert lg:prose-base max-w-none">
 
 # {{frontmatter.title}}
 
diff --git a/src/content/home.md b/src/content/home.md
index fc72567..869716f 100644
--- a/src/content/home.md
+++ b/src/content/home.md
@@ -4,7 +4,7 @@ lead: Taxa from your imagination to the web
 project: Your project
 ---
 <div class="container mx-auto mt-4 pl-4 pr-4">
-  <div class="prose lg:prose-base max-w-none">
+  <div class="prose dark:prose-invert lg:prose-base max-w-none">
    
   # {{frontmatter.title}}
   _{{frontmatter.lead}}_
diff --git a/tailwind.config.js b/tailwind.config.js
index 031bc02..252b312 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
-// https://colors.muz.li/palette/24AADB/198599/2c4bdb/24db44/199930
+const colors = require('tailwindcss/colors')
+
 module.exports = {
   content: [
     "./index.html",
@@ -13,76 +14,25 @@ module.exports = {
         inter: ['Inter', 'sans-serif']
       },
       colors: {
-        'primary': { // Sky
-          50: '#f0f9ff',
-          100: '#e0f2fe',
-          200: '#bae6fd',
-          300: '#7dd3fc',
-          400: '#38bdf8',
-          500: '#0ea5e9',
-          600: '#0284c7',
-          700: '#0369a1',
-          800: '#075985',
-          900: '#0c4a6e'
-        },
-        'secondary-2': {
-          50: '#ecfeff', //Cyan 
-          100: '#cffafe',
-          200: '#a5f3fc',
-          300: '#67e8f9',
-          400: '#22d3ee',
-          500: '#06b6d4',
-          600: '#0891b2',
-          700: '#0e7490',
-          800: '#155e75',
-          900: '#164e63'
-        },
-        'secondary-3': { // Indigo
-          50: '#eef2ff', 
-          100: '#e0e7ff',
-          200: '#c7d2fe',
-          300: '#a5b4fc',
-          400: '#818cf8',
-          500: '#6366f1',
-          600: '#4f46e5',
-          700: '#4338ca',
-          800: '#3730a3',
-          900: '#312e81'
-        },
-        'secondary-4': { // Green
-          50: '#f0fdf4', 
-          100: '#dcfce7',
-          200: '#bbf7d0',
-          300: '#86efac',
-          400: '#4ade80',
-          500: '#22c55e',
-          600: '#16a34a',
-          700: '#15803d',
-          800: '#166534',
-          900: '#14532d'
-        },
-        'secondary-5': { // Lime
-          50: '#f7fee7', 
-          100: '#ecfccb',
-          200: '#d9f99d',
-          300: '#bef264',
-          400: '#a3e635',
-          500: '#84cc16',
-          600: '#65a30d',
-          700: '#4d7c0f',
-          800: '#3f6212',
-          900: '#365314'
-        },
-        'fonts': {
-          50: '#24DBB1', //primary font
-          100: '#C1BFC4', //secondary herader font
-          200: '#858388', //secondary font
-          400: '#7D7C80', //grayed out text
-          600: '#727E87', //primary header font
-          800: '#3E9AFC', //link blue
-        },
-        
+        'primary': colors.sky,
+        'secondary-2': colors.cyan,
+        'secondary-3': colors.indigo,
+        'secondary-4': colors.green,
+        'secondary-5': colors.lime
       },
+      typography: ({ theme }) => ({
+        DEFAULT: {
+          css: {
+            '--tw-prose-links': theme('colors.primary[500]'),
+          },
+        },
+        invert: {
+          css: {
+            '--tw-prose-links': theme('colors.primary[500]'),
+          }
+        }
+      }),
+
       screens: {
         'print': {'raw': 'print'}
       }