lutra 0.1.68 → 0.1.69

package/dist/components/Theme.svelte

@@ -1,104 +1,131 @@
 <script lang="ts">
-	import { browser } from "$app/environment";
-    import { onMount, setContext, type Snippet } from "svelte";
-    import { defaultConfig, type LutraConfig, type LutraRootConfig } from "../config.js";
-    import { getContextItem, LutraContext, type LutraTheme } from "../types.js";
-
-    /**
-     * @description
-     * A theme component. It is used to set the theme of the app in the root of the layout. You can also use it to set the theme of a specific section of the app.
-     */
-
-    // Destructuring props with default values
-    let {
-        theme,
-        config,
-        children
-    }: {
-        /**
-         * The theme to use. Leave undefined to use the system theme.
-         */
-        theme?: LutraTheme;
-        /**
-         * Lutra config. Leave undefined to use the default config.
-         */
-        config?: LutraRootConfig;
-        children: Snippet
-    } = $props();
-
-    // Determine if this is the root theme context
-    const root = getContextItem(LutraContext.Theme) === undefined;
-
-    // Retrieve existing configuration from context if available
-    const existingConfig = getContextItem(LutraContext.Config);
-
-    let _theme = $state(theme);
-
-    // If no config is provided, use the existing one from context or default to the defaultConfig
-    if(!config) {
-        config = existingConfig || defaultConfig;
-    }
-
-    // Set the configuration in the context for child components to access
-    setContext(LutraContext.Config, config);
-
-    // Retrieve existing theme from context if available
-    let existingTheme = getContextItem(LutraContext.Theme);
-
-    function getTheme() {
-        if(browser) {
-            return localStorage.getItem('lutra.theme') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
-        }
-        // TODO: Implement Sec-CH-Prefers-Color-Scheme header getting from context
-        return getContextItem(LutraContext.SecChPrefersColorScheme) || 'light';
-    }
-
-    // If no theme is provided, determine it from localStorage or system preferences
-    if(!theme) {
-        _theme = existingTheme || getTheme();
-    } else if(theme === 'invert') {
-        _theme = (existingTheme || getTheme()) === 'light' ? 'dark' : 'light';
-    }
-
-    onMount(() => {
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        mediaQuery.addEventListener('change', (e) => {
-            if(browser && root && !theme && !existingTheme && !localStorage.getItem('lutra.theme')) {
-                _theme = e.matches ? 'dark' : 'light';
-            } else if(root && theme === "invert") {
-                _theme = existingTheme === 'light' ? 'dark' : 'light';
-            } else if(root && !theme) {
-                _theme = existingTheme || getTheme();
-            }
-        });
-    });
-
-    // Set the theme in the context for child components to access
-    setContext(LutraContext.Theme, theme);
+	import { BROWSER } from 'esm-env';
+	import { setContext, type Snippet } from "svelte";
+	import { getContextItem, LutraContext, type LutraTheme } from "../types.js";
+	import { theme as themeState } from "../state/theme.svelte.js";
+
+	/**
+	 * @description
+	 * Provides light/dark theming at the root layout level, and can override the theme for nested sections.
+	 * At the root level, sets the `color-scheme` on the document and manages the `theme-color` meta tag.
+	 * Nested instances can invert or force a specific theme via `color-scheme` scoping.
+	 * @example
+	 * <Theme theme="dark">
+	 *     <p>This section is always dark.</p>
+	 * </Theme>
+	 */
+
+	let {
+		theme,
+		themeColor,
+		children
+	}: {
+		/** The theme to use. Leave undefined to use the system theme. */
+		theme?: LutraTheme;
+		/**
+		 * Theme color for the theme-color meta tag. Only used in the root theme.
+		 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+		 */
+		themeColor?: {
+			light?: string;
+			dark?: string;
+		};
+		children: Snippet
+	} = $props();
+
+	const isRoot = getContextItem(LutraContext.Theme)?.() === undefined;
+
+	const parentTheme = isRoot ? undefined : getContextItem(LutraContext.Theme);
+
+	/** Effective theme for root, derived reactively from theme state. */
+	const rootTheme = $derived.by(() => {
+		if (!theme || theme === "system") return themeState.current;
+		if (theme === "invert") return themeState.current === "light" ? "dark" : "light";
+		return theme as "light" | "dark";
+	});
+
+	/** Effective theme for nested (non-root) Theme components. */
+	const nestedTheme = $derived.by(() => {
+		if (isRoot) return undefined;
+		const parent = parentTheme?.() as "light" | "dark" | undefined;
+		if (!theme || theme === "system") return parent;
+		if (theme === "invert") return parent === "light" ? "dark" : "light";
+		return theme as "light" | "dark";
+	});
+
+	setContext(
+		LutraContext.Theme,
+		isRoot ? () => rootTheme : () => nestedTheme
+	);
+
+	if (isRoot) {
+		$effect(() => {
+			document.documentElement.classList.remove("light", "dark");
+			document.documentElement.classList.add(rootTheme);
+		});
+	}
 </script>
 
 <svelte:head>
-    {#if !root}
-        <meta name="theme-color" content="{theme === 'dark' ? (config?.themeColor?.dark || '#000') : (config?.themeColor?.light || '#fff')}" />
-    {/if}
+	{#if isRoot}
+		{#if BROWSER && rootTheme === "dark"}
+			<meta name="theme-color" content={themeColor?.dark || "#000"} />
+		{:else if BROWSER && rootTheme === "light"}
+			<meta name="theme-color" content={themeColor?.light || "#fff"} />
+		{:else}
+			<meta name="theme-color" media="(prefers-color-scheme: light)" content={themeColor?.light || "#fff"} />
+			<meta name="theme-color" media="(prefers-color-scheme: dark)" content={themeColor?.dark || "#000"} />
+		{/if}
+		<script>
+			{
+				const theme = localStorage.getItem('lutra.theme');
+
+				document.documentElement.classList.add(
+					!theme || theme === 'system'
+						? window.matchMedia('(prefers-color-scheme: dark)').matches
+							? 'dark'
+							: 'light'
+						: theme
+				);
+			}
+		</script>
+	{/if}
 </svelte:head>
 
-<div class="Theme {_theme}" class:root>
-    {@render children()}
+<div
+	class="Theme"
+	class:light={!isRoot && nestedTheme === "light" && (theme !== "invert" || BROWSER)}
+	class:dark={!isRoot && nestedTheme === "dark" && (theme !== "invert" || BROWSER)}
+	class:invert={!isRoot && theme === "invert"}
+	class:isRoot
+>
+	{@render children()}
 </div>
 
 <style>
-    @layer base {
-        .Theme {
-            display: contents;
-            color-scheme: light dark;
-        }
-        .Theme.light {
-            color-scheme: only light;
-        }
-        .Theme.dark {
-            color-scheme: only dark;
-        }
-    }
+	.Theme {
+		display: contents;
+	}
+	.Theme.light {
+		color-scheme: only light;
+	}
+	.Theme.dark {
+		color-scheme: only dark;
+	}
+	/* CSS-only inversion fallback (SSR / no-JS).
+	   Active only when JS has not yet added .light/.dark to the element. */
+	:global(html:not(.light):not(.dark)) .invert:not(.light):not(.dark) {
+		@media (prefers-color-scheme: dark) {
+			color-scheme: only light;
+		}
+		@media (prefers-color-scheme: light) {
+			color-scheme: only dark;
+		}
+	}
+	:global(html.dark) .invert:not(.light):not(.dark) {
+		color-scheme: only light;
+	}
+	:global(html.light) .invert:not(.light):not(.dark) {
+		color-scheme: only dark;
+	}
 </style>
-

package/dist/components/Theme.svelte.d.ts

@@ -1,15 +1,16 @@
 import { type Snippet } from "svelte";
-import { type LutraRootConfig } from "../config.js";
 import { type LutraTheme } from "../types.js";
 type $$ComponentProps = {
-    /**
-     * The theme to use. Leave undefined to use the system theme.
-     */
+    /** The theme to use. Leave undefined to use the system theme. */
     theme?: LutraTheme;
     /**
-     * Lutra config. Leave undefined to use the default config.
+     * Theme color for the theme-color meta tag. Only used in the root theme.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
      */
-    config?: LutraRootConfig;
+    themeColor?: {
+        light?: string;
+        dark?: string;
+    };
     children: Snippet;
 };
 declare const Theme: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Toast.svelte

@@ -5,9 +5,12 @@
 	import { removeToast } from "./toasts.svelte.js";
 
 	/**
-	 * A styled toast/notification card.
-	 * Uses the same surface styling system as Popover and Modal.
-	 * Typically used via addToast() but can be used standalone.
+	 * @description
+	 * A styled toast/notification card. Uses the shared surface styling system (background, border, shadow).
+	 * Typically created via `addToast()` but can be used standalone. Automatically adapts its grid layout
+	 * based on whether an icon and/or actions are present.
+	 * @example
+	 * <Toast title="Saved" content="Your changes have been saved." />
 	 */
 	let {
 		id,
@@ -42,7 +45,7 @@
 	}
 </script>
 
-<div class="Toast" class:has-icon={!!icon} class:has-actions={!!actions}>
+<div class="Toast">
 	{#if !actions}
 		<Close position="top right" onclick={handleClose} />
 	{/if}
@@ -55,7 +58,7 @@
 	
 	<div class="Content">
 		{#if title}
-			<strong class="Title">{title}</strong>
+			<h5 class="Title">{title}</h5>
 		{/if}
 		{#if content}
 			<p class="Text">{content}</p>
@@ -95,15 +98,15 @@
 		}
 	}
 
-	.Toast.has-icon {
+	.Toast:has(> .Icon) {
 		grid-template-columns: auto 1fr;
 	}
 
-	.Toast.has-actions {
+	.Toast:has(> .Actions) {
 		grid-template-columns: 1fr auto;
 	}
 
-	.Toast.has-icon.has-actions {
+	.Toast:has(> .Icon):has(> .Actions) {
 		grid-template-columns: auto 1fr auto;
 	}
 

package/dist/components/Tooltip.svelte

@@ -28,7 +28,12 @@
      * Displays on hover (with delay) or focus (immediate).
      * Supports "warming" - if a tooltip was recently shown, new tooltips appear instantly.
      * @supports prefers-reduced-motion
-     * @cssprop --delay - Hover delay before showing (default: 0.5s)
+     * @cssprop --delay - Hover delay before showing. (Default: 0.4s)
+     * @cssprop --tooltip-offset - Gap between the anchor and the tooltip. (Default: var(--space-xs))
+     * @cssprop --tooltip-padding-block - Block padding of the tooltip. (Default: var(--space-xxs))
+     * @cssprop --tooltip-padding-inline - Inline padding of the tooltip. (Default: var(--space-xs))
+     * @cssprop --tooltip-font-size - Font size of the tooltip. (Default: max(0.75rem, 11px))
+     * @cssprop --tooltip-max-width - Maximum width of the tooltip. (Default: 25ch)
      */
     let {
         children,
@@ -99,17 +104,18 @@
         position: fixed;
         position-area: block-start center;
         position-try-fallbacks: flip-block;
-        margin-block-end: 0.5rem;
+        margin-block-end: var(--tooltip-offset, var(--space-xs));
         background: var(--tooltip-background, var(--surface-background));
         border: var(--tooltip-border, var(--surface-border));
         border-radius: var(--tooltip-border-radius, var(--surface-border-radius));
         box-shadow: var(--tooltip-shadow, var(--surface-shadow));
-        padding: 0.35rem 0.5rem;
-        font-size: max(0.75rem, 11px);
-        line-height: 1.35;
-        font-weight: 500;
+        padding-block: var(--tooltip-padding-block, var(--space-xxs));
+        padding-inline: var(--tooltip-padding-inline, var(--space-xs));
+        font-size: var(--tooltip-font-size, max(0.75rem, 11px));
+        line-height: var(--font-line-height-tight);
+        font-weight: var(--font-weight-normal);
         color: var(--tooltip-color, var(--text-color-p));
-        max-width: 25ch;
+        max-width: var(--tooltip-max-width, 25ch);
         width: max-content;
         text-align: center;
         opacity: 0;
@@ -117,12 +123,12 @@
     }
 
     .TooltipContent :global(code) {
-        font-weight: 600;
+        font-weight: var(--font-weight-medium);
     }
 
     .TooltipContent :global(strong),
     .TooltipContent :global(b) {
-        font-weight: 700;
+        font-weight: var(--font-weight-semibold);
     }
 
     .TooltipTrigger {
@@ -140,7 +146,8 @@
     }
 
 
-    .Tooltip:has(.TooltipTrigger:focus-visible) .TooltipContent {
+    .Tooltip:has(.TooltipTrigger :focus-visible) .TooltipContent,
+    .Tooltip:focus-within .TooltipContent {
         opacity: 1;
         transition-delay: 0s;
     }

package/dist/css/1-props.css

@@ -37,11 +37,15 @@
 @property --space-900 { syntax: "<length>"; inherits: true; initial-value: 120px; }
 @property --space-1000 { syntax: "<length>"; inherits: true; initial-value: 128px; }
 
+@property --space-xxs { syntax: "<length>"; inherits: true; initial-value: 4px; }
 @property --space-xs { syntax: "<length>"; inherits: true; initial-value: 4px; }
 @property --space-sm { syntax: "<length>"; inherits: true; initial-value: 8px; }
 @property --space-md { syntax: "<length>"; inherits: true; initial-value: 16px; }
-@property --space-lg { syntax: "<length>"; inherits: true; initial-value: 32px; }
-@property --space-xl { syntax: "<length>"; inherits: true; initial-value: 64px; }
+@property --space-lg { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --space-xl { syntax: "<length>"; inherits: true; initial-value: 32px; }
+@property --space-xxl { syntax: "<length>"; inherits: true; initial-value: 48px; }
+@property --space-xxxl { syntax: "<length>"; inherits: true; initial-value: 64px; }
+@property --space-xxxxl { syntax: "<length>"; inherits: true; initial-value: 80px; }
 
 /**
  * Fonts
@@ -54,17 +58,17 @@
 @property --font-size-base      { syntax: "<length>"; inherits: true; initial-value: 16px; }
 
 /* font size */
-@property --font-size-xs { syntax: "<length>"; inherits: true; initial-value: 0.75em; }
-@property --font-size-sm { syntax: "<length>"; inherits: true; initial-value: 0.875em; }
-@property --font-size-p  { syntax: "<length>"; inherits: true; initial-value: 1em; }
-@property --font-size-h6 { syntax: "<length>"; inherits: true; initial-value: 1.25em; }
-@property --font-size-h5 { syntax: "<length>"; inherits: true; initial-value: 1.5em; }
-@property --font-size-h4 { syntax: "<length>"; inherits: true; initial-value: 1.75em; }
-@property --font-size-h3 { syntax: "<length>"; inherits: true; initial-value: 2em; }
-@property --font-size-h2 { syntax: "<length>"; inherits: true; initial-value: 2.5em; }
-@property --font-size-h1 { syntax: "<length>"; inherits: true; initial-value: 3em; }
-@property --font-size-hero { syntax: "<length>"; inherits: true; initial-value: 4em; }
-@property --font-size-jumbo { syntax: "<length>"; inherits: true; initial-value: 5em; }
+@property --font-size-xs { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --font-size-sm { syntax: "<length>"; inherits: true; initial-value: 14px; }
+@property --font-size-p  { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --font-size-h6 { syntax: "<length>"; inherits: true; initial-value: 20px; }
+@property --font-size-h5 { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --font-size-h4 { syntax: "<length>"; inherits: true; initial-value: 28px; }
+@property --font-size-h3 { syntax: "<length>"; inherits: true; initial-value: 32px; }
+@property --font-size-h2 { syntax: "<length>"; inherits: true; initial-value: 40px; }
+@property --font-size-h1 { syntax: "<length>"; inherits: true; initial-value: 48px; }
+@property --font-size-hero { syntax: "<length>"; inherits: true; initial-value: 64px; }
+@property --font-size-jumbo { syntax: "<length>"; inherits: true; initial-value: 80px; }
 
 /* font weight */
 @property --font-weight-thin { syntax: "<number>"; inherits: true; initial-value: 300; }
@@ -108,8 +112,8 @@
 
 /* links */
 
-@property --link-text-decoration       { syntax: "<string>"; inherits: true; initial-value: none; }
-@property --link-text-decoration-hover { syntax: "<string>"; inherits: true; initial-value: underline; }
+@property --link-text-decoration       { syntax: "*"; inherits: true; initial-value: none; }
+@property --link-text-decoration-hover { syntax: "*"; inherits: true; initial-value: underline; }
 
 @property --link-color                 { syntax: "*"; inherits: true; initial-value: #2563eb; }
 @property --link-color-visited         { syntax: "*"; inherits: true; initial-value: #7c3aed; }
@@ -156,13 +160,22 @@
  * Forms
  */
 
-@property --form-background { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #ffffff; }
-@property --form-background-actions { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #ffffff; }
+@property --form-background { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --form-background-actions { syntax: "*"; inherits: true; initial-value: #ffffff; }
 @property --form-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --form-border-color { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #d1d5db; }
+@property --form-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
 @property --form-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --form-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 
+@property --form-field-gap { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --form-label-gap { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --form-section-gap { syntax: "<length>"; inherits: true; initial-value: 32px; }
+@property --form-title-gap { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --form-title-padding-block-end { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --form-field-inside-gap { syntax: "<length>"; inherits: true; initial-value: 4px; }
+@property --form-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --form-padding-inline { syntax: "<length>"; inherits: true; initial-value: 32px; }
+
 /**
  * Fields
  */
@@ -218,7 +231,7 @@
 @property --field-color-loading        { syntax: "*"; inherits: true; initial-value: #7c3aed; }
 
 @property --field-label-color          { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --field-label-font-size      { syntax: "<length>"; inherits: true; initial-value: 1em; }
+@property --field-label-font-size      { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --field-label-font-weight    { syntax: "<number>"; inherits: true; initial-value: 600; }
 
 @property --field-placeholder-color    { syntax: "*"; inherits: true; initial-value: #999999; }
@@ -343,13 +356,13 @@
  */
 
 @property --shadow-color { syntax: "*"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
-@property --shadow-base { syntax: "<shadow>"; inherits: true; initial-value: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
+@property --shadow-base { syntax: "*"; inherits: true; initial-value: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
 
 /**
  * Code
  */
 
-@property --code-background { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #f8fafc; }
+@property --code-background { syntax: "*"; inherits: true; initial-value: #f8fafc; }
 @property --code-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
 @property --code-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
 @property --code-border-size { syntax: "<length>"; inherits: true; initial-value: 0; }
@@ -363,18 +376,18 @@
  * Backgrounds
  */
 
-@property --background-body { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #ffffff; }
-@property --background-main { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #ffffff; }
-@property --background-main-subtle { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #f8fafc; }
-
-@property --background-active { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #2563eb; }
-@property --background-inactive { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #f3f4f6; }
-@property --background-disabled { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #f3f4f6; }
-@property --background-focus { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #2563eb; }
-@property --background-invalid { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #fef2f2; }
-@property --background-valid { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #dcfce7; }
-@property --background-success { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #dcfce7; }
-@property --background-danger { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #fef2f2; }
+@property --background-body { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --background-main { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --background-main-subtle { syntax: "*"; inherits: true; initial-value: #f8fafc; }
+
+@property --background-active { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --background-inactive { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
+@property --background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
+@property --background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --background-invalid { syntax: "*"; inherits: true; initial-value: #fef2f2; }
+@property --background-valid { syntax: "*"; inherits: true; initial-value: #dcfce7; }
+@property --background-success { syntax: "*"; inherits: true; initial-value: #dcfce7; }
+@property --background-danger { syntax: "*"; inherits: true; initial-value: #fef2f2; }
 @property --background-warn { syntax: "<color>"; inherits: true; initial-value: #fefce8; }
 @property --background-info { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
 @property --background-selected { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
@@ -425,7 +438,7 @@
 @property --tooltip-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
 @property --tooltip-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
 @property --tooltip-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --tooltip-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15); }
+@property --tooltip-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 8px rgba(0, 0, 0, 0.15); }
 
 /**
  * Toast (inherits from surface system)
@@ -434,17 +447,17 @@
 @property --toast-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 @property --toast-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
 @property --toast-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --toast-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
-@property --toast-padding-inline { syntax: "<length>"; inherits: true; initial-value: 1rem; }
-@property --toast-padding-block { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
-@property --toast-gap { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
-@property --toast-min-width { syntax: "<length>"; inherits: true; initial-value: 20rem; }
-@property --toast-max-width { syntax: "<length>"; inherits: true; initial-value: 28rem; }
+@property --toast-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
+@property --toast-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --toast-padding-block { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --toast-gap { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --toast-min-width { syntax: "<length>"; inherits: true; initial-value: 320px; }
+@property --toast-max-width { syntax: "<length>"; inherits: true; initial-value: 448px; }
 @property --toast-title-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
 @property --toast-title-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
 @property --toast-text-color { syntax: "*"; inherits: true; initial-value: #666666; }
-@property --toast-icon-size { syntax: "<length>"; inherits: true; initial-value: 1.25rem; }
-@property --toast-offset { syntax: "<length>"; inherits: true; initial-value: 1rem; }
+@property --toast-icon-size { syntax: "<length>"; inherits: true; initial-value: 20px; }
+@property --toast-offset { syntax: "<length>"; inherits: true; initial-value: 16px; }
 
 /**
  * Menu
@@ -490,14 +503,14 @@
 @property --modal-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --modal-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 @property --modal-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --modal-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
+@property --modal-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
 
 @property --modal-padding-inline { syntax: "<length>"; inherits: true; initial-value: 24px; }
 @property --modal-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
 @property --modal-width { syntax: "*"; inherits: true; initial-value: fit-content; }
 @property --modal-min-width { syntax: "*"; inherits: true; initial-value: auto; }
-@property --modal-max-width { syntax: "*"; inherits: true; initial-value: 40rem; }
-@property --modal-max-height { syntax: "*"; inherits: true; initial-value: 80svh; }
+@property --modal-max-width { syntax: "*"; inherits: true; initial-value: 640px; }
+@property --modal-max-height { syntax: "*"; inherits: true; initial-value: 600px; }
 @property --modal-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
 
 @property --modal-actions-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
@@ -513,7 +526,7 @@
 @property --surface-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 @property --surface-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
 @property --surface-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --surface-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
+@property --surface-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
 
 /**
  * Popover Component
@@ -522,18 +535,18 @@
 @property --popover-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 @property --popover-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
 @property --popover-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --popover-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
+@property --popover-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
 @property --popover-width { syntax: "*"; inherits: true; initial-value: max-content; }
-@property --popover-max-width { syntax: "<length>"; inherits: true; initial-value: calc(100vw - 2rem); }
-@property --popover-max-height { syntax: "<length>"; inherits: true; initial-value: calc(100vh - 2rem); }
+@property --popover-max-width { syntax: "*"; inherits: true; initial-value: 1024px; }
+@property --popover-max-height { syntax: "*"; inherits: true; initial-value: 768px; }
 
 /**
  * Overlay System
  */
 
 @property --overlay-z-index { syntax: "<integer>"; inherits: true; initial-value: 1000; }
-@property --overlay-gap { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
-@property --overlay-offset { syntax: "<length>"; inherits: true; initial-value: 1rem; }
+@property --overlay-gap { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --overlay-offset { syntax: "<length>"; inherits: true; initial-value: 16px; }
 
 /**
  * Scrim/Backdrop (shared across overlays)