Style changes

src/assets/css/main.css

@@ -1,3 +1,4 @@
+@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/tailwind.css';
 @import 'leaflet/dist/leaflet.css';
 @import '@/assets/css/leaflet.css';

src/assets/css/tailwind.css

@@ -10,8 +10,8 @@
     --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-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;
@@ -24,8 +24,8 @@
     --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-background: 17,24,39;
+    --color-base-foreground: 15, 23, 42;
     --color-base-200: 30, 41, 59;
     --color-base-300: 30, 41, 59;
     --color-base-content: 255, 255, 255;
@@ -38,7 +38,7 @@
   body {
     @apply 
       font-main
-      bg-base-100
+      bg-base-background
       dark:text-slate-400;
   }
 
@@ -51,4 +51,4 @@
   .dark {
     color-scheme: dark;
   }
-}
+}

src/components/Button/ButtonExpand.global.vue

@@ -3,7 +3,7 @@
     type="button"
     class="
       button-expand
-      bg-base-0
+      bg-base-foreground
       text-secondary-color
       w-5
       h-5"

src/components/Card/VCard.global.vue

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

src/components/Gallery/GalleryThumbnail.vue

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

src/components/Gallery/GalleryThumbnailList.vue

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

src/components/ImageViewer/ControlImageNext.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="p-2 cursor-pointer opacity-50 bg-base-content text-base-0"
+    class="p-2 cursor-pointer opacity-50 bg-base-content text-base-background"
   >
     <IconArrowRight class="h-8 w-8" />
   </button>

src/components/ImageViewer/ControlImagePrevious.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="p-2 cursor-pointer opacity-50 bg-base-content text-base-0"
+    class="p-2 cursor-pointer opacity-50 bg-base-content text-base-background"
   >
     <IconArrowLeft class="h-8 w-8" />
   </button>

src/components/ImageViewer/ImageViewer.global.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="fixed z-[10000] h-full overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md bg-base-0"
+    class="fixed z-[10000] h-full overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md bg-base-foreground"
     @click="emit('close')"
   >
     <div 

src/modules/otus/views/Index.vue

@@ -2,8 +2,7 @@
   <div>
     <div 
       class="
-        bg-base-0
-
+        bg-base-foreground
         border-b
         border-base-200
         pl-4 

src/modules/otus/views/Overview.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-      <div class="grid grid-cols-1 gap-4 auto-rows-min">
+    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+      <div class="grid grid-cols-1 gap-3 auto-rows-min">
         <template
           v-for="({ component, available }) in componentsLayout.left"
           :key="component"
@@ -14,7 +14,7 @@
           />
         </template>
       </div>
-      <div class="grid grid-cols-1 auto-rows-min gap-4">
+      <div class="grid grid-cols-1 auto-rows-min gap-3">
         <template
           v-for="({ component, available }) in componentsLayout.right"
           :key="component"

tailwind.config.js

@@ -20,12 +20,12 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        main: ['-apple-system','BlinkMacSystemFont','San Francisco','Segoe UI','Roboto','Helvetica Neue','sans-serif']
+        main: ['Roboto','sans-serif']
       },
       colors: {
         base: {
-          0: withOpacity('--color-base-0'),
-          100: withOpacity('--color-base-100'),
+          background: withOpacity('--color-base-background'),
+          foreground: withOpacity('--color-base-foreground'),
           200: withOpacity('--color-base-200'),
           300: withOpacity('--color-base-300'),
           content: withOpacity('--color-base-content')