@tsparticles/palette-pastel-mint 4.0.0-beta.12 → 4.0.0-beta.16
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/LICENSE +0 -1
- package/README.md +178 -19
- package/browser/browser.js +5 -0
- package/browser/index.js +2 -2
- package/browser/index.lazy.js +7 -0
- package/cjs/browser.js +5 -0
- package/cjs/index.js +2 -2
- package/cjs/index.lazy.js +7 -0
- package/esm/browser.js +5 -0
- package/esm/index.js +2 -2
- package/esm/index.lazy.js +7 -0
- package/package.json +17 -8
- package/report.html +4949 -94
- package/tsparticles.palette.palette-mint.js +43 -0
- package/tsparticles.palette.palette-mint.min.js +1 -0
- package/types/browser.d.ts +1 -0
- package/types/index.lazy.d.ts +2 -0
- package/264.min.js +0 -1
- package/dist_browser_options_js.js +0 -30
- package/tsparticles.palette.palette-pastel-mint.js +0 -307
- package/tsparticles.palette.palette-pastel-mint.min.js +0 -2
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,34 +1,174 @@
|
|
|
1
|
-
|
|
1
|
+
[](https://particles.js.org)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# tsParticles Mint Palette
|
|
4
4
|
|
|
5
|
+
[](https://www.jsdelivr.com/package/npm/@tsparticles/palette-mint) [](https://www.npmjs.com/package/@tsparticles/palette-mint) [](https://www.npmjs.com/package/@tsparticles/palette-mint) [](https://github.com/sponsors/matteobruni)
|
|
6
|
+
|
|
7
|
+
[tsParticles](https://github.com/tsparticles/tsparticles) palette for colored smoke amber.
|
|
8
|
+
|
|
9
|
+
[](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
|
|
10
|
+
|
|
11
|
+
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
|
|
12
|
+
|
|
13
|
+
## Sample
|
|
14
|
+
|
|
15
|
+
[](https://particles.js.org/samples/palettes/mint)
|
|
16
|
+
|
|
17
|
+
## Colors
|
|
18
|
+
|
|
19
|
+
<table>
|
|
20
|
+
<tbody>
|
|
21
|
+
<tr>
|
|
22
|
+
<td align="center">
|
|
23
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#1A1000"><rect width="32" height="32" fill="#1A1000" /></svg><br />
|
|
24
|
+
<code>#1A1000</code>
|
|
25
|
+
</td>
|
|
26
|
+
<td align="center">
|
|
27
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#3A2200"><rect width="32" height="32" fill="#3A2200" /></svg><br />
|
|
28
|
+
<code>#3A2200</code>
|
|
29
|
+
</td>
|
|
30
|
+
<td align="center">
|
|
31
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#6B3D00"><rect width="32" height="32" fill="#6B3D00" /></svg><br />
|
|
32
|
+
<code>#6B3D00</code>
|
|
33
|
+
</td>
|
|
34
|
+
<td align="center">
|
|
35
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#A65A00"><rect width="32" height="32" fill="#A65A00" /></svg><br />
|
|
36
|
+
<code>#A65A00</code>
|
|
37
|
+
</td>
|
|
38
|
+
<td align="center">
|
|
39
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#D98A1A"><rect width="32" height="32" fill="#D98A1A" /></svg><br />
|
|
40
|
+
<code>#D98A1A</code>
|
|
41
|
+
</td>
|
|
42
|
+
</tr>
|
|
43
|
+
<tr>
|
|
44
|
+
<td align="center">
|
|
45
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#FFC266"><rect width="32" height="32" fill="#FFC266" /></svg><br />
|
|
46
|
+
<code>#FFC266</code>
|
|
47
|
+
</td>
|
|
48
|
+
<td align="center">
|
|
49
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#090500"><rect width="32" height="32" fill="#090500" /></svg><br />
|
|
50
|
+
<code>#090500</code>
|
|
51
|
+
</td>
|
|
52
|
+
<td align="center">
|
|
53
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#F0FFF8"><rect width="32" height="32" fill="#F0FFF8" /></svg><br />
|
|
54
|
+
<code>#F0FFF8</code>
|
|
55
|
+
</td>
|
|
56
|
+
<td align="center">
|
|
57
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#BAFFC9"><rect width="32" height="32" fill="#BAFFC9" /></svg><br />
|
|
58
|
+
<code>#BAFFC9</code>
|
|
59
|
+
</td>
|
|
60
|
+
<td align="center">
|
|
61
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#B3F5E8"><rect width="32" height="32" fill="#B3F5E8" /></svg><br />
|
|
62
|
+
<code>#B3F5E8</code>
|
|
63
|
+
</td>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td align="center">
|
|
67
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#BAFFFF"><rect width="32" height="32" fill="#BAFFFF" /></svg><br />
|
|
68
|
+
<code>#BAFFFF</code>
|
|
69
|
+
</td>
|
|
70
|
+
<td align="center">
|
|
71
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#D4FFEF"><rect width="32" height="32" fill="#D4FFEF" /></svg><br />
|
|
72
|
+
<code>#D4FFEF</code>
|
|
73
|
+
</td>
|
|
74
|
+
<td align="center">
|
|
75
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#C0F0DE"><rect width="32" height="32" fill="#C0F0DE" /></svg><br />
|
|
76
|
+
<code>#C0F0DE</code>
|
|
77
|
+
</td>
|
|
78
|
+
<td align="center">
|
|
79
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#CAFFCC"><rect width="32" height="32" fill="#CAFFCC" /></svg><br />
|
|
80
|
+
<code>#CAFFCC</code>
|
|
81
|
+
</td>
|
|
82
|
+
<td align="center">
|
|
83
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#FFA500"><rect width="32" height="32" fill="#FFA500" /></svg><br />
|
|
84
|
+
<code>#FFA500</code>
|
|
85
|
+
</td>
|
|
86
|
+
</tr>
|
|
87
|
+
<tr>
|
|
88
|
+
<td align="center">
|
|
89
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#FFEFD7"><rect width="32" height="32" fill="#FFEFD7" /></svg><br />
|
|
90
|
+
<code>#FFEFD7</code>
|
|
91
|
+
</td>
|
|
92
|
+
<td align="center">
|
|
93
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#000000"><rect width="32" height="32" fill="#000000" /></svg><br />
|
|
94
|
+
<code>#000000</code>
|
|
95
|
+
</td>
|
|
96
|
+
<td align="center">
|
|
97
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#FFFFFF"><rect width="32" height="32" fill="#FFFFFF" /></svg><br />
|
|
98
|
+
<code>#FFFFFF</code>
|
|
99
|
+
</td>
|
|
100
|
+
<td align="center">
|
|
101
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#F5F5F5"><rect width="32" height="32" fill="#F5F5F5" /></svg><br />
|
|
102
|
+
<code>#F5F5F5</code>
|
|
103
|
+
</td>
|
|
104
|
+
<td align="center">
|
|
105
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#1E1E1E"><rect width="32" height="32" fill="#1E1E1E" /></svg><br />
|
|
106
|
+
<code>#1E1E1E</code>
|
|
107
|
+
</td>
|
|
108
|
+
</tr>
|
|
109
|
+
<tr>
|
|
110
|
+
<td align="center">
|
|
111
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#252525"><rect width="32" height="32" fill="#252525" /></svg><br />
|
|
112
|
+
<code>#252525</code>
|
|
113
|
+
</td>
|
|
114
|
+
<td align="center">
|
|
115
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#E0E0E0"><rect width="32" height="32" fill="#E0E0E0" /></svg><br />
|
|
116
|
+
<code>#E0E0E0</code>
|
|
117
|
+
</td>
|
|
118
|
+
<td align="center">
|
|
119
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#A0A0A0"><rect width="32" height="32" fill="#A0A0A0" /></svg><br />
|
|
120
|
+
<code>#A0A0A0</code>
|
|
121
|
+
</td>
|
|
122
|
+
<td align="center">
|
|
123
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#404040"><rect width="32" height="32" fill="#404040" /></svg><br />
|
|
124
|
+
<code>#404040</code>
|
|
125
|
+
</td>
|
|
126
|
+
<td align="center">
|
|
127
|
+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#1D3557"><rect width="32" height="32" fill="#1D3557" /></svg><br />
|
|
128
|
+
<code>#1D3557</code>
|
|
129
|
+
</td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td colspan="5" align="center">
|
|
133
|
+
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#1A1000"><rect width="40" height="40" fill="#1A1000" /></svg><br />
|
|
134
|
+
<strong>Background</strong><br />
|
|
135
|
+
<code>#1A1000</code>
|
|
136
|
+
</td>
|
|
137
|
+
</tr>
|
|
138
|
+
<tr>
|
|
139
|
+
<td colspan="5" align="center">
|
|
140
|
+
<strong>Blend mode:</strong> <code>source-over</code> | <strong>Fill:</strong> <code>true</code>
|
|
141
|
+
</td>
|
|
142
|
+
</tr>
|
|
143
|
+
</tbody>
|
|
144
|
+
</table>
|
|
5
145
|
## Quick checklist
|
|
6
146
|
|
|
7
147
|
1. Install `@tsparticles/engine` (or use the CDN bundle below)
|
|
8
|
-
2. Load a base package (for example `@tsparticles/basic`) and call `
|
|
148
|
+
2. Load a base package (for example `@tsparticles/basic`) and call `loadMintPalette` before `tsParticles.load(...)`
|
|
9
149
|
3. Apply the palette plus a minimal particles configuration in your options
|
|
10
150
|
|
|
11
151
|
A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.
|
|
12
152
|
|
|
13
|
-
##
|
|
153
|
+
## How to use it
|
|
154
|
+
|
|
155
|
+
### CDN / Vanilla JS / jQuery
|
|
14
156
|
|
|
15
|
-
```
|
|
16
|
-
|
|
157
|
+
```html
|
|
158
|
+
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script>
|
|
159
|
+
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-mint@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>
|
|
17
160
|
```
|
|
18
161
|
|
|
19
|
-
|
|
162
|
+
### Usage
|
|
20
163
|
|
|
21
|
-
|
|
22
|
-
import { loadBasic } from "@tsparticles/basic";
|
|
23
|
-
import { tsParticles } from "@tsparticles/engine";
|
|
24
|
-
import { loadPastelMintPalette } from "@tsparticles/palette-pastel-mint";
|
|
164
|
+
Once the scripts are loaded you can set up `tsParticles` like this:
|
|
25
165
|
|
|
26
|
-
|
|
27
|
-
|
|
166
|
+
```javascript
|
|
167
|
+
(async engine => {
|
|
168
|
+
await loadBasic(engine);
|
|
169
|
+
await loadMintPalette(engine);
|
|
28
170
|
|
|
29
|
-
|
|
30
|
-
id: "tsparticles",
|
|
31
|
-
options: {
|
|
171
|
+
const options = {
|
|
32
172
|
particles: {
|
|
33
173
|
number: { value: 200 },
|
|
34
174
|
shape: { type: "circle" },
|
|
@@ -38,7 +178,26 @@ await tsParticles.load({
|
|
|
38
178
|
speed: 2,
|
|
39
179
|
},
|
|
40
180
|
},
|
|
41
|
-
palette: "
|
|
42
|
-
}
|
|
43
|
-
|
|
181
|
+
palette: "mint",
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
await engine.load({
|
|
185
|
+
id: "tsparticles",
|
|
186
|
+
options,
|
|
187
|
+
});
|
|
188
|
+
})(tsParticles);
|
|
44
189
|
```
|
|
190
|
+
|
|
191
|
+
#### Customization
|
|
192
|
+
|
|
193
|
+
**Important ⚠️**
|
|
194
|
+
You can override all the options defining the properties like in any standard `tsParticles` installation.
|
|
195
|
+
|
|
196
|
+
### Frameworks with a tsParticles component library
|
|
197
|
+
|
|
198
|
+
Checkout the documentation in the component library repository and call the `loadMintPalette` function.
|
|
199
|
+
|
|
200
|
+
## Related docs
|
|
201
|
+
|
|
202
|
+
- Presets and palettes catalog: <https://github.com/tsparticles/palettes>
|
|
203
|
+
- Main docs: <https://particles.js.org/docs/>
|
package/browser/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { options } from "./options.js";
|
|
1
2
|
const paletteName = "pastel-mint";
|
|
2
3
|
export async function loadPastelMintPalette(engine) {
|
|
3
|
-
await engine.pluginManager.register(
|
|
4
|
-
const { options } = await import("./options.js");
|
|
4
|
+
await engine.pluginManager.register(e => {
|
|
5
5
|
e.pluginManager.addPalette(paletteName, options);
|
|
6
6
|
});
|
|
7
7
|
}
|
package/cjs/browser.js
ADDED
package/cjs/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { options } from "./options.js";
|
|
1
2
|
const paletteName = "pastel-mint";
|
|
2
3
|
export async function loadPastelMintPalette(engine) {
|
|
3
|
-
await engine.pluginManager.register(
|
|
4
|
-
const { options } = await import("./options.js");
|
|
4
|
+
await engine.pluginManager.register(e => {
|
|
5
5
|
e.pluginManager.addPalette(paletteName, options);
|
|
6
6
|
});
|
|
7
7
|
}
|
package/esm/browser.js
ADDED
package/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { options } from "./options.js";
|
|
1
2
|
const paletteName = "pastel-mint";
|
|
2
3
|
export async function loadPastelMintPalette(engine) {
|
|
3
|
-
await engine.pluginManager.register(
|
|
4
|
-
const { options } = await import("./options.js");
|
|
4
|
+
await engine.pluginManager.register(e => {
|
|
5
5
|
e.pluginManager.addPalette(paletteName, options);
|
|
6
6
|
});
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/palette-pastel-mint",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.16",
|
|
4
4
|
"description": "tsParticles pastel mint palette",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
8
|
"url": "git+https://github.com/tsparticles/tsparticles.git",
|
|
9
|
-
"directory": "palettes/pastel/
|
|
9
|
+
"directory": "palettes/pastel/mint"
|
|
10
10
|
},
|
|
11
11
|
"keywords": [
|
|
12
12
|
"front-end",
|
|
@@ -81,8 +81,7 @@
|
|
|
81
81
|
"url": "https://www.buymeacoffee.com/matteobruni"
|
|
82
82
|
}
|
|
83
83
|
],
|
|
84
|
-
"
|
|
85
|
-
"unpkg": "tsparticles.palette-pastel-mint.min.js",
|
|
84
|
+
"sideEffects": false,
|
|
86
85
|
"browser": "browser/index.js",
|
|
87
86
|
"main": "cjs/index.js",
|
|
88
87
|
"module": "esm/index.js",
|
|
@@ -96,13 +95,23 @@
|
|
|
96
95
|
"umd": "./umd/index.js",
|
|
97
96
|
"default": "./cjs/index.js"
|
|
98
97
|
},
|
|
99
|
-
"./package.json": "./package.json"
|
|
98
|
+
"./package.json": "./package.json",
|
|
99
|
+
"./lazy": {
|
|
100
|
+
"types": "./types/index.lazy.d.ts",
|
|
101
|
+
"browser": "./browser/index.lazy.js",
|
|
102
|
+
"import": "./esm/index.lazy.js",
|
|
103
|
+
"require": "./cjs/index.lazy.js",
|
|
104
|
+
"umd": "./umd/index.lazy.js",
|
|
105
|
+
"default": "./cjs/index.lazy.js"
|
|
106
|
+
}
|
|
100
107
|
},
|
|
101
108
|
"dependencies": {
|
|
102
|
-
"@tsparticles/engine": "4.0.0-beta.
|
|
109
|
+
"@tsparticles/engine": "4.0.0-beta.16"
|
|
103
110
|
},
|
|
111
|
+
"type": "module",
|
|
112
|
+
"jsdelivr": "tsparticles.palette-colored-smoke-amber.min.js",
|
|
113
|
+
"unpkg": "tsparticles.palette-colored-smoke-amber.min.js",
|
|
104
114
|
"publishConfig": {
|
|
105
115
|
"access": "public"
|
|
106
|
-
}
|
|
107
|
-
"type": "module"
|
|
116
|
+
}
|
|
108
117
|
}
|