breaking: Mockline theme v1 (#141)

Mockline · Dec 17, 2024 · 6c92e0a · 6c92e0a
2 parents 1eebb79 + 9a8323f
commit 6c92e0a
Show file tree

Hide file tree

Showing 58 changed files with 1,698 additions and 401 deletions.
diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,16 @@
 # mockline
 
+## 0.14.0
+
+### Minor Changes
+
+- Mockline theme v1
+
+### Patch Changes
+
+- Updated dependencies
+  - @mockline/themes@0.14.0
+
 ## 0.13.0
 
 ### Minor Changes

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mockline",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "type": "module",
   "exports": {
     ".": {

diff --git a/packages/nuxt/playground/app/app.config.ts b/packages/nuxt/playground/app/app.config.ts
@@ -3,6 +3,7 @@ export default defineAppConfig({
     colors: {
       primary: 'blue',
     },
+    darkCode: false,
     components: {}
   }
 })
diff --git a/packages/nuxt/playground/app/app.vue b/packages/nuxt/playground/app/app.vue
@@ -6,7 +6,7 @@ provide('navigation', navigation)
 <template>
   <Html>
     <NuxtLoadingIndicator />
-    <MApp>
+    <MApp class="font-geist">
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
@@ -25,8 +25,4 @@ provide('navigation', navigation)
   --font-geist: 'Geist', sans-serif;
   --font-mono: 'Geist Mono', sans-serif;
 }
-
-:root {
-  @apply font-geist;
-}
 </style>
diff --git a/packages/nuxt/playground/app/layouts/default.vue b/packages/nuxt/playground/app/layouts/default.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { NavigationTreeLink } from '@mockline/themes'
+
 function formatTitle(title: string): string {
   return title
     .split('-')
@@ -7,42 +9,123 @@ function formatTitle(title: string): string {
 }
 const route = useRoute()
 
-const components = ['button', 'nav-menu', 'page']
-const contentComponents = ['code', 'callout', 'typography', 'list']
+const links: NavigationTreeLink[] = [
+  {
+    title: 'Base',
+    path: '/playground',
+    children: [
+      {
+        title: 'Button',
+        path: '/playground/button',
+        icon: 'lucide:square-mouse-pointer',
+      },
+      {
+        title: 'Nav Menu',
+        path: '/playground/nav-menu',
+        icon: 'lucide:menu',
+      },
+      {
+        title: 'Divider',
+        path: '/playground/divider',
+        icon: 'lucide:minus',
+      },
+      {
+        title: 'Page',
+        path: '/playground/page',
+        icon: 'lucide:file-text',
+      },
+      {
+        title: 'Toasts',
+        path: '/playground/toasts',
+        icon: 'lucide:bell',
+      },
+    ],
+  },
+  {
+    title: 'Prose',
+    path: '/components',
+    children: [
+      {
+        title: 'Code',
+        path: '/components/code',
+        icon: 'lucide:code',
+      },
+      {
+        title: 'Callout',
+        path: '/components/callout',
+        icon: 'lucide:info',
+      },
+      {
+        title: 'Typography',
+        path: '/components/typography',
+        icon: 'lucide:text',
+      },
+      {
+        title: 'List',
+        path: '/components/list',
+        icon: 'lucide:list',
+      },
+      {
+        title: 'Icon',
+        path: '/components/icon',
+        icon: 'lucide:star',
+      },
+      {
+        title: 'Image',
+        path: '/components/img',
+        icon: 'lucide:image',
+      },
+      {
+        title: 'Hr',
+        path: '/components/hr',
+        icon: 'lucide:minus',
+      }
+    ]
+  },
+  {
+    title: 'Content',
+    path: '/content',
+    children: [
+      {
+        title: 'Navigation Tree',
+        path: '/playground/navigation-tree',
+        icon: 'lucide:menu',
+      }
+    ]
+  }
+]
+
+const { version } = useRuntimeConfig().public
 </script>
 
 <template>
   <MSidebarLayout>
     <template #sidebar>
       <MSidebar>
-        <div class="p-2 flex flex-col gap-1">
-          <span>Base</span>
-          <div class="p-2 flex flex-col gap-2 text-sm">
-            <div v-for="component in components" :key="component">
-              <NuxtLink :to="`/playground/${component}`" class="hover:underline" :class="$route.path.includes(component) ? 'font-semibold text-blue-600' : ''">
-                {{ component.charAt(0).toUpperCase() + component.slice(1) }}
-              </NuxtLink>
-            </div>
-          </div>
-        </div>
-        <div class="p-2 flex flex-col gap-1">
-          <span>Content</span>
-          <div class="p-2 flex flex-col gap-2 text-sm">
-            <div v-for="component in contentComponents" :key="component">
-              <NuxtLink :to="`/components/${component}`" class="hover:underline" :class="$route.path.includes(component) ? 'font-semibold text-blue-600' : ''">
-                {{ component.charAt(0).toUpperCase() + component.slice(1) }}
-              </NuxtLink>
+        <template #header>
+          <div class="flex items-center justify-between text-xs mb-4">
+            <div class="flex items-center gap-1">
+              <MIcon name="custom:mockline" />
+              <span class="font-bold">
+                Mockline
+              </span>
             </div>
           </div>
-        </div>
+        </template>
+        <MContentNavigationTree :links color="neutral" />
+        <template #footer>
+          <span class="bg-[var(--color-bg-translucent)] px-2 py-1 rounded-base text-xs">
+            v{{ version }}
+          </span>
+        </template>
       </MSidebar>
     </template>
-    <MHeader sticky class="px-4 py-2 bg-[var(--ui-bg-elevated)]">
+    <MHeader sticky>
       <div class="flex justify-between items-center">
         <ProseH2 class="m-0">
           {{ formatTitle(route.name as string) }}
         </ProseH2>
-        <MThemeToggle size="sm" class="absolute top-4 right-4 z-50" />
+        <MThemeToggle size="md" class="absolute top-4 right-4 z-50" />
       </div>
     </MHeader>
     <MMain class="p-4 relative">

diff --git a/packages/nuxt/playground/app/pages/[...slug].vue b/packages/nuxt/playground/app/pages/[...slug].vue
@@ -9,7 +9,7 @@ if (!page.value)
 </script>
 
 <template>
-  <MPage v-if="page" class="mx-auto max-w-2xl">
+  <MPage v-if="page">
     <MPageBody>
       <ContentRenderer v-if="page.body" :value="page" />
     </MPageBody>

diff --git a/packages/nuxt/playground/app/pages/playground/button.vue b/packages/nuxt/playground/app/pages/playground/button.vue
@@ -51,6 +51,17 @@ const variants = Object.keys(button.variants.variant) as Array<keyof typeof butt
         />
       </div>
     </div>
+    <ProseH3>
+      Disabled
+    </ProseH3>
+    <div class="flex gap-4">
+      <MButton label="disabled" disabled />
+      <MButton label="disabled" disabled color="neutral" />
+      <MButton label="disabled" disabled color="danger" />
+    </div>
+    <ProseH3>
+      Custom
+    </ProseH3>
     <div>
       <MButton label="test" class="bg-yellow-500" icon="lucide:rocket" />
     </div>

diff --git a/packages/nuxt/playground/app/pages/playground/divider.vue b/packages/nuxt/playground/app/pages/playground/divider.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <ProseH4>
+      Horizontal Divider (default)
+    </ProseH4>
+    <div class="flex flex-col gap-4">
+      <MDivider />
+    </div>
+    <ProseH4>
+      Horizontal Divider (dashed)
+    </ProseH4>
+    <div class="flex flex-col gap-4">
+      <MDivider variant="dashed" />
+    </div>
+    <ProseH4>
+      Horizontal Divider (dotted)
+    </ProseH4>
+    <div class="flex flex-col gap-4">
+      <MDivider variant="dotted" />
+    </div>
+    <ProseH4>
+      Divider with label
+    </ProseH4>
+    <div class="flex flex-row gap-4">
+      <MDivider label="OR" />
+    </div>
+    <ProseH4>
+      Divider with accent color
+    </ProseH4>
+    <div class="flex flex-col gap-4">
+      <MDivider label="Primary" color="primary" />
+      <MDivider label="Max Width" class="w-48" color="primary" />
+    </div>
+    <ProseH4>
+      Sizes
+    </ProseH4>
+    <div class="flex flex-col gap-4">
+      <MDivider size="xs" label="XS" />
+      <MDivider size="sm" label="SM" />
+      <MDivider size="md" label="MD" />
+      <MDivider size="lg" label="LG" />
+      <MDivider size="xl" label="XL" />
+    </div>
+    <ProseH4>
+      Vertical Divider
+    </ProseH4>
+    <div class="flex flex-row justify-center gap-4">
+      <MDivider orientation="vertical" class="h-48" />
+      <MDivider orientation="vertical" label="Mockline" class="h-48" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/packages/nuxt/playground/app/pages/playground/nav-menu.vue b/packages/nuxt/playground/app/pages/playground/nav-menu.vue
@@ -29,18 +29,18 @@ const nav = [
       <template #trailing>
         <div class="flex items-center gap-3">
           <MThemeToggle />
-          <MButton size="sm" rounded="md" label="Sign in" class="ring-gray-1 ring-2" />
+          <MButton size="sm" rounded="md" label="Sign in" class="ring-[var(--color-border-primary)] ring-2" />
         </div>
       </template>
       <template #home>
         <ul class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
           <li class="row-span-3 grid">
             <NavigationMenuLink as-child>
               <a
-                class="from-[var(--ui-primary)] to-black/50 flex size-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
+                class="from-accent to-accent-hover/50 flex size-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
                 href="/"
               >
-                <MIcon name="custom:mockline" class="size-10" />
+                <MIcon name="custom:mockline" class="size-10 text-white" />
                 <div class="mb-[7px] mt-4 text-[18px] font-medium leading-[1.2] text-white">Radix Primitives</div>
                 <p class="text-[14px] leading-[1.3]">Unstyled, accessible components for Vue.</p>
               </a>
@@ -51,9 +51,9 @@ const nav = [
       </template>
       <template #docs>
         <div class="flex flex-col gap-y-[10px] p-[22px] sm:w-[500px]">
-          <a class="text-[18px] font-medium leading-[1.2]" href="/docs/elements">Elements</a>
-          <a class="text-[18px] font-medium leading-[1.2]" href="/docs/composites">Layouts</a>
-          <a class="text-[18px] font-medium leading-[1.2]" href="/docs/primitives">Primitives</a>
+          <a class="text-[18px] font-medium leading-[1.2]" href="/playground/button">Button</a>
+          <a class="text-[18px] font-medium leading-[1.2]" href="/playground/nav-menu">Nav Menu</a>
+          <a class="text-[18px] font-medium leading-[1.2]" href="/playground/page">Page</a>
         </div>
       </template>
     </MNavMenu>