windmill-components 1.558.4 → 1.596.0

package/package/components/common/button/Button.svelte

@@ -10,7 +10,7 @@ import { createTooltip } from '@melt-ui/svelte';
 import { conditionalMelt } from '../../../utils';
 import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
-let { id = '', aiId = undefined, aiDescription = undefined, size = 'md', spacingSize = size, color = 'blue', variant = 'contained', btnClasses = '', wrapperClasses = '', wrapperStyle = '', disabled = false, href = undefined, target = undefined, iconOnly = false, loadUntilNav = false, clickableWhileLoading = false, element = $bindable(undefined), nonCaptureEvent = false, propagateEvent = false, loading = $bindable(false), title = undefined, style = '', download = undefined, startIcon = undefined, endIcon = undefined, shortCut = undefined, tooltipPopover = undefined, dropdownBtnClasses = '', dropdownItems = undefined, hideDropdown = false, children, tooltip, onClick, dropdownOpen = $bindable(false), ...rest } = $props();
+let { id = '', aiId = undefined, aiDescription = undefined, size = 'md', spacingSize = size, unifiedSize = undefined, extendedSize = undefined, color = 'blue', variant = 'default', btnClasses = '', wrapperClasses = '', wrapperStyle = '', disabled = false, selected = false, href = undefined, target = undefined, iconOnly = false, loadUntilNav = false, clickableWhileLoading = false, element = $bindable(undefined), nonCaptureEvent = false, propagateEvent = false, loading = $bindable(false), title = undefined, style = '', download = undefined, startIcon = undefined, endIcon = undefined, destructive = false, shortCut = undefined, tooltipPopover = undefined, dropdownBtnClasses = '', dropdownItems = undefined, hideDropdown = false, children, tooltip, onClick, dropdownOpen = $bindable(false), dropdownWidth = undefined, ...rest } = $props();
 function computeDropdowns(menuItems) {
     const items = typeof menuItems === 'function' ? menuItems() : menuItems;
     return items.map((item) => ({
@@ -18,7 +18,8 @@ function computeDropdowns(menuItems) {
         action: item.onClick ? (e) => item.onClick?.(e) : undefined,
         icon: item.icon,
         disabled: item.disabled ?? false,
-        href: item.href
+        href: item.href,
+        tooltip: item.tooltip
     }));
 }
 export function focus() {
@@ -41,7 +42,22 @@ async function onclick(event) {
         dispatch('click', event);
     }
 }
-function getColorClass(color, variant) {
+function getStyleClass(color, variant) {
+    // Check if using new design system variants
+    if (['accent-secondary', 'accent', 'default', 'subtle'].includes(variant)) {
+        let style = destructive
+            ? ButtonType.DestructiveVariantStyles[variant]
+            : ButtonType.VariantStyles[variant];
+        // For default variant with dropdowns, remove border from button since it's on wrapper
+        if (variant === 'default' &&
+            dropdownItems &&
+            ((typeof dropdownItems === 'function' && dropdownItems().length > 0) ||
+                dropdownItems.length > 0)) {
+            style = style.replace('border border-border-light', '');
+        }
+        return style;
+    }
+    // Legacy color-based styling
     if (color in ButtonType.ColorVariants) {
         return ButtonType.ColorVariants[color][variant];
     }
@@ -49,7 +65,62 @@ function getColorClass(color, variant) {
         return color;
     }
 }
-let buttonClass = $derived(twMerge('w-full', getColorClass(color, variant), variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize][variant], 'focus-visible:ring-2 font-semibold', dropdownItems && dropdownItems.length > 0 ? 'rounded-l-md h-full' : 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex gap-2', btnClasses, 'active:opacity-80 transition-all', disabled ? '!bg-surface-disabled !text-tertiary cursor-not-allowed' : '', loading ? 'cursor-wait' : ''));
+function getSpacingClass(variant, size, spacingSize, iconOnly, unifiedSize, extendedSize) {
+    // Check if using new extended sizing system (for App editor only)
+    if (extendedSize) {
+        const horizontalPadding = iconOnly
+            ? ButtonType.ExtendedIconOnlySizingClasses[extendedSize]
+            : ButtonType.ExtendedSizingClasses[extendedSize];
+        const height = ButtonType.ExtendedHeightClasses[extendedSize];
+        return `${horizontalPadding} ${height}`;
+    }
+    // Check if using new unified sizing system
+    if (unifiedSize) {
+        const horizontalPadding = iconOnly
+            ? ButtonType.UnifiedIconOnlySizingClasses[unifiedSize]
+            : ButtonType.UnifiedSizingClasses[unifiedSize];
+        const height = ButtonType.UnifiedHeightClasses[unifiedSize];
+        return `${horizontalPadding} ${height}`;
+    }
+    // Check if using new design system variants
+    if (iconOnly) {
+        return ButtonType.IconOnlyVariantSpacingClasses[spacingSize];
+    }
+    if (['accent-secondary', 'accent', 'default', 'subtle'].includes(variant)) {
+        return ButtonType.VariantSpacingClasses[spacingSize];
+    }
+    // Legacy spacing
+    return ButtonType.SpacingClasses[spacingSize][variant];
+}
+function getDividerClass(color, variant) {
+    // Check if using new design system variants
+    if (variant === 'default') {
+        return 'border border-border-light divide-x divide-border-light';
+    }
+    else if (variant === 'accent') {
+        return 'divide-x divide-blue-100 dark:divide-blue-200';
+    }
+    else if (variant === 'accent-secondary') {
+        return 'divide-x divide-deep-blue-400 dark:divide-deep-blue-100';
+    }
+    else if (variant === 'subtle') {
+        return 'divide-x divide-transparent';
+    }
+    // Legacy color-based dividers
+    if (color in ButtonType.ColorVariants) {
+        return ButtonType.ColorVariants[color].divider;
+    }
+    return '';
+}
+let buttonClass = $derived(twMerge('w-full', getStyleClass(color, variant), variant === 'border' ? 'border' : '', extendedSize
+    ? ButtonType.ExtendedFontSizeClasses[extendedSize]
+    : ButtonType.FontSizeClasses[size], getSpacingClass(variant, size, spacingSize, iconOnly, unifiedSize, extendedSize), unifiedSize ? ButtonType.UnifiedFontSizes[unifiedSize] : '', 'focus-visible:ring-2', dropdownItems && dropdownItems.length > 0 ? 'rounded-l-md' : 'rounded-md', 'justify-center items-center text-center inline-flex gap-2', 'active:opacity-80 transition-[background-color,opacity] duration-150', disabled
+    ? ['default', 'subtle'].includes(variant)
+        ? '!text-disabled'
+        : '!bg-surface-disabled !text-disabled'
+    : '', loading ? 'cursor-wait' : '', selected && ['default', 'subtle'].includes(variant)
+    ? '!bg-surface-accent-selected !text-accent !border-border-selected'
+    : '', btnClasses));
 const iconMap = {
     xs3: 12,
     xs2: 14,
@@ -59,16 +130,11 @@ const iconMap = {
     lg: 18,
     xl: 18
 };
-const iconOnlyPadding = {
-    xs3: 'm-[0.5px] qhd:m-[1px]',
-    xs2: 'm-[1px] qhd:m-[1.125px]',
-    xs: 'm-[1px] qhd:m-[1.125px]',
-    sm: 'm-[2px] qhd:m-[2.25px]',
-    md: 'm-[2px] qhd:m-[2.25px]',
-    lg: 'm-[5px] qhd:m-[5.625px]',
-    xl: 'm-[5px] qhd:m-[5.625px]'
-};
-let lucideIconSize = $derived((iconMap[size] ?? 12) * 1);
+let lucideIconSize = $derived(extendedSize
+    ? ButtonType.ExtendedIconSizes[extendedSize]
+    : unifiedSize
+        ? ButtonType.UnifiedIconSizes[unifiedSize]
+        : (iconMap[size] ?? 12));
 const { elements: { trigger, content }, states: { open }, options: { openDelay } } = tooltipPopover
     ? createTooltip({
         positioning: {
@@ -89,16 +155,16 @@ $effect(() => {
 $effect(() => {
     $open !== undefined && dispatchIfMounted('tooltipOpen', $open);
 });
+const dividerClass = $derived(getDividerClass(color, variant));
 </script>
 
 <div
 	class={twMerge(
-		dropdownItems && dropdownItems.length > 0 && variant === 'contained'
-			? ButtonType.ColorVariants[color].divider
-			: '',
+		dropdownItems && dropdownItems.length > 0 ? dividerClass : '',
+		'shrink-0',
 		wrapperClasses,
-		'flex flex-row',
-		disabled ? 'divide-text-disabled' : ''
+		'flex flex-row rounded-md',
+		disabled ? 'divide-text-disabled cursor-not-allowed' : ''
 	)}
 	style={wrapperStyle}
 	data-interactive
@@ -135,10 +201,10 @@ $effect(() => {
 			{style}
 		>
 			{#if loading}
-				<Loader2 class={twMerge('animate-spin', iconOnlyPadding[size])} size={lucideIconSize} />
+				<Loader2 class={twMerge('animate-spin shrink-0')} size={lucideIconSize} />
 			{:else if startIcon?.icon}
 				<startIcon.icon
-					class={twMerge(startIcon?.classes, iconOnlyPadding[size])}
+					class={twMerge('shrink-0', startIcon?.classes)}
 					size={lucideIconSize}
 					{...startIcon.props}
 				/>
@@ -148,15 +214,17 @@ $effect(() => {
 				{@render children?.()}
 			{/if}
 			{#if endIcon?.icon}
-				<endIcon.icon
-					class={twMerge(endIcon?.classes, iconOnlyPadding[size])}
-					size={lucideIconSize}
-				/>
+				<endIcon.icon class={twMerge('shrink-0', endIcon?.classes)} size={lucideIconSize} />
 			{/if}
 			{#if shortCut && !shortCut.hide}
-				<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+				<div
+					class={twMerge(
+						'flex flex-row items-center !text-md opacity-60 gap-0',
+						ButtonType.UnifiedFontSizes[size]
+					)}
+				>
 					{#if shortCut.withoutModifier !== true}{getModifierKey()}{/if}{#if shortCut.Icon}<shortCut.Icon
-							class="w-4 h-4"
+							class="w-4 h-4 shrink-0"
 							size={lucideIconSize}
 						/>{:else}{shortCut.key}{/if}
 				</div>
@@ -182,10 +250,10 @@ $effect(() => {
 			{...$trigger}
 		>
 			{#if loading}
-				<Loader2 class={twMerge('animate-spin', iconOnlyPadding[size])} size={lucideIconSize} />
+				<Loader2 class={twMerge('animate-spin shrink-0')} size={lucideIconSize} />
 			{:else if startIcon?.icon}
 				<startIcon.icon
-					class={twMerge(startIcon?.classes, iconOnlyPadding[size])}
+					class={twMerge('shrink-0', startIcon?.classes)}
 					size={lucideIconSize}
 					{...startIcon.props}
 				/>
@@ -195,15 +263,18 @@ $effect(() => {
 				{@render children?.()}
 			{/if}
 			{#if endIcon?.icon}
-				<endIcon.icon
-					class={twMerge(endIcon?.classes, iconOnlyPadding[size])}
-					size={lucideIconSize}
-				/>
+				<endIcon.icon class={twMerge('shrink-0', endIcon?.classes)} size={lucideIconSize} />
 			{/if}
 			{#if shortCut && !shortCut.hide}
 				{@const Icon = shortCut.Icon}
-				<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+				<div
+					class={twMerge(
+						'flex flex-row items-center !text-md opacity-60 gap-0',
+						ButtonType.UnifiedFontSizes[size]
+					)}
+				>
 					{#if shortCut.withoutModifier !== true}{getModifierKey()}{/if}{#if shortCut.Icon}<Icon
+							class="shrink-0"
 							size={lucideIconSize}
 						/>{:else}{shortCut.key}{/if}
 				</div>
@@ -228,6 +299,7 @@ $effect(() => {
 			on:close={() => dispatch('dropdownOpen', false)}
 			bind:open={dropdownOpen}
 			enableFlyTransition
+			customWidth={dropdownWidth}
 		>
 			{#snippet buttonReplacement()}
 				<div
@@ -236,11 +308,13 @@ $effect(() => {
 						'rounded-md m-0 p-0 center-center h-full',
 						variant === 'border' ? 'border-0 border-r border-y ' : 'border-0',
 						'rounded-r-md !rounded-l-none',
-						size === 'xs2' || size === 'xs' ? '!w-8' : '!w-10',
+						size === 'xs2' || size === 'xs' || unifiedSize === 'md' || unifiedSize === 'sm'
+							? '!w-8'
+							: '!w-10',
 						dropdownBtnClasses
 					)}
 				>
-					<ChevronDown size={lucideIconSize} />
+					<ChevronDown class="shrink-0" size={lucideIconSize} />
 				</div>
 			{/snippet}
 		</Dropdown>

package/package/components/common/button/Button.svelte.d.ts

@@ -6,19 +6,50 @@ type MenuItem = {
     href?: string;
     icon?: any;
     disabled?: boolean;
+    tooltip?: string;
 };
 interface Props {
     id?: string;
     aiId?: string | undefined;
     aiDescription?: string | undefined;
+    /**
+     * @deprecated Use `unifiedSize` instead
+     */
     size?: ButtonType.Size;
+    /**
+     * @deprecated Use `unifiedSize` instead
+     */
     spacingSize?: ButtonType.Size;
+    /**
+     * Unified sizing: sm (28px), md (32px), lg (40px)
+     */
+    unifiedSize?: ButtonType.UnifiedSize;
+    /**
+     * @description Extended size for App editor only
+     */
+    extendedSize?: ButtonType.ExtendedSize;
+    /**
+     * @deprecated Use `variant` instead
+     */
     color?: ButtonType.Color | string;
+    /**
+     * Button style: accent, accent-secondary, default, subtle
+     */
     variant?: ButtonType.Variant;
+    /**
+     * Additional classes. Do NOT use for colors/fonts - use for layout only
+     */
     btnClasses?: string;
+    /**
+     * Wrapper classes. Do NOT use for colors/fonts - use for positioning only
+     */
     wrapperClasses?: string;
+    /**
+     * Wrapper styles. Avoid unless absolutely necessary
+     */
     wrapperStyle?: string;
     disabled?: boolean;
+    selected?: boolean;
     href?: string | undefined;
     target?: '_self' | '_blank' | undefined;
     iconOnly?: boolean;
@@ -33,6 +64,7 @@ interface Props {
     download?: string | undefined;
     startIcon?: ButtonType.Icon | undefined;
     endIcon?: ButtonType.Icon | undefined;
+    destructive?: boolean;
     shortCut?: {
         key?: string;
         hide?: boolean;
@@ -53,6 +85,7 @@ interface Props {
     tooltip?: import('svelte').Snippet;
     [key: string]: any;
     dropdownOpen?: boolean;
+    dropdownWidth?: number | undefined;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/common/button/ConnectionButton.svelte

@@ -64,13 +64,15 @@ $effect(() => {
 	>
 		<Button
 			size={small ? 'xs' : 'md'}
-			variant="border"
-			color="light"
+			variant="default"
 			title="Connect"
 			on:click={() => handleConnect(true)}
 			{id}
 			wrapperClasses={twMerge(btnWrapperClasses, selected ? 'opacity-100' : '')}
-			btnClasses={small ? 'p-0' : ''}
+			btnClasses={twMerge(
+				small ? 'p-0' : '',
+				isOpen && selected ? 'bg-surface hover:bg-surface' : ''
+			)}
 		>
 			<Plug size={14} />
 		</Button>

package/package/components/common/button/RefreshButton.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">import { Button, ButtonType } from '..';
 import { RefreshCw } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
-import { twMerge } from 'tailwind-merge';
-let { loading, size = 'xs2', light = false } = $props();
+let { loading, size = 'md', onClick } = $props();
 let buttonHover = $state(false);
 </script>
 
@@ -11,15 +10,11 @@ let buttonHover = $state(false);
 		on:mouseenter={() => (buttonHover = true)}
 		on:mouseleave={() => (buttonHover = false)}
 		color="light"
-		{size}
-		variant="border"
-		on:click
-	>
-		<RefreshCw
-			class={twMerge(loading ? 'animate-spin ' : '', light ? 'text-secondary' : '')}
-			size="14"
-		/>
-	</Button>
+		unifiedSize={size}
+		variant="subtle"
+		{onClick}
+		startIcon={{ icon: RefreshCw, props: { class: loading ? 'animate-spin' : '' } }}
+	></Button>
 	{#snippet text()}
 		{#if loading}
 			{#if buttonHover}

package/package/components/common/button/RefreshButton.svelte.d.ts

@@ -1,26 +1,10 @@
 import { ButtonType } from '..';
 interface Props {
     loading: boolean;
-    size?: ButtonType.Size;
+    size?: ButtonType.UnifiedSize;
     light?: boolean;
+    onClick?: () => void;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RefreshButton: $$__sveltets_2_IsomorphicComponent<Props, {
-    click: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type RefreshButton = InstanceType<typeof RefreshButton>;
+declare const RefreshButton: import("svelte").Component<Props, {}, "">;
+type RefreshButton = ReturnType<typeof RefreshButton>;
 export default RefreshButton;

package/package/components/common/button/RoundIconButton.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">export let color = 'light';
 export let border = false;
 $: colorClasses = {
-    light: 'text-tertiary bg-surface hover:bg-surface-hover text-tertiary',
-    dark: 'text-tertiary hover:bg-surface-hover-dark text-tertiary'
+    light: 'text-primary bg-surface hover:bg-surface-hover text-primary',
+    dark: 'text-primary hover:bg-surface-hover-dark text-primary'
 }[color ?? 'light'];
 </script>
 

package/package/components/common/button/UndoRedo.svelte

@@ -9,24 +9,20 @@ const dispatch = createEventDispatcher();
 <div class="flex">
 	<Button
 		title="Undo"
-		variant="border"
-		color="light"
-		size="xs"
+		variant="default"
 		btnClasses="!min-h-[30px] !rounded-r-none"
 		on:click={() => dispatch('undo')}
+		startIcon={{ icon: Undo }}
+		iconOnly
 		{...undoProps}
-	>
-		<Undo size={14} />
-	</Button>
+	></Button>
 	<Button
 		title="Redo"
-		variant="border"
-		color="light"
-		size="xs"
+		variant="default"
 		btnClasses="!min-h-[30px] !rounded-l-none !border-l-0"
 		on:click={() => dispatch('redo')}
+		startIcon={{ icon: Redo }}
+		iconOnly
 		{...redoProps}
-	>
-		<Redo size={14} />
-	</Button>
+	></Button>
 </div>

package/package/components/common/button/model.d.ts

@@ -1,21 +1,45 @@
-export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray", "none"];
+import type { IconType } from '../../../utils';
+export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray", "none", "marine", "nord"];
 export declare namespace ButtonType {
+    /**
+     * @deprecated Use `UnifiedSize` instead
+     */
     type Size = 'xs3' | 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    type UnifiedSize = 'xs' | 'sm' | 'md' | 'lg';
+    type ExtendedSize = 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * @deprecated Use `Variant` instead
+     */
     type Color = 'blue' | 'red' | 'dark' | 'light' | 'green' | 'gray' | 'none' | 'marine' | 'nord';
-    type Variant = 'contained' | 'border' | 'divider';
+    type Variant = 'contained' | 'border' | 'divider' | 'accent-secondary' | 'accent' | 'default' | 'subtle';
     type Target = '_self' | '_blank';
     type Element = HTMLButtonElement | HTMLAnchorElement;
     interface Icon {
-        icon?: any | undefined;
+        icon?: IconType | undefined;
         classes?: string;
         faIcon?: any | undefined;
         props?: any;
     }
     const FontSizeClasses: Record<ButtonType.Size, string>;
-    const SpacingClasses: Record<ButtonType.Size, Record<ButtonType.Variant, string>>;
+    const SpacingClasses: Record<ButtonType.Size, Record<'contained' | 'border' | 'divider', string>>;
     interface ItemProps {
         size: Size;
         color: Color;
     }
-    const ColorVariants: Record<ButtonType.Color, Record<ButtonType.Variant, string>>;
+    const ColorVariants: Record<ButtonType.Color, Record<'contained' | 'border' | 'divider', string>>;
+    const VariantStyles: Record<'accent-secondary' | 'accent' | 'default' | 'subtle', string>;
+    const DestructiveVariantStyles: Record<'accent-secondary' | 'accent' | 'default' | 'subtle', string>;
+    const VariantSpacingClasses: Record<ButtonType.Size, string>;
+    const IconOnlyVariantSpacingClasses: Record<ButtonType.Size, string>;
+    const UnifiedSizingClasses: Record<ButtonType.UnifiedSize, string>;
+    const UnifiedIconOnlySizingClasses: Record<ButtonType.UnifiedSize, string>;
+    const UnifiedMinHeightClasses: Record<ButtonType.UnifiedSize, string>;
+    const UnifiedHeightClasses: Record<ButtonType.UnifiedSize, string>;
+    const UnifiedIconSizes: Record<ButtonType.UnifiedSize, number>;
+    const UnifiedFontSizes: Record<ButtonType.UnifiedSize, string>;
+    const ExtendedSizingClasses: Record<ButtonType.ExtendedSize, string>;
+    const ExtendedIconOnlySizingClasses: Record<ButtonType.ExtendedSize, string>;
+    const ExtendedHeightClasses: Record<ButtonType.ExtendedSize, string>;
+    const ExtendedIconSizes: Record<ButtonType.ExtendedSize, number>;
+    const ExtendedFontSizeClasses: Record<ButtonType.ExtendedSize, string>;
 }

package/package/components/common/button/model.js

@@ -1,14 +1,24 @@
-export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray', 'none'];
+export const BUTTON_COLORS = [
+    'blue',
+    'red',
+    'dark',
+    'light',
+    'green',
+    'gray',
+    'none',
+    'marine',
+    'nord'
+];
 export var ButtonType;
 (function (ButtonType) {
     ButtonType.FontSizeClasses = {
         xs3: 'text-2xs',
         xs2: 'text-xs',
         xs: 'text-xs',
-        sm: 'text-sm',
-        md: 'text-md',
-        lg: 'text-lg',
-        xl: 'text-xl'
+        sm: 'text-xs',
+        md: 'text-xs',
+        lg: 'text-xs',
+        xl: 'text-xs'
     };
     ButtonType.SpacingClasses = {
         xs3: {
@@ -54,9 +64,9 @@ export var ButtonType;
             divider: ''
         },
         blue: {
-            border: 'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus-visible:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus-visible:bg-frost-100 focus-visible:dark:text-frost-100 dark:focus-visible:bg-frost-900 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus-visible:text-frost-700 focus-visible:ring-frost-300',
-            contained: 'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300 dark:bg-frost-500/90 dark:hover:bg-frost-600/90',
-            divider: 'divide-x divide-frost-600'
+            border: 'border-blue-500 dark:border-blue-300 hover:border-blue-700 focus-visible:border-blue-700 bg-surface hover:bg-blue-100 dark:hover:bg-blue-900/40 focus-visible:bg-blue-100 focus-visible:dark:text-blue-100 dark:focus-visible:bg-blue-900 text-blue-500 dark:text-blue-300 dark:hover:text-blue-200 hover:text-blue-700 focus-visible:text-blue-700 focus-visible:ring-blue-300',
+            contained: 'bg-blue-300 hover:bg-blue-400 focus-visible:bg-blue-500 text-white focus-visible:ring-blue-300',
+            divider: 'divide-x divide-blue-600'
         },
         marine: {
             border: 'border-marine-300 dark:border-marine-200 hover:border-marine-500 dark:hover:border-marine-400 focus-visible:border-marine-500 bg-surface hover:bg-marine-500 dark:hover:bg-marine-400 focus-visible:bg-marine-100 focus-visible:dark:text-marine-50 dark:focus-visible:bg-marine-500 text-marine-50 dark:text-marine-50 dark:hover:text-marine-50 hover:text-marine-50 focus-visible:text-marine-300 focus-visible:ring-marine-200',
@@ -94,4 +104,112 @@ export var ButtonType;
             divider: 'divide-x divide-gray-800 dark:divide-gray-200'
         }
     };
+    ButtonType.VariantStyles = {
+        'accent-secondary': 'bg-surface-accent-secondary hover:bg-surface-accent-secondary-hover focus-visible:bg-surface-accent-secondary-clicked text-white dark:text-deep-blue-900 focus-visible:ring-blue-300',
+        accent: 'bg-surface-accent-primary hover:bg-surface-accent-hover focus-visible:bg-surface-accent-clicked text-white focus-visible:ring-blue-300',
+        default: 'border border-border-light bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-blue-300',
+        subtle: 'bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-blue-300'
+    };
+    ButtonType.DestructiveVariantStyles = {
+        'accent-secondary': 'bg-red-600 hover:bg-red-700 focus-visible:bg-red-700 text-white focus-visible:ring-red-300',
+        accent: 'bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 focus-visible:bg-red-700 text-white focus-visible:ring-red-300',
+        default: 'border border-border-light bg-transparent hover:bg-red-500 dark:hover:bg-red-600 hover:text-white dark:hover:bg-red-600 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300',
+        subtle: 'bg-transparent hover:bg-red-500 hover:text-white dark:hover:bg-red-600 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300'
+    };
+    ButtonType.VariantSpacingClasses = {
+        xs3: 'px-0.5 py-[1px]',
+        xs2: 'px-2 py-[4px]',
+        xs: 'px-3 py-[7px]',
+        sm: 'px-3 py-[7px]',
+        md: 'px-3 py-[7px]',
+        lg: 'px-4 py-[9px]',
+        xl: 'px-4 py-[9px]'
+    };
+    ButtonType.IconOnlyVariantSpacingClasses = {
+        xs3: 'px-0.5 py-[1px]',
+        xs2: 'px-1 py-[4px]',
+        xs: 'px-2 py-[7px]',
+        sm: 'px-2 py-[7px]',
+        md: 'px-2 py-[7px]',
+        lg: 'px-2.5 py-[9px]',
+        xl: 'px-2.5 py-[9px]'
+    };
+    // New unified sizing system
+    ButtonType.UnifiedSizingClasses = {
+        xs: 'px-1',
+        sm: 'px-2', // Regular horizontal padding
+        md: 'px-4',
+        lg: 'px-6'
+    };
+    ButtonType.UnifiedIconOnlySizingClasses = {
+        xs: 'px-1',
+        sm: 'px-2', // Square padding for icon-only (same as width padding)
+        md: 'px-2',
+        lg: 'px-4'
+    };
+    ButtonType.UnifiedMinHeightClasses = {
+        xs: 'min-h-5',
+        sm: 'min-h-7',
+        md: 'min-h-8',
+        lg: 'min-h-10'
+    };
+    ButtonType.UnifiedHeightClasses = {
+        xs: 'h-5',
+        sm: 'h-7',
+        md: 'h-8',
+        lg: 'h-10'
+    };
+    ButtonType.UnifiedIconSizes = {
+        xs: 12,
+        sm: 13,
+        md: 14,
+        lg: 18
+    };
+    ButtonType.UnifiedFontSizes = {
+        xs: 'font-normal',
+        sm: 'font-normal',
+        md: 'font-medium',
+        lg: 'font-medium'
+    };
+    // Extended sizing system for App editor with increased padding and icon sizes
+    ButtonType.ExtendedSizingClasses = {
+        xs2: 'px-1', // Smallest
+        xs: 'px-2', // Very small
+        sm: 'px-3', // Small (increased from unified)
+        md: 'px-5', // Medium (increased from unified)
+        lg: 'px-7', // Large (increased from unified)
+        xl: 'px-9' // Extra large (new)
+    };
+    ButtonType.ExtendedIconOnlySizingClasses = {
+        xs2: 'px-1', // Square padding for icon-only
+        xs: 'px-2',
+        sm: 'px-3',
+        md: 'px-5',
+        lg: 'px-7',
+        xl: 'px-9'
+    };
+    ButtonType.ExtendedHeightClasses = {
+        xs2: 'min-h-5', // 20px
+        xs: 'min-h-6', // 24px
+        sm: 'min-h-7', // 28px
+        md: 'min-h-9', // 36px (increased from unified)
+        lg: 'min-h-12', // 48px (increased from unified)
+        xl: 'min-h-14' // 56px (new)
+    };
+    ButtonType.ExtendedIconSizes = {
+        xs2: 10, // Smallest icons
+        xs: 12,
+        sm: 14,
+        md: 16, // Increased from unified
+        lg: 20, // Increased from unified
+        xl: 24 // Largest icons
+    };
+    ButtonType.ExtendedFontSizeClasses = {
+        xs2: 'text-2xs',
+        xs: 'text-xs',
+        sm: 'text-xs',
+        md: 'text-xs',
+        lg: 'text-sm',
+        xl: 'text-sm'
+    };
 })(ButtonType || (ButtonType = {}));