NEXT: Docs content expansion

packages/skeleton/src/plugin/components/forms.css

@@ -66,10 +66,13 @@
 	@apply !mb-2;
 }
 .select option,
-.input-group select option {
+.input-group option {
+	@apply p-2 rounded cursor-pointer;
+}
+.select:not([size]):not([multiple]) option,
+.input-group option {
 	@apply bg-surface-50 dark:bg-surface-950;
 	@apply text-surface-950 dark:text-surface-50;
-	@apply p-2 rounded cursor-pointer;
 }
 .select option:checked {
 	/* https://stackoverflow.com/questions/50618602/change-color-of-selected-option-in-select-multiple */

packages/skeleton/src/plugin/themes/catppuccin.ts

@@ -22,7 +22,8 @@ const catppuccin = {
 		'--type-scale-13': 'calc(8rem * var(--type-scale-factor))',
 		'--base-font-color': 'var(--color-surface-600)',
 		'--base-font-color-dark': 'var(--color-surface-50)',
-		'--base-font-family': 'Helvetica, Arial, sans-serif',
+		'--base-font-family':
+			'ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif',
 		'--base-font-size': 'inherit',
 		'--base-line-height': 'inherit',
 		'--base-font-weight': 'normal',

packages/skeleton/src/plugin/themes/cerberus.ts

@@ -65,8 +65,8 @@ const cerberus = {
 		// Borders ---
 		// Covers: rounded, borders, divides, outlines, rings
 
-		'--radii-default': '0.375rem',
-		'--radii-container': '0.75rem',
+		'--radii-default': '6px',
+		'--radii-container': '6px',
 
 		'--border-width-default': '1px',
 		'--divide-width-default': 'var(--border-width-default)',

packages/skeleton/src/plugin/themes/pine.ts

@@ -3,7 +3,7 @@ import type { Theme } from './index.js';
 const pine = {
 	name: 'pine',
 	properties: {
-		'--space-scale-factor': '1.25',
+		'--space-scale-factor': '1.0',
 		'--type-scale-factor': '1.0',
 		'--type-scale-1': 'calc(0.75rem * var(--type-scale-factor))',
 		'--type-scale-2': 'calc(0.875rem * var(--type-scale-factor))',
@@ -20,15 +20,15 @@ const pine = {
 		'--type-scale-13': 'calc(8rem * var(--type-scale-factor))',
 		'--base-font-color': 'var(--color-surface-950)',
 		'--base-font-color-dark': 'var(--color-surface-50)',
-		'--base-font-family': 'system-ui',
-		'--base-font-size': '18px',
-		'--base-line-height': '28px',
+		'--base-font-family': 'Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif',
+		'--base-font-size': '20px',
+		'--base-line-height': '32px',
 		'--base-font-weight': 'normal',
 		'--base-font-style': 'normal',
 		'--base-letter-spacing': '0em',
 		'--heading-font-color': 'var(--color-primary-800)',
 		'--heading-font-color-dark': 'var(--color-primary-300)',
-		'--heading-font-family': 'Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif',
+		'--heading-font-family': 'Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif',
 		'--heading-font-weight': 'bold',
 		'--heading-font-style': 'normal',
 		'--heading-letter-spacing': 'inherit',

packages/skeleton/src/plugin/themes/rose.ts

@@ -20,7 +20,7 @@ const rose = {
 		'--type-scale-13': 'calc(8rem * var(--type-scale-factor))',
 		'--base-font-color': 'var(--color-surface-950)',
 		'--base-font-color-dark': 'var(--color-surface-50)',
-		'--base-font-family': 'system-ui, sans-serif',
+		'--base-font-family': 'Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif',
 		'--base-font-size': 'inherit',
 		'--base-line-height': 'inherit',
 		'--base-font-weight': 'normal',

packages/skeleton/src/plugin/utilities/color-pairings.ts

@@ -13,6 +13,7 @@ ex: {property}-primary-50-950 | {property}-primary-950-50
 * outline - https://tailwindcss.com/docs/outline-color
 * caret - https://tailwindcss.com/docs/caret-color
 * stroke - https://tailwindcss.com/docs/stroke
+* fill - https://tailwindcss.com/docs/fill
 */
 
 import { settings, type TailwindClasses } from '../settings.js';
@@ -33,7 +34,8 @@ export const utilColorPairings = () => {
 		'divide',
 		'outline',
 		'caret',
-		'stroke'
+		'stroke',
+		'fill'
 	];
 	const classes: TailwindClasses = {};
 	// Loop each color name

sites/next.skeleton.dev/src/components/docs/Breadcrumbs.astro

@@ -1,16 +1,19 @@
 ---
-const breacrumbs = Astro.url.pathname
-	.split('/')
-	.filter((v) => v !== '')
-	.map((v) => v.replace('-', ' '));
+const breacrumbs = Astro.url.pathname.split('/').filter((v) => v !== '');
 ---
 
 <ol class="flex gap-2 type-scale-1">
 	{
 		breacrumbs.map((crumb: string, i: number) => (
 			<>
 				<li class="capitalize" class:list={{ 'opacity-60 ': i !== breacrumbs.length - 1 }}>
-					{crumb}
+					{i > 0 && i !== breacrumbs.length - 1 && breacrumbs[0] !== 'components' ? (
+						<a href={`/${breacrumbs[0]}/${crumb}`} class="hover:underline">
+							{crumb.replace('-', ' ')}
+						</a>
+					) : (
+						crumb.replace('-', ' ')
+					)}
 				</li>
 				{i !== breacrumbs.length - 1 && <li class="opacity-60">&rsaquo;</li>}
 			</>

sites/next.skeleton.dev/src/components/docs/Footer.astro

@@ -0,0 +1,40 @@
+---
+import { Icon } from 'astro-icon/components';
+
+const socialLinks = [
+	{
+		href: 'https://github.com/skeletonlabs/skeleton',
+		label: 'GitHub',
+		icon: 'github',
+	},
+	{
+		href: 'https://discord.gg/EXqV7W8MtY',
+		label: 'Discord',
+		icon: 'discord',
+	},
+];
+---
+
+<footer class="border-t border-surface-500/20 bg-surface-50-950 p-4 xl:p-10">
+	<div class="container mx-auto flex justify-between gap-4">
+		<div class="flex items-center gap-4">
+			<Icon name="skeleton" size={20} />
+			<p class="type-scale-1 opacity-60">
+				Built by <a class="underline" href="https://www.skeletonlabs.co/" target="_blank">Skeleton Labs</a> and the
+				<a href="https://github.com/skeletonlabs/skeleton/graphs/contributors" target="_blank" class="underline"
+					>Skeleton community</a
+				>.
+			</p>
+		</div>
+		<!-- Social -->
+		<nav class="flex items-center">
+			{
+				socialLinks.map((l) => (
+					<a class="btn hover:preset-tonal" href={l.href} target="_blank" title={l.label}>
+						<Icon name={l.icon} size={20} />
+					</a>
+				))
+			}
+		</nav>
+	</div>
+</footer>

sites/next.skeleton.dev/src/components/docs/Header.astro

@@ -1,5 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
+import { Search } from 'lucide-react';
 import Lightswitch from '@components/docs/Lightswitch.astro';
 import ThemeSwitch from '@components/docs/ThemeSwitch.astro';
 
@@ -18,24 +19,48 @@ const socialLinks = [
 ---
 
 <header class="w-full border-b border-surface-500/20 bg-surface-50-950 p-4 py-3 md:px-10">
-	<div class="container mx-auto flex max-w-screen-2xl justify-between items-center">
-		<a class="type-scale-3 flex gap-3" href="/" title="Skeleton">
-			<span><Icon name="skeleton" size={24} /></span>
-			<span class="font-bold font-mono">skeleton</span>
-		</a>
-		<nav class="type-scale-1 flex items-center gap-4">
-			<!-- Social -->
-			{
-				socialLinks.map((l) => (
-					<a href={l.href} target="_blank" title={l.label}>
-						<Icon name={l.icon} size={24} class="size-5" />
-					</a>
-				))
-			}
+	<div class="container max-w-screen-2xl mx-auto grid grid-cols-[1fr_auto_1fr] gap-4 items-center">
+		<!-- Left -->
+		<div class="flex justify-start items-center gap-8">
+			<!-- Logo -->
+			<a class="type-scale-3 flex gap-3" href="/" title="Skeleton">
+				<Icon name="skeleton" size={24} />
+			</a>
+			<!-- Navigation -->
+			<a class="opacity-60 hover:underline" href="/docs/installation">Docs</a>
+			<a class="opacity-60 hover:underline" href="/blog">Blog</a>
+			<a class="opacity-60 hover:underline" href="https://themes.skeleton.dev/" target="_blank">Themes</a>
+		</div>
+		<!-- Middle -->
+		<div class="flex items-center gap-2">
+			<!-- Search -->
+			<button type="button" class="btn preset-outlined-surface-200-800 hover:preset-tonal" onclick="onSearch()">
+				<Search size={18} className="opacity-60" />
+				<span class="opacity-60">Search...</span>
+			</button>
+		</div>
+		<!-- Right -->
+		<div class="flex justify-end items-center gap-2">
 			<!-- Lightswitch -->
 			<Lightswitch />
 			<!-- Theme Switcher -->
 			<ThemeSwitch />
-		</nav>
+			<!-- Social -->
+			<nav class="flex items-center">
+				{
+					socialLinks.map((l) => (
+						<a class="btn hover:preset-tonal" href={l.href} target="_blank" title={l.label}>
+							<Icon name={l.icon} size={20} />
+						</a>
+					))
+				}
+			</nav>
+		</div>
 	</div>
 </header>
+
+<script is:inline>
+	function onSearch() {
+		window.alert('Search is not currently available. Please check back soon.');
+	}
+</script>

sites/next.skeleton.dev/src/components/docs/Lightswitch.astro

@@ -2,39 +2,39 @@
 // Lightswitch
 // Ref: https://docs.astro.build/en/tutorial/6-islands/2/
 
-import { SunMoon } from 'lucide-react'
+import { SunMoon } from 'lucide-react';
 ---
 
-<button id="lightswitch" title="Toggle dark mode.">
-    <SunMoon size={24} />
+<button id="lightswitch" class="btn hover:preset-tonal" title="Toggle dark mode.">
+	<SunMoon size={24} />
 </button>
 
 <script is:inline>
-    const darkMode = (() => {
-        if (typeof localStorage !== 'undefined' && localStorage.getItem('darkMode')) {
-            return localStorage.getItem('darkMode')
-        }
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            return 'dark'
-        }
-        return 'light'
-    })()
-
-    if (darkMode === 'light') {
-        document.documentElement.classList.remove('dark')
-    } else {
-        document.documentElement.classList.add('dark')
-    }
-
-    window.localStorage.setItem('darkMode', darkMode)
-
-    const handleToggleClick = () => {
-        const element = document.documentElement
-        element.classList.toggle('dark')
-
-        const isDark = element.classList.contains('dark')
-        localStorage.setItem('darkMode', isDark ? 'dark' : 'light')
-    }
-
-    document.getElementById('lightswitch').addEventListener('click', handleToggleClick)
+	const darkMode = (() => {
+		if (typeof localStorage !== 'undefined' && localStorage.getItem('darkMode')) {
+			return localStorage.getItem('darkMode');
+		}
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			return 'dark';
+		}
+		return 'light';
+	})();
+
+	if (darkMode === 'light') {
+		document.documentElement.classList.remove('dark');
+	} else {
+		document.documentElement.classList.add('dark');
+	}
+
+	window.localStorage.setItem('darkMode', darkMode);
+
+	const handleToggleClick = () => {
+		const element = document.documentElement;
+		element.classList.toggle('dark');
+
+		const isDark = element.classList.contains('dark');
+		localStorage.setItem('darkMode', isDark ? 'dark' : 'light');
+	};
+
+	document.getElementById('lightswitch').addEventListener('click', handleToggleClick);
 </script>

sites/next.skeleton.dev/src/components/docs/Navigation.astro

@@ -8,7 +8,10 @@ interface Props {
 const { classList } = Astro.props;
 
 // Query from Collections
-const navDocs = await getCollection('docs');
+const navDocs = await getCollection('docs', ({ id }) => {
+	// Ignore cookbook children pages
+	return !id.startsWith('installation/');
+});
 const navComponents = await getCollection('components', ({ id }) => {
 	return id.startsWith('common/');
 });

sites/next.skeleton.dev/src/components/docs/Preview.tsx

@@ -11,7 +11,8 @@ export const Preview: React.FC<any> = (props) => {
 	}
 
 	return (
-		<div className="space-y-4">
+		// TODO: fix this top margin due to generate script tags
+		<div className="space-y-4 mt-4">
 			{/* Tabs */}
 			<nav className="flex gap-4 border-b-[1px] border-surface-200-800">
 				<button className={`${cTab} ${selectedClass('preview')}`} onClick={() => setSelected('preview')}>
@@ -22,8 +23,8 @@ export const Preview: React.FC<any> = (props) => {
 				</button>
 			</nav>
 			{/* Panel: Preview */}
-			<div className={`docs-card-outlined-centered p-8 ${selected !== 'preview' && '!hidden'}`}>
-				{props.preview}
+			<div className={`card-enhanced-outlined ${selected !== 'preview' && '!hidden'}`}>
+				<div className="card-enhanced-outlined-inner p-8 flex justify-center">{props.preview}</div>
 			</div>
 			{/* Panel: Codeblock */}
 			<div className={`w-full max-w-full ${selected === 'code' ? 'block' : 'hidden'}`}>{props.code}</div>

sites/next.skeleton.dev/src/components/docs/Process.astro

@@ -0,0 +1,3 @@
+<div class="w-full border-l-[1px] border-surface-200-800 space-y-10">
+	<slot />
+</div>

sites/next.skeleton.dev/src/components/docs/ProcessStep.astro

@@ -0,0 +1,13 @@
+---
+import { Check } from 'lucide-react';
+const { step } = Astro.props;
+---
+
+<div class="grid grid-cols-[auto_1fr] items-start gap-4">
+	<div class="type-scale-2 preset-filled-surface-200-800 size-7 rounded-full flex justify-center items-center -ml-4">
+		{step !== 'check' ? step : <Check size={16} />}
+	</div>
+	<article class="space-y-4 [&>.h2]:!type-scale-4">
+		<slot />
+	</article>
+</div>