lapikit 0.1.13 → 0.1.15

package/bin/lapikit.js

@@ -35,7 +35,7 @@ if (process.argv.includes('--help') || process.argv.includes('-h')) {
 		terminal('error', `failed to create configuration file:\n\n ${error}`);
 		terminal(
 			'warn',
-			`you can create lapikit.config.js manually, please visite https://localhost:3000/docs for more information`
+			`you can create lapikit.config.js manually, please visite https://lapikit.dev/docs/getting-started for more information`
 		);
 	}
 
@@ -44,9 +44,10 @@ if (process.argv.includes('--help') || process.argv.includes('-h')) {
 
 	terminal(
 		'info',
-		`${ansi.bold.blue('Thank to use lapikit, discover all posibility with lapikit on https://localhost:3000/docs')}\n\n`
+		`${ansi.bold.blue('Thank to use lapikit, discover all posibility with lapikit on https://lapikit.dev')}\n\n`
 	);
 
+	console.log('Website: https://lapikit.dev');
 	console.log('Github: https://github.com/nycolaide/lapikit');
 	console.log('Support the developement: https://buymeacoffee.com/nycolaide');
 } else {

package/dist/components/app/app.css

@@ -4,7 +4,7 @@
 	left: 0;
 	height: 100%;
 	width: 100%;
-	background-color: color-mix(in oklab, var(--kit-shadow) 45%, transparent);
+	background-color: color-mix(in oklab, var(--kit-shadow) 70%, transparent);
 	z-index: 9000;
 	cursor: default;
 }

package/dist/components/appbar/appbar.svelte

@@ -23,7 +23,6 @@
 	this={is}
 	bind:this={ref}
 	{...rest}
-	role="heading"
 	class={[
 		'kit-appbar',
 		light && 'light',

package/dist/components/button/button.css

@@ -17,6 +17,7 @@
 	border-radius: var(--button-radius);
 	color: var(--button-color);
 	font-weight: 500;
+	text-decoration: none;
 }
 
 .kit-button,

package/dist/components/button/button.svelte

@@ -65,6 +65,7 @@
 	disabled={href ? undefined : disabled}
 	type={href ? undefined : type}
 	use:ripple={{
+		component: 'button',
 		disabled: noRipple || disabled
 	}}
 	style:--base={assets.color(background)}

package/dist/components/card/card.svelte

@@ -52,6 +52,7 @@
 	]}
 	disabled={href ? undefined : disabled}
 	use:ripple={{
+		component: 'card',
 		disabled: noRipple || disabled || !isClickable
 	}}
 	style:--base={assets.color(background)}

package/dist/components/chip/chip.css

@@ -17,6 +17,7 @@
 	border-radius: var(--chip-radius);
 	color: var(--chip-color);
 	font-weight: 500;
+	text-decoration: none;
 }
 
 .kit-chip:not(div):not(span) {

package/dist/components/chip/chip.svelte

@@ -76,6 +76,7 @@
 		disabled={href ? undefined : disabled}
 		type={href ? undefined : type}
 		use:ripple={{
+			component: 'chip',
 			disabled: noRipple || disabled || is === 'div' || is === 'span'
 		}}
 		style:--base={assets.color(background)}

package/dist/components/list/list.css

@@ -29,6 +29,7 @@
 	color: var(--list-item-color);
 	border-radius: var(--list-item-radius);
 	font-weight: 500;
+	text-decoration: none;
 }
 
 .kit-list-item:not(div) {

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

@@ -47,6 +47,7 @@
 		rest.class
 	]}
 	use:ripple={{
+		component: 'list-item',
 		disabled: noRipple || disabled || is === 'div'
 	}}
 	role={is === 'button' ? 'listitem' : undefined}

package/dist/components/modal/modal.svelte

@@ -80,6 +80,7 @@
 {#if open}
 	<div
 		bind:this={ref}
+		{...rest}
 		class={['kit-modal', contain && 'kit-modal--contain', rest.class]}
 		role="dialog"
 	>

package/dist/internal/ripple.d.ts

@@ -1,4 +1,5 @@
 interface RippleOptions {
+    component?: string;
     center?: boolean;
     color?: string;
     duration?: number;

package/dist/internal/ripple.js

@@ -26,6 +26,9 @@ export function ripple(el, options = {}) {
         if (options.duration && options.duration < 0) {
             options.duration = undefined;
         }
+        if (options.component) {
+            rippleContainer.style.setProperty('--ripple-radius', `var(--${options.component}-radius)`);
+        }
         if (options.color) {
             rippleContainer.style.setProperty('--ripple-color', options.color);
         }

package/dist/style/animation.css

@@ -29,6 +29,7 @@
 	transition: 0.6s;
 	-webkit-animation: lapikit-ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
 	animation: lapikit-ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
+	border-radius: var(--ripple-radius);
 }
 
 .kit-ripple--center {
@@ -47,6 +48,7 @@
 	background: none;
 	pointer-events: none;
 	z-index: 999;
+	border-radius: var(--ripple-radius);
 }
 
 @keyframes lapikit-ripple {

package/dist/style/parser/color.js

@@ -38,7 +38,7 @@ export const colors = (config) => {
             }
             cssVariables += `}\n`;
             cssVariables += `.${inversed} {\n`;
-            cssVariables += `color-scheme: ${used};\n`;
+            cssVariables += `color-scheme: ${inversed};\n`;
             for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
                 cssVariables += `--kit-${colorName}: ${colorValue};\n`;
             }
@@ -56,7 +56,7 @@ export const colors = (config) => {
         }
         cssVariables += `}\n`;
         cssVariables += `.${inversed} {\n`;
-        cssVariables += `color-scheme: ${used};\n`;
+        cssVariables += `color-scheme: ${inversed};\n`;
         for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
             cssVariables += `--kit-${colorName}: ${colorValue};\n`;
         }

package/package.json

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