Skip to content

Commit f9268c0

Browse files
gkagka
authored
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
1 parent 60e072d commit f9268c0

29 files changed

Lines changed: 894 additions & 141 deletions

‎CHANGELOG.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
11
## Changelog
22

3+
### 3.0.0
4+
* 🎉 NEW: add support for modern CSS color spaces `lab()`, `lch()`, `oklab()`, `oklch()`.
5+
* 🎉 NEW: you can now control the standard white reference point for the CIE Lab and CIE Lch color spaces.
6+
* chroma.css will no longer return legacy CSS colors like `rgb(255, 255, 0)` but modern CSS colors like `rgb(255 255 0)`.
7+
8+
### 2.6.0
9+
* 🎉 NEW: add [`color.shade()`](#color-shade), [`color.tint()`](#color-shade).
10+
* fix: remove false w3c color cornflower
11+
12+
### 2.5.0
13+
* refactored code base to ES6 modules
14+
15+
### 2.4.0
16+
* add support for Oklab and Oklch color spaces
17+
18+
### 2.3.0
19+
* use binom of degree n in chroma.bezier
20+
21+
### 2.2.0
22+
* use Delta e2000 for chroma.deltaE #269
23+
324
### 2.0.3
425
* hsl2rgb will, like other x2rgb conversions now set the default alpha to 1
526

‎docs/bin/post-process‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ const footer = fs.readFileSync('src/footer.inc.html', 'utf-8');
66

77
let modifiedIndex = index.replace('</body>', '\n'+footer+'\n</body>');
88
modifiedIndex = modifiedIndex.replace('</head>', ' <link rel="me" href="https://vis.social/@gka">\n</head>');
9-
modifiedIndex = modifiedIndex.replace('<body>', '<body><div class="wrap">');
9+
modifiedIndex = modifiedIndex.replace('</head>', ' <meta name="viewport" content="width=device-width, initial-scale=1.0"> \n</head>');
10+
modifiedIndex = modifiedIndex.replace('<body>', '<body><div class="wrap"><button class="menu-button" onclick="toggleMenu()"><span></span><span></span><span></span></button>');
1011
modifiedIndex = modifiedIndex.replace('</body>', '</div></body>');
1112

1213
fs.writeFileSync('index.html', modifiedIndex);

‎docs/src/footer.inc.html‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,16 @@
55
<script type="text/javascript" src="libs/codemirror/mode/javascript/javascript.js"></script>
66

77
<script type="text/javascript">
8+
function toggleMenu() {
9+
const menu = document.querySelector('.toc-container');
10+
menu.classList.toggle('open');
11+
menu.addEventListener('click', function (e) {
12+
if (e.target.tagName === 'A') {
13+
menu.classList.remove('open');
14+
}
15+
});
16+
}
17+
818
(function ($) {
919
$('code.lang-js').each(function () {
1020
var code = this;
@@ -16,7 +26,9 @@
1626
{
1727
value: code.innerHTML.trim(),
1828
indentUnit: 4,
19-
mode: 'javascript'
29+
mode: 'javascript',
30+
lineWrapping: true,
31+
scrollbarStyle: 'null',
2032
}
2133
);
2234

@@ -37,15 +49,17 @@
3749
// evaluate script
3850
var src = cm.getDoc().getValue();
3951
//resDisplay.html('');
52+
chroma.setLabWhitePoint('D65');
4053
try {
41-
var s = src.split(';').map(eval);
54+
var s = src.split(';').filter(d => d).map(eval);
4255
resDisplay.html(
4356
'<ol><li>' +
4457
s
4558
.map(resRec)
46-
.filter(function (d) {
47-
return d !== undefined;
48-
})
59+
.map(d => d || '&nbsp;')
60+
// .filter(function (d) {
61+
// return d !== undefined;
62+
// })
4963
.join('</li><li>') +
5064
'</li></ol>'
5165
);
@@ -139,16 +153,20 @@
139153
}
140154

141155
try {
142-
var col = chroma(val),
143-
l = col.oklch()[0];
144-
span.attr(
145-
'style',
146-
[
147-
'background-color:' + col.hex(),
148-
'color:' + (l < 0.7 ? 'white' : 'black'),
149-
'opacity:' + col.alpha()
150-
].join(';')
151-
);
156+
if (chroma.valid(val)) {
157+
const col = chroma(val);
158+
const l = col.oklch()[0];
159+
const isCSS = /[a-z]+\([^\)]+\)/.test(val)
160+
span.attr(
161+
'style',
162+
[
163+
'background-color:' + (isCSS ? val : col.hex()),
164+
'color:' + (l < 0.7 ? 'white' : 'black'),
165+
'opacity:' + col.alpha()
166+
].join(';')
167+
);
168+
169+
}
152170
} catch (e) {
153171
//console.log(e);
154172
span.attr('style', '');

0 commit comments

Comments
 (0)