mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-06-21 07:54:07 +00:00
Code Issues Releases Wiki Activity

Refactor colour-oklch operator to colour-set-oklch

Browse Source
This commit is contained in:
Jeremy Ruston 2024-12-15 11:56:49 +00:00
parent b1fcb18d9e
commit 1df0ac486b
4 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/modules/filters/colour-ops.js
View File

@ -22,7 +22,7 @@ exports["colour-darken"] = makeSerialColourOperator(function (colour, operator,
return colour.darken($tw.utils.parseNumber(operator.operand)); return colour.darken($tw.utils.parseNumber(operator.operand));
}); });
exports["colour-oklch"] = makeSerialColourOperator(function (colour, operator, options) { exports["colour-set-oklch"] = makeSerialColourOperator(function (colour, operator, options) {
var prop = ((operator.suffixes || [])[0] || ["l"])[0]; var prop = ((operator.suffixes || [])[0] || ["l"])[0];
if(["l","c","h"].indexOf(prop) !== -1) { if(["l","c","h"].indexOf(prop) !== -1) {
colour.oklch[prop] = $tw.utils.parseNumber(operator.operand); colour.oklch[prop] = $tw.utils.parseNumber(operator.operand);

26
core/palette-templates/TwentyTwenties.tid
View File

@ -23,18 +23,18 @@ base-tertiary: rgb(135, 239, 70)
?code-contrast: [tf.check-colour-contrast[code-background],[code-foreground],[25]] ?code-contrast: [tf.check-colour-contrast[code-background],[code-foreground],[25]]
# Colour definitions # Colour definitions
alert-background: [function[colour],[base-secondary]colour-oklch:l[0.9]] alert-background: [function[colour],[base-secondary]colour-set-oklch:l[0.9]]
alert-border: [function[colour],[base-secondary]colour-oklch:l[0.5]] alert-border: [function[colour],[base-secondary]colour-set-oklch:l[0.5]]
alert-highlight: [function[colour],[base-primary]colour-oklch:l[0.6]] alert-highlight: [function[colour],[base-primary]colour-set-oklch:l[0.6]]
alert-muted-foreground: [function[colour],[foreground]colour-oklch:l[0.6]] alert-muted-foreground: [function[colour],[foreground]colour-set-oklch:l[0.6]]
background: [function[colour],[base-background]colour-oklch:l[0.9]] background: [function[colour],[base-background]colour-set-oklch:l[0.9]]
blockquote-bar: [function[colour],[muted-foreground]] blockquote-bar: [function[colour],[muted-foreground]]
button-background: button-background:
button-foreground: button-foreground:
button-border: button-border:
code-background: [function[colour],[base-tertiary]colour-oklch:l[0.9]] code-background: [function[colour],[base-tertiary]colour-set-oklch:l[0.9]]
code-border: [function[colour],[base-tertiary]color-oklch:l[0.5]] code-border: [function[colour],[base-tertiary]color-oklch:l[0.5]]
code-foreground: [function[colour],[base-tertiary]colour-oklch:l[0.3]] code-foreground: [function[colour],[base-tertiary]colour-set-oklch:l[0.3]]
diff-delete-background: [function[colour],[]] diff-delete-background: [function[colour],[]]
diff-delete-foreground: [function[colour],[foreground]] diff-delete-foreground: [function[colour],[foreground]]
diff-equal-background: diff-equal-background:
@ -74,11 +74,11 @@ modal-footer-border: [function[colour],[]]
modal-header-border: [function[colour],[]] modal-header-border: [function[colour],[]]
muted-foreground: [function[colour],[]] muted-foreground: [function[colour],[]]
network-activity-foreground: [function[colour],[]] network-activity-foreground: [function[colour],[]]
notification-background: [function[colour],[base-tertiary]colour-oklch:l[0.9]] notification-background: [function[colour],[base-tertiary]colour-set-oklch:l[0.9]]
notification-border: [function[colour],[base-tertiary]colour-oklch:l[0.2]] notification-border: [function[colour],[base-tertiary]colour-set-oklch:l[0.2]]
page-background: [function[colour],[base-background]colour-oklch:l[0.7]] page-background: [function[colour],[base-background]colour-set-oklch:l[0.7]]
pre-background: [function[colour],[base-tertiary]colour-oklch:l[0.98]] pre-background: [function[colour],[base-tertiary]colour-set-oklch:l[0.98]]
pre-border: [function[colour],[base-tertiary]colour-oklch:l[0.3]] pre-border: [function[colour],[base-tertiary]colour-set-oklch:l[0.3]]
selection-background: selection-background:
selection-foreground: selection-foreground:
select-tag-background: select-tag-background:
@ -120,7 +120,7 @@ tag-foreground: [function[colour],[]]
testcase-accent-level-1: [function[colour],[]] testcase-accent-level-1: [function[colour],[]]
testcase-accent-level-2: [function[colour],[]] testcase-accent-level-2: [function[colour],[]]
testcase-accent-level-3: [function[colour],[]] testcase-accent-level-3: [function[colour],[]]
tiddler-background: [function[colour],[base-background]colour-oklch:l[.9]] tiddler-background: [function[colour],[base-background]colour-set-oklch:l[.9]]
tiddler-border: [function[colour],[background]] tiddler-border: [function[colour],[background]]
tiddler-controls-foreground-hover: [function[colour],[]] tiddler-controls-foreground-hover: [function[colour],[]]
tiddler-controls-foreground-selected: [function[colour],[]] tiddler-controls-foreground-selected: [function[colour],[]]

6
editions/test/tiddlers/tests/data/operators/colour/ColourOklchL.tid → editions/test/tiddlers/tests/data/operators/colour/ColourSetOklch.tid
View File

@ -1,5 +1,5 @@
title: Operators/Colour/ColourOklchL title: Operators/Colour/ColourSetOklch
description: Oklch colour function description: colour-set-oklch function
type: text/vnd.tiddlywiki-multiple type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]] tags: [[$:/tags/wiki-test-spec]]
@ -10,7 +10,7 @@ title: Output
+ +
title: Filter title: Filter
=[[#5778d8]colour-oklch[0.5]] =[[#5778d8]colour-oklch:l[0.5]] +[join[,]] =[[#5778d8]colour-set-oklch[0.5]] =[[#5778d8]colour-set-oklch:l[0.5]] +[join[,]]
+ +
title: ExpectedResult title: ExpectedResult

9
editions/tw5.com/tiddlers/filters/colour-oklch.tid → editions/tw5.com/tiddlers/filters/colour-set-oklch.tid
View File

@ -1,8 +1,8 @@
created: 20241117161528913 created: 20241117161528913
modified: 20241117161528913 modified: 20241117161528913
tags: [[Filter Operators]] [[Colour Operators]] tags: [[Filter Operators]] [[Colour Operators]]
title: colour-oklch Operator title: colour-set-oklch Operator
caption: colour-oklch caption: colour-set-oklch
op-purpose: manipulate colour values in the OKLCH colour space op-purpose: manipulate colour values in the OKLCH colour space
op-input: a selection of colour values op-input: a selection of colour values
op-suffix: "l", "c" or "h" to indicate which component of the colour to modify op-suffix: "l", "c" or "h" to indicate which component of the colour to modify
@ -11,7 +11,7 @@ op-output: the values of the modified colours
<<.from-version "5.3.7">> See [[Colour Palettes]] for background. <<.from-version "5.3.7">> See [[Colour Palettes]] for background.
The <<.op colour-oklch>> operator is used to manipulate 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: The <<.op colour-set-oklch>> operator is used to manipulate 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 | |!Id |!Name |!Range |
|l |Lightness |0 – 1 | |l |Lightness |0 – 1 |
@ -23,11 +23,12 @@ The advantage of the OKLCH space is that it is perceptually uniform, meaning tha
For example, this filter expression will alter the lightness of the colour current page background colour to 0.1: For example, this filter expression will alter the lightness of the colour current page background colour to 0.1:
``` ```
[function[colour],[page-background]colour-oklch:l[0.1]] [function[colour],[page-background]colour-set-oklch:l[0.1]]
``` ```
See also the following related operators: See also the following related operators:
* <<.olink colour-get-oklch>> to retrieve a component of a colour value in the OKLCH colour space
* <<.olink colour-lighten>> to lighten a colour value * <<.olink colour-lighten>> to lighten a colour value
* <<.olink colour-darken>> to lighten a colour value * <<.olink colour-darken>> to lighten a colour value