feat: refresh design 🚧

docs/components/AppFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="py-6">
+  <footer class="py-6 bg-gray-50 dark:bg-gray-800 dark:bg-opacity-25">
     <div class="max-w-8xl px-4 mx-auto sm:px-6">
       <div class="flex flex-col sm:flex-row justify-between items-center">
         <a
@@ -9,8 +9,8 @@
           class="
             flex
             items-end
-            text-gray-900
-            dark:text-gray-300
+            text-gray-700
+            dark:text-gray-400
             dark:hover:text-gray-100
             hover:text-gray-600
             mb-3

docs/components/AsideBottom.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <h5 class="py-2 text-base font-semibold text-gray-900 transition duration-200 cursor-pointer dark:text-gray-100">
-      Resources
-    </h5>
+    <h5 class="py-2 text-base font-semibold text-gray-900 cursor-pointer dark:text-gray-100">Resources</h5>
     <ul>
       <li v-for="resource of resources" :key="resource.title">
         <a

docs/pages/index.md

@@ -13,45 +13,64 @@ cta:
   - Get started
   - /get-started/installation
 secondary:
-  - Open on GitHub
+  - Open on GitHub →
   - https://github.com/nuxtlabs/docus
 snippet: npx degit nuxtlabs/docus-starter#main docs
 :::
 
 ::::card-grid{title="What's included?"}
-  :::card{icon="IconNuxt" iconClass='text-hex-00DC82' title="Nuxt Architecture"}
-  Harness the full power of Nuxt and the Nuxt ecosystem.
+  :::card{yml}
+  icon: IconNuxt
+  description: Harness the full power of Nuxt and the Nuxt ecosystem.
+  iconClass: 'text-hex-00DC82' 
+  title: Nuxt Architecture.
   :::
 
-  :::card{icon="IconVue" title="Vue Components"}
-  Use built-in components (or your own!) inside your content.
+  :::card{yml}
+  icon: IconVue
+  title: Vue Components.
+  description: Use built-in components (or your own!) inside your content.
   :::
 
-  :::card{icon="IconMarkdown" title="Write Markdown"}
-  Enjoy the ease and simplicity of Markdown as you write your documentation.
+  :::card{yml}
+  icon: IconMarkdown
+  title: Write Markdown.
+  description: Enjoy the ease and simplicity of Markdown as you write your documentation.
   :::
 
-  :::card{icon="IconWindi" title="Windi CSS"}
-  Windi CSS is built in for great developer experience and rapid customization.
+  :::card{yml}
+  icon: IconWindi
+  title: Windi CSS.
+  description: Windi CSS is built in for great developer experience and rapid customization.
   :::
 
-  :::card{icon="IconSSG" title="Static Generation"}
-  Generate your documentation as a static website and host it anywhere.
+  :::card{yml}
+  icon: IconSSG
+  title: Static Generation.
+  description: Generate your documentation as a static website and host it anywhere.
   :::
 
-  :::card{icon="IconLighthouse" title="Lighthouse Optimised"}
-  Start with a blazing fast site with a perfect Lighthouse score.
+  :::card{yml}
+  icon: IconLighthouse
+  title: Lighthouse Optimised.
+  description: Start with a blazing fast site with a perfect Lighthouse score.
   :::
 
-  :::card{icon="IconZap" title="Smart Generation"}
-  Automatically skip a full build if you've only changed Markdown files.
+  :::card{yml}
+  icon: IconZap
+  title: Smart Generation.
+  description: Automatically skip a full build if you've only changed Markdown files.
   :::
 
-  :::card{icon="IconPuzzle" title="Extensible"}
-  Customize the whole design, or add components using slots - you can make Docus your own.
+  :::card{yml}
+  icon: IconPuzzle
+  title: Extensible.
+  description: Customize the whole design, or add components using slots - you can make Docus your own.
   :::
 
-  :::card{icon="IconGitHub" title="Open Source"}
-  Docus is released under the MIT license and made with love by the NuxtLabs team.
+  :::card{yml}
+  icon: IconGitHub
+  title: Open Source.
+  description: Docus is released under the MIT license and made with love by the NuxtLabs team.
   :::
 ::::

src/defaultTheme/components/atoms/Alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 mt-4 mb-4 rounded-md alert" :class="[type]">
+  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm" :class="[type]">
     <div class="flex items-start">
       <div class="flex-grow alert-content">
         <Markdown :node="$slots.default" unwrap="p" />
@@ -85,8 +85,11 @@ export default defineComponent({
   }
 
   >>> {
+    strong {
+      @apply font-semibold text-current;
+    }
     a {
-      @apply no-underline border-none font-semibold;
+      @apply underline border-none font-semibold text-current;
       code {
         @apply border border-transparent border-dashed;
       }
@@ -97,4 +100,12 @@ export default defineComponent({
 .alert >>> p {
   @apply m-0 !important;
 }
+
+.dark .alert {
+  >>> {
+    a {
+      @apply text-current;
+    }
+  }
+}
 </style>

src/defaultTheme/components/atoms/ButtonLink.vue

@@ -53,12 +53,12 @@ export default defineComponent({
 
 <style lang="postcss" scoped>
 a.button-link {
-  @apply inline-flex items-center flex-none px-3 py-2 text-sm leading-4 text-white transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-600 rounded focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
+  @apply inline-flex items-center flex-none rounded-md px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-600  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
   &.medium {
-    @apply px-4 py-2.5 text-base leading-4 rounded;
+    @apply px-4 py-2 text-base leading-4;
   }
   &.large {
-    @apply px-6 py-3 text-lg leading-6 rounded;
+    @apply px-6 py-2.5 text-lg leading-6;
   }
 }
 </style>

src/defaultTheme/components/atoms/Card.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="flex">
-    <div
-      class="relative w-full px-6 py-8 bg-white border border-gray-200 rounded dark:border-gray-700 dark:bg-gray-900"
-    >
+    <div class="relative w-full p-6 bg-gray-100 rounded-lg dark:bg-gray-800 dark:bg-opacity-50">
       <InjectComponent :component="icon" class="w-16 h-16 mb-3" :class="iconClass || ''">
         <NuxtImg v-if="isImage(icon)" :src="icon" class="inline-block w-16 h-16 mb-3" />
         <span v-else class="inline-block w-16 h-16 mb-3 text-6xl">{{ icon }}</span>
       </InjectComponent>
-      <h3 class="mb-2 text-xl">{{ title }}</h3>
-      <slot />
+      <div class="text-lg">
+        <h3 class="mb-2 font-semibold tracking-tight inline mr-1">{{ title }}</h3>
+        <div class="inline font-medium text-gray-400 dark:text-gray-500">
+          <slot name="description">
+            <p v-if="description" class="inline font-medium tracking-tight">{{ description }}</p>
+          </slot>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -22,6 +26,10 @@ export default defineComponent({
       type: String,
       required: true
     },
+    description: {
+      type: String,
+      default: ''
+    },
     icon: {
       type: String,
       default: ''
@@ -40,13 +48,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style scoped lang="postcss">
-h2,
-h3 {
-  @apply mb-2 text-xl;
-}
-p {
-  @apply font-normal;
-}
-</style>

src/defaultTheme/components/atoms/CodeBlock.vue

@@ -3,7 +3,7 @@
     class="code-block"
     :class="{
       active: active,
-      'p-4 border-2 border-t-0 border-gray-200 dark:border-gray-700 rounded-b-md': preview
+      'p-4 border-2 border-t-0 border-gray-100 dark:border-gray-800 rounded-b-lg': preview
     }"
   >
     <slot />

src/defaultTheme/components/atoms/CodeGroup.vue

@@ -1,29 +1,19 @@
 <template>
   <div class="code-group" :class="[activeTabIndex == 0 && 'first-tab']">
-    <div
-      class="
-        relative
-        px-2
-        text-sm text-white
-        bg-gray-100
-        border-b-2 border-gray-200
-        rounded-t-md
-        h-12
-        dark:bg-gray-800
-        dark:border-gray-700
-      "
-    >
+    <div class="relative px-3.5 text-sm text-white bg-gray-100 rounded-t-lg dark:bg-gray-800">
       <button
         v-for="({ label }, i) in tabs"
         ref="tabs"
         :key="`${counter}${label}`"
-        class="px-4 py-3 font-mono font-bold h-12"
+        class="relative z-10 px-3 py-4 font-mono font-semibold"
         :class="[activeTabIndex === i ? 'active text-gray-800 dark:text-white' : 'text-gray-600 dark:text-gray-300']"
         @click="updateTabs(i)"
       >
         {{ label }}
       </button>
-      <span ref="highlight-underline" class="absolute highlight-underline bg-primary-500 dark:bg-primary-400" />
+      <span ref="highlight-underline" class="absolute z-0 highlight-underline h-full py-2">
+        <span class="flex w-full h-full bg-gray-200 dark:bg-gray-700 rounded-md"></span>
+      </span>
     </div>
     <slot />
   </div>
@@ -147,8 +137,8 @@ button {
 }
 
 .highlight-underline {
-  bottom: -2px;
-  height: 2px;
+  /* bottom: -2px; */
+  /* height: 2px; */
   transition: left 150ms, width 150ms;
 }
 

src/defaultTheme/components/atoms/CopyButton.vue

@@ -1,7 +1,32 @@
 <template>
-  <button ref="copy" class="copy" :class="state">
-    <span v-if="state === 'copied'">Copied</span>
-    <span v-else>Copy</span>
+  <button
+    ref="copy"
+    class="
+      copy
+      focus:outline-none
+      absolute
+      right-0
+      bottom-0
+      px-2
+      py-2
+      m-1
+      text-gray-600
+      bg-gray-100
+      text-xs
+      leading-none
+      rounded-lg
+      font-mono font-semibold
+      dark:text-gray-400
+      dark:bg-gray-800
+      hover:bg-gray-200
+      hover:dark:bg-gray-700
+    "
+    :class="{
+      'bg-gray-200 dark:bg-gray-700 opacity-100': state === 'copied'
+    }"
+  >
+    <IconCheck v-if="state === 'copied'" class="w-4 h-4" />
+    <IconCopy v-else class="w-4 h-4" />
   </button>
 </template>
 

src/defaultTheme/components/atoms/HeaderLogo.vue

@@ -9,8 +9,8 @@
     <template v-if="theme.header.title && theme.header.logo">
       <div class="flex items-center">
         <span class="mr-4">
-          <img v-if="$colorMode.value === 'light'" :src="logo.light" class="w-auto h-8" :alt="settings.title" />
-          <img v-if="$colorMode.value === 'dark'" :src="logo.dark" class="w-auto h-8" :alt="settings.title" />
+          <img :src="logo.light" class="w-auto h-8 dark:hidden" :alt="settings.title" />
+          <img :src="logo.dark" class="w-auto h-8 light:hidden" :alt="settings.title" />
         </span>
         <span class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
           {{ settings.title }}

src/defaultTheme/components/atoms/ProseBlockquote.vue

@@ -7,11 +7,10 @@
 <style lang="postcss" scoped>
 blockquote {
   /* TODO */
-  @apply text-lg;
+  @apply text-base;
   font-weight: 500;
-  font-style: italic;
   color: theme('colors.gray.700');
-  border-left-width: 0.25rem;
+  border-left-width: 0.2rem;
   border-left-color: theme('colors.gray.200');
   quotes: '201C' '201D' '2018' '2019';
   margin-top: 1.5em;