color-elements 0.0.1 → 0.0.2

package/README.md

@@ -1,33 +1,55 @@
-# Color.js Web Components
+# Color Elements
 
-These are some highly experimental color-related web components.
+These are some **highly experimental** color-related web components.
 Use at your own risk, the API can change at any point.
 
 ## Usage
 
+### CDN
+
 To include all components at once:
 
 ```html
-<script src="https://colorjs.io/elements/index.js"></script>
+<script src="https://elements.colorjs.io/index.js"></script>
 ```
 
 To cherry-pick individual components, follow the instructions within the component’s page, but it generally looks like this:
 
 ```html
-<script src="https://colorjs.io/elements/COMPONENT_NAME/COMPONENT_NAME.js"></script>
+<script src="https://elements.colorjs.io/src/COMPONENT_NAME/COMPONENT_NAME.js"></script>
+```
+
+Each component imports its own dependencies and styles.
+
+### NPM
+
+As usual:
+
+```bash
+npm i color-elements
 ```
 
-or if using a bundler:
+and then:
 
 ```js
 import "color-elements";
 ```
 
-Then just start using it!
+You can also import individual components:
+
+```js
+import "color-elements/COMPONENT_NAME";
+```
+
+## All elements
+
+- [`<color-picker>`](src/color-picker/)
+- [`<color-slider>`](src/color-slider/)
+- [`<channel-slider>`](src/channel-slider/)
+- [`<color-swatch>`](src/color-swatch/)
+- [`<color-inline>`](src/color-inline/)
+- [`<color-gamut>`](src/color-gamut/)
 
-## Components
+### Upcoming:
 
-- [`<css-color>`](./css-color/)
-- [`<color-swatch>`](./color-swatch/)
-- [`<color-gamut>`](./color-gamut/)
-- [`<color-slider>`](./color-slider/)
+- `<color-plane>`

package/_build/copy-config.js

@@ -12,8 +12,18 @@ let commands = [
 	`git clone ${ config.source } ${ TEMP_REPO }`,
 	...config.paths.map(path => {
 		let [current_path, new_path] = Array.isArray(path) ? path : [path, path];
+		let new_path_dir = new_path.split("/").slice(0, -1).join("/");
 
-		return `rm -rf ./${new_path} && cp -r ${TEMP_REPO}/${ current_path } ./${ new_path }`;
+		let commands = [
+			`rm -rf ./${new_path}`,
+			`cp -r ${TEMP_REPO}/${ current_path } ./${ new_path }`,
+		];
+
+		if (new_path_dir) {
+			commands.splice(1, 0, `mkdir -p ./${new_path_dir}`);
+		}
+
+		return commands.join(" && ");
 	}),
 ];
 

package/_build/copy-config.json

@@ -1,7 +1,7 @@
 {
 	"source": "https://github.com/color-js/color.js",
 	"paths": [
-		"_includes/partials",
+		"_includes/partials/_nav.njk",
 		"_includes/page.njk",
 		"_includes/plain.njk",
 		"_data/eleventyComputed.js",

package/_build/eleventy.js

@@ -1,10 +1,21 @@
+import markdownIt from "markdown-it";
+import markdownItAttrs from "markdown-it-attrs";
 import configOriginal from "./eleventy-original.js";
+import * as filters from "./filters-extra.js";
 
 let data = {
 	"permalink": "{{ page.filePathStem | replace('README', '') | replace('index', '') }}/index.html",
 	"body_classes": "cn-ignore"
 };
 
+let md = markdownIt({
+	html: true,
+	linkify: true,
+	typographer: true,
+})
+.disable("code")
+.use(markdownItAttrs);
+
 export default config => {
 	let ret = configOriginal(config);
 
@@ -12,5 +23,15 @@ export default config => {
 		config.addGlobalData(prop, data[prop]);
 	}
 
+	for (let f in filters) {
+		config.addFilter(f, filters[f]);
+	}
+
+	config.setLibrary("md", md);
+
+	config.addPairedShortcode("md", children => {
+		return md.render(children);
+	});
+
 	return ret;
 };

package/_build/filters-extra.js

@@ -0,0 +1,3 @@
+export function tag_to_class (tag) {
+	return tag?.replace(/(?:^|-)([a-z])/g, ($0, $1) => $1.toUpperCase());
+}

package/_data/components.json

@@ -0,0 +1,8 @@
+[
+	"color-picker",
+	"color-swatch",
+	"color-inline",
+	"channel-slider",
+	"color-slider",
+	"color-gamut"
+]

package/_includes/component.njk

@@ -0,0 +1,61 @@
+---js
+{
+	layout: "page.njk",
+	body_classes: "cn-ignore component-page",
+	eleventyComputed: {
+		name: function (data) {
+			let url = data.page.url;
+			if (url.includes("/src/")) {
+				return url.match(/\/src\/([^/]+)/)[1];
+			}
+		},
+		tag: function (data) {
+			let name = data.name;
+			if (name) {
+				return `<${name}>`;
+			}
+		},
+		title: function (data) {
+			return data.title ?? data.tag;
+		},
+	}
+}
+---
+
+<script src="{{ page | relative }}/index.js" type="module"></script>
+<script src="{{ name }}.js" type="module"></script>
+
+{{ content | safe }}
+
+<section id="installation">
+{% md %}
+## Installation
+
+To install all color elements, check out the [instructions on the homepage](../).
+The rest of this section is about using _only_ `{{ tag | safe }}`.
+
+The quick and dirty way is straight from the CDN (kindly provided by [Netlify](https://www.netlify.com/)):
+
+```html
+<script src="https://elements.colorjs.io/src/{{ name }}/{{ name }}.js" type="module"></script>
+```
+
+or in JS:
+
+```js
+import "https://elements.colorjs.io/src/{{ name }}/{{ name }}.js";
+```
+
+If you are using npm to manage your dependencies, you can import it via:
+
+```js
+import "color-elements/{{ name }}";
+```
+
+or:
+
+```js
+import { {{ name | tag_to_class }} } from "color-elements";
+```
+{% endmd %}
+</section>

package/_includes/partials/_nav-links.njk

@@ -0,0 +1,12 @@
+<a href="https://colorjs.io">Color.js</a>
+<div class="menu">
+	<a href="{{ page | relative }}">Elements</a>
+	<ul>
+		{% for name in components %}
+			<li><a href="{{ page | relative }}/src/{{ name }}/"><code>&lt;{{ name }}&gt;</code></a></span>
+		{% endfor %}
+	</ul>
+</div>
+
+<a href="https://github.com/color-js/elements">GitHub</a>
+<a href="https://github.com/color-js/elements/issues/new" class="footer">File bug</a>

package/_redirects

@@ -1,2 +1,2 @@
-node_modules/* lib/:splat 200
+node_modules/:modulename/* https://cdn.jsdelivr.net/npm/:modulename@latest/:splat 200
 assets/* https://colorjs.io/assets/:splat 200

package/assets/js/index.js

@@ -1,15 +1,16 @@
-import "https://colorjs.io/assets/js/index.js";
-
 import "https://colorjs.io/assets/js//prism.js";
-// import "https://blissfuljs.com/bliss.shy.js";
-// import "https://live.prismjs.com/src/prism-live.mjs?load=javascript";
-// import "https://colorjs.io/notebook/color-notebook.js";
 import "https://colorjs.io/assets/js/colors.js";
-import { styleCallouts } from "https://colorjs.io/assets/js/enhance.js";
 
+import { styleCallouts } from "https://colorjs.io/assets/js/enhance.js";
 styleCallouts();
 
 let root = document.documentElement;
 document.addEventListener("scroll", evt => {
 	root.style.setProperty("--scrolltop", root.scrollTop);
-}, {passive: true});
+}, {passive: true});
+
+import HTMLDemoElement from "https://nudeui.com/elements/html-demo/html-demo.js";
+
+if (document.body.classList.contains("component-page")) {
+	HTMLDemoElement.wrapAll();
+}

package/eslint.config.js

@@ -0,0 +1,316 @@
+import globals from "globals";
+import stylistic from "@stylistic/eslint-plugin";
+
+export default [
+	{
+		languageOptions: {
+			ecmaVersion: 2022,
+			sourceType: "module",
+			globals: {
+				...globals.browser,
+			},
+		},
+		plugins: {
+			"@stylistic": stylistic,
+		},
+		rules: {
+			/**
+			 * ESLint rules: https://eslint.org/docs/latest/rules/
+			 * Based off of: https://github.com/eslint/eslint/blob/v8.54.0/packages/js/src/configs/eslint-recommended.js
+			 */
+			// Enforce curly braces for all control statements
+			// https://eslint.org/docs/latest/rules/curly
+			curly: 1,
+
+			// Require `super()` calls in constructors
+			// https://eslint.org/docs/latest/rules/constructor-super
+			"constructor-super": 1,
+
+			// Enforce “for” loop update clause moving the counter in the right direction
+			// https://eslint.org/docs/latest/rules/for-direction
+			"for-direction": 1,
+
+			// Enforce `return` statements in getters
+			// https://eslint.org/docs/latest/rules/getter-return
+			"getter-return": 1,
+
+			// Disallow using an async function as a Promise executor
+			// https://eslint.org/docs/latest/rules/no-async-promise-executor
+			"no-async-promise-executor": 1,
+
+			// Disallow `let`/const`/function`/`class` in `case`/`default` clauses
+			// https://eslint.org/docs/latest/rules/no-case-declarations
+			"no-case-declarations": 1,
+
+			// Disallow reassigning class members
+			// https://eslint.org/docs/latest/rules/no-class-assign
+			"no-class-assign": 1,
+
+			// Disallow comparing against -0
+			// https://eslint.org/docs/latest/rules/no-compare-neg-zero
+			"no-compare-neg-zero": 1,
+
+			// Disallow reassigning `const` variables
+			// https://eslint.org/docs/latest/rules/no-const-assign
+			"no-const-assign": 1,
+
+			// Disallow constant expressions in conditions
+			// https://eslint.org/docs/latest/rules/no-constant-condition
+			"no-constant-condition": 1,
+
+			// Disallow control characters in regular expressions
+			// https://eslint.org/docs/latest/rules/no-control-regex
+			"no-control-regex": 1,
+
+			// Disallow the use of `debugger`
+			// https://eslint.org/docs/latest/rules/no-debugger
+			"no-debugger": 1,
+
+			// Disallow deleting variables
+			// https://eslint.org/docs/latest/rules/no-delete-var
+			"no-delete-var": 1,
+
+			// Disallow duplicate arguments in `function` definitions
+			// https://eslint.org/docs/latest/rules/no-dupe-args
+			"no-dupe-args": 1,
+
+			// Disallow duplicate class members
+			// https://eslint.org/docs/latest/rules/no-dupe-class-members
+			"no-dupe-class-members": 1,
+
+			// Disallow duplicate conditions in if-else-if chains
+			// https://eslint.org/docs/latest/rules/no-dupe-else-if
+			"no-dupe-else-if": 1,
+
+			// Disallow duplicate keys in object literals
+			// https://eslint.org/docs/latest/rules/no-dupe-keys
+			"no-dupe-keys": 1,
+
+			// Disallow duplicate case labels
+			// https://eslint.org/docs/latest/rules/no-duplicate-case
+			"no-duplicate-case": 1,
+
+			// Disallow empty character classes in regular expressions
+			// https://eslint.org/docs/latest/rules/no-empty-character-class
+			"no-empty-character-class": 1,
+
+			// Disallow empty destructuring patterns
+			// https://eslint.org/docs/latest/rules/no-empty-pattern
+			"no-empty-pattern": 1,
+
+			// Disallow reassigning exceptions in `catch` clauses
+			// https://eslint.org/docs/latest/rules/no-ex-assign
+			"no-ex-assign": 1,
+
+			// Disallow unnecessary boolean casts
+			// https://eslint.org/docs/latest/rules/no-extra-boolean-cast
+			"no-extra-boolean-cast": 1,
+
+			// Disallow fallthrough of `case` statements
+			// unless marked with a comment that matches `/falls?\s?through/i` regex
+			// https://eslint.org/docs/latest/rules/no-fallthrough
+			"no-fallthrough": 1,
+
+			// Disallow reassigning `function` declarations
+			// https://eslint.org/docs/latest/rules/no-func-assign
+			"no-func-assign": 1,
+
+			// Disallow assignments to native objects or read-only global variables
+			// https://eslint.org/docs/latest/rules/no-global-assign
+			"no-global-assign": 1,
+
+			// Disallow assigning to imported bindings
+			// https://eslint.org/docs/latest/rules/no-import-assign
+			"no-import-assign": 1,
+
+			// Disallow invalid regular expression strings in `RegExp` constructors
+			// https://eslint.org/docs/latest/rules/no-invalid-regexp
+			"no-invalid-regexp": 1,
+
+			// Disallow whitespace that is not `tab` or `space` except in string literals
+			// https://eslint.org/docs/latest/rules/no-irregular-whitespace
+			"no-irregular-whitespace": 1,
+
+			// Disallow characters which are made with multiple code points in character class syntax
+			// https://eslint.org/docs/latest/rules/no-misleading-character-class
+			"no-misleading-character-class": 1,
+
+			// Disallow `new` operators with the `Symbol` object
+			// https://eslint.org/docs/latest/rules/no-new-symbol
+			"no-new-symbol": 1,
+
+			// Disallow `\8` and `\9` escape sequences in string literals
+			// https://eslint.org/docs/latest/rules/no-nonoctal-decimal-escape
+			"no-nonoctal-decimal-escape": 1,
+
+			// Disallow calling global object properties as functions
+			// https://eslint.org/docs/latest/rules/no-obj-calls
+			"no-obj-calls": 1,
+
+			// Disallow octal literals
+			// https://eslint.org/docs/latest/rules/no-octal
+			"no-octal": 1,
+
+			// Disallow calling some `Object.prototype` methods directly on objects
+			// https://eslint.org/docs/latest/rules/no-prototype-builtins
+			"no-prototype-builtins": 1,
+
+			// Disallow multiple spaces in regular expressions
+			// https://eslint.org/docs/latest/rules/no-regex-spaces
+			"no-regex-spaces": 1,
+
+			// Disallow assignments where both sides are exactly the same
+			// https://eslint.org/docs/latest/rules/no-self-assign
+			"no-self-assign": 1,
+
+			// Disallow identifiers from shadowing restricted names
+			// https://eslint.org/docs/latest/rules/no-shadow-restricted-names
+			"no-shadow-restricted-names": 1,
+
+			// Disallow `this`/`super` before calling `super()` in constructors
+			// https://eslint.org/docs/latest/rules/no-this-before-super
+			"no-this-before-super": 1,
+
+			// Disallow the use of undeclared variables unless mentioned in `/*global */` comments
+			// https://eslint.org/docs/latest/rules/no-undef
+			// TODO: At-risk; subject to change.
+			"no-undef": 1,
+
+			// Disallow confusing multiline expressions
+			// https://eslint.org/docs/latest/rules/no-unexpected-multiline
+			// TODO: At-risk; subject to change.
+			"no-unexpected-multiline": 1,
+
+			// Disallow unreachable code after `return`, `throw`, `continue`, and `break` statements
+			// https://eslint.org/docs/latest/rules/no-unreachable
+			"no-unreachable": 1,
+
+			// Disallow control flow statements in `finally` blocks
+			// https://eslint.org/docs/latest/rules/no-unsafe-finally
+			"no-unsafe-finally": 1,
+
+			// Disallow negating the left operand of relational operators
+			// https://eslint.org/docs/latest/rules/no-unsafe-negation
+			"no-unsafe-negation": 1,
+
+			// Disallow use of optional chaining in contexts where the `undefined` value is not allowed
+			// https://eslint.org/docs/latest/rules/no-unsafe-optional-chaining
+			"no-unsafe-optional-chaining": 1,
+
+			// Disallow unused labels
+			// https://eslint.org/docs/latest/rules/no-unused-labels
+			"no-unused-labels": 1,
+
+			// Disallow useless backreferences in regular expressions
+			// https://eslint.org/docs/latest/rules/no-useless-backreference
+			"no-useless-backreference": 1,
+
+			// Disallow unnecessary calls to `.call()` and `.apply()`
+			// https://eslint.org/docs/latest/rules/no-useless-call
+			"no-useless-call": 1,
+
+			// Disallow unnecessary `catch` clauses
+			// https://eslint.org/docs/latest/rules/no-useless-catch
+			"no-useless-catch": 1,
+
+			// Disallow unnecessary escape characters
+			// https://eslint.org/docs/latest/rules/no-useless-escape
+			"no-useless-escape": 1,
+
+			// Disallow `with` statements
+			// https://eslint.org/docs/latest/rules/no-with
+			"no-with": 1,
+
+			// Require generator functions to contain `yield`
+			// https://eslint.org/docs/latest/rules/require-yield
+			"require-yield": 1,
+
+			// Require calls to `isNaN()` when checking for `NaN`
+			// https://eslint.org/docs/latest/rules/use-isnan
+			"use-isnan": 1,
+
+			// Enforce comparing `typeof` expressions against valid strings
+			// https://eslint.org/docs/latest/rules/valid-typeof
+			"valid-typeof": 1,
+
+			/**
+			 * ESLint Stylistic rules: https://eslint.style/packages/default#rules
+			 */
+			// Enforce a space before and after `=>` in arrow functions
+			// https://eslint.style/rules/default/arrow-spacing
+			"@stylistic/arrow-spacing": 1,
+
+			// Enforce consistent brace style for blocks
+			// https://eslint.style/rules/default/brace-style
+			"@stylistic/brace-style": [1, "stroustrup"],
+
+			// Enforce trailing commas unless closing `]` or `}` is on the same line
+			// https://eslint.style/rules/default/comma-dangle
+			"@stylistic/comma-dangle": [1, "always-multiline"],
+
+			// Enforce no space before and one or more spaces after a comma
+			// https://eslint.style/rules/default/comma-spacing
+			"@stylistic/comma-spacing": 1,
+
+			// Require newline at the end of files
+			// https://eslint.style/rules/default/eol-last
+			"@stylistic/eol-last": 1,
+
+			// Enforce consistent indentation
+			// https://eslint.style/rules/default/indent
+			"@stylistic/indent": [1, "tab", { SwitchCase: 1, outerIIFEBody: 0 }],
+
+			// Enforce consistent spacing before and after keywords
+			// https://eslint.style/rules/default/keyword-spacing
+			"@stylistic/keyword-spacing": 1,
+
+			// Disallow unnecessary semicolons
+			// https://eslint.style/rules/default/no-extra-semi
+			"@stylistic/no-extra-semi": 1,
+
+			// Disallow mixed spaces and tabs for indentation
+			// https://eslint.style/rules/default/no-mixed-spaces-and-tabs
+			"@stylistic/no-mixed-spaces-and-tabs": [1, "smart-tabs"],
+
+			// Disallow trailing whitespace at the end of lines
+			// https://eslint.style/rules/default/no-trailing-spaces
+			"@stylistic/no-trailing-spaces": 1,
+
+			// Enforce the consistent use of double quotes
+			// https://eslint.style/rules/default/quotes
+			"@stylistic/quotes": [
+				1,
+				"double",
+				{ avoidEscape: true, allowTemplateLiterals: true },
+			],
+
+			// Require semicolons instead of ASI
+			// https://eslint.style/rules/default/semi
+			"@stylistic/semi": 1,
+
+			// Enforce at least one space before blocks
+			// https://eslint.style/rules/default/space-before-blocks
+			"@stylistic/space-before-blocks": 1,
+
+			// Enforce a space before `function` definition opening parenthesis
+			// https://eslint.style/rules/default/space-before-function-paren
+			"@stylistic/space-before-function-paren": 1,
+
+			// Require spaces around infix operators (e.g. `+`, `=`, `?`, `:`)
+			// https://eslint.style/rules/default/space-infix-ops
+			"@stylistic/space-infix-ops": 1,
+
+			// Enforce a space after unary word operators (`new`, `delete`, `typeof`, `void`, `yield`)
+			// https://eslint.style/rules/default/space-unary-ops
+			"@stylistic/space-unary-ops": 1,
+
+			// Enforce whitespace after the `//` or `/*` in a comment
+			// https://eslint.style/rules/default/spaced-comment
+			"@stylistic/spaced-comment": [
+				1,
+				"always",
+				{ block: { exceptions: ["*"] } },
+			],
+		},
+	},
+];

package/index.js

@@ -1,4 +1,6 @@
-export { default as ColorSlider } from './color-slider/color-slider.js';
-export { default as ColorSwatch } from './color-swatch/color-swatch.js';
-export { default as CSSColor } from './css-color/css-color.js';
-export { default as ColorGamut } from './color-gamut/color-gamut.js';
+export { default as ColorPicker } from "./src/color-picker/color-picker.js";
+export { default as ColorSwatch } from "./src/color-swatch/color-swatch.js";
+export { default as ColorInline } from "./src/color-inline/color-inline.js";
+export { default as ChannelSlider } from "./src/channel-slider/channel-slider.js";
+export { default as ColorSlider } from "./src/color-slider/color-slider.js";
+export { default as ColorGamut } from "./src/color-gamut/color-gamut.js";

package/logo.svg

@@ -1,30 +1,36 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -625 630 615" overflow="visible" height="600">
 <desc>Based on u*,v* UCS diagram</desc>
 <style>
+
 #tongue {
 	fill: hsl(220, 10%, 48%);
 }
 
-.color-space polygon {
-	fill: none;
+text {
+	stroke: hsl(220, 10%, 94%);
+	stroke-width: .1em;
+	stroke-linejoin: round;
+	font: 800 333px/1 system-ui, sans-serif;
+	text-anchor: middle;
+	dominant-baseline: middle;
+	letter-spacing: -.06em;
+	paint-order: stroke fill;
 }
 
-.color-space circle,
-.color-space polygon {
-	stroke: hsl(220, 10%, 88%);
-	stroke-width: 30px;
+.lt {
+	fill: hsl(0, 80%, 50%);
 }
 
-.color-space circle {
-	stroke-width: 22px;
+.slash {
+	fill: hsl(90, 50%, 45%);
 }
 
-#white-point {
-	fill: white;
+.gt {
+	fill: hsl(210 80% 55%);
 }
 
 </style>
-
+<!-- <rect x="0" y="-625" width="630" height="615" fill="hsl(60, 100%, 50%)"/> -->
 <path id="tongue" d="M 256.804  -16.594
   L 256.637  -16.593
   L 256.418  -16.266
@@ -120,39 +126,11 @@
   L 623.393  -506.491
   Z"/>
 
-<!-- White point -->
-<!-- <circle r="12" cx="197.83" cy="-468.32" id="white-point" /> -->
-
-<!-- sRGB
-red 450.70423, 522.88732
-green  125, 562.5
-blue 175.4386, 157.89474
-white 197.83001, 468.31999
-
-<g class="color-space" id="srgb">
-	<polygon points="450.7, -522.887 125, -562.5 175.44, -157.89"/>
-
-	<circle r="36" cx="450.7" cy="-522.887" fill="hsl(0, 80%, 50%)" />
-	<circle r="36" cx="125" cy="-562.5" fill="hsl(90, 50%, 45%)" />
-	<circle r="36" cx="175.44" cy="-157.89" fill="hsl(210 80% 55%)" />
-</g>
--->
-
-<!-- display-p3000
-red 496.35036, 525.54745
-green 98.60465, 577.67442
-blue 175.4386, 157.89474
-white 197.83001, 468.31999
--->
-<g class="color-space" id="p3">
-	<polygon points="496.35, -525.54 98.6, -577.67 175.44, -157.89"/>
-
-	<circle r="36" cx="496.35" cy="-525.54" fill="hsl(0, 80%, 50%)" />
-	<circle r="36" cx="98.6" cy="-577.67" fill="hsl(90, 50%, 45%)" />
-	<circle r="36" cx="175.44" cy="-157.89" fill="hsl(210 80% 55%)" />
-</g>
-
-
+<text x="44%" y="-55%">
+	<tspan class="lt">&lt;</tspan>
+	<tspan class="slash">/</tspan>
+	<tspan class="gt">&gt;</tspan>
+</text>