lapikit 0.6.4 → 0.6.6

package/dist/components/separator/separator.svelte

@@ -41,7 +41,20 @@
 	const formatThickness = (value?: number | string) =>
 		typeof thickness === 'number' ? `${value}px` : value;
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-separator-fg:${color && `var(--kit-color-${color})`}` : '',
+			thickness && orientation === 'horizontal'
+				? `--kit-separator-top-width:${formatThickness(thickness)}`
+				: '',
+			thickness && orientation === 'vertical'
+				? `--kit-separator-right-width:${formatThickness(thickness)}`
+				: ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
@@ -49,14 +62,12 @@
 	bind:this={ref}
 	{...restProps}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	role="separator"
 	aria-orientation={orientation || 'horizontal'}
 	data-inset={inset || undefined}
 	data-orientation={orientation}
 	style:--kit-separator-color={color && `var(--kit-color-${color})`}
-	style:--kit-separator-top-width={orientation === 'horizontal' ? formatThickness(thickness) : ''}
-	style:--kit-separator-right-width={orientation === 'vertical' ? formatThickness(thickness) : ''}
 />
 
 <style>

package/dist/components/textfield/textfield.svelte

@@ -70,7 +70,15 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-textfield-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-textfield-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 
 	let counterValue = $state(0);
 	let displayMessage = $state(false);
@@ -122,7 +130,7 @@
 <div
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	{...restProps}
 	data-size={size}
 	data-variant={variant}
@@ -133,8 +141,6 @@
 	data-hide-spin-buttons={type === 'number' && hideSpinButtons}
 	data-rounded={rounded}
 	data-with-message={(messageValue || messagePrefix || messageSuffix || counter) && true}
-	style:--kit-textfield-fg={color && `var(--kit-color-${color})`}
-	style:--kit-textfield-bg={background && `var(--kit-color-${background})`}
 >
 	{#if prepend}
 		<div class="kit-textfield__prepend">
@@ -315,21 +321,19 @@
 	* @link nothing...
 	*/
 	.kit-textfield[data-size='xs'] {
-		--kit-textfield-h: 28px;
-		--kit-textfield-px: 6px;
-		--kit-textfield-py: 10px;
-		--kit-textfield-gap: 8px;
-		--kit-textfield-font: 12px;
+		--kit-textfield-h: 24px;
+		--kit-textfield-p: 8px;
+		--kit-textfield-gap: var(--kit-space-compact);
+		--kit-textfield-font: 13px;
 	}
 	.kit-textfield[data-size='xs'] :global(.kit-icon[data-size='default']) {
 		--kit-icon-current-size: 0.875rem;
 	}
 	.kit-textfield[data-size='sm'] {
 		--kit-textfield-h: 32px;
-		--kit-textfield-px: 14px;
-		--kit-textfield-py: 12px;
-		--kit-textfield-gap: 6px;
-		--kit-textfield-font: 13px;
+		--kit-textfield-p: 10px;
+		--kit-textfield-gap: var(--kit-space-default);
+		--kit-textfield-font: 14px;
 	}
 	.kit-textfield[data-size='sm'] :global(.kit-icon[data-size='default']) {
 		--kit-icon-current-size: 1rem;
@@ -337,10 +341,9 @@
 
 	.kit-textfield[data-size='md'] {
 		--kit-textfield-h: 40px;
-		--kit-textfield-px: 14px;
-		--kit-textfield-py: 12px;
-		--kit-textfield-gap: 8px;
-		--kit-textfield-font: 14px;
+		--kit-textfield-p: 12px;
+		--kit-textfield-gap: var(--kit-space-default);
+		--kit-textfield-font: 16px;
 	}
 	.kit-textfield[data-size='md'] :global(.kit-icon[data-size='default']) {
 		--kit-icon-current-size: 1.125rem;
@@ -348,10 +351,9 @@
 
 	.kit-textfield[data-size='lg'] {
 		--kit-textfield-h: 48px;
-		--kit-textfield-px: 16px;
-		--kit-textfield-py: 14px;
-		--kit-textfield-gap: 10px;
-		--kit-textfield-font: 15px;
+		--kit-textfield-p: 14px;
+		--kit-textfield-gap: var(--kit-space-default);
+		--kit-textfield-font: 16px;
 	}
 	.kit-textfield[data-size='lg'] :global(.kit-icon[data-size='default']) {
 		--kit-icon-current-size: 1.25rem;
@@ -359,10 +361,9 @@
 
 	.kit-textfield[data-size='xl'] {
 		--kit-textfield-h: 56px;
-		--kit-textfield-px: 18px;
-		--kit-textfield-py: 16px;
-		--kit-textfield-gap: 12px;
-		--kit-textfield-font: 16px;
+		--kit-textfield-p: 16px;
+		--kit-textfield-gap: var(--kit-space-comfortable);
+		--kit-textfield-font: 17px;
 	}
 	.kit-textfield[data-size='xl'] :global(.kit-icon[data-size='default']) {
 		--kit-icon-current-size: 1.375rem;
@@ -400,21 +401,14 @@
 	 * density
 	 * @link ...
 	 */
-	.kit-textfield[data-density='none'] {
-		--kit-textfield-density-scale: 0;
-		--kit-textfield-density-h-scale: 0;
-	}
 	.kit-textfield[data-density='compact'] {
-		--kit-textfield-density-scale: 0.9;
-		--kit-textfield-density-h-scale: 0.92;
+		--kit-textfield-density-offset: var(--kit-density-compact);
 	}
 	.kit-textfield[data-density='default'] {
-		--kit-textfield-density-scale: 1;
-		--kit-textfield-density-h-scale: 1;
+		--kit-textfield-density-offset: var(--kit-density-default);
 	}
 	.kit-textfield[data-density='comfortable'] {
-		--kit-textfield-density-scale: 1.1;
-		--kit-textfield-density-h-scale: 1.15;
+		--kit-textfield-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 
@@ -468,8 +462,8 @@
 		gap: var(--kit-textfield-gap);
 		width: 100%;
 		min-width: 0;
-		min-height: calc(var(--kit-textfield-h) * var(--kit-textfield-density-h-scale));
-		padding: 0 calc(var(--kit-textfield-px) * var(--kit-textfield-density-scale));
+		min-height: calc(var(--kit-textfield-h) + var(--kit-textfield-density-offset) / 2);
+		padding: 0 calc(var(--kit-textfield-p) + var(--kit-textfield-density-offset) / 2);
 		border-radius: var(--kit-textfield-radius);
 		background: var(--kit-textfield-bg);
 		color: var(--kit-textfield-fg);
@@ -557,7 +551,7 @@
 
 	.kit-textfield__message {
 		grid-area: message;
-		padding-inline: var(--kit-textfield-px);
+		padding-inline: calc(var(--kit-textfield-p) + var(--kit-textfield-density-offset) / 2);
 		font-size: 12px;
 		opacity: 0;
 	}

package/dist/components/toolbar/toolbar.svelte

@@ -57,14 +57,22 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-toolbar-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-toolbar-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
+	style={resolvedStyle}
 	{...restProps}
 	role="toolbar"
 	data-variant={variant}
@@ -75,8 +83,6 @@
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
-	style:--kit-toolbar-fg={color && `var(--kit-color-${color})`}
-	style:--kit-toolbar-bg={background && `var(--kit-color-${background})`}
 >
 	{#if variant === 'outline'}
 		<span class="outline"></span>
@@ -89,15 +95,6 @@
 
 <style>
 	.kit-toolbar {
-		/* --kit-toolbar-bg: var(--kit-surface-2);
-		--kit-toolbar-fg: var(--kit-fg);
-		--kit-toolbar-bd: color-mix(in oklab, var(--kit-toolbar-fg), transparent 82%);
-		--kit-toolbar-radius: 1rem;
-		--kit-toolbar-gap: 0.5rem;
-		--kit-toolbar-padding-x: 0.75rem;
-		--kit-toolbar-padding-y: 0.5rem;
-		--kit-toolbar-size: auto; */
-
 		position: relative;
 		display: inline-flex;
 		max-width: 100%;
@@ -144,21 +141,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-toolbar[data-density='none'] {
-		--kit-toolbar-density-scale: 0;
-		--kit-toolbar-density-h-scale: 0;
-	}
 	.kit-toolbar[data-density='compact'] {
-		--kit-toolbar-density-scale: 0.9;
-		--kit-toolbar-density-h-scale: 0.92;
+		--kit-toolbar-density-offset: var(--kit-density-compact);
 	}
 	.kit-toolbar[data-density='default'] {
-		--kit-toolbar-density-scale: 1;
-		--kit-toolbar-density-h-scale: 1;
+		--kit-toolbar-density-offset: var(--kit-density-default);
 	}
 	.kit-toolbar[data-density='comfortable'] {
-		--kit-toolbar-density-scale: 1.1;
-		--kit-toolbar-density-h-scale: 1.15;
+		--kit-toolbar-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 
@@ -193,34 +183,34 @@
 	* @link nothing...
 	*/
 	.kit-toolbar[data-size='xs'] {
-		--kit-toolbar-h: 24px;
-		--kit-toolbar-px: 6px;
-		--kit-toolbar-gap: 4px;
-		--kit-toolbar-font: 0.75rem;
+		--kit-toolbar-h: 32px;
+		--kit-toolbar-p: 8px;
+		--kit-toolbar-gap: var(--kit-space-compact);
+		--kit-toolbar-font: var(--kit-font-xs);
 	}
 	.kit-toolbar[data-size='sm'] {
-		--kit-toolbar-h: 28px;
-		--kit-toolbar-px: 8px;
-		--kit-toolbar-gap: 6px;
-		--kit-toolbar-font: 0.875rem;
+		--kit-toolbar-h: 40px;
+		--kit-toolbar-p: 10px;
+		--kit-toolbar-gap: var(--kit-space-default);
+		--kit-toolbar-font: var(--kit-font-sm);
 	}
 	.kit-toolbar[data-size='md'] {
-		--kit-toolbar-h: 32px;
-		--kit-toolbar-px: 10px;
-		--kit-toolbar-gap: 8px;
-		--kit-toolbar-font: 1rem;
+		--kit-toolbar-h: 48px;
+		--kit-toolbar-p: 12px;
+		--kit-toolbar-gap: var(--kit-space-default);
+		--kit-toolbar-font: var(--kit-font-md);
 	}
 	.kit-toolbar[data-size='lg'] {
-		--kit-toolbar-h: 38px;
-		--kit-toolbar-px: 12px;
-		--kit-toolbar-gap: 10px;
-		--kit-toolbar-font: 1.125rem;
+		--kit-toolbar-h: 56px;
+		--kit-toolbar-p: 16px;
+		--kit-toolbar-gap: var(--kit-space-default);
+		--kit-toolbar-font: var(--kit-font-lg);
 	}
 	.kit-toolbar[data-size='xl'] {
-		--kit-toolbar-h: 42px;
-		--kit-toolbar-px: 14px;
-		--kit-toolbar-gap: 12px;
-		--kit-toolbar-font: 1.25rem;
+		--kit-toolbar-h: 64px;
+		--kit-toolbar-p: 20px;
+		--kit-toolbar-gap: var(--kit-space-comfortable);
+		--kit-toolbar-font: var(--kit-font-xl);
 	}
 
 	.kit-toolbar .outline {
@@ -237,8 +227,8 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: flex-start;
-		min-height: calc(var(--kit-toolbar-h) * var(--kit-toolbar-density-h-scale));
-		padding: calc(var(--kit-toolbar-px) * var(--kit-toolbar-density-scale));
+		min-height: calc(var(--kit-toolbar-h) + var(--kit-toolbar-density-offset) / 2);
+		padding: calc(var(--kit-toolbar-p) + var(--kit-toolbar-density-offset) / 2);
 		gap: var(--kit-toolbar-gap);
 		width: 100%;
 		border-radius: inherit;

package/dist/components/tooltip/tooltip.svelte

@@ -56,7 +56,15 @@
 		})
 	);
 
-	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
+	let resolvedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-tooltip-fg:${color && `var(--kit-color-${color})`}` : '',
+			background ? `--kit-tooltip-bg:${background && `var(--kit-color-${background})`}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 
 	const positioner = getPositionsTooltip();
 
@@ -174,12 +182,10 @@
 		role="tooltip"
 		aria-label={label}
 		style={`transform: translate(${axis.x}px, ${axis.y}px); display:${open ? 'block' : 'none'}`}
-		style:--kit-tooltip-fg={color && `var(--kit-color-${color})`}
-		style:--kit-tooltip-bg={background && `var(--kit-color-${background})`}
 	>
 		<div
 			class={componentClass}
-			style={mergedStyle}
+			style={resolvedStyle}
 			data-density={density}
 			data-location={axis.location ?? location}
 			data-variant={variant}
@@ -220,22 +226,19 @@
 	.kit-tooltip__content {
 		--kit-tooltip-bg: var(--kit-color-surface-2);
 		--kit-tooltip-fg: var(--kit-color-text);
-		--kit-tooltip-py: 0.15rem;
-		--kit-tooltip-px: 0.625rem;
 
 		position: relative;
 		display: inline-block;
 		width: max-content;
 		max-width: min(20rem, calc(100vw - 1rem));
-		padding: calc(var(--kit-tooltip-py) * var(--kit-tooltip-density-scale))
-			calc(var(--kit-tooltip-px) * var(--kit-tooltip-density-scale));
+		padding: calc(var(--kit-space-default) + var(--kit-tooltip-density-offset) / 2);
 		border: 0;
 		border-radius: var(--kit-tooltip-radius);
 		background: var(--kit-tooltip-bg);
 		color: var(--kit-tooltip-fg);
 		font-size: 0.875rem;
 		overflow-wrap: break-word;
-		box-shadow: 0 16px 29px -10px color-mix(in oklab, black 18%, transparent);
+		box-shadow: 0 16px 29px -10px color-mix(in oklab, var(--kit-color-shadow) 18%, transparent);
 		animation: kit-tooltip-enter 150ms ease;
 	}
 
@@ -243,17 +246,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-tooltip__content[data-density='none'] {
-		--kit-tooltip-density-scale: 0;
-	}
 	.kit-tooltip__content[data-density='compact'] {
-		--kit-tooltip-density-scale: 0.9;
+		--kit-tooltip-density-offset: var(--kit-density-compact);
 	}
 	.kit-tooltip__content[data-density='default'] {
-		--kit-tooltip-density-scale: 1;
+		--kit-tooltip-density-offset: var(--kit-density-default);
 	}
 	.kit-tooltip__content[data-density='comfortable'] {
-		--kit-tooltip-density-scale: 1.1;
+		--kit-tooltip-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.6.4",
+	"version": "0.6.6",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"