Remove all legacy component lapikit

.github/workflows/current.yml

@@ -7,6 +7,8 @@ on:
   pull_request:
     branches:
       - main
+  repository_dispatch:
+    types: [lapikit-updated]
 
 jobs:
   build:

README.md

@@ -35,14 +35,24 @@ pnpm add -D lapikit
 bun add -D lapikit
 ```
 
+Connect lapikit on your svelte configuration:
+
+```js
+// svelte.config.js
+import { lapikitPreprocess } from 'lapikit/labs/preprocess';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	preprocess: [lapikitPreprocess()]
+};
+
+export default config;
+```
+
 Use your first component:
 
 ```svelte
-<script lang="ts">
-	import { Button } from 'lapikit/components';
-</script>
-
-<Button variant="filled">Click me</Button>
+<kit:btn variant="filled">Click me</kit:btn>
 ```
 
 ### Documentation

src/content/docs/changelog.md

@@ -1,6 +1,8 @@
 ---
-title: "changelog"
-description: "Follow the latest Lapikit developments, updates and fixes. Transparency and continuous improvement for your components."
+title: 'changelog'
+description: 'Follow the latest Lapikit developments, updates and fixes. Transparency and continuous improvement for your components.'
 ---
 
+# Changelog
+
 <p>Changelog Content</p>

src/lib/@legacy/background-star.svelte

@@ -45,10 +45,10 @@
 
 	.dot {
 		position: absolute;
-		background: color-mix(in oklab, var(--kit-accent-primary) 80%, transparent);
+		background: color-mix(in oklab, var(--primary-legacy) 80%, transparent);
 		border-radius: 50%;
 		opacity: 0;
-		box-shadow: 0 0 6px color-mix(in oklab, var(--kit-accent-primary) 80%, transparent);
+		box-shadow: 0 0 6px color-mix(in oklab, var(--primary-legacy) 80%, transparent);
 		animation-name: blink;
 		animation-timing-function: ease-in-out;
 		animation-iteration-count: infinite;

src/lib/@legacy/earth-moon-lapikit.svelte

@@ -64,12 +64,12 @@
 	}
 
 	.planet-svg path {
-		fill: var(--kit-background-primary);
+		fill: var(--bg-primary-legacy);
 	}
 
 	.planet-padding {
 		position: relative;
-		background-color: var(--kit-background-primary);
+		background-color: var(--bg-primary-legacy);
 		width: 100%;
 		height: 100px;
 	}