trace-css 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -0
- package/assets/trace-logo.svg +11 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/tracecss/trace/v0.1.2/assets/trace-logo.svg" width="128" height="128" alt="Trace CSS logo" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">Trace CSS</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">Native HTML elements, CSS tokens, and light and dark themes.</p>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="https://www.npmjs.com/package/trace-css"><img src="https://img.shields.io/npm/v/trace-css" alt="npm version" /></a>
|
|
11
|
+
<a href="https://github.com/tracecss/trace/actions/workflows/ci.yml"><img src="https://github.com/tracecss/trace/actions/workflows/ci.yml/badge.svg?branch=main&event=push" alt="CI on main" /></a>
|
|
12
|
+
<a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT license" /></a>
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
A CSS library for native HTML elements. No JavaScript required.
|
|
16
|
+
|
|
17
|
+
## Features
|
|
18
|
+
|
|
19
|
+
- Native HTML styling with optional class-based extensions.
|
|
20
|
+
- Light and dark themes with customizable CSS tokens.
|
|
21
|
+
- Global and container-scoped builds.
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
### Via a package manager
|
|
26
|
+
|
|
27
|
+
Install with your preferred package manager:
|
|
28
|
+
|
|
29
|
+
```sh
|
|
30
|
+
# npm
|
|
31
|
+
npm install trace-css
|
|
32
|
+
|
|
33
|
+
# pnpm
|
|
34
|
+
pnpm add trace-css
|
|
35
|
+
|
|
36
|
+
# Yarn
|
|
37
|
+
yarn add trace-css
|
|
38
|
+
|
|
39
|
+
# Bun
|
|
40
|
+
bun add trace-css
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Import the stylesheet in your application:
|
|
44
|
+
|
|
45
|
+
```js
|
|
46
|
+
import "trace-css";
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
For classless styling, use `trace-css/dist/trace.classless.css` instead.
|
|
50
|
+
|
|
51
|
+
### Via CDN
|
|
52
|
+
|
|
53
|
+
Add one stylesheet to your HTML `<head>`:
|
|
54
|
+
|
|
55
|
+
**jsDelivr**
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<link
|
|
59
|
+
rel="stylesheet"
|
|
60
|
+
href="https://cdn.jsdelivr.net/npm/trace-css@0.1.2/dist/trace.min.css"
|
|
61
|
+
/>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
**UNPKG**
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<link
|
|
68
|
+
rel="stylesheet"
|
|
69
|
+
href="https://unpkg.com/trace-css@0.1.2/dist/trace.min.css"
|
|
70
|
+
/>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Replace the filename to use another [build](#builds).
|
|
74
|
+
|
|
75
|
+
## Builds
|
|
76
|
+
|
|
77
|
+
Choose one build from `dist/`:
|
|
78
|
+
|
|
79
|
+
| Build | Includes | Scope | CSS file |
|
|
80
|
+
| --------------------- | ---------------------------------- | ---------------------- | --------------------------------- |
|
|
81
|
+
| Full | Native elements + class extensions | Document | `trace.css` |
|
|
82
|
+
| Classless | Native elements | Document | `trace.classless.css` |
|
|
83
|
+
| Full Conditional | Native elements + class extensions | `.trace-css` container | `trace.conditional.css` |
|
|
84
|
+
| Classless Conditional | Native elements | `.trace-css` container | `trace.classless.conditional.css` |
|
|
85
|
+
|
|
86
|
+
All builds include theme tokens. Minified versions use `.min.css`.
|
|
87
|
+
Conditional builds require browser support for `@scope`.
|
|
88
|
+
|
|
89
|
+
## Browser targets
|
|
90
|
+
|
|
91
|
+
Chrome / Edge 123+, Firefox 146+, Safari / iOS Safari 17.5+.
|
|
92
|
+
These are build targets, not polyfills.
|
|
93
|
+
|
|
94
|
+
## License
|
|
95
|
+
|
|
96
|
+
[MIT](./LICENSE).
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320" viewBox="0 0 320 320" fill="none">
|
|
2
|
+
<title>Trace leaf logo</title>
|
|
3
|
+
<defs>
|
|
4
|
+
<linearGradient id="leaf-gradient" x1="62" y1="190" x2="264" y2="51" gradientUnits="userSpaceOnUse">
|
|
5
|
+
<stop stop-color="#005473"/>
|
|
6
|
+
<stop offset="0.3" stop-color="#095976"/>
|
|
7
|
+
<stop offset="1" stop-color="#60AF9E"/>
|
|
8
|
+
</linearGradient>
|
|
9
|
+
</defs>
|
|
10
|
+
<path fill="url(#leaf-gradient)" d="M113 7C94 7 79 36 79 61C79 77 83 93 87 107C66 87 42 66 28 65C9 63 6 86 12 103C19 122 36 139 54 153C35 149 12 150 3 158C-5 165 0 175 12 180C37 192 75 192 96 201C101 203 104 205 105 207C102 224 100 244 107 253C112 261 131 257 140 251C146 247 143 225 149 207C157 208 165 208 174 205C219 199 273 187 298 169C309 162 309 152 302 145C290 132 264 134 239 142C258 123 281 98 289 82C296 68 290 56 276 53C258 50 237 62 213 78C223 55 228 35 219 23C209 10 189 10 172 22C157 32 147 50 141 78C139 53 137 26 128 13C124 8 119 7 113 7Z" transform="translate(7 29)"/>
|
|
11
|
+
</svg>
|
package/package.json
CHANGED
|
@@ -25,11 +25,12 @@
|
|
|
25
25
|
"prepack": "pnpm check && pnpm build",
|
|
26
26
|
"check:package": "node scripts/check-package.js"
|
|
27
27
|
},
|
|
28
|
-
"version": "0.1.
|
|
28
|
+
"version": "0.1.2",
|
|
29
29
|
"description": "CSS library for native HTML elements, design tokens, and light and dark themes.",
|
|
30
30
|
"files": [
|
|
31
31
|
"dist",
|
|
32
|
-
"src"
|
|
32
|
+
"src",
|
|
33
|
+
"assets/trace-logo.svg"
|
|
33
34
|
],
|
|
34
35
|
"style": "./dist/trace.css",
|
|
35
36
|
"exports": {
|