Flush out Docs and Examples

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

@@ -18,8 +18,8 @@ const { classList = 'p-4' } = Astro.props;
 		<nav class="flex items-center">
 			{
 				socialLinks.get().map((l) => (
-					<a class="btn hover:preset-tonal" href={l.href} target="_blank" title={l.label}>
-						<Icon name={l.icon} size={20} />
+					<a class="btn-icon hover:preset-tonal" href={l.href} target="_blank" title={l.label}>
+						<Icon name={l.icon} size={24} />
 					</a>
 				))
 			}

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

@@ -20,9 +20,7 @@ const coreLinks = [
 ];
 ---
 
-<header
-	class="sticky top-0 z-50 border-b-[1px] border-surface-500/20 bg-surface-50/90 dark:bg-surface-950/90 backdrop-blur w-full h-[70px] flex items-center"
->
+<header class="sticky top-0 z-50 border border-surface-100-900/30 bg-surface-50-950/75 backdrop-blur-lg w-full h-[70px] flex items-center">
 	<div
 		class="container mx-auto grid max-w-screen-2xl grid-cols-[auto_1fr_auto] xl:grid-cols-[1fr_auto_1fr] items-center gap-4 px-4 xl:px-10"
 	>

sites/skeleton.dev/src/components/docs/TableCookbook.astro

@@ -20,7 +20,7 @@ const tableData = await getCollection(collection, (item) => {
 						<td>
 							<div class="flex flex-wrap gap-2">
 								{row.data.tags?.map((tag: string) => (
-									<span class="chip preset-tonal-primary">{tag}</span>
+									<span class="badge preset-tonal-primary">{tag}</span>
 								))}
 							</div>
 						</td>

sites/skeleton.dev/src/content/docs/components/rating/react.mdx

@@ -39,7 +39,7 @@ import ExampleRTLRaw from '@examples/components/rating/ExampleRTL.tsx?raw';
 	</Fragment>
 </Preview>
 
-## Custom Icon
+## Custom Icons
 
 <Preview client:load>
 	<Fragment slot="preview">

sites/skeleton.dev/src/content/docs/components/rating/svelte.mdx

@@ -39,7 +39,7 @@ import ExampleRTLRaw from '@examples/components/rating/ExampleRTL.svelte?raw';
 	</Fragment>
 </Preview>
 
-## Custom Icon
+## Custom Icons
 
 <Preview client:load>
 	<Fragment slot="preview">

sites/skeleton.dev/src/content/docs/design/colors.mdx

@@ -62,35 +62,43 @@ See the [Preset system](/docs/design/presets) for additional utility classes tha
 
 ## Color Pairings
 
-Provides a condensed syntax for implementing dual-tone color values that are balanced to easily swap between light and dark mode. These are enabled through the use of the CSS [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function.
+Provides a condensed syntax of dual-tone color values balanced to swap between light and dark mode. These are supported for all the same properties standard colors support (`bg`, `border`, `fill`, etc).
 
 ```
 {property}-{color}-{lightModeShade}-{darkModeShade}
 ```
 
+For example:
+
+- `bg-surface-200-800`
+- `text-primary-400-600`
+- `border-secondary-50-950`
+
 ### How Pairings Work
 
-The `text-primary-300-700` pairing will enable Tailwind to generate the following class:
+Color Pairing are enabled through the use of the CSS [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function. For example, the `text-primary-300-700` pairing will be implemnted in your CSS bundle as follows:
 
 ```css
 .text-primary-300-700 {
 	color: light-dark(var(--color-primary-300), var(--color-primary-700));
 }
 ```
 
-Which is roughly equivalent to the following - just a lot more compact!
+This roughly equivalent to the following, just more compact, and enabling support for Tailwind's [Color Scheme](https://tailwindcss.com/docs/color-scheme) utilities.
 
 ```html
 <div class="text-primary-300 dark:text-primary-700">...</div>
 ```
 
+By default, Skeleton sets the overall app's color scheme to match light or dark mode.
+
 ### Pairing Previews
 
-Below is a static representation of each pairing. Only `primary` is shown, but all Skeleton colors are supported.
+The following is a static representation of each pairing. Only `primary` is shown, but all Skeleton colors are supported.
 
 <ExamplePairings />
 
-Toggle this website between light and dark mode to see how each color pairing reacts.
+The following shows actual Color Pairings. Toggle this website between light and dark mode to see how these react.
 
 <ExamplePairingsDynamic />
 

sites/skeleton.dev/src/content/docs/design/presets.mdx

@@ -20,6 +20,8 @@ import ExampleCustom from '@examples/design/presets/ExampleCustom.astro';
 import ExampleCustomRaw from '@examples/design/presets/ExampleCustom.astro?raw';
 import ExampleGradient from '@examples/design/presets/ExampleGradient.astro';
 import ExampleGradientRaw from '@examples/design/presets/ExampleGradient.astro?raw';
+import ExampleGlass from '@examples/design/presets/ExampleGlass.astro';
+import ExampleGlassRaw from '@examples/design/presets/ExampleGlass.astro?raw';
 
 {
 
@@ -42,10 +44,11 @@ import ExampleGradientRaw from '@examples/design/presets/ExampleGradient.astro?r
 1. **Filled** - a filled preset of the primary brand color.
 2. **Tonal** - a tonal preset of the primary brand color.
 3. **Outlined** - an outlined preset of the primary brand color.
-4. **Elevated** - mixes a filled preset with a shadow.
-5. **Ghost** - has no style by default, but shows a tonal preset on hover.
-6. **Ghost Icon** - has no style by default, but shows a branded tonal preset on hover.
-7. **Gradient** - a custom preset generated using Tailwind gradient primitives.
+4. **Glass** - a custom preset using background transparency and backdrop blur.
+5. **Elevated** - mixes a filled preset with a shadow.
+6. **Ghost** - has no style by default, but shows a tonal preset on hover.
+7. **Ghost Icon** - has no style by default, but shows a branded tonal preset on hover.
+8. **Gradient** - a custom preset generated using Tailwind gradient primitives.
 
 ## Enabling Presets
 
@@ -139,4 +142,11 @@ Tailwind provides a number of powerful [Gradient](https://tailwindcss.com/docs/g
 
 ### Glass Presets
 
-> TODO: examples coming soon!
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleGlass />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleGlassRaw} lang="astro" />
+	</Fragment>
+</Preview>

sites/skeleton.dev/src/content/docs/design/spacing.mdx

@@ -1,50 +1,33 @@
 ---
 layout: '@layouts/LayoutDoc.astro'
 title: Spacing
-description: The Skeleton spacing system.
+description: Set a dynamic scale for application whitespace.
 order: 40
 ---
 
 export const components = componentSet;
 
-export const spacing = [
-	{ value: '0', width: 'w-0' },
-	{ value: '[1px]', width: 'w-[1px]' },
-	{ value: '0.5', width: 'w-0.5' },
-	{ value: '1', width: 'w-1' },
-	{ value: '1.5', width: 'w-1.5' },
-	{ value: '2', width: 'w-2' },
-	{ value: '2.5', width: 'w-2.5' },
-	{ value: '3', width: 'w-3' },
-	{ value: '3.5', width: 'w-3.5' },
-	{ value: '4', width: 'w-4' },
-	{ value: '5', width: 'w-5' },
-	{ value: '6', width: 'w-6' },
-	{ value: '7', width: 'w-7' },
-	{ value: '8', width: 'w-8' },
-	{ value: '9', width: 'w-9' },
-	{ value: '10', width: 'w-10' },
-	{ value: '11', width: 'w-11' },
-	{ value: '12', width: 'w-12' },
-	{ value: '14', width: 'w-14' },
-	{ value: '16', width: 'w-16' },
-	{ value: '20', width: 'w-20' },
-	{ value: '24', width: 'w-24' },
-	{ value: '28', width: 'w-28' },
-	{ value: '32', width: 'w-32' },
-	{ value: '36', width: 'w-36' },
-	{ value: '40', width: 'w-40' },
-	{ value: '44', width: 'w-44' },
-	{ value: '48', width: 'w-48' },
-	{ value: '52', width: 'w-52' },
-	{ value: '56', width: 'w-56' },
-	{ value: '60', width: 'w-60' },
-	{ value: '64', width: 'w-64' },
-	{ value: '72', width: 'w-72' },
-	{ value: '80', width: 'w-80' }
-];
+import Example from '@examples/design/spacing/Example.svelte';
 
-Skeleton utilizes [Tailwind spacing system](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants) to enable dynamic scaling based for the following properties.
+This is enabled by the [Tailwind spacing system](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants).
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<Example client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<div class="space-y-4">
+			Scaling can be adjusted by modifying the [type scale](/docs/get-started/core-api#typography) theme property.
+			```css
+			[data-theme='cerberus'] {
+				--spacing: 0.25rem;
+			}
+			```
+		</div>
+	</Fragment>
+</Preview>
+
+This affects the following utilities.
 
 - `padding`
 - `margin`
@@ -58,30 +41,3 @@ Skeleton utilizes [Tailwind spacing system](https://tailwindcss.com/blog/tailwin
 - `inset`
 - `space`
 - `translate`
-
-## Preview
-
-Try different themes to preview how scaling changes.
-
-<div class="table-wrap">
-	<table class="table">
-		<thead>
-			<tr>
-				<th>Size</th>
-				<th>Preview</th>
-			</tr>
-		</thead>
-		<tbody class="[&>tr]:hover:preset-tonal-primary">
-			{spacing.map((space) => (
-				<tr>
-					<td>
-						<small>{space.value}</small>
-					</td>
-					<td>
-						<div class:list={[space.width, 'h-[10px] bg-primary-500']}></div>
-					</td>
-				</tr>
-			))}
-		</tbody>
-	</table>
-</div>

sites/skeleton.dev/src/content/docs/design/themes.mdx

@@ -16,7 +16,7 @@ export const components = componentSet;
 	Skeleton themes utilize{' '}
 	<a className="anchor" href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*" target="_blank" rel="external">
 		CSS custom properties
-	</a>
+	</a>{' '}
 	to define core settings for your design system. Provided with a number of presets theme out of the box, as well as a powerful theme
 	generator to create your own. Enable one or more and quickly switch on-demand.
 </p>
@@ -179,7 +179,7 @@ npm install @fontsource/open-sans
 Then import each font at the top of your global stylesheet, but below your Tailwind configuration.
 
 ```css title="app.css"
-import "@fontsource/open-sans";
+@import '@fontsource/open-sans';
 ```
 
 Finally, use the following [theme properties](/docs/get-started/core-api#base-1) to set each respective font-family property. Note that for custom themes, these settings are can be defined directly within each respective theme file.

sites/skeleton.dev/src/content/docs/design/typography.mdx

@@ -8,8 +8,8 @@ order: 30
 
 export const components = componentSet;
 
-import TypeScale from '@examples/design/typography/TypeScale.svelte';
-import TypeScaleRaw from '@examples/design/typography/TypeScale.svelte?raw';
+import ExampleTypescale from '@examples/design/typography/ExampleTypescale.svelte';
+import ExampleTypescaleRaw from '@examples/design/typography/ExampleTypescale.svelte?raw';
 
 import Headings from '@examples/design/typography/Headings.astro';
 import HeadingsRaw from '@examples/design/typography/Headings.astro?raw';
@@ -30,9 +30,6 @@ import InsDelRaw from '@examples/design/typography/InsDel.astro?raw';
 import Mark from '@examples/design/typography/Mark.astro';
 import MarkRaw from '@examples/design/typography/Mark.astro?raw';
 
-import Semantic from '@examples/design/typography/Semantic.svelte';
-import SemanticRaw from '@examples/design/typography/Semantic.svelte?raw';
-
 import ListUnordered from '@examples/design/typography/ListUnordered.astro';
 import ListUnorderedRaw from '@examples/design/typography/ListUnordered.astro?raw';
 import ListOrdered from '@examples/design/typography/ListOrdered.astro';
@@ -44,6 +41,9 @@ import ListDescRaw from '@examples/design/typography/ListDesc.astro?raw';
 import ListNav from '@examples/design/typography/ListNav.astro';
 import ListNavRaw from '@examples/design/typography/ListNav.astro?raw';
 
+import ExampleSemantic from '@examples/design/typography/ExampleSemantic.svelte';
+import ExampleSemanticRaw from '@examples/design/typography/ExampleSemantic.svelte?raw';
+
 {
 
 <p class="text-xl">
@@ -55,18 +55,18 @@ import ListNavRaw from '@examples/design/typography/ListNav.astro?raw';
 
 ## Typographic Scale
 
-Skeleton introduces a [Typographic Scale](https://designcode.io/typographic-scales) to Tailwind's [font-size](https://tailwindcss.com/docs/font-size) properties.
+Skeleton introduces customizable [Typographic Scale](https://designcode.io/typographic-scales) to Tailwind's [font-size](https://tailwindcss.com/docs/font-size) properties.
 
 <Preview client:load>
 	<Fragment slot="preview">
-		<TypeScale client:visible />
+		<ExampleTypescale client:visible />
 	</Fragment>
 	<Fragment slot="code">
 		<div class="space-y-4">
 			Scaling can be adjusted by modifying the [type scale](/docs/get-started/core-api#typography) theme property.
 			```css
 			[data-theme='cerberus'] {
-				--text-scaling: 0.25rem;
+				--text-scaling: 1.067;
 			}
 			```
 			This affects the following text sizes.
@@ -256,9 +256,9 @@ When working with your designers, they may craft a semantic typography set for y
 
 <Preview client:load>
 	<Fragment slot="preview">
-		<Semantic client:visible />
+		<ExampleSemantic client:visible />
 	</Fragment>
 	<Fragment slot="code">
-		<Code code={SemanticRaw} lang="svelte" />
+		<Code code={ExampleSemanticRaw} lang="svelte" />
 	</Fragment>
 </Preview>