Skip to content
This repository was archived by the owner on Oct 14, 2025. It is now read-only.

Commit 378f8fc

Browse files
Hugos68Hugos68
committed
stuff
1 parent 0b3b0f9 commit 378f8fc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+892
-761
lines changed

‎packages/docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"vite-plugin-pagefind": "^0.3.0"
2525
},
2626
"dependencies": {
27+
"@skeletonlabs/floating-ui-svelte": "workspace:^",
2728
"@tailwindcss/forms": "^0.5.9",
2829
"@tailwindcss/typography": "^0.5.15"
2930
}

‎packages/docs/src/app.css‎

Lines changed: 110 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,22 @@
66
/* Theme --- */
77

88
@layer base {
9-
:root {
10-
/* Colors */
11-
--color-surface-50: 255 255 255;
12-
--color-surface-100: 243 243 247;
13-
--color-surface-200: 220 223 236;
14-
--color-surface-300: 176 178 195;
15-
--color-surface-400: 191 195 217;
16-
--color-surface-500: 87 89 105;
17-
--color-surface-600: 45 46 58;
18-
--color-surface-700: 39 41 53;
19-
--color-surface-800: 31 32 40;
20-
--color-surface-900: 24 25 31;
21-
--color-surface-950: 18 18 21;
22-
}
23-
/* Gradients */
24-
/* .light-xxx-gradient {
9+
:root {
10+
/* Colors */
11+
--color-surface-50: 255 255 255;
12+
--color-surface-100: 243 243 247;
13+
--color-surface-200: 220 223 236;
14+
--color-surface-300: 176 178 195;
15+
--color-surface-400: 191 195 217;
16+
--color-surface-500: 87 89 105;
17+
--color-surface-600: 45 46 58;
18+
--color-surface-700: 39 41 53;
19+
--color-surface-800: 31 32 40;
20+
--color-surface-900: 24 25 31;
21+
--color-surface-950: 18 18 21;
22+
}
23+
/* Gradients */
24+
/* .light-xxx-gradient {
2525
background-image: linear-gradient(45deg, #eff6ff, #ecfeff, #cffafe, #f0fdfa, #faf5ff);
2626
}
2727
.dark-xxx-gradient {
@@ -32,215 +32,215 @@
3232
rgba(50, 200, 255, 0.25)
3333
);
3434
} */
35-
.dark-nav-gradient {
36-
background-image: linear-gradient(
37-
195deg,
38-
hsl(348deg 10% 90%) 0%,
39-
hsl(351deg 31% 80%) 2%,
40-
hsl(325deg 45% 69%) 6%,
41-
hsl(330deg 32% 57%) 12%,
42-
hsl(320deg 22% 48%) 19%,
43-
hsl(285deg 22% 33%) 27%,
44-
hsl(240deg 20% 22%) 38%,
45-
hsl(232deg 18% 17%) 50%,
46-
hsl(232deg 13% 14%) 68%,
47-
hsl(233deg 15% 14%) 100%
48-
);
49-
}
50-
.light-nav-gradient {
51-
background-image: linear-gradient(
52-
195deg,
53-
rgb(245, 245, 255) 0%,
54-
rgb(245, 200, 255) 2%,
55-
rgb(255 210 225) 6%,
56-
rgb(255 227 225) 12%,
57-
rgb(249, 246, 248) 19%,
58-
rgb(240, 240, 255) 27%,
59-
rgb(245, 245, 255) 38%,
60-
rgb(240, 252, 253) 50%,
61-
rgb(252, 252, 253) 68%,
62-
rgb(255, 255, 255) 100%
63-
);
64-
}
35+
.dark-nav-gradient {
36+
background-image: linear-gradient(
37+
195deg,
38+
hsl(348deg 10% 90%) 0%,
39+
hsl(351deg 31% 80%) 2%,
40+
hsl(325deg 45% 69%) 6%,
41+
hsl(330deg 32% 57%) 12%,
42+
hsl(320deg 22% 48%) 19%,
43+
hsl(285deg 22% 33%) 27%,
44+
hsl(240deg 20% 22%) 38%,
45+
hsl(232deg 18% 17%) 50%,
46+
hsl(232deg 13% 14%) 68%,
47+
hsl(233deg 15% 14%) 100%
48+
);
49+
}
50+
.light-nav-gradient {
51+
background-image: linear-gradient(
52+
195deg,
53+
rgb(245, 245, 255) 0%,
54+
rgb(245, 200, 255) 2%,
55+
rgb(255 210 225) 6%,
56+
rgb(255 227 225) 12%,
57+
rgb(249, 246, 248) 19%,
58+
rgb(240, 240, 255) 27%,
59+
rgb(245, 245, 255) 38%,
60+
rgb(240, 252, 253) 50%,
61+
rgb(252, 252, 253) 68%,
62+
rgb(255, 255, 255) 100%
63+
);
64+
}
6565
}
6666

6767
/* Globals --- */
6868

6969
body {
70-
@apply text-surface-700 dark:text-surface-300;
71-
@apply bg-surface-200 dark:bg-surface-800;
70+
@apply text-surface-700 dark:text-surface-300;
71+
@apply bg-surface-200 dark:bg-surface-800;
7272
}
7373

7474
/* Typography --- */
7575

7676
/* Headings */
7777
.h1 {
78-
@apply text-rose-500 font-bold text-5xl;
78+
@apply text-rose-500 font-bold text-5xl;
7979
}
8080
.h1 span {
81-
@apply bg-gradient-to-br from-rose-400 to-purple-400/90 bg-clip-text text-transparent box-decoration-clone;
81+
@apply bg-gradient-to-br from-rose-400 to-purple-400/90 bg-clip-text text-transparent box-decoration-clone;
8282
}
8383
.h2 {
84-
@apply text-black dark:text-white font-bold text-3xl;
84+
@apply text-black dark:text-white font-bold text-3xl;
8585
}
8686
.h3 {
87-
@apply text-black dark:text-white font-bold text-xl;
87+
@apply text-black dark:text-white font-bold text-xl;
8888
}
8989

9090
/* Anchors */
9191
#page-container .anchor {
92-
@apply underline;
93-
@apply text-rose-700 hover:text-black;
94-
@apply dark:text-rose-300 hover:dark:text-white;
92+
@apply underline;
93+
@apply text-rose-700 hover:text-black;
94+
@apply dark:text-rose-300 hover:dark:text-white;
9595
}
9696
footer .anchor {
97-
@apply text-blue-600 dark:text-blue-400 underline;
97+
@apply text-blue-600 dark:text-blue-400 underline;
9898
}
9999

100100
/* Highlight */
101101
.highlight {
102-
@apply text-black dark:text-white;
102+
@apply text-black dark:text-white;
103103
}
104104

105105
/* Pre & Code */
106106
.pre {
107-
@apply bg-black text-white p-4 rounded;
107+
@apply bg-black text-white p-4 rounded;
108108
}
109109
.code {
110-
@apply bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
111-
@apply text-sm text-emerald-500 dark:text-emerald-300;
110+
@apply bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
111+
@apply text-sm text-emerald-500 dark:text-emerald-300;
112112
}
113113

114114
/* Keyboard */
115115
.kbd {
116-
@apply text-sm bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
116+
@apply text-sm bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
117117
}
118118

119119
/* Unordered List */
120120
.ul {
121-
@apply list-disc list-outside ml-7 space-y-4;
121+
@apply list-disc list-outside ml-7 space-y-4;
122122
}
123123

124124
/* Utility Classes */
125125

126126
/* Preview Examples */
127127
.preview {
128-
@apply bg-surface-100 dark:bg-surface-900 ring-inset p-10 flex justify-center items-center rounded-lg;
128+
@apply bg-surface-100 dark:bg-surface-900 ring-inset p-10 flex justify-center items-center rounded-lg;
129129
}
130130

131131
/* Floating (required) */
132132
.floating {
133-
@apply w-max absolute top-0 left-0 z-10;
133+
@apply w-max absolute top-0 left-0 z-10;
134134
}
135135

136136
.popover-neutral {
137-
@apply bg-surface-500 text-white p-8 max-w-sm rounded shadow-xl;
137+
@apply bg-surface-500 text-white p-8 max-w-sm rounded shadow-xl;
138138
}
139139

140140
/* Buttons */
141141
.btn-gradient {
142-
@apply flex items-center gap-2;
143-
@apply py-3 px-6 rounded shadow-lg;
144-
@apply bg-gradient-to-br from-red-300 via-violet-300 to-cyan-400;
145-
@apply text-black font-bold;
142+
@apply flex items-center gap-2;
143+
@apply py-3 px-6 rounded shadow-lg;
144+
@apply bg-gradient-to-br from-red-300 via-violet-300 to-cyan-400;
145+
@apply text-black font-bold;
146146
}
147147
.btn-neutral {
148-
@apply flex items-center gap-2;
149-
@apply py-3 px-6 rounded shadow-lg;
150-
@apply bg-neutral-950 hover:bg-neutral-900 dark:bg-surface-50 hover:dark:bg-surface-100;
151-
@apply text-white dark:text-black font-bold;
148+
@apply flex items-center gap-2;
149+
@apply py-3 px-6 rounded shadow-lg;
150+
@apply bg-neutral-950 hover:bg-neutral-900 dark:bg-surface-50 hover:dark:bg-surface-100;
151+
@apply text-white dark:text-black font-bold;
152152
}
153153
.btn-rose-sm {
154-
@apply flex items-center gap-2;
155-
@apply bg-rose-500 hover:bg-rose-600 text-white text-sm font-medium py-1 px-4 rounded shadow-lg;
154+
@apply flex items-center gap-2;
155+
@apply bg-rose-500 hover:bg-rose-600 text-white text-sm font-medium py-1 px-4 rounded shadow-lg;
156156
}
157157

158158
/* Cards */
159159
.card {
160-
@apply p-8 lg:p-12 rounded-3xl;
160+
@apply p-8 lg:p-12 rounded-3xl;
161161
}
162162
.card-gradient {
163-
@apply bg-white dark:bg-surface-700 bg-gradient-to-br;
164-
@apply from-blue-50 to-surface-50;
165-
@apply dark:from-purple-700/10 dark:to-cyan-700/10;
163+
@apply bg-white dark:bg-surface-700 bg-gradient-to-br;
164+
@apply from-blue-50 to-surface-50;
165+
@apply dark:from-purple-700/10 dark:to-cyan-700/10;
166166
}
167167

168168
/* Alerts */
169169
.alert {
170-
@apply bg-blue-500 text-white p-8 rounded-lg space-y-4;
170+
@apply bg-blue-500 text-white p-8 rounded-lg space-y-4;
171171
}
172172

173173
/* Tables */
174174
.table-wrap {
175-
@apply w-full overflow-auto;
175+
@apply w-full overflow-auto;
176176
}
177177
.table {
178-
@apply relative w-full;
178+
@apply relative w-full;
179179
}
180180
.table thead {
181-
@apply border-b border-surface-500/50;
181+
@apply border-b border-surface-500/50;
182182
}
183183
.table th {
184-
@apply text-left font-bold;
184+
@apply text-left font-bold;
185185
}
186186
.table tbody {
187-
@apply divide-y divide-surface-500/50;
187+
@apply divide-y divide-surface-500/50;
188188
}
189189
.table th,
190190
.table td {
191-
@apply p-2 py-4 align-top;
191+
@apply p-2 py-4 align-top;
192192
}
193193
.table .meta-type {
194-
@apply inline-block bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
195-
@apply text-xs text-purple-500 dark:text-purple-300;
194+
@apply inline-block bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
195+
@apply text-xs text-purple-500 dark:text-purple-300;
196196
}
197197
.table .meta-default {
198-
@apply inline-block bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
199-
@apply text-xs italic text-blue-500 dark:text-blue-300;
198+
@apply inline-block bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
199+
@apply text-xs italic text-blue-500 dark:text-blue-300;
200200
}
201201

202202
/* Scrollbars --- */
203203

204204
:root {
205-
scrollbar-color: rgba(128, 128, 128, 0.5) rgba(0, 0, 0, 0.1); /* thumb / track */
206-
scrollbar-width: thin;
205+
scrollbar-color: rgba(128, 128, 128, 0.5) rgba(0, 0, 0, 0.1); /* thumb / track */
206+
scrollbar-width: thin;
207207
}
208208

209209
/* Chrome, Safari and Opera */
210210
.no-scrollbar::-webkit-scrollbar {
211-
display: none;
211+
display: none;
212212
}
213213
/* IE, Edge and Firefox */
214214
.no-scrollbar {
215-
-ms-overflow-style: none;
216-
scrollbar-width: none;
215+
-ms-overflow-style: none;
216+
scrollbar-width: none;
217217
}
218218

219219
/* Animations --- */
220220

221221
.anim-float {
222-
animation-name: animFloat;
223-
animation-duration: 5s;
224-
animation-iteration-count: infinite;
225-
animation-timing-function: ease-in-out;
222+
animation-name: animFloat;
223+
animation-duration: 5s;
224+
animation-iteration-count: infinite;
225+
animation-timing-function: ease-in-out;
226226
}
227227

228228
@keyframes animFloat {
229-
0% {
230-
transform: translateY(0px);
231-
}
232-
50% {
233-
transform: translateY(15px);
234-
}
235-
100% {
236-
transform: translateY(0px);
237-
}
229+
0% {
230+
transform: translateY(0px);
231+
}
232+
50% {
233+
transform: translateY(15px);
234+
}
235+
100% {
236+
transform: translateY(0px);
237+
}
238238
}
239239

240240
/* Shiki Highlighting --- */
241241

242242
html.dark .shiki,
243243
html.dark .shiki span {
244-
color: var(--shiki-dark) !important;
245-
background-color: var(--shiki-dark-bg) !important;
244+
color: var(--shiki-dark) !important;
245+
background-color: var(--shiki-dark-bg) !important;
246246
}

‎packages/docs/src/app.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<!doctype html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
%sveltekit.head%
8-
</head>
9-
<body data-sveltekit-preload-data="hover">
10-
<div style="display: contents">%sveltekit.body%</div>
11-
</body>
2+
<html lang="en" class="dark">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Floating UI Svelte</title>
6+
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
%sveltekit.head%
9+
</head>
10+
11+
<body data-sveltekit-preload-data="hover">
12+
<div>%sveltekit.body%</div>
13+
</body>
1214
</html>

0 commit comments

Comments
 (0)