Move vars

src/assets/css/main.css

@@ -1,5 +1,24 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;0,900;1,100;1,400&display=swap');
+@import '@/assets/css/vars.css';
 @import '@/assets/css/tailwind.css';
 @import 'leaflet/dist/leaflet.css';
 @import '@/assets/css/leaflet.css';
 @import '@/assets/css/webkit.css';
+
+* {
+  box-sizing: content-box;
+}
+
+body {
+  @apply 
+    font-main
+    bg-base-background
+}
+
+a {
+  @apply text-secondary-color;
+}
+
+.dark {
+  color-scheme: dark;
+}

src/assets/css/tailwind.css

@@ -1,55 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-: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-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;
-
-  --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/assets/css/vars.css

@@ -0,0 +1,32 @@
+: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-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;
+  --color-map-type-material: 51,136,255;
+  --color-map-collection-object: 51,136,255;
+}
+
+.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-muted: 30, 41, 59;
+  --color-base-border: 30, 41, 59;
+  --color-base-content: 255, 255, 255;
+}

src/components/Map/utils/geojsonOptions.js

@@ -19,6 +19,7 @@ export default ({
   },
 
   style: (feature) => {
+    console.log(feature.properties?.base?.type)
     if (feature.properties?.base?.type === 'AssertedDistribution') {
       return { 
         color: 'rgb(var(--color-map-asserted))',
@@ -28,5 +29,21 @@ export default ({
         fillOpacity: 0.5
       }
     }
+
+    if (feature.properties?.base?.type === 'TypeMaterial') {
+      return { 
+        color: 'rgb(var(--color-map-type-material))',
+        weight: 1,
+        fillOpacity: 0.5
+      }
+    }
+
+    if (feature.properties?.base?.type === 'CollectionObject') {
+      return { 
+        color: 'rgb(var(--color-map-collection-object))',
+        weight: 1,
+        fillOpacity: 0.5
+      }
+    }
   }
 })