lapikit 0.5.0 → 0.5.2

package/dist/components/chip/chip.svelte

@@ -58,7 +58,7 @@
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-chip',
-			className: `${className ?? ''} kit-chip--${safeVariant}`.trim(),
+			className: `${className ?? ''}`.trim(),
 			sClass,
 			classProps
 		})
@@ -230,9 +230,8 @@
 		--kit-chip-bg: var(--kit-surface-2);
 		--kit-chip-fg: var(--kit-fg);
 		--kit-chip-bd: var(--kit-border);
-		--kit-chip-bg--hover: color-mix(in oklab, var(--kit-chip-bg), var(--kit-chip-fg) 6%);
-		--kit-chip-bg--active: color-mix(in oklab, var(--kit-chip-bg), var(--kit-chip-fg) 10%);
-		--kit-chip-font: var(--kit-font);
+		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-bg), var(--kit-chip-fg) 6%);
+		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-bg), var(--kit-chip-fg) 10%);
 		--kit-chip-h-xs: 24px;
 		--kit-chip-h-sm: 28px;
 		--kit-chip-h-md: 32px;
@@ -243,9 +242,9 @@
 		--kit-chip-px-md: 12px;
 		--kit-chip-px-lg: 14px;
 		--kit-chip-px-xl: 16px;
-		--chip-density-scale: 1;
-		--chip-density-height-scale: 1;
-		--chip-radius: 99999px;
+		--kit-chip-density-scale: 1;
+		--kit-chip-density-h-scale: 1;
+		--kit-chip-radius: 99999px;
 		--kit-chip-gap: 0.35em;
 
 		position: relative;
@@ -253,12 +252,12 @@
 		box-sizing: border-box;
 		align-items: center;
 		justify-content: center;
-		font-family: var(--kit-chip-font);
-		background: var(--chip-bg);
-		color: var(--chip-fg);
-		height: max(24px, calc(var(--chip-h) * var(--chip-density-height-scale)));
-		padding-inline: calc(var(--chip-px) * var(--chip-density-scale));
-		border-radius: var(--chip-radius);
+		font-family: var(--kit-font);
+		background: var(--kit-chip-bg);
+		color: var(--kit-chip-fg);
+		height: max(24px, calc(var(--kit-chip-h) * var(--kit-chip-density-h-scale)));
+		padding-inline: calc(var(--kit-chip-px) * var(--kit-chip-density-scale));
+		border-radius: var(--kit-chip-radius);
 		text-decoration: none;
 		white-space: nowrap;
 		user-select: none;
@@ -274,23 +273,23 @@
 	}
 
 	.kit-chip[data-interactive='true']:hover {
-		background: var(--chip-hover-bg);
-		color: var(--chip-hover-fg);
-		text-decoration: var(--chip-decoration);
+		background: var(--kit-chip-hover-bg);
+		color: var(--kit-chip-fg);
+		text-decoration: var(--kit-chip-decoration);
 	}
 
 	.kit-chip[data-interactive='true']:active,
 	.kit-chip[data-active='true'] {
-		background: var(--chip-active-bg);
-		color: var(--chip-active-fg);
-		text-decoration: var(--chip-decoration);
+		background: var(--kit-chip-active-bg);
+		color: var(--kit-chip-fg);
+		text-decoration: var(--kit-chip-decoration);
 		transform: translateY(1px);
 	}
 
 	.kit-chip[data-active='true'][data-interactive='true']:hover {
-		background: var(--chip-hover-bg);
-		color: var(--chip-hover-fg);
-		text-decoration: var(--chip-decoration);
+		background: var(--kit-chip-hover-bg);
+		color: var(--kit-chip-fg);
+		text-decoration: var(--kit-chip-decoration);
 	}
 
 	:is(.kit-chip:focus-visible, .kit-chip:has(> input:focus-visible)) {
@@ -310,47 +309,43 @@
 	}
 
 	.kit-chip > :is(input[type='checkbox'], input[type='radio']):after {
-		--chip-content: attr(aria-label);
-		content: var(--chip-content);
+		content: attr(aria-label);
 		cursor: pointer;
 	}
 
 	.kit-chip[data-variant='filled'] {
-		--chip-bg: var(--kit-accent);
-		--chip-fg: white;
-		--chip-hover-bg: color-mix(in oklab, var(--kit-accent), black 10%);
-		--chip-hover-fg: var(--chip-fg);
-		--chip-active-bg: color-mix(in oklab, var(--kit-accent), black 16%);
-		--chip-active-fg: var(--chip-fg);
+		--kit-chip-bg: var(--kit-accent);
+		--kit-chip-fg: white;
+		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-bg), black 10%);
+		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-bg), black 16%);
 	}
 
 	.kit-chip[data-variant='outline'] {
 		--outline-color: var(--kit-accent);
+		--kit-chip-bg: transparent;
+		--kit-chip-fg: var(--kit-accent);
+		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 80%);
+		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 92%);
 	}
 
-	.kit-chip[data-variant='outline'],
 	.kit-chip[data-variant='text'] {
-		--chip-bg: transparent;
-		--chip-fg: var(--kit-accent);
-		--chip-hover-bg: color-mix(in oklab, var(--kit-accent), transparent 80%);
-		--chip-hover-fg: var(--chip-fg);
-		--chip-active-bg: color-mix(in oklab, var(--kit-accent), transparent 92%);
-		--chip-active-fg: var(--chip-fg);
+		--kit-chip-bg: transparent;
+		--kit-chip-fg: var(--kit-accent);
+		--kit-chip-hover-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 80%);
+		--kit-chip-active-bg: color-mix(in oklab, var(--kit-chip-fg), transparent 92%);
 	}
 
 	.kit-chip[data-variant='link'] {
-		--chip-bg: transparent;
-		--chip-fg: var(--kit-accent);
-		--chip-hover-fg: var(--chip-fg);
-		--chip-active-fg: var(--chip-fg);
-		--chip-decoration: underline;
+		--kit-chip-bg: transparent;
+		--kit-chip-fg: var(--kit-accent);
+		--kit-chip-decoration: underline;
 		height: inherit;
 		padding: 0;
 	}
 
 	.kit-chip[data-size='xs'] {
-		--chip-h: var(--kit-chip-h-xs);
-		--chip-px: var(--kit-chip-px-xs);
+		--kit-chip-h: var(--kit-chip-h-xs);
+		--kit-chip-px: var(--kit-chip-px-xs);
 		font-size: 12px;
 	}
 	.kit-chip[data-size='xs'] :global(.kit-icon:not([data-size])) {
@@ -358,8 +353,8 @@
 	}
 
 	.kit-chip[data-size='sm'] {
-		--chip-h: var(--kit-chip-h-sm);
-		--chip-px: var(--kit-chip-px-sm);
+		--kit-chip-h: var(--kit-chip-h-sm);
+		--kit-chip-px: var(--kit-chip-px-sm);
 		font-size: 13px;
 	}
 	.kit-chip[data-size='sm'] :global(.kit-icon:not([data-size])) {
@@ -367,8 +362,8 @@
 	}
 
 	.kit-chip[data-size='md'] {
-		--chip-h: var(--kit-chip-h-md);
-		--chip-px: var(--kit-chip-px-md);
+		--kit-chip-h: var(--kit-chip-h-md);
+		--kit-chip-px: var(--kit-chip-px-md);
 		font-size: 14px;
 	}
 	.kit-chip[data-size='md'] :global(.kit-icon:not([data-size])) {
@@ -376,8 +371,8 @@
 	}
 
 	.kit-chip[data-size='lg'] {
-		--chip-h: var(--kit-chip-h-lg);
-		--chip-px: var(--kit-chip-px-lg);
+		--kit-chip-h: var(--kit-chip-h-lg);
+		--kit-chip-px: var(--kit-chip-px-lg);
 		font-size: 15px;
 	}
 	.kit-chip[data-size='lg'] :global(.kit-icon:not([data-size])) {
@@ -385,8 +380,8 @@
 	}
 
 	.kit-chip[data-size='xl'] {
-		--chip-h: var(--kit-chip-h-xl);
-		--chip-px: var(--kit-chip-px-xl);
+		--kit-chip-h: var(--kit-chip-h-xl);
+		--kit-chip-px: var(--kit-chip-px-xl);
 		font-size: 16px;
 	}
 	.kit-chip[data-size='xl'] :global(.kit-icon:not([data-size])) {
@@ -394,18 +389,18 @@
 	}
 
 	.kit-chip[data-density='default'] {
-		--chip-density-scale: 1;
-		--chip-density-height-scale: 1;
+		--kit-chip-density-scale: 1;
+		--kit-chip-density-h-scale: 1;
 	}
 
 	.kit-chip[data-density='compact'] {
-		--chip-density-scale: 0.92;
-		--chip-density-height-scale: 0.9;
+		--kit-chip-density-scale: 0.92;
+		--kit-chip-density-h-scale: 0.9;
 	}
 
 	.kit-chip[data-density='comfortable'] {
-		--chip-density-scale: 1.08;
-		--chip-density-height-scale: 1.08;
+		--kit-chip-density-scale: 1.08;
+		--kit-chip-density-h-scale: 1.08;
 	}
 
 	.kit-chip[data-label-style='true'] {
@@ -414,10 +409,6 @@
 		text-transform: uppercase;
 	}
 
-	.kit-chip .outline {
-		pointer-events: none;
-	}
-
 	.kit-chip__inner {
 		display: inline-flex;
 		align-items: center;
@@ -479,14 +470,14 @@
 	}
 
 	.kit-chip[data-disabled='true'] {
-		background: color-mix(in oklab, var(--chip-bg), transparent 70%);
-		color: color-mix(in oklab, var(--chip-fg), transparent 45%);
+		background: color-mix(in oklab, var(--kit-chip-bg), transparent 70%);
+		color: color-mix(in oklab, var(--kit-chip-fg), transparent 45%);
 	}
 
 	.kit-chip[data-disabled='true'] :global(.kit-icon),
 	.kit-chip[data-readonly='true'] :global(.kit-icon) {
-		color: color-mix(in oklab, var(--chip-fg), transparent 45%) !important;
-		--kit-icon-color: color-mix(in oklab, var(--chip-fg), transparent 45%) !important;
+		color: color-mix(in oklab, var(--kit-chip-fg), transparent 45%) !important;
+		--kit-icon-color: color-mix(in oklab, var(--kit-chip-fg), transparent 45%) !important;
 	}
 
 	.kit-chip[data-disabled='true'] :global(.kit-icon img),

package/dist/components/dropdown/dropdown.svelte

@@ -9,8 +9,6 @@
 		ref = $bindable(),
 		children,
 		activator,
-		dark = false,
-		light = false,
 		rounded,
 		position = 'bottom',
 		closeOnClick = false,
@@ -54,8 +52,8 @@
 	let mergedStyle = $derived(
 		[
 			componentStyle,
-			background ? `--kit-dropdown-background:${background}` : '',
-			color ? `--kit-dropdown-color:${color}` : '',
+			background ? `--kit-dropdown-bg:${background}` : '',
+			color ? `--kit-dropdown-fg:${color}` : '',
 			typeof rounded === 'string' && rounded.includes('px')
 				? `--kit-dropdown-radius:${rounded}`
 				: ''
@@ -171,8 +169,6 @@
 		class={componentClass}
 		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
 		role="menu"
-		data-light={light || undefined}
-		data-dark={dark || undefined}
 		data-rounded={rounded}
 		data-position={axis.location ?? safePosition}
 		onmouseover={() => handleMouseEvent('open', activatorRef)}
@@ -190,10 +186,10 @@
 
 <style>
 	.kit-dropdown-content {
-		--kit-dropdown-background: var(--kit-surface-1);
-		--kit-dropdown-color: var(--kit-fg);
+		--kit-dropdown-bg: var(--kit-surface-1);
+		--kit-dropdown-fg: var(--kit-fg);
 		--kit-dropdown-radius: 12px;
-		--kit-dropdown-border: color-mix(in oklab, var(--kit-fg), transparent 88%);
+		--kit-dropdown-bd: color-mix(in oklab, var(--kit-fg), transparent 88%);
 		--kit-dropdown-shadow: 0 18px 40px -18px color-mix(in oklab, black 24%, transparent);
 
 		position: fixed;
@@ -201,26 +197,15 @@
 		min-width: 12rem;
 		max-width: min(22rem, calc(100vw - 1rem));
 		padding: 0.375rem;
-		border: 1px solid var(--kit-dropdown-border);
+		border: 1px solid var(--kit-dropdown-bd);
 		border-radius: var(--kit-dropdown-radius);
-		background: var(--kit-dropdown-background);
-		color: var(--kit-dropdown-color);
+		background: var(--kit-dropdown-bg);
+		color: var(--kit-dropdown-fg);
 		box-shadow: var(--kit-dropdown-shadow);
 		transform-origin: top left;
 		animation: kit-dropdown-enter 140ms ease;
 	}
 
-	.kit-dropdown-content[data-light='true'] {
-		--kit-dropdown-background: color-mix(in oklab, white 94%, var(--kit-surface-1));
-		--kit-dropdown-color: var(--kit-fg);
-	}
-
-	.kit-dropdown-content[data-dark='true'] {
-		--kit-dropdown-background: color-mix(in oklab, black 78%, var(--kit-surface-3));
-		--kit-dropdown-color: white;
-		--kit-dropdown-border: color-mix(in oklab, white, transparent 80%);
-	}
-
 	.kit-dropdown-content[data-rounded='0'] {
 		--kit-dropdown-radius: 0;
 	}

package/dist/components/dropdown/dropdown.types.d.ts

@@ -12,8 +12,6 @@ export type ModelDropdownProps = {
 };
 export interface DropdownProps extends Component {
     ref?: HTMLElement | null;
-    dark?: boolean;
-    light?: boolean;
     rounded?: RoundedType | string;
     position?: 'top' | 'bottom' | 'left' | 'right';
     openOnHover?: boolean;

package/dist/components/list/list.svelte

@@ -94,10 +94,30 @@
 		--kit-list-fg: var(--kit-fg);
 		--kit-list-bd: var(--kit-border);
 		--kit-list-radius: 10px;
-		--kit-list-item-h: 2.75rem;
-		--kit-list-item-px: 0.875rem;
-		--kit-list-item-gap: 0.625rem;
-		--kit-list-item-font: 0.9375rem;
+		--kit-list-item-h-xs: 2.125rem;
+		--kit-list-item-h-sm: 2.375rem;
+		--kit-list-item-h-md: 2.75rem;
+		--kit-list-item-h-lg: 3.125rem;
+		--kit-list-item-h-xl: 3.5rem;
+		--kit-list-item-px-xs: 0.625rem;
+		--kit-list-item-px-sm: 0.75rem;
+		--kit-list-item-px-md: 0.875rem;
+		--kit-list-item-px-lg: 1rem;
+		--kit-list-item-px-xl: 1.125rem;
+		--kit-list-item-gap-xs: 0.5rem;
+		--kit-list-item-gap-sm: 0.5rem;
+		--kit-list-item-gap-md: 0.625rem;
+		--kit-list-item-gap-lg: 0.75rem;
+		--kit-list-item-gap-xl: 0.875rem;
+		--kit-list-item-font-xs: 0.75rem;
+		--kit-list-item-font-sm: 0.875rem;
+		--kit-list-item-font-md: 0.9375rem;
+		--kit-list-item-font-lg: 1rem;
+		--kit-list-item-font-xl: 1.0625rem;
+		--kit-list-item-h: var(--kit-list-item-h-md);
+		--kit-list-item-px: var(--kit-list-item-px-md);
+		--kit-list-item-gap: var(--kit-list-item-gap-md);
+		--kit-list-item-font: var(--kit-list-item-font-md);
 
 		display: flex;
 		flex-direction: column;
@@ -114,38 +134,38 @@
 	}
 
 	.kit-list[data-size='xs'] {
-		--kit-list-item-h: 2.125rem;
-		--kit-list-item-px: 0.625rem;
-		--kit-list-item-gap: 0.5rem;
-		--kit-list-item-font: 0.75rem;
+		--kit-list-item-h: var(--kit-list-item-h-xs);
+		--kit-list-item-px: var(--kit-list-item-px-xs);
+		--kit-list-item-gap: var(--kit-list-item-gap-xs);
+		--kit-list-item-font: var(--kit-list-item-font-xs);
 	}
 
 	.kit-list[data-size='sm'] {
-		--kit-list-item-h: 2.375rem;
-		--kit-list-item-px: 0.75rem;
-		--kit-list-item-gap: 0.5rem;
-		--kit-list-item-font: 0.875rem;
+		--kit-list-item-h: var(--kit-list-item-h-sm);
+		--kit-list-item-px: var(--kit-list-item-px-sm);
+		--kit-list-item-gap: var(--kit-list-item-gap-sm);
+		--kit-list-item-font: var(--kit-list-item-font-sm);
 	}
 
 	.kit-list[data-size='md'] {
-		--kit-list-item-h: 2.75rem;
-		--kit-list-item-px: 0.875rem;
-		--kit-list-item-gap: 0.625rem;
-		--kit-list-item-font: 0.9375rem;
+		--kit-list-item-h: var(--kit-list-item-h-md);
+		--kit-list-item-px: var(--kit-list-item-px-md);
+		--kit-list-item-gap: var(--kit-list-item-gap-md);
+		--kit-list-item-font: var(--kit-list-item-font-md);
 	}
 
 	.kit-list[data-size='lg'] {
-		--kit-list-item-h: 3.125rem;
-		--kit-list-item-px: 1rem;
-		--kit-list-item-gap: 0.75rem;
-		--kit-list-item-font: 1rem;
+		--kit-list-item-h: var(--kit-list-item-h-lg);
+		--kit-list-item-px: var(--kit-list-item-px-lg);
+		--kit-list-item-gap: var(--kit-list-item-gap-lg);
+		--kit-list-item-font: var(--kit-list-item-font-lg);
 	}
 
 	.kit-list[data-size='xl'] {
-		--kit-list-item-h: 3.5rem;
-		--kit-list-item-px: 1.125rem;
-		--kit-list-item-gap: 0.875rem;
-		--kit-list-item-font: 1.0625rem;
+		--kit-list-item-h: var(--kit-list-item-h-xl);
+		--kit-list-item-px: var(--kit-list-item-px-xl);
+		--kit-list-item-gap: var(--kit-list-item-gap-xl);
+		--kit-list-item-font: var(--kit-list-item-font-xl);
 	}
 
 	.kit-list[data-density='compact'] {

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

@@ -99,7 +99,7 @@
 	.kit-list-item {
 		--kit-list-item-bg: transparent;
 		--kit-list-item-fg: inherit;
-		--list-item-shape: 8px;
+		--kit-list-item-radius: 8px;
 
 		position: relative;
 		display: grid;
@@ -109,7 +109,7 @@
 		min-height: var(--kit-list-item-h, 2.75rem);
 		padding-inline: var(--kit-list-item-px, 0.875rem);
 		border: 0;
-		border-radius: var(--list-item-shape);
+		border-radius: var(--kit-list-item-radius);
 		background: var(--kit-list-item-bg);
 		color: var(--kit-list-item-fg);
 		text-decoration: none;
@@ -119,34 +119,34 @@
 	}
 
 	.kit-list-item[data-rounded='0'] {
-		--list-item-shape: 0;
+		--kit-list-item-radius: 0;
 	}
 
 	.kit-list-item[data-rounded='xs'] {
-		--list-item-shape: 2px;
+		--kit-list-item-radius: 2px;
 	}
 
 	.kit-list-item[data-rounded='sm'] {
-		--list-item-shape: 8px;
+		--kit-list-item-radius: 8px;
 	}
 
 	.kit-list-item[data-rounded='md'] {
-		--list-item-shape: 12px;
+		--kit-list-item-radius: 12px;
 	}
 
 	.kit-list-item[data-rounded='lg'] {
-		--list-item-shape: 16px;
+		--kit-list-item-radius: 16px;
 	}
 
 	.kit-list-item[data-rounded='xl'] {
-		--list-item-shape: 9999px;
+		--kit-list-item-radius: 9999px;
 	}
 
-	.kit-list[data-variant='filled'] .kit-list-item {
+	:global(.kit-list[data-variant='filled']) .kit-list-item {
 		background: var(--kit-list-item-bg, transparent);
 	}
 
-	.kit-list[data-variant='outline'] .kit-list-item::before {
+	:global(.kit-list[data-variant='outline']) .kit-list-item::before {
 		content: '';
 		position: absolute;
 		inset: 0;

package/dist/components/popover/popover.svelte

@@ -9,8 +9,6 @@
 		open = $bindable(false),
 		children,
 		activator,
-		dark = false,
-		light = false,
 		rounded,
 		position = 'bottom',
 		color,
@@ -52,8 +50,8 @@
 	let mergedStyle = $derived(
 		[
 			componentStyle,
-			background ? `--kit-popover-background:${background}` : '',
-			color ? `--kit-popover-color:${color}` : '',
+			background ? `--kit-popover-bg:${background}` : '',
+			color ? `--kit-popover-fg:${color}` : '',
 			typeof rounded === 'string' && rounded.includes('px') ? `--kit-popover-radius:${rounded}` : ''
 		]
 			.filter(Boolean)
@@ -122,8 +120,6 @@
 		class={componentClass}
 		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
 		role="dialog"
-		data-light={light || undefined}
-		data-dark={dark || undefined}
 		data-rounded={rounded}
 		data-position={axis.location ?? safePosition}
 		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: () => (open = false) }}
@@ -135,10 +131,10 @@
 
 <style>
 	.kit-popover-content {
-		--kit-popover-background: var(--kit-surface-1);
-		--kit-popover-color: var(--kit-fg);
+		--kit-popover-bg: var(--kit-surface-1);
+		--kit-popover-fg: var(--kit-fg);
 		--kit-popover-radius: 12px;
-		--kit-popover-border: color-mix(in oklab, var(--kit-fg), transparent 88%);
+		--kit-popover-bd: color-mix(in oklab, var(--kit-fg), transparent 88%);
 		--kit-popover-shadow: 0 18px 40px -18px color-mix(in oklab, black 24%, transparent);
 
 		position: fixed;
@@ -147,26 +143,15 @@
 		width: auto;
 		max-width: min(28rem, calc(100vw - 1rem));
 		padding: 1rem;
-		border: 1px solid var(--kit-popover-border);
+		border: 1px solid var(--kit-popover-bd);
 		border-radius: var(--kit-popover-radius);
-		background: var(--kit-popover-background);
-		color: var(--kit-popover-color);
+		background: var(--kit-popover-bg);
+		color: var(--kit-popover-fg);
 		box-shadow: var(--kit-popover-shadow);
 		opacity: 1;
 		transition: opacity 140ms ease;
 	}
 
-	.kit-popover-content[data-light='true'] {
-		--kit-popover-background: color-mix(in oklab, white 94%, var(--kit-surface-1));
-		--kit-popover-color: var(--kit-fg);
-	}
-
-	.kit-popover-content[data-dark='true'] {
-		--kit-popover-background: color-mix(in oklab, black 78%, var(--kit-surface-3));
-		--kit-popover-color: white;
-		--kit-popover-border: color-mix(in oklab, white, transparent 80%);
-	}
-
 	.kit-popover-content[data-rounded='0'] {
 		--kit-popover-radius: 0;
 	}

package/dist/components/popover/popover.types.d.ts

@@ -11,8 +11,6 @@ export type ModelPopoverProps = {
 export interface PopoverProps extends Component {
     ref?: HTMLElement | null;
     open?: boolean;
-    dark?: boolean;
-    light?: boolean;
     rounded?: RoundedType | string;
     position?: 'top' | 'bottom' | 'left' | 'right';
     color?: string;

package/dist/components/separator/separator.svelte

@@ -6,8 +6,6 @@
 	let {
 		ref = $bindable(),
 		is = 'hr',
-		light = false,
-		dark = false,
 		inset = false,
 		thickness,
 		orientation = 'horizontal',
@@ -72,8 +70,6 @@
 	style={mergedStyle}
 	role="separator"
 	aria-orientation={safeOrientation}
-	data-light={light || undefined}
-	data-dark={dark || undefined}
 	data-inset={inset || undefined}
 	data-orientation={safeOrientation}
 />
@@ -96,14 +92,6 @@
 		transition: inherit;
 	}
 
-	.kit-separator[data-light='true'] {
-		--kit-separator-color: color-mix(in oklab, var(--kit-fg), white 40%);
-	}
-
-	.kit-separator[data-dark='true'] {
-		--kit-separator-color: color-mix(in oklab, white, transparent 18%);
-	}
-
 	.kit-separator[data-inset]:not([data-orientation='vertical']) {
 		max-width: calc(100% - 4.5rem);
 		margin-inline-start: 4.5rem;

package/dist/components/separator/separator.types.d.ts

@@ -3,8 +3,6 @@ type Orientation = 'horizontal' | 'vertical';
 export interface SeparatorProps extends Base {
     ref?: HTMLElement | null;
     is?: 'div' | 'hr';
-    light?: boolean;
-    dark?: boolean;
     inset?: boolean;
     thickness?: string | number;
     opacity?: string | number;