Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Colour handling improvements #8702

Draft
wants to merge 62 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
62 commits
Select commit Hold shift + click to select a range
fb9c0d6
Replace 12 year old CSS colour parsing library
Jermolene Oct 21, 2024
93d1c05
Include colour.js license and mark version number
Jermolene Oct 21, 2024
467a1a4
Introduce wikify operator
Jermolene Oct 22, 2024
a23ee16
Rewrite colour macro as a function
Jermolene Oct 22, 2024
e1e73d2
Merge branch 'master' into colour-improvements
Jermolene Oct 23, 2024
1e5c69e
Fix typo
Jermolene Oct 23, 2024
4af573a
Fix nested colour definitions
Jermolene Oct 23, 2024
96b85ed
Fix up the tests
Jermolene Oct 24, 2024
d372729
Add colour-lighten and colour-darken operators
Jermolene Oct 24, 2024
b5a22e3
Remove obsolete comment
Jermolene Oct 25, 2024
fc36941
Improve colour palette switcher with previews
Jermolene Oct 25, 2024
151f61a
Palette chooser styling tweaks
Jermolene Oct 25, 2024
4445111
Merge branch 'master' into colour-improvements
Jermolene Oct 30, 2024
4f2754d
Merge branch 'master' into colour-improvements
Jermolene Oct 31, 2024
bc0fde6
Fix palette chooser when displayed in "Tools" dropdown
Jermolene Oct 31, 2024
85fa913
Merge branch 'master' into colour-improvements
Jermolene Nov 3, 2024
a8fb071
Add expertimental colour-oklch operator
Jermolene Nov 3, 2024
81b7bb4
Merge branch 'master' into colour-improvements
Jermolene Nov 4, 2024
ff5c846
Indentation for palette switcher
Jermolene Nov 4, 2024
23eccd1
Merge branch 'master' into colour-improvements
Jermolene Nov 4, 2024
c607440
Restore default styling for chosen chooser item
Jermolene Nov 5, 2024
348f717
Remove logging
Jermolene Nov 5, 2024
c3ce9ca
Testing Netlify CI
Jermolene Nov 6, 2024
a4d9303
Testing CI
Jermolene Nov 6, 2024
250e57c
Remove wikify operator and refactor palette preview
Jermolene Nov 7, 2024
1be89a2
Make preview templates tag driven and extensible
Jermolene Nov 8, 2024
f889157
Introduce new static palette architecture
Jermolene Nov 9, 2024
4e2f2be
Avoid redefining the colour function by adding a configuration variable
Jermolene Nov 9, 2024
b54d56e
Support for imported palettes
Jermolene Nov 9, 2024
297ae7e
Fix preview of filtered palettes
Jermolene Nov 10, 2024
38d5daa
Improve chooser chosen item highlight
Jermolene Nov 10, 2024
bad9517
Another fix for filtered palette previews
Jermolene Nov 10, 2024
46da161
Add aria labels to palette switcher
Jermolene Nov 11, 2024
1db8cf7
Merge branch 'master' into colour-improvements
Jermolene Nov 12, 2024
ad1b0fd
Palette tweaks
Jermolene Nov 12, 2024
21cd3b8
Merge branch 'master' into colour-improvements
Jermolene Nov 12, 2024
7de5f40
Merge branch 'master' into colour-improvements
Jermolene Nov 12, 2024
c2ee072
Merge branch 'master' into colour-improvements
Jermolene Nov 12, 2024
3faf9ba
Fix previews of filtered palettes
Jermolene Nov 14, 2024
8b59b61
Palette tweaks
Jermolene Nov 14, 2024
809465b
Merge branch 'master' into colour-improvements
Jermolene Nov 16, 2024
cfabc92
Update contrastcolour macro to use color.js
Jermolene Nov 16, 2024
b2d0c22
Componentise more preview components
Jermolene Nov 17, 2024
32ac671
Add alert preview
Jermolene Nov 17, 2024
b0828cc
Add notification preview
Jermolene Nov 17, 2024
3507b0f
Fix filtered palette previews
Jermolene Nov 17, 2024
84bef54
Docs for colour-oklch operator
Jermolene Nov 18, 2024
76f2dec
Start fixing the TwentyTwenties palettes
Jermolene Nov 18, 2024
aa69c3a
Add colour-contrast operator
Jermolene Nov 18, 2024
cd5bbcd
Add contrast checks to TwentyTwenties palette
Jermolene Nov 18, 2024
9efcad9
Display test results at the bottom of the palette switcher
Jermolene Nov 19, 2024
fc695e7
Merge branch 'master' into colour-improvements
Jermolene Dec 5, 2024
6a66c49
Merge branch 'master' into colour-improvements
Jermolene Dec 14, 2024
6fe16bc
Fix colour for site title
Jermolene Dec 14, 2024
5a6eea7
Make the alert and notification previews be optional
Jermolene Dec 14, 2024
b1fcb18
Refactor for clearer variable names
Jermolene Dec 15, 2024
1df0ac4
Refactor colour-oklch operator to colour-set-oklch
Jermolene Dec 15, 2024
ae1d9f5
Add colour-get-oklch operator
Jermolene Dec 15, 2024
c1e36a1
Add colour-interpolate operator
Jermolene Dec 15, 2024
2640406
Include contrast value in contrast errors
Jermolene Dec 15, 2024
3c44532
Barebones docs for colour spaces
Jermolene Dec 15, 2024
2685fa7
Improvements to TwentyTwenties palettes
Jermolene Dec 15, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions core/modules/filters/colour-ops.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*\
title: $:/core/modules/filters/colour-ops.js
type: application/javascript
module-type: filteroperator

Filter operators for colour operations

\*/
(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

var Color = require("$:/core/modules/utils/dom/color.js").Color;

exports["colour-lighten"] = makeColourOperator(function (c, operator, options) {
return c.lighten($tw.utils.parseNumber(operator.operand));
});

exports["colour-darken"] = makeColourOperator(function (c, operator, options) {
return c.darken($tw.utils.parseNumber(operator.operand));
});

exports["colour-oklch"] = makeColourOperator(function (c, operator, options) {
var prop = ((operator.suffixes || [])[0] || ["l"])[0];
console.log("Prop",prop,$tw.utils.parseNumber(operator.operand))
if(["l","c","h"].indexOf(prop) !== -1) {
c.oklch[prop] = $tw.utils.parseNumber(operator.operand);
}
return c;
});

function makeColourOperator(fn) {
return function (source, operator, options) {
var results = [];
source(function (tiddler, title) {
var c = $tw.utils.parseCSSColorObject(title);
if (c) {
c = fn(c, operator, options);
results.push(c.display().toString());
} else {
results.push("");
}
});
return results;
};
}

})();
37 changes: 37 additions & 0 deletions core/modules/filters/wikify.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/*\
title: $:/core/modules/filters/wikify.js
type: application/javascript
module-type: filteroperator

Filter operator wikifying each string in the input list and returning the result as a list of strings

\*/
(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

/*
Export our filter function
*/
exports.wikify = function(source,operator,options) {
var output = operator.operands[0],
mode = operator.operands[1],
type = operator.operands[2],
results = [];
source(function(tiddler,title) {
var wikifier = new $tw.utils.Wikifier({
wiki: options.wiki,
widget: options.widget,
text: title,
type: type,
mode: mode,
output: output
});
results.push(wikifier.getResult());
});
return results;
};

})();
45 changes: 45 additions & 0 deletions core/modules/utils/dom/color-utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/*\
title: $:/core/modules/utils/color-utils.js
type: application/javascript
module-type: utils

Color.js related utilities

\*/
(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

var Color = require("$:/core/modules/utils/dom/color.js").Color;

/*
For backwards compatibility
*/
exports.parseCSSColor = function(colourString) {
var c = exports.parseCSSColorObject(colourString);
if(c) {
var rgb = c.srgb;
return [rgb[0],rgb[1],rgb[2],c.alpha];
} else {
return null;
}
};


/*
Preferred way to parse a Color.js colour
*/
exports.parseCSSColorObject = function(colourString) {
var Color = require("$:/core/modules/utils/dom/color.js").Color,
c = null;
try {
c = new Color(colourString);
} catch(e) {
// Return null if there is an error
}
return c;
};

})();
21 changes: 21 additions & 0 deletions core/modules/utils/dom/color.js/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2021 Lea Verou, Chris Lilley

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.
Loading
Loading