chore: migrate to nuxt-ui

.vscode/settings.json

@@ -63,5 +63,11 @@
     "https://json.schemastore.org/github-workflow.json": "/.github/workflows/*.yml"
   },
   "testing.automaticallyOpenPeekView": "never",
-  "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs"
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "tailwindCSS.experimental.configFile": "tailwind.config.ts"
 }

app.config.ts

@@ -1,29 +1,6 @@
-import theme from '#tailwind-config/theme.mjs'
-
 export default defineAppConfig({
-  naiveui: {
-    themeConfig: {
-      shared: {
-        common: {
-          fontFamily: theme.fontFamily.sans.join(', '),
-          lineHeight: theme.lineHeight.normal,
-        },
-      },
-      light: {
-        common: {
-          primaryColor: theme.colors.primary[500],
-          primaryColorHover: theme.colors.primary[600],
-          primaryColorPressed: theme.colors.primary[700],
-          primaryColorSuppl: theme.colors.primary[600],
-        },
-      },
-      dark: {
-        common: {
-          primaryColor: theme.colors.primary[500],
-          primaryColorHover: theme.colors.primary[400],
-          primaryColorPressed: theme.colors.primary[600],
-        },
-      },
-    },
+  ui: {
+    primary: 'primary',
+    gray: 'gray',
   },
 })

components/DetailPane.vue

@@ -16,13 +16,13 @@
         <div
           class="absolute top-10 -left-3.5 w-7 h-7 rounded-full bg-white border border-gray-300 md:shadow-sm flex items-center justify-center active:border-gray-300 transform text-gray-400 hover:scale-110 hover:border-gray-400 hover:text-gray-500"
         >
-          <n-button
+          <UButton
             quaternary
             circle
             @click="closePane"
           >
-            <Icon name="ri:close-fill" />
-          </n-button>
+            <UIcon name="ri:close-fill" />
+          </UButton>
         </div>
         <slot>
           <document-editor

components/DocumentEditor.vue

@@ -9,7 +9,7 @@
         variant="plaincaps"
       >
         <template #arrow="{ className }">
-          <Icon
+          <UIcon
             name="ri:arrow-drop-down-line"
             :class="className"
           />

components/DocumentView.vue

@@ -5,12 +5,12 @@
         class="font-semibold text-lg text-primary-800"
         @click="displayDocumentDetails"
       >
-        <Icon
+        <UIcon
           v-if="typeIcon"
           :name="typeIcon"
           class="mr-1"
           :title="typeDescription"
-        ></Icon>
+        />
         <span>{{ document.title }}</span>
       </button>
       <!-- TOOD: Add citation display
@@ -69,14 +69,14 @@
         variant="badge"
         class="border border-gray-400"
       >
-        <!-- TODO: Add icon of group <Icon name="dragon" class="mr-2" /> -->
+        <!-- TODO: Add icon of group <UIcon name="dragon" class="mr-2" /> -->
         {{ keyword }}
       </t-tag>
       <!-- TODO: Add overflow
-      <n-button variant="linkplain" class="text-sm my-auto">
+      <UButton variant="linkplain" class="text-sm my-auto">
         <span>View More (8+)</span>
-        <Icon name="ri:arrow-down-s-line" />
-      </n-button>
+        <UIcon name="ri:arrow-down-s-line" />
+      </UButton>
       -->
     </div>
     <div v-if="'abstract' in document && document.abstract">
@@ -86,20 +86,20 @@
       >
         {{ document.abstract }}
       </span>
-      <n-button
+      <UButton
         text
         class="text-sm my-auto"
         @click="viewFullAbstract = !viewFullAbstract"
       >
         <template v-if="viewFullAbstract">
           <span>View less</span>
-          <Icon name="ri:arrow-up-s-line" />
+          <UIcon name="ri:arrow-up-s-line" />
         </template>
         <template v-else>
           <span>View full abstract</span>
-          <Icon name="ri:arrow-down-s-line" />
+          <UIcon name="ri:arrow-down-s-line" />
         </template>
-      </n-button>
+      </UButton>
     </div>
   </div>
 </template>

components/LandingPageDownload.client.vue

@@ -10,17 +10,13 @@
           JabRef is free and works across all your devices.
         </h3>
         <div class="text-center">
-          <n-button
-            type="primary"
-            size="large"
-            style="height: 3.2em"
-          >
+          <UButton size="lg">
             <a
               class="text-2xl"
               :href="downloadUrl"
               >Download JabRef</a
             >
-          </n-button>
+          </UButton>
         </div>
 
         <div class="text-center pt-8 text-sm">

components/LandingPageGetInvolved.vue

@@ -32,22 +32,25 @@
         </p>
         <p class="text-justify">
           JabRef is developed and maintained by a multidisciplinary
-          <n-popover trigger="hover">
-            <template #trigger>
-              <n-button text>core team</n-button>
+          <UPopover
+            mode="hover"
+            popper="{ arrow: false}"
+          >
+            <UButton variant="link">core team</UButton>
+            <template #panel>
+              <div class="p-4">
+                <ul
+                  v-for="member in maintainers"
+                  :key="member"
+                  class="list-disc"
+                >
+                  <li class="text-sm">
+                    {{ member }}
+                  </li>
+                </ul>
+              </div>
             </template>
-            <div class="px-4 py-1">
-              <ul
-                v-for="member in maintainers"
-                :key="member"
-                class="list-disc"
-              >
-                <li class="text-sm">
-                  {{ member }}
-                </li>
-              </ul>
-            </div>
-          </n-popover>
+          </UPopover>
           of PhD students, postdocs, and researchers in industry who work on
           JabRef in their free time. Without the support of numerous volunteers,
           none of this would have been possible. We welcome anyone who would
@@ -61,21 +64,21 @@
         <div
           class="lg:min-w-0 mx-auto flex flex-col flex-no-shrink flex-grow break-words text-center py-6 md:px-6 max-w-prose"
         >
-          <n-button
+          <UButton
             text
             type="primary"
             class="text-xl mx-auto text-primary-500"
           >
             <a
               href="https://docs.jabref.org/faq/faqcontributing#i-am-not-a-programmer"
             >
-              <Icon
+              <UIcon
                 name="ri:hearts-fill"
                 class="text-6xl"
               />
               <h4 class="text-2xl mb-3 font-semibold">Contribute</h4>
             </a>
-          </n-button>
+          </UButton>
           <h5 class="pb-2 text-xl">Help us build JabRef</h5>
           <p>
             You do not need to be a developer to improve the documentation,
@@ -91,19 +94,19 @@
         <div
           class="lg:min-w-0 mx-auto flex flex-col flex-no-shrink flex-grow break-words text-center py-6 md:px-6 max-w-prose"
         >
-          <n-button
+          <UButton
             text
             type="primary"
             class="text-xl mx-auto text-primary-500"
           >
             <a href="https://github.com/JabRef/jabref/wiki/Donations">
-              <Icon
+              <UIcon
                 name="ri:gift-fill"
                 class="text-6xl"
               />
               <h4 class="text-2xl mb-3 font-semibold">Donate</h4>
             </a>
-          </n-button>
+          </UButton>
           <h5 class="pb-2 text-xl">Support the development</h5>
           <p>
             Help us pay for project development and operating costs so that we
@@ -119,19 +122,19 @@
         <div
           class="lg:min-w-0 mx-auto flex flex-col flex-no-shrink flex-grow break-words text-center py-6 md:px-6 max-w-prose"
         >
-          <n-button
+          <UButton
             text
             type="primary"
             class="text-xl mx-auto text-primary-500"
           >
             <a href="https://github.com/JabRef/jabref">
-              <Icon
+              <UIcon
                 name="ri:code-s-slash-fill"
                 class="text-6xl"
               />
               <h4 class="text-2xl mb-3 font-semibold">Develop</h4>
             </a>
-          </n-button>
+          </UButton>
           <h5 class="pb-2 text-xl">Make JabRef even better</h5>
           <p>
             JabRef is and always will be 100% free and open-source. Contribute

components/LandingPageMore.vue

@@ -16,7 +16,7 @@
             :href="item.href"
             class="text-primary-500 hover:text-primary-600"
           >
-            <Icon
+            <UIcon
               :name="item.icon"
               class="text-6xl"
             />

components/ModalDialog.vue

@@ -36,7 +36,7 @@
             <div
               class="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b"
             >
-              <n-button @click="showModal = false"> Close </n-button>
+              <UButton @click="showModal = false"> Close </UButton>
             </div>
           </slot>
         </div>

components/NavBar.vue

@@ -30,15 +30,15 @@
         type="submit"
         class="absolute left-0 top-0 bottom-0 ml-2"
       >
-        <Icon
+        <UIcon
           name="ri:search-line"
           class="text-gray-400"
         />
       </button>
     </div>
 
     <!-- Hamburger menu for small screens -->
-    <n-popover
+    <UPopover
       ref="hamburgerMenu"
       placement="top-end"
       :overlap="true"
@@ -53,43 +53,45 @@
       "
       @update:show="isHamburgerShown = $event"
     >
-      <template #trigger>
+      <div
+        v-show="isSmallDisplay"
+        class="flex mr-5 items-center relative"
+      >
         <div
-          v-show="isSmallDisplay"
-          class="flex mr-5 items-center relative"
+          v-if="isHamburgerShown"
+          class="fixed z-50 inset-0 w-full h-full"
+          role="dialog"
+          aria-modal="true"
         >
           <div
-            v-if="isHamburgerShown"
-            class="fixed z-50 inset-0 w-full h-full"
-            role="dialog"
-            aria-modal="true"
-          >
-            <div
-              class="backdrop-blur-sm bg-gray-400/20 w-full h-full"
-              aria-hidden="true"
-            ></div>
-          </div>
-          <button
-            class="text-right text-gray-700 text-xl relative z-60"
-            @click="isHamburgerShown = !isHamburgerShown"
-          >
-            <Icon :name="isHamburgerShown ? 'ri:close-fill' : 'ri:menu-fill'" />
-          </button>
+            class="backdrop-blur-sm bg-gray-400/20 w-full h-full"
+            aria-hidden="true"
+          ></div>
         </div>
-      </template>
-      <div class="px-6 py-5 text-base max-w-xs w-full">
         <button
-          class="text-right text-gray-700 text-xl absolute top-3 right-5"
-          @click=";[hamburgerMenu?.setShow(false), (isHamburgerShown = false)]"
+          class="text-right text-gray-700 text-xl relative z-60"
+          @click="isHamburgerShown = !isHamburgerShown"
         >
-          <Icon
-            v-if="isHamburgerShown"
-            name="ri:close-fill"
-          />
+          <UIcon :name="isHamburgerShown ? 'ri:close-fill' : 'ri:menu-fill'" />
         </button>
-        <slot name="collapsed" />
       </div>
-    </n-popover>
+      <template #panel>
+        <div class="px-6 py-5 text-base max-w-xs w-full">
+          <button
+            class="text-right text-gray-700 text-xl absolute top-3 right-5 bg-"
+            @click="
+              ;[hamburgerMenu?.setShow(false), (isHamburgerShown = false)]
+            "
+          >
+            <UIcon
+              v-if="isHamburgerShown"
+              name="ri:close-fill"
+            />
+          </button>
+          <slot name="collapsed" />
+        </div>
+      </template>
+    </UPopover>
 
     <!-- Main menu -->
     <div v-show="!isSmallDisplay">
@@ -102,7 +104,7 @@
               Subscriptions
             </span>
             <div class="inline-block align-top pl-0.5 -mt-1">
-              <Icon
+              <UIcon
                 name="ri:checkbox-blank-circle-fill"
                 class="text-primary-600 text-xs"
               />
@@ -117,7 +119,7 @@
       v-if="showUserProfile"
       class="flex items-center pr-10 space-x-7"
     >
-      <Icon
+      <UIcon
         name="ri:notification-3-fill"
         class="text-gray-400 hover:text-primary-500 text-lg"
       />
@@ -187,15 +189,15 @@
 </template>
 
 <script lang="ts" setup>
+import type { UPopover } from '#ui/types'
 import { useApolloClient, useMutation } from '@vue/apollo-composable'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import { NPopover } from 'naive-ui'
 import { gql } from '~/apollo'
 import { cacheCurrentUser } from '~/apollo/cache'
 import { useUiStore } from '~/store'
 
 const isHamburgerShown = ref(false)
-const hamburgerMenu = ref<typeof NPopover | null>(null)
+const hamburgerMenu = ref<typeof UPopover | null>(null)
 
 const isSmallDisplay = useBreakpoints(breakpointsTailwind).smallerOrEqual('md')
 

components/PasswordInput.vue

@@ -9,7 +9,7 @@
     <div
       class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5"
     >
-      <Icon
+      <UIcon
         class="text-gray-500"
         :name="showHiddenPassword ? 'ri:eye-line' : 'ri:eye-off-line'"
         :title="showHiddenPassword ? 'Show Password' : 'Hide Password'"

components/SideBar.vue

@@ -20,7 +20,7 @@
         href="#"
         class="mb-3 capitalize font-medium text-sm hover:text-teal-600 transition ease-in-out duration-500"
       >
-        <Icon
+        <UIcon
           name="ri:list-check"
           class="mr-2 pb-0.5"
         />
@@ -31,7 +31,7 @@
         href="#"
         class="mb-3 capitalize font-medium text-sm hover:text-teal-600 transition ease-in-out duration-500"
       >
-        <Icon
+        <UIcon
           name="ri:arrow-left-right-fill"
           class="mr-2"
         />
@@ -54,11 +54,11 @@
             class="-ml-8 mr-4 w-4 text-gray-400 inline-block"
             @click="stat.open = !stat.open"
           >
-            <Icon
+            <UIcon
               v-if="!stat.open"
               name="ri:arrow-down-s-line"
             />
-            <Icon
+            <UIcon
               v-else
               name="ri:arrow-up-s-line"
             />
@@ -67,7 +67,7 @@
             class="hover:bg-gray-200 pl-1 pr-1"
             @click="onGroupClicked(node)"
           >
-            <Icon
+            <UIcon
               :name="node.icon"
               class="mr-2 pb-0.5"
             />

components/UButton.stories.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { UButton } from '#components'
+</script>
+<template>
+  <Stories
+    title="UButton"
+    :component="UButton"
+  >
+    <Story title="Standard">
+      <UButton>Button</UButton>
+    </Story>
+    <Story title="Error">
+      <UButton color="error">error</UButton>
+    </Story>
+    <Story title="Success">
+      <UButton color="success">success</UButton>
+    </Story>
+    <Story title="Link">
+      <UButton variant="link">Link</UButton>
+    </Story>
+  </Stories>
+</template>

layouts/content.vue

@@ -30,21 +30,14 @@
       screenshot="https://www.jabref.org/assets/jabref-mainscreen.png"
       :offers="{ price: '0', priceCurrency: 'EUR' }"
     />
-    <n-layout :position="position">
-      <header>
-        <n-layout-header
-          :position="position"
-          class="z-50"
-        >
-          <slot name="header">
-            <NavBar />
-          </slot>
-        </n-layout-header>
+    <div class="overflow-hidden alig">
+      <header class="position-absolute z-50">
+        <NavBar />
       </header>
       <div class="md:mt-20 md:pb-10">
         <slot />
       </div>
-    </n-layout>
+    </div>
   </div>
 </template>
 <script setup lang="ts">

nuxt.config.ts

@@ -125,10 +125,6 @@ export default defineNuxtConfig({
    ** Nuxt.js modules
    */
   modules: [
-    // https://go.nuxtjs.dev/tailwindcss
-    '@nuxtjs/tailwindcss',
-    // Add support for naive-ui
-    '@bg-dev/nuxt-naiveui',
     // Use Pinia for state management
     '@pinia/nuxt',
     // Add server-side graphql support
@@ -142,8 +138,6 @@ export default defineNuxtConfig({
     // Devtools support
     // https://github.com/nuxt/devtools
     '@nuxt/devtools',
-    // Add support for different icons from iconify
-    'nuxt-icon',
     // Add some auto-imports for vee-validate
     '@vee-validate/nuxt',
     // Support for end-to-end testing and unit testing (and Vitest integration)
@@ -152,6 +146,9 @@ export default defineNuxtConfig({
     // Preset for configuring SEO
     // https://nuxtseo.com/nuxt-seo
     '@nuxtjs/seo',
+    // Nuxt UI components library
+    // https://ui.nuxt.com
+    '@nuxt/ui',
   ],
 
   /*
@@ -181,13 +178,22 @@ export default defineNuxtConfig({
    */
   // storybook: {},
 
+  // Use the Nuxt UI Pro preset
+  // https://ui.nuxt.com/pro
+  extends: ['@nuxt/ui-pro'],
+
   tailwindcss: {
     // Expose config so that we can use it to configure naive ui and in the vscode extension
     exposeConfig: {
       write: true,
     },
   },
 
+  colorMode: {
+    // Disable dark mode for now
+    preference: 'light',
+  },
+
   /**
    * GraphQL server config
    * See https://github.com/tobiasdiez/nuxt-graphql-server

package.json

@@ -23,7 +23,7 @@
     "prisma:studio": "prisma studio",
     "prisma:generate": "prisma generate",
     "prisma:generate:watch": "prisma generate --watch",
-    "storybook": "storybook dev -p 6006 --preview-url=http://localhost:3000/_storybook/external-iframe --no-manager-cache",
+    "storybook": "storybook dev -p 6006 --preview-url=http://localhost:3000/_storybook/external-iframe",
     "storybook:build": "storybook build",
     "storybook:publish": "chromatic --exit-zero-on-changes --build-script-name storybook:build",
     "graphql:generate": "graphql-codegen-esm",
@@ -48,9 +48,9 @@
     "@azure/communication-email": "1.0.0",
     "@graphql-tools/schema": "10.0.5",
     "@he-tree/vue": "2.8.2",
+    "@iconify-json/ri": "^1.1.22",
     "@lucia-auth/adapter-prisma": "3.0.2",
     "@lucia-auth/adapter-session-unstorage": "2.1.0",
-    "@nuxtjs/tailwindcss": "6.12.1",
     "@pinia/nuxt": "0.5.3",
     "@popperjs/core": "2.11.8",
     "@prisma/client": "5.18.0",
@@ -85,7 +85,6 @@
     "@apollo/utils.keyvaluecache": "3.1.0",
     "@azure/core-rest-pipeline": "1.16.1",
     "@azure/static-web-apps-cli": "2.0.1",
-    "@bg-dev/nuxt-naiveui": "1.14.0",
     "@graphql-codegen/add": "5.0.3",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/fragment-matcher": "5.0.2",
@@ -98,8 +97,10 @@
     "@graphql-tools/utils": "10.5.1",
     "@graphql-typed-document-node/core": "3.2.0",
     "@nuxt/content": "2.13.2",
+    "@nuxt/image": "^1.7.0",
     "@nuxt/kit": "3.12.4",
     "@nuxt/test-utils": "3.14.0",
+    "@nuxt/ui": "^2.18.4",
     "@nuxtjs/eslint-config": "12.1.0",
     "@nuxtjs/eslint-config-typescript": "12.1.0",
     "@nuxtjs/seo": "2.0.0-rc.18",
@@ -108,9 +109,7 @@
     "@storybook/types": "8.0.8",
     "@storybook/vue3": "7.6.20",
     "@storybook/vue3-vite": "7.6.20",
-    "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/line-clamp": "0.4.4",
-    "@tailwindcss/typography": "0.5.13",
     "@types/bcryptjs": "2.4.6",
     "@types/lodash": "4.17.6",
     "@types/node": "20.14.10",
@@ -139,7 +138,7 @@
     "graphql-codegen-typescript-validation-schema": "0.16.0",
     "graphql-tag": "2.12.6",
     "mount-vue-component": "0.10.2",
-    "naive-ui": "2.39.0",
+    "@nuxt/ui-pro": "^1.4.1",
     "nuxt": "3.12.4",
     "nuxt-graphql-server": "3.1.4",
     "nuxt-icon": "0.6.10",

pages/_storybook/external-iframe.vue

@@ -22,7 +22,7 @@ import type { VueRenderer } from '@storybook/vue3'
 import { applyDecorators } from '@storybook/vue3/dist/entry-preview.mjs'
 import { mount } from 'mount-vue-component'
 import * as JabRefLogoStories from '~/components/JabRefLogo.stories.vue'
-import * as NButtonStories from '~/components/n-button.stories.vue'
+import * as UButtonStories from '~/components/UButton.stories.vue'
 import * as TAlertStories from '~/components/t-alert.stories'
 import * as TCheckboxStories from '~/components/t-checkbox.stories'
 import * as TDropdownStories from '~/components/t-dropdown.stories'
@@ -71,7 +71,7 @@ export default defineComponent({
       () => [
         JabRefLogoStories,
         TAlertStories,
-        NButtonStories,
+        UButtonStories,
         TCheckboxStories,
         TDropdownStories,
         TInputGroupStories,

pages/change-password/[token].vue

@@ -23,11 +23,11 @@
           </t-input-group>
         </div>
         <div class="py-2 text-center">
-          <n-button
+          <UButton
             class="w-full"
             type="primary"
             attr-type="submit"
-            >Change Password</n-button
+            >Change Password</UButton
           >
         </div>
       </form>

pages/index.vue

@@ -68,20 +68,15 @@
           </div>
           <div class="row justify-content-center py-6 md:pb-16">
             <div class="col-auto">
-              <n-button
-                type="primary"
-                size="large"
-                class="mx-auto"
-                style="height: 3.2em"
-              >
-                <ClientOnly>
-                  <a
-                    class="text-2xl"
-                    :href="constructDownloadUrl()"
-                    >Download JabRef</a
-                  >
-                </ClientOnly>
-              </n-button>
+              <ClientOnly>
+                <UButton
+                  size="lg"
+                  class="text-2xl"
+                  :to="constructDownloadUrl()"
+                >
+                  Download JabRef
+                </UButton>
+              </ClientOnly>
             </div>
           </div>
         </div>

pages/user/forgot-password.vue

@@ -32,11 +32,11 @@
             />
           </t-input-group>
           <div class="py-2 text-center">
-            <n-button
+            <UButton
               class="w-full"
               type="primary"
               attr-type="submit"
-              >Submit</n-button
+              >Submit</UButton
             >
           </div>
         </div>

pages/user/login.vue

@@ -23,7 +23,7 @@
         {{ error }}
       </n-alert>
       <n-form
-        size="large"
+        size="lg"
         @submit="onSubmit"
       >
         <div class="space-y-2">
@@ -65,11 +65,11 @@
           </div>
 
           <div class="py-2 text-center">
-            <n-button
+            <UButton
               class="w-full"
               type="primary"
               attr-type="submit"
-              >Sign in</n-button
+              >Sign in</UButton
             >
           </div>
 

pages/user/register.vue

@@ -45,11 +45,11 @@
             <PasswordInput v-model="password" />
           </t-input-group>
           <div class="py-2 text-center">
-            <n-button
+            <UButton
               class="w-full"
               type="primary"
               attr-type="submit"
-              >Create your account</n-button
+              >Create your account</UButton
             >
           </div>
           <div>

tailwind.config.ts

@@ -1,7 +1,5 @@
 import type { Config } from 'tailwindcss'
 
-import forms from '@tailwindcss/forms'
-import typography from '@tailwindcss/typography'
 import colors from 'tailwindcss/colors'
 import plugin from 'tailwindcss/plugin'
 
@@ -19,36 +17,35 @@ const flip = plugin(({ addUtilities }) => {
 })
 
 export default {
-  content: [`components/**/*.{vue,js}`, `layouts/**/*.vue`, `pages/**/*.vue`],
-  plugins: [forms, flip, typography],
+  plugins: [flip],
   theme: {
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      black: colors.black,
-      white: colors.white,
-      gray: colors.neutral,
-      primary: {
-        // Generated with https://www.tailwindshades.com
-        DEFAULT: '#4F5F8F',
-        '50': '#D6DBE8',
-        '100': '#C9CFE1',
-        '200': '#AFB8D3',
-        '300': '#94A0C4',
-        '400': '#7A89B6',
-        '500': '#6072A7',
-        '600': '#4F5F8F',
-        '700': '#3B476B',
-        '800': '#272F47',
-        '900': '#131723',
-      },
-      secondary: colors.rose,
-      info: colors.black,
-      success: colors.green,
-      warning: colors.amber,
-      error: colors.red,
-    },
     extend: {
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        black: colors.black,
+        white: colors.white,
+        gray: colors.neutral,
+        primary: {
+          // Generated with https://www.tailwindshades.com
+          DEFAULT: '#4F5F8F',
+          '50': '#D6DBE8',
+          '100': '#C9CFE1',
+          '200': '#AFB8D3',
+          '300': '#94A0C4',
+          '400': '#7A89B6',
+          '500': '#6072A7',
+          '600': '#4F5F8F',
+          '700': '#3B476B',
+          '800': '#272F47',
+          '900': '#131723',
+        },
+        secondary: colors.rose,
+        info: colors.black,
+        success: colors.green,
+        warning: colors.amber,
+        error: colors.red,
+      },
       typography: (theme: (path: string) => any) => ({
         DEFAULT: {
           css: {
@@ -59,4 +56,4 @@ export default {
       }),
     },
   },
-} as Config
+} as Partial<Config>