More cleanup

skeletonlabs · Feb 12, 2025 · 4a52e8a · 4a52e8a
1 parent b72b926
commit 4a52e8a
Show file tree

Hide file tree

Showing 49 changed files with 198 additions and 236 deletions.
diff --git a/packages/skeleton-react/src/lib/components/TagsInput/TagsInput.tsx b/packages/skeleton-react/src/lib/components/TagsInput/TagsInput.tsx
@@ -9,7 +9,7 @@ import { noop } from '../../internal/noop.js';
 export const TagsInput: React.FC<TagsInputProps> = ({
 	placeholder = '',
 	// Root
-	base = 'grid input',
+	base = 'grid input !h-auto',
 	gap = 'gap-2',
 	padding = 'p-3',
 	classes = '',

diff --git a/packages/skeleton-svelte/src/lib/components/TagsInput/TagsInput.svelte b/packages/skeleton-svelte/src/lib/components/TagsInput/TagsInput.svelte
@@ -9,7 +9,7 @@
 		value = $bindable(),
 		placeholder = '',
 		// Root
-		base = 'grid input',
+		base = 'grid input !h-auto',
 		gap = 'gap-2',
 		padding = 'p-3',
 		classes = '',

diff --git a/packages/skeleton/src/components/forms-input.css b/packages/skeleton/src/components/forms-input.css
@@ -27,6 +27,27 @@
 		}
 	}
 
+	/* Ghost Input --- */
+	/* Used for the <TagsInput> component. */
+
+	.input-ghost {
+		padding: 0px;
+		background-color: transparent;
+		border-color: transparent;
+		/* --- */
+		outline-color: transparent;
+		--tw-ring-color: transparent;
+		@variant active {
+			border-color: transparent !important;
+		}
+		@variant focus {
+			border-color: transparent !important;
+		}
+		@variant focus-within {
+			border-color: transparent !important;
+		}
+	}
+
 	/* File Date/Time --- */
 
 	.input[type='date'],

diff --git a/packages/skeleton/src/keyframes/ring-indeterminate.css b/packages/skeleton/src/keyframes/ring-indeterminate.css
@@ -3,7 +3,7 @@
 
 @keyframes anim-ring-indeterminate {
 	from: {
-		stroke-dasharray: 1400;
+		stroke-dasharray: 1, 400;
 		stroke-dashoffset: 0;
 	}
 	to: {

diff --git a/sites/next.skeleton.dev/src/components/docs/BlueskyFeed.svelte b/sites/next.skeleton.dev/src/components/docs/BlueskyFeed.svelte
@@ -32,7 +32,7 @@
 					/>
 					<small class="opacity-60">{new Date(post.record.createdAt).toLocaleString()}</small>
 				</header>
-				<p class="xl:type-scale-4">{post.record.text}</p>
+				<p class="xl:text-lg">{post.record.text}</p>
 				<footer class="space-y-4">
 					{#if post.embed}
 						{#if post.embed.$type.includes('external')}

diff --git a/sites/next.skeleton.dev/src/components/docs/Breadcrumbs.astro b/sites/next.skeleton.dev/src/components/docs/Breadcrumbs.astro
@@ -2,7 +2,7 @@
 const breadcrumbs = Astro.url.pathname.split('/').filter((crumb) => Boolean(crumb) && crumb !== 'docs');
 ---
 
-<ol class="type-scale-1 flex gap-2">
+<ol class="text-xs flex gap-2">
 	{
 		breadcrumbs.map((crumb, i) => (
 			<>

diff --git a/sites/next.skeleton.dev/src/components/docs/Footer.astro b/sites/next.skeleton.dev/src/components/docs/Footer.astro
@@ -9,7 +9,7 @@ const { classList = 'p-4' } = Astro.props;
 	<div class="container mx-auto flex flex-col xl:flex-row justify-between items-center gap-4">
 		<div class="flex items-center gap-4">
 			<!-- <Icon name="skeleton" size={20} /> -->
-			<p class="type-scale-1 opacity-60">
+			<p class="text-xs 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>

diff --git a/sites/next.skeleton.dev/src/components/docs/Navigation.astro b/sites/next.skeleton.dev/src/components/docs/Navigation.astro
@@ -58,7 +58,7 @@ const navigation = {
 };
 ---
 
-<aside class="type-scale-2 space-y-10 overflow-y-auto pr-4" class:list={[classList]}>
+<aside class="text-sm space-y-10 overflow-y-auto pr-4" class:list={[classList]}>
 	{
 		Object.entries(navigation).map(([key, pages]) => (
 			<nav class="flex flex-col gap-2">

diff --git a/sites/next.skeleton.dev/src/components/docs/ProcessStep.astro b/sites/next.skeleton.dev/src/components/docs/ProcessStep.astro
@@ -4,10 +4,10 @@ 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 -ml-4 flex size-7 items-center justify-center rounded-full">
+	<div class="text-sm preset-filled-surface-200-800 -ml-4 flex size-7 items-center justify-center rounded-full">
 		{step !== 'check' ? step : <Check size={16} />}
 	</div>
-	<article class="[&>.h2]:!type-scale-4 [&>.h3]:!type-scale-4 space-y-4">
+	<article class="[&>.h2]:!text-lg [&>.h3]:!text-lg space-y-4">
 		<slot />
 	</article>
 </div>
diff --git a/sites/next.skeleton.dev/src/components/docs/Search.svelte b/sites/next.skeleton.dev/src/components/docs/Search.svelte
@@ -180,8 +180,8 @@
 							>
 								<span><IconBook class="size-6 opacity-60" /></span>
 								<div class="space-y-1">
-									<p class="type-scale-4 font-bold">{result.meta.title}</p>
-									<p class="type-scale-1">{result.url}</p>
+									<p class="text-lg font-bold">{result.meta.title}</p>
+									<p class="text-xs">{result.url}</p>
 								</div>
 								<span><IconChevronRight class="size-4 opacity-60" /></span>
 							</a>
@@ -197,8 +197,8 @@
 											<IconHash class="size-4 opacity-60" />
 										</span>
 										<div class="space-y-1 overflow-hidden">
-											<p class="type-scale-3 font-bold">{subResult.title}</p>
-											<p class="type-scale-1 text-surface-600-400 break-words">
+											<p class="text-base font-bold">{subResult.title}</p>
+											<p class="text-xs text-surface-600-400 break-words">
 												<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 												{@html subResult.excerpt}
 											</p>

diff --git a/sites/next.skeleton.dev/src/components/docs/TableCookbook.astro b/sites/next.skeleton.dev/src/components/docs/TableCookbook.astro
@@ -12,7 +12,7 @@ const tableData = await getCollection(collection, (item) => {
 
 <div class="table-wrap">
 	<table class="table">
-		<tbody class="hover:[&>tr]:preset-tonal">
+		<tbody class="[&>tr]:hover:preset-tonal">
 			{
 				tableData.map((row) => (
 					<tr title={row.data.description}>
@@ -24,7 +24,7 @@ const tableData = await getCollection(collection, (item) => {
 								))}
 							</div>
 						</td>
-						{/* <td class="text-right type-scale-1 opacity-60">{row.data.pubDate?.toLocaleDateString()}</td> */}
+						{/* <td class="text-right text-xs opacity-60">{row.data.pubDate?.toLocaleDateString()}</td> */}
 						<td class="text-right">
 							<a href={`/${collection}/${row.slug}`} class="btn preset-tonal hover:preset-filled">
 								Explore &rarr;

diff --git a/sites/next.skeleton.dev/src/components/docs/TableOfContents.astro b/sites/next.skeleton.dev/src/components/docs/TableOfContents.astro
@@ -22,7 +22,7 @@ function setDepthClass(depth: number) {
 
 {
 	headings.length > 0 && (
-		<nav class="type-scale-2 space-y-2">
+		<nav class="text-sm space-y-2">
 			<span class="font-bold">On This Page</span>
 			<ul class="space-y-2">
 				<li>

diff --git a/sites/next.skeleton.dev/src/components/docs/ThemeList.astro b/sites/next.skeleton.dev/src/components/docs/ThemeList.astro
@@ -1,8 +1,12 @@
 ---
-import * as themes from '@skeletonlabs/skeleton/themes';
+// import * as themes from '@skeletonlabs/skeleton/themes';
 ---
 
-<div class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-2">
+<div class="card p-4 bg-red-500 text-center">
+	<p>ThemesList component is currently disabled.</p>
+</div>
+
+<!-- <div class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-2">
 	{
 		Object.entries(themes).map(([key, values]) => (
 			<button
@@ -23,12 +27,12 @@ import * as themes from '@skeletonlabs/skeleton/themes';
 			</button>
 		))
 	}
-</div>
+</div> -->
 
-<script>
+<!-- <script>
 	for (const button of document.querySelectorAll<HTMLButtonElement>('button[data-theme]')) {
 		button.addEventListener('click', async () => {
 			await navigator.clipboard.writeText(button.dataset.theme!);
 		});
 	}
-</script>
+</script> -->
diff --git a/sites/next.skeleton.dev/src/components/homepage/HomeCompGrid.svelte b/sites/next.skeleton.dev/src/components/homepage/HomeCompGrid.svelte
@@ -116,7 +116,7 @@
 							<Avatar src="https://i.pravatar.cc/150?img={i + 10}" name="" size="size-10" imageClasses="grayscale" />
 							<div class="text-left">
 								<p class="font-bold">{member.name}</p>
-								<p class="opacity-60 type-scale-1">{member.email}</p>
+								<p class="opacity-60 text-xs">{member.email}</p>
 							</div>
 						</button>
 					{/each}
@@ -180,21 +180,21 @@
 				<div class="flex flex-col items-start">
 					<h2 class="text-3xl font-bold">64k+</h2>
 					<div class="grid grid-cols-1 gap-2">
-						<p class="type-scale-1 opacity-60">Downloads</p>
+						<p class="text-xs opacity-60">Downloads</p>
 						<badge class="badge preset-tonal-success">&uarr; 4%</badge>
 					</div>
 				</div>
 				<div class="flex flex-col items-start">
 					<h2 class="text-3xl font-bold">93k+</h2>
 					<div class="grid grid-cols-1 gap-2">
-						<p class="type-scale-1 opacity-60">Views</p>
+						<p class="text-xs opacity-60">Views</p>
 						<badge class="badge preset-tonal-error">&darr; 2.4%</badge>
 					</div>
 				</div>
 				<div class="flex flex-col items-start">
 					<h2 class="text-3xl font-bold">15k+</h2>
 					<div class="grid grid-cols-1 gap-2">
-						<p class="type-scale-1 opacity-60">Members</p>
+						<p class="text-xs opacity-60">Members</p>
 						<badge class="badge preset-tonal-success">&uarr; 8%</badge>
 					</div>
 				</div>
@@ -303,7 +303,7 @@
 							<th class="!text-right">Weight</th>
 						</tr>
 					</thead>
-					<tbody class="hover:[&>tr]:preset-tonal">
+					<tbody class="[&>tr]:hover:preset-tonal">
 						{#each tableData as row, i}
 							<tr>
 								<td>

diff --git a/sites/next.skeleton.dev/src/components/homepage/HomeDesignSystem.svelte b/sites/next.skeleton.dev/src/components/homepage/HomeDesignSystem.svelte
@@ -86,19 +86,19 @@ const theme = {
   "name": "theme",
   "properties": {
     "--type-scale-factor": "1.067",
-    "--type-scale-1": "calc(0.75rem * var(--type-scale-factor))",
-    "--type-scale-2": "calc(0.875rem * var(--type-scale-factor))",
-    "--type-scale-3": "calc(1rem * var(--type-scale-factor))",
-    "--type-scale-4": "calc(1.125rem * var(--type-scale-factor))",
-    "--type-scale-5": "calc(1.25rem * var(--type-scale-factor))",
-    "--type-scale-6": "calc(1.5rem * var(--type-scale-factor))",
-    "--type-scale-7": "calc(1.875rem * var(--type-scale-factor))",
-    "--type-scale-8": "calc(2.25rem * var(--type-scale-factor))",
-    "--type-scale-9": "calc(3rem * var(--type-scale-factor))",
-    "--type-scale-10": "calc(3.75rem * var(--type-scale-factor))",
-    "--type-scale-11": "calc(4.5rem * var(--type-scale-factor))",
-    "--type-scale-12": "calc(6rem * var(--type-scale-factor))",
-    "--type-scale-13": "calc(8rem * var(--type-scale-factor))",
+    "--text-xs": "calc(0.75rem * var(--type-scale-factor))",
+    "--text-sm": "calc(0.875rem * var(--type-scale-factor))",
+    "--text-base": "calc(1rem * var(--type-scale-factor))",
+    "--text-lg": "calc(1.125rem * var(--type-scale-factor))",
+    "--text-xl": "calc(1.25rem * var(--type-scale-factor))",
+    "--text-2xl": "calc(1.5rem * var(--type-scale-factor))",
+    "--text-3xl": "calc(1.875rem * var(--type-scale-factor))",
+    "--text-4xl": "calc(2.25rem * var(--type-scale-factor))",
+    "--text-5xl": "calc(3rem * var(--type-scale-factor))",
+    "--text-xs0": "calc(3.75rem * var(--type-scale-factor))",
+    "--text-xs1": "calc(4.5rem * var(--type-scale-factor))",
+    "--text-xs2": "calc(6rem * var(--type-scale-factor))",
+    "--text-xs3": "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",
@@ -147,7 +147,7 @@ const theme = {
 		{:else if state == 4}
 			<!-- Step 5: Typography -->
 			<div class="text-center space-y-4">
-				<h1 class="heading-font-family type-scale-11 md:type-scale-13 leading-none font-bold">Aa</h1>
+				<h1 class="heading-font-family text-xs1 md:text-xs3 leading-none font-bold">Aa</h1>
 				<p class="text-xs md:text-lg">The quick brown fox jumped over the lazy dog.</p>
 			</div>
 		{:else if state == 5}

diff --git a/sites/next.skeleton.dev/src/content/docs/design/presets.mdx b/sites/next.skeleton.dev/src/content/docs/design/presets.mdx
@@ -21,7 +21,7 @@ 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';
 
-<p class="type-scale-5">Presets are complex utility classes that combine various Skeleton primitives. Allowing you quickly style buttons, badges, cards, and more. Create any combination of styles by mixing Skeleton Presets and Tailwind primitives.</p>
+<p class="text-xl">Presets are complex utility classes that combine various Skeleton primitives. Allowing you quickly style buttons, badges, cards, and more. Create any combination of styles by mixing Skeleton Presets and Tailwind primitives.</p>
 
 <Preview client:load>
 	<Fragment slot="preview">

diff --git a/sites/next.skeleton.dev/src/content/docs/design/spacing.mdx b/sites/next.skeleton.dev/src/content/docs/design/spacing.mdx
@@ -61,7 +61,7 @@ This extends the [Tailwind spacing system](https://tailwindcss.com/docs/customiz
 				<th>Preview</th>
 			</tr>
 		</thead>
-		<tbody class="hover:[&>tr]:preset-tonal-primary">
+		<tbody class="[&>tr]:hover:preset-tonal-primary">
 			{spacing.map((space) => (
 				<tr>
 					<td>

diff --git a/sites/next.skeleton.dev/src/content/docs/design/themes.mdx b/sites/next.skeleton.dev/src/content/docs/design/themes.mdx
@@ -10,7 +10,7 @@ import ThemesList from '@components/docs/ThemeList.astro';
 export const components = componentSet;
 
 {/* prettier-ignore */}
-<p class="type-scale-5"> Themes are the heart of the Skeleton's design system, empowered by [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), authored as CSS-in-JS to enable simple integration into Skeleton's Tailwind plugin. Which allows for simple pre-registration and switching on demand.</p>
+<p class="text-xl"> Themes are the heart of the Skeleton's design system, empowered by [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), authored as CSS-in-JS to enable simple integration into Skeleton's Tailwind plugin. Which allows for simple pre-registration and switching on demand.</p>
 
 ---
 

diff --git a/sites/next.skeleton.dev/src/content/docs/design/typography.mdx b/sites/next.skeleton.dev/src/content/docs/design/typography.mdx
@@ -42,7 +42,7 @@ 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';
 
-<p class="type-scale-5">Skeleton provides an array of opt-in utility classes for common typographic elements. As well as a number of primitives for extending and generating semantic typography sets. Use theme settings to provide the perfect typographic scale.</p>
+<p class="text-xl">Skeleton provides an array of opt-in utility classes for common typographic elements. As well as a number of primitives for extending and generating semantic typography sets. Use theme settings to provide the perfect typographic scale.</p>
 
 ## Utility Classes
 
@@ -205,19 +205,19 @@ Primitive font sizes based on your theme's [typographic scale](https://designcod
 	</Fragment>
 	<Fragment slot="code">
 		```html
-		<h1 class="type-scale-1">Type Scale 1</h1>
-		<h2 class="type-scale-2">Type Scale 2</h2>
-		<h3 class="type-scale-3">Type Scale 3</h3>
-		<h4 class="type-scale-4">Type Scale 4</h4>
-		<h5 class="type-scale-5">Type Scale 5</h5>
-		<h6 class="type-scale-6">Type Scale 6</h6>
-		<h6 class="type-scale-7">Type Scale 7</h6>
-		<h6 class="type-scale-8">Type Scale 8</h6>
-		<h6 class="type-scale-9">Type Scale 9</h6>
-		<h6 class="type-scale-10">Type Scale 10</h6>
-		<h6 class="type-scale-11">Type Scale 11</h6>
-		<h6 class="type-scale-12">Type Scale 12</h6>
-		<h6 class="type-scale-13">Type Scale 13</h6>
+		<h1 class="text-xs">text-xs</h1>
+		<h2 class="text-sm">text-sm</h2>
+		<h3 class="textba-base">text-base</h3>
+		<h4 class="text-lg">text-lg</h4>
+		<h5 class="text-xl">text-xl</h5>
+		<h6 class="text2-2xl">text-2xl</h6>
+		<h6 class="text3-3xl">text-3xl</h6>
+		<h6 class="text4-4xl">text-4xl</h6>
+		<h6 class="text5-5xl">text-5xl</h6>
+		<h6 class="text6-6xl">text-6xl</h6>
+		<h6 class="text7-7xl">text-7xl</h6>
+		<h6 class="text8-8xl">text-8xl</h6>
+		<h6 class="text9-9xl">text-9xl</h6>
 		```
 	</Fragment>
 </Preview>

diff --git a/sites/next.skeleton.dev/src/content/docs/get-started/fundamentals.mdx b/sites/next.skeleton.dev/src/content/docs/get-started/fundamentals.mdx
@@ -9,7 +9,7 @@ export const components = componentSet;
 import NavGrid from '@components/docs/NavGrid.astro';
 
 {/* prettier-ignore */}
-<p class="type-scale-5"> Skeleton is comprised of three pillars - the design system, Tailwind utilities, and framework-specific components.
+<p class="text-xl"> Skeleton is comprised of three pillars - the design system, Tailwind utilities, and framework-specific components.
 	Together these form a comprehensive solution for designing and implementing complex web interfaces at scale.</p>
 
 ---

diff --git a/sites/next.skeleton.dev/src/content/docs/get-started/plugin.mdx b/sites/next.skeleton.dev/src/content/docs/get-started/plugin.mdx
@@ -9,7 +9,7 @@ order: 30
 export const components = componentSet;
 
 {/* prettier-ignore */}
-<p class="type-scale-5"> The heart of Skeleton is our powerful [Tailwind Plugin](https://tailwindcss.com/docs/plugins). This adapts and
+<p class="text-xl"> The heart of Skeleton is our powerful [Tailwind Plugin](https://tailwindcss.com/docs/plugins). This adapts and
 	extends Tailwind to handle Skeleton's global styles, color system, typography, and more. The following API details all available Skeleton utility classes and the theme-specific CSS custom properties.</p>
 
 ---
@@ -136,19 +136,19 @@ calc({remSize} * var(--type-scale-factor))
 
 | Class           | Theme Property  | Rem      | Pixels |
 | --------------- | --------------- | -------- | ------ |
-| `type-scale-1`  | --type-scale-1  | 0.75rem  | 12px   |
-| `type-scale-2`  | --type-scale-2  | 0.875rem | 14px   |
-| `type-scale-3`  | --type-scale-3  | 1rem     | 16px   |
-| `type-scale-4`  | --type-scale-4  | 1.125rem | 18px   |
-| `type-scale-5`  | --type-scale-5  | 1.25rem  | 20px   |
-| `type-scale-6`  | --type-scale-6  | 1.5rem   | 24px   |
-| `type-scale-7`  | --type-scale-7  | 1.875rem | 30px   |
-| `type-scale-8`  | --type-scale-8  | 2.25rem  | 36px   |
-| `type-scale-9`  | --type-scale-9  | 3rem     | 48px   |
-| `type-scale-10` | --type-scale-10 | 3.75rem  | 60px   |
-| `type-scale-11` | --type-scale-11 | 4.5rem   | 72px   |
-| `type-scale-12` | --type-scale-12 | 6rem     | 96px   |
-| `type-scale-13` | --type-scale-13 | 8rem     | 128px  |
+| `text-xs`  | --text-xs  | 0.75rem  | 12px   |
+| `text-sm`  | --text-sm  | 0.875rem | 14px   |
+| `text-base`  | --text-base  | 1rem     | 16px   |
+| `text-lg`  | --text-lg  | 1.125rem | 18px   |
+| `text-xl`  | --text-xl  | 1.25rem  | 20px   |
+| `text-2xl`  | --text-2xl  | 1.5rem   | 24px   |
+| `text-3xl`  | --text-3xl  | 1.875rem | 30px   |
+| `text-4xl`  | --text-4xl  | 2.25rem  | 36px   |
+| `text-5xl`  | --text-5xl  | 3rem     | 48px   |
+| `text-xs0` | --text-xs0 | 3.75rem  | 60px   |
+| `text-xs1` | --text-xs1 | 4.5rem   | 72px   |
+| `text-xs2` | --text-xs2 | 6rem     | 96px   |
+| `text-xs3` | --text-xs3 | 8rem     | 128px  |
 
 #### Base
 

diff --git a/sites/next.skeleton.dev/src/content/docs/guides/layouts.mdx b/sites/next.skeleton.dev/src/content/docs/guides/layouts.mdx
@@ -16,7 +16,7 @@ import ExampleColTwoRaw from '@examples/guides/cookbook/layouts/ExampleColTwo.as
 import ExampleStickyHeader from '@examples/guides/cookbook/layouts/ExampleStickyHeader.astro';
 import ExampleStickyHeaderRaw from '@examples/guides/cookbook/layouts/ExampleStickyHeader.astro?raw';
 
-<p class="type-scale-5">Skeleton supports a variety of web-based frameworks and meta-frameworks, and this guide serves as a universal reference when implementing page layouts. These techniques utilize native HTML and Tailwind, meaning Skeleton is supported but not required. The only prerequisite is Tailwind itself.</p>
+<p class="text-xl">Skeleton supports a variety of web-based frameworks and meta-frameworks, and this guide serves as a universal reference when implementing page layouts. These techniques utilize native HTML and Tailwind, meaning Skeleton is supported but not required. The only prerequisite is Tailwind itself.</p>
 
 ## Real World Example