Skip to content

Commit b6fcae4

Browse files
cycle4passiontechniq
cycle4passion
and
techniq
authored
unocss (#738)
* unocss WIP colors issues * Switch to wind4 unocss preset and generate theme css variables (`--colors-*`) * Add <main> padding to match other examples * Remove unocss reset to fix conflict with tooltip (and other) default styles that use layers (ex. components) and `:where` with 0 specificity --------- Co-authored-by: Sean Lynch <techniq35@gmail.com>
1 parent 5eb36aa commit b6fcae4

19 files changed

Lines changed: 931 additions & 20 deletions

‎examples/unocss-1/.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
node_modules
2+
3+
# Output
4+
.output
5+
.vercel
6+
.netlify
7+
.wrangler
8+
/.svelte-kit
9+
/build
10+
11+
# OS
12+
.DS_Store
13+
Thumbs.db
14+
15+
# Env
16+
.env
17+
.env.*
18+
!.env.example
19+
!.env.test
20+
21+
# Vite
22+
vite.config.js.timestamp-*
23+
vite.config.ts.timestamp-*

‎examples/unocss-1/.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

‎examples/unocss-1/.prettierignore‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Package Managers
2+
package-lock.json
3+
pnpm-lock.yaml
4+
yarn.lock
5+
bun.lock
6+
bun.lockb
7+
8+
# Miscellaneous
9+
/static/

‎examples/unocss-1/.prettierrc‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"useTabs": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 100,
6+
"plugins": ["prettier-plugin-svelte"],
7+
"overrides": [
8+
{
9+
"files": "*.svelte",
10+
"options": {
11+
"parser": "svelte"
12+
}
13+
}
14+
]
15+
}

‎examples/unocss-1/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# sv
2+
3+
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
4+
5+
## Creating a project
6+
7+
If you're seeing this, you've probably already done this step. Congrats!
8+
9+
```sh
10+
# create a new project in the current directory
11+
npx sv create
12+
13+
# create a new project in my-app
14+
npx sv create my-app
15+
```
16+
17+
## Developing
18+
19+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20+
21+
```sh
22+
npm run dev
23+
24+
# or start the server and open the app in a new browser tab
25+
npm run dev -- --open
26+
```
27+
28+
## Building
29+
30+
To create a production version of your app:
31+
32+
```sh
33+
npm run build
34+
```
35+
36+
You can preview the production build with `npm run preview`.
37+
38+
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

‎examples/unocss-1/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "standalone",
3+
"private": true,
4+
"version": "0.0.1",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite dev",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"prepare": "svelte-kit sync || echo ''",
11+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
12+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
13+
"format": "prettier --write .",
14+
"lint": "prettier --check ."
15+
},
16+
"devDependencies": {
17+
"@sveltejs/adapter-auto": "^7.0.0",
18+
"@sveltejs/kit": "^2.49.2",
19+
"@sveltejs/vite-plugin-svelte": "^6.2.1",
20+
"@unocss/preset-wind4": "^66.5.10",
21+
"@unocss/svelte-scoped": "^66.5.10",
22+
"layerchart": "next",
23+
"mode-watcher": "^1.1.0",
24+
"prettier": "^3.7.4",
25+
"prettier-plugin-svelte": "^3.3.3",
26+
"svelte": "5.46.0",
27+
"svelte-check": "^4.3.4",
28+
"typescript": "^5.9.3",
29+
"unocss": "^66.5.10",
30+
"vite": "^7.2.7",
31+
"vite-plugin-devtools-json": "^1.0.0"
32+
}
33+
}

‎examples/unocss-1/src/app.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
font-family: ui-sans-serif, system-ui, sans-serif;
3+
}
4+
5+
.lc-root-container {
6+
/* Default marks color when not using explicit color or color scale */
7+
--color-primary: var(--colors-blue-500);
8+
9+
/* Progressively darker shades representing surfaces (backgrounds). */
10+
--color-surface-100: var(--colors-white);
11+
--color-surface-200: var(--colors-gray-100);
12+
--color-surface-300: var(--colors-gray-300);
13+
14+
/* Content (text) color */
15+
--color-surface-content: var(--colors-gray-900);
16+
17+
/* Dark mode */
18+
html.dark & {
19+
--color-surface-100: var(--colors-zinc-800);
20+
--color-surface-200: var(--colors-zinc-900);
21+
--color-surface-300: var(--colors-zinc-950);
22+
--color-surface-content: var(--colors-zinc-100);
23+
}
24+
}

‎examples/unocss-1/src/app.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// See https://svelte.dev/docs/kit/types#app.d.ts
2+
// for information about these interfaces
3+
declare global {
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface PageState {}
9+
// interface Platform {}
10+
}
11+
}
12+
13+
export {};

‎examples/unocss-1/src/app.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
%sveltekit.head% %unocss-svelte-scoped.global%
7+
</head>
8+
<body data-sveltekit-preload-data="hover">
9+
<div style="display: contents">%sveltekit.body%</div>
10+
</body>
11+
</html>

‎examples/unocss-1/src/lib/assets/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)