mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-01-23 15:36:52 +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));
});
exports["colour-oklch"] = makeSerialColourOperator(function (colour, operator, options) {
exports["colour-set-oklch"] = makeSerialColourOperator(function (colour, operator, options) {
var prop = ((operator.suffixes || [])[0] || ["l"])[0];
if(["l","c","h"].indexOf(prop) !== -1) {
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]]
# Colour definitions
alert-background: [function[colour],[base-secondary]colour-oklch:l[0.9]]
alert-border: [function[colour],[base-secondary]colour-oklch:l[0.5]]
alert-highlight: [function[colour],[base-primary]colour-oklch:l[0.6]]
alert-muted-foreground: [function[colour],[foreground]colour-oklch:l[0.6]]
background: [function[colour],[base-background]colour-oklch:l[0.9]]
alert-background: [function[colour],[base-secondary]colour-set-oklch:l[0.9]]
alert-border: [function[colour],[base-secondary]colour-set-oklch:l[0.5]]
alert-highlight: [function[colour],[base-primary]colour-set-oklch:l[0.6]]
alert-muted-foreground: [function[colour],[foreground]colour-set-oklch:l[0.6]]
background: [function[colour],[base-background]colour-set-oklch:l[0.9]]
blockquote-bar: [function[colour],[muted-foreground]]
button-background:
button-foreground:
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-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-foreground: [function[colour],[foreground]]
diff-equal-background:
@ -74,11 +74,11 @@ modal-footer-border: [function[colour],[]]
modal-header-border: [function[colour],[]]
muted-foreground: [function[colour],[]]
network-activity-foreground: [function[colour],[]]
notification-background: [function[colour],[base-tertiary]colour-oklch:l[0.9]]
notification-border: [function[colour],[base-tertiary]colour-oklch:l[0.2]]
page-background: [function[colour],[base-background]colour-oklch:l[0.7]]
pre-background: [function[colour],[base-tertiary]colour-oklch:l[0.98]]
pre-border: [function[colour],[base-tertiary]colour-oklch:l[0.3]]
notification-background: [function[colour],[base-tertiary]colour-set-oklch:l[0.9]]
notification-border: [function[colour],[base-tertiary]colour-set-oklch:l[0.2]]
page-background: [function[colour],[base-background]colour-set-oklch:l[0.7]]
pre-background: [function[colour],[base-tertiary]colour-set-oklch:l[0.98]]
pre-border: [function[colour],[base-tertiary]colour-set-oklch:l[0.3]]
selection-background:
selection-foreground:
select-tag-background:
@ -120,7 +120,7 @@ tag-foreground: [function[colour],[]]
testcase-accent-level-1: [function[colour],[]]
testcase-accent-level-2: [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-controls-foreground-hover: [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
description: Oklch colour function
title: Operators/Colour/ColourSetOklch
description: colour-set-oklch function
type: text/vnd.tiddlywiki-multiple
tags: [[$:/tags/wiki-test-spec]]
@ -10,7 +10,7 @@ title: Output
+
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

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
modified: 20241117161528913
tags: [[Filter Operators]] [[Colour Operators]]
title: colour-oklch Operator
caption: colour-oklch
title: colour-set-oklch Operator
caption: colour-set-oklch
op-purpose: manipulate 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 modify
@ -11,7 +11,7 @@ op-output: the values of the modified colours
<<.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 |
|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:
```
[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:
* <<.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-darken>> to lighten a colour value