@tsparticles/palette-mermaid 4.0.0-beta.12

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,199 @@
+[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
+
+# tsParticles Mermaid Palette
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-mermaid/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-mermaid) [![npmjs](https://badge.fury.io/js/%40tsparticles%2Fpalette-mermaid.svg)](https://www.npmjs.com/package/@tsparticles/palette-mermaid) [![npmjs](https://img.shields.io/npm/dt/%40tsparticles%2Fpalette-coloredSmokeAmber)](https://www.npmjs.com/package/@tsparticles/palette-mermaid) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/tsparticles/tsparticles) palette for colored smoke amber.
+
+[![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
+
+[![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>
+
+## Sample
+
+[![demo](https://raw.githubusercontent.com/tsparticles/palettes/main/palettes/fantasy/mermaid/images/sample.png)](https://particles.js.org/samples/palettes/mermaid)
+
+## Colors
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <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 />
+        <code>#1A1000</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#3A2200</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#6B3D00</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#A65A00</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#D98A1A</code>
+      </td>
+    </tr>
+    <tr>
+      <td align="center">
+        <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 />
+        <code>#FFC266</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#090500</code>
+      </td>
+      <td align="center">
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#04101A"><rect width="32" height="32" fill="#04101A" /></svg><br />
+        <code>#04101A</code>
+      </td>
+      <td align="center">
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#B3E5FC"><rect width="32" height="32" fill="#B3E5FC" /></svg><br />
+        <code>#B3E5FC</code>
+      </td>
+      <td align="center">
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#4DD0E1"><rect width="32" height="32" fill="#4DD0E1" /></svg><br />
+        <code>#4DD0E1</code>
+      </td>
+    </tr>
+    <tr>
+      <td align="center">
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#26A69A"><rect width="32" height="32" fill="#26A69A" /></svg><br />
+        <code>#26A69A</code>
+      </td>
+      <td align="center">
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#00897B"><rect width="32" height="32" fill="#00897B" /></svg><br />
+        <code>#00897B</code>
+      </td>
+      <td align="center">
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="#006064"><rect width="32" height="32" fill="#006064" /></svg><br />
+        <code>#006064</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#FFA500</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#FFEFD7</code>
+      </td>
+    </tr>
+    <tr>
+      <td align="center">
+        <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 />
+        <code>#000000</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#FFFFFF</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#F5F5F5</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#1E1E1E</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#252525</code>
+      </td>
+    </tr>
+    <tr>
+      <td align="center">
+        <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 />
+        <code>#E0E0E0</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#A0A0A0</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#404040</code>
+      </td>
+      <td align="center">
+        <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 />
+        <code>#1D3557</code>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="5" align="center">
+        <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 />
+        <strong>Background</strong><br />
+        <code>#1A1000</code>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="5" align="center">
+        <strong>Blend mode:</strong> <code>source-over</code> | <strong>Fill:</strong> <code>true</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+## Quick checklist
+
+1. Install `@tsparticles/engine` (or use the CDN bundle below)
+2. Load a base package (for example `@tsparticles/basic`) and call `loadMermaidPalette` before `tsParticles.load(...)`
+3. Apply the palette plus a minimal particles configuration in your options
+
+A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-mermaid@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` like this:
+
+```javascript
+(async engine => {
+  await loadBasic(engine);
+  await loadMermaidPalette(engine);
+
+  const options = {
+    particles: {
+      number: { value: 200 },
+      shape: { type: "circle" },
+      size: { value: { min: 10, max: 15 } },
+      move: {
+        enable: true,
+        speed: 2,
+      },
+    },
+    palette: "mermaid",
+  };
+
+  await engine.load({
+    id: "tsparticles",
+    options,
+  });
+})(tsParticles);
+```
+
+#### Customization
+
+**Important ⚠️**
+You can override all the options defining the properties like in any standard `tsParticles` installation.
+
+### Frameworks with a tsParticles component library
+
+Checkout the documentation in the component library repository and call the `loadMermaidPalette` function.
+
+## Related docs
+
+- Presets and palettes catalog: <https://github.com/tsparticles/palettes>
+- Main docs: <https://particles.js.org/docs/>

package/browser/index.js

@@ -0,0 +1,7 @@
+import { options } from "./options.js";
+const paletteName = "mermaid";
+export async function loadMermaidPalette(engine) {
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addPalette(paletteName, options);
+    });
+}

package/browser/index.lazy.js

@@ -0,0 +1,7 @@
+import { options } from "./options.js";
+const paletteName = "mermaid";
+export async function loadMermaidPalette(engine) {
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addPalette(paletteName, options);
+    });
+}

package/browser/options.js

@@ -0,0 +1,17 @@
+export const options = {
+    name: "Mermaid",
+    background: "#04101a",
+    blendMode: "screen",
+    colors: {
+        fill: {
+            enable: true,
+            value: [
+                "#B3E5FC",
+                "#4DD0E1",
+                "#26A69A",
+                "#00897B",
+                "#006064",
+            ],
+        },
+    },
+};

package/browser/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/cjs/index.js

@@ -0,0 +1,7 @@
+import { options } from "./options.js";
+const paletteName = "mermaid";
+export async function loadMermaidPalette(engine) {
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addPalette(paletteName, options);
+    });
+}

package/cjs/index.lazy.js

@@ -0,0 +1,7 @@
+import { options } from "./options.js";
+const paletteName = "mermaid";
+export async function loadMermaidPalette(engine) {
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addPalette(paletteName, options);
+    });
+}

package/cjs/options.js

@@ -0,0 +1,17 @@
+export const options = {
+    name: "Mermaid",
+    background: "#04101a",
+    blendMode: "screen",
+    colors: {
+        fill: {
+            enable: true,
+            value: [
+                "#B3E5FC",
+                "#4DD0E1",
+                "#26A69A",
+                "#00897B",
+                "#006064",
+            ],
+        },
+    },
+};

package/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/esm/index.js

@@ -0,0 +1,7 @@
+import { options } from "./options.js";
+const paletteName = "mermaid";
+export async function loadMermaidPalette(engine) {
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addPalette(paletteName, options);
+    });
+}

package/esm/index.lazy.js

@@ -0,0 +1,7 @@
+import { options } from "./options.js";
+const paletteName = "mermaid";
+export async function loadMermaidPalette(engine) {
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addPalette(paletteName, options);
+    });
+}

package/esm/options.js

@@ -0,0 +1,17 @@
+export const options = {
+    name: "Mermaid",
+    background: "#04101a",
+    blendMode: "screen",
+    colors: {
+        fill: {
+            enable: true,
+            value: [
+                "#B3E5FC",
+                "#4DD0E1",
+                "#26A69A",
+                "#00897B",
+                "#006064",
+            ],
+        },
+    },
+};

package/esm/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@tsparticles/palette-mermaid",
+  "version": "4.0.0-beta.12",
+  "description": "tsParticles mermaid palette",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tsparticles/tsparticles.git",
+    "directory": "palettes/fantasy/mermaid"
+  },
+  "keywords": [
+    "front-end",
+    "frontend",
+    "tsparticles",
+    "particles.js",
+    "particlesjs",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles-bg",
+    "particles-bg-vue",
+    "particles-ts",
+    "particles.ts",
+    "react-particles-js",
+    "react-particles.js",
+    "react-particles",
+    "react",
+    "reactjs",
+    "vue-particles",
+    "ngx-particles",
+    "angular-particles",
+    "particleground",
+    "vue",
+    "vuejs",
+    "preact",
+    "preactjs",
+    "jquery",
+    "angularjs",
+    "angular",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "confetti",
+    "canvas",
+    "fireworks",
+    "fireworks-js",
+    "confetti-js",
+    "confettijs",
+    "fireworksjs",
+    "canvas-confetti",
+    "tsparticles-palette"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/tsparticles/palettes/issues"
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/matteobruni"
+    },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/tsparticles"
+    },
+    {
+      "type": "buymeacoffee",
+      "url": "https://www.buymeacoffee.com/matteobruni"
+    }
+  ],
+  "sideEffects": false,
+  "browser": "browser/index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "browser": "./browser/index.js",
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js",
+      "umd": "./umd/index.js",
+      "default": "./cjs/index.js"
+    },
+    "./package.json": "./package.json",
+    "./lazy": {
+      "types": "./types/index.lazy.d.ts",
+      "browser": "./browser/index.lazy.js",
+      "import": "./esm/index.lazy.js",
+      "require": "./cjs/index.lazy.js",
+      "umd": "./umd/index.lazy.js",
+      "default": "./cjs/index.lazy.js"
+    }
+  },
+  "dependencies": {
+    "@tsparticles/engine": "4.0.0-beta.12"
+  },
+  "type": "module",
+  "jsdelivr": "tsparticles.palette-colored-smoke-amber.min.js",
+  "unpkg": "tsparticles.palette-colored-smoke-amber.min.js",
+  "publishConfig": {
+    "access": "public"
+  }
+}