mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2026-07-22 03:28:54 +00:00
Docs updates
This commit is contained in:
Jeremy Ruston
@@ -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''
|
||||
|
||||
@@ -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 `<<colour name>>` 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
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
+3
-3
@@ -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.
|
||||
@@ -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">>
|
||||
|
||||
@@ -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">>
|
||||
|
||||
@@ -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">>
|
||||
|
||||
@@ -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">>
|
||||
|
||||
@@ -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">>
|
||||
|
||||
|
||||
@@ -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">>
|
||||
|
||||
@@ -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">>
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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">>
|
||||
@@ -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">>
|
||||
@@ -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">>
|
||||
@@ -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">>
|
||||
@@ -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">>
|
||||
@@ -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">>
|
||||
@@ -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">>
|
||||
@@ -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 `<<colour ...>>` macro will no longer work
|
||||
impact-type: deprecation
|
||||
description: Palette entries using WikiText other than the `<<colour ...>>` 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 `<<colour ...>>` 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 `<<colour ...>>` 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 `<<colour ...>>` 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 `<<colour ...>>` 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.
|
||||
|
||||
@@ -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 `<<colour>>` macro to become a function that can be used as the value of a style attribute.
|
||||
|
||||
Reference in New Issue
Block a user