From 6e3c921e96279f0523d1db4c31068b05635be28a Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Fri, 10 Jul 2026 16:54:08 +0200 Subject: [PATCH 1/7] update documentation for card and list --- src/content/docs/components/card.md | 5 +-- src/content/docs/components/list.md | 52 ++++++++++++++--------------- 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/content/docs/components/card.md b/src/content/docs/components/card.md index 87082b34..c7113156 100644 --- a/src/content/docs/components/card.md +++ b/src/content/docs/components/card.md @@ -1,6 +1,6 @@ --- -title: "Card" -description: "Organize and display content in visually coherent blocks. The Lapikit card component is easy to style." +title: 'Card' +description: 'Organize and display content in visually coherent blocks. The Lapikit card component is easy to style.' --- -
+
Date: Tue, 14 Jul 2026 23:35:58 +0200 Subject: [PATCH 5/7] test bugfix for color and background color variable not working with new version lapikit --- bun.lock | 4 ++-- package.json | 2 +- src/routes/+page.svelte | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bun.lock b/bun.lock index 4ca3d32c..20e4bb86 100644 --- a/bun.lock +++ b/bun.lock @@ -27,7 +27,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.b3a5bc3", + "lapikit": "^0.0.0-insiders.50d6d6a", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", @@ -529,7 +529,7 @@ "known-css-properties": ["known-css-properties@0.37.0", "", {}, "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ=="], - "lapikit": ["lapikit@0.0.0-insiders.b3a5bc3", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-XtjHV9Gp7peVbMz43WtWYkFUxYuKRNUIYAR6vqjAv55gCWWaTIoKI3i0Hn2WgQ8QQiTB/Xvmh/OqlX8i8s4JjA=="], + "lapikit": ["lapikit@0.0.0-insiders.50d6d6a", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-mFT5eCjtaYVxGJLynDXv2PSSkcF7MH6n9PlMtbArhHNHk6qYCagyvVP3aA3YvdqeKWqsErUG8zp2OslGevBeGA=="], "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="], diff --git a/package.json b/package.json index 677be040..9b54c3f0 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.b3a5bc3", + "lapikit": "^0.0.0-insiders.50d6d6a", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 21b81235..5a4dea54 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -297,7 +297,7 @@ density="comfortable" style="--kit-chip-fg: var(--fg-primary-legacy); --outline-color: var(--fg-primary-legacy);" size="lg" - class="px-1!" + class="px-1.5!" > {#snippet prepend()} From c8b9b72b2cf3f165e72da5bc6adca80687116679 Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Wed, 15 Jul 2026 20:56:15 +0200 Subject: [PATCH 6/7] update lapikit insiders version and update variables color on homepage --- bun.lock | 4 ++-- package.json | 2 +- src/routes/+page.svelte | 23 +++++++++++++++++++---- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/bun.lock b/bun.lock index 20e4bb86..0e029b37 100644 --- a/bun.lock +++ b/bun.lock @@ -27,7 +27,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.50d6d6a", + "lapikit": "^0.0.0-insiders.f9d3332", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", @@ -529,7 +529,7 @@ "known-css-properties": ["known-css-properties@0.37.0", "", {}, "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ=="], - "lapikit": ["lapikit@0.0.0-insiders.50d6d6a", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-mFT5eCjtaYVxGJLynDXv2PSSkcF7MH6n9PlMtbArhHNHk6qYCagyvVP3aA3YvdqeKWqsErUG8zp2OslGevBeGA=="], + "lapikit": ["lapikit@0.0.0-insiders.f9d3332", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-KjQ21Ze4XUz36xeqdQ6RUw+7rX196ht5lXEKAGaF84zpv2dUVx7GWyZ/Iq41kO9cASfdA5xFdGyeVMeHZ7a5FQ=="], "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="], diff --git a/package.json b/package.json index 9b54c3f0..bd5f5060 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.50d6d6a", + "lapikit": "^0.0.0-insiders.f9d3332", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5a4dea54..03b1295f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -332,7 +332,7 @@
@@ -435,6 +435,7 @@ active={stepCode === 0} rounded="xl" size="sm" + style="--kit-btn-bg: var(--primary-legacy)" > View Button @@ -443,6 +444,7 @@ active={stepCode === 1} rounded="xl" size="sm" + style="--kit-btn-bg: var(--primary-legacy)" > Discover Card @@ -451,6 +453,7 @@ active={stepCode === 2} rounded="xl" size="sm" + style="--kit-btn-bg: var(--primary-legacy)" > Explore Modal @@ -646,6 +649,7 @@ class="max-sm:flex-col max-sm:p-[36px_29px]!" rounded="xl" size="lg" + style="--kit-btn-bg: var(--primary-legacy)" > Start Building with Lapikit @@ -710,7 +714,12 @@
- + {capitalize(`It's not over yet!`)} {#snippet append()} @@ -1061,7 +1070,13 @@ >

Start exploring Lapikit

Design system, themes, components, all in one lib

- + Discover the components {#snippet append()} From 50496cea430b40545b34f51038fa285adb938c93 Mon Sep 17 00:00:00 2001 From: Nycolaide Date: Thu, 16 Jul 2026 00:34:23 +0200 Subject: [PATCH 7/7] fix theming --- bun.lock | 4 ++-- package.json | 2 +- src/app.html | 4 ++-- src/routes/docs/+layout.svelte | 33 +++++++++++++++++---------------- src/routes/theme.css | 5 +++-- 5 files changed, 25 insertions(+), 23 deletions(-) diff --git a/bun.lock b/bun.lock index 0e029b37..c1b5ba78 100644 --- a/bun.lock +++ b/bun.lock @@ -27,7 +27,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.f9d3332", + "lapikit": "^0.0.0-insiders.bd3f1f3", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", @@ -529,7 +529,7 @@ "known-css-properties": ["known-css-properties@0.37.0", "", {}, "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ=="], - "lapikit": ["lapikit@0.0.0-insiders.f9d3332", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-KjQ21Ze4XUz36xeqdQ6RUw+7rX196ht5lXEKAGaF84zpv2dUVx7GWyZ/Iq41kO9cASfdA5xFdGyeVMeHZ7a5FQ=="], + "lapikit": ["lapikit@0.0.0-insiders.bd3f1f3", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-eGmZvlcC002R1i+k5z3pLAu7Q1TkDePQENDWCpFbLoc1P9XeU8CevMXCsRVPCs7/aoKMxzfirWZWp5nJsl6RLg=="], "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="], diff --git a/package.json b/package.json index bd5f5060..6e8769c2 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.f9d3332", + "lapikit": "^0.0.0-insiders.bd3f1f3", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", diff --git a/src/app.html b/src/app.html index ff310ec1..8d483635 100644 --- a/src/app.html +++ b/src/app.html @@ -3,14 +3,14 @@ - --> %sveltekit.head% diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte index 15f5a599..02a9d3ea 100644 --- a/src/routes/docs/+layout.svelte +++ b/src/routes/docs/+layout.svelte @@ -2,7 +2,7 @@ import { resolve } from '$app/paths'; import { browser } from '$app/environment'; import { theme_storage_key } from '$lib'; - + import { useTheme } from 'lapikit/actions'; // types import type { ModelDropdownProps } from 'lapikit/components'; @@ -15,21 +15,22 @@ let { children } = $props(); - let mode = $state<'light' | 'dark' | 'system'>( + let localMode = $state<'light' | 'dark' | 'system'>( browser ? ((localStorage.getItem(theme_storage_key) as 'light' | 'dark' | 'system') ?? 'system') : 'system' ); - $effect(() => { - if (!browser) return; - if (mode === 'system') { - document.documentElement.removeAttribute('data-theme'); - } else { - document.documentElement.setAttribute('data-theme', mode); - } - localStorage.setItem(theme_storage_key, mode); - }); + // $effect(() => { + // if (!browser) return; + + // // if (mode === 'system') { + // // document.documentElement.removeAttribute('data-kit-theme'); + // // } else { + // // document.documentElement.setAttribute('data-theme', mode); + // // } + // // localStorage.setItem(theme_storage_key, mode); + // }); @@ -58,11 +59,11 @@ icon size="lg" > - {#if mode === 'light'} + {#if localMode === 'light'} - {:else if mode === 'dark'} + {:else if localMode === 'dark'} @@ -75,7 +76,7 @@ {/snippet} - (mode = 'light')} active={mode === 'light'}> + useTheme('light')} active={localMode === 'light'}> {#snippet prepend()} @@ -83,7 +84,7 @@ {/snippet} Light - (mode = 'dark')} active={mode === 'dark'}> + useTheme('dark')} active={localMode === 'dark'}> {#snippet prepend()} @@ -91,7 +92,7 @@ {/snippet} Dark - (mode = 'system')} active={mode === 'system'}> + useTheme('system')} active={localMode === 'system'}> {#snippet prepend()} diff --git a/src/routes/theme.css b/src/routes/theme.css index 178c3fc4..9d7725be 100644 --- a/src/routes/theme.css +++ b/src/routes/theme.css @@ -39,7 +39,8 @@ html[data-kit-theme='light'] { --md-color-link: #58a6ff; --md-color-link-hover: #79b8ff; --md-color-border: #30363d; - --md-color-bg: hsl(222 20% 9%); + /* --md-color-bg: hsl(222 20% 9%); */ + --md-color-bg: var(--kit-color-surface); --md-color-surface: hsl(222 18% 15%); --md-color-code-bg: hsl(222 16% 14%); --md-color-code-text: #ff7b72; @@ -96,7 +97,7 @@ html[data-kit-theme='dark'] { --md-color-link: #58a6ff; --md-color-link-hover: #79b8ff; --md-color-border: #30363d; - --md-color-bg: hsl(222 20% 9%); + --md-color-bg: var(--kit-color-surface); --md-color-surface: hsl(222 18% 15%); --md-color-code-bg: hsl(222 16% 14%); --md-color-code-text: #ff7b72;