SectionHeader improvements and docs

.docs/content/2.components/3.landing/5.section-header.md

@@ -0,0 +1,77 @@
+# Section Header
+
+Component for displaying a section header. Useful if your landing page has multiple sections.
+
+## Usage
+
+::code-group
+  ::code-preview{label="Preview" column}
+    ::section-header{title="What's included" subtitle="Features" description="Docus is packed with features to help you build your next project."}
+    ::
+  ::
+  ```md [MDC]
+  ::section-header{title="What's included" subtitle="Features" description="Docus is packed with features to help you build your next project."}
+  ::
+  ```
+::
+
+## Props
+
+| Prop | Type | Default | Description |
+|--|--|--|--|
+| `title` | `String` | `''` | Title of the section. Use `title` slot as alternative |
+| `subtitle` | `String` | `''` | Subtitle of the section. Use `subtitle` slot as alternative |
+| `subtitleColor` | `String` | `{color.primary.500}` | Subtitle color |
+| `description` | `String` | `''` | Description of the section. Use `description` slot as alternative |
+
+## Slots
+
+| Slot | Description |
+|--|--|
+| `subtitle` | Subtitle of the section. Use `subtitle` prop as alternative |
+| `title` | Title of the section. Use `title` prop as alternative |
+| `description` | Description of the section. Use `description` prop as alternative |
+
+## Design Tokens
+
+```ts [tokens.config.ts]
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+  docus: {
+    landing: {
+      sectionHeader: {
+        alignItems: {
+          initial: 'center',
+          xl: 'flex-start'
+        },
+        marginBottom: '{space.8}',
+        subtitle: {
+          fontSize: '{text.lg.fontSize}',
+          lineHeight: '{text.lg.lineHeight}',
+          fontWeight: '{fontWeight.normal}',
+          letterSpacing: '{letterSpacing.wide}',
+          marginBottom: '{space.2}'
+        },
+        title: {
+          fontSize: {
+            initial: '{text.3xl.fontSize}',
+            sm: '{text.4xl.fontSize}'
+          },
+          lineHeight: {
+            initial: '{text.3xl.lineHeight}',
+            sm: '{text.4xl.lineHeight}'
+          },
+          marginBottom: '{space.2}',
+          fontWeight: '{fontWeight.semibold}',
+          letterSpacing: '{letterSpacing.tight}',
+          color: '{docus.body.color}'
+        },
+        description: {
+          color: '{elements.text.secondary.color.static}'
+        }
+      }
+    }
+  }
+})
+```

components/landing/SectionHeader.vue

@@ -10,24 +10,35 @@ defineProps({
   },
   title: {
     type: String,
-    default: 'Section title'
+    default: '',
+    required: true
+  },
+  description: {
+    type: String,
+    default: ''
   }
 })
 </script>
 
 <template>
   <div class="section-header">
-    <span v-if="subtitle || $slots.subtitle" class="subtitle">
+    <span v-if="subtitle || $slots.subtitle" class="section-header-subtitle">
       <ContentSlot :use="$slots.subtitle" unwrap="p">
         {{ subtitle }}
       </ContentSlot>
     </span>
 
-    <h2 v-if="title || $slots.title" class="title">
+    <h2 v-if="title || $slots.title" class="section-header-title">
       <ContentSlot :use="$slots.title" unwrap="p">
         {{ title }}
       </ContentSlot>
     </h2>
+
+    <p v-if="description || $slots.description" class="section-header-description">
+      <ContentSlot :use="$slots.description" unwrap="p">
+        {{ description }}
+      </ContentSlot>
+    </p>
   </div>
 </template>
 
@@ -37,9 +48,10 @@ css({
     display: 'flex',
     flexDirection: 'column',
     alignItems: '{docus.landing.sectionHeader.alignItems}',
+    marginBottom: '{docus.landing.sectionHeader.marginBottom}',
   },
 
-  '.subtitle': {
+  '.section-header-subtitle': {
     '--subtitleColor': (props) => props.subtitleColor,
     display: 'block',
     fontSize: '{docus.landing.sectionHeader.subtitle.fontSize}',
@@ -50,14 +62,17 @@ css({
     letterSpacing: '{docus.landing.sectionHeader.subtitle.letterSpacing}',
   },
 
-  '.title': {
+  '.section-header-title': {
     marginBottom: '{docus.landing.sectionHeader.title.marginBottom}',
     fontSize: '{docus.landing.sectionHeader.title.fontSize}',
     lineHeight: '{docus.landing.sectionHeader.title.lineHeight}',
     fontWeight: '{docus.landing.sectionHeader.title.fontWeight}',
     letterSpacing: '{docus.landing.sectionHeader.title.letterSpacing}',
     color: '{docus.landing.sectionHeader.title.color}',
-    gradientText: '{docus.landing.sectionHeader.title.gradientText}',
   },
+
+  '.section-header-description': {
+    color: '{docus.landing.sectionHeader.description.color}',
+  }
 })
 </style>

tokens.config.ts

@@ -561,9 +561,10 @@ export default defineTheme({
           initial: 'center',
           xl: 'flex-start'
         },
+        marginBottom: '{space.8}',
         subtitle: {
-          fontSize: '{text.xl.fontSize}',
-          lineHeight: '{text.xl.lineHeight}',
+          fontSize: '{text.lg.fontSize}',
+          lineHeight: '{text.lg.lineHeight}',
           fontWeight: '{fontWeight.normal}',
           letterSpacing: '{letterSpacing.wide}',
           marginBottom: '{space.2}'
@@ -577,14 +578,13 @@ export default defineTheme({
             initial: '{text.3xl.lineHeight}',
             sm: '{text.4xl.lineHeight}'
           },
-          marginBottom: '{space.8}',
+          marginBottom: '{space.2}',
           fontWeight: '{fontWeight.semibold}',
           letterSpacing: '{letterSpacing.tight}',
-          color: '{docus.body.color}',
-          gradientText: {
-            initial: 'linear-gradient(90deg, {color.gray.900} 0%, {color.secondary.700} 30%)',
-            dark: 'linear-gradient(90deg, {color.gray.100} 0%, {color.primary.200} 30%)'
-          }
+          color: '{docus.body.color}'
+        },
+        description: {
+          color: '{elements.text.secondary.color.static}'
         }
       }
     }