@tsparticles/palette-monochrome-noir 4.0.0-alpha.5

package/361.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_palette_monochrome_noir=this.webpackChunk_tsparticles_palette_monochrome_noir||[]).push([[361],{361(o,e,t){t.d(e,{options:()=>r});let r={name:"Monochrome Noir",blendMode:"source-over",background:"#050506",fill:!0,colors:["#0B0B0C","#1C1D20","#3A3D44","#7A808C","#C7CCD6","#F5F7FA"]}}}]);

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,143 @@
+[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
+
+# tsParticles Monochrome Noir Palette
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/palette-monochrome-noir/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/palette-monochrome-noir) [![npmjs](https://badge.fury.io/js/@tsparticles/palette-monochrome-noir.svg)](https://www.npmjs.com/package/@tsparticles/palette-monochrome-noir) [![npmjs](https://img.shields.io/npm/dt/@tsparticles/palette-monochrome-noir)](https://www.npmjs.com/package/@tsparticles/palette-monochrome-noir) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/tsparticles/tsparticles) palette for monochrome noir.
+
+[![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/presets/main/palettes/monochromeNoir/images/sample.png)](https://particles.js.org/samples/palettes/monochrome-noir)
+
+## 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="#0B0B0C"><rect width="32" height="32" fill="#0B0B0C" /></svg><br />
+        <code>#0B0B0C</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="#1C1D20"><rect width="32" height="32" fill="#1C1D20" /></svg><br />
+        <code>#1C1D20</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="#3A3D44"><rect width="32" height="32" fill="#3A3D44" /></svg><br />
+        <code>#3A3D44</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="#7A808C"><rect width="32" height="32" fill="#7A808C" /></svg><br />
+        <code>#7A808C</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="#C7CCD6"><rect width="32" height="32" fill="#C7CCD6" /></svg><br />
+        <code>#C7CCD6</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="#F5F7FA"><rect width="32" height="32" fill="#F5F7FA" /></svg><br />
+        <code>#F5F7FA</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="#050506"><rect width="40" height="40" fill="#050506" /></svg><br />
+        <strong>Background</strong><br />
+        <code>#050506</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. Call the package loader function(s) before `tsParticles.load(...)`
+3. Apply the package options in your `tsParticles.load(...)` config
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-monochrome-noir@3/tsparticles.palette.monochrome-noir.bundle.min.js"></script>
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` like this:
+
+```javascript
+(async () => {
+  await loadMonochromeNoirPalette(tsParticles);
+
+  await tsParticles.load({
+    id: "tsparticles",
+    options: {
+      palette: "monochrome-noir",
+    },
+  });
+})();
+```
+
+#### Customization
+
+**Important ⚠️**
+You can override all the options defining the properties like in any standard `tsParticles` installation.
+
+```javascript
+tsParticles.load({
+  id: "tsparticles",
+  options: {
+    particles: {
+      shape: {
+        type: "square", // starting from v2, this require the square shape script
+      },
+    },
+    palette: "monochrome-noir",
+  },
+});
+```
+
+Like in the sample above, the circles will be replaced by squares.
+
+### Frameworks with a tsParticles component library
+
+Checkout the documentation in the component library repository and call the `loadMonochromeNoirPalette` function instead of `loadFull`, `loadSlim` or similar functions.
+
+The options shown above are valid for all the component libraries.
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before `loadMonochromeNoirPalette(...)`
+- Verify required peer packages before enabling advanced options
+- Change one option group at a time to isolate regressions quickly
+
+## Related docs
+
+- Presets and palettes catalog: <https://github.com/tsparticles/presets>
+- Main docs: <https://particles.js.org/docs/>
+
+---
+
+```mermaid
+flowchart TD
+
+subgraph pr [Palettes]
+pamonochromeNoir[Monochrome Noir]
+end
+
+e[tsParticles Engine] --> pamonochromeNoir
+```

package/browser/index.js

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

package/browser/options.js

@@ -0,0 +1,14 @@
+export const options = {
+    name: "Monochrome Noir",
+    blendMode: "source-over",
+    background: "#050506",
+    fill: true,
+    colors: [
+        "#0B0B0C",
+        "#1C1D20",
+        "#3A3D44",
+        "#7A808C",
+        "#C7CCD6",
+        "#F5F7FA",
+    ],
+};

package/browser/package.json

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

package/cjs/index.js

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

package/cjs/options.js

@@ -0,0 +1,14 @@
+export const options = {
+    name: "Monochrome Noir",
+    blendMode: "source-over",
+    background: "#050506",
+    fill: true,
+    colors: [
+        "#0B0B0C",
+        "#1C1D20",
+        "#3A3D44",
+        "#7A808C",
+        "#C7CCD6",
+        "#F5F7FA",
+    ],
+};

package/cjs/package.json

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

package/dist_browser_options_js.js

@@ -0,0 +1,30 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v4.0.0-alpha.5
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_palette_monochrome_noir"] = this["webpackChunk_tsparticles_palette_monochrome_noir"] || []).push([["dist_browser_options_js"],{
+
+/***/ "./dist/browser/options.js"
+/*!*********************************!*\
+  !*** ./dist/browser/options.js ***!
+  \*********************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   options: () => (/* binding */ options)\n/* harmony export */ });\nconst options = {\n    name: \"Monochrome Noir\",\n    blendMode: \"source-over\",\n    background: \"#050506\",\n    fill: true,\n    colors: [\n        \"#0B0B0C\",\n        \"#1C1D20\",\n        \"#3A3D44\",\n        \"#7A808C\",\n        \"#C7CCD6\",\n        \"#F5F7FA\"\n    ]\n};\n\n\n//# sourceURL=webpack://@tsparticles/palette-monochrome-noir/./dist/browser/options.js?\n}");
+
+/***/ }
+
+}]);

package/esm/index.js

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

package/esm/options.js

@@ -0,0 +1,14 @@
+export const options = {
+    name: "Monochrome Noir",
+    blendMode: "source-over",
+    background: "#050506",
+    fill: true,
+    colors: [
+        "#0B0B0C",
+        "#1C1D20",
+        "#3A3D44",
+        "#7A808C",
+        "#C7CCD6",
+        "#F5F7FA",
+    ],
+};

package/esm/package.json

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

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@tsparticles/palette-monochrome-noir",
+  "version": "4.0.0-alpha.5",
+  "description": "tsParticles monochrome noir palette",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tsparticles/presets.git",
+    "directory": "palettes/monochromeNoir"
+  },
+  "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/presets/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"
+    }
+  ],
+  "jsdelivr": "tsparticles.palette.monochrome-noir.min.js",
+  "unpkg": "tsparticles.palette.monochrome-noir.min.js",
+  "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"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^4.0.0-beta.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module"
+}