diff --git a/editions/tw5.com/tiddlers/concepts/Colour Spaces.tid b/editions/tw5.com/tiddlers/concepts/Colour Spaces.tid index 8894bfd9c..0eebb2581 100644 --- a/editions/tw5.com/tiddlers/concepts/Colour Spaces.tid +++ b/editions/tw5.com/tiddlers/concepts/Colour Spaces.tid @@ -1,6 +1,10 @@ +created: 20260718221135000 +modified: 20260720103000000 +tags: Concepts title: Colour Spaces +type: text/vnd.tiddlywiki -The list of currently supported colour spaces is given below. See the [[color.js website|https://colorjs.io/docs/spaces]] for details. +The [[Colour Operators]] are backed by the [[color.js|https://colorjs.io/]] library, which supports the colour spaces below. See the [[color.js website|https://colorjs.io/docs/spaces]] for details of each space. * ''a98rgb-linear'' * ''a98rgb'' diff --git a/editions/tw5.com/tiddlers/concepts/ColourPalettes.tid b/editions/tw5.com/tiddlers/concepts/ColourPalettes.tid index 04da69168..4084600fe 100644 --- a/editions/tw5.com/tiddlers/concepts/ColourPalettes.tid +++ b/editions/tw5.com/tiddlers/concepts/ColourPalettes.tid @@ -1,5 +1,5 @@ created: 20140216102454178 -modified: 20260719103738000 +modified: 20260720103000000 tags: Concepts title: ColourPalettes type: text/vnd.tiddlywiki @@ -16,6 +16,17 @@ tiddler-controls-foreground-selected: [tf.interpolate-colours[tiddler-background For backwards compatibility, entries of the classic form `<>` are automatically converted to the equivalent filter `[tf.colour[name]]`. Other WikiText constructs are not supported, as palette entries are no longer wikified. +!! Functions for palette entries + +Palette entries can use these core functions: + +;<<.var tf.colour>> +: Returns the value of the palette entry named in its single parameter +;<<.var tf.interpolate-colours>> +: Blends the two palette entries named in its first two parameters, in the OKLCH colour space. The third parameter is the weight of the blend, from 0 (entirely the first entry) to 1 (entirely the second entry) +;<<.var tf.check-colour-contrast>> +: Used by [[readability tests|Palette Readability Tests]] to check the contrast between two entries + The system tiddler [[$:/palette]] always contains the title of the currently selected palette tiddler. You can switch palettes with the [[Palette Chooser]]. !! Palette compilation @@ -36,7 +47,7 @@ Palette tiddlers have the following fields: |description |Displayed in the palette chooser | |color-scheme |<<.from-version "5.5.0">> Optional filter determining the active [[colour scheme|Colour Schemes]] | |palette-import |<<.from-version "5.5.0">> Optional title of another palette to import; see [[Palette Inheritance]] | -|settings |<<.from-version "5.5.0">> Optional title of a settings panel shown beneath the chooser; see [[Customising a Palette]] | +|settings |<<.from-version "5.5.0">> Optional title of a settings panel shown beneath the chooser; see [[Palette Settings]] | |category |<<.from-version "5.5.0">> Optional descriptive category | |text |`name: value` colour definitions | @@ -69,7 +80,7 @@ The [[background action|Background Actions]] <<.tid "$:/core/background-actions/ !! Further reading ;Using palettes -: [[Palette Chooser]], [[Automatic Palette Switching]], [[Customising a Palette]], [[Palettes and Themes]] +: [[Palette Chooser]], [[Automatic Palette Switching]], [[Palette Settings]], [[Palettes and Themes]] ;Writing palettes : [[Palette Inheritance]], [[Colour Schemes]], [[Palette Readability Tests]], [[colour Macro]] ;Reference diff --git a/editions/tw5.com/tiddlers/concepts/Palette Readability Tests.tid b/editions/tw5.com/tiddlers/concepts/Palette Readability Tests.tid index 56a38ccb2..251b2b021 100644 --- a/editions/tw5.com/tiddlers/concepts/Palette Readability Tests.tid +++ b/editions/tw5.com/tiddlers/concepts/Palette Readability Tests.tid @@ -1,10 +1,10 @@ created: 20260718221135000 -modified: 20260718221135000 +modified: 20260720103000000 tags: Concepts title: Palette Readability Tests type: text/vnd.tiddlywiki -<<.from-version "5.5.0">> A palette can include tests that check its colours work well together. Failing tests are reported at the bottom of the [[Palette Chooser]], where they warn the user that the current combination of colours may be hard to read. +<<.from-version "5.5.0">> A palette can include tests that check its colours work well together. Failing tests are reported beneath the palette cards in the [[Palette Chooser]], where they warn the user that the current combination of colours may be hard to read. A readability test is a palette entry whose name begins with `?`. Like any other entry, its value is a filter expression that is evaluated when the palette is [[compiled|ColourPalettes]]. The filter is expected to return the text ''ok'' if the test passes, or a message describing the problem if it fails: diff --git a/editions/tw5.com/tiddlers/features/Palette Chooser.tid b/editions/tw5.com/tiddlers/features/Palette Chooser.tid index 431156e22..ba3e885d9 100644 --- a/editions/tw5.com/tiddlers/features/Palette Chooser.tid +++ b/editions/tw5.com/tiddlers/features/Palette Chooser.tid @@ -1,5 +1,5 @@ created: 20260718221135000 -modified: 20260718221135000 +modified: 20260720103000000 tags: Features title: Palette Chooser type: text/vnd.tiddlywiki @@ -17,8 +17,8 @@ Each available palette is shown as a card with a preview of its colours. Click a Beneath the chooser you may also see: * Any failures reported by the current palette's [[readability tests|Palette Readability Tests]] -* A settings panel, if the current palette offers customisation options -- see [[Customising a Palette]] -* A ''Show editor'' button that reveals the palette editor, where the individual entries of the current palette can be edited +* A settings panel, if the current palette offers customisation options -- see [[Palette Settings]] +* A ''show editor'' button that reveals the palette editor, where the individual entries of the current palette can be edited The <<.icon $:/core/images/palette>> ''palette'' button on the <<.sidebar-tab Tools>> sidebar tab provides a compact version of the same chooser. diff --git a/editions/tw5.com/tiddlers/features/Customising a Palette.tid b/editions/tw5.com/tiddlers/features/Palette Settings.tid similarity index 88% rename from editions/tw5.com/tiddlers/features/Customising a Palette.tid rename to editions/tw5.com/tiddlers/features/Palette Settings.tid index 3551d0e0d..9d4ee7264 100644 --- a/editions/tw5.com/tiddlers/features/Customising a Palette.tid +++ b/editions/tw5.com/tiddlers/features/Palette Settings.tid @@ -1,7 +1,7 @@ created: 20260718221135000 -modified: 20260718221135000 +modified: 20260720103000000 tags: Features -title: Customising a Palette +title: Palette Settings type: text/vnd.tiddlywiki <<.from-version "5.5.0">> Some palettes offer settings that let you adjust their colours without editing the palette directly. @@ -10,6 +10,6 @@ The core palette ''~TwentyTwenties'' is built from a small set of base colours: Your changes are stored in the palette tiddler itself, so they are saved with the wiki like any other change. -For finer control over individual palette entries, use the ''Show editor'' button beneath the chooser instead. +For finer control over individual palette entries, use the ''show editor'' button beneath the chooser instead. Palette authors can offer settings for their own palettes with the <<.field settings>> field, described in ColourPalettes. diff --git a/editions/tw5.com/tiddlers/filters/changecount.tid b/editions/tw5.com/tiddlers/filters/changecount.tid index 1e365dcba..2d9b0dd1a 100644 --- a/editions/tw5.com/tiddlers/filters/changecount.tid +++ b/editions/tw5.com/tiddlers/filters/changecount.tid @@ -1,5 +1,5 @@ created: 20260718221135000 -modified: 20260718221135000 +modified: 20260720103000000 tags: [[Filter Operators]] title: changecount Operator caption: changecount @@ -18,3 +18,5 @@ The operator is useful in contexts such as the track filters of [[Background Act ``` See also the <<.mlink changecount>> macro, which returns the change count of the current tiddler. + +<<.operator-examples "changecount">> diff --git a/editions/tw5.com/tiddlers/filters/colour-best-contrast.tid b/editions/tw5.com/tiddlers/filters/colour-best-contrast.tid index 0fad5ef03..2e853512d 100644 --- a/editions/tw5.com/tiddlers/filters/colour-best-contrast.tid +++ b/editions/tw5.com/tiddlers/filters/colour-best-contrast.tid @@ -1,5 +1,5 @@ created: 20260718221135000 -modified: 20260718221135000 +modified: 20260720103000000 tags: [[Filter Operators]] [[Colour Operators]] title: colour-best-contrast Operator caption: colour-best-contrast @@ -24,3 +24,5 @@ The result is <<.value navy>>. A typical use is choosing a foreground colour tha See also the following related operators: * <<.olink colour-contrast>> to measure the contrast between pairs of colours + +<<.operator-examples "colour-best-contrast">> diff --git a/editions/tw5.com/tiddlers/filters/colour-contrast.tid b/editions/tw5.com/tiddlers/filters/colour-contrast.tid index 1b3f18f6f..731fce858 100644 --- a/editions/tw5.com/tiddlers/filters/colour-contrast.tid +++ b/editions/tw5.com/tiddlers/filters/colour-contrast.tid @@ -1,5 +1,5 @@ created: 20260718221135000 -modified: 20260718221135000 +modified: 20260720103000000 tags: [[Filter Operators]] [[Colour Operators]] title: colour-contrast Operator caption: colour-contrast @@ -26,3 +26,5 @@ The [[readability tests|Palette Readability Tests]] of the core palettes use thi See also the following related operators: * <<.olink colour-best-contrast>> to choose the colour that contrasts best with a target colour + +<<.operator-examples "colour-contrast">> diff --git a/editions/tw5.com/tiddlers/filters/colour-darken.tid b/editions/tw5.com/tiddlers/filters/colour-darken.tid index c223700b6..f8e57d31e 100644 --- a/editions/tw5.com/tiddlers/filters/colour-darken.tid +++ b/editions/tw5.com/tiddlers/filters/colour-darken.tid @@ -1,5 +1,5 @@ created: 20260718221135000 -modified: 20260718221135000 +modified: 20260720103000000 tags: [[Filter Operators]] [[Colour Operators]] title: colour-darken Operator caption: colour-darken @@ -24,3 +24,5 @@ See also the following related operators: * <<.olink colour-lighten>> to lighten a colour value * <<.olink colour-set-oklch>> to set the lightness of a colour value to an absolute level + +<<.operator-examples "colour-darken">> diff --git a/editions/tw5.com/tiddlers/filters/colour-get-oklch.tid b/editions/tw5.com/tiddlers/filters/colour-get-oklch.tid index 41cc39789..fc7b8b479 100644 --- a/editions/tw5.com/tiddlers/filters/colour-get-oklch.tid +++ b/editions/tw5.com/tiddlers/filters/colour-get-oklch.tid @@ -1,11 +1,11 @@ created: 20241117161528913 -modified: 20260718221135000 +modified: 20260720103000000 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-suffix: "l", "c" or "h" to indicate which component of the colour to retrieve; defaults to "l" op-output: the values of the specified component of the input colours <<.from-version "5.5.0">> See ColourPalettes for background. @@ -19,7 +19,7 @@ The <<.op colour-get-oklch>> operator is used to retrieve components of colour v 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: +For example, this filter expression will get the lightness of the current page background colour: ``` [function[colour],[page-background]colour-get-oklch:l[]] @@ -31,3 +31,5 @@ See also the following related operators: * <<.olink colour-lighten>> to lighten a colour value * <<.olink colour-darken>> to darken a colour value +<<.operator-examples "colour-get-oklch">> + diff --git a/editions/tw5.com/tiddlers/filters/colour-lighten.tid b/editions/tw5.com/tiddlers/filters/colour-lighten.tid index 11086617e..6e05f6914 100644 --- a/editions/tw5.com/tiddlers/filters/colour-lighten.tid +++ b/editions/tw5.com/tiddlers/filters/colour-lighten.tid @@ -1,5 +1,5 @@ created: 20260718221135000 -modified: 20260718221135000 +modified: 20260720103000000 tags: [[Filter Operators]] [[Colour Operators]] title: colour-lighten Operator caption: colour-lighten @@ -24,3 +24,5 @@ See also the following related operators: * <<.olink colour-darken>> to darken a colour value * <<.olink colour-set-oklch>> to set the lightness of a colour value to an absolute level + +<<.operator-examples "colour-lighten">> diff --git a/editions/tw5.com/tiddlers/filters/colour-set-alpha.tid b/editions/tw5.com/tiddlers/filters/colour-set-alpha.tid index 65937cceb..c73f4deca 100644 --- a/editions/tw5.com/tiddlers/filters/colour-set-alpha.tid +++ b/editions/tw5.com/tiddlers/filters/colour-set-alpha.tid @@ -1,5 +1,5 @@ created: 20260718221135000 -modified: 20260718221135000 +modified: 20260720103000000 tags: [[Filter Operators]] [[Colour Operators]] title: colour-set-alpha Operator caption: colour-set-alpha @@ -23,3 +23,5 @@ For example, this filter expression makes the current foreground colour half tra See also the following related operators: * <<.olink colour-set-oklch>> to modify the lightness, chroma or hue of a colour value + +<<.operator-examples "colour-set-alpha">> diff --git a/editions/tw5.com/tiddlers/filters/colour-set-oklch.tid b/editions/tw5.com/tiddlers/filters/colour-set-oklch.tid index dc3557ce0..1b7323ef0 100644 --- a/editions/tw5.com/tiddlers/filters/colour-set-oklch.tid +++ b/editions/tw5.com/tiddlers/filters/colour-set-oklch.tid @@ -1,11 +1,11 @@ created: 20241117161528913 -modified: 20260719103738000 +modified: 20260720103000000 tags: [[Filter Operators]] [[Colour Operators]] 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 +op-suffix: "l", "c" or "h" to indicate which component of the colour to modify; defaults to "l" op-parameter: value of the property to modify op-output: the values of the modified colours diff --git a/editions/tw5.com/tiddlers/filters/examples/changecount.tid b/editions/tw5.com/tiddlers/filters/examples/changecount.tid new file mode 100644 index 000000000..5ac38b6c7 --- /dev/null +++ b/editions/tw5.com/tiddlers/filters/examples/changecount.tid @@ -0,0 +1,8 @@ +created: 20260720103000000 +modified: 20260720103000000 +tags: [[changecount Operator]] [[Operator Examples]] +title: changecount Operator (Examples) +type: text/vnd.tiddlywiki + +<<.operator-example 1 "[[HelloThere]changecount[]]" "a tiddler that has not changed during this session has a change count of 0">> +<<.operator-example 2 "[[$:/StoryList]changecount[]]" "the story list changes each time a tiddler is opened or closed">> diff --git a/editions/tw5.com/tiddlers/filters/examples/colour-best-contrast.tid b/editions/tw5.com/tiddlers/filters/examples/colour-best-contrast.tid new file mode 100644 index 000000000..ff1967c75 --- /dev/null +++ b/editions/tw5.com/tiddlers/filters/examples/colour-best-contrast.tid @@ -0,0 +1,8 @@ +created: 20260720103000000 +modified: 20260720103000000 +tags: [[colour-best-contrast Operator]] [[Operator Examples]] +title: colour-best-contrast Operator (Examples) +type: text/vnd.tiddlywiki + +<<.operator-example 1 "[[navy]] [[yellow]] [[white]] +[colour-best-contrast[]]" "navy is more readable than yellow against a white background">> +<<.operator-example 2 "[[navy]] [[yellow]] [[#333333]] +[colour-best-contrast[]]" "against a dark grey background, yellow is more readable">> diff --git a/editions/tw5.com/tiddlers/filters/examples/colour-contrast.tid b/editions/tw5.com/tiddlers/filters/examples/colour-contrast.tid new file mode 100644 index 000000000..c26757ee1 --- /dev/null +++ b/editions/tw5.com/tiddlers/filters/examples/colour-contrast.tid @@ -0,0 +1,9 @@ +created: 20260720103000000 +modified: 20260720103000000 +tags: [[colour-contrast Operator]] [[Operator Examples]] +title: colour-contrast Operator (Examples) +type: text/vnd.tiddlywiki + +<<.operator-example 1 "[[black]] [[white]] +[colour-contrast[]]" "black on white has the maximum contrast of approximately 100">> +<<.operator-example 2 "[[navy]] [[yellow]] +[colour-contrast[]]" "navy and yellow contrast strongly">> +<<.operator-example 3 "[[black]] [[silver]] [[white]] +[colour-contrast[]]" "three input colours give two contrast values">> diff --git a/editions/tw5.com/tiddlers/filters/examples/colour-darken.tid b/editions/tw5.com/tiddlers/filters/examples/colour-darken.tid new file mode 100644 index 000000000..8ef7180e6 --- /dev/null +++ b/editions/tw5.com/tiddlers/filters/examples/colour-darken.tid @@ -0,0 +1,8 @@ +created: 20260720103000000 +modified: 20260720103000000 +tags: [[colour-darken Operator]] [[Operator Examples]] +title: colour-darken Operator (Examples) +type: text/vnd.tiddlywiki + +<<.operator-example 1 "[[yellow]colour-darken[0.3]]" "lowering the lightness of yellow by 30% gives an olive">> +<<.operator-example 2 "[[white]colour-darken[0.5]]" "darkening white by half gives a mid grey">> diff --git a/editions/tw5.com/tiddlers/filters/examples/colour-get-oklch.tid b/editions/tw5.com/tiddlers/filters/examples/colour-get-oklch.tid new file mode 100644 index 000000000..facf14fc6 --- /dev/null +++ b/editions/tw5.com/tiddlers/filters/examples/colour-get-oklch.tid @@ -0,0 +1,9 @@ +created: 20260720103000000 +modified: 20260720103000000 +tags: [[colour-get-oklch Operator]] [[Operator Examples]] +title: colour-get-oklch Operator (Examples) +type: text/vnd.tiddlywiki + +<<.operator-example 1 "[[#5778d8]colour-get-oklch[]]" "with no suffix, the lightness is returned">> +<<.operator-example 2 "[[#5778d8]colour-get-oklch:c[]]" "the chroma of the same blue">> +<<.operator-example 3 "[[#5778d8]colour-get-oklch:h[]]" "the hue of the same blue">> diff --git a/editions/tw5.com/tiddlers/filters/examples/colour-lighten.tid b/editions/tw5.com/tiddlers/filters/examples/colour-lighten.tid new file mode 100644 index 000000000..372acbaf9 --- /dev/null +++ b/editions/tw5.com/tiddlers/filters/examples/colour-lighten.tid @@ -0,0 +1,8 @@ +created: 20260720103000000 +modified: 20260720103000000 +tags: [[colour-lighten Operator]] [[Operator Examples]] +title: colour-lighten Operator (Examples) +type: text/vnd.tiddlywiki + +<<.operator-example 1 "[[navy]colour-lighten[0.5]]" "raising the lightness of navy by half gives a brighter blue">> +<<.operator-example 2 "[[#404040]colour-lighten[1]]" "a parameter of 1 doubles the lightness of this dark grey">> diff --git a/editions/tw5.com/tiddlers/filters/examples/colour-set-alpha.tid b/editions/tw5.com/tiddlers/filters/examples/colour-set-alpha.tid new file mode 100644 index 000000000..0adac5184 --- /dev/null +++ b/editions/tw5.com/tiddlers/filters/examples/colour-set-alpha.tid @@ -0,0 +1,8 @@ +created: 20260720103000000 +modified: 20260720103000000 +tags: [[colour-set-alpha Operator]] [[Operator Examples]] +title: colour-set-alpha Operator (Examples) +type: text/vnd.tiddlywiki + +<<.operator-example 1 "[[red]colour-set-alpha[0.5]]" "making red half transparent">> +<<.operator-example 2 "[[#5778d8]colour-set-alpha[0.25]]" "setting the alpha of a hex colour returns an eight digit hex value">> diff --git a/editions/tw5.com/tiddlers/releasenotes/5.5.0/#8702 - wikitext-palette-entries.tid b/editions/tw5.com/tiddlers/releasenotes/5.5.0/#8702 - wikitext-palette-entries.tid index 2aeef1415..023bbc2ee 100644 --- a/editions/tw5.com/tiddlers/releasenotes/5.5.0/#8702 - wikitext-palette-entries.tid +++ b/editions/tw5.com/tiddlers/releasenotes/5.5.0/#8702 - wikitext-palette-entries.tid @@ -1,11 +1,11 @@ title: $:/changenotes/5.5.0/#8702/impacts/wikitext-palette-entries changenote: $:/changenotes/5.5.0/#8702 created: 20250901000000000 -modified: 20260718000000000 +modified: 20260720103000000 tags: $:/tags/ImpactNote -description: Palette entries using wikitext other than the `<>` macro will no longer work -impact-type: deprecation +description: Palette entries using WikiText other than the `<>` macro will no longer work +impact-type: compatibility-break -Before v5.5.0, TiddlyWiki palette entries were interpreted as WikiText. In practice this was almost always used for the familiar `<>` macro, but any valid wikitext could be used, including widgets and conditionals. +Before v5.5.0, TiddlyWiki palette entries were interpreted as WikiText. In practice this was almost always used for the familiar `<>` macro, but any valid WikiText could be used, including widgets and conditionals. -From v5.5.0 onwards, palette entries are treated as filter expressions. Entries using the `<>` macro continue to work unchanged: they are automatically transformed into the equivalent filter expression `[tf.colour[...]]`. However, any other wikitext constructs are not supported and will not function correctly. +From v5.5.0 onwards, palette entries are treated as filter expressions. Entries using the `<>` macro continue to work unchanged: they are automatically transformed into the equivalent filter expression `[tf.colour[...]]`. However, any other WikiText constructs are not supported and will not function correctly. diff --git a/editions/tw5.com/tiddlers/releasenotes/5.5.0/#8702.tid b/editions/tw5.com/tiddlers/releasenotes/5.5.0/#8702.tid index 9925e761a..c9cf16e77 100644 --- a/editions/tw5.com/tiddlers/releasenotes/5.5.0/#8702.tid +++ b/editions/tw5.com/tiddlers/releasenotes/5.5.0/#8702.tid @@ -1,4 +1,6 @@ title: $:/changenotes/5.5.0/#8702 +created: 20250901000000000 +modified: 20260720103000000 description: Colour palette improvements release: 5.5.0 tags: $:/tags/ChangeNote @@ -7,7 +9,7 @@ change-category: hackability github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/8702 github-contributors: Jermolene -This PR brings several new features for end users: +Colour palettes gain several new features for end users: * Automatically switching between a dark and light palette as the operating system setting changes (and to do so without making the wiki dirty) * Customisation options for palettes. For example, users might choose a base hue, with the colours of the palette automatically adapting to it @@ -15,8 +17,8 @@ This PR brings several new features for end users: There are also new capabilities for palette authors: -* Inheritance for palettes, making it easy to create chains of variants of a base palette -* Self contained palettes that can contain both dark and light variants (or variants for any other custom scheme) +* Inheritance for palettes, so that palettes can inherit be defined as a chain of changes applied in turn to a base palette +* Self-contained palettes that can contain both dark and light variants (or variants for any other custom scheme) * Automatic readability tests that palettes can use to check colour contrast, with the results shown in the palette chooser Palette entries are now defined as filters that are evaluated, rather than wikitext that is wikified. When switching to a new palette, its colours are compiled to raw CSS colour values in the system tiddler `$:/temp/palette-colours`, which also allows the `<>` macro to become a function that can be used as the value of a style attribute.