@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 CHANGED
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
19
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
20
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
21
  SOFTWARE.
22
-
package/README.md CHANGED
@@ -1,34 +1,174 @@
1
- # tsParticles Pastel Mint Palette
1
+ [![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
2
2
 
3
- [tsParticles](https://github.com/tsparticles/tsparticles) palette for pastel mint.
3
+ # tsParticles Mint Palette
4
4
 
5
+ [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-mint/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-mint) [![npmjs](https://badge.fury.io/js/%40tsparticles%2Fpalette-mint.svg)](https://www.npmjs.com/package/@tsparticles/palette-mint) [![npmjs](https://img.shields.io/npm/dt/%40tsparticles%2Fpalette-coloredSmokeAmber)](https://www.npmjs.com/package/@tsparticles/palette-mint) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
6
+
7
+ [tsParticles](https://github.com/tsparticles/tsparticles) palette for colored smoke amber.
8
+
9
+ [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
10
+
11
+ [![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](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
+ [![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/palettes/pastel/mint/images/sample.png)](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 `loadPastelMintPalette` before `tsParticles.load(...)`
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
- ## Install
153
+ ## How to use it
154
+
155
+ ### CDN / Vanilla JS / jQuery
14
156
 
15
- ```bash
16
- pnpm add @tsparticles/palette-pastel-mint
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
- ## Usage
162
+ ### Usage
20
163
 
21
- ```ts
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
- await loadBasic(tsParticles);
27
- await loadPastelMintPalette(tsParticles);
166
+ ```javascript
167
+ (async engine => {
168
+ await loadBasic(engine);
169
+ await loadMintPalette(engine);
28
170
 
29
- await tsParticles.load({
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: "pastel-mint",
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/>
@@ -0,0 +1,5 @@
1
+ import { loadPastelMintPalette } from "./index.js";
2
+ const globalObject = globalThis;
3
+ globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
4
+ globalObject.loadPastelMintPalette = loadPastelMintPalette;
5
+ export * from "./index.js";
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(async (e) => {
4
- const { options } = await import("./options.js");
4
+ await engine.pluginManager.register(e => {
5
5
  e.pluginManager.addPalette(paletteName, options);
6
6
  });
7
7
  }
@@ -0,0 +1,7 @@
1
+ const paletteName = "pastel-mint";
2
+ export async function loadPastelMintPalette(engine) {
3
+ await engine.pluginManager.register(async (e) => {
4
+ const { options } = await import("./options.js");
5
+ e.pluginManager.addPalette(paletteName, options);
6
+ });
7
+ }
package/cjs/browser.js ADDED
@@ -0,0 +1,5 @@
1
+ import { loadPastelMintPalette } from "./index.js";
2
+ const globalObject = globalThis;
3
+ globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
4
+ globalObject.loadPastelMintPalette = loadPastelMintPalette;
5
+ export * from "./index.js";
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(async (e) => {
4
- const { options } = await import("./options.js");
4
+ await engine.pluginManager.register(e => {
5
5
  e.pluginManager.addPalette(paletteName, options);
6
6
  });
7
7
  }
@@ -0,0 +1,7 @@
1
+ const paletteName = "pastel-mint";
2
+ export async function loadPastelMintPalette(engine) {
3
+ await engine.pluginManager.register(async (e) => {
4
+ const { options } = await import("./options.js");
5
+ e.pluginManager.addPalette(paletteName, options);
6
+ });
7
+ }
package/esm/browser.js ADDED
@@ -0,0 +1,5 @@
1
+ import { loadPastelMintPalette } from "./index.js";
2
+ const globalObject = globalThis;
3
+ globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
4
+ globalObject.loadPastelMintPalette = loadPastelMintPalette;
5
+ export * from "./index.js";
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(async (e) => {
4
- const { options } = await import("./options.js");
4
+ await engine.pluginManager.register(e => {
5
5
  e.pluginManager.addPalette(paletteName, options);
6
6
  });
7
7
  }
@@ -0,0 +1,7 @@
1
+ const paletteName = "pastel-mint";
2
+ export async function loadPastelMintPalette(engine) {
3
+ await engine.pluginManager.register(async (e) => {
4
+ const { options } = await import("./options.js");
5
+ e.pluginManager.addPalette(paletteName, options);
6
+ });
7
+ }
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@tsparticles/palette-pastel-mint",
3
- "version": "4.0.0-beta.12",
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/pastelMint"
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
- "jsdelivr": "tsparticles.palette-pastel-mint.min.js",
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.12"
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
  }