lapikit 0.5.1 → 0.5.2

package/dist/components/btn/btn.svelte

@@ -60,7 +60,7 @@
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-btn',
-			className: `${className ?? ''} kit-btn--${safeVariant}`.trim(),
+			className: `${className ?? ''}`.trim(),
 			sClass,
 			classProps
 		})
@@ -212,10 +212,8 @@
 		--kit-btn-bg: var(--kit-surface-2);
 		--kit-btn-fg: var(--kit-fg);
 		--kit-btn-bd: var(--kit-border);
-		--kit-btn-bg--hover: color-mix(in oklab, var(--kit-btn-bg), var(--kit-fg) 6%);
-		--kit-btn-bg--active: color-mix(in oklab, var(--kit-btn-bg), var(--kit-fg) 10%);
-		--kit-btn-bd--hover: color-mix(in oklab, var(--kit-btn-bd), var(--kit-fg) 12%);
-		--kit-btn-font: var(--kit-font);
+		--kit-btn-hover-bg: color-mix(in oklab, var(--kit-btn-bg), var(--kit-btn-fg) 6%);
+		--kit-btn-active-bg: color-mix(in oklab, var(--kit-btn-bg), var(--kit-btn-fg) 10%);
 		--kit-btn-h-xs: 28px;
 		--kit-btn-h-sm: 32px;
 		--kit-btn-h-md: 40px;
@@ -226,10 +224,9 @@
 		--kit-btn-px-md: 16px;
 		--kit-btn-px-lg: 20px;
 		--kit-btn-px-xl: 24px;
-		--btn-density-scale: 1;
-		--btn-density-height-scale: 1;
-		--btn-radius: 8px;
-		--btn-shape: var(--btn-radius);
+		--kit-btn-density-scale: 1;
+		--kit-btn-density-h-scale: 1;
+		--kit-btn-radius: 8px;
 		--kit-btn-gap: 0.45em;
 
 		position: relative;
@@ -237,12 +234,12 @@
 		box-sizing: border-box;
 		align-items: center;
 		justify-content: center;
-		font-family: var(--kit-btn-font);
-		background: var(--btn-bg);
-		color: var(--btn-fg);
-		height: max(28px, calc(var(--btn-h) * var(--btn-density-height-scale)));
-		padding-inline: calc(var(--btn-px) * var(--btn-density-scale));
-		border-radius: var(--btn-radius);
+		font-family: var(--kit-font);
+		background: var(--kit-btn-bg);
+		color: var(--kit-btn-fg);
+		height: max(28px, calc(var(--kit-btn-h) * var(--kit-btn-density-h-scale)));
+		padding-inline: calc(var(--kit-btn-px) * var(--kit-btn-density-scale));
+		border-radius: var(--kit-btn-radius);
 		text-decoration: none;
 		white-space: nowrap;
 		user-select: none;
@@ -254,35 +251,35 @@
 	}
 
 	.kit-btn:hover {
-		background: var(--btn-hover-bg);
-		color: var(--btn-hover-fg);
-		text-decoration: var(--btn-decoration);
+		background: var(--kit-btn-hover-bg);
+		color: var(--kit-btn-fg);
+		text-decoration: var(--kit-btn-decoration);
 	}
 
 	.kit-btn:has(> :is(input[type='checkbox'], input[type='radio']):checked) {
-		background: var(--btn-active-bg);
-		color: var(--btn-active-fg);
-		text-decoration: var(--btn-decoration);
+		background: var(--kit-btn-active-bg);
+		color: var(--kit-btn-fg);
+		text-decoration: var(--kit-btn-decoration);
 	}
 
 	.kit-btn:has(> :is(input[type='checkbox'], input[type='radio']):checked):hover {
-		background: var(--btn-hover-bg);
-		color: var(--btn-hover-fg);
-		text-decoration: var(--btn-decoration);
+		background: var(--kit-btn-hover-bg);
+		color: var(--kit-btn-fg);
+		text-decoration: var(--kit-btn-decoration);
 	}
 
 	.kit-btn:active,
 	.kit-btn[data-active='true'] {
-		background: var(--btn-active-bg);
-		color: var(--btn-active-fg);
-		text-decoration: var(--btn-decoration);
+		background: var(--kit-btn-active-bg);
+		color: var(--kit-btn-fg);
+		text-decoration: var(--kit-btn-decoration);
 		transform: translateY(1px);
 	}
 
 	.kit-btn[data-active='true']:hover {
-		background: var(--btn-hover-bg);
-		color: var(--btn-hover-fg);
-		text-decoration: var(--btn-decoration);
+		background: var(--kit-btn-hover-bg);
+		color: var(--kit-btn-fg);
+		text-decoration: var(--kit-btn-decoration);
 	}
 
 	:is(.kit-btn:focus-visible, .kit-btn:has(> input:focus-visible)) {
@@ -302,51 +299,45 @@
 	}
 
 	.kit-btn > :is(input[type='checkbox'], input[type='radio']):after {
-		--btn-content: attr(aria-label);
-		content: var(--btn-content);
+		content: attr(aria-label);
 		cursor: pointer;
 	}
 
 	/* variant */
 	.kit-btn[data-variant='filled'] {
-		/* default style*/
-		--btn-bg: var(--kit-accent);
-		--btn-fg: white;
-		--btn-hover-bg: color-mix(in oklab, var(--kit-accent), black 10%);
-		--btn-hover-fg: var(--btn-fg);
-		--btn-active-bg: color-mix(in oklab, var(--kit-accent), black 16%);
-		--btn-active-fg: var(--btn-fg);
+		--kit-btn-bg: var(--kit-accent);
+		--kit-btn-fg: white;
+		--kit-btn-hover-bg: color-mix(in oklab, var(--kit-btn-bg), black 10%);
+		--kit-btn-active-bg: color-mix(in oklab, var(--kit-btn-bg), black 16%);
 	}
 
 	.kit-btn[data-variant='outline'] {
 		--outline-color: var(--kit-accent);
+		--kit-btn-bg: transparent;
+		--kit-btn-fg: var(--kit-accent);
+		--kit-btn-hover-bg: color-mix(in oklab, var(--kit-btn-fg), transparent 80%);
+		--kit-btn-active-bg: color-mix(in oklab, var(--kit-btn-fg), transparent 92%);
 	}
 
-	.kit-btn[data-variant='outline'],
 	.kit-btn[data-variant='text'] {
-		--btn-bg: transparent;
-		--btn-fg: var(--kit-accent);
-		--btn-hover-bg: color-mix(in oklab, var(--kit-accent), transparent 80%);
-		--btn-hover-fg: var(--btn-fg);
-		--btn-active-bg: color-mix(in oklab, var(--kit-accent), transparent 92%);
-		--btn-active-fg: var(--btn-fg);
+		--kit-btn-bg: transparent;
+		--kit-btn-fg: var(--kit-accent);
+		--kit-btn-hover-bg: color-mix(in oklab, var(--kit-btn-fg), transparent 80%);
+		--kit-btn-active-bg: color-mix(in oklab, var(--kit-btn-fg), transparent 92%);
 	}
 
 	.kit-btn[data-variant='link'] {
-		--btn-bg: transparent;
-		--btn-fg: var(--kit-accent);
-		--btn-hover-fg: var(--btn-fg);
-		--btn-active-fg: var(--btn-fg);
-		--btn-decoration: underline;
+		--kit-btn-bg: transparent;
+		--kit-btn-fg: var(--kit-accent);
+		--kit-btn-decoration: underline;
 		height: inherit;
 		padding: 0;
 	}
 
 	/* size */
 	.kit-btn[data-size='xs'] {
-		--btn-h: var(--kit-btn-h-xs);
-		--btn-height: var(--kit-btn-h-xs);
-		--btn-px: var(--kit-btn-px-xs);
+		--kit-btn-h: var(--kit-btn-h-xs);
+		--kit-btn-px: var(--kit-btn-px-xs);
 		font-size: 12px;
 	}
 	.kit-btn[data-size='xs'] :global(.kit-icon:not([data-size])) {
@@ -354,9 +345,8 @@
 	}
 
 	.kit-btn[data-size='sm'] {
-		--btn-h: var(--kit-btn-h-sm);
-		--btn-height: var(--kit-btn-h-sm);
-		--btn-px: var(--kit-btn-px-sm);
+		--kit-btn-h: var(--kit-btn-h-sm);
+		--kit-btn-px: var(--kit-btn-px-sm);
 		font-size: 13px;
 	}
 	.kit-btn[data-size='sm'] :global(.kit-icon:not([data-size])) {
@@ -364,9 +354,8 @@
 	}
 
 	.kit-btn[data-size='md'] {
-		--btn-h: var(--kit-btn-h-md);
-		--btn-height: var(--kit-btn-h-md);
-		--btn-px: var(--kit-btn-px-md);
+		--kit-btn-h: var(--kit-btn-h-md);
+		--kit-btn-px: var(--kit-btn-px-md);
 		font-size: 14px;
 	}
 	.kit-btn[data-size='md'] :global(.kit-icon:not([data-size])) {
@@ -374,9 +363,8 @@
 	}
 
 	.kit-btn[data-size='lg'] {
-		--btn-h: var(--kit-btn-h-lg);
-		--btn-height: var(--kit-btn-h-lg);
-		--btn-px: var(--kit-btn-px-lg);
+		--kit-btn-h: var(--kit-btn-h-lg);
+		--kit-btn-px: var(--kit-btn-px-lg);
 		font-size: 15px;
 	}
 	.kit-btn[data-size='lg'] :global(.kit-icon:not([data-size])) {
@@ -384,9 +372,8 @@
 	}
 
 	.kit-btn[data-size='xl'] {
-		--btn-h: var(--kit-btn-h-xl);
-		--btn-height: var(--kit-btn-h-xl);
-		--btn-px: var(--kit-btn-px-xl);
+		--kit-btn-h: var(--kit-btn-h-xl);
+		--kit-btn-px: var(--kit-btn-px-xl);
 		font-size: 16px;
 	}
 	.kit-btn[data-size='xl'] :global(.kit-icon:not([data-size])) {
@@ -395,43 +382,43 @@
 
 	/* density */
 	.kit-btn[data-density='default'] {
-		--btn-density-scale: 1;
-		--btn-density-height-scale: 1;
+		--kit-btn-density-scale: 1;
+		--kit-btn-density-h-scale: 1;
 	}
 
 	.kit-btn[data-density='compact'] {
-		--btn-density-scale: 0.9;
-		--btn-density-height-scale: 0.92;
+		--kit-btn-density-scale: 0.9;
+		--kit-btn-density-h-scale: 0.92;
 	}
 
 	.kit-btn[data-density='comfortable'] {
-		--btn-density-scale: 1.1;
-		--btn-density-height-scale: 1.08;
+		--kit-btn-density-scale: 1.1;
+		--kit-btn-density-h-scale: 1.08;
 	}
 
 	/* rounded */
 	.kit-btn[data-rounded='0'] {
-		--btn-radius: 0;
+		--kit-btn-radius: 0;
 	}
 
 	.kit-btn[data-rounded='xs'] {
-		--btn-radius: 2px;
+		--kit-btn-radius: 2px;
 	}
 
 	.kit-btn[data-rounded='sm'] {
-		--btn-radius: 4px;
+		--kit-btn-radius: 4px;
 	}
 
 	.kit-btn[data-rounded='md'] {
-		--btn-radius: 8px;
+		--kit-btn-radius: 8px;
 	}
 
 	.kit-btn[data-rounded='lg'] {
-		--btn-radius: 16px;
+		--kit-btn-radius: 16px;
 	}
 
 	.kit-btn[data-rounded='xl'] {
-		--btn-radius: 99999px;
+		--kit-btn-radius: 99999px;
 	}
 
 	.kit-btn[data-wide='true'] {
@@ -439,10 +426,6 @@
 		max-width: 16rem;
 	}
 
-	.kit-btn .outline {
-		pointer-events: none;
-	}
-
 	.kit-btn__inner {
 		display: inline-flex;
 		align-items: center;
@@ -503,8 +486,8 @@
 	}
 
 	.kit-btn[data-icon='true'] {
-		width: max(28px, calc(var(--btn-h) * var(--btn-density-height-scale)));
-		min-width: max(28px, calc(var(--btn-h) * var(--btn-density-height-scale)));
+		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)));
 		padding-inline: 0;
 	}
 
@@ -514,16 +497,15 @@
 
 	.kit-btn[data-disabled='true'] {
 		pointer-events: none;
-		background: color-mix(in oklab, var(--btn-bg), transparent 70%);
-		color: color-mix(in oklab, var(--btn-fg), transparent 45%);
-
+		background: color-mix(in oklab, var(--kit-btn-bg), transparent 70%);
+		color: color-mix(in oklab, var(--kit-btn-fg), transparent 45%);
 		user-select: none;
 		cursor: not-allowed;
 	}
 
 	.kit-btn[data-disabled='true'] :global(.kit-icon) {
-		color: color-mix(in oklab, var(--btn-fg), transparent 45%) !important;
-		--kit-icon-color: color-mix(in oklab, var(--btn-fg), transparent 45%) !important;
+		color: color-mix(in oklab, var(--kit-btn-fg), transparent 45%) !important;
+		--kit-icon-color: color-mix(in oklab, var(--kit-btn-fg), transparent 45%) !important;
 	}
 
 	.kit-btn[data-disabled='true'] :global(.kit-icon img),

package/dist/components/card/card.svelte

@@ -64,7 +64,7 @@
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-card',
-			className: `${className ?? ''} kit-card--${safeVariant}`.trim(),
+			className: `${className ?? ''}`.trim(),
 			sClass,
 			classProps
 		})
@@ -88,6 +88,7 @@
 	type={resolvedType}
 	disabled={resolvedDisabled}
 	tabindex={resolvedTabIndex}
+	data-variant={safeVariant}
 	data-density={safeDensity}
 	data-rounded={rounded}
 	data-interactive={isInteractive}
@@ -111,25 +112,19 @@
 	.kit-card {
 		--kit-card-bg: var(--kit-surface-2);
 		--kit-card-fg: var(--kit-fg);
-		--kit-card-outline-color: var(--kit-border);
+		--kit-card-bd: var(--kit-border);
 		--kit-card-radius: var(--kit-radius-2);
 		--kit-card-padding-compact: var(--kit-space-1);
 		--kit-card-padding-default: var(--kit-space-2);
 		--kit-card-padding-comfortable: var(--kit-space-3);
-
-		--card-shape: var(--kit-card-radius);
-		--card-bg: var(--kit-card-bg);
-		--card-fg: var(--kit-card-fg);
-		--card-hover-bg: color-mix(in oklab, var(--card-bg), var(--card-fg) 6%);
-		--card-active-bg: color-mix(in oklab, var(--card-bg), var(--card-fg) 10%);
-		--card-hover-fg: var(--card-fg);
-		--card-active-fg: var(--card-fg);
+		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 6%);
+		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 10%);
 
 		display: flex;
 		flex-direction: column;
 		gap: var(--kit-space-2);
-		background: var(--card-bg);
-		color: var(--card-fg);
+		background: var(--kit-card-bg);
+		color: var(--kit-card-fg);
 		border: 0;
 		border-radius: var(--kit-card-radius);
 		box-sizing: border-box;
@@ -182,28 +177,26 @@
 		padding: var(--kit-card-padding-comfortable);
 	}
 
-	.kit-card--outline {
-		--outline-color: var(--kit-accent);
-		--card-bg: transparent;
-		--card-fg: var(--kit-accent);
-		--card-hover-bg: color-mix(in oklab, var(--kit-accent), transparent 80%);
-		--card-active-bg: color-mix(in oklab, var(--kit-accent), transparent 92%);
-		--kit-card-outline-color: var(--outline-color);
+	.kit-card[data-variant='filled'] {
+		--kit-card-bg: var(--kit-accent);
+		--kit-card-fg: white;
+		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-bg), black 10%);
+		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-bg), black 16%);
 	}
 
-	.kit-card--filled {
-		--card-bg: var(--kit-accent);
-		--card-fg: white;
-		--card-hover-bg: color-mix(in oklab, var(--kit-accent), black 10%);
-		--card-active-bg: color-mix(in oklab, var(--kit-accent), black 16%);
+	.kit-card[data-variant='outline'] {
+		--kit-card-bg: transparent;
+		--kit-card-fg: var(--kit-accent);
+		--kit-card-bd: var(--kit-accent);
+		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
+		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-fg), transparent 92%);
 	}
 
-	.kit-card--text {
-		background: transparent;
-		--card-bg: transparent;
-		--card-fg: var(--kit-accent);
-		--card-hover-bg: color-mix(in oklab, var(--kit-accent), transparent 80%);
-		--card-active-bg: color-mix(in oklab, var(--kit-accent), transparent 92%);
+	.kit-card[data-variant='text'] {
+		--kit-card-bg: transparent;
+		--kit-card-fg: var(--kit-accent);
+		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
+		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-fg), transparent 92%);
 	}
 
 	.kit-card[data-interactive='true'][data-disabled='false'] {
@@ -212,28 +205,24 @@
 
 	.kit-card[data-interactive='true'][data-disabled='false']:hover {
 		translate: 0 -1px;
-		background: var(--card-hover-bg);
-		color: var(--card-hover-fg);
+		background: var(--kit-card-hover-bg);
 		box-shadow: 0 10px 28px hsl(220 35% 8% / 0.12);
 	}
 
-	.kit-card--text[data-interactive='true'][data-disabled='false']:hover {
-		background: var(--card-hover-bg);
-		color: var(--card-hover-fg);
+	.kit-card[data-variant='text'][data-interactive='true'][data-disabled='false']:hover {
+		background: var(--kit-card-hover-bg);
 	}
 
 	.kit-card[data-interactive='true'][data-active='true'][data-disabled='false'],
 	.kit-card[data-interactive='true'][data-disabled='false']:active {
 		translate: 0 0;
-		background: var(--card-active-bg);
-		color: var(--card-active-fg);
+		background: var(--kit-card-active-bg);
 		box-shadow: 0 4px 14px hsl(220 35% 8% / 0.1);
 	}
 
-	.kit-card--text[data-interactive='true'][data-active='true'][data-disabled='false'],
-	.kit-card--text[data-interactive='true'][data-disabled='false']:active {
-		background: var(--card-active-bg);
-		color: var(--card-active-fg);
+	.kit-card[data-variant='text'][data-interactive='true'][data-active='true'][data-disabled='false'],
+	.kit-card[data-variant='text'][data-interactive='true'][data-disabled='false']:active {
+		background: var(--kit-card-active-bg);
 	}
 
 	.kit-card[data-interactive='true'][data-disabled='false']:focus-visible {
@@ -247,9 +236,7 @@
 	}
 
 	.kit-card .outline {
-		--outline-color: var(--kit-card-outline-color);
-		--btn-radius: var(--kit-card-radius);
-		pointer-events: none;
+		--outline-color: var(--kit-card-bd);
 	}
 
 	.kit-card__media {