CSS changes

config/style/theme.css

@@ -7,8 +7,8 @@
 
   --color-base-foreground: 255, 255, 255;
   --color-base-background: 245, 247, 251;
-  --color-base-200: 226, 232, 240;
-  --color-base-300: 203, 213, 225;
+  --color-base-muted: 226, 232, 240;
+  --color-base-border: 203, 213, 225;
   --color-base-content: 0, 0, 0;
 }
 
@@ -21,7 +21,7 @@
 
   --color-base-background: 23,23,23;
   --color-base-foreground: 38,38,38;
-  --color-base-200: 30, 41, 59;
-  --color-base-300: 55, 65, 81;
+  --color-base-muted: 30, 41, 59;
+  --color-base-border: 55, 65, 81;
   --color-base-content: 255, 255, 255;
 }

src/assets/css/tailwind.css

@@ -2,52 +2,54 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --color-primary: 0, 0, 0;
+  --color-primary-content: 255, 255, 255;
 
-  :root {
-    --color-primary: 0, 0, 0;
-    --color-primary-content: 255, 255, 255;
-
-    --color-secondary: 14, 165, 233;
-    --color-secondary-content: 255, 255, 255;
-
-    --color-base-foreground: 255, 255, 255;
-    --color-base-background: 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-background: 23,23,23;
-    --color-base-foreground: 38,38,38;
-    --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-background
-      dark:text-slate-400;
-  }
-
-  a {
-    @apply 
-      text-secondary-color;
-      hover:text-gray-900;
-  }
+  --color-secondary: 14, 165, 233;
+  --color-secondary-content: 255, 255, 255;
+
+  --color-base-foreground: 255, 255, 255;
+  --color-base-background: 245, 247, 251;
+  --color-base-muted: 226, 232, 240;
+  --color-base-border: 203, 213, 225;
+  --color-base-content: 0, 0, 0;
+
+  --color-map-georeference-marker: 239, 68, 68;
+  --color-map-asserted: 249, 115, 22;
+}
+
+.dark {
+  --color-primary: 14, 165, 233;
+  --color-primary-content: 255, 255, 255;
 
-  .dark {
-    color-scheme: dark;
-  }
+  --color-secondary: 14, 165, 233;
+  --color-secondary-content: 255, 255, 255;
+
+  --color-base-background: 23,23,23;
+  --color-base-foreground: 38,38,38;
+  --color-base-muted: 30, 41, 59;
+  --color-base-border: 30, 41, 59;
+  --color-base-content: 255, 255, 255;
+}
+
+* {
+  box-sizing: content-box;
+}
+
+body {
+  @apply 
+    font-main
+    bg-base-background
+    dark:text-slate-400;
+}
+
+a {
+  @apply 
+    text-secondary-color;
+    hover:text-gray-900;
+}
+
+.dark {
+  color-scheme: dark;
+}

src/components/Autocomplete/Autocomplete.global.vue

@@ -50,7 +50,7 @@
         overflow-y-auto
         border
         bg-base-foreground
-        border-base-300
+        border-base-border
         !m-0"
     >
       <li
@@ -63,7 +63,7 @@
           cursor-pointer
           hover:bg-secondary-color
           hover:bg-opacity-5
-          border-base-300"
+          border-base-border"
         @click="selectItem(item)"
       >
         <span v-html="item[label]" />

src/components/Card/VCard.global.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border-1 card border-base-200 bg-base-foreground print:shadow-none print:border-0 rounded">
+  <div class="border-1 card border-base-muted bg-base-foreground print:shadow-none print:border-0 rounded">
     <slot />
   </div>
 </template>

src/components/Card/VCardHeader.global.vue

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

src/components/Gallery/GalleryImage.global.vue

@@ -7,7 +7,7 @@
         border
         print:hidden
         bg-base-0
-        border-base-200
+        border-base-muted
       "
     >
       <div class="h-80 max-h-80 flex items-center justify-center">

src/components/Gallery/GalleryThumbnail.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="bg-base-background flex flex-col justify-center cursor-pointer w-24 max-h-20 h-20 border-base-200 rounded-md border"
+    class="bg-base-background flex flex-col justify-center cursor-pointer w-24 max-h-20 h-20 border-base-muted rounded-md border"
     :title="title"
   >
     <img 

src/components/Layout/LayoutHeader.vue

@@ -3,7 +3,7 @@
     class="
       relative
       bg-header
-      border-base-200
+      border-base-muted
       px-2
       sm:px-4
       py-2.5

src/components/Map/VMap.global.vue

@@ -163,11 +163,5 @@ const setGeoJSON = geojson => {
 </script>
 
 <style>
-.leaflet-marker-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background-color: red;
-  opacity: 0.5;
-}
+
 </style>

src/components/Map/markers/index.js

@@ -1,7 +1,7 @@
 import L from 'leaflet'
 
 export const squareMarker = L.divIcon({
-  className: 'leaflet-marker-icon',
+  className: 'bg-map-georeference bg-opacity-50 rounded-full',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
 })

src/components/Map/utils/geojsonOptions.js

@@ -21,7 +21,7 @@ export default ({
   style: (feature) => {
     if (feature.properties?.base?.type === 'AssertedDistribution') {
       return { 
-        color: generateHue(5),
+        color: 'rgb(var(--color-map-asserted))',
         weight: 1,
         dashArray: '3',
         dashOffset: '3',

src/components/Navbar/NavbarMobile.vue

@@ -37,11 +37,11 @@
         print:hidden"
     >
       <nav class="font-normal container mx-auto">
-        <ul class="flex flex-col m-0 p-0 border-t border-base-300">
+        <ul class="flex flex-col m-0 p-0 border-t border-base-border">
           <li
             v-for="(item, index) in header_links"
             :key="index"
-            class="border-b border-base-300"
+            class="border-b border-base-border"
           >
             <router-link
               :to="item.link"
@@ -51,7 +51,7 @@
             </router-link>
           </li>
           <li>
-            <SwitchTheme class="text-base-content p-4 pt-3 pb-3 border-b w-full border-base-300" />
+            <SwitchTheme class="text-base-content p-4 pt-3 pb-3 border-b w-full border-base-border" />
           </li>
         </ul>
       </nav>

src/modules/otus/components/Content/ContentTopic.vue

@@ -1,5 +1,5 @@
 <template>
-  <VCardHeader class="border-t border-base-200 first:border-t-0">
+  <VCardHeader class="border-t border-base-muted first:border-t-0">
     {{ title }}
   </VCardHeader>
   <VCardContent>

src/modules/otus/components/Map.vue

@@ -8,6 +8,16 @@
       :geojson="geojson"
       @geojson:ready="isLoading = false"
     />
+    <div v-if="false" class="text-sm flex flex-row justify-around">
+      <div class="flex flex-row items-center p-2">
+        <div class="w-3 h-3 bg-map-georeference m-1" />
+        <span>Georeference</span>
+      </div>
+      <div class="flex flex-row items-center p-2 ">
+        <div class="w-3 h-3 m-1 bg-map-asserted" />
+        <span>Asserted distribution</span>
+      </div>
+    </div>
   </VCard>
 </template>
 

src/modules/otus/services/OtuService.js

@@ -35,6 +35,6 @@ export default class OtuService {
   }
 
   static getContent (otuId) {
-    return makeAPIRequest.get(`/otus/${otuId}/inventory/content`)
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/content`, { extend: ['depiction']})
   }
 }

src/modules/otus/views/Index.vue

@@ -4,7 +4,7 @@
       class="
         bg-base-foreground
         border-b
-        border-base-200
+        border-base-muted
         pl-4 
         pr-4"
     >

tailwind.config.js

@@ -27,11 +27,16 @@ module.exports = {
         base: {
           background: withOpacity('--color-base-background'),
           foreground: withOpacity('--color-base-foreground'),
-          200: withOpacity('--color-base-200'),
-          300: withOpacity('--color-base-300'),
+          muted: withOpacity('--color-base-muted'),
+          border: withOpacity('--color-base-border'),
           content: withOpacity('--color-base-content')
         },
 
+        map: {
+          georeference: withOpacity('--color-map-georeference-marker'),
+          asserted: withOpacity('--color-map-asserted')
+        },
+
         primary: {
           color: withOpacity('--color-primary'),
           content: withOpacity('--color-primary-content')