fix: small improvements and cleanup (#658)

.docs/content/0.index.md

@@ -5,6 +5,8 @@ layout: page
 fuild: true
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 ::block-hero
 ---
 cta:
@@ -38,7 +40,7 @@ Write pages in markdown, use [Vue](https://vuejs.org) components and enjoy the p
 What's included
 
 #root
-:ellipsis
+:ellipsis{left=0px width=40rem top=10rem blur=140px}
 
 #default
   ::card{icon=logos:nuxt-icon}

components/content/CodeGroup.vue

@@ -101,7 +101,14 @@ css({
       display: 'none'
     },
     '.preview-canvas': {
-      padding: '{space.4}'
+      padding: '{space.4}',
+      '&:has(.sandbox)': {
+        padding: 0,
+        ':deep(.sandbox)': {
+          border: 0,
+          borderRadius: 0
+        }
+      }
     }
   }
 })

components/content/Ellipsis.vue

@@ -1,13 +1,60 @@
+<script setup lang="ts">
+defineProps({
+  width: {
+    type: String,
+    default: '10rem'
+  },
+  height: {
+    type: String,
+    default: '10rem'
+  },
+  zIndex: {
+    type: String,
+    default: '10'
+  },
+  top: {
+    type: String,
+    default: '0'
+  },
+  left: {
+    type: String,
+    default: 'auto'
+  },
+  right: {
+    type: String,
+    default: 'auto'
+  },
+  blur: {
+    type: String,
+    default: '50px'
+  }
+})
+</script>
+
 <template>
-  <div class="absolute top-0 left-0 w-full max-w-full">
-    <div class="ellipsis" />
+  <div class="ellipsis">
+    <div class="ellipsis-item" />
   </div>
 </template>
 
-<style lang="postcss" scoped>
-.ellipsis {
-  @apply h-[160px] md:w-[600px];
-  background: linear-gradient(97.62deg, rgba(0, 71, 225, 0.22) 2.27%, rgba(26, 214, 255, 0.22) 50.88%, rgba(0, 220, 130, 0.22) 98.48%);
-  filter: blur(169px);
-}
+<style scoped lang="ts">
+css({
+  '.ellipsis': {
+    pointerEvents: 'none',
+    position: 'absolute',
+    top: (props) => props.top,
+    left: (props) => props.left,
+    right: (props) => props.right,
+    zIndex: (props) => props.zIndex,
+    width: '-webkit-fill-available',
+    maxWidth: (props) => props.width,
+    height: (props) => props.height,
+    filter: (props) => `blur(${props.blur})`,
+    '.ellipsis-item': {
+      width: '100%',
+      height: '100%',
+      background: 'linear-gradient(97.62deg, rgba(0, 71, 225, 0.22) 2.27%, rgba(26, 214, 255, 0.22) 50.88%, rgba(0, 220, 130, 0.22) 98.48%)',
+    }
+  }
+})
 </style>

components/content/Sandbox.vue

@@ -61,15 +61,7 @@ onMounted(() => {
 
 <template>
   <div class="sandbox">
-    <TabsHeader v-if="!src" ref="tabs" :active-tab-index="activeTabIndex" :tabs="providersTabs" @update:active-tab-index="updateTab">
-      <template #footer>
-        <div class="absolute top-1/2 right-0 -translate-y-1/2 transform px-4">
-          <NuxtLink class="u-text-gray-500 hover:u-text-gray-700 flex items-center" :to="sandBoxUrl" target="_blank">
-            <Icon name="heroicons-outline:arrows-expand" class="h-6 w-6" />
-          </NuxtLink>
-        </div>
-      </template>
-    </TabsHeader>
+    <TabsHeader v-if="!src" ref="tabs" :active-tab-index="activeTabIndex" :tabs="providersTabs" @update:active-tab-index="updateTab" />
 
     <iframe
       v-if="url"
@@ -82,31 +74,18 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="postcss" scoped>
-.sandbox {
-
-  iframe {
-    @apply h-64 w-full overflow-hidden rounded-lg rounded-tl-none rounded-tr-none;
-    height: 700px;
-  }
-}
-</style>
-
 <style scoped lang="ts">
 css({
   '.sandbox': {
     '--sandbox-height': '700px',
-    my: '{space.4}',
     background: '{docus.surface.background.base}',
     width: '100%',
     height: 'var(--sandbox-height)',
     overflow: 'hidden',
-    borderRadius: '{radii.xl}',
     fontSize: '{text.3xl.fontSize}',
     lineHeight: '{text.3xl.lineHeight}',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+    border: '1px solid {docus.border.secondary.default}',
+    borderRadius: '{radii.md}',
     iframe: {
       width: '100%',
       height: '100%',

components/content/TabsHeader.vue

@@ -86,6 +86,7 @@ css({
     '.tabs': {
       position: 'relative',
       zIndex: 0,
+      display: 'flex',
       px: '{space.2}',
       button: {
         py: '{space.2-5}',

components/content/Terminal.vue

@@ -65,6 +65,7 @@ css({
     height: '{space.64}',
     cursor: 'pointer',
     overflow: 'hidden',
+    border: '1px solid {docus.border.primary.default}',
     borderRadius: '{radii.lg}',
     background: '{colors.gray.900}',
     '.copied': {

components/docs/DocsPageContent.vue

@@ -164,13 +164,11 @@ css({
     // `.not-prose` can be useful if creating <h1> with a component (404 page is an example)
     ':deep(h1:not(.not-prose):first-child)': {
       marginTop: 0,
-      fontSize: '{text.2xl.fontSize}',
-      lineHeight: '{text.2xl.lineHeight}',
-      fontWeight: '{fontWeights.extrabold}',
-      letterSpacing: '{letterSpacings.tight}',
+      fontSize: '{text.4xl.fontSize}',
+      lineHeight: '{text.4xl.lineHeight}',
       '@mq.sm': {
-        fontSize: '{text.3xl.fontSize}',
-        lineHeight: '{text.3xl.lineHeight}',
+        fontSize: '{text.5xl.fontSize}',
+        lineHeight: '{text.5xl.lineHeight}',
       }
     },
     // `.not-prose` can be useful if creating <h1> with a component (404 page is an example)

components/docs/DocsTocLinks.vue

@@ -81,10 +81,15 @@ css({
       '&:hover': {
         color: '{colors.gray.900}',
       },
+      '@dark': {
+        '&:hover': {
+          color: '{colors.gray.400}',
+        },
+      },
       '&.active': {
         color: '{colors.primary.500}'
       }
     }
   }
 })
-</style>
+</style>

components/landing/BlockHero.vue

@@ -57,10 +57,9 @@ defineProps({
 
       <div class="support">
         <slot name="support">
-          <Terminal v-if="snippet" :content="snippet"  />
+          <Terminal v-if="snippet" :content="snippet" />
         </slot>
       </div>
-
     </div>
   </section>
 </template>
@@ -95,7 +94,7 @@ css({
       },
       '.title': {
         color: '{docus.text.color.primary}',
-        fontWeight: '{fontWeights.extrabold}',
+        fontWeight: '{fontWeights.bold}',
         letterSpacing: '{letterSpacings.tight}',
         textAlign: 'center',
         fontSize: '{text.4xl.fontSize}',
@@ -152,4 +151,4 @@ css({
     }
   }
 })
-</style>
+</style>

components/landing/CardGrid.vue

@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <section class="card-grid">
-    <ContentSlot :use="$slots.root" unwrap="*" />
+    <ContentSlot :use="$slots.root" />
 
     <h2 class="title">
       <ContentSlot :use="$slots.title" unwrap="p" />
@@ -61,4 +61,4 @@ css({
     }
   }
 })
-</style>
+</style>

layouts/page.vue

@@ -17,7 +17,8 @@ css({
   '.page-layout': {
     display: 'flex',
     flexDirection: 'column',
-    minHeight: '{docus.page.height}'
+    minHeight: '{docus.page.height}',
+    position: 'relative'
   }
 })
 </style>

tokens.config.ts

@@ -61,6 +61,7 @@ export default defineTheme({
         }
       }
     },
+    // TODO: improve structure to text.color.primary[default|hover]
     text: {
       color: {
         primary: {