Merge pull request #3 from mapbox/v2

mapbox · Feb 5, 2021 · d03ecd1 · d03ecd1
2 parents 05befd8 + 9d90445
commit d03ecd1
Show file tree

Hide file tree

Showing 16 changed files with 8,436 additions and 64 deletions.
diff --git a/.artifacts.yml b/.artifacts.yml
@@ -0,0 +1,3 @@
+version: v1
+defaults:
+  - publisher
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,21 @@
+{
+  "env": {
+    "node": true,
+    "browser": true
+  },
+  "extends": ["eslint:recommended", "eslint-config-prettier"],
+  "rules": {
+    "no-constant-condition": 0,
+    "indent": ["error", 2],
+    "no-console": "warn"
+  },
+  "parser": "babel-eslint",
+  "overrides": [
+    {
+      "files": ["*.test.js"],
+      "env": {
+        "jest": true
+      }
+    }
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+node_modules/
+_site/
+dist/
+demo/to-color.js
+demo/to-color.js.map
+.DS_Store
diff --git a/.publisher.yml b/.publisher.yml
@@ -0,0 +1 @@
+subdomain: labs
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,2 @@
 language: node_js
-node_js:
-  - "0.8"
-  - "0.10"
-before_install:
-  - npm install -g npm@~1.4.6
+node_js: 14
diff --git a/LICENSE.txt → LICENSE b/LICENSE.txt → LICENSE
diff --git a/README.md b/README.md
@@ -1,28 +1,68 @@
-## `toColor`
+`@mapbox/to-color`
+===
 
-[![build status](https://secure.travis-ci.org/mapbox/to-color.svg)](http://travis-ci.org/mapbox/to-color)
+Procedurally generate a deterministic, perceptually distributed color palette.
+
+[![Build Status](https://travis-ci.org/mapbox/to-color.svg)](https://travis-ci.org/mapbox/to-color)
 
 ### install
 
-    npm install @mapbox/to-color
+```bash
+npm install @mapbox/to-color
+```
 
-## API
+### Usage
 
-`toColor`
+```js
+import toColor from '@mapbox/to-color'
 
-Given an arbitrary string, create a rgba color
-of a specified opacity to identify it visually.
+const color = new toColor('tmcw');
 
-### Parameters
+// Or a number
+// const color = new toColor(1234);
+// Or with options
+// const color = new toColor('tmcw', { brightness: 0.25, saturation: 1.1 });
 
-* `str` **`string`** any arbitrary string
-* `opacity` **`number`** an opacity value from 0 to 1
+const { hsl } = color.getColor();
 
+/*
+Returns
 
-### Examples
+{
+  raw: [314, 97.95, 50.98],
+  formatted: 'hsl(314, 97.95%, 50.98%)'
+}
+*/
 
-```js
-toColor('tom') //= 'rgba(187,153,68,0.75)'
+const { hsl } = color.getColor();
+
+/*
+Returns
+
+{
+  raw: [2, 78.26, 54],
+  formatted: 'hsl(2, 78.26%, 54%)'
+}
+*/
 ```
 
-Returns `string` output color
+### Options
+
+| Option | Value | Default | Description |
+| --- | --- | --- | --- |
+| `brightness` | `Number` | `undefined` | Adjusts brightness percentage from the derived min/max range. |
+| `saturation` | `Number` | `undefined` | Adjusts saturation percentage from the derived min/max range. |
+
+### Developing
+
+```bash
+# Demo site
+npm install & npm start
+
+# Run tests
+npm run test
+```
+
+---
+
+**Credit** v2 is adapted from [randomColor](https://github.com/davidmerfield/randomColor).
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+source: demo
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-assembly/mbx/v0.24.0/assembly.min.css'>
+  <script src='https://api.mapbox.com/mapbox-assembly/mbx/v0.28.2/assembly.js'></script>
+  <script src='to-color.js'></script>
+</head>
+<body class="bg-gray-faint limiter">
+  <div class="px36 py36">
+    <header class="mb36">
+      <h1 class="txt-h4 txt-fancy block mb6">@mapbox/to-color</h1>
+      <p class="txt-l">Procedurally generate a deterministic, perceptually distributed color palette. See <a href="https://github.com/mapbox/to-color" class="link" target="_blank">github.com/mapbox/to-color</a> for more.</p>
+    </header>
+    <div id="swatches" class="grid grid--gut12 txt-mono"></div>
+  </div>
+  <script>
+    const wrapOrNah = val => typeof val === 'string' ? `'${val}'` : val;
+    const swatches = document.getElementById('swatches');
+
+    [
+      ['mouse', 6],
+      ['deli', 6],
+      [1234, 6],
+      [5678, 6],
+      ['mapbox.mapbox-streets-v8', 16],
+      ['mapbox.mapbox-streets-v8', 16, { saturation: 0.5 }],
+      ['mapbox.mapbox-streets-v8', 16, { saturation: 1.5 }],
+      ['mapbox.mapbox-streets-v8', 16, { brightness: 0.5 }],
+      ['mapbox.mapbox-streets-v8', 16, { brightness: 1.5 }]
+    ].forEach(swatch => {
+      const seed = swatch[0];
+      const count = swatch[1];
+      const options = swatch[2];
+
+      const container = document.createElement('div');
+      const swatchSnippet = document.createElement('div');
+      swatchSnippet.classList = 'bg-gray-dark color-gray-light txt-mono px12 py12 round-b txt-truncate';
+      const swatchContainer = document.createElement('div');
+      swatchContainer.classList = 'round-t h120 txt-xs txt-bold flex-parent scroll-hidden';
+      const s = new toColor(seed, options || {});
+
+      container.classList = `col col--12 ${count < 8 ? 'col--6-ml' : ''} mb12`;
+
+      for (let i = 0; i < count; i++) {
+        const { hsl } = s.getColor();
+        const swatchContainerItem = document.createElement('div');
+        swatchContainerItem.classList = `px12 py12 flex-child flex-child--grow h120`;
+        swatchContainerItem.textContent = swatchContainerItem.title = swatchContainerItem.style.backgroundColor = hsl.formatted;
+        swatchContainer.appendChild(swatchContainerItem);
+      };
+
+      let optionsString = options ? `, ${JSON.stringify(options)}` : '';
+      let textContent = `${wrapOrNah(seed)}`
+      swatchSnippet.textContent = swatchSnippet.title = `new toColor(${textContent}${optionsString});`;
+
+      container.appendChild(swatchContainer);
+      container.appendChild(swatchSnippet);
+      swatches.appendChild(container); 
+    });
+  </script>
+</body>
+</html>
diff --git a/index.js b/index.js