Skip to content

Commit 59b01a4

Browse files
maxfriedmannmaxfriedmann
authored
160-update-to-daisyui-5x (#195)
1 parent b449362 commit 59b01a4

File tree

14 files changed

+591
-740
lines changed

14 files changed

+591
-740
lines changed

‎package-lock.json‎

Lines changed: 523 additions & 679 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,21 +96,20 @@
9696
"@testing-library/svelte": "^5.2.6",
9797
"@types/eslint": "^9.6.0",
9898
"@types/node": "^22.9.1",
99+
"daisyui": "^5.0.0-beta.2",
99100
"@vitest/browser": "3.0.4",
100101
"@vitest/coverage-v8": "3.0.4",
101102
"autoprefixer": "^10.4.19",
102-
"daisyui": "^4.12.23",
103103
"eslint": "^9.17.0",
104104
"eslint-config-prettier": "^10.0.1",
105105
"eslint-plugin-svelte": "^2.46.1",
106106
"globals": "^15.14.0",
107107
"playwright": "^1.49.1",
108-
"postcss": "^8.4.38",
109108
"prettier": "^3.1.1",
110109
"prettier-plugin-svelte": "^3.3.2",
111110
"publint": "^0.3.0",
112111
"svelte-check": "^4.1.1",
113-
"tailwindcss": "^3.4.15",
112+
"tailwindcss": "^4.0.0",
114113
"tslib": "^2.4.1",
115114
"typescript": "^5.7.2",
116115
"typescript-eslint": "^8.19.1",
@@ -123,6 +122,7 @@
123122
"@floating-ui/dom": "^1.6.12",
124123
"@smallstack/utils": "^3.0.10",
125124
"@sveltejs/kit": "^2.15.1",
125+
"@tailwindcss/vite": "^4.0.0",
126126
"date-fns": "^4.1.0",
127127
"i18next": "^24.2.0",
128128
"i18next-browser-languagedetector": "^8.0.0",

‎postcss.config.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/app.css‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,41 @@
11
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2+
@import "tailwindcss";
3+
@plugin "daisyui";
4+
@plugin "daisyui/theme" {
5+
name: "svelte";
6+
default: false;
7+
prefersdark: false;
8+
color-scheme: "light";
9+
--color-base-100: oklch(100% 0 0);
10+
--color-base-200: oklch(93% 0 0);
11+
--color-base-300: oklch(86% 0 0);
12+
--color-base-content: oklch(22.389% 0.031 278.072);
13+
--color-primary: #273239;
14+
--color-primary-content: oklch(100% 0 0);
15+
--color-secondary: oklch(55% 0.046 257.417);
16+
--color-secondary-content: oklch(100% 0 0);
17+
--color-accent: oklch(60% 0.118 184.704);
18+
--color-accent-content: oklch(100% 0 0);
19+
--color-neutral: oklch(0% 0 0);
20+
--color-neutral-content: oklch(100% 0 0);
21+
--color-info: oklch(60% 0.126 221.723);
22+
--color-info-content: oklch(100% 0 0);
23+
--color-success: oklch(62% 0.194 149.214);
24+
--color-success-content: oklch(100% 0 0);
25+
--color-warning: oklch(85% 0.199 91.936);
26+
--color-warning-content: oklch(0% 0 0);
27+
--color-error: oklch(70% 0.191 22.216);
28+
--color-error-content: oklch(0% 0 0);
29+
--radius-selector: 0.25rem;
30+
--radius-field: 0.25rem;
31+
--radius-box: 0.25rem;
32+
--size-selector: 0.25rem;
33+
--size-field: 0.25rem;
34+
--border: 1px;
35+
--depth: 0;
36+
--noise: 0;
37+
}
38+
239

340
body {
441
font-family: "Poppins", sans-serif;
@@ -12,6 +49,6 @@ body {
1249
html {
1350
width: 100%;
1451
height: 100%;
15-
margin: 0px;
52+
margin: 0px;
1653
padding: 0px;
1754
}

‎src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" data-theme="svelte">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/svelte-ui-logo.ico" />

‎src/lib/modules/chat/ChatWindow.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
<div class="grow flex flex-col gap-2 items-start">
5757
{#each threads as thread}
5858
<button
59-
class="flex flex-row gap-2"
59+
class="flex flex-row gap-2 cursor-pointer"
6060
onclick={() => {
6161
currentThreadId = thread.id;
6262
sidePanelOpen = false;
@@ -65,7 +65,7 @@
6565
<img
6666
src={thread.avatarUrl}
6767
alt={thread.name}
68-
class="avatar rounded-full w-10 h-10 {thread.id === currentThreadId
68+
class="avatar rounded-full w-10 h-10 p-1 {thread.id === currentThreadId
6969
? 'bg-secondary'
7070
: 'bg-primary'}"
7171
/>

‎src/lib/modules/navigation/AppShell.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
import TabBar from "./TabBar.svelte";
1919
2020
let defaults: AppShellOptions = {
21-
bgColor: "oklch(var(--p))",
22-
textColor: "oklch(var(--pc))",
21+
bgColor: "var(--color-primary)",
22+
textColor: "var(--color-primary-content)",
2323
navbar: {
2424
show: true,
2525
showNavigation: false,

‎src/routes/+layout.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script lang="ts">
2-
import { type AppShellOptions } from "$lib/modules/navigation/app-shell-options.js";
2+
import ModalContainer from "$lib/modules/modals/ModalContainer.svelte";
3+
import { type AppShellOptions } from "$lib/modules/navigation/app-shell-options.js";
34
import AppShell from "$lib/modules/navigation/AppShell.svelte";
45
import { BREAKPOINTS, MD_AND_UP } from "$lib/modules/navigation/breakpoint.service.svelte.js";
56
import type { Navigation } from "$lib/modules/navigation/navigation.js";
67
import { initI18n } from "$lib/stores/i18n.store.js";
7-
import "tailwindcss/tailwind.css";
88
import "../app.css";
99
1010
initI18n({
@@ -194,3 +194,4 @@
194194
<slot></slot>
195195
</div>
196196
</AppShell>
197+
<ModalContainer></ModalContainer>

‎src/routes/+page.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
This UI library is based on
1313
<div class="flex flex-col gap-2 p-4">
1414
<li>Svelte 5</li>
15-
<li>DaisyUI 4</li>
15+
<li>DaisyUI 5</li>
16+
<li>Tailwind CSS 4</li>
1617
<li>Free Fontawesome Icons</li>
1718
<li>@floating-ui/dom</li>
1819
<li>date-fns</li>
@@ -21,7 +22,7 @@ This UI library is based on
2122

2223
<ComponentPageHeader title="Purpose" level="2"></ComponentPageHeader>
2324
We built this library because at the time of creation there were no libraries that supported Svelte 5,
24-
DaisyUI as well as all needed Forms Inputs.
25+
DaisyUI 5 as well as all needed Forms Inputs.
2526

2627
<ComponentPageHeader title="License" level="2"></ComponentPageHeader>
2728
MIT

‎src/routes/install/+page.svelte‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,19 @@
1212

1313
<div class="flex flex-col gap-4">
1414
<ComponentPageHeader title="Via Package Manager" level="2"></ComponentPageHeader>
15-
<div role="tablist" class="tabs tabs-lifted mb-4">
15+
<div role="tablist" class="tabs tabs-lift mb-4">
1616
<input type="radio" name="install-npm-tabs" role="tab" class="tab" aria-label="NPM" checked />
17-
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
17+
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 p-6">
1818
<pre>npm install @smallstack/svelte-ui</pre>
1919
</div>
2020

2121
<input type="radio" name="install-npm-tabs" role="tab" class="tab" aria-label="YARN" />
22-
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
22+
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 p-6">
2323
<pre>yarn add @smallstack/svelte-ui</pre>
2424
</div>
2525

2626
<input type="radio" name="install-npm-tabs" role="tab" class="tab" aria-label="PNPM" />
27-
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
27+
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 p-6">
2828
<pre>pnpm add @smallstack/svelte-ui</pre>
2929
</div>
3030
</div>
@@ -34,7 +34,7 @@
3434
description="It heavily depends on the target framework how to use web components. Here are some exemplarily implementations."
3535
level="2"
3636
></ComponentPageHeader>
37-
<div role="tablist" class="tabs tabs-lifted mb-4">
37+
<div role="tablist" class="tabs tabs-lift mb-4">
3838
<input
3939
type="radio"
4040
name="install-wc-tabs"
@@ -44,7 +44,7 @@
4444
checked
4545
onchange={() => (selectedTab = "Vanilla")}
4646
/>
47-
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
47+
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 p-6">
4848
<pre>&lt;script type=&quot;module&quot; src=&quot;https://cdn.skypack.dev/@smallstack/svelte-ui&quot;&gt;&lt;/script&gt;
4949
&lt;sui-table&gt;&lt;/sui-table&gt;
5050
</pre>
@@ -57,7 +57,7 @@
5757
aria-label="Angular"
5858
onchange={() => (selectedTab = "Angular")}
5959
/>
60-
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
60+
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 p-6">
6161
{#if selectedTab === "Angular"}
6262
<iframe
6363
src="https://stackblitz.com/edit/sui-message-thread-wc-angular?file=src%2Fmain.ts"
@@ -75,7 +75,7 @@
7575
aria-label="React"
7676
onchange={() => (selectedTab = "React")}
7777
/>
78-
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
78+
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 p-6">
7979
{#if selectedTab === "React"}
8080
<iframe
8181
src="https://stackblitz.com/edit/sui-message-thread-wc-react?file=src%2FApp.jsx"
@@ -93,7 +93,7 @@
9393
aria-label="Vue"
9494
onchange={() => (selectedTab = "Vue")}
9595
/>
96-
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
96+
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 p-6">
9797
<pre>TBD</pre>
9898
</div>
9999
</div>

0 commit comments

Comments
 (0)