lapikit 0.5.1 → 0.5.2

package/dist/components/accordion/accordion.svelte

@@ -12,8 +12,6 @@
 		's-class': sClass,
 		's-style': sStyle,
 		text = undefined,
-		dark = false,
-		light = false,
 		color = undefined,
 		background = undefined,
 		rounded = undefined,
@@ -46,8 +44,8 @@
 	let mergedStyle = $derived(
 		[
 			componentStyle,
-			color ? `--kit-accordion-color:${color}` : '',
-			background ? `--kit-accordion-background:${background}` : ''
+			color ? `--kit-accordion-fg:${color}` : '',
+			background ? `--kit-accordion-bg:${background}` : ''
 		]
 			.filter(Boolean)
 			.join('; ')
@@ -61,8 +59,6 @@
 	style={mergedStyle}
 	{...restProps}
 	data-text={text ? true : undefined}
-	data-dark={dark}
-	data-light={light}
 	data-spacer={spacer}
 	data-hide-icon={hideIcon}
 	data-rounded={rounded}
@@ -74,8 +70,8 @@
 	.kit-accordion {
 		--kit-accordion-radius: 8px;
 		--kit-accordion-gap: 0;
-		--kit-accordion-color: var(--kit-fg);
-		--kit-accordion-background: transparent;
+		--kit-accordion-fg: var(--kit-fg);
+		--kit-accordion-bg: transparent;
 
 		display: flex;
 		flex-wrap: wrap;
@@ -86,8 +82,8 @@
 		position: relative;
 		z-index: 1;
 		gap: var(--kit-accordion-gap);
-		color: var(--kit-accordion-color);
-		background: var(--kit-accordion-background);
+		color: var(--kit-accordion-fg);
+		background: var(--kit-accordion-bg);
 	}
 
 	.kit-accordion[data-spacer='true'] {
@@ -118,15 +114,6 @@
 		--kit-accordion-radius: 99999px;
 	}
 
-	.kit-accordion[data-dark='true'] {
-		--kit-accordion-background: var(--kit-surface-3);
-		--kit-accordion-color: var(--kit-fg);
-	}
-
-	.kit-accordion[data-light='true'] {
-		--kit-accordion-background: var(--kit-surface-1);
-	}
-
 	.kit-accordion[data-hide-icon='true'] :global(.kit-accordion-item__indicator) {
 		display: none;
 	}

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

@@ -4,8 +4,6 @@ export interface AccordionProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div';
     text?: string;
-    dark?: boolean;
-    light?: boolean;
     color?: string;
     background?: string;
     rounded?: RoundedType;
@@ -20,8 +18,6 @@ export interface AccordionItemProps extends Component {
     is?: 'div';
     index: number | string;
     text?: string;
-    dark?: boolean;
-    light?: boolean;
     rounded?: RoundedType;
     color?: string;
     background?: string;

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

@@ -14,8 +14,6 @@
 		activator = undefined,
 		indicator = undefined,
 		text = undefined,
-		dark = false,
-		light = false,
 		rounded = undefined,
 		color = undefined,
 		background = undefined,
@@ -51,8 +49,8 @@
 	let mergedStyle = $derived(
 		[
 			componentStyle,
-			color ? `--kit-accordion-item-color:${color}` : '',
-			background ? `--kit-accordion-item-background:${background}` : ''
+			color ? `--kit-accordion-item-fg:${color}` : '',
+			background ? `--kit-accordion-item-bg:${background}` : ''
 		]
 			.filter(Boolean)
 			.join('; ')
@@ -79,8 +77,6 @@
 	{...restProps}
 	data-open={safeOpen}
 	data-disabled={disabled}
-	data-dark={dark}
-	data-light={light}
 	data-rounded={rounded}
 >
 	<button
@@ -132,13 +128,9 @@
 
 	.kit-accordion-item {
 		--kit-accordion-item-radius: var(--kit-accordion-radius, 8px);
-		--kit-accordion-item-color: var(--kit-accordion-color, var(--kit-fg));
-		--kit-accordion-item-background: var(--kit-surface-2);
-		--kit-accordion-item-border: color-mix(
-			in oklab,
-			var(--kit-accordion-item-background),
-			var(--kit-fg) 12%
-		);
+		--kit-accordion-item-fg: var(--kit-accordion-fg, var(--kit-fg));
+		--kit-accordion-item-bg: var(--kit-surface-2);
+		--kit-accordion-item-bd: color-mix(in oklab, var(--kit-accordion-item-bg), var(--kit-fg) 12%);
 		--kit-accordion-item-trigger-y: 1rem;
 		--kit-accordion-item-trigger-x: 1.25rem;
 
@@ -146,9 +138,9 @@
 		max-width: 100%;
 		position: relative;
 		border-radius: var(--kit-accordion-item-radius);
-		background: var(--kit-accordion-item-background);
-		color: var(--kit-accordion-item-color);
-		border: 1px solid var(--kit-accordion-item-border);
+		background: var(--kit-accordion-item-bg);
+		color: var(--kit-accordion-item-fg);
+		border: 1px solid var(--kit-accordion-item-bd);
 		transition:
 			border-color 150ms ease,
 			background 150ms ease,
@@ -184,14 +176,6 @@
 		box-shadow: 0 10px 28px color-mix(in oklab, var(--kit-fg), transparent 90%);
 	}
 
-	.kit-accordion-item[data-dark='true'] {
-		--kit-accordion-item-background: var(--kit-surface-3);
-	}
-
-	.kit-accordion-item[data-light='true'] {
-		--kit-accordion-item-background: var(--kit-surface-1);
-	}
-
 	.kit-accordion-item__trigger {
 		width: 100%;
 		display: flex;

package/dist/components/alert/alert.svelte

@@ -147,15 +147,14 @@
 
 <style>
 	.kit-alert {
-		--kit-alert-bg: hsl(220 20% 96%);
-		--kit-alert-fg: hsl(222 20% 16%);
-		--kit-alert-bd: hsl(220 16% 85%);
+		--kit-alert-bg: var(--kit-surface-2);
+		--kit-alert-fg: var(--kit-fg);
+		--kit-alert-bd: var(--kit-border);
 		--kit-alert-radius: 8px;
 		--kit-alert-py: 0.75rem;
 		--kit-alert-px: 0.875rem;
 		--kit-alert-gap: 0.625rem;
 		--outline-color: var(--kit-alert-bd);
-		--btn-radius: var(--kit-alert-radius);
 
 		position: relative;
 		display: grid;
@@ -169,12 +168,6 @@
 		border: 1px solid var(--kit-alert-bd);
 	}
 
-	.kit-alert[data-variant='filled'] {
-		background: var(--kit-alert-bg);
-		color: var(--kit-alert-fg);
-		border-color: var(--kit-alert-bd);
-	}
-
 	.kit-alert[data-variant='outline'] {
 		background: transparent;
 		color: var(--kit-alert-fg);

package/dist/components/app/app.svelte

@@ -43,61 +43,14 @@
 			'Segoe UI Symbol', 'Noto Color Emoji';
 	}
 
-	:root {
-		--kit-neutral-bg: color-mix(in oklab, var(--kit-neutral), var(--kit-bg) 85%);
-		--kit-neutral-bd: color-mix(in oklab, var(--kit-neutral), var(--kit-border) 70%);
-		--kit-neutral-fg: var(--kit-fg);
-
-		--kit-success-bg: color-mix(in oklab, var(--kit-success), var(--kit-bg) 85%);
-		--kit-success-bd: color-mix(in oklab, var(--kit-success), var(--kit-border) 70%);
-		--kit-success-fg: var(--kit-fg);
-
-		--kit-warning-bg: color-mix(in oklab, var(--kit-warning), var(--kit-bg) 85%);
-		--kit-warning-bd: color-mix(in oklab, var(--kit-warning), var(--kit-border) 70%);
-		--kit-warning-fg: var(--kit-fg);
-
-		--kit-danger-bg: color-mix(in oklab, var(--kit-danger), var(--kit-bg) 85%);
-		--kit-danger-bd: color-mix(in oklab, var(--kit-danger), var(--kit-border) 70%);
-		--kit-danger-fg: var(--kit-fg);
-
-		--kit-info-bg: color-mix(in oklab, var(--kit-info), var(--kit-bg) 85%);
-		--kit-info-bd: color-mix(in oklab, var(--kit-info), var(--kit-border) 70%);
-		--kit-info-fg: var(--kit-fg);
-	}
-
-	:root {
-		--kit-outline-w: 1px;
-		--btn-radius: 8px;
-
-		--kit-btn-gap: 8px;
-
-		--bg: #111827;
-		--fg: #ffffff;
-		--bg-hover: #0b1220;
-		--border: rgba(255, 255, 255, 0.08);
-		--focus: blue;
-		--font:
-			ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-			'Segoe UI Symbol', 'Noto Color Emoji';
-	}
-
 	:global(.outline) {
-		--container-shape-start-start: var(--btn-radius);
-		--container-shape-start-end: var(--btn-radius);
-		--container-shape-end-start: var(--btn-radius);
-		--container-shape-end-end: var(--btn-radius);
-
-		border-width: var(--kit-outline-w);
-		inset: 0;
-		border-style: solid;
 		position: absolute;
+		inset: 0;
+		border: 1px solid var(--outline-color);
+		border-radius: inherit;
 		box-sizing: border-box;
-		border-color: var(--outline-color);
 		z-index: 1;
-		border-start-start-radius: var(--container-shape-start-start);
-		border-start-end-radius: var(--container-shape-start-end);
-		border-end-start-radius: var(--container-shape-end-start);
-		border-end-end-radius: var(--container-shape-end-end);
+		pointer-events: none;
 	}
 
 	:global(.kit-ripple) {

package/dist/components/appbar/appbar.svelte

@@ -12,10 +12,8 @@
 		's-class': sClass,
 		's-style': sStyle,
 		classContent,
-		light = false,
-		dark = false,
-		variant = 'outline',
-		rounded,
+		variant = 'filled',
+		rounded = 0,
 		background,
 		color,
 		density = 'default',
@@ -25,7 +23,7 @@
 	let safeVariant = $derived(
 		typeof variant === 'string' && (variant === 'outline' || variant === 'text')
 			? variant
-			: 'outline'
+			: 'filled'
 	);
 
 	let safeDensity = $derived(
@@ -70,8 +68,8 @@
 	let mergedStyle = $derived(
 		[
 			componentStyle,
-			background ? `--kit-appbar-background:${background}` : '',
-			color ? `--kit-appbar-color:${color}` : '',
+			background ? `--kit-appbar-bg:${background}` : '',
+			color ? `--kit-appbar-fg:${color}` : '',
 			typeof rounded === 'string' && rounded.includes('px') ? `--kit-appbar-radius:${rounded}` : ''
 		]
 			.filter(Boolean)
@@ -87,8 +85,6 @@
 	{...restProps}
 	data-variant={safeVariant}
 	data-density={safeDensity}
-	data-light={light || undefined}
-	data-dark={dark || undefined}
 	data-rounded={rounded}
 >
 	{#if safeVariant === 'outline'}
@@ -102,13 +98,13 @@
 
 <style>
 	.kit-appbar {
-		--kit-appbar-background: var(--kit-surface-2);
-		--kit-appbar-color: var(--kit-fg);
+		--kit-appbar-bg: var(--kit-surface-2);
+		--kit-appbar-fg: var(--kit-fg);
 		--kit-appbar-radius: 1rem;
 		--kit-appbar-size: 4rem;
 		--kit-appbar-padding-x: 1rem;
 		--kit-appbar-padding-wrapper: 0;
-		--kit-appbar-border: color-mix(in oklab, var(--kit-appbar-color), transparent 88%);
+		--kit-appbar-bd: color-mix(in oklab, var(--kit-appbar-fg), transparent 88%);
 
 		display: flex;
 		align-items: center;
@@ -118,13 +114,13 @@
 		min-height: var(--kit-appbar-size);
 		padding-inline: var(--kit-appbar-padding-x);
 		border-radius: var(--kit-appbar-radius);
-		color: var(--kit-appbar-color);
-		background-color: var(--kit-appbar-background);
+		color: var(--kit-appbar-fg);
+		background-color: var(--kit-appbar-bg);
 		overflow: hidden;
 	}
 
 	.kit-appbar[data-variant='text'] {
-		--kit-appbar-border: transparent;
+		--kit-appbar-bd: transparent;
 	}
 
 	.kit-appbar[data-density='compact'] {
@@ -142,17 +138,6 @@
 		--kit-appbar-padding-x: 1.5rem;
 	}
 
-	.kit-appbar[data-light='true'] {
-		--kit-appbar-background: color-mix(in oklab, white 88%, var(--kit-surface-1));
-		--kit-appbar-color: var(--kit-fg);
-	}
-
-	.kit-appbar[data-dark='true'] {
-		--kit-appbar-background: color-mix(in oklab, black 72%, var(--kit-surface-3));
-		--kit-appbar-color: white;
-		--kit-appbar-border: color-mix(in oklab, white, transparent 78%);
-	}
-
 	.kit-appbar[data-rounded='0'] {
 		--kit-appbar-radius: 0;
 	}
@@ -189,7 +174,7 @@
 	}
 
 	.kit-appbar .outline {
-		--outline-color: var(--kit-appbar-border);
+		--outline-color: var(--kit-appbar-bd);
 
 		pointer-events: none;
 	}

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

@@ -1,14 +1,12 @@
 import type { Component, RoundedType } from '../../@types';
 type Density = 'compact' | 'comfortable' | 'default';
-type Variant = 'outline' | 'text';
+type Variant = 'filled' | 'outline' | 'text';
 export interface AppbarProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'header' | 'nav';
     variant?: Variant;
     rounded?: RoundedType | string;
     density?: Density | Record<string, Density>;
-    dark?: boolean;
-    light?: boolean;
     color?: string;
     background?: string;
     classContent?: string | string[] | undefined;

package/dist/components/avatar/avatar.svelte

@@ -74,8 +74,18 @@
 
 <style>
 	.kit-avatar {
-		--kit-avatar-size: 2.25rem;
-		--kit-avatar-font-size: 0.875rem;
+		--kit-avatar-size-xs: 1.75rem;
+		--kit-avatar-size-sm: 2rem;
+		--kit-avatar-size-md: 2.25rem;
+		--kit-avatar-size-lg: 2.5rem;
+		--kit-avatar-size-xl: 2.75rem;
+		--kit-avatar-font-xs: 0.75rem;
+		--kit-avatar-font-sm: 0.8125rem;
+		--kit-avatar-font-md: 0.875rem;
+		--kit-avatar-font-lg: 1rem;
+		--kit-avatar-font-xl: 1.125rem;
+		--kit-avatar-size: var(--kit-avatar-size-md);
+		--kit-avatar-font-size: var(--kit-avatar-font-md);
 		--kit-avatar-density-scale: 1;
 
 		display: inline-flex;
@@ -98,24 +108,24 @@
 	}
 
 	.kit-avatar[data-size='xs'] {
-		--kit-avatar-size: 1.75rem;
-		--kit-avatar-font-size: 0.75rem;
+		--kit-avatar-size: var(--kit-avatar-size-xs);
+		--kit-avatar-font-size: var(--kit-avatar-font-xs);
 	}
 	.kit-avatar[data-size='sm'] {
-		--kit-avatar-size: 2rem;
-		--kit-avatar-font-size: 0.8125rem;
+		--kit-avatar-size: var(--kit-avatar-size-sm);
+		--kit-avatar-font-size: var(--kit-avatar-font-sm);
 	}
 	.kit-avatar[data-size='md'] {
-		--kit-avatar-size: 2.25rem;
-		--kit-avatar-font-size: 0.875rem;
+		--kit-avatar-size: var(--kit-avatar-size-md);
+		--kit-avatar-font-size: var(--kit-avatar-font-md);
 	}
 	.kit-avatar[data-size='lg'] {
-		--kit-avatar-size: 2.5rem;
-		--kit-avatar-font-size: 1rem;
+		--kit-avatar-size: var(--kit-avatar-size-lg);
+		--kit-avatar-font-size: var(--kit-avatar-font-lg);
 	}
 	.kit-avatar[data-size='xl'] {
-		--kit-avatar-size: 2.75rem;
-		--kit-avatar-font-size: 1.125rem;
+		--kit-avatar-size: var(--kit-avatar-size-xl);
+		--kit-avatar-font-size: var(--kit-avatar-font-xl);
 	}
 
 	.kit-avatar[data-density='compact'] {