Issue / Theme System

.theme/app/assets/components.css

@@ -0,0 +1,23 @@
+@reference "./theme.css";
+
+@layer utilities {
+  li {
+    @apply list-[square];
+  }
+
+  a {
+    @apply underline;
+  }
+
+  img.nuxt:is(.logo) {
+    @apply content-[url(https://nuxt.com/assets/design-kit/logo-green-black.svg)];
+
+    @media (prefers-color-scheme: dark) {
+      @apply content-[url(https://nuxt.com/assets/design-kit/logo-green-white.svg)];
+    }
+  }
+
+  .c--basic {
+    @apply flex justify-center bg-yellow-p3 text-yellow-n4 text-[2rem] font-[Franklin_Gothic_Medium]
+  }
+}

.theme/app/assets/tailwind.css → .theme/app/assets/theme.css

@@ -1,6 +1,28 @@
+@import "https://brand.mouseless.codes/assets/css/default.css";
 @import "tailwindcss/theme" layer(theme);
 @import "tailwindcss/preflight" layer(base);
-@import "tailwindcss/utilities";
+@import "tailwindcss/utilities" layer(utilities);
+
+:root {
+  --color-primary: var(--color-red-500);
+  --color-primary-text: var(--color-gray-100);
+  --color-primary-border: var(--color-red-900);
+  --color-primary-line: var(--color-gray-500);
+  --color-secondary: var(--color-darkgreen-800);
+  --color-secondary-text: var(--color-gray-300);
+  --color-tertiary: var(--color-darkgreen-700);
+
+  --font-size: 16px;
+  --height-logo: 30px;
+  --height-logo-small: calc(var(--height-logo) / 2);
+
+  --max-width-content: 64rem;
+
+  /* theme variables samples */
+  --theme-color-default: var(--color-blue-p3);
+  --font-size-default: 2rem;
+  --font-family-default: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
 
 @theme {
   /* ----- */
@@ -227,4 +249,4 @@
   .content {
     /* @apply max-md:max-w-[90%]; this is an example */
   }
-}
+}

.theme/app/components/Mermaid.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="mermaidContainer" class="mermaid">
+  <div
+    ref="mermaidContainer"
+    class="not-[data-processed]:text-transparent"
+  >
     <slot />
   </div>
 </template>
@@ -27,8 +30,3 @@ onMounted(async() => {
   }
 });
 </script>
-<style scoped>
-.mermaid:not([data-processed]) {
-  color: transparent;
-}
-</style>

.theme/app/components/Prose/ProseBlockquote.vue

@@ -1,5 +1,13 @@
 <template>
-  <blockquote :class="type" class="pl-4 border-l-4 border-solid ml-4">
+  <blockquote
+    class="pl-4 border-l-4 border-solid ml-4"
+    :class="{
+      'text-blue-n1': type === 'info',
+      'text-orange-0': type === 'warning',
+      'text-green-n1': type === 'success',
+      'text-fg': type === 'default'
+    }"
+  >
     <component :is="() => body" />
   </blockquote>
 </template>
@@ -39,17 +47,3 @@ const body = computed(() => {
   return result;
 });
 </script>
-<style scoped>
-.info {
-  border-color: var(--color-blue-n1);
-}
-.warning {
-  border-color: var(--color-orange-0);
-}
-.success {
-  border-color: var(--color-green-n1);
-}
-.default {
-  border-color: var(--color-fg);
-}
-</style>

.theme/app/layouts/default.vue

@@ -16,7 +16,7 @@
         <img
           class="
             mouseless logo
-            h-(--height-logo)! max-md:h-(--height-logo-small)!
+            h-(--height-logo) max-md:h-(--height-logo-small)
           "
         >
       </NuxtLink>
@@ -27,28 +27,33 @@
         <img
           class="
             nuxt logo
-            h-(--height-logo)! max-md:h-(--height-logo-small)!
+            h-(--height-logo) max-md:h-(--height-logo-small)
           "
         >
       </NuxtLink>
     </div>
-    <nav
-      class="
-        m-auto text-center max-md:text-left
-        max-w-(--max-width-content)
-        [&>a.left+a.right]:pl-8 [&>a.left+a.right]:max-md:pl-0
-      "
-    >
-      <NuxtLink
-        v-for="menu in menus"
-        :key="menu.title"
-        :to="menu.path == $route.path ? '' : menu.path"
-        :class="menu.position < 100 ? 'left' : 'right'"
-        class="text-fg-soft no-underline m-1 font-normal hover:text-logo-mark max-md:block"
-      >
-        {{ menu.title }}
-      </NuxtLink>
-    </nav>
+    <div class="flex flex-col w-full gap-sm max-md:items-start max-md:text-sm">
+      <nav class="flex flex-wrap mx-auto text-center max-md:text-left max-md:m-0">
+        <NuxtLink
+          v-for="menu in menus.filter(m => m.position < 100)"
+          :key="menu.title"
+          :to="menu.path == $route.path ? '' : menu.path"
+          class="text-fg-soft no-underline m-1 font-normal hover:text-logo-mark"
+        >
+          {{ menu.title }}
+        </NuxtLink>
+      </nav>
+      <nav class="flex flex-wrap mx-auto text-center max-md:text-left max-md:m-0">
+        <NuxtLink
+          v-for="menu in menus.filter(m => m.position >= 100)"
+          :key="menu.title"
+          :to="menu.path == $route.path ? '' : menu.path"
+          class="text-fg-soft no-underline m-1 font-normal hover:text-logo-mark"
+        >
+          {{ menu.title }}
+        </NuxtLink>
+      </nav>
+    </div>
   </header>
   <article class="m-auto pt-0 px-sm pt-sm max-w-(--width-content)">
     <slot />
@@ -60,12 +65,3 @@ const menus = await queryCollection("headers")
   .order("position", "ASC")
   .all();
 </script>
-<style scoped lang="scss">
-img.nuxt:is(.logo) {
-  content: url(https://nuxt.com/assets/design-kit/logo-green-black.svg);
-
-  @media (prefers-color-scheme: dark) {
-    content: url(https://nuxt.com/assets/design-kit/logo-green-white.svg);
-  }
-}
-</style>

.theme/app/pages/demo/computed/with-ref.vue

@@ -1,14 +1,20 @@
 <template>
   <div>
     <h1>No Ref</h1>
-    <button @click="changeName">
+    <button
+      class="px-xs py-1 rounded-xs bg-red-900 hover:bg-red-800 active:text-gray-300"
+      @click="changeName"
+    >
       Change Name
     </button>
     {{ fullName }}
   </div>
   <div>
     <h1>Ref</h1>
-    <button @click="changeNameRef">
+    <button
+      class="px-xs py-1 rounded-xs bg-red-900 hover:bg-red-800 active:text-gray-300"
+      @click="changeNameRef"
+    >
       Change Name
     </button>
     {{ fullNameRef }}

.theme/app/pages/demo/css/theme-variables.vue

@@ -0,0 +1,15 @@
+<template>
+  <!-- all classes are from theme variables except `text-center` -->
+  <div
+    class="
+      text-center
+
+      rounded-xs py-sm text-green-n2
+      bg-(--theme-color-default)
+      font-(--font-family-default)
+      text-(length:--font-size-default)
+    "
+  >
+    Styled with utilities using global variable
+  </div>
+</template>

.theme/app/pages/demo/css/using-components.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="c--basic">
+    Styled with Components
+  </div>
+</template>
+<style>
+</style>

.theme/nuxt.config.ts

@@ -18,7 +18,7 @@ export default defineNuxtConfig({
         {
           rel: "stylesheet",
           type: "text/css",
-          href: "https://brand.mouseless.codes/assets/css/default.css"
+          href: `${import.meta.env.BASE_URL ?? ""}/layers.css`
         }
       ],
       meta: [
@@ -89,7 +89,7 @@ export default defineNuxtConfig({
       nativeSqlite: true
     }
   },
-  css: ["~/assets/styles.scss", "~/assets/tailwind.css"],
+  css: ["~/assets/theme.css", "~/assets/components.css"],
   devtools: { enabled: false },
   dir: {
     public: ".public"
@@ -159,4 +159,4 @@ export default defineNuxtConfig({
       }
     }
   }
-});
+});