lapikit 0.6.5 → 0.6.7

package/dist/components/accordion/accordion.svelte

@@ -117,6 +117,10 @@
 		border-bottom-right-radius: var(--kit-accordion-item-radius);
 	}
 
+	.kit-accordion:not([data-spacer='true']) :global(.kit-accordion-item:first-child:last-child) {
+		border-radius: var(--kit-accordion-item-radius);
+	}
+
 	.kit-accordion[data-hide-icon='true'] :global(.kit-accordion-item__indicator) {
 		display: none;
 	}
@@ -151,21 +155,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-accordion[data-density='none'] {
-		--kit-accordion-density-scale: 0;
-		--kit-accordion-density-h-scale: 0;
-	}
 	.kit-accordion[data-density='compact'] {
-		--kit-accordion-density-scale: 0.9;
-		--kit-accordion-density-h-scale: 0.92;
+		--kit-accordion-density-offset: var(--kit-density-compact);
 	}
 	.kit-accordion[data-density='default'] {
-		--kit-accordion-density-scale: 1;
-		--kit-accordion-density-h-scale: 1;
+		--kit-accordion-density-offset: var(--kit-density-default);
 	}
 	.kit-accordion[data-density='comfortable'] {
-		--kit-accordion-density-scale: 1.1;
-		--kit-accordion-density-h-scale: 1.15;
+		--kit-accordion-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 
@@ -226,33 +223,33 @@
 	* @link nothing...
 	*/
 	.kit-accordion[data-size='xs'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 28px;
-		--kit-accordion-item-px: 10px;
-		--kit-accordion-item-gap: 4px;
-		--kit-accordion-item-font: 0.75rem;
+		--kit-accordion-item-h: 32px;
+		--kit-accordion-item-p: 8px;
+		--kit-accordion-item-gap: var(--kit-space-compact);
+		--kit-accordion-item-font: var(--kit-font-xs);
 	}
 	.kit-accordion[data-size='sm'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 32px;
-		--kit-accordion-item-px: 12px;
-		--kit-accordion-item-gap: 6px;
-		--kit-accordion-item-font: 0.875rem;
+		--kit-accordion-item-h: 40px;
+		--kit-accordion-item-p: 10px;
+		--kit-accordion-item-gap: var(--kit-space-default);
+		--kit-accordion-item-font: var(--kit-font-sm);
 	}
 	.kit-accordion[data-size='md'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 40px;
-		--kit-accordion-item-px: 16px;
-		--kit-accordion-item-gap: 8px;
-		--kit-accordion-item-font: 1rem;
+		--kit-accordion-item-h: 48px;
+		--kit-accordion-item-p: 12px;
+		--kit-accordion-item-gap: var(--kit-space-default);
+		--kit-accordion-item-font: var(--kit-font-md);
 	}
 	.kit-accordion[data-size='lg'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 48px;
-		--kit-accordion-item-px: 20px;
-		--kit-accordion-item-gap: 10px;
-		--kit-accordion-item-font: 1.125rem;
+		--kit-accordion-item-h: 56px;
+		--kit-accordion-item-p: 16px;
+		--kit-accordion-item-gap: var(--kit-space-default);
+		--kit-accordion-item-font: var(--kit-font-lg);
 	}
 	.kit-accordion[data-size='xl'] :global(.kit-accordion-item) {
-		--kit-accordion-item-h: 56px;
-		--kit-accordion-item-px: 24px;
-		--kit-accordion-item-gap: 12px;
-		--kit-accordion-item-font: 1.25rem;
+		--kit-accordion-item-h: 64px;
+		--kit-accordion-item-p: 20px;
+		--kit-accordion-item-gap: var(--kit-space-comfortable);
+		--kit-accordion-item-font: var(--kit-font-xl);
 	}
 </style>

package/dist/components/accordion/modules/accordion-item.svelte

@@ -154,8 +154,8 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: var(--kit-accordion-item-gap);
-		min-height: calc(var(--kit-accordion-item-h) * var(--kit-accordion-density-h-scale));
-		padding: calc(var(--kit-accordion-item-px) * var(--kit-accordion-density-scale));
+		min-height: calc(var(--kit-accordion-item-h) + var(--kit-accordion-density-offset) / 2);
+		padding: calc(var(--kit-accordion-item-p) + var(--kit-accordion-density-offset) / 2);
 		cursor: pointer;
 		text-align: left;
 		background: var(--kit-accordion-item-bg);
@@ -195,7 +195,7 @@
 	}
 
 	.kit-accordion-item__content-inner {
-		padding: calc(var(--kit-accordion-item-px) * var(--kit-accordion-density-scale));
+		padding: calc(var(--kit-accordion-item-p) + var(--kit-accordion-density-offset) / 2);
 	}
 
 	.kit-accordion-item__separator {
@@ -220,7 +220,7 @@
 	} */
 
 	.kit-accordion-item[data-disabled='false'][data-read-only='false'] > button:focus-visible {
-		outline: 2px solid var(--kit-focus);
+		outline: 2px solid var(--kit-color-focus);
 		outline-offset: 2px;
 	}
 

package/dist/components/alert/alert.svelte

@@ -131,7 +131,8 @@
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
 		gap: var(--kit-alert-gap);
-		padding: calc(var(--kit-alert-px) * var(--kit-alert-density-scale));
+		min-height: calc(var(--kit-alert-item-h) + var(--kit-alert-density-offset) / 2);
+		padding: calc(var(--kit-alert-p) + var(--kit-alert-density-offset) / 2);
 		border-radius: var(--kit-alert-radius);
 		color: var(--kit-alert-fg);
 		background: var(--kit-alert-bg);
@@ -213,21 +214,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-alert[data-density='none'] {
-		--kit-alert-density-scale: 0;
-		--kit-alert-density-h-scale: 0;
-	}
 	.kit-alert[data-density='compact'] {
-		--kit-alert-density-scale: 0.9;
-		--kit-alert-density-h-scale: 0.92;
+		--kit-alert-density-offset: var(--kit-density-compact);
 	}
 	.kit-alert[data-density='default'] {
-		--kit-alert-density-scale: 1;
-		--kit-alert-density-h-scale: 1;
+		--kit-alert-density-offset: var(--kit-density-default);
 	}
 	.kit-alert[data-density='comfortable'] {
-		--kit-alert-density-scale: 1.1;
-		--kit-alert-density-h-scale: 1.15;
+		--kit-alert-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 
@@ -262,29 +256,34 @@
 	* @link nothing...
 	*/
 	.kit-alert[data-size='xs'] {
-		--kit-alert-px: 10px;
-		--kit-alert-gap: 4px;
-		--kit-alert-font: 0.75rem;
+		--kit-alert-h: 32px;
+		--kit-alert-p: 8px;
+		--kit-alert-gap: var(--kit-space-compact);
+		--kit-alert-font: var(--kit-font-xs);
 	}
 	.kit-alert[data-size='sm'] {
-		--kit-alert-px: 12px;
-		--kit-alert-gap: 6px;
-		--kit-alert-font: 0.875rem;
+		--kit-alert-h: 40px;
+		--kit-alert-p: 10px;
+		--kit-alert-gap: var(--kit-space-default);
+		--kit-alert-font: var(--kit-font-sm);
 	}
 	.kit-alert[data-size='md'] {
-		--kit-alert-px: 16px;
-		--kit-alert-gap: 8px;
-		--kit-alert-font: 1rem;
+		--kit-alert-h: 48px;
+		--kit-alert-p: 12px;
+		--kit-alert-gap: var(--kit-space-default);
+		--kit-alert-font: var(--kit-font-md);
 	}
 	.kit-alert[data-size='lg'] {
-		--kit-alert-px: 20px;
-		--kit-alert-gap: 10px;
-		--kit-alert-font: 1.125rem;
+		--kit-alert-h: 56px;
+		--kit-alert-p: 16px;
+		--kit-alert-gap: var(--kit-space-default);
+		--kit-alert-font: var(--kit-font-lg);
 	}
 	.kit-alert[data-size='xl'] {
-		--kit-alert-px: 24px;
-		--kit-alert-gap: 12px;
-		--kit-alert-font: 1.25rem;
+		--kit-alert-h: 64px;
+		--kit-alert-p: 20px;
+		--kit-alert-gap: var(--kit-space-comfortable);
+		--kit-alert-font: var(--kit-font-xl);
 	}
 
 	/**

package/dist/components/app/app.svelte

@@ -38,7 +38,7 @@
 </div>
 
 <style>
-	.kit-application {
+	:global(html) {
 		--kit-shape-none: 0;
 		--kit-shape-xs: 4px;
 		--kit-shape-sm: 6px;
@@ -47,9 +47,19 @@
 		--kit-shape-xl: 18px;
 		--kit-shape-full: 9999px;
 
-		--kit-space-compact: 6px;
-		--kit-space-default: 10px;
-		--kit-space-comfortable: 14px;
+		--kit-font-xs: 13px;
+		--kit-font-sm: 14px;
+		--kit-font-md: 15px;
+		--kit-font-lg: 16px;
+		--kit-font-xl: 17px;
+
+		--kit-space-compact: 2px;
+		--kit-space-default: 4px;
+		--kit-space-comfortable: 6px;
+
+		--kit-density-compact: -4px;
+		--kit-density-default: 0px;
+		--kit-density-comfortable: 4px;
 
 		--kit-shadow-opacity: 30%;
 		--kit-shadow-ambiant-opacity: 15%;
@@ -58,9 +68,11 @@
 		--kit-font:
 			ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
 			'Segoe UI Symbol', 'Noto Color Emoji';
+
+		--kit-color-transparent: transparent;
 	}
 
-	.kit-application,
+	:global(html:not([data-kit-theme])),
 	:global([data-kit-theme='light']) {
 		color-scheme: light;
 		--kit-color-surface: hsl(0 0% 100%);

package/dist/components/appbar/appbar.svelte

@@ -98,8 +98,8 @@
 		position: relative;
 		width: 100%;
 		gap: var(--kit-appbar-gap);
-		min-height: calc(var(--kit-appbar-h) * var(--kit-appbar-density-h-scale));
-		padding: calc(var(--kit-appbar-px) * var(--kit-appbar-density-scale));
+		min-height: calc(var(--kit-appbar-h) + var(--kit-appbar-density-offset) / 2);
+		padding: calc(var(--kit-appbar-p) + var(--kit-appbar-density-offset) / 2);
 		border-radius: var(--kit-appbar-radius);
 		color: var(--kit-appbar-fg);
 		background-color: var(--kit-appbar-bg);
@@ -142,21 +142,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-appbar[data-density='none'] {
-		--kit-appbar-density-scale: 0;
-		--kit-appbar-density-h-scale: 0;
-	}
 	.kit-appbar[data-density='compact'] {
-		--kit-appbar-density-scale: 0.9;
-		--kit-appbar-density-h-scale: 0.92;
+		--kit-appbar-density-offset: var(--kit-density-compact);
 	}
 	.kit-appbar[data-density='default'] {
-		--kit-appbar-density-scale: 1;
-		--kit-appbar-density-h-scale: 1;
+		--kit-appbar-density-offset: var(--kit-density-default);
 	}
 	.kit-appbar[data-density='comfortable'] {
-		--kit-appbar-density-scale: 1.1;
-		--kit-appbar-density-h-scale: 1.15;
+		--kit-appbar-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 
@@ -191,34 +184,34 @@
 	* @link nothing...
 	*/
 	.kit-appbar[data-size='xs'] {
-		--kit-appbar-h: 28px;
-		--kit-appbar-px: 10px;
-		--kit-appbar-gap: 4px;
-		--kit-appbar-font: 0.75rem;
+		--kit-appbar-h: 32px;
+		--kit-appbar-p: 8px;
+		--kit-appbar-gap: var(--kit-space-compact);
+		--kit-appbar-font: var(--kit-font-xs);
 	}
 	.kit-appbar[data-size='sm'] {
-		--kit-appbar-h: 32px;
-		--kit-appbar-px: 12px;
-		--kit-appbar-gap: 6px;
-		--kit-appbar-font: 0.875rem;
+		--kit-appbar-h: 40px;
+		--kit-appbar-p: 10px;
+		--kit-appbar-gap: var(--kit-space-default);
+		--kit-appbar-font: var(--kit-font-sm);
 	}
 	.kit-appbar[data-size='md'] {
-		--kit-appbar-h: 40px;
-		--kit-appbar-px: 14px;
-		--kit-appbar-gap: 8px;
-		--kit-appbar-font: 1rem;
+		--kit-appbar-h: 48px;
+		--kit-appbar-p: 12px;
+		--kit-appbar-gap: var(--kit-space-default);
+		--kit-appbar-font: var(--kit-font-md);
 	}
 	.kit-appbar[data-size='lg'] {
-		--kit-appbar-h: 48px;
-		--kit-appbar-px: 16px;
-		--kit-appbar-gap: 10px;
-		--kit-appbar-font: 1.125rem;
+		--kit-appbar-h: 56px;
+		--kit-appbar-p: 16px;
+		--kit-appbar-gap: var(--kit-space-default);
+		--kit-appbar-font: var(--kit-font-lg);
 	}
 	.kit-appbar[data-size='xl'] {
-		--kit-appbar-h: 56px;
-		--kit-appbar-px: 18px;
-		--kit-appbar-gap: 12px;
-		--kit-appbar-font: 1.25rem;
+		--kit-appbar-h: 64px;
+		--kit-appbar-p: 20px;
+		--kit-appbar-gap: var(--kit-space-comfortable);
+		--kit-appbar-font: var(--kit-font-xl);
 	}
 
 	.kit-appbar__wrapper {
@@ -227,7 +220,7 @@
 		display: flex;
 		align-items: center;
 		flex-direction: row;
-		gap: 0.75rem;
+		gap: var(--kit-appbar-gap);
 		width: 100%;
 		margin: 0 auto;
 	}

package/dist/components/avatar/avatar.svelte

@@ -62,8 +62,8 @@
 	class={componentClass}
 	style={resolvedStyle}
 	data-type={contentType}
-	data-size={contentType === 'label' ? size : undefined}
-	data-density={contentType === 'label' ? density : undefined}
+	data-size={size}
+	data-density={density}
 	data-rounded={rounded}
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
@@ -82,9 +82,8 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: calc(var(--kit-avatar-h) * var(--kit-avatar-density-h-scale));
-		height: calc(var(--kit-avatar-h) * var(--kit-avatar-density-h-scale));
-		padding: calc(var(--kit-avatar-px) * var(--kit-avatar-density-scale));
+		width: calc(var(--kit-avatar-h) + var(--kit-avatar-density-offset) / 2);
+		height: calc(var(--kit-avatar-h) + var(--kit-avatar-density-offset) / 2);
 		overflow: hidden;
 		background: var(--kit-color-surface-3);
 		color: var(--kit-color-text);
@@ -151,21 +150,14 @@
 	 * density
 	 * @link ...
 	 */
-	.kit-avatar[data-density='none'] {
-		--kit-avatar-density-scale: 0;
-		--kit-avatar-density-h-scale: 0;
-	}
 	.kit-avatar[data-density='compact'] {
-		--kit-avatar-density-scale: 0.8;
-		--kit-avatar-density-h-scale: 0.92;
+		--kit-avatar-density-offset: var(--kit-density-compact);
 	}
 	.kit-avatar[data-density='default'] {
-		--kit-avatar-density-scale: 1;
-		--kit-avatar-density-h-scale: 1;
+		--kit-avatar-density-offset: var(--kit-density-default);
 	}
 	.kit-avatar[data-density='comfortable'] {
-		--kit-list-density-scale: 1.1;
-		--kit-avatar-density-h-scale: 1.15;
+		--kit-avatar-density-offset: var(--kit-density-comfortable);
 	}
 
 	/**
@@ -173,33 +165,28 @@
 	* @link nothing...
 	*/
 	.kit-avatar[data-size='xs'] {
-		--kit-avatar-h: 28px;
-		--kit-avatar-px: 10px;
-		--kit-avatar-gap: 4px;
-		--kit-avatar-font: 0.75rem;
+		--kit-avatar-h: 32px;
+		--kit-avatar-gap: var(--kit-space-compact);
+		--kit-avatar-font: var(--kit-font-xs);
 	}
 	.kit-avatar[data-size='sm'] {
-		--kit-avatar-h: 32px;
-		--kit-avatar-px: 12px;
-		--kit-avatar-gap: 6px;
-		--kit-avatar-font: 0.875rem;
+		--kit-avatar-h: 40px;
+		--kit-avatar-gap: var(--kit-space-default);
+		--kit-avatar-font: var(--kit-font-sm);
 	}
 	.kit-avatar[data-size='md'] {
-		--kit-avatar-h: 40px;
-		--kit-avatar-px: 16px;
-		--kit-avatar-gap: 8px;
-		--kit-avatar-font: 1rem;
+		--kit-avatar-h: 48px;
+		--kit-avatar-gap: var(--kit-space-default);
+		--kit-avatar-font: var(--kit-font-md);
 	}
 	.kit-avatar[data-size='lg'] {
-		--kit-avatar-h: 48px;
-		--kit-avatar-px: 20px;
-		--kit-avatar-gap: 10px;
-		--kit-avatar-font: 1.125rem;
+		--kit-avatar-h: 56px;
+		--kit-avatar-gap: var(--kit-space-default);
+		--kit-avatar-font: var(--kit-font-lg);
 	}
 	.kit-avatar[data-size='xl'] {
-		--kit-avatar-h: 56px;
-		--kit-avatar-px: 24px;
-		--kit-avatar-gap: 12px;
-		--kit-avatar-font: 1.25rem;
+		--kit-avatar-h: 64px;
+		--kit-avatar-gap: var(--kit-space-comfortable);
+		--kit-avatar-font: var(--kit-font-xl);
 	}
 </style>

package/dist/components/btn/btn.svelte

@@ -220,8 +220,8 @@
 		font-family: var(--kit-font);
 		background: var(--kit-btn-bg);
 		color: var(--kit-btn-fg);
-		height: calc(var(--kit-btn-h) * var(--kit-btn-density-h-scale));
-		padding-inline: calc(var(--kit-btn-px) * var(--kit-btn-density-scale));
+		height: calc(var(--kit-btn-h) + var(--kit-btn-density-offset) / 2);
+		padding-inline: calc(var(--kit-btn-p) + var(--kit-btn-density-offset) / 2);
 		border-radius: var(--kit-btn-radius);
 		text-decoration: none;
 		white-space: nowrap;
@@ -266,7 +266,7 @@
 	}
 
 	:is(.kit-btn:focus-visible, .kit-btn:has(> input:focus-visible)) {
-		outline: 2px solid var(--kit-focus);
+		outline: 2px solid var(--kit-color-focus);
 		outline-offset: 2px;
 	}
 
@@ -351,8 +351,8 @@
 	}
 
 	.kit-btn[data-icon='true'] {
-		width: max(28px, calc(var(--kit-btn-h) * var(--kit-btn-density-h-scale)));
-		min-width: max(28px, calc(var(--kit-btn-h) * var(--kit-btn-density-h-scale)));
+		width: max(28px, calc(var(--kit-btn-h) + var(--kit-btn-density-offset) / 2));
+		min-width: max(28px, calc(var(--kit-btn-h) + var(--kit-btn-density-offset) / 2));
 		padding-inline: 0;
 	}
 
@@ -388,19 +388,19 @@
 	* @link nothing...
 	*/
 	.kit-btn[data-size='xs'] {
-		--kit-btn-h: 28px;
-		--kit-btn-px: 10px;
-		--kit-btn-gap: 4px;
-		--kit-btn-font: 0.75rem;
+		--kit-btn-h: 24px;
+		--kit-btn-p: 8px;
+		--kit-btn-gap: var(--kit-space-compact);
+		--kit-btn-font: 12px;
 	}
 	.kit-btn[data-size='xs'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-xs);
 	}
 	.kit-btn[data-size='sm'] {
 		--kit-btn-h: 32px;
-		--kit-btn-px: 12px;
-		--kit-btn-gap: 6px;
-		--kit-btn-font: 0.875rem;
+		--kit-btn-p: 12px;
+		--kit-btn-gap: var(--kit-space-default);
+		--kit-btn-font: 13px;
 	}
 	.kit-btn[data-size='sm'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-sm);
@@ -408,9 +408,9 @@
 
 	.kit-btn[data-size='md'] {
 		--kit-btn-h: 40px;
-		--kit-btn-px: 16px;
-		--kit-btn-gap: 8px;
-		--kit-btn-font: 1rem;
+		--kit-btn-p: 16px;
+		--kit-btn-gap: var(--kit-space-default);
+		--kit-btn-font: 14px;
 	}
 	.kit-btn[data-size='md'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-md);
@@ -418,9 +418,9 @@
 
 	.kit-btn[data-size='lg'] {
 		--kit-btn-h: 48px;
-		--kit-btn-px: 20px;
-		--kit-btn-gap: 10px;
-		--kit-btn-font: 1.125rem;
+		--kit-btn-p: 20px;
+		--kit-btn-gap: var(--kit-space-default);
+		--kit-btn-font: 16px;
 	}
 	.kit-btn[data-size='lg'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-lg);
@@ -428,9 +428,9 @@
 
 	.kit-btn[data-size='xl'] {
 		--kit-btn-h: 56px;
-		--kit-btn-px: 24px;
-		--kit-btn-gap: 12px;
-		--kit-btn-font: 1.25rem;
+		--kit-btn-p: 24px;
+		--kit-btn-gap: var(--kit-space-comfortable);
+		--kit-btn-font: 17px;
 	}
 	.kit-btn[data-size='xl'] :global(.kit-icon:not([data-size])) {
 		--kit-icon-current-size: var(--kit-icon-size-xl);
@@ -440,21 +440,14 @@
 	 * density
 	 * @link no links
 	 */
-	.kit-btn[data-density='none'] {
-		--kit-btn-density-scale: 0;
-		--kit-btn-density-h-scale: 0;
-	}
 	.kit-btn[data-density='compact'] {
-		--kit-btn-density-scale: 0.9;
-		--kit-btn-density-h-scale: 0.92;
+		--kit-btn-density-offset: var(--kit-density-compact);
 	}
 	.kit-btn[data-density='default'] {
-		--kit-btn-density-scale: 1;
-		--kit-btn-density-h-scale: 1;
+		--kit-btn-density-offset: var(--kit-density-default);
 	}
 	.kit-btn[data-density='comfortable'] {
-		--kit-btn-density-scale: 1.1;
-		--kit-btn-density-h-scale: 1.15;
+		--kit-btn-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 

package/dist/components/card/card.svelte

@@ -110,7 +110,7 @@
 		border-radius: var(--kit-card-radius);
 		border: 0;
 		box-sizing: border-box;
-		padding: calc(10px * var(--kit-card-density-scale));
+		padding: calc(10px + var(--kit-card-density-offset) / 2);
 		transition:
 			background 140ms ease,
 			color 140ms ease,
@@ -157,20 +157,17 @@
 	 * density
 	 * @link https://lapikit.dev/docs/components/card#density 
 	 */
-	.kit-card[data-density='none'] {
-		--kit-card-density-scale: 0;
-	}
 	.kit-card[data-density='compact'] {
 		--kit-card-gap: var(--kit-space-compact);
-		--kit-card-density-scale: 0.8;
+		--kit-card-density-offset: var(--kit-density-compact);
 	}
 	.kit-card[data-density='default'] {
 		--kit-card-gap: var(--kit-space-default);
-		--kit-card-density-scale: 1;
+		--kit-card-density-offset: var(--kit-density-default);
 	}
 	.kit-card[data-density='comfortable'] {
 		--kit-card-gap: var(--kit-space-comfortable);
-		--kit-card-density-scale: 1.15;
+		--kit-card-density-offset: var(--kit-density-comfortable);
 	}
 
 	/** 
@@ -225,7 +222,7 @@
 	}
 
 	.kit-card[data-interactive='true'][data-disabled='false']:focus-visible {
-		outline: 2px solid var(--kit-focus);
+		outline: 2px solid var(--kit-color-focus);
 		outline-offset: 2px;
 	}
 

package/dist/components/card/modules/card-actions.svelte

@@ -48,6 +48,6 @@
 	.kit-card-actions {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--kit-space-compact);
+		gap: var(--kit-card-gap);
 	}
 </style>

package/dist/components/card/modules/card-content.svelte

@@ -11,6 +11,7 @@
 		style: styleAttr = '',
 		's-class': sClass,
 		's-style': sStyle,
+		color,
 		...rest
 	}: CardContentProps = $props();
 
@@ -32,13 +33,19 @@
 			styleProps
 		})
 	);
+
+	let resolvedStyle = $derived(
+		[componentStyle, color ? `--kit-card-content-fg:${color && `var(--kit-color-${color})`}` : '']
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={componentStyle}
+	style={resolvedStyle}
 	{...restProps}
 >
 	{@render children?.()}
@@ -46,6 +53,7 @@
 
 <style>
 	.kit-card-content {
+		color: var(--kit-card-content-fg, --kit-card-fg);
 		display: block;
 		line-height: 1.45;
 	}