refactor in process

export const convertThemeToColorWhiteDefault = (theme: string | undefined) => {

  if (!theme) return '#ffffff';

  switch (theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#64748b';

    case 'blue':

      return '#3b82f6';

    case 'sky':

      return '#0ea5e9';

    case 'teal':

      return '#14b8a6';

    case 'lime':

      return '#84cc16';

    case 'green':

      return '#22c55e';

    case 'yellow':

      return '#eab308';

    case 'amber':

      return '#f59e0b';

    case 'orange':

      return '#f97316';

    case 'pink':

      return '#ec4899';

    case 'fuchsia':

      return '#d946ef';

    case 'purple':

      return '#a855f7';

    case 'indigo':

      return '#6366f1';

    case 'rose':

      return '#f43f5e';

    case 'red':

      return '#ef4444';

    case 'black':

      return '#000000';

  }

  return '#ffffff';

};

export const convert800ThemeToColorGrayDefault = (theme: string | undefined) => {

  if (!theme) return '#9294a1';

  switch (theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#1e293b';

    case 'blue':

      return '#1e40af';

    case 'sky':

      return '#075985';

    case 'teal':

      return '#115e59';

    case 'lime':

      return '#3f6212';

    case 'green':

      return '#166534';

    case 'yellow':

      return '#854d0e';

    case 'amber':

      return '#92400e';

    case 'orange':

      return '#9a3412';

    case 'pink':

      return '#9d174d';

    case 'fuchsia':

      return '#86198f';

    case 'purple':

      return '#6b21a8';

    case 'indigo':

      return '#3730a3';

    case 'rose':

      return '#9f1239';

    case 'red':

      return '#991b1b';

    case 'black':

      return '#000000';

  }

  return '#9294a1';

};

export const convertThemeToColorBlackDefault = (theme: string | undefined) => {

  if (!theme) return '#000000';

  switch (theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#64748b';

    case 'blue':

      return '#3b82f6';

    case 'sky':

      return '#0ea5e9';

    case 'teal':

      return '#14b8a6';

    case 'lime':

      return '#84cc16';

    case 'green':

      return '#22c55e';

    case 'yellow':

      return '#eab308';

    case 'amber':

      return '#f59e0b';

    case 'orange':

      return '#f97316';

    case 'pink':

      return '#ec4899';

    case 'fuchsia':

      return '#d946ef';

    case 'purple':

      return '#a855f7';

    case 'indigo':

      return '#6366f1';

    case 'rose':

      return '#f43f5e';

    case 'red':

      return '#ef4444';

    case 'black':

      return '#000000';

  }

  return '#000000';

};

<script setup lang="ts">

import { useInterfaceStore } from '@/app/stores/interface';

import { setDefaultSheetBackground } from '@/app/helpers/images';

interface Props {

  isEditMode: boolean;

  backgroundUrl: string;

}

defineProps<Props>();

const emit = defineEmits(['uploadFile']);

const interfaceStore = useInterfaceStore();

const isDarkMode = computed(() => interfaceStore.isDarkMode);

const defaultBackgroundUrl = computed<string>(() => interfaceStore.defaultSheetBackground);

</script>

<template>

  <main id="sheetContainer" :style="`background-color: ${isDarkMode ? 'black' : 'light'}`">

    <article style="min-height: 200px" class="backgroundContainer relative">

      <img

        :src="backgroundUrl"

        alt="Background image"

        class="w-full pointer-events-none select-none"

      />

      <SheetBackgroundMenu

        v-show="isEditMode"

        :isBackgroundDefault="backgroundUrl !== defaultBackgroundUrl"

        @uploadFile="emit('uploadFile', $event)"

        @setDefaultBackground="setDefaultSheetBackground"

      />

    </article>

    <article class="flex items-start justify-center">

      <Suspense>

        <div ref="entitiesContainer" class="w-full pt-4">

          <EntitiesList :isEditMode="isEditMode" />

        </div>

        <template #fallback><BaseLoader /></template

      ></Suspense>

    </article>

  </main>

</template>

<style scoped></style>

<script setup lang="ts">

interface Props {

  color?: string;

  size?: string | number;

}

defineProps<Props>();

</script>

<template>

  <svg

    :width="`${size ?? 40}px`"

    :height="`${size ?? 40}px`"

    viewBox="0 0 24 24"

    fill="none"

    xmlns="http://www.w3.org/2000/svg"

  >

    <path

      d="M14.2639 15.9376L12.5958 14.2835C11.7909 13.4852 11.3884 13.0861 10.9266 12.9402C10.5204 12.8119 10.0838 12.8166 9.68048 12.9537C9.22188 13.1096 8.82814 13.5173 8.04068 14.3327L4.04409 18.2802M14.2639 15.9376L14.6053 15.5991C15.4112 14.7999 15.8141 14.4003 16.2765 14.2544C16.6831 14.1262 17.12 14.1312 17.5236 14.2688C17.9824 14.4252 18.3761 14.834 19.1634 15.6515L20 16.4936M14.2639 15.9376L18.275 19.9566M18.275 19.9566C17.9176 20.0001 17.4543 20.0001 16.8 20.0001H7.2C6.07989 20.0001 5.51984 20.0001 5.09202 19.7821C4.71569 19.5904 4.40973 19.2844 4.21799 18.9081C4.12796 18.7314 4.07512 18.5322 4.04409 18.2802M18.275 19.9566C18.5293 19.9257 18.7301 19.8728 18.908 19.7821C19.2843 19.5904 19.5903 19.2844 19.782 18.9081C20 18.4803 20 17.9202 20 16.8001V16.4936M12.5 4L7.2 4.00011C6.07989 4.00011 5.51984 4.00011 5.09202 4.21809C4.71569 4.40984 4.40973 4.7158 4.21799 5.09213C4 5.51995 4 6.08 4 7.20011V16.8001C4 17.4576 4 17.9222 4.04409 18.2802M20 11.5V16.4936M14 10.0002L16.0249 9.59516C16.2015 9.55984 16.2898 9.54219 16.3721 9.5099C16.4452 9.48124 16.5146 9.44407 16.579 9.39917C16.6515 9.34859 16.7152 9.28492 16.8425 9.1576L21 5.00015C21.5522 4.44787 21.5522 3.55244 21 3.00015C20.4477 2.44787 19.5522 2.44787 19 3.00015L14.8425 7.1576C14.7152 7.28492 14.6515 7.34859 14.6009 7.42112C14.556 7.4855 14.5189 7.55494 14.4902 7.62801C14.4579 7.71033 14.4403 7.79862 14.4049 7.97518L14 10.0002Z"

      :stroke="color ?? '#000000'"

      stroke-width="2"

      stroke-linecap="round"

      stroke-linejoin="round"

    />

  </svg>

</template>

<style scoped></style>

<script setup lang="ts">

interface Props {

  color?: string;

  size?: string | number;

}

defineProps<Props>();

</script>

<template>

  <svg

    :width="`${size ?? 40}px`"

    :height="`${size ?? 40}px`"

    viewBox="0 0 24 24"

    fill="none"

    xmlns="http://www.w3.org/2000/svg"

  >

    <path

      d="M12 17L12 10M12 10L15 13M12 10L9 13"

      :stroke="color ?? '#000000'"

      stroke-width="1.5"

      stroke-linecap="round"

      stroke-linejoin="round"

    />

    <path d="M16 7H12H8" :stroke="color ?? '#000000'" stroke-width="1.5" stroke-linecap="round" />

    <path

      d="M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C21.5093 4.43821 21.8356 5.80655 21.9449 8"

      :stroke="color ?? '#000000'"

      stroke-width="1.5"

      stroke-linecap="round"

    />

  </svg>

</template>

<style scoped></style>

export const convertThemeToColorWhiteDefault = (theme: string | undefined) => {

  if (!theme) return '#ffffff';

  switch (theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#64748b';

    case 'blue':

      return '#3b82f6';

    case 'sky':

      return '#0ea5e9';

    case 'teal':

      return '#14b8a6';

    case 'lime':

      return '#84cc16';

    case 'green':

      return '#22c55e';

    case 'yellow':

      return '#eab308';

    case 'amber':

      return '#f59e0b';

    case 'orange':

      return '#f97316';

    case 'pink':

      return '#ec4899';

    case 'fuchsia':

      return '#d946ef';

    case 'purple':

      return '#a855f7';

    case 'indigo':

      return '#6366f1';

    case 'rose':

      return '#f43f5e';

    case 'red':

      return '#ef4444';

    case 'black':

      return '#000000';

  }

  return '#ffffff';

};

export const convert800ThemeToColorGrayDefault = (theme: string | undefined) => {

  if (!theme) return '#9294a1';

  switch (theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#1e293b';

    case 'blue':

      return '#1e40af';

    case 'sky':

      return '#075985';

    case 'teal':

      return '#115e59';

    case 'lime':

      return '#3f6212';

    case 'green':

      return '#166534';

    case 'yellow':

      return '#854d0e';

    case 'amber':

      return '#92400e';

    case 'orange':

      return '#9a3412';

    case 'pink':

      return '#9d174d';

    case 'fuchsia':

      return '#86198f';

    case 'purple':

      return '#6b21a8';

    case 'indigo':

      return '#3730a3';

    case 'rose':

      return '#9f1239';

    case 'red':

      return '#991b1b';

    case 'black':

      return '#000000';

  }

  return '#9294a1';

};

export const convertThemeToColorBlackDefault = (theme: string | undefined) => {

  if (!theme) return '#000000';

  switch (theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#64748b';

    case 'blue':

      return '#3b82f6';

    case 'sky':

      return '#0ea5e9';

    case 'teal':

      return '#14b8a6';

    case 'lime':

      return '#84cc16';

    case 'green':

      return '#22c55e';

    case 'yellow':

      return '#eab308';

    case 'amber':

      return '#f59e0b';

    case 'orange':

      return '#f97316';

    case 'pink':

      return '#ec4899';

    case 'fuchsia':

      return '#d946ef';

    case 'purple':

      return '#a855f7';

    case 'indigo':

      return '#6366f1';

    case 'rose':

      return '#f43f5e';

    case 'red':

      return '#ef4444';

    case 'black':

      return '#000000';

  }

  return '#000000';

};