feat: support modern css colors (#347)

* feat: add support for modern css colors, beginning with rba and hsl * wip: lab2css * use rgb() and hsl() even if color has alpha != 1 * fix test * feat: support changing the CIELab reference white point * add css lch() export * feat: add css support for oklab and oklch * link to discord in readme * document setLabWhitePoint etc. * fill in changelog * quick n dirty responsive website * remove parsing of css oklab colors for now
gka · Aug 17, 2024 · f9268c0 · f9268c0
1 parent 60e072d
commit f9268c0
Show file tree

Hide file tree

Showing 29 changed files with 894 additions and 141 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,26 @@
 ## Changelog
 
+### 3.0.0
+* 🎉 NEW: add support for modern CSS color spaces `lab()`, `lch()`, `oklab()`, `oklch()`.
+* 🎉 NEW: you can now control the standard white reference point for the CIE Lab and CIE Lch color spaces.
+* chroma.css will no longer return legacy CSS colors like `rgb(255, 255, 0)` but modern CSS colors like `rgb(255 255 0)`.
+
+### 2.6.0
+* 🎉 NEW: add [`color.shade()`](#color-shade), [`color.tint()`](#color-shade).
+* fix: remove false w3c color cornflower
+
+### 2.5.0
+* refactored code base to ES6 modules
+
+### 2.4.0
+* add support for Oklab and Oklch color spaces
+
+### 2.3.0
+* use binom of degree n in chroma.bezier
+
+### 2.2.0
+* use Delta e2000 for chroma.deltaE #269
+
 ### 2.0.3
 * hsl2rgb will, like other x2rgb conversions now set the default alpha to 1
 

diff --git a/docs/bin/post-process b/docs/bin/post-process
@@ -6,7 +6,8 @@ const footer = fs.readFileSync('src/footer.inc.html', 'utf-8');
 
 let modifiedIndex = index.replace('</body>', '\n'+footer+'\n</body>');
 modifiedIndex = modifiedIndex.replace('</head>', '  <link rel="me" href="https://vis.social/@gka">\n</head>');
-modifiedIndex = modifiedIndex.replace('<body>', '<body><div class="wrap">');
+modifiedIndex = modifiedIndex.replace('</head>', '  <meta name="viewport" content="width=device-width, initial-scale=1.0"> \n</head>');
+modifiedIndex = modifiedIndex.replace('<body>', '<body><div class="wrap"><button class="menu-button" onclick="toggleMenu()"><span></span><span></span><span></span></button>');
 modifiedIndex = modifiedIndex.replace('</body>', '</div></body>');
 
 fs.writeFileSync('index.html', modifiedIndex);
diff --git a/docs/src/footer.inc.html b/docs/src/footer.inc.html
@@ -5,6 +5,16 @@
 <script type="text/javascript" src="libs/codemirror/mode/javascript/javascript.js"></script>
 
 <script type="text/javascript">
+    function toggleMenu() {
+        const menu = document.querySelector('.toc-container');
+        menu.classList.toggle('open');
+        menu.addEventListener('click', function (e) {
+            if (e.target.tagName === 'A') {
+                menu.classList.remove('open');
+            }
+        });
+    }
+
     (function ($) {
         $('code.lang-js').each(function () {
             var code = this;
@@ -16,7 +26,9 @@
                 {
                     value: code.innerHTML.trim(),
                     indentUnit: 4,
-                    mode: 'javascript'
+                    mode: 'javascript',
+                    lineWrapping: true,
+                    scrollbarStyle: 'null',
                 }
             );
 
@@ -37,15 +49,17 @@
                 // evaluate script
                 var src = cm.getDoc().getValue();
                 //resDisplay.html('');
+                chroma.setLabWhitePoint('D65');
                 try {
-                    var s = src.split(';').map(eval);
+                    var s = src.split(';').filter(d => d).map(eval);
                     resDisplay.html(
                         '<ol><li>' +
                             s
                                 .map(resRec)
-                                .filter(function (d) {
-                                    return d !== undefined;
-                                })
+                                .map(d => d || '&nbsp;')
+                                // .filter(function (d) {
+                                //     return d !== undefined;
+                                // })
                                 .join('</li><li>') +
                             '</li></ol>'
                     );
@@ -139,16 +153,20 @@
                 }
 
                 try {
-                    var col = chroma(val),
-                        l = col.oklch()[0];
-                    span.attr(
-                        'style',
-                        [
-                            'background-color:' + col.hex(),
-                            'color:' + (l < 0.7 ? 'white' : 'black'),
-                            'opacity:' + col.alpha()
-                        ].join(';')
-                    );
+                    if (chroma.valid(val)) {
+                        const col = chroma(val);
+                        const l = col.oklch()[0];
+                        const isCSS = /[a-z]+\([^\)]+\)/.test(val)
+                        span.attr(
+                            'style',
+                            [
+                                'background-color:' + (isCSS ? val : col.hex()),
+                                'color:' + (l < 0.7 ? 'white' : 'black'),
+                                'opacity:' + col.alpha()
+                            ].join(';')
+                        );
+
+                    }
                 } catch (e) {
                     //console.log(e);
                     span.attr('style', '');