gradiente 1.0.0 → 1.0.1
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 +17 -149
- package/package.json +3 -5
package/README.md
CHANGED
|
@@ -1,4 +1,15 @@
|
|
|
1
|
-

|
|
2
|
+
|
|
3
|
+
<a href="https://www.npmjs.com/package/gradiente">
|
|
4
|
+
<img src="https://img.shields.io/npm/v/gradiente.svg?style=flat-square&labelColor=d84f4c&color=black" alt="npm version">
|
|
5
|
+
</a>
|
|
6
|
+
<a href="https://bundlephobia.com/result?p=gradiente">
|
|
7
|
+
<img src="https://img.shields.io/bundlephobia/minzip/gradiente?style=flat-square&labelColor=d84f4c&color=black" alt="bundle size">
|
|
8
|
+
</a>
|
|
9
|
+
<a href="https://www.npmjs.com/package/gradiente">
|
|
10
|
+
<img src="https://img.shields.io/npm/dw/gradiente?style=flat-square&labelColor=d84f4c&color=black" alt="weekly downloads">
|
|
11
|
+
</a>
|
|
12
|
+
|
|
2
13
|
|
|
3
14
|
# Gradiente
|
|
4
15
|
|
|
@@ -10,25 +21,13 @@ It is built for rendering systems, visual editors, and developer tools where gra
|
|
|
10
21
|
|
|
11
22
|
---
|
|
12
23
|
|
|
13
|
-
## Why
|
|
14
|
-
|
|
15
|
-
CSS gradients are expressive, but difficult to work with programmatically.
|
|
16
|
-
|
|
17
|
-
They are usually:
|
|
18
|
-
|
|
19
|
-
* string-based
|
|
20
|
-
* hard to normalize
|
|
21
|
-
* full of implicit behavior
|
|
22
|
-
* awkward to use in renderers and editors
|
|
23
|
-
|
|
24
|
-
Gradiente solves that by parsing gradients into a predictable internal model that is easy to inspect, transform, render, and extend.
|
|
25
|
-
|
|
26
|
-
---
|
|
27
|
-
|
|
28
24
|
## Installation
|
|
29
25
|
|
|
30
26
|
```bash
|
|
31
27
|
npm install gradiente
|
|
28
|
+
bun add gradiente
|
|
29
|
+
pnpm add gradiente
|
|
30
|
+
yarn add gradiente
|
|
32
31
|
```
|
|
33
32
|
|
|
34
33
|
---
|
|
@@ -41,7 +40,7 @@ import { parse } from 'gradiente';
|
|
|
41
40
|
const gradient = parse('linear-gradient(red, blue)');
|
|
42
41
|
```
|
|
43
42
|
|
|
44
|
-
Result:
|
|
43
|
+
## Result:
|
|
45
44
|
|
|
46
45
|
```ts
|
|
47
46
|
{
|
|
@@ -101,35 +100,6 @@ Instead of getting a raw string you have to manually interpret, you get real dat
|
|
|
101
100
|
|
|
102
101
|
---
|
|
103
102
|
|
|
104
|
-
### Normalizes missing stop positions
|
|
105
|
-
|
|
106
|
-
```ts
|
|
107
|
-
parse('linear-gradient(red, blue)')
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
becomes:
|
|
111
|
-
|
|
112
|
-
```ts
|
|
113
|
-
red 0%
|
|
114
|
-
blue 100%
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
That means your renderer or editor does not need to guess defaults later.
|
|
118
|
-
|
|
119
|
-
---
|
|
120
|
-
|
|
121
|
-
### Expands repeating gradients into actual stops
|
|
122
|
-
|
|
123
|
-
```ts
|
|
124
|
-
parse('repeating-linear-gradient(red 10%, blue 20%)')
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
produces a stop list that continues until the gradient pattern fills `100%+`.
|
|
128
|
-
|
|
129
|
-
This makes repeating gradients much easier to render and inspect.
|
|
130
|
-
|
|
131
|
-
---
|
|
132
|
-
|
|
133
103
|
### Keeps values renderer-friendly
|
|
134
104
|
|
|
135
105
|
Angles and positions are normalized into a stable internal representation so they are easier to use in:
|
|
@@ -140,103 +110,7 @@ Angles and positions are normalized into a stable internal representation so the
|
|
|
140
110
|
* Konva
|
|
141
111
|
* custom graphics engines
|
|
142
112
|
|
|
143
|
-
---
|
|
144
|
-
|
|
145
|
-
## Public API
|
|
146
|
-
|
|
147
|
-
### `parse(value: string)`
|
|
148
|
-
|
|
149
|
-
Parses any supported gradient string into a normalized gradient node.
|
|
150
|
-
|
|
151
|
-
```ts
|
|
152
|
-
import { parse } from 'gradiente';
|
|
153
|
-
|
|
154
|
-
const gradient = parse('radial-gradient(circle at center, red, blue)');
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
---
|
|
158
|
-
|
|
159
|
-
## Output Shape
|
|
160
|
-
|
|
161
|
-
All parsed gradients follow a predictable structure:
|
|
162
|
-
|
|
163
|
-
```ts
|
|
164
|
-
type GradientNode =
|
|
165
|
-
| LinearGradientNode
|
|
166
|
-
| RadialGradientNode
|
|
167
|
-
| ConicGradientNode;
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
Each gradient contains:
|
|
171
|
-
|
|
172
|
-
```ts
|
|
173
|
-
{
|
|
174
|
-
kind: 'linear' | 'radial' | 'conic',
|
|
175
|
-
repeat: 'normal' | 'repeating',
|
|
176
|
-
stops: GradientColorStopNode[]
|
|
177
|
-
}
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
---
|
|
181
|
-
|
|
182
|
-
## Stop Format
|
|
183
|
-
|
|
184
|
-
Gradiente resolves gradients into a clean stop model:
|
|
185
|
-
|
|
186
|
-
```ts
|
|
187
|
-
{
|
|
188
|
-
kind: 'color-stop',
|
|
189
|
-
color: string,
|
|
190
|
-
position: {
|
|
191
|
-
kind: 'percentage',
|
|
192
|
-
value: number
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
This makes the data much easier to use in custom pipelines.
|
|
198
|
-
|
|
199
|
-
---
|
|
200
|
-
|
|
201
|
-
## Examples
|
|
202
|
-
|
|
203
|
-
### Linear
|
|
204
|
-
|
|
205
|
-
```ts
|
|
206
|
-
parse('linear-gradient(to right, red, blue)')
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
### Repeating Linear
|
|
210
|
-
|
|
211
|
-
```ts
|
|
212
|
-
parse('repeating-linear-gradient(red 10%, blue 20%)')
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
### Radial
|
|
216
|
-
|
|
217
|
-
```ts
|
|
218
|
-
parse('radial-gradient(circle at center, red, blue)')
|
|
219
|
-
```
|
|
220
113
|
|
|
221
|
-
### Repeating Radial
|
|
222
|
-
|
|
223
|
-
```ts
|
|
224
|
-
parse('repeating-radial-gradient(circle at center, red 10%, blue 20%)')
|
|
225
|
-
```
|
|
226
|
-
|
|
227
|
-
### Conic
|
|
228
|
-
|
|
229
|
-
```ts
|
|
230
|
-
parse('conic-gradient(from 45deg at center, red, blue)')
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
### Repeating Conic
|
|
234
|
-
|
|
235
|
-
```ts
|
|
236
|
-
parse('repeating-conic-gradient(from 45deg at center, red 10%, blue 20%)')
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
---
|
|
240
114
|
|
|
241
115
|
## Design Goals
|
|
242
116
|
|
|
@@ -298,10 +172,4 @@ Not a string to preserve.
|
|
|
298
172
|
Not a browser quirk to emulate.
|
|
299
173
|
A piece of graphics data you can actually use.
|
|
300
174
|
|
|
301
|
-
> **Build gradients like an engine, not like a stylesheet.**
|
|
302
|
-
|
|
303
|
-
---
|
|
304
|
-
|
|
305
|
-
## License
|
|
306
|
-
|
|
307
|
-
MIT
|
|
175
|
+
> **Build gradients like an engine, not like a stylesheet.**
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gradiente",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.1",
|
|
5
5
|
"description": "Lightweight gradient toolkit for modern rendering systems.",
|
|
6
6
|
"author": "Nice Arti <nikcrav@gmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@eslint/js": "^10.0.1",
|
|
54
54
|
"@types/node": "^25.5.0",
|
|
55
|
+
"@typescript/native-preview": "7.0.0-dev.20260418.1",
|
|
55
56
|
"bumpp": "^11.0.1",
|
|
56
57
|
"eslint": "^10.2.0",
|
|
57
58
|
"tsdown": "^0.21.7",
|
|
@@ -60,8 +61,5 @@
|
|
|
60
61
|
"vite": "^8.0.8",
|
|
61
62
|
"vitepress": "^1.6.4",
|
|
62
63
|
"vitest": "^4.1.2"
|
|
63
|
-
},
|
|
64
|
-
"dependencies": {
|
|
65
|
-
"@typescript/native-preview": "7.0.0-dev.20260418.1"
|
|
66
64
|
}
|
|
67
|
-
}
|
|
65
|
+
}
|