feat: poiCard detail button has poi color

components/PoisCard/PoiCardContent.vue

@@ -17,6 +17,12 @@
           "
           class="tw-ml-6 tw-px-3 tw-py-1.5 tw-text-xs tw-text-zinc-800 tw-bg-zinc-100 hover:tw-bg-zinc-200 focus:tw-bg-zinc-200 tw-transition tw-transition-colors tw-rounded-md"
           :to="websiteDetails"
+          :style="
+            'background:' +
+            colorLine +
+            ';color:' +
+            pickTextColorBasedOnBgColor(colorLine, 'white')
+          "
           rel="noopener noreferrer"
           @click.stop="trackingPopupEvent('details')"
         >
@@ -26,6 +32,12 @@
           v-else
           class="tw-ml-6 tw-px-3 tw-py-1.5 tw-text-xs tw-text-zinc-800 tw-bg-zinc-100 hover:tw-bg-zinc-200 focus:tw-bg-zinc-200 tw-transition tw-transition-colors tw-rounded-md"
           :href="websiteDetails"
+          :style="
+            'background:' +
+            colorLine +
+            ';color:' +
+            pickTextColorBasedOnBgColor(colorLine, 'white')
+          "
           rel="noopener noreferrer"
           @click.stop="trackingPopupEvent('details')"
         >
@@ -143,6 +155,7 @@ import Fields from '~/components/PoisCard/Fields.vue'
 import FavoriteIcon from '~/components/UI/FavoriteIcon.vue'
 import TeritorioIcon from '~/components/UI/TeritorioIcon.vue'
 import { ApiPoi, ApiPoiId } from '~/lib/apiPois'
+import { pickTextColorBasedOnBgColor } from '~/lib/colorDefiner'
 import { coordinatesHref } from '~/lib/coordinates'
 import { favoritesStore } from '~/stores/favorite'
 import { mapStore } from '~/stores/map'
@@ -255,6 +268,7 @@ export default defineNuxtComponent({
   },
 
   methods: {
+    pickTextColorBasedOnBgColor,
     onZoomClick() {
       this.trackingPopupEvent('zoom')
       this.$emit('zoom-click', this.poi)

lib/colorDefiner.ts

@@ -0,0 +1,20 @@
+export function pickTextColorBasedOnBgColor(
+  bgColor: string,
+  lightColor?: string,
+  darkColor?: string
+) {
+  const color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor
+  const r = parseInt(color.substring(0, 2), 16) // hexToR
+  const g = parseInt(color.substring(2, 4), 16) // hexToG
+  const b = parseInt(color.substring(4, 6), 16) // hexToB
+  const uiColors = [r / 255, g / 255, b / 255]
+  const c = uiColors.map((col) => {
+    if (col <= 0.03928) {
+      return col / 12.92
+    }
+    return Math.pow((col + 0.055) / 1.055, 2.4)
+  })
+  const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
+
+  return L > 0.179 ? darkColor : lightColor
+}