initial commit

Base appearance of the website is done, now onto adding features

.env.example

@@ -0,0 +1 @@
+NUXT_PUBLIC_BACKEND_URL=http://localhost:3000

.envrc

@@ -0,0 +1,2 @@
+use flake
+dotenv

.gitignore

@@ -0,0 +1,25 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+/.direnv/

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "proseWrap": "always"
+}

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="bg-background text-text flex flex-col min-h-screen transition" :class="{ dark: darkMode }">
+    <UiHeader class="flex-none" />
+    <NuxtPage class="p-4 sm:p-6 lg:p-8 grow" />
+    <UiFooter class="flex-none" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const colourMode = useColorMode();
+const darkMode = computed(() => colourMode.value === 'dark');
+</script>

assets/styles/_theme.less

@@ -0,0 +1,135 @@
+@layer base {
+  :root {
+    --text: #070904;
+    --text-50: #f3f7ed;
+    --text-100: #e7efdc;
+    --text-200: #d0dfb9;
+    --text-300: #b8d095;
+    --text-400: #a1c072;
+    --text-500: #89b04f;
+    --text-600: #6e8d3f;
+    --text-700: #526a2f;
+    --text-800: #374620;
+    --text-900: #1b2310;
+    --text-950: #0e1208;
+
+    --background: #fafcf8;
+    --background-50: #f2f7ed;
+    --background-100: #e6f0db;
+    --background-200: #cce0b8;
+    --background-300: #b3d194;
+    --background-400: #99c270;
+    --background-500: #80b34d;
+    --background-600: #668f3d;
+    --background-700: #4d6b2e;
+    --background-800: #33471f;
+    --background-900: #1a240f;
+    --background-950: #0d1208;
+
+    --primary: #8db859;
+    --primary-50: #f3f7ed;
+    --primary-100: #e7f0db;
+    --primary-200: #cee0b8;
+    --primary-300: #b6d194;
+    --primary-400: #9dc270;
+    --primary-500: #85b34d;
+    --primary-600: #6a8f3d;
+    --primary-700: #506b2e;
+    --primary-800: #35471f;
+    --primary-900: #1b240f;
+    --primary-950: #0d1208;
+
+    --secondary: #9fd6b0;
+    --secondary-50: #edf7f0;
+    --secondary-100: #dbf0e2;
+    --secondary-200: #b8e0c5;
+    --secondary-300: #94d1a7;
+    --secondary-400: #70c28a;
+    --secondary-500: #4db36d;
+    --secondary-600: #3d8f57;
+    --secondary-700: #2e6b41;
+    --secondary-800: #1f472c;
+    --secondary-900: #0f2416;
+    --secondary-950: #08120b;
+
+    --accent: #81c9aa;
+    --accent-50: #edf7f3;
+    --accent-100: #dbf0e7;
+    --accent-200: #b8e0cf;
+    --accent-300: #94d1b7;
+    --accent-400: #70c29e;
+    --accent-500: #4db386;
+    --accent-600: #3d8f6b;
+    --accent-700: #2e6b51;
+    --accent-800: #1f4736;
+    --accent-900: #0f241b;
+    --accent-950: #08120d;
+  }
+
+  .dark {
+    --text: #f8faf4;
+    --text-50: #0e1108;
+    --text-100: #1d2310;
+    --text-200: #394620;
+    --text-300: #566930;
+    --text-400: #738c40;
+    --text-500: #8faf50;
+    --text-600: #a6bf73;
+    --text-700: #bccf96;
+    --text-800: #d2dfb9;
+    --text-900: #e9efdc;
+    --text-950: #f4f7ee;
+
+    --background: #050703 !important;
+    --background-50: #0d1208;
+    --background-100: #1a240f;
+    --background-200: #33471f;
+    --background-300: #4d6b2e;
+    --background-400: #668f3d;
+    --background-500: #80b34d;
+    --background-600: #99c270;
+    --background-700: #b3d194;
+    --background-800: #cce0b8;
+    --background-900: #e6f0db;
+    --background-950: #f2f7ed;
+
+    --primary: #7aa446;
+    --primary-50: #0d1208;
+    --primary-100: #1b240f;
+    --primary-200: #35471f;
+    --primary-300: #506b2e;
+    --primary-400: #6a8f3d;
+    --primary-500: #85b34d;
+    --primary-600: #9dc270;
+    --primary-700: #b6d194;
+    --primary-800: #cee0b8;
+    --primary-900: #e7f0db;
+    --primary-950: #f3f7ed;
+
+    --secondary: #29603b;
+    --secondary-50: #08120b;
+    --secondary-100: #0f2416;
+    --secondary-200: #1f472c;
+    --secondary-300: #2e6b42;
+    --secondary-400: #3d8f58;
+    --secondary-500: #4db36f;
+    --secondary-600: #70c28b;
+    --secondary-700: #94d1a8;
+    --secondary-800: #b8e0c5;
+    --secondary-900: #dbf0e2;
+    --secondary-950: #edf7f1;
+
+    --accent: #367d5e;
+    --accent-50: #08120d;
+    --accent-100: #0f241b;
+    --accent-200: #1f4736;
+    --accent-300: #2e6b51;
+    --accent-400: #3d8f6b;
+    --accent-500: #4db386;
+    --accent-600: #70c29e;
+    --accent-700: #94d1b7;
+    --accent-800: #b8e0cf;
+    --accent-900: #dbf0e7;
+    --accent-950: #edf7f3;
+  }
+}

assets/styles/main.less

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import '_theme';
+@import '_default';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+#__nuxt {
+  min-height: 100%;
+}

components/ui/Footer.vue

@@ -0,0 +1,34 @@
+<template>
+  <footer class="flex-none">
+    <div class="mx-auto max-w-7xl flex flex-col gap-1 my-2" aria-label="Footer">
+      <UDivider>
+        <UiLogo :avatar="true" />
+      </UDivider>
+      <div class="flex flex-col md:flex-row flex-wrap gap-2 items-center space-between p-6 md:px-8">
+        <div class="md:flex-1">
+          Propulsé par
+          <ULink
+            to="https://labs.phundrak.com/phundrak/gejdr-front"
+            class="px-1 text-accent-600 hover:text-accent-400 transition font-semibold"
+          >
+            GéJDR
+          </ULink>
+        </div>
+        <div class="flex text-base">
+          <UContainer>front&nbsp;: {{ config.public.frontVersion }}</UContainer>
+          <UDivider orientation="vertical" />
+          <UContainer>back&nbsp;: temp</UContainer>
+        </div>
+        <div class="md:text-base md:flex-1 md:flex md:justify-end">
+          Copyright &copy; Lucien Cartier-Tilet {{ year }}
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+const config = useRuntimeConfig();
+const date = new Date();
+const year = date.getFullYear();
+</script>

components/ui/Header.vue

@@ -0,0 +1,95 @@
+<template>
+  <header class="bg-background dark:bg-background shadow-md shadow-background-100 dark:shadow-background-50">
+    <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Menu global">
+      <div class="flex lg:flex-1">
+        <RouterLink to="/" class="-m-1.5 p-1.5">
+          <span class="sr-only">GéJDR</span>
+          <UiLogo class="h-10 w-auto" />
+        </RouterLink>
+      </div>
+      <!-- Mobile menu opener -->
+      <div class="flex lg:hidden">
+        <UButton
+          type="button"
+          class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5"
+          variant="ghost"
+          @click="openMenu"
+        >
+          <span class="sr-only">Ouvrir le menu principal</span>
+          <UiIconsMenu class="size-6 text-text-800" />
+        </UButton>
+      </div>
+      <div class="hidden lg:flex lg:gap-x-12">
+        <UiHeaderLink
+          v-for="url in urls"
+          :name="url.name"
+          :path="url.path"
+          :key="url.path"
+          class="rounded-md -m.2.5 p-2.5 transition"
+        />
+      </div>
+      <div class="hidden lg:flex lg:flex-1 lg:justify-end flex-row gap-8 place-items-center">
+        <RouterLink to="/login" class="font-semibold text-text-800 hover:text-text-600 transition">
+          Connexion <span aria-hidden="true">&rarr;</span>
+        </RouterLink>
+        <UiThemeSwitcher />
+      </div>
+    </nav>
+    <!-- Mobile menu -->
+    <div role="dialog" aria-modal="true" :class="{ hidden: menuHidden }" class="lg:hidden">
+      <div class="fixed inset-0 z-10"></div>
+      <div
+        class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+      >
+        <div class="flex items-center justify-between">
+          <RouterLink to="/" class="-m-1.5 p-1.5">
+            <span class="sr-only">GéJDR</span>
+            <UiLogo class="h-10 w-auto" />
+          </RouterLink>
+          <UButton variant="ghost" icon="i-mdi-close" color="text" size="md" @click="closeMenu">
+            <span class="sr-only">Fermer le menu</span>
+          </UButton>
+        </div>
+        <div class="mt-6 flow-root">
+          <UiHeaderLink
+            v-for="url in urls"
+            :name="url.name"
+            :path="url.path"
+            :key="url.path"
+            @click="closeMenu"
+            class="-mx-3 block rounded-lg px-3 my-1 py-2 text-xl/7 font-semibold text-text-800 hover:text-text-600 transition"
+          />
+        </div>
+        <div class="py-6 flex flex-row space-between place-items-center">
+          <div class="flex-1">
+            <RouterLink
+              to="/login"
+              class="-mx-3 block rounded-lg px-3 py-2 text-xl/7 font-semibold text-text-800 hover:text-text-600 transition"
+            >
+              Connexion <span aria-hidden="true">&rarr;</span>
+            </RouterLink>
+          </div>
+          <UiThemeSwitcher />
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+interface Url {
+  path: string;
+  name: string;
+}
+
+const urls: Url[] = [
+  { path: '/dashboard', name: 'Tableau de bord' },
+  { path: '/campaigns', name: 'Mes campagnes' },
+  { path: '/characters', name: 'Mes personnages' },
+  { path: '/about', name: 'À propos' },
+];
+
+const menuHidden = ref(true);
+const openMenu = () => (menuHidden.value = false);
+const closeMenu = () => (menuHidden.value = true);
+</script>

components/ui/Logo.vue

@@ -0,0 +1,13 @@
+<template>
+  <UAvatar v-if="avatar" :src="src" :alt="alt" />
+  <img v-else :alt="alt" :src="src" />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  avatar?: boolean;
+  src?: string;
+  alt?: string;
+}
+const { avatar = false, src = '/img/gege.png', alt = 'GéJDR' } = defineProps<Props>();
+</script>

components/ui/ThemeSwitcher.vue

@@ -0,0 +1,7 @@
+<template>
+  <UButton variant="ghost" :icon="switcher.icon" @click="next" :ui="{ rounded: 'rounded-full' }" class="h-8 w-auto" />
+</template>
+
+<script setup lang="ts">
+const { switcher, next } = useTheme();
+</script>

components/ui/header/Link.vue

@@ -0,0 +1,15 @@
+<template>
+  <RouterLink :to="props.path" :class="cssClass">
+    {{ props.name }}
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  path: string;
+  name: string;
+}>();
+
+const route = useRoute();
+const cssClass = computed((): string => (props.path === route.path ? 'bg-background-300' : 'bg-background'));
+</script>

components/ui/icons/Close.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
+    ></path>
+  </svg>
+</template>

components/ui/icons/Menu.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"></path>
+  </svg>
+</template>

composables/theme.ts

@@ -0,0 +1,59 @@
+export const useTheme = () => {
+  interface ColorSwitcher {
+    icon: string;
+    next: () => ColorSwitcher;
+  }
+
+  class DefaultTheme implements ColorSwitcher {
+    icon = 'i-mdi-theme-light-dark';
+
+    constructor() {
+      colourMode.preference = 'system';
+    }
+
+    next() {
+      return new LightTheme();
+    }
+  }
+
+  class LightTheme implements ColorSwitcher {
+    icon = 'i-mdi-white-balance-sunny';
+
+    constructor() {
+      colourMode.preference = 'light';
+    }
+
+    next() {
+      return new DarkTheme();
+    }
+  }
+
+  class DarkTheme implements ColorSwitcher {
+    icon = 'i-mdi-weather-night';
+
+    constructor() {
+      colourMode.preference = 'dark';
+    }
+
+    next() {
+      return new DefaultTheme();
+    }
+  }
+
+  type Theme = 'system' | 'dark' | 'light';
+
+  const colourMode = useColorMode();
+  const themeToSwitcher = (theme: Theme): ColorSwitcher => {
+    const conversionTable: Record<Theme, () => ColorSwitcher> = {
+      system: () => new DefaultTheme(),
+      dark: () => new DarkTheme(),
+      light: () => new LightTheme(),
+    };
+    return conversionTable[theme]();
+  };
+
+  let switcher = ref(themeToSwitcher(colourMode.preference as Theme));
+  const next = () => (switcher.value = switcher.value.next());
+
+  return { switcher, next };
+};

content/about.md

@@ -0,0 +1,3 @@
+# About
+
+This is the about page

flake.lock

@@ -0,0 +1,61 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1739446958,
+        "narHash": "sha256-+/bYK3DbPxMIvSL4zArkMX0LQvS7rzBKXnDXLfKyRVc=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "2ff53fe64443980e139eaa286017f53f88336dd0",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,23 @@
+{
+  description = "Frontend for GéJDR";
+
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = { self, nixpkgs, flake-utils, ... }:
+    flake-utils.lib.eachSystem ["x86_64-linux" "x86_64-darwin"] (system:
+      let
+        pkgs = import nixpkgs { inherit system; };
+      in {
+        devShell = with pkgs; mkShell {
+          buildInputs = [
+            nodejs_20
+            nodePackages."@volar/vue-language-server" # LSP server
+            nodePackages.prettier
+          ];
+        };
+      }
+    );
+}

nuxt.config.ts

@@ -0,0 +1,31 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import { version } from './package.json';
+
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true },
+  modules: [
+    '@pinia/nuxt',
+    '@formkit/auto-animate',
+    '@nuxt/test-utils',
+    '@nuxt/content',
+    '@nuxt/image',
+    '@nuxt/ui',
+    '@nuxt/fonts',
+  ],
+  devServer: {
+    port: 5173,
+  },
+  vite: {
+    server: {
+      allowedHosts: true,
+    },
+  },
+  runtimeConfig: {
+    public: {
+      backendUrl: 'http://localhost:3000',
+      frontVersion: version,
+    },
+  },
+  css: ['~/assets/styles/main.less'],
+});

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+    "version": "0.0.1",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/content": "^2.13.2",
+    "@pinia/nuxt": "^0.5.4",
+    "nuxt": "^3.13.0",
+    "pinia": "^2.2.2",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "devDependencies": {
+    "@formkit/auto-animate": "^0.8.2",
+    "@nuxt/fonts": "^0.10.3",
+    "@nuxt/image": "^1.9.0",
+    "@nuxt/test-utils": "^3.14.2",
+    "@nuxt/ui": "^2.21.0",
+    "less": "^4.2.2"
+  }
+}

pages/about.vue

@@ -0,0 +1,5 @@
+<template>
+  <main>
+    <ContentDoc />
+  </main>
+</template>

pages/campaigns.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Mes campagnes</h1>
+</template>

pages/characters.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Mes personnages</h1>
+</template>

pages/dashboard.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Tableau de bord</h1>
+</template>

pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Hello</h1>
+</template>

pages/login.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Connexion</h1>
+</template>

public/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

public/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

public/robots.txt

@@ -0,0 +1 @@
+

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tailwind.config.js

@@ -0,0 +1,97 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontSize: {
+        sm: '0.600rem',
+        base: '0.8rem',
+        xl: '1.066rem',
+        '2xl': '1.421rem',
+        '3xl': '1.894rem',
+        '4xl': '2.525rem',
+        '5xl': '3.366rem',
+      },
+      fontFamily: {
+        heading: 'Poppins',
+        body: 'Roboto',
+      },
+      fontWeight: {
+        normal: '400',
+        bold: '700',
+      },
+      colors: {
+        text: {
+          50: 'var(--text-50)',
+          100: 'var(--text-100)',
+          200: 'var(--text-200)',
+          300: 'var(--text-300)',
+          400: 'var(--text-400)',
+          500: 'var(--text-500)',
+          600: 'var(--text-600)',
+          700: 'var(--text-700)',
+          800: 'var(--text-800)',
+          900: 'var(--text-900)',
+          950: 'var(--text-950)',
+          DEFAULT: 'var(--text)',
+        },
+        background: {
+          50: 'var(--background-50)',
+          100: 'var(--background-100)',
+          200: 'var(--background-200)',
+          300: 'var(--background-300)',
+          400: 'var(--background-400)',
+          500: 'var(--background-500)',
+          600: 'var(--background-600)',
+          700: 'var(--background-700)',
+          800: 'var(--background-800)',
+          900: 'var(--background-900)',
+          950: 'var(--background-950)',
+          DEFAULT: 'var(--background)',
+        },
+        primary: {
+          50: 'var(--primary-50)',
+          100: 'var(--primary-100)',
+          200: 'var(--primary-200)',
+          300: 'var(--primary-300)',
+          400: 'var(--primary-400)',
+          500: 'var(--primary-500)',
+          600: 'var(--primary-600)',
+          700: 'var(--primary-700)',
+          800: 'var(--primary-800)',
+          900: 'var(--primary-900)',
+          950: 'var(--primary-950)',
+          DEFAULT: 'var(--primary)',
+        },
+        secondary: {
+          50: 'var(--secondary-50)',
+          100: 'var(--secondary-100)',
+          200: 'var(--secondary-200)',
+          300: 'var(--secondary-300)',
+          400: 'var(--secondary-400)',
+          500: 'var(--secondary-500)',
+          600: 'var(--secondary-600)',
+          700: 'var(--secondary-700)',
+          800: 'var(--secondary-800)',
+          900: 'var(--secondary-900)',
+          950: 'var(--secondary-950)',
+          DEFAULT: 'var(--secondary)',
+        },
+        accent: {
+          50: 'var(--accent-50)',
+          100: 'var(--accent-100)',
+          200: 'var(--accent-200)',
+          300: 'var(--accent-300)',
+          400: 'var(--accent-400)',
+          500: 'var(--accent-500)',
+          600: 'var(--accent-600)',
+          700: 'var(--accent-700)',
+          800: 'var(--accent-800)',
+          900: 'var(--accent-900)',
+          950: 'var(--accent-950)',
+          DEFAULT: 'var(--accent)',
+        },
+      },
+    },
+  },
+};

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}