@celar-ui/svelte 2.0.1 → 2.1.0

package/dist/buttons/styles/button_utils.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @utility button-base {
 	@apply relative m-0 box-border inline-block h-fit w-fit cursor-pointer border-none p-0 no-underline transition-all select-none;

package/dist/containment/Container.svelte

@@ -6,13 +6,26 @@
 		xs?: boolean;
 		sm?: boolean;
 		md?: boolean;
+		lg?: boolean;
+		xl?: boolean;
+		x2xl?: boolean;
 		fluid?: boolean;
 	}
 
-	let { children, xs, sm, md, fluid, ...rest }: ContainerProps = $props();
+	let { children, xs, sm, md, lg, xl, x2xl, fluid, ...rest }: ContainerProps = $props();
 </script>
 
-<section {...rest} data-container data-xs={xs} data-sm={sm} data-md={md} data-fluid={fluid}>
+<section
+	{...rest}
+	data-container
+	data-xs={xs}
+	data-sm={sm}
+	data-md={md}
+	data-lg={lg}
+	data-xl={xl}
+	data-2xl={x2xl}
+	data-fluid={fluid}
+>
 	{#if children}
 		{@render children()}
 	{/if}

package/dist/containment/Container.svelte.d.ts

@@ -4,6 +4,9 @@ export interface ContainerProps extends HTMLAttributes<HTMLElement> {
     xs?: boolean;
     sm?: boolean;
     md?: boolean;
+    lg?: boolean;
+    xl?: boolean;
+    x2xl?: boolean;
     fluid?: boolean;
 }
 declare const Container: import("svelte").Component<ContainerProps, {}, "">;

package/dist/containment/Spacer.svelte

@@ -28,7 +28,7 @@
 </div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-spacer] {

package/dist/containment/styles/avatar.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-avatar-root] {

package/dist/containment/styles/breadcrumb.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-breadcrumb] {

package/dist/containment/styles/card.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-card] {

package/dist/containment/styles/container.css

@@ -1,26 +1,11 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-container] {
+		@apply container-sizing;
 		position: relative;
 		margin: 0 auto;
 		padding: --spacing(4);
 		box-sizing: border-box;
-
-		&[data-xs='true'] {
-			max-width: var(--breakpoint-xs);
-		}
-
-		&[data-sm='true'] {
-			max-width: var(--breakpoint-sm);
-		}
-
-		&[data-md='true'] {
-			max-width: var(--breakpoint-md);
-		}
-
-		&[data-fluid='true'] {
-			width: 100%;
-		}
 	}
 }

package/dist/containment/styles/surface-container.css

@@ -1,29 +1,9 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-surface-container] {
-		--color-background: var(--color-surface);
-
+		@apply elevated;
 		border-radius: var(--radius-4xl);
 		background-color: var(--color-background);
-
-		&[data-elevated='0'] {
-			--color-background: var(--color-surfaceContainerLowest);
-		}
-		&[data-elevated='1'] {
-			--color-background: var(--color-surface);
-		}
-		&[data-elevated='2'] {
-			--color-background: var(--color-surfaceContainerLow);
-		}
-		&[data-elevated='3'] {
-			--color-background: var(--color-surfaceContainer);
-		}
-		&[data-elevated='4'] {
-			--color-background: var(--color-surfaceContainerHigh);
-		}
-		&[data-elevated='5'] {
-			--color-background: var(--color-surfaceContainerHighest);
-		}
 	}
 }

package/dist/inputs/Checkbox.svelte

@@ -55,7 +55,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-checkbox] {

package/dist/inputs/ColorInput.svelte

@@ -19,7 +19,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-color-input] {
@@ -29,7 +29,7 @@
 			justify-content: flex-start;
 			align-items: center;
 			border-radius: var(--radius-2xl);
-			padding: --spacing(1.5) 0;
+			padding: --spacing(2) 0;
 			width: 100%;
 
 			> input {

package/dist/inputs/FileInput.svelte

@@ -24,7 +24,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-file-input] {
@@ -34,7 +34,7 @@
 			justify-content: flex-start;
 			align-items: center;
 			border-radius: var(--radius-2xl);
-			padding: --spacing(1.5) 0;
+			padding: --spacing(2) 0;
 			width: 100%;
 
 			input {

package/dist/inputs/RadioItem.svelte

@@ -16,7 +16,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-radio-item] {

package/dist/inputs/Slider.svelte

@@ -19,7 +19,7 @@
 </div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@utility track {
 		@apply box-border h-2 w-full rounded-2xl border-none;
@@ -34,7 +34,7 @@
 		@apply bg-primary h-2 rounded-2xl;
 	}
 	@utility thumb {
-		@apply bg-primary box-border h-8 w-8 rounded-[50%] border-none;
+		@apply bg-primary box-border h-6 w-6 rounded-[50%] border-none;
 	}
 
 	@layer components {
@@ -77,7 +77,7 @@
 				}
 
 				&::-webkit-slider-thumb {
-					margin-top: calc(0.5 * (--spacing(2) - --spacing(8)));
+					margin-top: calc(0.5 * --spacing(-4));
 					@apply thumb;
 				}
 				&::-moz-range-thumb {

package/dist/inputs/Switch.svelte

@@ -18,7 +18,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-switch] {

package/dist/inputs/TagInput.svelte

@@ -106,7 +106,7 @@
 </div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-tag-input] {

package/dist/inputs/TextInput.svelte

@@ -20,7 +20,7 @@
 </label>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-text-input] {
@@ -35,7 +35,7 @@
 				@apply border-onBackground/20 rounded-2xl border border-solid transition-all;
 				box-sizing: border-box;
 				background-color: transparent;
-				padding: --spacing(1.5) --spacing(4);
+				padding: --spacing(2) --spacing(4);
 				padding-left: --spacing(14);
 				width: 100%;
 				font-size: inherit;

package/dist/inputs/styles/radio_group.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 @layer components {
 	[data-radio-group-root] {
 		position: relative;

package/dist/misc/Badge.svelte

@@ -14,7 +14,7 @@
 </span>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-badge] {

package/dist/misc/DuckSpinner.svelte

@@ -138,7 +138,7 @@
 </svg>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-duck-spinner] {

package/dist/misc/Gap.svelte

@@ -9,7 +9,7 @@
 <div data-gap style:width={size}></div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-gap] {

package/dist/misc/LinearProgressIndicator.svelte

@@ -8,7 +8,7 @@
 </div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-linear-progress-indicator] {

package/dist/navigation/AdaptiveSidebar.svelte

@@ -47,7 +47,7 @@
 </div>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-adaptive-sidebar-backdrop] {

package/dist/navigation/AppBar.svelte

@@ -28,7 +28,7 @@
 </section>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-app-bar] {

package/dist/navigation/NavigationBar.svelte

@@ -9,7 +9,7 @@
 </section>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-navigation-bar] {

package/dist/navigation/NavigationBarButton.svelte

@@ -24,7 +24,7 @@
 </a>
 
 <style>
-	@reference '$style/index.css';
+	@reference '@celar-ui/svelte/styles/index.css';
 
 	@layer components {
 		[data-navigation-bar-button] {

package/dist/navigation/styles/navigation_drawer.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-navigation-drawer-backdrop] {

package/dist/overlay/CommandDialog.svelte

@@ -9,6 +9,9 @@
 		xs?: boolean;
 		sm?: boolean;
 		md?: boolean;
+		lg?: boolean;
+		xl?: boolean;
+		x2xl?: boolean;
 		fluid?: boolean;
 		transitionDuration?: number;
 		placeholder?: string;

package/dist/overlay/CommandDialog.svelte.d.ts

@@ -8,6 +8,9 @@ type CommandDialogProps = MinimalDialogProps & {
     xs?: boolean;
     sm?: boolean;
     md?: boolean;
+    lg?: boolean;
+    xl?: boolean;
+    x2xl?: boolean;
     fluid?: boolean;
     transitionDuration?: number;
     placeholder?: string;

package/dist/overlay/Dialog.svelte

@@ -13,6 +13,9 @@
 		xs?: boolean;
 		sm?: boolean;
 		md?: boolean;
+		lg?: boolean;
+		xl?: boolean;
+		x2xl?: boolean;
 		fluid?: boolean;
 		transitionDuration?: number;
 	};
@@ -26,6 +29,9 @@
 		xs,
 		sm,
 		md,
+		lg,
+		xl,
+		x2xl,
 		fluid,
 		transitionDuration = 200,
 		...rest
@@ -52,6 +58,9 @@
 			data-xs={xs}
 			data-sm={sm}
 			data-md={md}
+			data-lg={lg}
+			data-xl={xl}
+			data-2xl={x2xl}
 			data-fluid={fluid}
 			data-celar-dialog-content
 		>

package/dist/overlay/Dialog.svelte.d.ts

@@ -11,6 +11,9 @@ export type DialogProps = Omit<DialogContentProps, 'title'> & {
     xs?: boolean;
     sm?: boolean;
     md?: boolean;
+    lg?: boolean;
+    xl?: boolean;
+    x2xl?: boolean;
     fluid?: boolean;
     transitionDuration?: number;
 };

package/dist/overlay/MinimalDialog.svelte

@@ -10,6 +10,9 @@
 		xs?: boolean;
 		sm?: boolean;
 		md?: boolean;
+		lg?: boolean;
+		xl?: boolean;
+		x2xl?: boolean;
 		fluid?: boolean;
 		transitionDuration?: number;
 	};
@@ -21,6 +24,9 @@
 		xs,
 		sm,
 		md,
+		lg,
+		xl,
+		x2xl,
 		fluid,
 		transitionDuration = 200,
 		...rest
@@ -47,6 +53,9 @@
 			data-xs={xs}
 			data-sm={sm}
 			data-md={md}
+			data-lg={lg}
+			data-xl={xl}
+			data-2xl={x2xl}
 			data-fluid={fluid}
 			data-celar-dialog-content
 		>

package/dist/overlay/MinimalDialog.svelte.d.ts

@@ -9,6 +9,9 @@ export type MinimalDialogProps = DialogContentProps & {
     xs?: boolean;
     sm?: boolean;
     md?: boolean;
+    lg?: boolean;
+    xl?: boolean;
+    x2xl?: boolean;
     fluid?: boolean;
     transitionDuration?: number;
 };

package/dist/overlay/styles/command.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-command-dialog] {

package/dist/overlay/styles/dialog.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-celar-dialog-overlay] {
@@ -35,6 +35,15 @@
 		&[data-md='true'] {
 			max-width: min(calc(100% - --spacing(8)), var(--breakpoint-md));
 		}
+		&[data-lg='true'] {
+			max-width: min(calc(100% - --spacing(8)), var(--breakpoint-lg));
+		}
+		&[data-xl='true'] {
+			max-width: min(calc(100% - --spacing(8)), var(--breakpoint-xl));
+		}
+		&[data-2xl='true'] {
+			max-width: min(calc(100% - --spacing(8)), var(--breakpoint-2xl));
+		}
 		&[data-fluid='true'] {
 			width: 100%;
 		}

package/dist/overlay/styles/popover.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-popover-content] {

package/dist/overlay/styles/surface-dialog.css

@@ -1,4 +1,4 @@
-@reference '$style/index.css';
+@reference '@celar-ui/svelte/styles/index.css';
 
 @layer components {
 	[data-minimal-surface-dialog] {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",
@@ -13,7 +13,7 @@
 	},
 	"scripts": {
 		"dev": "vite dev",
-		"build": "bun run gen-theme && vite build && bun run prepack",
+		"build": "vite build && bun run prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"prepack": "svelte-kit sync && svelte-package && publint",
@@ -27,6 +27,7 @@
 	"files": [
 		"dist",
 		"src/styles",
+		"src/bin",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
@@ -41,10 +42,12 @@
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
-		"./src/styles/*.css": {
-			"import": "./src/styles/*.css",
-			"require": "./src/styles/*.css"
-		}
+		"./styles/index.css": "./src/styles/index.css",
+		"./styles/theme.css": "./src/styles/theme.css",
+		"./styles/*.css": "./src/styles/*.css"
+	},
+	"bin": {
+		"gen-theme": "./src/bin/gen-theme.ts"
 	},
 	"peerDependencies": {
 		"bits-ui": "^2.8.0",

package/src/bin/gen-theme.ts

@@ -0,0 +1,71 @@
+#!/usr/bin/env bun
+
+/**
+ * Generate Tailwind 4 @theme CSS from Material Color Utilities theme output.
+ * Usage: bun index.ts <output-path>
+ *
+ * This script generates a CSS file with @variant and @theme directives,
+ * using the output of Material Color Utilities' themeFromSourceColor.
+ */
+
+import materialDynamicColors from 'material-dynamic-colors';
+import { mkdir, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+
+// ---- CONFIGURABLE SOURCE COLOR / OUTPUT ----
+const argv = process.argv.slice(2);
+const getFlag = (names: string[]) => {
+	const i = argv.findIndex((a) => names.includes(a));
+	if (i >= 0 && argv[i + 1] && !argv[i + 1].startsWith('--')) return argv[i + 1];
+	const kv = argv.find((a) => names.some((n) => a.startsWith(`${n}=`)));
+	return kv ? kv.split('=').slice(1).join('=') : undefined;
+};
+const sourceColor = (getFlag(['--color', '-c']) || process.env.SOURCE_COLOR || '#ff907f').trim();
+const outputPath = path.resolve(
+	process.cwd(),
+	getFlag(['--out', '-o']) || process.env.OUTPUT_PATH || 'src/styles/theme.css'
+);
+
+// ---- GENERATE THEME ----
+const theme = await materialDynamicColors(sourceColor);
+
+// ---- TAILWIND 4 @THEME CSS OUTPUT ----
+function toThemeVariables(colors: Record<string, string>): string {
+	return Object.entries(colors)
+		.map(([k, v]) => `  --color-${k}: ${v};`)
+		.join('\n');
+}
+
+const lightVars = toThemeVariables(theme.light as unknown as Record<string, string>);
+const darkVars = toThemeVariables(theme.dark as unknown as Record<string, string>);
+
+const css = `/* Generated by index.ts */
+/* Source color: ${sourceColor} */
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+${lightVars}
+  --color-info: #1a3baa;
+  --color-onInfo: #e2ffff;
+  --color-success: #2b5f50;
+  --color-onSuccess: #e8fef5;
+  --color-warning: #8a5a00;
+  --color-onWarning: #fff8ec;
+}
+
+@variant dark {
+${darkVars}
+  --color-info: #008eff;
+  --color-onInfo: #101a3b;
+  --color-success: #9bdac7;
+  --color-onSuccess: #184d3a;
+  --color-warning: #bfa060;
+  --color-onWarning: #4a3700;
+}
+`;
+
+// ---- WRITE FILE ----
+await mkdir(path.dirname(outputPath), { recursive: true });
+await writeFile(outputPath, css);
+console.log(`Material theme CSS written to ${outputPath}`);

package/src/styles/index.css

@@ -4,3 +4,52 @@
 @theme {
 	--breakpoint-xs: 30rem;
 }
+
+@utility container-sizing {
+	&[data-xs='true'] {
+		max-width: var(--breakpoint-xs);
+	}
+	&[data-sm='true'] {
+		max-width: var(--breakpoint-sm);
+	}
+	&[data-md='true'] {
+		max-width: var(--breakpoint-md);
+	}
+	&[data-lg='true'] {
+		max-width: var(--breakpoint-lg);
+	}
+	&[data-xl='true'] {
+		max-width: var(--breakpoint-xl);
+	}
+	&[data-2xl='true'] {
+		max-width: var(--breakpoint-2xl);
+	}
+	&[data-fluid='true'] {
+		width: 100%;
+	}
+}
+
+@utility elevated {
+	--color-background: var(--color-surface);
+
+	&[data-elevated='0'] {
+		--color-background: var(--color-surfaceContainerLowest);
+	}
+	&[data-elevated='1'] {
+		--color-background: var(--color-surface);
+	}
+	&[data-elevated='2'] {
+		--color-background: var(--color-surfaceContainerLow);
+	}
+	&[data-elevated='3'] {
+		--color-background: var(--color-surfaceContainer);
+	}
+	&[data-elevated='4'] {
+		--color-background: var(--color-surfaceContainerHigh);
+	}
+	&[data-elevated='5'] {
+		--color-background: var(--color-surfaceContainerHighest);
+	}
+
+	background-color: var(--color-background);
+}

package/src/styles/theme.css

@@ -4,91 +4,91 @@
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 
 @theme {
-  --color-primary: #9c4235;
-  --color-onPrimary: #ffffff;
-  --color-primaryContainer: #ffdad4;
-  --color-onPrimaryContainer: #410000;
-  --color-secondary: #775651;
-  --color-onSecondary: #ffffff;
-  --color-secondaryContainer: #ffdad4;
-  --color-onSecondaryContainer: #2c1512;
-  --color-tertiary: #705c2e;
-  --color-onTertiary: #ffffff;
-  --color-tertiaryContainer: #fbdfa6;
-  --color-onTertiaryContainer: #251a00;
-  --color-error: #ba1a1a;
-  --color-onError: #ffffff;
-  --color-errorContainer: #ffdad6;
-  --color-onErrorContainer: #410002;
-  --color-background: #fffbff;
-  --color-onBackground: #201a19;
-  --color-surface: #fff8f6;
-  --color-onSurface: #201a19;
-  --color-surfaceVariant: #f5ddda;
-  --color-onSurfaceVariant: #534341;
-  --color-outline: #857370;
-  --color-outlineVariant: #d8c2be;
-  --color-shadow: #000000;
-  --color-scrim: #000000;
-  --color-inverseSurface: #362f2e;
-  --color-inverseOnSurface: #fbeeec;
-  --color-inversePrimary: #ffb4a8;
-  --color-surfaceDim: #e4d7d5;
-  --color-surfaceBright: #fff8f6;
-  --color-surfaceContainerLowest: #ffffff;
-  --color-surfaceContainerLow: #fef1ee;
-  --color-surfaceContainer: #f8ebe9;
-  --color-surfaceContainerHigh: #f3e5e3;
-  --color-surfaceContainerHighest: #ede0dd;
-  --color-info: #1a3baa;
-  --color-onInfo: #e2ffff;
-  --color-success: #2b5f50;
-  --color-onSuccess: #e8fef5;
-  --color-warning: #8a5a00;
-  --color-onWarning: #fff8ec;
+	--color-primary: #9c4235;
+	--color-onPrimary: #ffffff;
+	--color-primaryContainer: #ffdad4;
+	--color-onPrimaryContainer: #410000;
+	--color-secondary: #775651;
+	--color-onSecondary: #ffffff;
+	--color-secondaryContainer: #ffdad4;
+	--color-onSecondaryContainer: #2c1512;
+	--color-tertiary: #705c2e;
+	--color-onTertiary: #ffffff;
+	--color-tertiaryContainer: #fbdfa6;
+	--color-onTertiaryContainer: #251a00;
+	--color-error: #ba1a1a;
+	--color-onError: #ffffff;
+	--color-errorContainer: #ffdad6;
+	--color-onErrorContainer: #410002;
+	--color-background: #fffbff;
+	--color-onBackground: #201a19;
+	--color-surface: #fff8f6;
+	--color-onSurface: #201a19;
+	--color-surfaceVariant: #f5ddda;
+	--color-onSurfaceVariant: #534341;
+	--color-outline: #857370;
+	--color-outlineVariant: #d8c2be;
+	--color-shadow: #000000;
+	--color-scrim: #000000;
+	--color-inverseSurface: #362f2e;
+	--color-inverseOnSurface: #fbeeec;
+	--color-inversePrimary: #ffb4a8;
+	--color-surfaceDim: #e4d7d5;
+	--color-surfaceBright: #fff8f6;
+	--color-surfaceContainerLowest: #ffffff;
+	--color-surfaceContainerLow: #fef1ee;
+	--color-surfaceContainer: #f8ebe9;
+	--color-surfaceContainerHigh: #f3e5e3;
+	--color-surfaceContainerHighest: #ede0dd;
+	--color-info: #1a3baa;
+	--color-onInfo: #e2ffff;
+	--color-success: #2b5f50;
+	--color-onSuccess: #e8fef5;
+	--color-warning: #8a5a00;
+	--color-onWarning: #fff8ec;
 }
 
 @variant dark {
-  --color-primary: #ffb4a8;
-  --color-onPrimary: #5f150d;
-  --color-primaryContainer: #7d2b21;
-  --color-onPrimaryContainer: #ffdad4;
-  --color-secondary: #e7bdb6;
-  --color-onSecondary: #442925;
-  --color-secondaryContainer: #5d3f3b;
-  --color-onSecondaryContainer: #ffdad4;
-  --color-tertiary: #dec48c;
-  --color-onTertiary: #3e2e04;
-  --color-tertiaryContainer: #564419;
-  --color-onTertiaryContainer: #fbdfa6;
-  --color-error: #ffb4ab;
-  --color-onError: #690005;
-  --color-errorContainer: #93000a;
-  --color-onErrorContainer: #ffb4ab;
-  --color-background: #201a19;
-  --color-onBackground: #ede0dd;
-  --color-surface: #181211;
-  --color-onSurface: #ede0dd;
-  --color-surfaceVariant: #534341;
-  --color-onSurfaceVariant: #d8c2be;
-  --color-outline: #a08c89;
-  --color-outlineVariant: #534341;
-  --color-shadow: #000000;
-  --color-scrim: #000000;
-  --color-inverseSurface: #ede0dd;
-  --color-inverseOnSurface: #362f2e;
-  --color-inversePrimary: #9c4235;
-  --color-surfaceDim: #181211;
-  --color-surfaceBright: #3f3736;
-  --color-surfaceContainerLowest: #120d0c;
-  --color-surfaceContainerLow: #201a19;
-  --color-surfaceContainer: #251e1d;
-  --color-surfaceContainerHigh: #2f2827;
-  --color-surfaceContainerHighest: #3b3332;
-  --color-info: #008eff;
-  --color-onInfo: #101a3b;
-  --color-success: #9bdac7;
-  --color-onSuccess: #184d3a;
-  --color-warning: #bfa060;
-  --color-onWarning: #4a3700;
+	--color-primary: #ffb4a8;
+	--color-onPrimary: #5f150d;
+	--color-primaryContainer: #7d2b21;
+	--color-onPrimaryContainer: #ffdad4;
+	--color-secondary: #e7bdb6;
+	--color-onSecondary: #442925;
+	--color-secondaryContainer: #5d3f3b;
+	--color-onSecondaryContainer: #ffdad4;
+	--color-tertiary: #dec48c;
+	--color-onTertiary: #3e2e04;
+	--color-tertiaryContainer: #564419;
+	--color-onTertiaryContainer: #fbdfa6;
+	--color-error: #ffb4ab;
+	--color-onError: #690005;
+	--color-errorContainer: #93000a;
+	--color-onErrorContainer: #ffb4ab;
+	--color-background: #201a19;
+	--color-onBackground: #ede0dd;
+	--color-surface: #181211;
+	--color-onSurface: #ede0dd;
+	--color-surfaceVariant: #534341;
+	--color-onSurfaceVariant: #d8c2be;
+	--color-outline: #a08c89;
+	--color-outlineVariant: #534341;
+	--color-shadow: #000000;
+	--color-scrim: #000000;
+	--color-inverseSurface: #ede0dd;
+	--color-inverseOnSurface: #362f2e;
+	--color-inversePrimary: #9c4235;
+	--color-surfaceDim: #181211;
+	--color-surfaceBright: #3f3736;
+	--color-surfaceContainerLowest: #120d0c;
+	--color-surfaceContainerLow: #201a19;
+	--color-surfaceContainer: #251e1d;
+	--color-surfaceContainerHigh: #2f2827;
+	--color-surfaceContainerHighest: #3b3332;
+	--color-info: #008eff;
+	--color-onInfo: #101a3b;
+	--color-success: #9bdac7;
+	--color-onSuccess: #184d3a;
+	--color-warning: #bfa060;
+	--color-onWarning: #4a3700;
 }