diff --git a/core/modules/filters/colour-ops.js b/core/modules/filters/colour-ops.js index c70893b69..1e5081da0 100644 --- a/core/modules/filters/colour-ops.js +++ b/core/modules/filters/colour-ops.js @@ -15,11 +15,19 @@ Filter operators for colour operations var Color = require("$:/core/modules/utils/dom/color.js").Color; exports["colour-lighten"] = makeSerialColourOperator(function (colour, operator, options) { - return colour.lighten($tw.utils.parseNumber(operator.operand)); + return colour.lighten($tw.utils.parseNumber(operator.operand)).display().toString(); }); exports["colour-darken"] = makeSerialColourOperator(function (colour, operator, options) { - return colour.darken($tw.utils.parseNumber(operator.operand)); + return colour.darken($tw.utils.parseNumber(operator.operand)).display().toString(); +}); + +exports["colour-get-oklch"] = makeSerialColourOperator(function (colour, operator, options) { + var prop = ((operator.suffixes || [])[0] || ["l"])[0]; + if(["l","c","h"].indexOf(prop) !== -1) { + colour = colour.oklch[prop]; + } + return colour.toString(); }); exports["colour-set-oklch"] = makeSerialColourOperator(function (colour, operator, options) { @@ -27,7 +35,7 @@ exports["colour-set-oklch"] = makeSerialColourOperator(function (colour, operato if(["l","c","h"].indexOf(prop) !== -1) { colour.oklch[prop] = $tw.utils.parseNumber(operator.operand); } - return colour; + return colour.display().toString(); }); exports["colour-contrast"] = makeParallelColourOperator(function (colours, operator, options) { @@ -51,7 +59,7 @@ function makeSerialColourOperator(fn) { var c = $tw.utils.parseCSSColorObject(title); if (c) { c = fn(c, operator, options); - results.push(c.display().toString()); + results.push(c); } else { results.push(""); } diff --git a/editions/test/tiddlers/tests/data/operators/colour/ColourGetOklch.tid b/editions/test/tiddlers/tests/data/operators/colour/ColourGetOklch.tid new file mode 100644 index 000000000..a1ba2ea51 --- /dev/null +++ b/editions/test/tiddlers/tests/data/operators/colour/ColourGetOklch.tid @@ -0,0 +1,21 @@ +title: Operators/Colour/ColourOklchL +description: colour-set-oklch function +type: text/vnd.tiddlywiki-multiple +tags: [[$:/tags/wiki-test-spec]] + +title: Output + +\parsermode inline +<$text text={{{ [subfilter{Filter}] }}}/> ++ +title: Filter + +=[[#5778d8]colour-get-oklch[]] +=[[#5778d8]colour-get-oklch:l[]] +=[[#5778d8]colour-get-oklch:c[]] +=[[#5778d8]colour-get-oklch:h[]] ++[fixed[3]join[,]] ++ +title: ExpectedResult + +0.595,0.595,0.151,267.432 \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/filters/colour-get-oklch.tid b/editions/tw5.com/tiddlers/filters/colour-get-oklch.tid new file mode 100644 index 000000000..9fb397ceb --- /dev/null +++ b/editions/tw5.com/tiddlers/filters/colour-get-oklch.tid @@ -0,0 +1,33 @@ +created: 20241117161528913 +modified: 20241117161528913 +tags: [[Filter Operators]] [[Colour Operators]] +title: colour-get-oklch Operator +caption: colour-get-oklch +op-purpose: retrieve components of colour values in the OKLCH colour space +op-input: a selection of colour values +op-suffix: "l", "c" or "h" to indicate which component of the colour to retrieve +op-output: the values of the specified component of the input colours + +<<.from-version "5.3.7">> See [[Colour Palettes]] for background. + +The <<.op colour-get-oklch>> operator is used to retrieve components of colour values in the [[OKLCH|https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch]] colour space. The OKLCH colour space expresses colours as three numbers: + +|!Id |!Name |!Range | +|l |Lightness |0 – 1 | +|c |Chroma |0 – 0.4 | +|h |Hue |0 – 360 | + +The advantage of the OKLCH space is that it is perceptually uniform, meaning that equal changes in the numbers correspond to equal changes in the perceived colour. + +For example, this filter expression will get the lightness of the colour current page background colour: + +``` +[function[colour],[page-background]colour-get-oklch:l[]] +``` + +See also the following related operators: + +* <<.olink colour-set-oklch>> to modify a component of a colour value in the OKLCH colour space +* <<.olink colour-lighten>> to lighten a colour value +* <<.olink colour-darken>> to lighten a colour value +