feat: merge optional presets back into core

.changeset/orange-towns-teach.md

@@ -0,0 +1,6 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: merge optional `preset` styles into core
+

packages/skeleton/package.json

@@ -17,10 +17,6 @@
 		"./themes/*": {
 			"style": "./dist/themes/*.css",
 			"default": "./dist/themes/*.css"
-		},
-		"./optional/*": {
-			"style": "./dist/optional/*.css",
-			"default": "./dist/optional/*.css"
 		}
 	},
 	"files": [

packages/skeleton/src/utilities/index.css

@@ -6,6 +6,7 @@
 @import './chips.css';
 @import './dividers.css';
 @import './placeholders.css';
+@import './presets.scss';
 @import './tables.css';
 @import './typography.css';
 

packages/skeleton/vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
 			entry: {
 				['index']: 'src/index.css',
 				...Object.fromEntries(
-					(await glob('./src/{themes,optional}/*.{css,scss}')).map((path) => {
+					(await glob('./src/themes/*.{css,scss}')).map((path) => {
 						const directory = basename(dirname(path));
 						const filename = basename(path);
 						return [join(directory, filename), path];

playgrounds/skeleton-react/src/app/globals.css

@@ -1,7 +1,6 @@
 @import 'tailwindcss';
 @import '@skeletonlabs/skeleton';
 @import '@skeletonlabs/skeleton/themes/cerberus';
-@import '@skeletonlabs/skeleton/optional/presets';
 @import '@skeletonlabs/skeleton-react';
 
 @plugin '@tailwindcss/forms';

playgrounds/skeleton-svelte/src/app.css

@@ -1,7 +1,6 @@
 @import 'tailwindcss';
 @import '@skeletonlabs/skeleton';
 @import '@skeletonlabs/skeleton/themes/cerberus';
-@import '@skeletonlabs/skeleton/optional/presets';
 @import '@skeletonlabs/skeleton-svelte';
 
 @plugin "@tailwindcss/forms";

playgrounds/skeleton/src/styles/global.css

@@ -1,7 +1,6 @@
 @import 'tailwindcss';
 @import '@skeletonlabs/skeleton';
 @import '@skeletonlabs/skeleton/themes/cerberus';
-@import '@skeletonlabs/skeleton/optional/presets';
 
 @plugin "@tailwindcss/forms";
 

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

@@ -2,7 +2,7 @@
 layout: '@layouts/LayoutDoc.astro'
 title: Presets
 description: Canned styles for your interface elements.
-srcCore: '/optional/presets.scss'
+srcCore: '/utilities/presets.scss'
 order: 20
 ---
 
@@ -50,14 +50,6 @@ import ExampleGlassRaw from '@examples/design/presets/ExampleGlass.astro?raw';
 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
-
-Skeleton provides an optional set of presets for `filled`, `tonal`, and `outlined` styles. To enable these, simply add the following import to your global stylesheet. This is recommended for new users to Skeleton.
-
-```css
-@import '@skeletonlabs/skeleton/optional/presets';
-```
-
 ## Skeleton Presets
 
 Skeleton's provides the following opinionated set of styles, including accessible backgrounds and text colors.

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

@@ -34,7 +34,6 @@ Tap the theme preview above to copy the theme name to your clipboard. Then imple
 
 ```css title="app.css" {3}
 /* @import '@skeletonlabs/skeleton'; */
-/* @import '@skeletonlabs/skeleton/optional/presets'; */
 @import '@skeletonlabs/skeleton/themes/{theme-name}';
 ```
 
@@ -64,7 +63,6 @@ You may register any number of themes by adding addition theme imports to your g
 
 ```css
 /* @import '@skeletonlabs/skeleton'; */
-/* @import '@skeletonlabs/skeleton/optional/presets'; */
 
 /* Register Preset Themes */
 @import '@skeletonlabs/skeleton/themes/cerberus';

sites/skeleton.dev/src/content/docs/get-started/installation/astro.mdx

@@ -48,7 +48,6 @@ Learn how to install the Skeleton core into your Astro project. We'll cover usin
         @import 'tailwindcss';
 
         @import '@skeletonlabs/skeleton';
-        @import '@skeletonlabs/skeleton/optional/presets';
         @import '@skeletonlabs/skeleton/themes/cerberus';
         ```
     </ProcessStep>

sites/skeleton.dev/src/content/docs/get-started/installation/nextjs.mdx

@@ -46,7 +46,6 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
 
         @import '@skeletonlabs/skeleton';
         @import '@skeletonlabs/skeleton-react';
-        @import '@skeletonlabs/skeleton/optional/presets';
         @import '@skeletonlabs/skeleton/themes/cerberus';
         ```
     </ProcessStep>

sites/skeleton.dev/src/content/docs/get-started/installation/other.mdx

@@ -48,7 +48,6 @@ The exact instructions for installing Skeleton will differ per framework, howeve
         @import 'tailwindcss';
 
         @import '@skeletonlabs/skeleton';
-        @import '@skeletonlabs/skeleton/optional/presets';
         @import '@skeletonlabs/skeleton/themes/cerberus';
         ```
     </ProcessStep>

sites/skeleton.dev/src/content/docs/get-started/installation/sveltekit.mdx

@@ -47,7 +47,6 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
 
         @import '@skeletonlabs/skeleton';
         @import '@skeletonlabs/skeleton-svelte';
-        @import '@skeletonlabs/skeleton/optional/presets';
         @import '@skeletonlabs/skeleton/themes/cerberus';
         ```
     </ProcessStep>

sites/skeleton.dev/src/content/docs/get-started/installation/vite-react.mdx

@@ -70,7 +70,6 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
 
         @import '@skeletonlabs/skeleton';
         @import '@skeletonlabs/skeleton-react';
-        @import '@skeletonlabs/skeleton/optional/presets';
         @import '@skeletonlabs/skeleton/themes/cerberus';
         ```
     </ProcessStep>

sites/skeleton.dev/src/content/docs/get-started/installation/vite-svelte.mdx

@@ -70,7 +70,6 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
 
         @import '@skeletonlabs/skeleton';
         @import '@skeletonlabs/skeleton-svelte';
-        @import '@skeletonlabs/skeleton/optional/presets';
         @import '@skeletonlabs/skeleton/themes/cerberus';
         ```
     </ProcessStep>

sites/skeleton.dev/src/styles/app.css

@@ -4,7 +4,6 @@
 @import '@skeletonlabs/skeleton';
 @import '@skeletonlabs/skeleton-svelte';
 @import '@skeletonlabs/skeleton-react';
-@import '@skeletonlabs/skeleton/optional/presets';
 @import '@skeletonlabs/skeleton/themes/catppuccin';
 @import '@skeletonlabs/skeleton/themes/cerberus';
 @import '@skeletonlabs/skeleton/themes/concord';

sites/themes.skeleton.dev/src/app.css

@@ -2,7 +2,6 @@
 @plugin '@tailwindcss/forms';
 
 @import '@skeletonlabs/skeleton';
-@import '@skeletonlabs/skeleton/optional/presets';
 
 /* Themes */
 /* NOTE: currently only used for the Import preview card */